feat: migrate runtime cli plugin to new cli plugin (#6629)

web-infra-dev · Dec 23, 2024 · 0526b6a · 0526b6a
1 parent 3edcce1
commit 0526b6a
Show file tree

Hide file tree

Showing 29 changed files with 887 additions and 877 deletions.
diff --git a/.changeset/witty-hotels-collect.md b/.changeset/witty-hotels-collect.md
@@ -0,0 +1,7 @@
+---
+'@modern-js/runtime': patch
+---
+
+feat: migrate runtime cli plugin to new cli plugin
+
+feat: runtime CLI 插件迁移到新的 CLI 插件
diff --git a/packages/cli/core/src/context.ts b/packages/cli/core/src/context.ts
@@ -52,7 +52,7 @@ export const initAppContext = ({
   appDirectory: string;
   plugins: CliPlugin[];
   configFile: string | false;
-  runtimeConfigFile: string | false;
+  runtimeConfigFile: string;
   options?: {
     metaName?: string;
     srcDir?: string;

diff --git a/packages/document/module-doc/docs/en/guide/basic/command-preview.md b/packages/document/module-doc/docs/en/guide/basic/command-preview.md
@@ -47,7 +47,6 @@ The following features can currently be enabled.
 
 - Storybook V7
 - Tailwind CSS support
-- Modern.js Runtime API
 
 You can learn more about these features in the [Using the micro generator](/guide/basic/use-micro-generator) section.
 

diff --git a/packages/document/module-doc/docs/en/guide/basic/use-micro-generator.md b/packages/document/module-doc/docs/en/guide/basic/use-micro-generator.md
@@ -43,24 +43,3 @@ The **Storybook feature** can be enabled when we want to debug a component or a
 [Tailwind CSS](https://tailwindcss.com/) is a CSS framework and design system based on Utility Class, which can quickly add common styles to components, and support flexible extension of theme styles.
 
 If you want to use Tailwind CSS for a project, you can refer to ["Using Tailwind CSS"](https://modernjs.dev/module-tools/guide/best-practices/components.html#tailwind-css).
-
-## Modern.js Runtime API
-
-**Modern.js provides Runtime API capabilities that can only be used in the Modern.js application project environment**. If you need to develop a component for use in a Modern.js application environment, then you can turn on this feature and the microgenerator will add the `"@modern-js/runtime"` dependency.
-
-Also, the Storybook debugging tool will determine if the project needs to use the Runtime API by checking the project's dependencies and providing the same Runtime API runtime environment as the Modern.js application project.
-
-:::tip
-
-After successfully enabling it, you will be prompted to manually add a code similar to the one below to the configuration.
-
-```ts
-import { moduleTools, defineConfig } from '@modern-js/module-tools';
-import runtime from '@modern-js/runtime/cli';
-
-export default defineConfig({
-  plugins: [moduleTools(), runtime()],
-});
-```
-
-:::
diff --git a/packages/document/module-doc/docs/zh/guide/basic/command-preview.md b/packages/document/module-doc/docs/zh/guide/basic/command-preview.md
@@ -47,7 +47,6 @@ Options:
 
 - Storybook V7
 - Tailwind CSS 支持
-- Modern.js Runtime API
 
 关于这些功能，可以通过[「使用微生成器」](/guide/basic/use-micro-generator) 章节了解更多。
 

diff --git a/packages/document/module-doc/docs/zh/guide/basic/use-micro-generator.md b/packages/document/module-doc/docs/zh/guide/basic/use-micro-generator.md
@@ -43,24 +43,3 @@ export default defineConfig({
 [Tailwind CSS](https://tailwindcss.com/) 是一个以 Utility Class 为基础的 CSS 框架和设计系统，可以快速地为组件添加常用样式，同时支持主题样式的灵活扩展。
 
 如果你想要在项目使用 [Tailwind CSS](https://tailwindcss.com/)，可以参考 [「使用 Tailwind CSS」](https://modernjs.dev/module-tools/guide/best-practices/components.html#tailwind-css)。
-
-## Modern.js Runtime API 支持
-
-**Modern.js 提供了 [Runtime API](https://modernjs.dev/configure/app/runtime/intro) 能力，这些 API 只能在 Modern.js 的应用项目环境中使用**。如果你需要开发一个 Modern.js 应用环境中使用的组件，那么你可以开启该特性，微生成器会增加 `"@modern-js/runtime"`依赖。
-
-另外，Storybook 调试工具也会通过检测项目的依赖确定项目是否需要使用 Runtime API，并且提供与 Modern.js 应用项目一样的 Runtime API 运行环境。
-
-:::tip
-
-在成功开启后，会提示需要手动在配置中增加如下类似的代码。
-
-```ts
-import { moduleTools, defineConfig } from '@modern-js/module-tools';
-import runtime from '@modern-js/runtime/cli';
-
-export default defineConfig({
-  plugins: [moduleTools(), runtime()],
-});
-```
-
-:::
diff --git a/packages/runtime/plugin-garfish/jest.config.js b/packages/runtime/plugin-garfish/jest.config.js
@@ -6,5 +6,9 @@ module.exports = {
   rootDir: __dirname,
   moduleNameMapper: {
     '^@meta/runtime$': '<rootDir>/node_modules/@modern-js/runtime/src',
+    '^@modern-js/runtime/browser$':
+      '<rootDir>/node_modules/@modern-js/runtime/src/core/browser',
+    '^@modern-js/runtime/react$':
+      '<rootDir>/node_modules/@modern-js/runtime/src/core/react',
   },
 };
diff --git a/packages/runtime/plugin-garfish/package.json b/packages/runtime/plugin-garfish/package.json
@@ -71,7 +71,7 @@
     "test": "jest --passWithNoTests"
   },
   "dependencies": {
-    "@modern-js/plugin": "workspace:*",
+    "@modern-js/plugin-v2": "workspace:*",
     "@modern-js/runtime-utils": "workspace:*",
     "@modern-js/utils": "workspace:*",
     "@swc/helpers": "0.5.13",

diff --git a/packages/runtime/plugin-garfish/src/cli/code.ts b/packages/runtime/plugin-garfish/src/cli/code.ts
@@ -1,10 +1,10 @@
 import path from 'path';
 import type {
   AppTools,
-  IAppContext,
+  AppToolsContext,
+  AppToolsFeatureHooks,
   NormalizedConfig,
 } from '@modern-js/app-tools';
-import type { MaybeAsync } from '@modern-js/plugin';
 import type { Entrypoint } from '@modern-js/types';
 import { fs } from '@modern-js/utils';
 import * as template from './template';
@@ -15,9 +15,9 @@ export const ENTRY_BOOTSTRAP_FILE_NAME = 'bootstrap.jsx';
 
 export const generateCode = async (
   entrypoints: Entrypoint[],
-  appContext: IAppContext,
+  appContext: AppToolsContext<'shared'>,
   config: NormalizedConfig<AppTools>,
-  appendEntryCode: (input: { entrypoint: Entrypoint }) => MaybeAsync<string[]>,
+  hooks: AppToolsFeatureHooks<'shared'>,
 ) => {
   const { mountId } = config.html;
   const { enableAsyncEntry } = config.source;
@@ -27,7 +27,7 @@ export const generateCode = async (
     entrypoints.map(async entrypoint => {
       const { entryName, isAutoMount, entry, customEntry, customBootstrap } =
         entrypoint;
-      const appendCode = await appendEntryCode({ entrypoint });
+      const appendCode = await hooks.appendEntryCode.call({ entrypoint });
 
       if (isAutoMount) {
         // index.jsx