@modern-js/sandpack-react 0.0.0-canary-20250912092308

package/CHANGELOG.md

@@ -0,0 +1,59 @@
+# @modern-js/sandpack-react
+
+## 0.0.0-canary-20250912092308
+
+## 2.68.1
+
+## 2.68.0
+
+## 2.67.11
+
+## 2.67.10
+
+## 2.67.9
+
+## 2.67.8
+
+## 2.67.7
+
+## 2.67.6
+
+## 2.67.5
+
+## 2.67.4
+
+## 2.67.3
+
+## 2.67.2
+
+## 2.67.1
+
+## 2.67.0
+
+## 2.66.0
+
+## 2.65.5
+
+## 2.65.4
+
+## 2.65.3
+
+## 2.65.2
+
+## 2.65.1
+
+## 2.65.0
+
+## 2.64.3
+
+## 2.64.2
+
+## 2.64.1
+
+## 2.64.0
+
+## 2.63.7
+
+## 2.63.6
+
+## 2.63.5

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,86 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var src_exports = {};
+__export(src_exports, {
+  default: () => ModernSandpack
+});
+module.exports = __toCommonJS(src_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_sandpack_react = require("@codesandbox/sandpack-react");
+var import_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 = [], activeFile = "src/routes/page.tsx", theme = "light" } = props;
+  const initFiles = import_templates.ModernTemplates[template];
+  const files = {
+    ...fileterFiles(initFiles, removeFiles),
+    ...fileterFiles(customFiles, removeFiles)
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sandpack_react.SandpackProvider, {
+    theme,
+    customSetup: {
+      environment: "node",
+      ...customSetup
+    },
+    files,
+    options: {
+      activeFile,
+      visibleFiles: Object.keys(customFiles).filter((file) => !removeFiles.includes(file)),
+      ...options
+    },
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_sandpack_react.SandpackLayout, {
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sandpack_react.SandpackFileExplorer, {
+          autoHiddenFiles: true,
+          initialCollapsedFolder: [
+            "/.husky/",
+            "/.vscode/",
+            "/.codesandbox/",
+            ...initialCollapsedFolder
+          ]
+        }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sandpack_react.SandpackCodeEditor, {
+          showLineNumbers: true,
+          showInlineErrors: true,
+          readOnly: true,
+          showTabs: false
+        }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+          style: {
+            position: "absolute",
+            right: "5px",
+            bottom: "5px"
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sandpack_react.OpenInCodeSandboxButton, {})
+        })
+      ]
+    })
+  });
+}

package/dist/cjs/templates/common.js

@@ -0,0 +1,34 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var common_exports = {};
+__export(common_exports, {
+  commonFiles: () => commonFiles
+});
+module.exports = __toCommonJS(common_exports);
+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',
+  ".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"
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  commonFiles
+});

package/dist/cjs/templates/index.js

@@ -0,0 +1,31 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var templates_exports = {};
+__export(templates_exports, {
+  ModernTemplates: () => ModernTemplates
+});
+module.exports = __toCommonJS(templates_exports);
+const { MWAFiles } = require("./mwa");
+const ModernTemplates = {
+  "web-app": MWAFiles
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ModernTemplates
+});

package/dist/cjs/templates/mwa.js

@@ -0,0 +1,139 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var mwa_exports = {};
+__export(mwa_exports, {
+  MWAFiles: () => MWAFiles
+});
+module.exports = __toCommonJS(mwa_exports);
+var import_common = require("./common");
+const MWAFiles = {
+  ...import_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\npnpm install\n```\n\n## Get Started\n\nStart the dev server:\n\n```bash\npnpm dev\n```\n\nEnable optional features or add a new entry:\n\n```bash\npnpm new\n```\n\nBuild the app for production:\n\n```bash\npnpm build\n```\n\nPreview the production build locally:\n\n```bash\npnpm 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 ./**/node_modules",\n    "dev": "modern dev",\n    "build": "modern build",\n    "start": "modern start",\n    "serve": "modern serve",\n    "new": "modern new",\n    "lint": "biome check",\n    "prepare": "simple-git-hooks",\n    "upgrade": "modern upgrade"\n  },\n  "engines": {\n    "node": ">=16.18.1"\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": "2.68.12",\n    "react": "^19.1.1",\n    "react-dom": "^19.1.0"\n  },\n  "devDependencies": {\n    "@modern-js/app-tools": "2.68.12",\n    "@modern-js/tsconfig": "2.68.12",\n    "@biomejs/biome": "1.9.4",\n    "typescript": "~5.7.3",\n    "@types/jest": "~29.2.4",\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',
+    "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: [\n    appTools({\n      bundler: \n    }),\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.runtime.ts": "import { defineRuntimeConfig } from '@modern-js/runtime';\n\nexport default defineRuntimeConfig({});\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:\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';
+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"
+              alt="Guide"
+            />
+          </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"
+              alt="Tutorials"
+            />
+          </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"
+              alt="Config"
+            />
+          </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"
+              alt="Github"
+            />
+          </h2>
+          <p>View the source code on GitHub; feel free to contribute.</p>
+        </a>
+      </div>
+    </main>
+  </div>
+);
+
+export default Index;
+`
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MWAFiles
+});

package/dist/esm/index.js

@@ -0,0 +1,64 @@
+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

@@ -0,0 +1,10 @@
+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

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

package/dist/esm/templates/mwa.js

@@ -0,0 +1,113 @@
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { commonFiles } from "./common";
+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\npnpm install\n```\n\n## Get Started\n\nStart the dev server:\n\n```bash\npnpm dev\n```\n\nEnable optional features or add a new entry:\n\n```bash\npnpm new\n```\n\nBuild the app for production:\n\n```bash\npnpm build\n```\n\nPreview the production build locally:\n\n```bash\npnpm 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 ./**/node_modules",\n    "dev": "modern dev",\n    "build": "modern build",\n    "start": "modern start",\n    "serve": "modern serve",\n    "new": "modern new",\n    "lint": "biome check",\n    "prepare": "simple-git-hooks",\n    "upgrade": "modern upgrade"\n  },\n  "engines": {\n    "node": ">=16.18.1"\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": "2.68.12",\n    "react": "^19.1.1",\n    "react-dom": "^19.1.0"\n  },\n  "devDependencies": {\n    "@modern-js/app-tools": "2.68.12",\n    "@modern-js/tsconfig": "2.68.12",\n    "@biomejs/biome": "1.9.4",\n    "typescript": "~5.7.3",\n    "@types/jest": "~29.2.4",\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',
+  "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: [\n    appTools({\n      bundler: \n    }),\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.runtime.ts": "import { defineRuntimeConfig } from '@modern-js/runtime';\n\nexport default defineRuntimeConfig({});\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:\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';
+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"
+              alt="Guide"
+            />
+          </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"
+              alt="Tutorials"
+            />
+          </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"
+              alt="Config"
+            />
+          </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"
+              alt="Github"
+            />
+          </h2>
+          <p>View the source code on GitHub; feel free to contribute.</p>
+        </a>
+      </div>
+    </main>
+  </div>
+);
+
+export default Index;
+`
+});
+export {
+  MWAFiles
+};

package/dist/esm-node/index.js

@@ -0,0 +1,66 @@
+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;
+  }
+  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,
+    customSetup: {
+      environment: "node",
+      ...customSetup
+    },
+    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.js

@@ -0,0 +1,10 @@
+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',
+  ".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-node/templates/index.js

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

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

@@ -0,0 +1,115 @@
+import { commonFiles } from "./common";
+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\npnpm install\n```\n\n## Get Started\n\nStart the dev server:\n\n```bash\npnpm dev\n```\n\nEnable optional features or add a new entry:\n\n```bash\npnpm new\n```\n\nBuild the app for production:\n\n```bash\npnpm build\n```\n\nPreview the production build locally:\n\n```bash\npnpm 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 ./**/node_modules",\n    "dev": "modern dev",\n    "build": "modern build",\n    "start": "modern start",\n    "serve": "modern serve",\n    "new": "modern new",\n    "lint": "biome check",\n    "prepare": "simple-git-hooks",\n    "upgrade": "modern upgrade"\n  },\n  "engines": {\n    "node": ">=16.18.1"\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": "2.68.12",\n    "react": "^19.1.1",\n    "react-dom": "^19.1.0"\n  },\n  "devDependencies": {\n    "@modern-js/app-tools": "2.68.12",\n    "@modern-js/tsconfig": "2.68.12",\n    "@biomejs/biome": "1.9.4",\n    "typescript": "~5.7.3",\n    "@types/jest": "~29.2.4",\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',
+    "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: [\n    appTools({\n      bundler: \n    }),\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.runtime.ts": "import { defineRuntimeConfig } from '@modern-js/runtime';\n\nexport default defineRuntimeConfig({});\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:\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';
+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"
+              alt="Guide"
+            />
+          </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"
+              alt="Tutorials"
+            />
+          </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"
+              alt="Config"
+            />
+          </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"
+              alt="Github"
+            />
+          </h2>
+          <p>View the source code on GitHub; feel free to contribute.</p>
+        </a>
+      </div>
+    </main>
+  </div>
+);
+
+export default Index;
+`
+  }
+};
+export {
+  MWAFiles
+};

package/dist/types/index.d.ts

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

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

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

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

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

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

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

package/package.json

@@ -0,0 +1,72 @@
+{
+  "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-react"
+  },
+  "license": "MIT",
+  "keywords": [
+    "react",
+    "framework",
+    "modern",
+    "modern.js"
+  ],
+  "version": "0.0.0-canary-20250912092308",
+  "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": {
+        "types": "./dist/types/index.d.ts",
+        "import": "./dist/esm/index.js"
+      }
+    }
+  },
+  "dependencies": {
+    "@codesandbox/sandpack-react": "^2.20.0",
+    "@swc/helpers": "^0.5.17",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1"
+  },
+  "devDependencies": {
+    "@modern-js/codesmith-api-handlebars": "2.6.8",
+    "@modern-js/codesmith-utils": "2.6.8",
+    "@types/jest": "^29.5.14",
+    "@types/node": "^20",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "@types/recursive-readdir": "^2.2.4",
+    "jest": "^29.7.0",
+    "recursive-readdir": "^2.2.3",
+    "ts-node": "^10.9.2",
+    "typescript": "^5",
+    "@modern-js/base-generator": "0.0.0-canary-20250912092308",
+    "@modern-js/entry-generator": "0.0.0-canary-20250912092308",
+    "@modern-js/generator-common": "0.0.0-canary-20250912092308",
+    "@modern-js/generator-utils": "0.0.0-canary-20250912092308",
+    "@modern-js/mwa-generator": "0.0.0-canary-20250912092308",
+    "@scripts/jest-config": "0.0.0-canary-20250912092308",
+    "@scripts/build": "0.0.0-canary-20250912092308"
+  },
+  "sideEffects": false,
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "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,131 @@
+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 = [
+  '.nvmrc',
+  '.vscode/extensions.json',
+  '.vscode/settings.json',
+  '.husky/pre-commit',
+  'README.md',
+];
+
+export 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,
+      isTs: true,
+      packageManager: 'pnpm',
+    })),
+    ...(await handleTemplate(tsTemplate)),
+    ...(await handleTemplate(
+      entryTemplateDir,
+      {},
+      { fileExtra: '.tsx', routerPrefix: 'src/' },
+    )),
+  };
+  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',
+  );
+}
+
+main().catch(e => {
+  console.error(e);
+  process.exit(1);
+});