@modern-js/main-doc 2.1.0 → 2.2.0

package/en/docusaurus-plugin-content-docs/current/apis/app/hooks/config/icon.md

@@ -1,15 +0,0 @@
----
-title: icon.png
-sidebar_position: 2
----
-
-When `config/icon.png` exist, it can inject app icon information into the html page at build time:
-
-```
-.config
-└── icon.png
-```
-
-the app icon `link` meta will be injected into the html, as follows:
-
-![app-icon](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/api/app-icon.png)

package/en/docusaurus-plugin-content-docs/current/apis/app/hooks/config/mock.md

@@ -1,6 +0,0 @@
----
-title: mock/
-sidebar_position: 5
----
-
-when `config/mock/index.js` exist，Modernjs auto start the Mock service in the development.

package/en/docusaurus-plugin-content-docs/current/apis/app/hooks/config/public.md

@@ -1,28 +0,0 @@
----
-title: public/
-sidebar_position: 3
----
-
-Static resource files in any format can be placed in the `public/`, and the files will be Served under the web application domain name.
-
-## Description
-
-The routing of files to be served is based on the convention of the file system. `public/` is the root directory, which corresponds to the root path of the Web application.
-
-For example, the `config/public/sdk/index.js` file will be Served under `${domain}/sdk/index.js` after deployment.
-
-## Scene
-
-For example, `robots.txt`, `auth.xml` and other authentication file.
-
-SDK (requiring the same routing) for other business, or an HTML file for static host.
-
-:::info
-For static resources (such as SVG pictures) that need to be referenced by import in the source code, it is recommended to put them in the `src/assets/` for management.
-:::
-
-## Compression
-
-If the file is a `.js` file, it will be automatically compressed when the production environment is built.
-
-If the file ends with `.min.js`, it will not compression.

package/en/docusaurus-plugin-content-docs/current/apis/app/hooks/config/storybook.md

@@ -1,12 +0,0 @@
----
-title: storybook/
-sidebar_position: 7
----
-
-Modern.js.js supports debugging with Storybook. When you need to configure Storybook, configure it in the `config/storybook/`.
-
-For detail, see [Storybook](https://storybook.js.org/docs/react/configure/overview).
-
-:::info
-Debugging with Storybook requires executing the `new` command to enable the 「Visual Testing (Storybook)」 mode feature.
-:::

package/en/docusaurus-plugin-content-docs/current/apis/app/hooks/config/upload.md

@@ -1,42 +0,0 @@
----
-title: upload/
-sidebar_position: 4
----
-
-Static resource files in any format can be placed in the `upload/`.
-
-## Description
-
-In the development environment, the static resource files in this directory will be hosted in the '/upload' path. After building the application product, the files in this directory will be copied to the dist path.
-
-This file convention is mainly used for developers to use plugins to upload static resource files to the CDN.
-
-## Scene
-
-For example, the SDK used by the project such as `google-analysis.js` (usually requires http caching).
-
-Images, font files, generic CSS, etc.
-
-## Compression
-
-If the file is a `.js` file, it will be automatically compressed when the production environment is built.
-
-If the file ends with `.min.js`, it will not compression.
-
-## More Usage
-
-Whether in [custom HTML](/docs/guides/basic-features/html), or in any HTML file under ['config/public/'](/docs/apis/app/hooks/config/public), you can directly use the HTML tag to refer to the resources in the `config/upload/`:
-
-```html
-<script src="/upload/index.js"></script>
-```
-
-if [`output.assetPrefix`](/docs/configure/app/output/asset-prefix) is configured，add this prefix directly using template syntax:
-
-```html
-<script src="<%=assetPrefix %>/upload/index.js"></script>
-```
-
-:::info
-Modern.js does not support the use files under `upload/` in `config/public/*.css` via URL.
-:::

package/en/docusaurus-plugin-content-docs/current/apis/app/hooks/modern-config.md

@@ -1,8 +0,0 @@
----
-title: modern.config.js
-sidebar_position: 8
----
-
-Modern.js config file, through which you can confiured all aspects of the current project.
-
-For detail, see [configure](/docs/configure/app/usage).

package/en/docusaurus-plugin-content-docs/current/apis/app/hooks/server/index_.md

@@ -1,14 +0,0 @@
----
-title: index.[tj]s
-sidebar_position: 1
----
-
-A file that extends the Modern.js Web Server, to add a Hook or Middleware to the Web Server that the project uses.
-
-It can intercept requests and responses, authenticate and role, request preprocessing, exception bottom-up, etc.;
-
-It can also be inserted logic into the built-in processing handler (including route matching, resource addressing, header injection, page rendering, static web hosting).
-
-:::info
-For detail, see [Hook](/docs/apis/app/runtime/web-server/hook) & [Middleware](/docs/apis/app/runtime/web-server/middleware)。
-:::

package/en/docusaurus-plugin-content-docs/current/apis/app/hooks/server/test.md

@@ -1,10 +0,0 @@
----
-title: test.[tj]s
-sidebar_position: 2
----
-
-App's Web Server test file，support for writing test cases in the `server/` directory which file with suffix `.test.[tj]s`.
-
-:::info
-To use unit test and integration test, you need to execute the `new` command in advance to enable the `unit test/integration test`.
-:::

package/en/docusaurus-plugin-content-docs/current/apis/app/hooks/shared.md

@@ -1,6 +0,0 @@
----
-title: shared/
-sidebar_position: 5
----
-
-Shared directory. When the project has common code under `api/`, `server/`, `src/`, put the code under this directory rather then import directly.

package/en/docusaurus-plugin-content-docs/current/apis/app/hooks/src/app.md

@@ -1,52 +0,0 @@
----
-title: App.[tj]sx
-sidebar_position: 1
----
-
-Entry identifier if App want control route by code.
-
-`App.[tj]sx` is not the actual App entry, Modern.js will auto generate the entry file, the content is roughly as follows:
-
-```js
-import React from 'react';
-import { createApp, bootstrap } from '@modern-js/runtime';
-// App.[jt]sx
-import App from '@_modern_js_src/App';
-import { state } from '@modern-js/runtime/plugins';
-import {
-  immer,
-  effects,
-  autoActions,
-  devtools,
-} from '@modern-js/runtime/model';
-
-const createStatePlugins = config => {
-  const plugins = [];
-  plugins.push(immer(config['immer']));
-  plugins.push(effects(config['effects']));
-  plugins.push(autoActions(config['autoActions']));
-  plugins.push(devtools(config['devtools']));
-  return plugins;
-};
-let AppWrapper = null;
-function render() {
-  AppWrapper = createApp({
-    plugins: [
-      state({
-        ...{ plugins: createStatePlugins(true) },
-        ...App?.config?.state,
-      }),
-    ],
-  })(App);
-  if (IS_BROWSER) {
-    bootstrap(AppWrapper, MOUNT_ID);
-  }
-  return AppWrapper;
-}
-AppWrapper = render();
-export default AppWrapper;
-```
-
-:::note
-In multi-entry App，each entry can have a `App.[jt]sx`, for detail, see [Entry](/docs/guides/concept/entries).
-:::

package/en/docusaurus-plugin-content-docs/current/apis/app/hooks/src/index_.md

@@ -1,33 +0,0 @@
----
-title: index.[tj]s
-sidebar_position: 4
----
-
-Entry identifier if App want use custom entry. In most case, [`App.[tj]sx`](/docs/apis/app/hooks/src/app) hook file can already meet our needs.
-
-When we need to add custom behavior before `bootstrap` or completely take over the webpack entry, we can place `index.[tj]s` in `src/` or entry directory. The following are discussed in two cases:
-
-1. add custom behavior before bootstrap
-
-Just add default export under `src/index.[tj]s`:
-
-```js title=src/index.js
-import { bootstrap } from '@modern-js/runtime';
-
-export default App => {
-  // do something before bootstrap...
-  bootstrap(App, 'root');
-};
-```
-
-2. Fully take over the webpack entry
-
-When there is no default export function under `src/index.[tj]sx?`, this file is the real webpack entry file, and the code can be organized such as create-react-app:
-
-```js title=src/index.jsx
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
-
-ReactDOM.render(<App />, document.getElementById('root'));
-```

package/en/docusaurus-plugin-content-docs/current/apis/app/hooks/src/pages.md

@@ -1,180 +0,0 @@
----
-title: pages/
-sidebar_position: 3
----
-
-Entry identifier if the application want uses file system-based routing.
-
-When the entry is the **Pages entry** type, the files in the `pages/` directory will be analyzed to client side routing.
-
-For example, the following directory:
-
-```bash
-.
-└── src
-    └── pages
-        ├── about
-        │   └── index.jsx
-        ├── index.jsx
-        └── info.jsx
-```
-
-The generated route is configured as:
-
-```bash
-[
-  { path: '/', component: 'pages/index.jsx' },
-  { path: '/info' component: 'pages/info.jsx' },
-  { path: '/about', component: 'pages/about/index.jsx' }
-]
-```
-
-Files match the following conditions will not be treated as routing files:
-
-- suffix is not `.(j|t)sx?`.
-- `.d.ts` type definition file.
-- test file suffix like `.(test|spec|e2e).(j|t)sx?`.
-
-:::tip
-it is recommended to write only the routing files in the `pages/`, and write the business logic to the independent features directory outside the `pages/`. In this way, most of the files in the pages directory will be routing files, and there is no need for additional filtering rules.
-:::
-
-### Dynamic Routing
-
-Directories or files wrapped with `[]` are considered dynamic routing.
-
-For example the following directory structure:
-
-```bash
-.
-└── src
-    └── pages
-        ├── [post]
-        │   ├── detail.jsx
-        │   └── index.js
-        ├── users
-        │   └── [id].jsx
-        ├── index.jsx
-        └── info.jsx
-```
-
-The generated route is configured as:
-
-```js
-[
-  { path: '/', component: 'pages/index.jsx' },
-  { path: '/info', component: 'pages/info.jsx' },
-  { path: '/:post/', component: 'pages/[post]/index.js' },
-  { path: '/:post/detail' components: 'pages/[post]/detail.jsx'},
-  { path: '/users/:id', components: 'pages/users/[id].jsx'}
-]
-```
-
-Basis dynamic routing, it supports adding special routing suffixes `(*、?、+)`.
-
-For example: `src/pages/users/[id]*.tsx` generate route `/users/:id*`
-
-### Global Layout
-
-When the entire App needs a global `layout`, it can be achieved through `pages/_app.tsx`, which as follows:
-
-```js
-import React from 'react';
-import UserLayout from 'xxxx';
-
-export default const App = ({Component, ...pageProps}:{ Component: React.ComponentType}) => {
-  return (
-    <UserLayout>
-      <Component {...pageProps} />
-    </UserLayout>
-  );
-}
-```
-
-The above `Component` is the component to which the route is accessed.
-
-For example the following directory structure:
-
-```bash
-.
-└── pages
-    ├── a
-    │   ├── b
-    │   │   └── index.js
-    │   └── index.js
-    └── index.js
-```
-
-- access `/`, the `Component` is `pages/index.js`。
-- access `/a`, the `Component` is `pages/a/index.js`。
-- access `/a/b`, the `Component` is `pages/a/b/index.js`。
-
-:::tip Advantages
-
-- preserve the state of the global layout when the page changes.
-- add global css.
-- handle ComponentDidCatch error
-- use `defineConfig`(/docs/apis/app/runtime/app/define-config) dynamic configuration runtime.
-
-:::
-
-### Partial Layout
-
-When developing an App, where sub routes under the same route may share the layout.
-
-For this scene, Modern.js convention, when there is a `_layout.js` in the directory, the routes can shared this layout.
-
-For example the following directory structure:
-
-```bash
-└── pages
-    ├── a
-    │   ├── b
-    │   │   └── index.js
-    │   ├── _layout.js
-    │   └── index.js
-    └── index.js
-```
-
-```js title="pages/a/_layout.js"
-import React from 'react';
-
-const ALayout = ({ Component, ...pageProps }) => {
-  return <Component {...pageProps} />;
-};
-export default ALayout;
-```
-
-The Component props is the specific route, for example
-
-- access `/a`, the `Component` is `pages/a/index.js`。
-- 访问 `/a/b`, the `Component` is `pages/a/b/index.js`。
-
-In this way, you can use `pages/a/_layout.js` to display the routing common layout in the `a` directory.
-
-### 404 路由
-
-The convention `pages/404.[tj]sx` is the default 404 route.
-
-For example the following directory structure:
-
-```bash
-.
-└── src
-    └── pages
-        ├── user.js
-        ├── home.js
-        ├── 404.js
-```
-
-the generated route is configured is as:
-
-```bash
-[
- { path: '/user', component: './pages/user.js'},
- { path: '/home', component: './pages/home.js' },
- { path: '*', component: './pages/404.js'}
-]
-```
-
-All unmatched routes will match to `pages/404.[tj]s`。

package/en/docusaurus-plugin-content-docs/current/apis/app/hooks/src/routes.md

@@ -1,88 +0,0 @@
----
-title: routes/
-sidebar_position: 2
----
-
-The entry identifier when the application uses file system-based routing.
-
-When the project structure is of type `Routes directory entry`, the files in the `src/routes` directory are parsed to get the client-side routing configuration. See [Routing by convention](/docs/guides/basic-features/routes) for more details on usage.
-
-Any `layout.[tj]sx` and `page.[tj]sx` under `src/routes` will be used as a route to the application：
-
-```bash {3}
-.
-└── routes
-    ├── layout.tsx
-    ├── page.tsx
-    └── user
-        ├── layout.tsx
-        └── page.tsx
-```
-
-## basic example
-
-The directory names in the `routes` directory will be used as a mapping of the route url, where `layout.tsx` is used as the layout component and `page.tsx` as the content component, which is a leaf node of the whole route, for example the following directory structure：
-
-```bash
-.
-└── routes
-    ├── page.tsx
-    └── user
-        └── page.tsx
-```
-
-The following two routes are produced:
-
-- `/`
-- `/user`
-
-## Dynamic Route
-
-If the directory name of the route file is named with `[]`, the generated route will be used as a dynamic route. For example, the following file directories:
-
-```
-└── routes
-    ├── [id]
-    │   └── page.tsx
-    ├── blog
-    │   └── page.tsx
-    └── page.tsx
-```
-
-The `routes/[id]/page.tsx` file will be converted to a `/:id` route. All `/xxx` will match that route, except for the `/blog` route, which can be matched exactly.
-
-In the component, you can get the corresponding parameters by [useParams](/docs/apis/app/runtime/router/#useparams).
-
-In the loader, params will be used as input to [loader](/docs/guides/basic-features/data-fetch#loader-function), and the corresponding parameters can be retrieved through the property `params`.
-
-## Layout component
-
-As in the example below, you can add a common layout component for all routing components by adding `layout.tsx`
-
-```bash
-.
-└── routes
-    ├── layout.tsx
-    ├── page.tsx
-    └── user
-        ├── layout.tsx
-        └── page.tsx
-```
-
-You can represent child components in layout components by using `<Outlet>`:
-
-```tsx title=routes/layout.tsx
-import { Link, Outlet, useLoaderData } from '@modern-js/runtime/router';
-
-export default () => {
-  return (
-    <>
-      <Outlet></Outlet>
-    </>
-  );
-};
-```
-
-:::note
-`<Outlet>` is a new API in React Router 6, see [Outlet] for details(https://reactrouter.com/en/main/components/outlet#outlet).
-:::

package/en/docusaurus-plugin-content-docs/current/apis/app/hooks/src/server.md

@@ -1,33 +0,0 @@
----
-title: '*.[server|node].[tj]sx'
-sidebar_position: 8
----
-
-Used in application projects to place server side code, it generally has the following two functions：
-
-1. When `*.tsx` and `*. [server|node].tsx` coexist, rendering on the server side will give preference to the `*. [server|node].tsx` file instead of the `*.tsx` file.
-
-2. When using [data loader](/docs/guides/basic-features/data-fetch), the server-side dependencies need to be re-exported from this file
-
-```tsx
-// routes/user/avatar.tsx
-import { useLoaderData } from '@modern-js/runtime/router';
-import { readFile } from './utils.server';
-
-type ProfileData = {
-  /* some type declarations */
-};
-
-export const loader = async (): ProfileData => {
-  const profile = await readFile('profile.json');
-  return profile;
-};
-
-export default function UserPage() {
-  const profileData = useLoaderData() as ProfileData;
-  return <div>{profileData}</div>;
-}
-
-// routes/user/utils.server.ts
-export * from 'fs-extra';
-```

package/en/docusaurus-plugin-content-docs/current/apis/app/hooks/src/stories.md

@@ -1,12 +0,0 @@
----
-title: '**/*.stories.[tj]sx'
-sidebar_position: 7
----
-
-App Storybook debug file. files in `src/` which suffix `*.stories.[tj]sx` are as debug files for Storybook.
-
-Execute the `dev story` command to debugging these files in the Storybook.
-
-:::info
-Using a Storybook requires executing `new` command to enable the 「Visual Testing (Storybook)」 mode.
-:::

package/en/docusaurus-plugin-content-docs/current/apis/app/hooks/src/test.md

@@ -1,12 +0,0 @@
----
-title: '**/*.test.[tj]sx?'
-sidebar_position: 6
----
-
-App test file.
-
-The App supports the file suffixed with `.test.[tj]sx` under the `src/` to write test cases.
-
-:::info
-To use unit test and integration test, you need to execute the `new` command in advance to enable the `unit test/integration test`.
-:::

package/en/docusaurus-plugin-content-docs/current/apis/app/runtime/app/define-config.md

@@ -1,59 +0,0 @@
----
-title: defineConfig
----
-
-For dynamically configuring applications runtime features.
-
-## Usage
-
-```ts
-import { defineConfig } from '@modern-js/runtime';
-```
-
-Runtime configurations can usually be configured under the `runtime` of the `modern.config.js`, such as the [router](/docs/configure/app/runtime/router) configuration.
-
-The configuration in `modern.config.js` is determined at build time，If some configuration parameters are obtained at runtime, or if the configuration parameters are from a module (such as a component), then need use `defineConfig` API configuration on runtime.
-
-:::info
-`@modern-js/app-tools` has the same name API, Used to provide **TS type for configuration**, please distinguish them.
-:::
-
-## Function Signature
-
-```ts
-function defineConfig(Component, config): any;
-```
-
-### Input
-
-- Component: App root Component。
-- config: runtime config。
-
-## Example
-
-```tsx
-function App () {
-  ...
-}
-
-defineConfig(App, {
-  router: {
-    supportHtml5History: false
-  }
-})
-```
-
-1. `defineConfig` can configuring [runtime.state](/docs/configure/app/runtime/state)、[runtime.router](/docs/configure/app/runtime/router) etc.
-
-2. `defineConfig` before configuring a property, such as `router`, you need to make sure that the `modern.config.js` has been configured to enable this feature.
-
-3. `defineConfig` incoming configuration will be merged with the configuration in `modern.config.js`. Taking `router` as an example, the final application configuration is as follows:
-
-```json
-{
-  // 来自 `modern.config.js`
-  ...runtime.router
-  // 来自 `defineConfig`
-  ...config.router
-}
-```

package/en/docusaurus-plugin-content-docs/current/apis/app/runtime/bff/hook.md

@@ -1,43 +0,0 @@
----
-title: hook
----
-
-Used to add framework middleware under BFF function mode, the middleware will execute before BFF function.
-
-## Usage
-
-according to the framework extend plugin, export from the corresponding namespace:
-
-```ts
-import { hook } from '@modern-js/runtime/{namespace}';
-```
-
-## Function Signature
-
-```ts
-type HookOptions = {
-  addMiddleware: string | function;
-};
-
-function hook(options: HookOptions): void;
-```
-
-### Input
-
-- `options`: a range of hooks provided by Modern.js.
-  - `addMiddleware`: add middlewares for BFF.
-
-## Example
-
-middleware for different frameworks should be different(an example is when using the koa framework):
-
-```ts title=api/_app.ts
-import { hook } from '@modern-js/runtime/koa';
-
-export default hook(({ addMiddleware }) => {
-  addMiddleware(async (ctx, next) => {
-    ctx.req.query.id = 'koa';
-    await next();
-  });
-});
-```