feat: add @modern-js/sandpack-react package

.changeset/chilled-ligers-brake.md

@@ -0,0 +1,5 @@
+---
+'@modern-js/sandpack-react': patch
+---
+
+feat: add @modern-js/sandpack-react package

packages/generator/sandpack-react/.eslintrc.js

@@ -0,0 +1,13 @@
+module.exports = {
+  root: true,
+  extends: ['@modern-js'],
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: ['./tsconfig.json'],
+  },
+  ignorePatterns: [
+    'src/templates/common.ts',
+    'src/templates/mwa.ts',
+    'src/templates/module.ts',
+  ],
+};

packages/generator/sandpack-react/.gitignore

@@ -0,0 +1,3 @@
+src/templates/common.ts
+src/templates/mwa.ts
+src/templates/module.ts

packages/generator/sandpack-react/.npmignore

@@ -0,0 +1,31 @@
+.DS_Store
+
+.pnp
+.pnp.js
+.env.local
+.env.*.local
+*.log*
+
+node_modules/
+*.tsbuildinfo
+.eslintcache
+
+coverage/
+output/
+output_resource/
+tests/
+
+.vscode/**/*
+!.vscode/settings.json
+!.vscode/extensions.json
+.idea/
+
+src/
+
+modern.config.js
+modern.config.ts
+jest.config.js
+.eslintrc.js
+.eslintrc
+tsconfig.json
+

packages/generator/sandpack-react/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.

packages/generator/sandpack-react/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).

packages/generator/sandpack-react/jest.config.js

@@ -0,0 +1,7 @@
+const sharedConfig = require('@scripts/jest-config');
+
+/** @type {import('@jest/types').Config.InitialOptions} */
+module.exports = {
+  ...sharedConfig,
+  rootDir: __dirname,
+};

packages/generator/sandpack-react/modern.config.js

@@ -0,0 +1,5 @@
+const { universalBuildConfig } = require('@scripts/build');
+
+module.exports = {
+  buildConfig: universalBuildConfig,
+};

packages/generator/sandpack-react/package.json

@@ -0,0 +1,73 @@
+{
+  "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": "2.32.1",
+  "jsnext:source": "./src/index.ts",
+  "types": "./src/index.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"
+    }
+  },
+  "scripts": {
+    "prepublishOnly": "only-allow-pnpm",
+    "new": "modern-lib new",
+    "build": "ts-node scripts/template.ts && modern-lib build",
+    "test": "jest --passWithNoTests"
+  },
+  "dependencies": {
+    "react": "^18",
+    "react-dom": "^18",
+    "@swc/helpers": "0.5.1",
+    "@codesandbox/sandpack-react": "^2.6.9"
+  },
+  "devDependencies": {
+    "@modern-js/base-generator": "workspace:*",
+    "@modern-js/mwa-generator": "workspace:*",
+    "@modern-js/module-generator": "workspace:*",
+    "@modern-js/entry-generator": "workspace:*",
+    "@modern-js/generator-utils": "workspace:*",
+    "@modern-js/generator-common": "workspace:*",
+    "@modern-js/codesmith-api-handlebars": "2.2.5",
+    "@modern-js/utils": "workspace:*",
+    "@scripts/build": "workspace:*",
+    "@scripts/jest-config": "workspace:*",
+    "@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"
+  },
+  "sideEffects": false,
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public",
+    "provenance": true,
+    "types": "./dist/types/index.d.ts"
+  }
+}

packages/generator/sandpack-react/scripts/codesandbox/.codesandbox/environment.json

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

packages/generator/sandpack-react/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"]
+      }
+    }
+  }
+}

packages/generator/sandpack-react/scripts/template.ts

@@ -0,0 +1,154 @@
+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';
+
+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 (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);
+});