@modern-js/sandpack-react 0.0.0-next-1693385366305

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @modern-js/sandpack-react
+
+## 0.0.0-next-1693385366305
+
+### Patch Changes
+
+- 33a2b1a00: feat: add @modern-js/sandpack-react package

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021-present Modern.js
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,26 @@
+<p align="center">
+  <a href="https://modernjs.dev" target="blank"><img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ylaelkeh7nuhfnuhf/modernjs-cover.png" width="300" alt="Modern.js Logo" /></a>
+</p>
+
+<h1 align="center">Modern.js</h1>
+
+<p align="center">
+  A Progressive React Framework for modern web development.
+</p>
+
+## Getting Started
+
+Please follow [Quick Start](https://modernjs.dev/en/guides/get-started/quick-start) to get started with Modern.js.
+
+## Documentation
+
+- [English Documentation](https://modernjs.dev/en/)
+- [中文文档](https://modernjs.dev)
+
+## Contributing
+
+Please read the [Contributing Guide](https://github.com/web-infra-dev/modern.js/blob/main/CONTRIBUTING.md).
+
+## License
+
+Modern.js is [MIT licensed](https://github.com/web-infra-dev/modern.js/blob/main/LICENSE).

package/dist/cjs/index.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function() {
+    return ModernSandpack;
+  }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _sandpackreact = require("@codesandbox/sandpack-react");
+const _templates = require("./templates");
+function fileterFiles(files, removeFiles) {
+  if (removeFiles.length === 0) {
+    return files;
+  }
+  const result = {};
+  Object.keys(files).forEach((filename) => {
+    if (!removeFiles.includes(filename)) {
+      result[filename] = files[filename];
+    }
+  });
+  return result;
+}
+function ModernSandpack(props) {
+  const { template, customSetup = {}, files: customFiles = {}, removeFiles = [], options = {}, initialCollapsedFolder = [], theme = "light" } = props;
+  const initFiles = _templates.ModernTemplates[template];
+  const files = {
+    ...fileterFiles(initFiles, removeFiles),
+    ...fileterFiles(customFiles, removeFiles)
+  };
+  return /* @__PURE__ */ (0, _jsxruntime.jsx)(_sandpackreact.SandpackProvider, {
+    theme,
+    customSetup: {
+      environment: "node",
+      ...customSetup
+    },
+    files,
+    options: {
+      activeFile: "src/routes/page.tsx",
+      visibleFiles: [
+        "src/routes/page.tsx",
+        "src/routes/layout.tsx",
+        "src/routes/index.css"
+      ],
+      ...options
+    },
+    children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_sandpackreact.SandpackLayout, {
+      children: [
+        /* @__PURE__ */ (0, _jsxruntime.jsx)(_sandpackreact.SandpackFileExplorer, {
+          initialCollapsedFolder: [
+            "/.husky/",
+            "/.vscode/",
+            "/.codesandbox/",
+            ...initialCollapsedFolder
+          ]
+        }),
+        /* @__PURE__ */ (0, _jsxruntime.jsx)(_sandpackreact.SandpackCodeEditor, {
+          showLineNumbers: true,
+          showInlineErrors: true,
+          showTabs: false
+        }),
+        /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+          style: {
+            position: "absolute",
+            right: "5px",
+            bottom: "5px"
+          },
+          children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_sandpackreact.OpenInCodeSandboxButton, {})
+        })
+      ]
+    })
+  });
+}

package/dist/cjs/templates/common.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "commonFiles", {
+  enumerable: true,
+  get: function() {
+    return commonFiles;
+  }
+});
+const commonFiles = {
+  ".codesandbox/environment.json": '{\n  "nodeVersion": 18\n}\n',
+  ".codesandbox/tasks.json": '{\n  "$schema": "https://codesandbox.io/schemas/tasks.json",\n  "setupTasks": [\n    {\n      "name": "Installing Dependencies",\n      "command": "pnpm install"\n    }\n  ],\n  "tasks": {\n    "start": {\n      "name": "Application",\n      "command": "pnpm run start",\n      "runAtStart": true,\n      "restartOn": {\n        "files": ["pnpm-lock.yaml"]\n      }\n    }\n  }\n}\n',
+  ".npmrc": "strict-peer-dependencies=false\n"
+};

package/dist/cjs/templates/index.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ModernTemplates", {
+  enumerable: true,
+  get: function() {
+    return ModernTemplates;
+  }
+});
+const { ModuleFiles } = require("./module");
+const { MWAFiles } = require("./mwa");
+const ModernTemplates = {
+  "web-app": MWAFiles,
+  "npm-module": ModuleFiles
+};

package/dist/cjs/templates/module.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ModuleFiles", {
+  enumerable: true,
+  get: function() {
+    return ModuleFiles;
+  }
+});
+const _common = require("./common");
+const ModuleFiles = {
+  ..._common.commonFiles,
+  ...{
+    ".npmignore": ".DS_Store\n\n.pnp\n.pnp.js\n.env.local\n.env.*.local\n.history\n*.log*\n\nnode_modules/\n.yarn-integrity\n*.tsbuildinfo\n.eslintcache\n\ncoverage/\nrelease/\noutput/\noutput_resource/\ntests/\n\n.vscode/**/*\n!.vscode/settings.json\n!.vscode/extensions.json\n.idea/\n\n**/*/api/typings/auto-generated\n",
+    "README.md": "# Modern.js Package\n\n## Setup\n\nInstall the dependencies:\n\n```bash\n install\n```\n\n## Get Started\n\nRun and debug the module:\n\n```\n dev\n```\n\nRun test cases:\n\n```\n test\n```\n\nBuild the module for production:\n\n```\n build\n```\n\nEnable optional features:\n\n```\n new\n```\n\nOther commands:\n\n```\n lint         # Lint and fix source files\n change       # Add a new changeset\n bump         # Update version and changelog via changeset\n release      # Release the package\n\n```\n\nFor more information, see the [Modern.js Module documentation](https://modernjs.dev/module-tools/en).\n",
+    "package.json": '{\n  "name": "modern-npm-module",\n  "version": "0.1.0",\n  "types": "./dist/types/index.d.ts",\n  "main": "./dist/lib/index.js",\n  "module": "./dist/es/index.js",\n  "scripts": {\n    "prepare": "modern build && husky install",\n    "dev": "modern dev",\n    "build": "modern build",\n    "build:watch": "modern build -w",\n    "reset": "rimraf ./**/node_modules",\n    "lint": "modern lint",\n    "change": "modern change",\n    "bump": "modern bump",\n    "pre": "modern pre",\n    "change-status": "modern change-status",\n    "gen-release-note": "modern gen-release-note",\n    "release": "modern release",\n    "new": "modern new",\n    "upgrade": "modern upgrade"\n  },\n  "lint-staged": {\n    "*.{ts,tsx}": [\n      "node --max_old_space_size=8192 ./node_modules/eslint/bin/eslint.js --fix --color --cache --quiet"\n    ],\n    "*.{js,jsx,mjs,mjsx,cjs,cjsx}": [\n      "node --max_old_space_size=8192 ./node_modules/eslint/bin/eslint.js --fix --color --cache --quiet"\n    ]\n  },\n  "eslintIgnore": [\n    "node_modules/",\n    "dist/"\n  ],\n  "dependencies": {},\n  "peerDependencies": {},\n  "devDependencies": {\n    "@modern-js/module-tools": "2.32.1",\n    "@modern-js/eslint-config": "2.32.1",\n    "@modern-js/tsconfig":"2.32.1",\n    "@modern-js-app/eslint-config": "2.32.1",\n    "typescript": "~5.0.4",\n    "@types/jest": "~29.2.4",\n    "@types/node": "~16.11.7",\n    "@types/react": "~18.0.26",\n    "rimraf": "~3.0.2",\n    "lint-staged": "~13.1.0",\n    "prettier": "~2.8.1",\n    "husky": "~8.0.1"\n  },\n  "sideEffects": [],\n  "publishConfig": {\n    "access": "public",\n    "registry": "https://registry.npmjs.org/"\n  }\n}\n',
+    "src/index.ts": "export default function () {\n  return 'hello world';\n}\n",
+    "modern.config.ts": "import { moduleTools, defineConfig } from '@modern-js/module-tools';\n\nexport default defineConfig({\n  plugins: [moduleTools()],\n  buildPreset: 'npm-library',\n});\n",
+    "tsconfig.json": '{\n  "extends": "@modern-js/tsconfig/base",\n  "declaration": true,\n  "compilerOptions": {\n    "baseUrl": "./",\n    "paths": {\n      "@/*": ["./src/*"]\n    },\n    "isolatedModules": true\n  },\n  "include": ["src"],\n  "exclude": ["**/node_modules"]\n}\n',
+    "src/modern-app-env.d.ts": "/// <reference types='@modern-js/module-tools/types' />\n/// <reference types='@modern-js/plugin-testing/types' />\n"
+  }
+};

package/dist/cjs/templates/mwa.js

@@ -0,0 +1,117 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "MWAFiles", {
+  enumerable: true,
+  get: function() {
+    return MWAFiles;
+  }
+});
+const _common = require("./common");
+const MWAFiles = {
+  ..._common.commonFiles,
+  ...{
+    ".browserslistrc": "chrome >= 51\nedge >= 15\nfirefox >= 54\nsafari >= 10\nios_saf >= 10\n",
+    "README.md": "# Modern.js App\n\n## Setup\n\nInstall the dependencies:\n\n```bash\n install\n```\n\n## Get Started\n\nStart the dev server:\n\n```\n dev\n```\n\nEnable optional features or add a new entry:\n\n```\n new\n```\n\nBuild the app for production:\n\n```\n build\n```\n\nPreview the production build locally:\n\n```\n serve\n```\n\nFor more information, see the [Modern.js documentation](https://modernjs.dev/en).\n",
+    "package.json": '{\n  "name": "modern-app",\n  "version": "0.1.0",\n  "scripts": {\n    "reset": "npx rimraf ./**/node_modules",\n    "dev": "modern dev",\n    "build": "modern build",\n    "start": "modern start",\n    "serve": "modern serve",\n    "new": "modern new",\n    "lint": "modern lint",\n    "prepare": "husky install",\n    "upgrade": "modern upgrade"\n  },\n  "engines": {\n    "node": ">=16.18.1"\n  },\n  "lint-staged": {\n    "*.{ts,tsx}": [\n      "node --max_old_space_size=8192 ./node_modules/eslint/bin/eslint.js --fix --color --cache --quiet"\n    ],\n    "*.{js,jsx,mjs,mjsx,cjs,cjsx}": [\n      "node --max_old_space_size=8192 ./node_modules/eslint/bin/eslint.js --fix --color --cache --quiet"\n    ]\n  },\n  "eslintIgnore": [\n    "node_modules/",\n    "dist/"\n  ],\n  "dependencies": {\n    "@modern-js/runtime": "2.32.1",\n    "react": "~18.2.0",\n    "react-dom": "~18.2.0"\n  },\n  "devDependencies": {\n    "@modern-js/app-tools": "2.32.1",\n    "@modern-js/eslint-config": "2.32.1",\n    "@modern-js/tsconfig":"2.32.1",\n    "@modern-js-app/eslint-config": "2.32.1",\n    "lint-staged": "~13.1.0",\n    "prettier": "~2.8.1",\n    "husky": "~8.0.1",\n    "rimraf": "~3.0.2"\n  }\n}\n',
+    "modern.config.ts": "import { appTools, defineConfig } from '@modern-js/app-tools';\n\n// https://modernjs.dev/en/configure/app/usage\nexport default defineConfig({\n  runtime: {\n    router: true,\n  },\n  plugins: [appTools()],\n});\n",
+    "tsconfig.json": '{\n  "extends": "@modern-js/tsconfig/base",\n  "compilerOptions": {\n    "declaration": false,\n    "jsx": "preserve",\n    "baseUrl": "./",\n    "paths": {\n      "@/*": ["./src/*"],\n      "@shared/*": ["./shared/*"]\n    }\n  },\n  "include": ["src", "shared", "config", "modern.config.ts"],\n  "exclude": ["**/node_modules"]\n}\n',
+    "src/modern-app-env.d.ts": "/// <reference types='@modern-js/app-tools/types' />\n/// <reference types='@modern-js/runtime/types' />\n/// <reference types='@modern-js/runtime/types/router' />\n",
+    "src/routes/index.css": "html,\nbody {\n  padding: 0;\n  margin: 0;\n  font-family: PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;\n  background: linear-gradient(to bottom, transparent, #fff) #eceeef;\n}\n\np {\n  margin: 0;\n}\n\n* {\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  box-sizing: border-box;\n}\n\n.container-box {\n  min-height: 100vh;\n  max-width: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  padding-top: 10px;\n}\n\nmain {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n}\n\n.title {\n  display: flex;\n  margin: 4rem 0 4rem;\n  align-items: center;\n  font-size: 4rem;\n  font-weight: 600;\n}\n\n.logo {\n  width: 6rem;\n  margin: 7px 0 0 1rem;\n}\n\n.name {\n  color: #4ecaff;\n}\n\n.description {\n  text-align: center;\n  line-height: 1.5;\n  font-size: 1.3rem;\n  color: #1b3a42;\n  margin-bottom: 5rem;\n}\n\n.code {\n  background: #fafafa;\n  border-radius: 12px;\n  padding: 0.6rem 0.9rem;\n  font-size: 1.05rem;\n  font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,\n    Bitstream Vera Sans Mono, Courier New, monospace;\n}\n\n.container-box .grid {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 1100px;\n  margin-top: 3rem;\n}\n\n.card {\n  padding: 1.5rem;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  height: 100px;\n  color: inherit;\n  text-decoration: none;\n  transition: 0.15s ease;\n  width: 45%;\n}\n\n.card:hover,\n.card:focus {\n  transform: scale(1.05);\n}\n\n.card h2 {\n  display: flex;\n  align-items: center;\n  font-size: 1.5rem;\n  margin: 0;\n  padding: 0;\n}\n\n.card p {\n  opacity: 0.6;\n  font-size: 0.9rem;\n  line-height: 1.5;\n  margin-top: 1rem;\n}\n\n.arrow-right {\n  width: 1.3rem;\n  margin-left: 0.5rem;\n  margin-top: 3px;\n}\n",
+    "src/routes/page.tsx": `import { Helmet } from '@modern-js/runtime/head';
+import './index.css';
+
+const Index = () => (
+  <div className="container-box">
+    <Helmet>
+      <link
+        rel="icon"
+        type="image/x-icon"
+        href="https://lf3-static.bytednsdoc.com/obj/eden-cn/uhbfnupenuhf/favicon.ico"
+      />
+    </Helmet>
+    <main>
+      <div className="title">
+        Welcome to
+        <img
+          className="logo"
+          src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/modern-js-logo.svg"
+          alt="Modern.js Logo"
+        />
+        <p className="name">Modern.js</p>
+      </div>
+      <p className="description">
+        Get started by editing <code className="code">src/routes/page.tsx</code>
+      </p>
+      <div className="grid">
+        <a
+          href="https://modernjs.dev/guides/get-started/introduction.html"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="card"
+        >
+          <h2>
+            Guide
+            <img
+              className="arrow-right"
+              src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/arrow-right.svg"
+            />
+          </h2>
+          <p>Follow the guides to use all features of Modern.js.</p>
+        </a>
+        <a
+          href="https://modernjs.dev/tutorials/foundations/introduction.html"
+          target="_blank"
+          className="card"
+          rel="noreferrer"
+        >
+          <h2>
+            Tutorials
+            <img
+              className="arrow-right"
+              src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/arrow-right.svg"
+            />
+          </h2>
+          <p>Learn to use Modern.js to create your first application.</p>
+        </a>
+        <a
+          href="https://modernjs.dev/configure/app/usage.html"
+          target="_blank"
+          className="card"
+          rel="noreferrer"
+        >
+          <h2>
+            Config
+            <img
+              className="arrow-right"
+              src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/arrow-right.svg"
+            />
+          </h2>
+          <p>Find all configuration options provided by Modern.js.</p>
+        </a>
+        <a
+          href="https://github.com/web-infra-dev/modern.js"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="card"
+        >
+          <h2>
+            Github
+            <img
+              className="arrow-right"
+              src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/arrow-right.svg"
+            />
+          </h2>
+          <p>View the source code of Github, feel free to contribute.</p>
+        </a>
+      </div>
+    </main>
+  </div>
+);
+
+export default Index;
+`,
+    "src/routes/layout.tsx": "import { Outlet } from '@modern-js/runtime/router';\n\nexport default function Layout() {\n  return (\n    <div>\n      <Outlet />\n    </div>\n  );\n}\n"
+  }
+};

package/dist/esm/index.js

@@ -0,0 +1,61 @@
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _to_consumable_array } from "@swc/helpers/_/_to_consumable_array";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SandpackProvider, SandpackLayout, SandpackFileExplorer, SandpackCodeEditor, OpenInCodeSandboxButton } from "@codesandbox/sandpack-react";
+import { ModernTemplates } from "./templates";
+function fileterFiles(files, removeFiles) {
+  if (removeFiles.length === 0) {
+    return files;
+  }
+  var result = {};
+  Object.keys(files).forEach(function(filename) {
+    if (!removeFiles.includes(filename)) {
+      result[filename] = files[filename];
+    }
+  });
+  return result;
+}
+export default function ModernSandpack(props) {
+  var template = props.template, _props_customSetup = props.customSetup, customSetup = _props_customSetup === void 0 ? {} : _props_customSetup, tmp = props.files, customFiles = tmp === void 0 ? {} : tmp, _props_removeFiles = props.removeFiles, removeFiles = _props_removeFiles === void 0 ? [] : _props_removeFiles, _props_options = props.options, options = _props_options === void 0 ? {} : _props_options, _props_initialCollapsedFolder = props.initialCollapsedFolder, initialCollapsedFolder = _props_initialCollapsedFolder === void 0 ? [] : _props_initialCollapsedFolder, _props_theme = props.theme, theme = _props_theme === void 0 ? "light" : _props_theme;
+  var initFiles = ModernTemplates[template];
+  var files = _object_spread({}, fileterFiles(initFiles, removeFiles), fileterFiles(customFiles, removeFiles));
+  return /* @__PURE__ */ _jsx(SandpackProvider, {
+    theme: theme,
+    customSetup: _object_spread({
+      environment: "node"
+    }, customSetup),
+    files: files,
+    options: _object_spread({
+      activeFile: "src/routes/page.tsx",
+      visibleFiles: [
+        "src/routes/page.tsx",
+        "src/routes/layout.tsx",
+        "src/routes/index.css"
+      ]
+    }, options),
+    children: /* @__PURE__ */ _jsxs(SandpackLayout, {
+      children: [
+        /* @__PURE__ */ _jsx(SandpackFileExplorer, {
+          initialCollapsedFolder: [
+            "/.husky/",
+            "/.vscode/",
+            "/.codesandbox/"
+          ].concat(_to_consumable_array(initialCollapsedFolder))
+        }),
+        /* @__PURE__ */ _jsx(SandpackCodeEditor, {
+          showLineNumbers: true,
+          showInlineErrors: true,
+          showTabs: false
+        }),
+        /* @__PURE__ */ _jsx("div", {
+          style: {
+            position: "absolute",
+            right: "5px",
+            bottom: "5px"
+          },
+          children: /* @__PURE__ */ _jsx(OpenInCodeSandboxButton, {})
+        })
+      ]
+    })
+  });
+}

package/dist/esm/templates/common.js

@@ -0,0 +1,5 @@
+export var commonFiles = {
+  ".codesandbox/environment.json": '{\n  "nodeVersion": 18\n}\n',
+  ".codesandbox/tasks.json": '{\n  "$schema": "https://codesandbox.io/schemas/tasks.json",\n  "setupTasks": [\n    {\n      "name": "Installing Dependencies",\n      "command": "pnpm install"\n    }\n  ],\n  "tasks": {\n    "start": {\n      "name": "Application",\n      "command": "pnpm run start",\n      "runAtStart": true,\n      "restartOn": {\n        "files": ["pnpm-lock.yaml"]\n      }\n    }\n  }\n}\n',
+  ".npmrc": "strict-peer-dependencies=false\n"
+};

package/dist/esm/templates/index.js

@@ -0,0 +1,6 @@
+var ModuleFiles = require("./module").ModuleFiles;
+var MWAFiles = require("./mwa").MWAFiles;
+export var ModernTemplates = {
+  "web-app": MWAFiles,
+  "npm-module": ModuleFiles
+};

package/dist/esm/templates/module.js

@@ -0,0 +1,11 @@
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { commonFiles } from "./common";
+export var ModuleFiles = _object_spread({}, commonFiles, {
+  ".npmignore": ".DS_Store\n\n.pnp\n.pnp.js\n.env.local\n.env.*.local\n.history\n*.log*\n\nnode_modules/\n.yarn-integrity\n*.tsbuildinfo\n.eslintcache\n\ncoverage/\nrelease/\noutput/\noutput_resource/\ntests/\n\n.vscode/**/*\n!.vscode/settings.json\n!.vscode/extensions.json\n.idea/\n\n**/*/api/typings/auto-generated\n",
+  "README.md": "# Modern.js Package\n\n## Setup\n\nInstall the dependencies:\n\n```bash\n install\n```\n\n## Get Started\n\nRun and debug the module:\n\n```\n dev\n```\n\nRun test cases:\n\n```\n test\n```\n\nBuild the module for production:\n\n```\n build\n```\n\nEnable optional features:\n\n```\n new\n```\n\nOther commands:\n\n```\n lint         # Lint and fix source files\n change       # Add a new changeset\n bump         # Update version and changelog via changeset\n release      # Release the package\n\n```\n\nFor more information, see the [Modern.js Module documentation](https://modernjs.dev/module-tools/en).\n",
+  "package.json": '{\n  "name": "modern-npm-module",\n  "version": "0.1.0",\n  "types": "./dist/types/index.d.ts",\n  "main": "./dist/lib/index.js",\n  "module": "./dist/es/index.js",\n  "scripts": {\n    "prepare": "modern build && husky install",\n    "dev": "modern dev",\n    "build": "modern build",\n    "build:watch": "modern build -w",\n    "reset": "rimraf ./**/node_modules",\n    "lint": "modern lint",\n    "change": "modern change",\n    "bump": "modern bump",\n    "pre": "modern pre",\n    "change-status": "modern change-status",\n    "gen-release-note": "modern gen-release-note",\n    "release": "modern release",\n    "new": "modern new",\n    "upgrade": "modern upgrade"\n  },\n  "lint-staged": {\n    "*.{ts,tsx}": [\n      "node --max_old_space_size=8192 ./node_modules/eslint/bin/eslint.js --fix --color --cache --quiet"\n    ],\n    "*.{js,jsx,mjs,mjsx,cjs,cjsx}": [\n      "node --max_old_space_size=8192 ./node_modules/eslint/bin/eslint.js --fix --color --cache --quiet"\n    ]\n  },\n  "eslintIgnore": [\n    "node_modules/",\n    "dist/"\n  ],\n  "dependencies": {},\n  "peerDependencies": {},\n  "devDependencies": {\n    "@modern-js/module-tools": "2.32.1",\n    "@modern-js/eslint-config": "2.32.1",\n    "@modern-js/tsconfig":"2.32.1",\n    "@modern-js-app/eslint-config": "2.32.1",\n    "typescript": "~5.0.4",\n    "@types/jest": "~29.2.4",\n    "@types/node": "~16.11.7",\n    "@types/react": "~18.0.26",\n    "rimraf": "~3.0.2",\n    "lint-staged": "~13.1.0",\n    "prettier": "~2.8.1",\n    "husky": "~8.0.1"\n  },\n  "sideEffects": [],\n  "publishConfig": {\n    "access": "public",\n    "registry": "https://registry.npmjs.org/"\n  }\n}\n',
+  "src/index.ts": "export default function () {\n  return 'hello world';\n}\n",
+  "modern.config.ts": "import { moduleTools, defineConfig } from '@modern-js/module-tools';\n\nexport default defineConfig({\n  plugins: [moduleTools()],\n  buildPreset: 'npm-library',\n});\n",
+  "tsconfig.json": '{\n  "extends": "@modern-js/tsconfig/base",\n  "declaration": true,\n  "compilerOptions": {\n    "baseUrl": "./",\n    "paths": {\n      "@/*": ["./src/*"]\n    },\n    "isolatedModules": true\n  },\n  "include": ["src"],\n  "exclude": ["**/node_modules"]\n}\n',
+  "src/modern-app-env.d.ts": "/// <reference types='@modern-js/module-tools/types' />\n/// <reference types='@modern-js/plugin-testing/types' />\n"
+});

package/dist/esm/templates/mwa.js

@@ -0,0 +1,13 @@
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { commonFiles } from "./common";
+export var MWAFiles = _object_spread({}, commonFiles, {
+  ".browserslistrc": "chrome >= 51\nedge >= 15\nfirefox >= 54\nsafari >= 10\nios_saf >= 10\n",
+  "README.md": "# Modern.js App\n\n## Setup\n\nInstall the dependencies:\n\n```bash\n install\n```\n\n## Get Started\n\nStart the dev server:\n\n```\n dev\n```\n\nEnable optional features or add a new entry:\n\n```\n new\n```\n\nBuild the app for production:\n\n```\n build\n```\n\nPreview the production build locally:\n\n```\n serve\n```\n\nFor more information, see the [Modern.js documentation](https://modernjs.dev/en).\n",
+  "package.json": '{\n  "name": "modern-app",\n  "version": "0.1.0",\n  "scripts": {\n    "reset": "npx rimraf ./**/node_modules",\n    "dev": "modern dev",\n    "build": "modern build",\n    "start": "modern start",\n    "serve": "modern serve",\n    "new": "modern new",\n    "lint": "modern lint",\n    "prepare": "husky install",\n    "upgrade": "modern upgrade"\n  },\n  "engines": {\n    "node": ">=16.18.1"\n  },\n  "lint-staged": {\n    "*.{ts,tsx}": [\n      "node --max_old_space_size=8192 ./node_modules/eslint/bin/eslint.js --fix --color --cache --quiet"\n    ],\n    "*.{js,jsx,mjs,mjsx,cjs,cjsx}": [\n      "node --max_old_space_size=8192 ./node_modules/eslint/bin/eslint.js --fix --color --cache --quiet"\n    ]\n  },\n  "eslintIgnore": [\n    "node_modules/",\n    "dist/"\n  ],\n  "dependencies": {\n    "@modern-js/runtime": "2.32.1",\n    "react": "~18.2.0",\n    "react-dom": "~18.2.0"\n  },\n  "devDependencies": {\n    "@modern-js/app-tools": "2.32.1",\n    "@modern-js/eslint-config": "2.32.1",\n    "@modern-js/tsconfig":"2.32.1",\n    "@modern-js-app/eslint-config": "2.32.1",\n    "lint-staged": "~13.1.0",\n    "prettier": "~2.8.1",\n    "husky": "~8.0.1",\n    "rimraf": "~3.0.2"\n  }\n}\n',
+  "modern.config.ts": "import { appTools, defineConfig } from '@modern-js/app-tools';\n\n// https://modernjs.dev/en/configure/app/usage\nexport default defineConfig({\n  runtime: {\n    router: true,\n  },\n  plugins: [appTools()],\n});\n",
+  "tsconfig.json": '{\n  "extends": "@modern-js/tsconfig/base",\n  "compilerOptions": {\n    "declaration": false,\n    "jsx": "preserve",\n    "baseUrl": "./",\n    "paths": {\n      "@/*": ["./src/*"],\n      "@shared/*": ["./shared/*"]\n    }\n  },\n  "include": ["src", "shared", "config", "modern.config.ts"],\n  "exclude": ["**/node_modules"]\n}\n',
+  "src/modern-app-env.d.ts": "/// <reference types='@modern-js/app-tools/types' />\n/// <reference types='@modern-js/runtime/types' />\n/// <reference types='@modern-js/runtime/types/router' />\n",
+  "src/routes/index.css": "html,\nbody {\n  padding: 0;\n  margin: 0;\n  font-family: PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;\n  background: linear-gradient(to bottom, transparent, #fff) #eceeef;\n}\n\np {\n  margin: 0;\n}\n\n* {\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  box-sizing: border-box;\n}\n\n.container-box {\n  min-height: 100vh;\n  max-width: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  padding-top: 10px;\n}\n\nmain {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n}\n\n.title {\n  display: flex;\n  margin: 4rem 0 4rem;\n  align-items: center;\n  font-size: 4rem;\n  font-weight: 600;\n}\n\n.logo {\n  width: 6rem;\n  margin: 7px 0 0 1rem;\n}\n\n.name {\n  color: #4ecaff;\n}\n\n.description {\n  text-align: center;\n  line-height: 1.5;\n  font-size: 1.3rem;\n  color: #1b3a42;\n  margin-bottom: 5rem;\n}\n\n.code {\n  background: #fafafa;\n  border-radius: 12px;\n  padding: 0.6rem 0.9rem;\n  font-size: 1.05rem;\n  font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,\n    Bitstream Vera Sans Mono, Courier New, monospace;\n}\n\n.container-box .grid {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 1100px;\n  margin-top: 3rem;\n}\n\n.card {\n  padding: 1.5rem;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  height: 100px;\n  color: inherit;\n  text-decoration: none;\n  transition: 0.15s ease;\n  width: 45%;\n}\n\n.card:hover,\n.card:focus {\n  transform: scale(1.05);\n}\n\n.card h2 {\n  display: flex;\n  align-items: center;\n  font-size: 1.5rem;\n  margin: 0;\n  padding: 0;\n}\n\n.card p {\n  opacity: 0.6;\n  font-size: 0.9rem;\n  line-height: 1.5;\n  margin-top: 1rem;\n}\n\n.arrow-right {\n  width: 1.3rem;\n  margin-left: 0.5rem;\n  margin-top: 3px;\n}\n",
+  "src/routes/page.tsx": 'import { Helmet } from \'@modern-js/runtime/head\';\nimport \'./index.css\';\n\nconst Index = () => (\n  <div className="container-box">\n    <Helmet>\n      <link\n        rel="icon"\n        type="image/x-icon"\n        href="https://lf3-static.bytednsdoc.com/obj/eden-cn/uhbfnupenuhf/favicon.ico"\n      />\n    </Helmet>\n    <main>\n      <div className="title">\n        Welcome to\n        <img\n          className="logo"\n          src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/modern-js-logo.svg"\n          alt="Modern.js Logo"\n        />\n        <p className="name">Modern.js</p>\n      </div>\n      <p className="description">\n        Get started by editing <code className="code">src/routes/page.tsx</code>\n      </p>\n      <div className="grid">\n        <a\n          href="https://modernjs.dev/guides/get-started/introduction.html"\n          target="_blank"\n          rel="noopener noreferrer"\n          className="card"\n        >\n          <h2>\n            Guide\n            <img\n              className="arrow-right"\n              src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/arrow-right.svg"\n            />\n          </h2>\n          <p>Follow the guides to use all features of Modern.js.</p>\n        </a>\n        <a\n          href="https://modernjs.dev/tutorials/foundations/introduction.html"\n          target="_blank"\n          className="card"\n          rel="noreferrer"\n        >\n          <h2>\n            Tutorials\n            <img\n              className="arrow-right"\n              src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/arrow-right.svg"\n            />\n          </h2>\n          <p>Learn to use Modern.js to create your first application.</p>\n        </a>\n        <a\n          href="https://modernjs.dev/configure/app/usage.html"\n          target="_blank"\n          className="card"\n          rel="noreferrer"\n        >\n          <h2>\n            Config\n            <img\n              className="arrow-right"\n              src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/arrow-right.svg"\n            />\n          </h2>\n          <p>Find all configuration options provided by Modern.js.</p>\n        </a>\n        <a\n          href="https://github.com/web-infra-dev/modern.js"\n          target="_blank"\n          rel="noopener noreferrer"\n          className="card"\n        >\n          <h2>\n            Github\n            <img\n              className="arrow-right"\n              src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/arrow-right.svg"\n            />\n          </h2>\n          <p>View the source code of Github, feel free to contribute.</p>\n        </a>\n      </div>\n    </main>\n  </div>\n);\n\nexport default Index;\n',
+  "src/routes/layout.tsx": "import { Outlet } from '@modern-js/runtime/router';\n\nexport default function Layout() {\n  return (\n    <div>\n      <Outlet />\n    </div>\n  );\n}\n"
+});

package/dist/esm-node/index.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SandpackProvider, SandpackLayout, SandpackFileExplorer, SandpackCodeEditor, OpenInCodeSandboxButton } from "@codesandbox/sandpack-react";
+import { ModernTemplates } from "./templates";
+function fileterFiles(files, removeFiles) {
+  if (removeFiles.length === 0) {
+    return files;
+  }
+  const result = {};
+  Object.keys(files).forEach((filename) => {
+    if (!removeFiles.includes(filename)) {
+      result[filename] = files[filename];
+    }
+  });
+  return result;
+}
+export default function ModernSandpack(props) {
+  const { template, customSetup = {}, files: customFiles = {}, removeFiles = [], options = {}, initialCollapsedFolder = [], theme = "light" } = props;
+  const initFiles = ModernTemplates[template];
+  const files = {
+    ...fileterFiles(initFiles, removeFiles),
+    ...fileterFiles(customFiles, removeFiles)
+  };
+  return /* @__PURE__ */ _jsx(SandpackProvider, {
+    theme,
+    customSetup: {
+      environment: "node",
+      ...customSetup
+    },
+    files,
+    options: {
+      activeFile: "src/routes/page.tsx",
+      visibleFiles: [
+        "src/routes/page.tsx",
+        "src/routes/layout.tsx",
+        "src/routes/index.css"
+      ],
+      ...options
+    },
+    children: /* @__PURE__ */ _jsxs(SandpackLayout, {
+      children: [
+        /* @__PURE__ */ _jsx(SandpackFileExplorer, {
+          initialCollapsedFolder: [
+            "/.husky/",
+            "/.vscode/",
+            "/.codesandbox/",
+            ...initialCollapsedFolder
+          ]
+        }),
+        /* @__PURE__ */ _jsx(SandpackCodeEditor, {
+          showLineNumbers: true,
+          showInlineErrors: true,
+          showTabs: false
+        }),
+        /* @__PURE__ */ _jsx("div", {
+          style: {
+            position: "absolute",
+            right: "5px",
+            bottom: "5px"
+          },
+          children: /* @__PURE__ */ _jsx(OpenInCodeSandboxButton, {})
+        })
+      ]
+    })
+  });
+}

package/dist/esm-node/templates/common.js

@@ -0,0 +1,5 @@
+export const commonFiles = {
+  ".codesandbox/environment.json": '{\n  "nodeVersion": 18\n}\n',
+  ".codesandbox/tasks.json": '{\n  "$schema": "https://codesandbox.io/schemas/tasks.json",\n  "setupTasks": [\n    {\n      "name": "Installing Dependencies",\n      "command": "pnpm install"\n    }\n  ],\n  "tasks": {\n    "start": {\n      "name": "Application",\n      "command": "pnpm run start",\n      "runAtStart": true,\n      "restartOn": {\n        "files": ["pnpm-lock.yaml"]\n      }\n    }\n  }\n}\n',
+  ".npmrc": "strict-peer-dependencies=false\n"
+};

package/dist/esm-node/templates/index.js

@@ -0,0 +1,6 @@
+const { ModuleFiles } = require("./module");
+const { MWAFiles } = require("./mwa");
+export const ModernTemplates = {
+  "web-app": MWAFiles,
+  "npm-module": ModuleFiles
+};

package/dist/esm-node/templates/module.js

@@ -0,0 +1,13 @@
+import { commonFiles } from "./common";
+export const ModuleFiles = {
+  ...commonFiles,
+  ...{
+    ".npmignore": ".DS_Store\n\n.pnp\n.pnp.js\n.env.local\n.env.*.local\n.history\n*.log*\n\nnode_modules/\n.yarn-integrity\n*.tsbuildinfo\n.eslintcache\n\ncoverage/\nrelease/\noutput/\noutput_resource/\ntests/\n\n.vscode/**/*\n!.vscode/settings.json\n!.vscode/extensions.json\n.idea/\n\n**/*/api/typings/auto-generated\n",
+    "README.md": "# Modern.js Package\n\n## Setup\n\nInstall the dependencies:\n\n```bash\n install\n```\n\n## Get Started\n\nRun and debug the module:\n\n```\n dev\n```\n\nRun test cases:\n\n```\n test\n```\n\nBuild the module for production:\n\n```\n build\n```\n\nEnable optional features:\n\n```\n new\n```\n\nOther commands:\n\n```\n lint         # Lint and fix source files\n change       # Add a new changeset\n bump         # Update version and changelog via changeset\n release      # Release the package\n\n```\n\nFor more information, see the [Modern.js Module documentation](https://modernjs.dev/module-tools/en).\n",
+    "package.json": '{\n  "name": "modern-npm-module",\n  "version": "0.1.0",\n  "types": "./dist/types/index.d.ts",\n  "main": "./dist/lib/index.js",\n  "module": "./dist/es/index.js",\n  "scripts": {\n    "prepare": "modern build && husky install",\n    "dev": "modern dev",\n    "build": "modern build",\n    "build:watch": "modern build -w",\n    "reset": "rimraf ./**/node_modules",\n    "lint": "modern lint",\n    "change": "modern change",\n    "bump": "modern bump",\n    "pre": "modern pre",\n    "change-status": "modern change-status",\n    "gen-release-note": "modern gen-release-note",\n    "release": "modern release",\n    "new": "modern new",\n    "upgrade": "modern upgrade"\n  },\n  "lint-staged": {\n    "*.{ts,tsx}": [\n      "node --max_old_space_size=8192 ./node_modules/eslint/bin/eslint.js --fix --color --cache --quiet"\n    ],\n    "*.{js,jsx,mjs,mjsx,cjs,cjsx}": [\n      "node --max_old_space_size=8192 ./node_modules/eslint/bin/eslint.js --fix --color --cache --quiet"\n    ]\n  },\n  "eslintIgnore": [\n    "node_modules/",\n    "dist/"\n  ],\n  "dependencies": {},\n  "peerDependencies": {},\n  "devDependencies": {\n    "@modern-js/module-tools": "2.32.1",\n    "@modern-js/eslint-config": "2.32.1",\n    "@modern-js/tsconfig":"2.32.1",\n    "@modern-js-app/eslint-config": "2.32.1",\n    "typescript": "~5.0.4",\n    "@types/jest": "~29.2.4",\n    "@types/node": "~16.11.7",\n    "@types/react": "~18.0.26",\n    "rimraf": "~3.0.2",\n    "lint-staged": "~13.1.0",\n    "prettier": "~2.8.1",\n    "husky": "~8.0.1"\n  },\n  "sideEffects": [],\n  "publishConfig": {\n    "access": "public",\n    "registry": "https://registry.npmjs.org/"\n  }\n}\n',
+    "src/index.ts": "export default function () {\n  return 'hello world';\n}\n",
+    "modern.config.ts": "import { moduleTools, defineConfig } from '@modern-js/module-tools';\n\nexport default defineConfig({\n  plugins: [moduleTools()],\n  buildPreset: 'npm-library',\n});\n",
+    "tsconfig.json": '{\n  "extends": "@modern-js/tsconfig/base",\n  "declaration": true,\n  "compilerOptions": {\n    "baseUrl": "./",\n    "paths": {\n      "@/*": ["./src/*"]\n    },\n    "isolatedModules": true\n  },\n  "include": ["src"],\n  "exclude": ["**/node_modules"]\n}\n',
+    "src/modern-app-env.d.ts": "/// <reference types='@modern-js/module-tools/types' />\n/// <reference types='@modern-js/plugin-testing/types' />\n"
+  }
+};

package/dist/esm-node/templates/mwa.js

@@ -0,0 +1,107 @@
+import { commonFiles } from "./common";
+export const MWAFiles = {
+  ...commonFiles,
+  ...{
+    ".browserslistrc": "chrome >= 51\nedge >= 15\nfirefox >= 54\nsafari >= 10\nios_saf >= 10\n",
+    "README.md": "# Modern.js App\n\n## Setup\n\nInstall the dependencies:\n\n```bash\n install\n```\n\n## Get Started\n\nStart the dev server:\n\n```\n dev\n```\n\nEnable optional features or add a new entry:\n\n```\n new\n```\n\nBuild the app for production:\n\n```\n build\n```\n\nPreview the production build locally:\n\n```\n serve\n```\n\nFor more information, see the [Modern.js documentation](https://modernjs.dev/en).\n",
+    "package.json": '{\n  "name": "modern-app",\n  "version": "0.1.0",\n  "scripts": {\n    "reset": "npx rimraf ./**/node_modules",\n    "dev": "modern dev",\n    "build": "modern build",\n    "start": "modern start",\n    "serve": "modern serve",\n    "new": "modern new",\n    "lint": "modern lint",\n    "prepare": "husky install",\n    "upgrade": "modern upgrade"\n  },\n  "engines": {\n    "node": ">=16.18.1"\n  },\n  "lint-staged": {\n    "*.{ts,tsx}": [\n      "node --max_old_space_size=8192 ./node_modules/eslint/bin/eslint.js --fix --color --cache --quiet"\n    ],\n    "*.{js,jsx,mjs,mjsx,cjs,cjsx}": [\n      "node --max_old_space_size=8192 ./node_modules/eslint/bin/eslint.js --fix --color --cache --quiet"\n    ]\n  },\n  "eslintIgnore": [\n    "node_modules/",\n    "dist/"\n  ],\n  "dependencies": {\n    "@modern-js/runtime": "2.32.1",\n    "react": "~18.2.0",\n    "react-dom": "~18.2.0"\n  },\n  "devDependencies": {\n    "@modern-js/app-tools": "2.32.1",\n    "@modern-js/eslint-config": "2.32.1",\n    "@modern-js/tsconfig":"2.32.1",\n    "@modern-js-app/eslint-config": "2.32.1",\n    "lint-staged": "~13.1.0",\n    "prettier": "~2.8.1",\n    "husky": "~8.0.1",\n    "rimraf": "~3.0.2"\n  }\n}\n',
+    "modern.config.ts": "import { appTools, defineConfig } from '@modern-js/app-tools';\n\n// https://modernjs.dev/en/configure/app/usage\nexport default defineConfig({\n  runtime: {\n    router: true,\n  },\n  plugins: [appTools()],\n});\n",
+    "tsconfig.json": '{\n  "extends": "@modern-js/tsconfig/base",\n  "compilerOptions": {\n    "declaration": false,\n    "jsx": "preserve",\n    "baseUrl": "./",\n    "paths": {\n      "@/*": ["./src/*"],\n      "@shared/*": ["./shared/*"]\n    }\n  },\n  "include": ["src", "shared", "config", "modern.config.ts"],\n  "exclude": ["**/node_modules"]\n}\n',
+    "src/modern-app-env.d.ts": "/// <reference types='@modern-js/app-tools/types' />\n/// <reference types='@modern-js/runtime/types' />\n/// <reference types='@modern-js/runtime/types/router' />\n",
+    "src/routes/index.css": "html,\nbody {\n  padding: 0;\n  margin: 0;\n  font-family: PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;\n  background: linear-gradient(to bottom, transparent, #fff) #eceeef;\n}\n\np {\n  margin: 0;\n}\n\n* {\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  box-sizing: border-box;\n}\n\n.container-box {\n  min-height: 100vh;\n  max-width: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  padding-top: 10px;\n}\n\nmain {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n}\n\n.title {\n  display: flex;\n  margin: 4rem 0 4rem;\n  align-items: center;\n  font-size: 4rem;\n  font-weight: 600;\n}\n\n.logo {\n  width: 6rem;\n  margin: 7px 0 0 1rem;\n}\n\n.name {\n  color: #4ecaff;\n}\n\n.description {\n  text-align: center;\n  line-height: 1.5;\n  font-size: 1.3rem;\n  color: #1b3a42;\n  margin-bottom: 5rem;\n}\n\n.code {\n  background: #fafafa;\n  border-radius: 12px;\n  padding: 0.6rem 0.9rem;\n  font-size: 1.05rem;\n  font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,\n    Bitstream Vera Sans Mono, Courier New, monospace;\n}\n\n.container-box .grid {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 1100px;\n  margin-top: 3rem;\n}\n\n.card {\n  padding: 1.5rem;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  height: 100px;\n  color: inherit;\n  text-decoration: none;\n  transition: 0.15s ease;\n  width: 45%;\n}\n\n.card:hover,\n.card:focus {\n  transform: scale(1.05);\n}\n\n.card h2 {\n  display: flex;\n  align-items: center;\n  font-size: 1.5rem;\n  margin: 0;\n  padding: 0;\n}\n\n.card p {\n  opacity: 0.6;\n  font-size: 0.9rem;\n  line-height: 1.5;\n  margin-top: 1rem;\n}\n\n.arrow-right {\n  width: 1.3rem;\n  margin-left: 0.5rem;\n  margin-top: 3px;\n}\n",
+    "src/routes/page.tsx": `import { Helmet } from '@modern-js/runtime/head';
+import './index.css';
+
+const Index = () => (
+  <div className="container-box">
+    <Helmet>
+      <link
+        rel="icon"
+        type="image/x-icon"
+        href="https://lf3-static.bytednsdoc.com/obj/eden-cn/uhbfnupenuhf/favicon.ico"
+      />
+    </Helmet>
+    <main>
+      <div className="title">
+        Welcome to
+        <img
+          className="logo"
+          src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/modern-js-logo.svg"
+          alt="Modern.js Logo"
+        />
+        <p className="name">Modern.js</p>
+      </div>
+      <p className="description">
+        Get started by editing <code className="code">src/routes/page.tsx</code>
+      </p>
+      <div className="grid">
+        <a
+          href="https://modernjs.dev/guides/get-started/introduction.html"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="card"
+        >
+          <h2>
+            Guide
+            <img
+              className="arrow-right"
+              src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/arrow-right.svg"
+            />
+          </h2>
+          <p>Follow the guides to use all features of Modern.js.</p>
+        </a>
+        <a
+          href="https://modernjs.dev/tutorials/foundations/introduction.html"
+          target="_blank"
+          className="card"
+          rel="noreferrer"
+        >
+          <h2>
+            Tutorials
+            <img
+              className="arrow-right"
+              src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/arrow-right.svg"
+            />
+          </h2>
+          <p>Learn to use Modern.js to create your first application.</p>
+        </a>
+        <a
+          href="https://modernjs.dev/configure/app/usage.html"
+          target="_blank"
+          className="card"
+          rel="noreferrer"
+        >
+          <h2>
+            Config
+            <img
+              className="arrow-right"
+              src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/arrow-right.svg"
+            />
+          </h2>
+          <p>Find all configuration options provided by Modern.js.</p>
+        </a>
+        <a
+          href="https://github.com/web-infra-dev/modern.js"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="card"
+        >
+          <h2>
+            Github
+            <img
+              className="arrow-right"
+              src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/arrow-right.svg"
+            />
+          </h2>
+          <p>View the source code of Github, feel free to contribute.</p>
+        </a>
+      </div>
+    </main>
+  </div>
+);
+
+export default Index;
+`,
+    "src/routes/layout.tsx": "import { Outlet } from '@modern-js/runtime/router';\n\nexport default function Layout() {\n  return (\n    <div>\n      <Outlet />\n    </div>\n  );\n}\n"
+  }
+};

package/dist/types/scripts/template.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/index.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { SandpackSetup, SandpackFiles, SandpackThemeProp } from '@codesandbox/sandpack-react';
+export type ModernSandpackProps = {
+  template: 'web-app' | 'npm-module';
+  customSetup?: SandpackSetup;
+  files?: SandpackFiles;
+  removeFiles?: string[];
+  options?: Record<string, any>;
+  initialCollapsedFolder?: string[];
+  theme?: SandpackThemeProp;
+};
+export default function ModernSandpack(props: ModernSandpackProps): JSX.Element;

package/dist/types/src/templates/common.d.ts

@@ -0,0 +1,5 @@
+export declare const commonFiles: {
+  ".codesandbox/environment.json": string;
+  ".codesandbox/tasks.json": string;
+  ".npmrc": string;
+};

package/dist/types/src/templates/index.d.ts

@@ -0,0 +1,4 @@
+export declare const ModernTemplates: {
+  'web-app': any;
+  'npm-module': any;
+};

package/dist/types/src/templates/module.d.ts

@@ -0,0 +1,12 @@
+export declare const ModuleFiles: {
+  ".npmignore": string;
+  "README.md": string;
+  "package.json": string;
+  "src/index.ts": string;
+  "modern.config.ts": string;
+  "tsconfig.json": string;
+  "src/modern-app-env.d.ts": string;
+  ".codesandbox/environment.json": string;
+  ".codesandbox/tasks.json": string;
+  ".npmrc": string;
+};

package/dist/types/src/templates/mwa.d.ts

@@ -0,0 +1,14 @@
+export declare const MWAFiles: {
+  ".browserslistrc": string;
+  "README.md": string;
+  "package.json": string;
+  "modern.config.ts": string;
+  "tsconfig.json": string;
+  "src/modern-app-env.d.ts": string;
+  "src/routes/index.css": string;
+  "src/routes/page.tsx": string;
+  "src/routes/layout.tsx": string;
+  ".codesandbox/environment.json": string;
+  ".codesandbox/tasks.json": string;
+  ".npmrc": string;
+};

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "@modern-js/sandpack-react",
+  "description": "A Progressive React Framework for modern web development.",
+  "homepage": "https://modernjs.dev",
+  "bugs": "https://github.com/web-infra-dev/modern.js/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/web-infra-dev/modern.js",
+    "directory": "packages/generator/sandpack-template"
+  },
+  "license": "MIT",
+  "keywords": [
+    "react",
+    "framework",
+    "modern",
+    "modern.js"
+  ],
+  "version": "0.0.0-next-1693385366305",
+  "jsnext:source": "./src/index.ts",
+  "types": "./dist/types/index.d.ts",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
+  "exports": {
+    ".": {
+      "node": {
+        "jsnext:source": "./src/index.ts",
+        "import": "./dist/esm-node/index.js",
+        "require": "./dist/cjs/index.js"
+      },
+      "default": "./dist/esm/index.js"
+    }
+  },
+  "dependencies": {
+    "react": "^18",
+    "react-dom": "^18",
+    "@swc/helpers": "0.5.1",
+    "@codesandbox/sandpack-react": "^2.6.9"
+  },
+  "devDependencies": {
+    "@modern-js/codesmith-api-handlebars": "2.2.5",
+    "@types/jest": "^29",
+    "@types/node": "^14",
+    "jest": "^29",
+    "typescript": "^5",
+    "ts-node": "^10.9.1",
+    "recursive-readdir": "^2.2.3",
+    "@types/recursive-readdir": "^2.2.1",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "@modern-js/base-generator": "0.0.0-next-1693385366305",
+    "@modern-js/module-generator": "0.0.0-next-1693385366305",
+    "@modern-js/entry-generator": "0.0.0-next-1693385366305",
+    "@modern-js/mwa-generator": "0.0.0-next-1693385366305",
+    "@modern-js/generator-utils": "0.0.0-next-1693385366305",
+    "@modern-js/generator-common": "0.0.0-next-1693385366305",
+    "@scripts/build": "0.0.0-next-1693385366305",
+    "@modern-js/utils": "0.0.0-next-1693385366305",
+    "@scripts/jest-config": "0.0.0-next-1693385366305"
+  },
+  "sideEffects": false,
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public",
+    "provenance": true
+  },
+  "scripts": {
+    "new": "modern-lib new",
+    "build": "ts-node scripts/template.ts && modern-lib build",
+    "test": "jest --passWithNoTests"
+  }
+}

package/scripts/codesandbox/.codesandbox/environment.json

@@ -0,0 +1,3 @@
+{
+  "nodeVersion": 18
+}

package/scripts/codesandbox/.codesandbox/tasks.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "https://codesandbox.io/schemas/tasks.json",
+  "setupTasks": [
+    {
+      "name": "Installing Dependencies",
+      "command": "pnpm install"
+    }
+  ],
+  "tasks": {
+    "start": {
+      "name": "Application",
+      "command": "pnpm run start",
+      "runAtStart": true,
+      "restartOn": {
+        "files": ["pnpm-lock.yaml"]
+      }
+    }
+  }
+}

package/scripts/template.ts

@@ -0,0 +1,169 @@
+import path from 'path';
+import recursive from 'recursive-readdir';
+import fs from '@modern-js/utils/fs-extra';
+import { renderString } from '@modern-js/codesmith-api-handlebars';
+import { getModernVersion } from '@modern-js/generator-utils';
+import { Solution } from '@modern-js/generator-common';
+
+const IgnoreFiles = [
+  '.nvmrc',
+  '.eslintrc.js.handlebars',
+  'src/.eslintrc.js.handlebars',
+  '.prettierrc',
+  '.vscode/extensions.json',
+  '.vscode/settings.json',
+  '.husky/pre-commit',
+  'README.md',
+  '.gitignore.handlebars',
+];
+
+async function handleTemplate(
+  templatePath: string,
+  data: Record<string, any> = {},
+  { fileExtra, routerPrefix }: { fileExtra: string; routerPrefix: string } = {
+    fileExtra: '',
+    routerPrefix: '',
+  },
+) {
+  const files: Record<string, string> = {};
+  const templateFiles = await recursive(templatePath);
+  templateFiles.forEach(filePath => {
+    const file = filePath.replace(`${templatePath}/`, '');
+    if (IgnoreFiles.includes(file)) {
+      return;
+    }
+    if (fs.statSync(filePath).isFile()) {
+      if (file.endsWith('.handlebars')) {
+        files[
+          `${routerPrefix}${file
+            .replace('.handlebars', fileExtra)
+            .replace('npmrc', '.npmrc')}`.replace('language', 'ts')
+        ] = `${renderString(fs.readFileSync(filePath, 'utf-8'), data)}`;
+      } else {
+        files[`${routerPrefix}${file}`] = `${fs.readFileSync(
+          filePath,
+          'utf-8',
+        )}`;
+      }
+    }
+  });
+  return files;
+}
+
+async function handleCodesandboxTemplate() {
+  const templateDir = path.join(__dirname, 'codesandbox');
+  const files: Record<string, string> = {
+    ...(await handleTemplate(templateDir)),
+  };
+
+  return files;
+}
+async function handleBaseTemplate() {
+  const templateDir = path.join(
+    require.resolve('@modern-js/base-generator'),
+    '../../',
+    'templates',
+  );
+  const baseTemplate = path.join(templateDir, 'base-template');
+  const pnpmTemplate = path.join(templateDir, 'pnpm-template');
+  const files: Record<string, string> = {
+    ...(await handleTemplate(baseTemplate)),
+    ...(await handleTemplate(pnpmTemplate)),
+  };
+
+  return files;
+}
+
+async function handleMWATemplate() {
+  const templateDir = path.join(
+    require.resolve('@modern-js/mwa-generator'),
+    '../../',
+    'templates',
+  );
+  const entryTemplateDir = path.join(
+    require.resolve('@modern-js/entry-generator'),
+    '../../',
+    'templates',
+  );
+  const baseTemplate = path.join(templateDir, 'base-template');
+  const tsTemplate = path.join(templateDir, 'ts-template');
+  const modernVersion = await getModernVersion(Solution.MWA);
+  const files = {
+    ...(await handleTemplate(baseTemplate, {
+      name: 'modern-app',
+      isMonorepoSubProject: false,
+      modernVersion,
+      isTsProject: true,
+    })),
+    ...(await handleTemplate(tsTemplate)),
+    ...(await handleTemplate(
+      entryTemplateDir,
+      {},
+      { fileExtra: '.tsx', routerPrefix: 'src/' },
+    )),
+  };
+  return files;
+}
+
+async function handleModuleTemplate() {
+  const templateDir = path.join(
+    require.resolve('@modern-js/module-generator'),
+    '../../',
+    'templates',
+  );
+  const baseTemplate = path.join(templateDir, 'base-template');
+  const tsTemplate = path.join(templateDir, 'ts-template');
+  const modernVersion = await getModernVersion(Solution.Module);
+  const files = {
+    ...(await handleTemplate(baseTemplate, {
+      name: 'modern-npm-module',
+      isMonorepoSubProject: false,
+      modernVersion,
+      isTs: true,
+      isPublic: true,
+      language: 'ts',
+    })),
+    ...(await handleTemplate(tsTemplate)),
+  };
+  return files;
+}
+async function main() {
+  const codesandboxFiles = await handleCodesandboxTemplate();
+  const baseFiles = await handleBaseTemplate();
+  const srcTemplatesDir = path.join(__dirname, '..', 'src/templates');
+  const commonFiles = { ...codesandboxFiles, ...baseFiles };
+  fs.writeFileSync(
+    path.join(srcTemplatesDir, 'common.ts'),
+    `export const commonFiles = ${JSON.stringify(commonFiles, null, 2)};`,
+    'utf-8',
+  );
+  const mwaFiles = await handleMWATemplate();
+  fs.writeFileSync(
+    path.join(srcTemplatesDir, 'mwa.ts'),
+    `import { commonFiles } from './common';
+
+export const MWAFiles = {
+  ...commonFiles,
+  ...${JSON.stringify(mwaFiles, null, 2)}
+};`,
+    'utf-8',
+  );
+
+  const moduleFiles = await handleModuleTemplate();
+  fs.writeFileSync(
+    path.join(srcTemplatesDir, 'module.ts'),
+    `import { commonFiles } from './common';
+
+export const ModuleFiles = {
+  ...commonFiles,
+  ...${JSON.stringify(moduleFiles, null, 2)}
+};`,
+    'utf-8',
+  );
+}
+
+main().catch(e => {
+  console.error(e);
+  // eslint-disable-next-line no-process-exit
+  process.exit(1);
+});