@modern-js/main-doc 0.0.0-next-20221203140534 → 0.0.0-next-20221205074243

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # @modern-js/main-doc
 
-## 0.0.0-next-20221203140534
+## 0.0.0-next-20221205074243
 
 ### Patch Changes
 
@@ -21,4 +21,4 @@
 - Updated dependencies [3fae2d03b]
 - Updated dependencies [df41d71ad]
 - Updated dependencies [14b712da8]
-  - @modern-js/builder-doc@0.0.0-next-20221203140534
+  - @modern-js/builder-doc@0.0.0-next-20221205074243

package/en/docusaurus-plugin-content-docs/current/apis/app/commands/new.md

@@ -43,8 +43,6 @@ $ npx modern new
 ? 请选择你想要的操作 启用可选功能
 ? 启用可选功能 (Use arrow keys)
 ❯ 启用 Tailwind CSS 支持
-  启用 Less 支持
-  启用 Sass 支持
   启用「BFF」功能
   启用「微前端」模式
   启用「单元测试 / 集成测试」功能

package/en/docusaurus-plugin-content-docs/current/apis/app/runtime/core/bootstrap.md

@@ -7,25 +7,39 @@ Used to start and mount App, usually without manual calls。This API is only req
 ## Usage
 
 ```ts
+import ReactDOM from 'react-dom/client'
 import { bootstrap } from '@modern-js/runtime';
 
-bootstrap(App, 'root');
+bootstrap(App, 'root', undefined, ReactDOM);
 ```
 
 ## Function Signature
 
 ```ts
-function bootstrap(AppComponent: React.ComponentType<any>, rootId: string): React.ComponentType<any> | void
+type BootStrap<T = unknown> = (
+  App: React.ComponentType,
+  id: string | HTMLElement | RuntimeContext,
+  root?: any,
+  ReactDOM?: {
+    render?: Renderer;
+    hydrate?: Renderer;
+    createRoot?: typeof createRoot;
+    hydrateRoot?: typeof hydrateRoot;
+  },
+) => Promise<T>;
 ```
 
 ### Input
 
 - `AppComponent`: reactElement instance created by [`createApp`](./create-app).
 - `rootId`: DOM root element id to mount，like `"root"`.
+- `root`: ReactDOM.create the return value, which is used in the scenario where the root needs to destroy the component outside the bootstrap function.
+- `ReactDOM`: ReactDOM object for distinguishing between React 18 and React 17 APIs.
 
 ## Example
 
 ```tsx
+import ReactDOM from 'react-dom/client'
 import { createApp, bootstrap } from '@modern-js/runtime';
 import { router, state } from '@modern-js/runtime/plugins';
 
@@ -38,7 +52,7 @@ const WrappedApp = createApp({
   plugins: [router({}), state({})],
 })(App);
 
-bootstrap(WrappedApp, 'root');
+bootstrap(WrappedApp, 'root', undefined, ReactDOM);
 
 ```
 

package/en/docusaurus-plugin-content-docs/current/guides/basic-features/builder.md

@@ -0,0 +1,46 @@
+---
+title: Builder
+sidebar_position: 2
+---
+
+**Modern.js uses [Modern.js Builder](https://modernjs.dev/builder) to build your Web APP. **
+
+Modern.js Builder is one of the core components of Modern.js. It is a build engine for modern Web development and can be used independently of Modern.js. Modern.js Builder supports multiple bundlers such as webpack and rspack, and it uses webpack by default.
+
+## Build Architecture
+
+From the perspective of building, Modern.js is divided into three layers, from top to bottom:
+
+- Upper-layer framework: Modern.js.
+- Universal build engine: Modern.js Builder.
+- Low-level bundlers: webpack and rspack.
+
+<img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/builder-layers-1117.png" style={{ maxWidth: '540px' }} />
+
+## Builder Documentation
+
+Since Modern.js Builder is a module that can be used independently, we provide a separate document for it, the site address is: [modernjs.dev/builder](https://modernjs.dev/builder).
+
+In this document, you can learn about the detailed introduction of Modern.js Builder, and you can also find a complete usage guide for each building features. When you encounter building issues, it is recommended that you first read the Modern.js Builder documentation to solve them.
+
+## Builder Config
+
+The config of Modern.js is inherited from Modern.js Builder, so you can use all build configs provided by Modern.js Builder in Modern.js.
+
+Take the `html.title` config of Modern.js Builder as an example, you can directly use this config in the `modern.config.ts` file, and it will be automatically passed to Modern.js Builder.
+
+```ts title="modern.config.js"
+export default defineConfig({
+  html: {
+    title: 'example',
+  },
+});
+```
+
+For details of building configs, please refer to [「Modern.js Builder - Builder Config」](https://modernjs.dev/builder/en/guide/basic/builder-config.html).
+
+## Building Features
+
+Modern.js Builder provides a wealth of building features, including dozens of features such as JavaScript compilation, CSS compilation, static resource processing, hot module replacement, code compression, and TS type checking.
+
+We recommend you to read [「Modern.js Builder - All Features」](https://modernjs.dev/builder/en/guide/features.html) to learn all the building features provided by Modern.js Builder.

package/en/docusaurus-plugin-content-docs/current.json

@@ -179,44 +179,44 @@
     "message": "Runtime",
     "description": "The label for category runtime in sidebar apisAppSidebar"
   },
-  "sidebar.apisAppSidebar.category.核心 API": {
-    "message": "Core API",
+  "sidebar.apisAppSidebar.category.核心": {
+    "message": "Core",
     "description": "The label for category Core API in sidebar apisAppSidebar"
   },
-  "sidebar.apisAppSidebar.category.App API": {
-    "message": "App API",
+  "sidebar.apisAppSidebar.category.App": {
+    "message": "App",
     "description": "The label for category App API in sidebar apisAppSidebar"
   },
-  "sidebar.apisAppSidebar.category.BFF Server API": {
-    "message": "BFF Server API",
+  "sidebar.apisAppSidebar.category.BFF Server": {
+    "message": "BFF Server",
     "description": "The label for category BFF Server API in sidebar apisAppSidebar"
   },
-  "sidebar.apisAppSidebar.category.Model API": {
-    "message": "Model API",
+  "sidebar.apisAppSidebar.category.Model": {
+    "message": "Model",
     "description": "The label for category Model API in sidebar apisAppSidebar"
   },
-  "sidebar.apisAppSidebar.category.Container API": {
-    "message": "Container API",
+  "sidebar.apisAppSidebar.category.Container": {
+    "message": "Container",
     "description": "The label for category Container API in sidebar apisAppSidebar"
   },
-  "sidebar.apisAppSidebar.category.Testing API": {
-    "message": "Testing API",
+  "sidebar.apisAppSidebar.category.Testing": {
+    "message": "Testing",
     "description": "The label for category Testing API in sidebar apisAppSidebar"
   },
-  "sidebar.apisAppSidebar.category.Web Server API": {
-    "message": "Web Server API",
+  "sidebar.apisAppSidebar.category.Web Server": {
+    "message": "Web Server",
     "description": "The label for category Web Server API in sidebar apisAppSidebar"
   },
-  "sidebar.apisAppSidebar.category.Utility API": {
-    "message": "Utility API",
+  "sidebar.apisAppSidebar.category.Utility": {
+    "message": "Utility",
     "description": "The label for category Utility API in sidebar apisAppSidebar"
   },
   "sidebar.apisAppSidebar.category.loadable": {
     "message": "loadable",
     "description": "The label for category loadable in sidebar apisAppSidebar"
   },
-  "sidebar.apisAppSidebar.category.插件 API": {
-    "message": "插件 API",
+  "sidebar.apisAppSidebar.category.插件": {
+    "message": "插件",
     "description": "The label for category 插件 API in sidebar apisAppSidebar"
   },
   "sidebar.apisMonorepoSidebar.category.文件约定": {

package/package.json

@@ -11,20 +11,20 @@
     "modern",
     "modern.js"
   ],
-  "version": "0.0.0-next-20221203140534",
+  "version": "0.0.0-next-20221205074243",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
   "peerDependencies": {
-    "@modern-js/builder-doc": "0.0.0-next-20221203140534"
+    "@modern-js/builder-doc": "0.0.0-next-20221205074243"
   },
   "devDependencies": {
     "ts-node": "^10",
     "fs-extra": "^10",
     "@types/node": "^16",
     "@types/fs-extra": "^9",
-    "@modern-js/builder-doc": "0.0.0-next-20221203140534"
+    "@modern-js/builder-doc": "0.0.0-next-20221205074243"
   },
   "scripts": {
     "build": "npx ts-node ./scripts/sync.ts"

package/zh/apis/app/commands/new.md

@@ -43,8 +43,6 @@ $ npx modern new
 ? 请选择你想要的操作 启用可选功能
 ? 启用可选功能 (Use arrow keys)
 ❯ 启用 Tailwind CSS 支持
-  启用 Less 支持
-  启用 Sass 支持
   启用「BFF」功能
   启用「微前端」模式
   启用「单元测试 / 集成测试」功能

package/zh/apis/app/runtime/app/_category_.json

@@ -1,4 +1,4 @@
 {
-  "label": "APP API",
+  "label": "APP",
   "position": 4
 }

package/zh/apis/app/runtime/bff/_category_.json

@@ -1,4 +1,4 @@
 {
-  "label": "BFF API",
+  "label": "BFF",
   "position": 8
 }

package/zh/apis/app/runtime/core/_category_.json

@@ -1,4 +1,4 @@
 {
-  "label": "核心 API",
+  "label": "核心",
   "position": 3
 }

package/zh/apis/app/runtime/core/bootstrap.md

@@ -7,25 +7,39 @@ title: bootstrap
 ## 使用姿势
 
 ```ts
+import ReactDOM from 'react-dom/client'
 import { bootstrap } from '@modern-js/runtime';
 
-bootstrap(App, 'root');
+bootstrap(App, 'root', undefined, ReactDOM);
 ```
 
 ## 函数签名
 
 ```ts
-function bootstrap(AppComponent: React.ComponentType<any>, rootId: string): React.ComponentType<any> | void
+type BootStrap<T = unknown> = (
+  App: React.ComponentType,
+  id: string | HTMLElement | RuntimeContext,
+  root?: any,
+  ReactDOM?: {
+    render?: Renderer;
+    hydrate?: Renderer;
+    createRoot?: typeof createRoot;
+    hydrateRoot?: typeof hydrateRoot;
+  },
+) => Promise<T>;
 ```
 
 ### 参数
 
 - `AppComponent`：通过 [`createApp`](./create-app) 创建的 ReactElement 实例。
 - `rootId`：要挂载的 DOM 根元素 id，如 `"root"`。
+- `root`: ReactDOM.createRoot 的返回值，用于 bootstrap 函数外需要 root 销毁组件的场景。
+- `ReactDOM`: ReactDOM 对象，用于区分 React 18 和 React 17 API。
 
 ## 示例
 
 ```tsx
+import ReactDOM from 'react-dom/client'
 import { createApp, bootstrap } from '@modern-js/runtime';
 import { router, state } from '@modern-js/runtime/plugins';
 
@@ -38,7 +52,7 @@ const WrappedApp = createApp({
   plugins: [router({}), state({})],
 })(App);
 
-bootstrap(WrappedApp, 'root');
+bootstrap(WrappedApp, 'root', undefined, ReactDOM);
 
 ```
 

package/zh/apis/app/runtime/model/_category_.json

@@ -1,4 +1,4 @@
 {
-  "label": "Model API",
+  "label": "Model",
   "position": 6
 }

package/zh/apis/app/runtime/router/_category_.json

@@ -1,4 +1,4 @@
 {
-  "label": "Router API",
+  "label": "Router",
   "position": 5
 }

package/zh/apis/app/runtime/ssr/_category_.json

@@ -1,4 +1,4 @@
 {
-  "label": "SSR API",
+  "label": "SSR",
   "position": 7
 }

package/zh/apis/app/runtime/testing/_category_.json

@@ -1,4 +1,4 @@
 {
-  "label": "Testing API",
+  "label": "Testing",
   "position": 11
 }

package/zh/apis/app/runtime/utility/_category_.json

@@ -1,4 +1,4 @@
 {
-  "label": "Utility API",
+  "label": "Utility",
   "position": 10
 }

package/zh/apis/app/runtime/web-server/_category_.json

@@ -1,4 +1,4 @@
 {
-  "label": "Web Server API",
+  "label": "Web Server",
   "position": 9
 }