@modern-js/main-doc 0.0.0-next-20221209071922 → 0.0.0-next-20221209140613

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
 
-> @modern-js/main-doc@2.0.0-beta.2 build /tmp/repo/modern.js/packages/toolkit/main-doc
+> @modern-js/main-doc@2.0.0-beta.3 build /tmp/repo/modern.js/packages/toolkit/main-doc
 > npx ts-node ./scripts/sync.ts
 

package/CHANGELOG.md

@@ -1,9 +1,13 @@
 # @modern-js/main-doc
 
-## 0.0.0-next-20221209071922
+## 0.0.0-next-20221209140613
 
 ### Patch Changes
 
+- 7879e8f71: refactor: remove enableModernMode config
+
+  refactor: 不再支持 enableModernMode 配置项
+
 - 5927355ee: feat: develop documentation directly with main-doc
   feat: 直接使用 main-doc 包开发文档
 - 1ef69374b: feat: support update main-doc when package build or website build
@@ -21,4 +25,4 @@
 - Updated dependencies [3fae2d03b]
 - Updated dependencies [df41d71ad]
 - Updated dependencies [14b712da8]
-  - @modern-js/builder-doc@0.0.0-next-20221209071922
+  - @modern-js/builder-doc@0.0.0-next-20221209140613

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

@@ -33,7 +33,3 @@ modern inspect --env production
 ### SSR Configuration
 
 If the project has SSR enable, an additional `webpack.ssr.inspect.js` file will be generated in the `dist/`, corresponding to the webpack configuration at SSR build time.
-
-### Modern Configuration
-
-if project enable [enableModernMode](/docs/configure/app/output/enable-modern-mode), an additional `webpack.modern.inspect.js` file will be generated in the `dist/`corresponding to the webpack configuration at modern web build.

package/en/docusaurus-plugin-content-docs/current/configure/app/server/routes.md

@@ -52,16 +52,14 @@ After executing the `dev` command, you can see in `dist/route.json` that there a
       "entryName": "page-a",
       "entryPath": "html/page-a/index.html",
       "isSPA": true,
-      "isSSR": false,
-      "enableModernMode": false
+      "isSSR": false
     },
     {
       "urlPath": "/b",
       "entryName": "page-a",
       "entryPath": "html/page-a/index.html",
       "isSPA": true,
-      "isSSR": false,
-      "enableModernMode": false
+      "isSSR": false
     },
   ]
 }

package/package.json

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

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

@@ -33,7 +33,3 @@ modern inspect --env production
 ### SSR 配置
 
 如果项目开启了 SSR 能力，则在 `dist` 目录会另外生成一份 `webpack.ssr.inspect.js` 文件，对应 SSR 构建时的 webpack 配置。
-
-### Modern 配置
-
-如果项目开启了 [enableModernMode](/docs/configure/app/output/enable-modern-mode) 选项，则在 `dist` 目录会另外生成一份 `webpack.modern.inspect.js` 文件，对应现代浏览器的 webpack 配置。

package/zh/configure/app/server/routes.md

@@ -52,16 +52,14 @@ export default defineConfig({
       "entryName": "page-a",
       "entryPath": "html/page-a/index.html",
       "isSPA": true,
-      "isSSR": false,
-      "enableModernMode": false
+      "isSSR": false
     },
     {
       "urlPath": "/b",
       "entryName": "page-a",
       "entryPath": "html/page-a/index.html",
       "isSPA": true,
-      "isSSR": false,
-      "enableModernMode": false
+      "isSSR": false
     },
   ]
 }

package/zh/guides/advanced-features/compatibility.md

@@ -40,42 +40,6 @@ Modern.js 中还提供了基于浏览器 [UA](https://developer.mozilla.org/zh-C
 
 ![ua-polyfill](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/ua-polyfill.png)
 
-
-## 差异化分发
-
-Modern.js 提供了运行时基于浏览器 User Agent 的差异化分发方案, 设置 [`output.enableModernMode`](/docs/configure/app/output/enable-modern-mode) 后， 生产环境会自动构建出针对现代浏览器语法未降级的 JS 产物和针对旧版本浏览器带有 Polyfill 的 JS 产物:
-
-```bash title="dist/static/js"
-├── 370.95db0e84-es6.js
-├── 370.95db0e84-es6.js.map
-├── 370.ace5d8a0.js
-├── 370.ace5d8a0.js.map
-├── main.64eb3bc7-es6.js
-├── main.64eb3bc7-es6.js.map
-├── main.c8aab430.js
-├── main.c8aab430.js.map
-├── runtime-main.9ad9a46b-es6.js
-├── runtime-main.9ad9a46b-es6.js.map
-├── runtime-main.dccca6e0.js
-└── runtime-main.dccca6e0.js.map
-```
-
-同时 HTML 也会构建出对应的 ES6 版本:
-
-```js title="dist/html/main/index-es6.html"
-<script defer="defer" src="/static/js/370.95db0e84-es6.js"></script>
-```
-
-```js title="dist/html/main/index.html"
-<script defer="defer" src="/static/js/370.ace5d8a0.js"></script>
-```
-
-通过 `pnpm run build && pnpm run start` 启动服务器, 访问页面时，会根据浏览器信息决定返回 `index-es6.html` 还是 `index.html`。
-
-:::info 注
-内部目前使用 [@babel/compat-data](https://github.com/babel/babel/blob/main/packages/babel-compat-data/data/native-modules.json) 来判断具体浏览器是否支持 es6 语法。
-:::
-
 ## Browserslist 配置
 
 Modern.js 支持在项目根目录 `package.json` 文件中的 `browserslist` 字段（或单独的 `.browserslistrc` 文件）指定项目覆盖的目标浏览器范围。该值会被 [`@babel/preset-env`](https://babeljs.io/docs/en/babel-preset-env) 和 [`autoprefixer`](https://github.com/postcss/autoprefixer) 用来确定需要转换的 JavaScript 语法特性和需要添加的 CSS 浏览器前缀。

package/zh/guides/basic-features/document.md

@@ -0,0 +1,184 @@
+---
+title: Document 模板
+sidebar_position: 9
+---
+
+Docuemnt 模板会生成 html 文件，替代原来的 `html 模板`。
+这种方式的好处在于：使用了 `jsx` 语法，让写模板跟写组件一样丝滑。
+
+为了同时能够满足后端同学也能使用 `ejs` 语法编写模板，Modern.js 使用 `html 模板` 作为兼容。当项目中，没有编写 `Document.j|tsx` 文件时，将自动回退至 html 模板。
+
+## 使用说明
+### 引入
+```tsx
+import {
+  Html,
+  Root,
+  Head,
+  DocumentContext,
+  Body,
+} from '@modern-js/runtime/document';
+```
+
+### 导出
+```tsx
+export default Document() {}
+
+```
+
+### 文件位置
+
+Document 文件，默认在应用根目录下:
+
+```bash
+.
+├── node_modules
+├── src
+│   ├── modern-app-env.d.ts
+│   ├── myapp
+│   │   └── routes
+│   │       ├── index.css
+│   │       ├── layout.tsx
+│   │       ├── Document.tsx
+│   │       └── page.tsx
+│   ├── new-entry
+│   │   └── routes
+│   │       ├── index.css
+│   │       ├── layout.tsx
+│   │       ├── Document.tsx
+│   │       └── page.tsx
+│   └── Document.tsx
+├── modern.config.ts
+├── package.json
+├── pnpm-lock.yaml
+├── README.md
+└── tsconfig.json
+```
+
+多 entry 场景构建时，优先 entry 的根目录下的 Docoument.tsx 文件。如果当前 entry 没有 Document.tsx 文件，则会查找根目录下的 Document.tsx 文件。
+如果还没有，则会 fallback 到 `html 模板` 的逻辑。
+
+### 子组件
+Document 模板共提供了 `Html`、`Root` `Head` `Body` 渲染页面的组件，以及 `DocumentContext` 等提供
+分别渲染：
+- `Html`: 提供 html 原生 dom。并计算出 `DocumentStructrueContext` 的值，将 `Html` 的结构传递给子组件，判断其它子组件是否默认渲染。
+
+- `Body`: 渲染生成 `body` 节点。其子元素包含 `Root` 组件。支持其它元素同时作为子元素，例如页脚。
+
+- `Root`: 渲染的根节点 `<div id='root'></div>`。默认根节点的 `id = 'root'`。可以设置 props.rootId 来更改 id 属性。子元素，也会被渲染进 DOM 里，随着 react 渲染完成，会替换掉，一般用来实现全局 loading。
+
+- `Head`: 渲染生成 `head` 节点。会自动填充 meta 元素，以及 `Scripts` 组件。
+
+- `Scripts`: 将构建产生的 script 标签渲染到该位置。用于调整构建产物的位置，默认放在 `Head` 组件里，用于
+
+`Html` 组件中，`Head` 和 `Body` 是必须要存在的，其它组件可以按需选择合适的组件进行组装。
+
+### 模板参数
+
+因为是 JSX 形式，Document.tsx 里，可以比较自由的在组件内使用各种变量去赋值给各种自定义组件。
+但同时 Document 自身也提供了 `DocumentContext` context 来提供一些配置、环境参数，方便直接获取。主要以下参数：
+
+- processEnv：提供构建时的 `process.env`
+- config: Modern.js 项目的配置。目前只暴露出 output 相关的配置
+- entryName: 当前的 entry 名。
+- templateParams: html 模板的参数，由 builder 提供。对应 [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) 的 `templateParameters` 配置项最终获取到的结果。不建议使用!
+
+
+## 示例
+
+```tsx
+import React, { useContext } from 'react';
+import {
+  Html,
+  Root,
+  Head,
+  DocumentContext,
+  Body,
+} from '@modern-js/runtime/document';
+import Script from '@/components/Script';
+
+// 默认导出
+export default function Document(): React.ReactElement {
+  // DocumentContext 提供一些构建时的参数
+  const {
+    config: { output: htmlConfig },
+    entryName,
+    templateParams,
+  } = useContext(DocumentContext);
+
+  return (
+    <Html>
+      <Head>
+        // Head 组件支持自定义子元素。包括 link, script
+        <link href="https://www.baidu.com">百度</link>
+        <script
+          // inline script 的脚本需要如下处理
+          dangerouslySetInnerHTML={{
+            __html: `window.b = 22`,
+          }}
+        ></script>
+      </Head>
+      <Body>
+        // rootId 可以更改根元素的 id
+        <Root rootId="root">
+          // Root 支持子元素
+          <h1 style={{ color: 'red' }}>以下为构建时传过来的参数：</h1>
+          <h2> entryName：{entryName}</h2>
+          <h2> title：{htmlConfig.title}</h2>
+          <h2> rootId: {templateParams.mountId}</h2>
+        </Root>
+        // Body 组件支持 Root 以外增加不同的组件，共同组成页面
+        <h1>bottom</h1>
+      </Body>
+    </Html>
+  );
+}
+
+```
+
+以上文件，将会生成以下 html 文件：
+
+```html
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport"
+        content="width=device-width, initial-scale=1.0, shrink-to-fit=no, viewport-fit=cover, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="renderer" content="webkit">
+    <meta name="layoutmode" content="standard">
+    <meta name="imagemode" content="force">
+    <meta name="wap-font-scale" content="no">
+    <meta name="format-detection" content="telephone=no">
+    <script>...</script>
+    <script defer src="/static/js/lib-react.js"></script>
+    <script defer src="/static/js/lib-polyfill.js"></script>
+    <script defer src="/static/js/lib-router.js"></script>
+    <script defer
+        src="/static/js/vendors-node_modules_pnpm_loadable_component_5_15_2_react_18_2_0_node_modules_loadable_compon-3fb0cf.js"></script>
+    <script defer
+        src="/static/js/packages_runtime_plugin-router-legacy_dist_js_treeshaking_runtime_index_js-packages_runtime_p-28f4c9.js"></script>
+    <script defer src="/static/js/sub.js"></script>
+    <link href="https://www.baidu.com" />
+    <script>window.b = 22</script>
+</head>
+
+<body>
+    <div id="root">
+        <!--<?- html ?>-->
+        <h1 style="color:red">以下为构建时传过来的参数：</h1>
+        <h2> entryName：sub</h2>
+        <h2> title：</h2>
+        <h2> rootId: root</h2>
+    </div>
+    <h1>bottom</h1>
+    <!--<?- chunksMap.js ?>-->
+    <!--<?- SSRDataScript ?>-->
+</body>
+
+</html>
+```
+
+

package/zh/guides/basic-features/routes.md

@@ -219,7 +219,7 @@ export default const ErrorBoundary = () => {
 
 ## 自控式路由
 
-以 `routes/` 为约定的入口，Modern.js 不会多路由做额外的操作，开发者可以自行使用 React Router 6 的 API 进行开发，例如：
+以 `src/App.tsx` 为约定的入口，Modern.js 不会多路由做额外的操作，开发者可以自行使用 React Router 6 的 API 进行开发，例如：
 
 ```tsx
 import { Route, Routes, BrowserRouter } from '@modern-js/runtime/router';

package/zh/tutorials/first-app/c04-es6-plus-and-ts/4.3-compatibility.md

@@ -41,23 +41,6 @@ export default defineConfig({
 如果遇到无法识别的浏览器，Modern.js 将会返回全量的 polyfill。
 :::
 
-接下里我们继续修改 `modern.config.ts`：
-
-```typescript title="modern.config.ts"
-export default defineConfig({
-  output: {
-    enableModernMode: true,
-    polyfill: 'ua',
-  },
-});
-```
-
-以上配置将会开启「 差异化分发 」，在原生支持模块功能的浏览器中，Modern.js 优先使用带有 ESM 模块语法静态资源的 HTML，浏览器能够最优化的加载模块，带来更好的页面性能。
-
-执行 `pnpm run build && pnpm run start`，打开页面，可以看到已经加载了带有 `-es6` 后缀的资源文件：
-
-![result](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/result3.png)
-
 :::info 注
 更多相关内容可以查看 [**客户端兼容性**](/docs/guides/advanced-features/compatibility)。
 :::

package/en/docusaurus-plugin-content-docs/current/configure/app/output/enable-modern-mode.md

@@ -1,34 +0,0 @@
----
-sidebar_label: enableModernMode
----
-
-# output.enableModernMode
-
-* Type: `boolean`
-* Default: `false`
-
-Modern.js default value to build JS products with Polyfill for older browsers. After opening this configuration, you can automatically build JS products that are not degraded for modern browser syntax in the production environment. The product filename format is `[name].[hash]-es6/js`.
-
-For example, configure the following configuration:
-
-```ts title="modern.config.ts"
-import { defineConfig } from '@modern-js/app-tools';
-
-export default defineConfig({
-  output: {
-    enableModernMode: true,
-  },
-});
-```
-
-After executing the `build` command, modern is packaged in addition to the normal Client packaging, and the `dist/static/js` directory will generate es6 related products.
-
-![](https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/output-enable-modern-build.jpeg)
-
-After executing the `start` command, use the latest version Chrome browser access, and observe that the requested JS resource in the Network is an es6 product.
-
-![](https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/output-enable-modern-network.jpeg)
-
-:::info
-For more information, see [Client side compatibility](/docs/guides/advanced-features/compatibility)。
-:::

package/zh/configure/app/output/enable-modern-mode.md

@@ -1,34 +0,0 @@
----
-sidebar_label: enableModernMode
----
-
-# output.enableModernMode
-
-* 类型： `boolean`
-* 默认值：`false`
-
-Modern.js 默认值构建针对旧版浏览器带有 Polyfill 的 JS 产物，开启该配置后，可以在生产环境会自动构建出针对现代浏览器语法未降级的 JS 产物，产物文件名格式为 `[name].[hash]-es6/js`。
-
-例如配置如下配置：
-
-```ts title="modern.config.ts"
-import { defineConfig } from '@modern-js/app-tools';
-
-export default defineConfig({
-  output: {
-    enableModernMode: true,
-  },
-});
-```
-
-执行 `build` 命令后，除了正常的 Client 打包外， 还进行了 Modern 的打包，并且 `dist/static/js` 目录会生成 es6 相关产物。
-
-![](https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/output-enable-modern-build.jpeg)
-
-执行 `start` 命令后，使用最新版本 Chrome 浏览器访问，观察 Network 中请求的 JS 资源为 es6 产物。
-
-![](https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/output-enable-modern-network.jpeg)
-
-:::info
-更多内容可以查看[客户端兼容性](/docs/guides/advanced-features/compatibility)。
-:::