@modern-js/main-doc 2.0.2 → 2.1.0

package/en/docusaurus-plugin-content-docs/current/guides/advanced-features/bff/function.md

@@ -63,32 +63,32 @@ Several routing conventions are described as follow.
 
 Files named `index.[jt]s` are mapped to the previous directory.
 
-* `api/index.ts` -> `{prefix}/`
-* `api/user/index.ts` -> `{prefix}/user`
+- `api/index.ts` -> `{prefix}/`
+- `api/user/index.ts` -> `{prefix}/user`
 
 ### Multi-layer Route
 
 Supports parsing nested files, if you create a nested folder structure, the files will still automatically parse routes in the same way.
 
-* `api/hello.ts` -> `{prefix}/hello`
-* `api/user/list.ts` -> `{prefix}/user/list`
+- `api/hello.ts` -> `{prefix}/hello`
+- `api/user/list.ts` -> `{prefix}/user/list`
 
 ### Dynamic Route
 
 Create folders or files named with `[xxx]` to support dynamic named routing parameters.
 
-* `api/user/[username]/info.ts` -> `{prefix}/user/:username/info`
-* `api/user/username/[action].ts` -> `{prefix}/user/username/:action`
+- `api/user/[username]/info.ts` -> `{prefix}/user/:username/info`
+- `api/user/username/[action].ts` -> `{prefix}/user/username/:action`
 
 ### Allow List
 
 By default, all files in the'api/'directory will be parsed as BFF function files, but the following files will not be parsed:
 
-* file name start with `_`, for example `_utils.ts`.
-* files in directory which name start with `_`, for example `_utils/index.ts`、`_utils/cp.ts`.
-* test files, for example `foo.test.ts`.
-* type files, for example `hello.d.ts`.
-* files in `node_module`.
+- file name start with `_`, for example `_utils.ts`.
+- files in directory which name start with `_`, for example `_utils/index.ts`、`_utils/cp.ts`.
+- test files, for example `foo.test.ts`.
+- type files, for example `hello.d.ts`.
+- files in `node_module`.
 
 ## RESTful API
 
@@ -126,11 +126,11 @@ export const post = async () => {
 };
 ```
 
-* Modern.js supports 9 definitions for HTTP Method: `GET`、`POST`、`PUT`、`DELETE`、`CONNECT`、`TRACE`、`PATCH`、`OPTION`、`HEAD`, can be exported using these methods as functions。
+- Modern.js supports 9 definitions for HTTP Method: `GET`、`POST`、`PUT`、`DELETE`、`CONNECT`、`TRACE`、`PATCH`、`OPTION`、`HEAD`, can be exported using these methods as functions。
 
-* The name is size insensitive，if `GET`，can write `get`、`Get`、`GEt`、`GET`，can be accurately identified. But default export as `export default xxx` will be map to `Get`。
+- The name is size insensitive，if `GET`，can write `get`、`Get`、`GEt`、`GET`，can be accurately identified. But default export as `export default xxx` will be map to `Get`。
 
-* Multiple functions of different Methods can be defined in one file, but if multiple functions of the same Method are defined, only the first will take effect.
+- Multiple functions of different Methods can be defined in one file, but if multiple functions of the same Method are defined, only the first will take effect.
 
 :::info
 It should be noted that the defined functions should all be asynchronous, which is related to the type when the function is called, which will be mentioned later.
@@ -149,27 +149,25 @@ Dynamic routing will be used as imported parameters in the first part of the fun
 ```ts title="api/[level]/[id].ts"
 export default async (level: number, id: number) => {
   const userData = await queryUser(level, uid);
-  return userData
-}
+  return userData;
+};
 ```
 
 Pass dynamic parameters directly when calling:
 
 ```ts title="App.tsx"
-import { useState, useEffect } from 'react'
-import { get as getUser } from '@api/[level]/[id]'
+import { useState, useEffect } from 'react';
+import { get as getUser } from '@api/[level]/[id]';
 
 export default () => {
-  const [name, setName] = useState('')
+  const [name, setName] = useState('');
 
   useEffect(() => {
-    getUser(6, 001).then(
-      userData => setName(userData.name)
-    )
-  }, [])
+    getUser(6, 001).then(userData => setName(userData.name));
+  }, []);
 
-  return <div>{name}</div>
-}
+  return <div>{name}</div>;
+};
 ```
 
 #### RequestOption
@@ -179,11 +177,12 @@ The parameter after Dynamic Path is the object `RequestOption` containing querys
 In normal functions without dynamic routing, the incoming `data` and `query` can be obtained from the first imported parameter, for example:
 
 ```ts title="api/hello.ts"
-import type { RequestOption } from '@modern-js/runtime/server'
+import type { RequestOption } from '@modern-js/runtime/server';
 
-export async function post(
-  { query, data }: RequestOption<Record<string, string>, Record<string, string>>
-) {
+export async function post({
+  query,
+  data,
+}: RequestOption<Record<string, string>, Record<string, string>>) {
   // do somethings
 }
 ```
@@ -194,7 +193,10 @@ When a function file uses dynamic routing rules, dynamic routing before the `Req
 export async function post(
   sku: string,
   id: string,
-  { data, query }: RequestOption<Record<string, string>, Record<string, string>>
+  {
+    data,
+    query,
+  }: RequestOption<Record<string, string>, Record<string, string>>,
 ) {
   // do somethings
 }
@@ -203,18 +205,22 @@ export async function post(
 Also pass in the parameters according to the function definition:
 
 ```ts title="App.tsx"
-import { post } from '@api/[sku]/[id]/item'
+import { post } from '@api/[sku]/[id]/item';
 
 export default () => {
   const addSku = () => {
-    post('0001'/* sku */, '1234' /* id */, {
-      query: { /* ... */ },
-      data: { /* ... */ },
-    })
-  }
+    post('0001' /* sku */, '1234' /* id */, {
+      query: {
+        /* ... */
+      },
+      data: {
+        /* ... */
+      },
+    });
+  };
 
-  return <div onClick={addSku}>添加 SKU</div>
-}
+  return <div onClick={addSku}>添加 SKU</div>;
+};
 ```
 
 As mentioned earlier, the defined functions should be asynchronous because they are automatically converted to HTTP interface calls when called by the front end.

package/en/docusaurus-plugin-content-docs/current/guides/advanced-features/bff/index.md

@@ -6,15 +6,15 @@ In the development of the concept of **front back separation**, the front-end pa
 
 The main problems it to solve include:
 
-* Aggregation, mapping, clipping, and proxying of lower-level APIs according to their own business needs.
-* Cache data for some specific scenarios to improve performance and thus improve user experience.
-* Quickly development of new products based on existing interfaces.
-* Interface with third-party systems, such as login authentication.
+- Aggregation, mapping, clipping, and proxying of lower-level APIs according to their own business needs.
+- Cache data for some specific scenarios to improve performance and thus improve user experience.
+- Quickly development of new products based on existing interfaces.
+- Interface with third-party systems, such as login authentication.
 
 Modern.js officially supported the BFF and provided the **Integrated BFF** to further strengthen the BFF's capabilities, mainly including the following capabilities:
 
-* Quick development and debugging go live, running, building, and deploying BFF code in the same project.
-* Minimal pure function call, directly import BFF function on the front end, and can be automatically converted into HTTP request when called.
-* No private protocol, follow RESTful API specification, all BFF interfaces are standardized.
-* Full TypeScript support.
-* Meet user preferences and support multi-frame extension writing.
+- Quick development and debugging go live, running, building, and deploying BFF code in the same project.
+- Minimal pure function call, directly import BFF function on the front end, and can be automatically converted into HTTP request when called.
+- No private protocol, follow RESTful API specification, all BFF interfaces are standardized.
+- Full TypeScript support.
+- Meet user preferences and support multi-frame extension writing.

package/en/docusaurus-plugin-content-docs/current/guides/advanced-features/bff/type.md

@@ -40,4 +40,3 @@ In most cases, the function writing method can cover the customization requireme
 :::note
 The directory structure of different plugin frameworks is not the same, see [Runtime Frameworks](/docs/guides/advanced-features/bff/frameworks) for details.
 :::
-

package/en/docusaurus-plugin-content-docs/current/guides/advanced-features/code-split.md

@@ -18,14 +18,13 @@ When you use Modern.js [Conventional routing](/docs/guides/basic-features/routes
 use dynamic `import()`，`import` The JS modules pass to this API will be packaged into a separate JS file as a new packaging entry, for example:
 
 ```ts
-import("./math").then(math => {
+import('./math').then(math => {
   console.log(math.add(16, 26));
 });
 ```
 
 The JS modules corresponding to the './math' path will be packaged in a separate JS file.
 
-
 ## React.lazy
 
 The officially way provides by React to split component code.
@@ -61,12 +60,12 @@ For detail, see [React lazy](https://reactjs.org/docs/code-splitting.html#reactl
 use `loadable` API，for example：
 
 ```ts
-import loadable from '@modern-js/runtime/loadable'
+import loadable from '@modern-js/runtime/loadable';
 
 const OtherComponent = loadable(() => import('./OtherComponent'));
 
 function MyComponent() {
-  return <OtherComponent />
+  return <OtherComponent />;
 }
 ```
 

package/en/docusaurus-plugin-content-docs/current/guides/advanced-features/compatibility.md

@@ -12,7 +12,7 @@ This value is used by ['@babel/preset-env'] (https://babeljs.io/docs/en/babel-pr
 The default value in Modern.js as follow:
 
 ```js
-['> 0.01%', 'not dead', 'not op_mini all']
+['> 0.01%', 'not dead', 'not op_mini all'];
 ```
 
 You can learn how to customize the browserlist [here](https://github.com/browserslist/browserslist).
@@ -23,7 +23,6 @@ See Modern.js Builder docs to learn more [Browserlist](https://modernjs.dev/buil
 Modern.js also supports configuring [output.override Browserlist](/docs/configure/app/output/override-browserslist) to override the default browserlist value.
 :::
 
-
 ## Polyfill
 
 ### Polyfill At Compile
@@ -40,8 +39,8 @@ For case where Polyfill is not required for third-party dependencies, you can se
 
 Modern.js also provides a runtime Polyfill solution based on browser [UA](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/User-Agent) information, which has the following advantages over Babel:
 
-* It will not be inserted into the code, reducing the code .
-* The same browser will share a Polyfill code. Therefore, with more and more projects, the UA-based Polyfill code will be delivered faster and faster.
+- It will not be inserted into the code, reducing the code .
+- The same browser will share a Polyfill code. Therefore, with more and more projects, the UA-based Polyfill code will be delivered faster and faster.
 
 exec `pnpm run new` to enable this features：
 
@@ -53,11 +52,11 @@ exec `pnpm run new` to enable this features：
 After executing the command, register the Polyfill plugin in `modern.config.ts`:
 
 ```ts title="modern.config.ts"
-import PolyfillPlugin from '@modern-js/plugin-polyfill';
+import polyfillPlugin from '@modern-js/plugin-polyfill';
+
 // https://modernjs.dev/docs/apis/app/config
 export default defineConfig({
-  ...,
-  plugins: [..., PolyfillPlugin()],
+  plugins: [..., polyfillPlugin()],
 });
 ```
 

package/en/docusaurus-plugin-content-docs/current/guides/advanced-features/eslint.md

@@ -29,7 +29,6 @@ pnpm run lint:error
 
 对于无法自动修复的问题，可以在 IDE 里点击问题提示框里的规则链接，打开这条规则的文档，查看问题的解释和解决方案。
 
-
 ### 声明例外情况
 
 目前阶段，有些规则并不能做到足够智能，多数情况下会有很大收益，在少数情况下也许不适用。但如果为了这些少数情况就把整个规则关掉或改掉，得不偿失。

package/en/docusaurus-plugin-content-docs/current/guides/advanced-features/index.md

@@ -5,8 +5,3 @@ type: ref
 # Advanced Features
 
 This section covers advanced features of Modern.js.
-
-
-
-
-

package/en/docusaurus-plugin-content-docs/current/guides/advanced-features/low-level.md

@@ -11,14 +11,12 @@ Usually, the default configuration can meet most development needs. When there a
 
 Take configuring Webpack as an example, just add ['tools.webpack'] (/docs/configure/app/tools/webpack) to the modern.config.ts:
 
-```typescript title="modern.config.ts"
+```ts title="modern.config.ts"
 export default defineConfig({
   tools: {
-    webpack: config => {
-
-    }
-  }
-})
+    webpack: config => {},
+  },
+});
 ```
 
 Configurations in the `tools` can be set to `Object` or `Function`.
@@ -31,16 +29,16 @@ When the value is `Function`, the first parameter is the default configuration v
 
 Currently provided is as follows:
 
-| Tools | Config   |
-| -------- | --------- |
-| DevServer | [tools.devServer](/docs/configure/app/tools/dev-server) |
-| Babel | [tools.babel](/docs/configure/app/tools/babel)|
-| styled-components | [tools.styledComponents](/docs/configure/app/tools/styled-components)|
-| PostCSS | [tools.postcss](/docs/configure/app/tools/postcss)|
-| Less | [tools.less](/docs/configure/app/tools/less) |
-| Sass | [tools.sass](/docs/configure/app/tools/sass) |
-| webpack | [tools.webpack](/docs/configure/app/tools/webpack)|
-| Minify CSS | [tools.minifyCss](/docs/configure/app/tools/minify-css)|
-| terser | [tools.terser](/docs/configure/app/tools/terser)|
-| Tailwind CSS | [tools.tailwind](/docs/configure/app/tools/tailwindcss) |
-| Autoprefixer | [tools.autoprefixer](/docs/configure/app/tools/autoprefixer) |
+| Tools             | Config                                                                |
+| ----------------- | --------------------------------------------------------------------- |
+| DevServer         | [tools.devServer](/docs/configure/app/tools/dev-server)               |
+| Babel             | [tools.babel](/docs/configure/app/tools/babel)                        |
+| styled-components | [tools.styledComponents](/docs/configure/app/tools/styled-components) |
+| PostCSS           | [tools.postcss](/docs/configure/app/tools/postcss)                    |
+| Less              | [tools.less](/docs/configure/app/tools/less)                          |
+| Sass              | [tools.sass](/docs/configure/app/tools/sass)                          |
+| webpack           | [tools.webpack](/docs/configure/app/tools/webpack)                    |
+| Minify CSS        | [tools.minifyCss](/docs/configure/app/tools/minify-css)               |
+| terser            | [tools.terser](/docs/configure/app/tools/terser)                      |
+| Tailwind CSS      | [tools.tailwind](/docs/configure/app/tools/tailwindcss)               |
+| Autoprefixer      | [tools.autoprefixer](/docs/configure/app/tools/autoprefixer)          |

package/en/docusaurus-plugin-content-docs/current/guides/advanced-features/ssg.md

@@ -15,15 +15,14 @@ First need to execute `pnpm run new` to enable the SSG features:
 After execute script，register SSG plugin in `modern.config.ts`:
 
 ```ts title="modern.config.ts"
-import SSGPlugin from '@modern-js/plugin-ssg';
+import ssgPlugin from '@modern-js/plugin-ssg';
+
 // https://modernjs.dev/docs/apis/app/config
 export default defineConfig({
-  ...,
   output: {
-    ...,
     ssg: true,
   },
-  plugins: [..., SSGPlugin()],
+  plugins: [..., ssgPlugin()],
 });
 ```
 
@@ -62,13 +61,13 @@ add component to `src/routes/page.tsx`：
 
 ```jsx title="src/routes/page.tsx"
 export default () => {
-  return  <div>Index Page</div>
-}
+  return <div>Index Page</div>;
+};
 ```
 
 SSG is also render in Node.js. So we can enable SSR in developmenet env, expose code problems in advance and verify SSG rendering effect：
 
-```typescript title="modern.config.ts"
+```ts title="modern.config.ts"
 export default defineConfig({
   server: {
     ssr: process.env.NODE_ENV === 'development',
@@ -112,14 +111,14 @@ export default () => {
 
 If we want to enable the SSG of `/about` at the same time, we can configure the `output.ssg` to tell Modern.js to enable the SSG of the specified route.
 
-```typescript title="modern.config.ts"
+```ts title="modern.config.ts"
 export default defineConfig({
   output: {
     ssg: {
       routes: ['/', '/about'],
     },
   },
-})
+});
 ```
 
 run `pnpm run build` and `pnpm run serve`，access `http://localhost:8080/about`. In the Preview view, you can see that the page has been rendered。
@@ -129,4 +128,3 @@ Looking at the bundle file, a new `main/about/index.html` file has been added in
 :::info
 The above only introduces the single entry, more related content can be viewed [SSG API](/docs/configure/app/output/ssg)。
 :::
-

package/en/docusaurus-plugin-content-docs/current/guides/advanced-features/ssr.md

@@ -33,7 +33,7 @@ in the component, the data returned by the `loader` function can be get data thr
 export default () => {
   const data = useLoaderData();
   return <div>{data.message}</div>;
-}
+};
 ```
 
 Modern.js break the traditional SSR development model and provide users with a user-friendly SSR development experience.
@@ -56,11 +56,7 @@ Here is an example to show the problem when SSR and CSR rendering are inconsiste
 
 ```tsx
 {
-  typeof window !== 'undefined' ? (
-    <div>
-      browser content
-    </div>
-  ) : null;
+  typeof window !== 'undefined' ? <div>browser content</div> : null;
 }
 ```
 
@@ -88,9 +84,7 @@ Outside of elements that do not require SSR, wrap with a `NoSSR` component:
 
 ```tsx
 <NoSSR>
-  <div>
-    client content
-  </div>
+  <div>client content</div>
 </NoSSR>
 ```
 
@@ -213,8 +207,8 @@ document.addEventListener('load', () => {
   console.log('document load');
 });
 const App = () => {
-  return <div>Hello World</div>
-}
+  return <div>Hello World</div>;
+};
 export default App;
 ```
 

package/en/docusaurus-plugin-content-docs/current/guides/advanced-features/testing.md

@@ -17,11 +17,11 @@ After executing the above command, the `"test": "modern test"` command will be a
 register plugin in `modern.config.ts`:
 
 ```ts title="modern.config.ts"
-import TestPlugin from '@modern-js/plugin-testing';
+import testPlugin from '@modern-js/plugin-testing';
+
 // https://modernjs.dev/docs/apis/app/config
 export default defineConfig({
-  ...,
-  plugins: [..., TestPlugin()],
+  plugins: [..., testPlugin()],
 });
 ```
 

package/en/docusaurus-plugin-content-docs/current/guides/advanced-features/web-server.md

@@ -19,11 +19,11 @@ Modern.js 作为以客户端为中心的开发框架，对服务端的定制能
 执行命令后，在 `modern.config.ts` 中注册 Server 插件:
 
 ```ts title="modern.config.ts"
-import ServerPlugin from '@modern-js/plugin-server';
+import serverPlugin from '@modern-js/plugin-server';
+
 // https://modernjs.dev/docs/apis/app/config
 export default defineConfig({
-  ...,
-  plugins: [..., ServerPlugin()],
+  plugins: [..., serverPlugin()],
 });
 ```
 
@@ -41,7 +41,6 @@ Hook 不可以使用运行时框架拓展。
 
 详细 API 可以查看 [Hook](/docs/apis/app/runtime/web-server/hook)。
 
-
 ### Middleware
 
 Middleware 可以为 Web Server 添加前置中间件，只有 SSR 请求会经过 Middleware 的处理。

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

@@ -41,26 +41,22 @@ Modern.js also provides a way to config aliases. Adding the `@common` alias as a
 {
   "compilerOptions": {
     "paths": {
-      "@/*": [
-        "./src/*"
-      ],
-      "@/common/*": [
-        "./src/common/*"
-      ]
+      "@/*": ["./src/*"],
+      "@/common/*": ["./src/common/*"]
     }
-  },
+  }
 }
 ```
 
 JavaScript project can config by [`source.alias`](/docs/configure/app/source/alias) in `modern.config.js`:
 
-```typescript title="modern.config.ts"
+```ts title="modern.config.ts"
 export default defineConfig({
   source: {
     alias: {
-      '@common': './src/common'
-    }
-  }
+      '@common': './src/common',
+    },
+  },
 });
 ```
 

package/en/docusaurus-plugin-content-docs/current/guides/basic-features/css/css-in-js.md

@@ -4,27 +4,27 @@ sidebar_position: 1
 
 # CSS-in-JS
 
-CSS-in-JS is a technology that can write CSS styles in JS files. Modern.js integrates the CSS-in-JS  library [styled-components](https://styled-components.com/) commonly used in the community, which uses the new feature of JavaScript [Tagged template](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#tagged_templates) to write CSS styles for components. You can use the [styled-components](https://styled-components.com/) API directly from `@modern-js/runtime/styled`.
+CSS-in-JS is a technology that can write CSS styles in JS files. Modern.js integrates the CSS-in-JS library [styled-components](https://styled-components.com/) commonly used in the community, which uses the new feature of JavaScript [Tagged template](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#tagged_templates) to write CSS styles for components. You can use the [styled-components](https://styled-components.com/) API directly from `@modern-js/runtime/styled`.
 
 When you need to write a `div` component with an internal font in red, you can do the following implementation:
 
 ```js
-import styled from '@modern-js/runtime/styled'
+import styled from '@modern-js/runtime/styled';
 
 const RedDiv = styled.div`
   color: red;
-`
+`;
 ```
 
 When you need to dynamically set the component style according to the `props` of the component, for example, when the attribute `primary` of `props` is `true`, the color of the button is white, and otherwise it is red. The implementation code is as follows:
 
 ```js
-import styled from '@modern-js/runtime/styled'
+import styled from '@modern-js/runtime/styled';
 
 const Button = styled.button`
-  color: ${props => props.primary ? "white" : "red"};
+  color: ${props => (props.primary ? 'white' : 'red')};
   font-size: 1em;
-`
+`;
 ```
 
 For more usage of styled-components, please refer to [[styled-components official website](https://styled-components.com/) ].

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

@@ -33,7 +33,7 @@ Will eventually be compiled as:
 ```js
 <button type="button" className="button_redColor__1-RBg">
   red button
-</button>;
+</button>
 ```
 
 ## Global CSS Modules
@@ -74,7 +74,7 @@ Will eventually be compiled as:
 ```js
 <button type="button" className="button__redColor--JsFYl bg-blue">
   button
-</button>;
+</button>
 ```
 
 The final effect is as follows:

package/en/docusaurus-plugin-content-docs/current/guides/basic-features/css/less-sass.md

@@ -11,7 +11,6 @@ sidebar_position: 4
 - If you need to customize the configuration of [less-loader](https://github.com/webpack-contrib/less-loader), please refer to the [tools.less](/docs/configure/app/tools/less).
 - If you need to customize the configuration of [sass-loader](https://github.com/webpack-contrib/sass-loader), please refer to the [tools.less](/docs/configure/app/tools/sass).
 
-
-::: Tips
+:::tip
 CSS files pre-compiled by Less and Sass will still undergo Modern.js build-in [PostCSS](https://postcss.org/) conversion, which has good browser compatibility. For related content, please refer to [[PostCSS](/docs/guides/basic-features/css/postcss)].
 :::