@modern-js/sandpack-react 2.69.4 → 3.0.0-alpha.0

package/dist/esm/index.mjs

@@ -0,0 +1,60 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { OpenInCodeSandboxButton, SandpackCodeEditor, SandpackFileExplorer, SandpackLayout, SandpackProvider } from "@codesandbox/sandpack-react";
+import { ModernTemplates } from "./templates";
+function fileterFiles(files, removeFiles) {
+    if (0 === removeFiles.length) 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 = [], activeFile = 'src/routes/page.tsx', theme = 'light' } = props;
+    const initFiles = ModernTemplates[template];
+    const files = {
+        ...fileterFiles(initFiles, removeFiles),
+        ...fileterFiles(customFiles, removeFiles)
+    };
+    return /*#__PURE__*/ jsx(SandpackProvider, {
+        theme: theme,
+        customSetup: {
+            environment: 'node',
+            ...customSetup
+        },
+        files: files,
+        options: {
+            activeFile,
+            visibleFiles: Object.keys(customFiles).filter((file)=>!removeFiles.includes(file)),
+            ...options
+        },
+        children: /*#__PURE__*/ jsxs(SandpackLayout, {
+            children: [
+                /*#__PURE__*/ jsx(SandpackFileExplorer, {
+                    autoHiddenFiles: true,
+                    initialCollapsedFolder: [
+                        '/.husky/',
+                        '/.vscode/',
+                        '/.codesandbox/',
+                        ...initialCollapsedFolder
+                    ]
+                }),
+                /*#__PURE__*/ jsx(SandpackCodeEditor, {
+                    showLineNumbers: true,
+                    showInlineErrors: true,
+                    readOnly: true,
+                    showTabs: false
+                }),
+                /*#__PURE__*/ jsx("div", {
+                    style: {
+                        position: 'absolute',
+                        right: '5px',
+                        bottom: '5px'
+                    },
+                    children: /*#__PURE__*/ jsx(OpenInCodeSandboxButton, {})
+                })
+            ]
+        })
+    });
+}
+export { ModernSandpack as default };

package/dist/esm/templates/common.mjs

@@ -0,0 +1,5 @@
+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"
+};
+export { commonFiles };

package/dist/esm/templates/index.mjs

@@ -0,0 +1,21 @@
+import * as __rspack_external__mwa_fa12d360 from "./mwa";
+var __webpack_modules__ = {
+    "./mwa" (module) {
+        module.exports = __rspack_external__mwa_fa12d360;
+    }
+};
+var __webpack_module_cache__ = {};
+function __webpack_require__(moduleId) {
+    var cachedModule = __webpack_module_cache__[moduleId];
+    if (void 0 !== cachedModule) return cachedModule.exports;
+    var module = __webpack_module_cache__[moduleId] = {
+        exports: {}
+    };
+    __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+    return module.exports;
+}
+const { MWAFiles } = __webpack_require__("./mwa");
+const ModernTemplates = {
+    'web-app': MWAFiles
+};
+export { ModernTemplates };

package/dist/esm/templates/mwa.mjs

@@ -0,0 +1,17 @@
+import { commonFiles } from "./common";
+const MWAFiles = {
+    ...commonFiles,
+    ".browserslistrc": "chrome >= 51\nedge >= 15\nfirefox >= 54\nsafari >= 10\nios_saf >= 10\n",
+    ".gitignore": ".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.pnpm-store/\n*.tsbuildinfo\n.changeset/pre.json\n\ndist/\ncoverage/\nrelease/\noutput/\noutput_resource/\nlog/\n\n.vscode/**/*\n!.vscode/settings.json\n!.vscode/extensions.json\n.idea/\n\n**/*/typings/auto-generated\n\nmodern.config.local.*\n",
+    ".npmrc": "strict-peer-dependencies=false\n",
+    "biome.json": '{\n  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",\n  "vcs": {\n    "enabled": true,\n    "defaultBranch": "main",\n    "clientKind": "git",\n    "useIgnoreFile": true\n  },\n  "formatter": {\n    "enabled": true,\n    "indentStyle": "space"\n  },\n  "javascript": {\n    "formatter": {\n      "quoteStyle": "single",\n      "arrowParentheses": "asNeeded",\n      "jsxQuoteStyle": "double",\n      "lineWidth": 80\n    }\n  },\n  "linter": {\n    "enabled": true,\n    "rules": {\n      "recommended": true,\n      "suspicious": {\n        "noDuplicateFontNames": "off"\n      }\n    }\n  },\n  "organizeImports": {\n    "enabled": true\n  },\n  "files": {\n    "ignoreUnknown": true,\n    "ignore": [".vscode/**/*", "node_modules/**/*", "dist/**/*"]\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  plugins: [appTools()],\n});\n",
+    "package.json": '{\n  "name": "modern-app",\n  "version": "0.1.0",\n  "scripts": {\n    "reset": "npx rimraf node_modules ./**/node_modules",\n    "dev": "modern dev",\n    "build": "modern build",\n    "serve": "modern serve",\n    "lint": "biome check",\n    "prepare": "simple-git-hooks"\n  },\n  "engines": {\n    "node": ">=20"\n  },\n  "lint-staged": {\n    "*.{js,ts,cjs,mjs,d.cts,d.mts,jsx,tsx,json,jsonc}": [\n      "biome check --files-ignore-unknown=true"\n    ]\n  },\n  "simple-git-hooks": {\n    "pre-commit": "npx lint-staged"\n  },\n  "dependencies": {\n    "@modern-js/runtime": "3.0.0-alpha.0",\n    "react": "^19.2.3",\n    "react-dom": "^19.2.0"\n  },\n  "devDependencies": {\n    "@modern-js/app-tools": "3.0.0-alpha.0",\n    "@modern-js/tsconfig": "3.0.0-alpha.0",\n    "@biomejs/biome": "1.9.4",\n    "typescript": "~5.7.3",\n    "@types/node": "^20",\n    "@types/react": "^19.1.8",\n    "@types/react-dom": "^19.1.6",\n    "lint-staged": "~15.4.0",\n    "simple-git-hooks": "^2.11.1",\n    "rimraf": "^6.0.1"\n  }\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",
+    "src/modern.runtime.ts": "import { defineRuntimeConfig } from '@modern-js/runtime';\n\nexport default defineRuntimeConfig({});\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:\n    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/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",
+    "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              alt="Guide"\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              alt="Tutorials"\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              alt="Config"\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              alt="Github"\n            />\n          </h2>\n          <p>View the source code on GitHub; feel free to contribute.</p>\n        </a>\n      </div>\n    </main>\n  </div>\n);\n\nexport default Index;\n'
+};
+export { MWAFiles };

package/dist/esm-node/index.mjs

@@ -0,0 +1,60 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { OpenInCodeSandboxButton, SandpackCodeEditor, SandpackFileExplorer, SandpackLayout, SandpackProvider } from "@codesandbox/sandpack-react";
+import { ModernTemplates } from "./templates/index.mjs";
+function fileterFiles(files, removeFiles) {
+    if (0 === removeFiles.length) 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 = [], activeFile = 'src/routes/page.tsx', theme = 'light' } = props;
+    const initFiles = ModernTemplates[template];
+    const files = {
+        ...fileterFiles(initFiles, removeFiles),
+        ...fileterFiles(customFiles, removeFiles)
+    };
+    return /*#__PURE__*/ jsx(SandpackProvider, {
+        theme: theme,
+        customSetup: {
+            environment: 'node',
+            ...customSetup
+        },
+        files: files,
+        options: {
+            activeFile,
+            visibleFiles: Object.keys(customFiles).filter((file)=>!removeFiles.includes(file)),
+            ...options
+        },
+        children: /*#__PURE__*/ jsxs(SandpackLayout, {
+            children: [
+                /*#__PURE__*/ jsx(SandpackFileExplorer, {
+                    autoHiddenFiles: true,
+                    initialCollapsedFolder: [
+                        '/.husky/',
+                        '/.vscode/',
+                        '/.codesandbox/',
+                        ...initialCollapsedFolder
+                    ]
+                }),
+                /*#__PURE__*/ jsx(SandpackCodeEditor, {
+                    showLineNumbers: true,
+                    showInlineErrors: true,
+                    readOnly: true,
+                    showTabs: false
+                }),
+                /*#__PURE__*/ jsx("div", {
+                    style: {
+                        position: 'absolute',
+                        right: '5px',
+                        bottom: '5px'
+                    },
+                    children: /*#__PURE__*/ jsx(OpenInCodeSandboxButton, {})
+                })
+            ]
+        })
+    });
+}
+export { ModernSandpack as default };

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

@@ -0,0 +1,5 @@
+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"
+};
+export { commonFiles };

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

@@ -0,0 +1,21 @@
+import * as __rspack_external__mwa_mjs_5d9bbc8d from "./mwa.mjs";
+var __webpack_modules__ = {
+    "./mwa" (module) {
+        module.exports = __rspack_external__mwa_mjs_5d9bbc8d;
+    }
+};
+var __webpack_module_cache__ = {};
+function __webpack_require__(moduleId) {
+    var cachedModule = __webpack_module_cache__[moduleId];
+    if (void 0 !== cachedModule) return cachedModule.exports;
+    var module = __webpack_module_cache__[moduleId] = {
+        exports: {}
+    };
+    __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+    return module.exports;
+}
+const { MWAFiles } = __webpack_require__("./mwa");
+const ModernTemplates = {
+    'web-app': MWAFiles
+};
+export { ModernTemplates };

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

@@ -0,0 +1,17 @@
+import { commonFiles } from "./common.mjs";
+const MWAFiles = {
+    ...commonFiles,
+    ".browserslistrc": "chrome >= 51\nedge >= 15\nfirefox >= 54\nsafari >= 10\nios_saf >= 10\n",
+    ".gitignore": ".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.pnpm-store/\n*.tsbuildinfo\n.changeset/pre.json\n\ndist/\ncoverage/\nrelease/\noutput/\noutput_resource/\nlog/\n\n.vscode/**/*\n!.vscode/settings.json\n!.vscode/extensions.json\n.idea/\n\n**/*/typings/auto-generated\n\nmodern.config.local.*\n",
+    ".npmrc": "strict-peer-dependencies=false\n",
+    "biome.json": '{\n  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",\n  "vcs": {\n    "enabled": true,\n    "defaultBranch": "main",\n    "clientKind": "git",\n    "useIgnoreFile": true\n  },\n  "formatter": {\n    "enabled": true,\n    "indentStyle": "space"\n  },\n  "javascript": {\n    "formatter": {\n      "quoteStyle": "single",\n      "arrowParentheses": "asNeeded",\n      "jsxQuoteStyle": "double",\n      "lineWidth": 80\n    }\n  },\n  "linter": {\n    "enabled": true,\n    "rules": {\n      "recommended": true,\n      "suspicious": {\n        "noDuplicateFontNames": "off"\n      }\n    }\n  },\n  "organizeImports": {\n    "enabled": true\n  },\n  "files": {\n    "ignoreUnknown": true,\n    "ignore": [".vscode/**/*", "node_modules/**/*", "dist/**/*"]\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  plugins: [appTools()],\n});\n",
+    "package.json": '{\n  "name": "modern-app",\n  "version": "0.1.0",\n  "scripts": {\n    "reset": "npx rimraf node_modules ./**/node_modules",\n    "dev": "modern dev",\n    "build": "modern build",\n    "serve": "modern serve",\n    "lint": "biome check",\n    "prepare": "simple-git-hooks"\n  },\n  "engines": {\n    "node": ">=20"\n  },\n  "lint-staged": {\n    "*.{js,ts,cjs,mjs,d.cts,d.mts,jsx,tsx,json,jsonc}": [\n      "biome check --files-ignore-unknown=true"\n    ]\n  },\n  "simple-git-hooks": {\n    "pre-commit": "npx lint-staged"\n  },\n  "dependencies": {\n    "@modern-js/runtime": "3.0.0-alpha.0",\n    "react": "^19.2.3",\n    "react-dom": "^19.2.0"\n  },\n  "devDependencies": {\n    "@modern-js/app-tools": "3.0.0-alpha.0",\n    "@modern-js/tsconfig": "3.0.0-alpha.0",\n    "@biomejs/biome": "1.9.4",\n    "typescript": "~5.7.3",\n    "@types/node": "^20",\n    "@types/react": "^19.1.8",\n    "@types/react-dom": "^19.1.6",\n    "lint-staged": "~15.4.0",\n    "simple-git-hooks": "^2.11.1",\n    "rimraf": "^6.0.1"\n  }\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",
+    "src/modern.runtime.ts": "import { defineRuntimeConfig } from '@modern-js/runtime';\n\nexport default defineRuntimeConfig({});\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:\n    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/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",
+    "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              alt="Guide"\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              alt="Tutorials"\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              alt="Config"\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              alt="Github"\n            />\n          </h2>\n          <p>View the source code on GitHub; feel free to contribute.</p>\n        </a>\n      </div>\n    </main>\n  </div>\n);\n\nexport default Index;\n'
+};
+export { MWAFiles };

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

@@ -1,7 +1,4 @@
 export declare const commonFiles: {
     ".codesandbox/environment.json": string;
     ".codesandbox/tasks.json": string;
-    ".gitignore": string;
-    "biome.json": string;
-    ".npmrc": string;
 };

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

@@ -1,8 +1,10 @@
 export declare const MWAFiles: {
-    "README.md": string;
     ".browserslistrc": string;
-    "package.json": string;
+    ".gitignore": string;
+    ".npmrc": string;
+    "biome.json": string;
     "modern.config.ts": string;
+    "package.json": string;
     "tsconfig.json": string;
     "src/modern-app-env.d.ts": string;
     "src/modern.runtime.ts": string;
@@ -11,7 +13,4 @@ export declare const MWAFiles: {
     "src/routes/page.tsx": string;
     ".codesandbox/environment.json": string;
     ".codesandbox/tasks.json": string;
-    ".gitignore": string;
-    "biome.json": string;
-    ".npmrc": string;
 };

package/package.json

@@ -15,49 +15,49 @@
     "modern",
     "modern.js"
   ],
-  "version": "2.69.4",
+  "version": "3.0.0-alpha.0",
   "jsnext:source": "./src/index.ts",
   "types": "./dist/types/index.d.ts",
   "main": "./dist/cjs/index.js",
-  "module": "./dist/esm/index.js",
+  "module": "./dist/esm/index.mjs",
   "exports": {
     ".": {
+      "types": "./dist/types/index.d.ts",
+      "jsnext:source": "./src/index.ts",
       "node": {
-        "jsnext:source": "./src/index.ts",
-        "import": "./dist/esm-node/index.js",
+        "import": "./dist/esm-node/index.mjs",
         "require": "./dist/cjs/index.js"
       },
-      "default": {
-        "types": "./dist/types/index.d.ts",
-        "import": "./dist/esm/index.js"
-      }
+      "default": "./dist/esm/index.mjs"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      ".": [
+        "./dist/types/index.d.ts"
+      ]
     }
   },
   "dependencies": {
-    "@codesandbox/sandpack-react": "^2.6.9",
+    "@codesandbox/sandpack-react": "^2.20.0",
     "@swc/helpers": "^0.5.17",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3"
   },
   "devDependencies": {
     "@modern-js/codesmith-api-handlebars": "2.6.8",
     "@modern-js/codesmith-utils": "2.6.8",
-    "@types/jest": "^29",
-    "@types/node": "^18",
-    "@types/react": "^18.3.11",
-    "@types/react-dom": "^18.3.1",
-    "@types/recursive-readdir": "^2.2.1",
-    "jest": "^29",
+    "@rslib/core": "0.18.5",
+    "@types/node": "^20",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@types/recursive-readdir": "^2.2.4",
     "recursive-readdir": "^2.2.3",
-    "ts-node": "^10.9.1",
+    "ts-node": "^10.9.2",
     "typescript": "^5",
-    "@modern-js/base-generator": "3.7.62",
-    "@modern-js/entry-generator": "3.7.62",
-    "@modern-js/generator-common": "3.7.62",
-    "@modern-js/generator-utils": "3.7.62",
-    "@modern-js/mwa-generator": "3.7.62",
-    "@scripts/build": "2.66.0",
-    "@scripts/jest-config": "2.66.0"
+    "@scripts/jest-config": "2.66.0",
+    "@modern-js/create": "3.0.0-alpha.0",
+    "@modern-js/rslib": "2.68.10"
   },
   "sideEffects": false,
   "publishConfig": {
@@ -65,8 +65,8 @@
     "access": "public"
   },
   "scripts": {
-    "new": "modern-lib new",
-    "build": "ts-node scripts/template.ts && modern-lib build",
-    "test": "jest --passWithNoTests"
+    "build": "ts-node scripts/template.ts && rslib build",
+    "dev": "rslib build --watch",
+    "test": "rstest --passWithNoTests"
   }
 }

package/rslib.config.mts

@@ -0,0 +1,4 @@
+import { rslibConfig } from '@modern-js/rslib';
+import { defineConfig } from '@rslib/core';
+
+export default defineConfig(rslibConfig);

package/rstest.config.ts

@@ -0,0 +1,5 @@
+import { defineConfig } from '@rstest/core';
+
+export default defineConfig({
+  globals: true,
+});

package/scripts/template.ts

@@ -1,8 +1,6 @@
 import path from 'path';
 import { renderString } from '@modern-js/codesmith-api-handlebars';
 import { fs } from '@modern-js/codesmith-utils/fs-extra';
-import { Solution } from '@modern-js/generator-common';
-import { getModernVersion } from '@modern-js/generator-utils';
 import recursive from 'recursive-readdir';
 
 const IgnoreFiles = [
@@ -54,65 +52,38 @@ async function handleCodesandboxTemplate() {
 
   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 handleCreateTemplate() {
+  const createPackageMainPath = require.resolve('@modern-js/create');
+  const createPackagePath = path.dirname(path.dirname(createPackageMainPath));
+  const createPackageJsonPath = path.join(createPackagePath, 'package.json');
 
-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 templateDir = path.join(createPackagePath, 'template');
+
+  const createPackageJson = JSON.parse(
+    fs.readFileSync(createPackageJsonPath, 'utf-8'),
   );
-  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,
-      isTs: true,
-      packageManager: 'pnpm',
-    })),
-    ...(await handleTemplate(tsTemplate)),
-    ...(await handleTemplate(
-      entryTemplateDir,
-      {},
-      { fileExtra: '.tsx', routerPrefix: 'src/' },
-    )),
-  };
+  const version = createPackageJson.version || '3.0.0';
+
+  const files = await handleTemplate(templateDir, {
+    packageName: 'modern-app',
+    version,
+  });
+
   return files;
 }
 
 async function main() {
   const codesandboxFiles = await handleCodesandboxTemplate();
-  const baseFiles = await handleBaseTemplate();
+  const createFiles = await handleCreateTemplate();
   const srcTemplatesDir = path.join(__dirname, '..', 'src/templates');
-  const commonFiles = { ...codesandboxFiles, ...baseFiles };
+  const commonFiles = { ...codesandboxFiles };
   fs.writeFileSync(
     path.join(srcTemplatesDir, 'common.ts'),
     `export const commonFiles = ${JSON.stringify(commonFiles, null, 2)};`,
     'utf-8',
   );
-  const mwaFiles = await handleMWATemplate();
+  const mwaFiles = createFiles;
   fs.writeFileSync(
     path.join(srcTemplatesDir, 'mwa.ts'),
     `import { commonFiles } from './common';

package/dist/esm/index.js

@@ -1,64 +0,0 @@
-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 { OpenInCodeSandboxButton, SandpackCodeEditor, SandpackFileExplorer, SandpackLayout, SandpackProvider } 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;
-}
-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_activeFile = props.activeFile, activeFile = _props_activeFile === void 0 ? "src/routes/page.tsx" : _props_activeFile, _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,
-    customSetup: _object_spread({
-      environment: "node"
-    }, customSetup),
-    files,
-    options: _object_spread({
-      activeFile,
-      visibleFiles: Object.keys(customFiles).filter(function(file) {
-        return !removeFiles.includes(file);
-      })
-    }, options),
-    children: /* @__PURE__ */ _jsxs(SandpackLayout, {
-      children: [
-        /* @__PURE__ */ _jsx(SandpackFileExplorer, {
-          autoHiddenFiles: true,
-          initialCollapsedFolder: [
-            "/.husky/",
-            "/.vscode/",
-            "/.codesandbox/"
-          ].concat(_to_consumable_array(initialCollapsedFolder))
-        }),
-        /* @__PURE__ */ _jsx(SandpackCodeEditor, {
-          showLineNumbers: true,
-          showInlineErrors: true,
-          readOnly: true,
-          showTabs: false
-        }),
-        /* @__PURE__ */ _jsx("div", {
-          style: {
-            position: "absolute",
-            right: "5px",
-            bottom: "5px"
-          },
-          children: /* @__PURE__ */ _jsx(OpenInCodeSandboxButton, {})
-        })
-      ]
-    })
-  });
-}
-export {
-  ModernSandpack as default
-};

package/dist/esm/templates/common.js

@@ -1,10 +0,0 @@
-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',
-  ".gitignore": ".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.pnpm-store/\n*.tsbuildinfo\n.changeset/pre.json\n\ndist/\ncoverage/\nrelease/\noutput/\noutput_resource/\nlog/\n\n.vscode/**/*\n!.vscode/settings.json\n!.vscode/extensions.json\n.idea/\n\n**/*/typings/auto-generated\n\nmodern.config.local.*\n",
-  "biome.json": '{\n  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",\n  "vcs": {\n    "enabled": true,\n    "defaultBranch": "main",\n    "clientKind": "git",\n    "useIgnoreFile": true\n  },\n  "formatter": {\n    "enabled": true,\n    "indentStyle": "space"\n  },\n  "javascript": {\n    "formatter": {\n      "quoteStyle": "single",\n      "arrowParentheses": "asNeeded",\n      "jsxQuoteStyle": "double",\n      "lineWidth": 80\n    }\n  },\n  "linter": {\n    "enabled": true,\n    "rules": {\n      "recommended": true,\n      "suspicious": {\n        "noDuplicateFontNames": "off"\n      }\n    }\n  },\n  "organizeImports": {\n    "enabled": true\n  },\n  "files": {\n    "ignoreUnknown": true,\n    "ignore": [".vscode/**/*", "node_modules/**/*", "dist/**/*"]\n  }\n}\n',
-  ".npmrc": "strict-peer-dependencies=false\n"
-};
-export {
-  commonFiles
-};

package/dist/esm/templates/index.js

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