npm - @modern-js/main-doc - Versions diffs - 2.0.2 → 2.1.0 - Mend

@modern-js/main-doc 2.0.2 → 2.1.0

Files changed (525) hide show

package/en/docusaurus-plugin-content-docs/current/guides/basic-features/html.md CHANGED Viewed

@@ -3,7 +3,7 @@ title: HTML Template
 sidebar_position: 9
 ---
-Modern.js provides **JSX syntax**  and **HTML(Ejs) syntax** for customizing HTML template.
+Modern.js provides **JSX syntax** and **HTML(Ejs) syntax** for customizing HTML template.
 ## JSX syntax
@@ -68,7 +68,7 @@ import {
   Head,
   Body,
   Scripts,
-  DocumentContext
+  DocumentContext,
 } from '@modern-js/runtime/document';
 export default function Document(): React.ReactElement {
@@ -103,41 +103,48 @@ The above JSX component will generate the following HTML template:
 ```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>
+  <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/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" />
-</head>
+  </head>
-<body>
+  <body>
     <div id="root">
-        <!--<?- html ?>-->
-        <h1 style="color:red">Some Params：</h1>
-        <h2> entryName：sub</h2>
-        <h2> title：</h2>
-        <h2> rootId: root</h2>
+      <!--<?- html ?>-->
+      <h1 style="color:red">Some Params：</h1>
+      <h2>entryName：sub</h2>
+      <h2>title：</h2>
+      <h2>rootId: root</h2>
     </div>
     <h1>bottom</h1>
     <!--<?- chunksMap.js ?>-->
     <!--<?- SSRDataScript ?>-->
-</body>
+  </body>
 </html>
 ```
@@ -161,26 +168,27 @@ In the application root directory, create the `config/html/` directory, which su
 ```html
 <!DOCTYPE html>
 <html>
-<head>
-  <%= meta %>
-  <title><%= title %></title>
-  <%= topTemplate %>
-  <script>
-    window.__assetPrefix__ = '<%= assetPrefix %>';
-  </script>
-  <%= headTemplate %>
-  <!-- webpack inject css -->
-</head>
-<body>
-  <noscript>
-    We're sorry but react app doesn't work properly without JavaScript enabled. Please enable it to continue.
-  </noscript>
-  <div id="<%= mountId %>"></div>
-  <%= bodyTemplate %>
-  <!-- webpack inject js -->
-  <!--<?- bottomTemplate ?>-->
-</body>
+  <head>
+    <%= meta %>
+    <title><%= title %></title>
+    <%= topTemplate %>
+    <script>
+      window.__assetPrefix__ = '<%= assetPrefix %>';
+    </script>
+    <%= headTemplate %>
+    <!-- webpack inject css -->
+  </head>
+  <body>
+    <noscript>
+      We're sorry but react app doesn't work properly without JavaScript
+      enabled. Please enable it to continue.
+    </noscript>
+    <div id="<%= mountId %>"></div>
+    <%= bodyTemplate %>
+    <!-- webpack inject js -->
+    <!--<?- bottomTemplate ?>-->
+  </body>
 </html>
 ```
@@ -220,7 +228,7 @@ The fragment in the `config/html/` directory are valid for all entries in the ap
 For example, the following HTML fragment is only valid for `entry1`:
-```html
+```bash
 .
 ├── config/
 │   └── html/

package/en/docusaurus-plugin-content-docs/current/guides/basic-features/mock.md CHANGED Viewed

@@ -50,15 +50,15 @@ const Mock = require('mockjs');
 module.exports = {
   '/api/getInfo': Mock.mock({
-     'data|1-10': [{ name: '@cname' }]
-   }), /* => {data: [{name: "董霞"}, {name: "魏敏"},  {name: "石磊"}} */
+    'data|1-10': [{ name: '@cname' }],
+  }) /* => {data: [{name: "董霞"}, {name: "魏敏"},  {name: "石磊"}} */,
 };
 ```
 :::info Other Mock Lib
-* [Chancejs](https://github.com/chancejs/chancejs)
-* [Mock](https://github.com/nuysoft/Mock/wiki/Getting-Started)
+- [Chancejs](https://github.com/chancejs/chancejs)
+- [Mock](https://github.com/nuysoft/Mock/wiki/Getting-Started)
 :::

package/en/docusaurus-plugin-content-docs/current/guides/basic-features/proxy.md CHANGED Viewed

@@ -7,8 +7,8 @@ sidebar_position: 5
 Modern.js provides a way to configure the development proxy in ['tools.devServer'] (/docs/configure/app/tools/dev-server). For example, to proxy the local interface to an online address:
-```typescript title="modern.config.ts"
-import { defineConfig }  from '@modern-js/app-tools';
+```ts title="modern.config.ts"
+import { defineConfig } from '@modern-js/app-tools';
 export default defineConfig({
   tools: {
@@ -40,7 +40,7 @@ import GlobalProxy from '@site-docs-en/components/global-proxy.md'
 By configuring [`bff.proxy`](/docs/configure/app/bff/proxy), you can proxy BFF API requests to specified services. Unlike other proxy above, it can also be used in the production environment:
-```typescript title="modern.config.ts"
+```ts title="modern.config.ts"
 export default defineConfig({
   bff: {
     proxy: {
@@ -53,8 +53,7 @@ export default defineConfig({
 For example, when a BFF call is used in the code, the final request `http://localhost:8080/api/v1/topics` will auto proxy to `https://cnodejs.org/api/v1/topics`：
 ```js
-import getTopics from '@api/v1/topics'
+import getTopics from '@api/v1/topics';
 getTopics();
 ```

package/en/docusaurus-plugin-content-docs/current/guides/basic-features/routes.md CHANGED Viewed

@@ -15,7 +15,6 @@ With `routes/` as the agreed entry, Modern.js will automatically generate the co
 Modern.js supports the popular convention routing mode in the industry: **nested routing**. When using nested routing, the routing of the page corresponds the UI structure, and we will introduce this routing mode in detail.
 ```
 /user/johnny/profile                  /user/johnny/posts
 +------------------+                  +-----------------+
@@ -149,8 +148,7 @@ When a directory name begins with `__`, the corresponding directory name is not
     └── page.tsx
 ```
-Modern.js will generate two routes, `/login` and `/sign`, `__auth/layout.tsx` component will be used as the layout component of `login/page.tsx` and `signup/page.tsx`, but __auth will not be used as the route path fragment.
+Modern.js will generate two routes, `/login` and `/sign`, `__auth/layout.tsx` component will be used as the layout component of `login/page.tsx` and `signup/page.tsx`, but `__auth` will not be used as the route path fragment.
 This feature is useful when you need to do separate layouts for certain types of routes, or when you want to categorize routes.
@@ -172,11 +170,11 @@ When accessing a route, you will get the following UI layout:
 ```tsx
 <RootLayout>
-   <UserProfileEdit />   // routes/user.profile.[id].edit/page.tsx
+  <UserProfileEdit /> // routes/user.profile.[id].edit/page.tsx
 </RootLayout>
 ```
-### Loading
+### (WIP)Loading
 In each layer directory under `routes/`, developers can create `loading.tsx` files and export a `<Loading>` component by default.
@@ -205,6 +203,7 @@ When the component exists in a routing directory, the component render error is
 `<ErrorBoundary>` can return the UI view when the error occurred. When the `<ErrorBoundary>` component is not declared at the current level, the error will bubble up to the higher component until it is caught or throws an error. At the same time, when a component fails, it will only affect the routed component and sub-component that caught the error. The state and view of other components are not affected and can continue to interact.
 <!-- Todo API 路由-->
 Within the `<ErrorBoundary>` component, you can use [useRouteError](/docs/apis/app/runtime/router/#useparams) to get the specific information of the error:
 ```tsx
@@ -220,6 +219,88 @@ export default const ErrorBoundary = () => {
 }
 ```
+### Hooks before rendering
+In some scenarios where you need to do some operations before the application renders, you can define `init` hooks in `routes/layout.tsx`. `init` will be executed on both the client and server side, the basic usage example is as follows:
+```ts title="src/routes/layout.tsx"
+import type { RuntimeContext } from '@modern-js/runtime';
+export const init = (context: RuntimeContext) => {
+  // do something
+};
+```
+The `init` hook allows you to mount some global data and access the `runtimeContext` variable from elsewhere in the application:
+:::note
+This feature is useful when the application requires pre-page data, custom data injection or framework migration (e.g. Next.js)
+:::
+```ts title="src/routes/layout.tsx"
+import {
+  RuntimeContext,
+} from '@modern-js/runtime';
+export const init = (context: RuntimeContext) => {
+  return {
+    message: 'Hello World',
+  }
+}
+```
+```tsx title="src/routes/page.tsx"
+import { useRuntimeContext } from '@modern-js/runtime';
+export default () => {
+  const { context } = useRuntimeContext();
+  const { message } = context.getInitData();
+  return <div>{message}</div>;
+}
+```
+When working with SSR, the browser side can get the data returned by `init` during SSR, and the developer can decide whether to retrieve the data on the browser side to overwrite the SSR data, for example:
+```tsx title="src/routes/layout.tsx"
+import {
+  RuntimeContext,
+} from '@modern-js/runtime';
+export const init = (context: RuntimeContext) => {
+  if (process.env.JUPITER_TARGET === 'node') {
+    return {
+      message: 'Hello World By Server',
+    }
+  } else {
+    const { context } = runtimeContext;
+    const data = context.getInitData();
+    // 如果没有获取到期望的数据
+    if (!data.message) {
+      return {
+        message: 'Hello World By Client'
+      }
+    }
+  }
+}
+```
+### Runtime Configuration
+In each root `Layout` component (`routes/layout.ts`), the application runtime configuration can be dynamically defined:
+```ts title="src/routes/layout.tsx"
+import type { AppConfig } from '@modern-js/runtime';
+export const config = (): AppConfig => {
+  return {
+    router: {
+      supportHtml5History: false
+    }
+  }
+};
+```
 ## Self-controlled routing
 With `src/App.tsx` as the agreed entry, Modern.js will not do additional operations with multiple routes, developers can use the React Router 6 API for development by themselves, for example:
@@ -253,8 +334,8 @@ By default, Modern.js turn on the built-in routing scheme, React Router.
 export default defineConfig({
   runtime: {
     router: true,
-  }
-})
+  },
+});
 ```
 Modern.js exposes the React Router API from the `@modern-js/runtime/router` namespace for developers to use, ensuring that developers and Modern.js use the same code. In addition, in this case, the React Router code will be packaged into JS products. If the project already has its own routing scheme, or does not need to use client routing, this feature can be turned off.
@@ -263,6 +344,6 @@ Modern.js exposes the React Router API from the `@modern-js/runtime/router` name
 export default defineConfig({
   runtime: {
     router: false,
-  }
-})
+  },
+});
 ```

package/en/docusaurus-plugin-content-docs/current/guides/concept/entries.md CHANGED Viewed

@@ -69,11 +69,10 @@ You can change the entry directory to another directory by [source.entriesDir](/
 Not all first-level directories under `src/` will become project entrances. The directory where the entry is located must meet one of the following four conditions:
 1. Directory with `routes/`
 2. Has the `App.[jt]sx?` file
 3. With `index.[jt]sx?` file
-2. With `pages/` directory (compatible Modern.js 1.0)
+4. With `pages/` directory (compatible Modern.js 1.0)
 When the `src/` directory satisfies the entry feature, the Modern.js considers the current project to be a single entry application.

package/en/docusaurus-plugin-content-docs/current/guides/get-started/quick-start.md CHANGED Viewed

@@ -44,7 +44,7 @@ npx @modern-js/create myapp
 ## Initialize
-import InitApp from '@site-docs/components/init-app.md'
+import InitApp from '@site-docs-en/components/init-app.md'
 <InitApp />
@@ -119,7 +119,7 @@ info    File sizes after production build:
   dist/static/js/async/509.fcb06e14.js      283 B        230 B
  Client ✔ done in 3.57s
- ```
+```
 The bundle is generated to `dist/` by default, and the directory structure is as follows:

package/en/docusaurus-plugin-content-docs/current/guides/get-started/upgrade.md CHANGED Viewed

@@ -5,7 +5,7 @@ sidebar_position: 2
 ## Upgrade with command
-Modern.js provides the `upgrade` command to support projects to upgrade to the latest  version.
+Modern.js provides the `upgrade` command to support projects to upgrade to the latest version.
 Execute `pnpm run upgrade` in the project:

package/en/docusaurus-plugin-content-docs/current/guides/topic-detail/framework-plugin/extend.md CHANGED Viewed

@@ -19,7 +19,7 @@ $ npx @modern-js/create modern-js-demo
 我们先创建一个 Hook 模型：
-```ts title=config/plugin/MyPlugin.ts
+```ts title=config/plugin/myPlugin.ts
 import { createWaterfall } from '@modern-js/plugin';
 const message = createWaterfall<string[]>();
@@ -27,7 +27,7 @@ const message = createWaterfall<string[]>();
 然后注册它：
-```ts title=config/plugin/MyPlugin.ts
+```ts title=config/plugin/myPlugin.ts
 import type { CliPlugin } from '@modern-js/core';
 export default (): CliPlugin => ({
@@ -41,7 +41,7 @@ export default (): CliPlugin => ({
 添加 Hook 类型：
-```ts title=config/plugin/MyPlugin.ts
+```ts title=config/plugin/myPlugin.ts
 declare module '@modern-js/core' {
   export interface Hooks {
     message: typeof message;
@@ -53,7 +53,7 @@ declare module '@modern-js/core' {
 创建插件，通过 `commands` Hook 函数，添加命令处理逻辑：
-```ts title=config/plugin/MyPlugin.ts
+```ts title=config/plugin/myPlugin.ts
 import type { CliPlugin } from '@modern-js/core';
 export default (): CliPlugin => ({
@@ -73,9 +73,9 @@ export default (): CliPlugin => ({
 });
 ```
-最后 `config/plugin/MyPlugin.ts` 的状态是：
+最后 `config/plugin/myPlugin.ts` 的状态是：
-```ts title=config/plugin/MyPlugin.ts
+```ts title=config/plugin/myPlugin.ts
 import { createWaterfall } from '@modern-js/plugin';
 import type { CliPlugin } from '@modern-js/core';
@@ -112,10 +112,10 @@ declare module '@modern-js/core' {
 ```ts title="modern.config.ts"
 import { defineConfig } from '@modern-js/app-tools';
-import MyPlugin from './config/plugin/MyPlugin';
+import myPlugin from './config/plugin/myPlugin';
 export default defineConfig({
-  plugins: [MyPlugin()],
+  plugins: [myPlugin()],
 });
 ```
@@ -123,11 +123,11 @@ export default defineConfig({
 那这里我们添加一个：
-```ts title=config/plugin/OtherPlugin.ts
+```ts title=config/plugin/otherPlugin.ts
 import type { CliPlugin } from '@modern-js/core';
 export default (): CliPlugin => ({
-  name: 'my-plugin',
+  name: 'other-plugin',
   setup(api) {
     return {
@@ -143,11 +143,11 @@ export default (): CliPlugin => ({
 ```ts title="modern.config.ts"
 import { defineConfig } from '@modern-js/app-tools';
-import MyPlugin from './config/plugin/MyPlugin';
-import OtherPlugin from './config/plugin/OtherPlugin';
+import myPlugin from './config/plugin/myPlugin';
+import otherPlugin from './config/plugin/otherPlugin';
 export default defineConfig({
-  plugins: [MyPlugin(), OtherPlugin()],
+  plugins: [myPlugin(), otherPlugin()],
 });
 ```

package/en/docusaurus-plugin-content-docs/current/guides/topic-detail/framework-plugin/hook-list.md CHANGED Viewed

@@ -149,10 +149,10 @@ export default (): CliPlugin => ({
 将上面这个插件添加到 `modern.config.ts` 中：
 ```ts title="modern.config.ts"
-import MyPlugin from './config/plugin/MyPlugin';
+import myPlugin from './config/plugin/myPlugin';
 export default defineConfig({
-  plugins: [MyPlugin()],
+  plugins: [myPlugin()],
 });
 ```