@modern-js/main-doc 2.11.0 → 2.12.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @modern-js/main-doc
 
+## 2.12.0
+
+### Patch Changes
+
+- 9e5044d: doc: 修正文档中使用@edenx/runtime 的部分
+  doc: Correct the sections in the document that use @edenx/runtime.
+- 9328fb9: feat: prebundle theme
+
+  feat: 预打包主题
+
+  - @modern-js/builder-doc@2.12.0
+
 ## 2.11.0
 
 ### Patch Changes

package/docs/en/apis/app/hooks/config/icon.mdx

@@ -1,16 +1,56 @@
 ---
-title: icon.png
+title: icon
 sidebar_position: 2
 ---
-# icon.png
 
-When `config/icon.png` exist, it can inject app icon information into the html page at build time:
+# Icon
 
+## Set favicon
+
+When there is a `favicon.*` file in the `config` directory of the project root directory, Modern.js will automatically set the file to the [html.favicon](/configure/app/html/favicon) config to generate the favicon icon for the page:
+
+```
+./config
+└── favicon.ico
 ```
-.config
+
+After the build is complete, you can see that the following tags are automatically generated in the HTML:
+
+```html
+<link rel="icon" href="/favicon.ico" />
+```
+
+### Order
+
+When setting up the favicon, Modern.js looks for files in the following order:
+
+- favicon.png
+- favicon.jpg
+- favicon.jpeg
+- favicon.svg
+- favicon.ico
+
+## Set app icon
+
+When there is an `icon.*` file in the `config` directory of the project root directory, Modern.js will automatically set the file to the [html.appIcon](/configure/app/html/app-icon) config, it is used to generate the apple-touch-icon icon for the iOS system.
+
+```
+./config
 └── icon.png
 ```
 
-the app icon `link` meta will be injected into the html, as follows:
+After the build is complete, you can see that the following tags are automatically generated in the HTML:
+
+```html
+<link rel="apple-touch-icon" sizes="180*180" href="/static/image/icon.png" />
+```
+
+### Order
+
+When setting the app icon, Modern.js looks for files in the following order:
 
-![app-icon](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/api/app-icon.png)
+- icon.png
+- icon.jpg
+- icon.jpeg
+- icon.svg
+- icon.ico

package/docs/en/configure/app/tools/bundler-chain.mdx

@@ -0,0 +1,13 @@
+---
+sidebar_label: bundlerChain
+---
+
+# tools.bundlerChain
+
+:::tip
+This config is provided by Modern.js Builder, more detail can see [tools.bundlerChain](https://modernjs.dev/builder/en/api/config-tools.html#toolsbundlerchain).
+:::
+
+import Main from '@modern-js/builder-doc/docs/en/config/tools/bundlerChain.mdx';
+
+<Main />

package/docs/en/configure/app/tools/swc.mdx

@@ -19,10 +19,11 @@ When using Rspack as the bundler, SWC will be used for transpiling and compressi
 
 ## Install
 
-The `@modern-js/plugin-swc` plugin needs to be installed before use.
+First, you need to execute `pnpm run new` to enable the SWC compile:
 
 ```bash
-pnpm add @modern-js/plugin-swc -D
+? Action: Enable features
+? Enable features: Enable SWC Compile
 ```
 
 After the installation，please register the SWC plugin in the `modern.config.ts` file, then the SWC compilation and compression will be enabled.

package/docs/en/guides/basic-features/data-fetch.mdx

@@ -223,7 +223,7 @@ Currently, only CSR is supported, so stay tuned for Streaming SSR.
 Add the following code to `user/layout.loader.ts`:
 
 ```ts title="routes/user/layout.loader.ts"
-import { defer } from "@edenx/runtime/router"
+import { defer } from "@modern-js/runtime/router"
 
 const loader = () =>
 defer({

package/docs/en/guides/basic-features/routes.mdx

@@ -230,7 +230,7 @@ When a route jumps from `/` to `/blog`, if the JS Chunk of the `<Blog>` componen
 You can redirect routes by creating a [`data loader`](/guides/basic-features/data-fetch) file, Suppose you have the file `routes/user/page.tsx` and you want to redirect the route corresponding to this file, you can create the file `routes/user/page.loader.ts`:
 
 ```ts title="routes/user/page.loader.ts"
-import { redirect } from "@edenx/runtime/router"
+import { redirect } from '@modern-js/runtime/router'
 
 export default () => {
   const user = await getUser();

package/docs/en/guides/topic-detail/model/use-model.mdx

@@ -2,6 +2,7 @@
 sidebar_position: 3
 title: Use Models
 ---
+
 # Use Models
 
 ## Using Models in Components
@@ -146,7 +147,7 @@ will always get the initial value of Input.
 
 :::
 
-`useStaticModel` is also suitable for use with animation libraries such as [react-three-fiber](https://github.com/pmndrs/react-three-fiber), because binding fast-changing states in animation component UI can easily cause [performance issues](https:/docs.pmnd.rs/react-three-fiber/advanced/pitfalls#never-bind-fast-state-reactive). In this case, you can choose to use `useStaticModel`, which only subscribes to the State but does not cause the view component to re-render. Here is a simplified example:
+`useStaticModel` is also suitable for use with animation libraries such as [react-three-fiber](https://github.com/pmndrs/react-three-fiber), because binding fast-changing states in animation component UI can easily cause [performance issues](https://docs.pmnd.rs/react-three-fiber/advanced/pitfalls#never-bind-fast-state-reactive). In this case, you can choose to use `useStaticModel`, which only subscribes to the State but does not cause the view component to re-render. Here is a simplified example:
 
 ```ts
 function ThreeComponent() {

package/docs/en/guides/troubleshooting/builder.mdx

@@ -0,0 +1,31 @@
+---
+sidebar_position: 3
+---
+
+# Build FAQ
+
+If you encounter build-related problems, you can refer to the following documents:
+
+## General FAQ
+
+Please refer to [Modern.js Builder - General FAQ](https://modernjs.dev/builder/en/guide/faq/general.html), which contains some general questions about concepts, such as:
+
+- The relationship between Modern.js Builder and Modern.js?
+- Can Builder be used to build libraries or UI components?
+- Will Builder support Vite?
+
+## Features FAQ
+
+Please refer to [Modern.js Builder - Features FAQ](https://modernjs.dev/builder/en/guide/faq/features.html), which contains an introduction to some common building features, such as:
+
+- How to import UI Component library on demand?
+- How to run ESLint during compilation?
+- How to configure CDN path for static assets?
+
+## Exceptions FAQ
+
+Please refer to [Modern.js Builder - Exceptions FAQ](https://modernjs.dev/builder/en/guide/faq/exceptions.html), which contains some common construction problems, such as:
+
+- 'compilation' argument error when webpack compiling?
+- Compile error `You may need additional loader`?
+- Find `exports is not defined` runtime error?

package/docs/zh/apis/app/hooks/config/icon.mdx

@@ -1,18 +1,56 @@
 ---
-title: icon.png
+title: icon
 sidebar_position: 2
 ---
-# icon.png
 
-应用工程方案 App Icon 文件。
+# Icon
 
-项目根目录下 `config/icon.png` 时，可以在构建时向 html 页面注入 app icon 信息：
+## 设置 favicon
+
+当项目根目录的 `config` 目录下存在 `favicon.*` 文件时，Modern.js 会自动将该文件设置到 [html.favicon](/configure/app/html/favicon) 配置项中，用于生成页面的 favicon 图标：
+
+```
+./config
+└── favicon.ico
+```
+
+构建完成后，可以看到 HTML 中自动生成了以下标签：
+
+```html
+<link rel="icon" href="/favicon.ico" />
+```
+
+### 查找顺序
+
+在设置 app icon 时，Modern.js 会按以下顺序寻找文件：
+
+- favicon.png
+- favicon.jpg
+- favicon.jpeg
+- favicon.svg
+- favicon.ico
+
+## 设置 app icon
+
+当项目根目录的 `config` 目录下存在 `icon.*` 文件时，Modern.js 会自动将该文件设置到 [html.appIcon](/configure/app/html/app-icon) 配置项中，用于生成 iOS 系统下的 apple-touch-icon 图标。
 
 ```
 ./config
 └── icon.png
 ```
 
-最终 html 中会注入 app icon `link` 标签, 如下:
+构建完成后，可以看到 HTML 中自动生成了以下标签：
+
+```html
+<link rel="apple-touch-icon" sizes="180*180" href="/static/image/icon.png" />
+```
+
+### 查找顺序
+
+在设置 app icon 时，Modern.js 会按以下顺序寻找文件：
 
-![app-icon](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/api/app-icon.png)
+- icon.png
+- icon.jpg
+- icon.jpeg
+- icon.svg
+- icon.ico

package/docs/zh/configure/app/runtime/router.mdx

@@ -18,7 +18,7 @@ import RouterLegacyTip from "@site-docs/components/router-legacy-tip"
 ## basename
 
 - **类型：** `string`
-- **默认值：** ``
+- **默认值：** `/`
 
 设置客户端路由的 `basename`，通常用于应用需要部署在域名非根路径下的场景。
 

package/docs/zh/configure/app/tools/bundler-chain.mdx

@@ -0,0 +1,13 @@
+---
+sidebar_label: bundlerChain
+---
+
+# tools.bundlerChain
+
+:::tip
+该配置由 Modern.js Builder 提供，更多信息可参考 [tools.bundlerChain](https://modernjs.dev/builder/api/config-tools.html#toolsbundlerchain)。
+:::
+
+import Main from '@modern-js/builder-doc/docs/zh/config/tools/bundlerChain.mdx';
+
+<Main />

package/docs/zh/configure/app/tools/swc.mdx

@@ -19,13 +19,14 @@ Modern.js 提供了开箱即用的 SWC 插件，可以为你的 Web 应用提供
 
 ## 安装
 
-使用前需要安装 `@modern-js/plugin-swc` 插件。
+首先，你需要执行 `pnpm run new` 启用 SWC 编译：
 
 ```bash
-pnpm add @modern-js/plugin-swc -D
+? 请选择你想要的操作：启用可选功能
+? 启用可选功能：启用「SWC 编译」
 ```
 
-安装完成后，只需在 `modern.config.ts` 文件中注册 SWC 插件，即可启用 SWC 编译和压缩能力。
+执行完成后，你只需在 `modern.config.ts` 文件中注册 SWC 插件，即可启用 SWC 编译和压缩能力。
 
 ```ts title="modern.config.ts"
 import appTools, { defineConfig } from '@modern-js/app-tools';

package/docs/zh/guides/basic-features/data-fetch.mdx

@@ -224,7 +224,7 @@ export default function UserLayout() {
 创建 `user/layout.loader.ts`，并添加以下代码：
 
 ```ts title="routes/user/layout.loader.ts"
-import { defer } from "@edenx/runtime/router"
+import { defer } from "@modern-js/runtime/router"
 
 const loader = () =>
 defer({

package/docs/zh/guides/basic-features/routes.mdx

@@ -297,7 +297,7 @@ Modern.js 建议必须有根 layout 和根 loading。
 可以通过创建 [`data loader`](/guides/basic-features/data-fetch) 文件做路由的重定向，如有文件 `routes/user/page.tsx`，想对这个文件对应的路由做重定向，可以创建 `routes/user/page.loader.ts` 文件：
 
 ```ts title="routes/user/page.loader.ts"
-import { redirect } from "@edenx/runtime/router"
+import { redirect } from '@modern-js/runtime/router'
 
 export default () => {
   const user = await getUser();

package/docs/zh/guides/topic-detail/model/use-model.mdx

@@ -2,6 +2,7 @@
 sidebar_position: 3
 title: 使用 Model
 ---
+
 # 使用 Model
 
 ## 在组件内使用
@@ -147,7 +148,7 @@ function Search() {
 
 :::
 
-`useStaticModel` 还适合和 [react-three-fiber](https://github.com/pmndrs/react-three-fiber) 等动画库一起使用，因为在动画组件 UI 里绑定会快速变化的状态，容易引起[性能问题](https:/docs.pmnd.rs/react-three-fiber/advanced/pitfalls#never-bind-fast-state-reactive)。这种情况就可以选择使用 `useStaticModel`，它只会订阅状态，但不会引起视图组件的重新渲染。下面是一个简化示例：
+`useStaticModel` 还适合和 [react-three-fiber](https://github.com/pmndrs/react-three-fiber) 等动画库一起使用，因为在动画组件 UI 里绑定会快速变化的状态，容易引起[性能问题](https://docs.pmnd.rs/react-three-fiber/advanced/pitfalls#never-bind-fast-state-reactive)。这种情况就可以选择使用 `useStaticModel`，它只会订阅状态，但不会引起视图组件的重新渲染。下面是一个简化示例：
 
 ```ts
 function ThreeComponent() {

package/docs/zh/guides/troubleshooting/builder.mdx

@@ -0,0 +1,31 @@
+---
+sidebar_position: 3
+---
+
+# 构建相关问题
+
+如果你遇到了构建相关的问题，可以参考以下文档：
+
+## 通用类问题
+
+请参考 [「Modern.js Builder - 通用类问题」](https://modernjs.dev/builder/guide/faq/general.html)，其中包含一些概念类的通用问题，比如：
+
+- Modern.js Builder 和 Modern.js 的关系？
+- Builder 能否用于构建工具库或组件库？
+- Builder 是否会接入 Vite？
+
+## 功能类问题
+
+请参考 [「Modern.js Builder - 功能类问题」](https://modernjs.dev/builder/guide/faq/features.html)，其中包含一些常见构建功能的介绍，比如：
+
+- 如何配置组件库按需引入？
+- 如何在编译过程中进行 ESLint 代码校验？
+- 如何配置静态资源的 CDN 路径？
+
+## 异常类问题
+
+请参考 [「Modern.js Builder - 异常类问题」](https://modernjs.dev/builder/guide/faq/exceptions.html)，其中包含一些常见构建问题的处理方法，比如：
+
+- webpack 编译出现 'compilation' argument 报错？
+- 编译时报错 `You may need additional loader`？
+- 打开页面后报错，提示 `exports is not defined`？

package/modern.config.ts

@@ -78,7 +78,8 @@ export default defineConfig({
     lang: 'zh',
     themeDir: path.join(__dirname, 'src'),
     markdown: {
-      checkDeadLinks: process.env.NODE_ENV === 'production',
+      checkDeadLinks: true,
+      experimentalMdxRs: true,
     },
     head: [
       `
@@ -133,7 +134,7 @@ export default defineConfig({
         dataUriLimit: 0,
       },
       dev: {
-        startUrl: true,
+        startUrl: false,
       },
       source: {
         alias: {

package/package.json

@@ -11,13 +11,13 @@
     "modern",
     "modern.js"
   ],
-  "version": "2.11.0",
+  "version": "2.12.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
   "peerDependencies": {
-    "@modern-js/builder-doc": "^2.11.0"
+    "@modern-js/builder-doc": "^2.12.0"
   },
   "devDependencies": {
     "classnames": "^2",
@@ -29,9 +29,9 @@
     "fs-extra": "^10",
     "@types/node": "^16",
     "@types/fs-extra": "^9",
-    "@modern-js/builder-doc": "2.11.0",
-    "@modern-js/doc-tools": "2.11.0",
-    "@modern-js/doc-plugin-auto-sidebar": "2.11.0"
+    "@modern-js/builder-doc": "2.12.0",
+    "@modern-js/doc-tools": "2.12.0",
+    "@modern-js/doc-plugin-auto-sidebar": "2.12.0"
   },
   "scripts": {
     "dev": "modern dev",

package/docs/en/configure/app/source/plugin-import.mdx

@@ -1,13 +0,0 @@
----
-sidebar_label: pluginImport
----
-
-# source.transformImport
-
-:::tip
-This config is provided by Modern.js Builder, more detail can see [source.transformImport](https://modernjs.dev/builder/en/api/config-source.html#sourcepluginimport).
-:::
-
-import Main from '@modern-js/builder-doc/docs/en/config/source/transformImport.md';
-
-<Main />

package/docs/zh/configure/app/source/plugin-import.mdx

@@ -1,13 +0,0 @@
----
-sidebar_label: pluginImport
----
-
-# source.transformImport
-
-:::tip
-该配置由 Modern.js Builder 提供，更多信息可参考 [source.transformImport](https://modernjs.dev/builder/api/config-source.html#sourcepluginimport)。
-:::
-
-import Main from '@modern-js/builder-doc/docs/zh/config/source/transformImport.md';
-
-<Main />