feat: document support Sandpack component

.changeset/chilled-ligers-brake.md

@@ -0,0 +1,7 @@
+---
+'@modern-js/sandpack-react': patch
+---
+
+feat: add @modern-js/sandpack-react package
+
+feat: 增加 @modern-js/sandpack-react 包

.changeset/dirty-suns-sit.md

@@ -0,0 +1,9 @@
+---
+'@modern-js/module-generator': minor
+'@modern-js/base-generator': minor
+'@modern-js/mwa-generator': minor
+---
+
+feat: adjust ts template, handle dependencies through handlebars
+
+feat: 调整生成器 ts 模板，使用 handlebars 处理依赖

packages/document/main-doc/package.json

@@ -27,6 +27,9 @@
     "access": "public",
     "provenance": true
   },
+  "dependencies": {
+    "@modern-js/sandpack-react": "workspace:*"
+  },
   "peerDependencies": {
     "@modern-js/builder-doc": "workspace:^2.33.1"
   },

packages/document/main-doc/src/components/Sandpack/index.css

@@ -0,0 +1,7 @@
+.light {
+  --sp-layout-height: 500px !important;
+}
+
+.dark {
+  --sp-layout-height: 500px !important;
+}

packages/document/main-doc/src/components/Sandpack/index.tsx

@@ -0,0 +1,28 @@
+import ModernSandpack, { ModernSandpackProps } from '@modern-js/sandpack-react';
+import React, { PropsWithChildren } from 'react';
+import { useDark } from 'rspress/runtime';
+
+import './index.css';
+
+const Sandpack = (props: PropsWithChildren<ModernSandpackProps>) => {
+  const dark = useDark();
+  const { children, ...otherProps } = props;
+  const files: Record<string, string> = {};
+  React.Children.forEach(children, (child: any) => {
+    if (child) {
+      const { meta, children } = child.props.children.props;
+      const matches = meta.match(/title="(.*)"/);
+      if (matches.length > 1) {
+        files[matches[1]] = children;
+      }
+    }
+  });
+  return (
+    <ModernSandpack
+      files={files}
+      theme={dark ? 'dark' : 'light'}
+      {...otherProps}
+    />
+  );
+};
+export default Sandpack;

packages/generator/generators/base-generator/src/index.ts

@@ -34,11 +34,11 @@ const handleTemplateFile = async (
   const { packageManager } = ans;
 
   await appApi.forgeTemplate(
-    'templates/base-templates/**/*',
+    'templates/base-template/**/*',
     undefined,
     resourceKey =>
       resourceKey
-        .replace('templates/base-templates/', '')
+        .replace('templates/base-template/', '')
         .replace('.handlebars', ''),
   );
   await appApi.forgeTemplate('templates/idea/**/*', undefined, resourceKey =>
@@ -47,11 +47,11 @@ const handleTemplateFile = async (
 
   if (packageManager === PackageManager.Pnpm) {
     await appApi.forgeTemplate(
-      'templates/pnpm-templates/**/*',
+      'templates/pnpm-template/**/*',
       undefined,
       resourceKey =>
         resourceKey
-          .replace('templates/pnpm-templates/npmrc', '.npmrc')
+          .replace('templates/pnpm-template/npmrc', '.npmrc')
           .replace('.handlebars', ''),
     );
   }

packages/generator/generators/module-generator/package.json

@@ -33,7 +33,6 @@
     "@modern-js/changeset-generator": "workspace:*",
     "@modern-js/codesmith": "2.2.5",
     "@modern-js/codesmith-api-app": "2.2.5",
-    "@modern-js/codesmith-api-json": "2.2.5",
     "@modern-js/dependence-generator": "workspace:*",
     "@modern-js/generator-common": "workspace:*",
     "@modern-js/generator-utils": "workspace:*",

packages/generator/generators/module-generator/src/index.ts

@@ -1,7 +1,6 @@
 import path from 'path';
 import { GeneratorContext, GeneratorCore } from '@modern-js/codesmith';
 import { AppAPI } from '@modern-js/codesmith-api-app';
-import { JsonAPI } from '@modern-js/codesmith-api-json';
 import {
   i18n as commonI18n,
   BaseGenerator,
@@ -37,8 +36,6 @@ export const handleTemplateFile = async (
   generator: GeneratorCore,
   appApi: AppAPI,
 ) => {
-  const jsonAPI = new JsonAPI(generator);
-
   const {
     isMonorepoSubProject,
     isPublic = true,
@@ -164,21 +161,6 @@ export const handleTemplateFile = async (
   );
 
   if (language === Language.TS) {
-    const updateInfo: Record<string, string> = {
-      'devDependencies.typescript': '~5.0.4',
-      'devDependencies.@types/jest': '~29.2.4',
-      'devDependencies.@types/node': '~16.11.7',
-      'devDependencies.@types/react': '~18.0.26',
-    };
-
-    await jsonAPI.update(
-      context.materials.default.get(path.join(projectPath, 'package.json')),
-      {
-        query: {},
-        update: { $set: updateInfo },
-      },
-    );
-
     await appApi.forgeTemplate(
       'templates/ts-template/**/*',
       undefined,

packages/generator/generators/module-generator/templates/base-template/package.json.handlebars

@@ -55,6 +55,12 @@
     "@modern-js/eslint-config": "{{modernVersion}}",
     "@modern-js/tsconfig":"{{modernVersion}}",
     "@modern-js-app/eslint-config": "{{modernVersion}}",
+    {{#if isTs}}
+    "typescript": "~5.0.4",
+    "@types/jest": "~29.2.4",
+    "@types/node": "~16.11.7",
+    "@types/react": "~18.0.26",
+    {{/if}}
     "rimraf": "~3.0.2",
     "lint-staged": "~13.1.0",
     "prettier": "~2.8.1",

packages/generator/generators/mwa-generator/package.json

@@ -32,7 +32,6 @@
     "@modern-js/base-generator": "workspace:*",
     "@modern-js/codesmith": "2.2.5",
     "@modern-js/codesmith-api-app": "2.2.5",
-    "@modern-js/codesmith-api-json": "2.2.5",
     "@modern-js/dependence-generator": "workspace:*",
     "@modern-js/entry-generator": "workspace:*",
     "@modern-js/generator-common": "workspace:*",

packages/generator/generators/mwa-generator/src/index.ts

@@ -1,7 +1,6 @@
 import path from 'path';
 import { GeneratorContext, GeneratorCore } from '@modern-js/codesmith';
 import { AppAPI } from '@modern-js/codesmith-api-app';
-import { JsonAPI } from '@modern-js/codesmith-api-json';
 import {
   i18n as commonI18n,
   BaseGenerator,
@@ -38,8 +37,6 @@ export const handleTemplateFile = async (
   generator: GeneratorCore,
   appApi: AppAPI,
 ) => {
-  const jsonAPI = new JsonAPI(generator);
-
   const { isMonorepoSubProject, isTest, projectDir = '' } = context.config;
 
   const { outputPath } = generator;
@@ -148,26 +145,11 @@ export const handleTemplateFile = async (
       isMonorepoSubProject,
       modernVersion,
       packageManager,
+      isTs: language === Language.TS,
     },
   );
 
   if (language === Language.TS) {
-    await jsonAPI.update(
-      context.materials.default.get(path.join(projectPath, 'package.json')),
-      {
-        query: {},
-        update: {
-          $set: {
-            'devDependencies.typescript': '~5.0.4',
-            'devDependencies.@types/jest': '~29.2.4',
-            'devDependencies.@types/node': '~16.11.7',
-            'devDependencies.@types/react': '~18.0.26',
-            'devDependencies.@types/react-dom': '~18.0.10',
-          },
-        },
-      },
-    );
-
     await appApi.forgeTemplate(
       'templates/ts-template/**/*',
       undefined,

packages/generator/generators/mwa-generator/templates/base-template/package.json.handlebars

@@ -38,6 +38,13 @@
     "@modern-js/eslint-config": "{{modernVersion}}",
     "@modern-js/tsconfig":"{{modernVersion}}",
     "@modern-js-app/eslint-config": "{{modernVersion}}",
+    {{#if isTs}}
+    "typescript": "~5.0.4",
+    "@types/jest": "~29.2.4",
+    "@types/node": "~16.11.7",
+    "@types/react": "~18.0.26",
+    "@types/react-dom": "~18.0.10",
+    {{/if}}
     "lint-staged": "~13.1.0",
     "prettier": "~2.8.1",
     "husky": "~8.0.1",

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,
+};