@modern-js/main-doc 2.0.3-alpha.0 → 2.2.0

package/en/guides/advanced-features/ssr.mdx

@@ -0,0 +1,308 @@
+---
+title: Server-side rendering
+sidebar_position: 3
+---
+# Server-side rendering
+
+In Modern.js, SSR also works out of the box. Developers do not need to write complex server level logic for SSR, nor do they need to care about the operation and maintenance of SSR, or create services. Modern.js have a comprehensive SSR degradation strategy to ensure that pages can run safely.
+
+Enabling SSR is very easy, just set ['server.ssr'](/configure/app/server/ssr) to `true`:
+
+```json
+{
+  "server": {
+    "ssr": true
+  }
+}
+```
+
+## SSR Data Fetch
+
+Modern.js provides Data Loader, which is convenient for developers to fetch data under SSR and CSR. Each routing module, such as `layout.tsx` and `page.tsx`, can define its own Data Loader:
+
+```ts title="src/routes/page.tsx"
+export const loader = () => {
+  return {
+    message: 'Hello World',
+  };
+};
+```
+
+in the component, the data returned by the `loader` function can be get data through the Hooks API:
+
+```tsx
+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.
+
+And it provides elegant degradation processing. Once the SSR request fails, it will automatically downgrade and restart the request on the browser side.
+
+However, developers still need to pay attention to the fallback of data, such as `null` values or data returns that do not as expect. Avoid React rendering errors or messy rendering results when SSR.
+
+:::info
+When using Data Loader, data fetching happens before rendering, Modern.js still supports fetching data when the component is rendered. See [Data Fetch](/guides/basic-features/data-fetch)。
+
+:::
+
+## Keep Rendering Consistent
+
+In some businesses, it is usually necessary to display different UI displays according to the current operating container environment characteristics, such as [UA](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/User-Agent) information.
+
+If the processing is not careful enough, the rendering results may do not meet the expectations at this time.
+
+Here is an example to show the problem when SSR and CSR rendering are inconsistent, add the following code to the component:
+
+```tsx
+{
+  typeof window !== 'undefined' ? <div>browser content</div> : null;
+}
+```
+
+After starting the app, visit the page and will find that the browser console throws a warning message:
+
+```sh
+Warning: Expected server HTML to contain a matching <div> in <div>.
+```
+
+This is caused by the inconsistency between the rendering result and the SSR rendering result when React executes the hydrate logic on the client side. Although the page performs normally, in complex applications, it is likely to cause problems such as DOM hierarchy confusion and style confusion.
+
+:::info
+For hydrate logic, please refer to [here](https://reactjs.org/docs/react-dom.html#hydrate).
+
+:::
+
+Applications need to maintain the consistency of SSR and CSR rendering results. If there are inconsistencies, it means that this part of the content does not need to be rendered in SSR.
+
+Modern.js provide [`<NoSSR>`](/apis/app/runtime/core/use-runtime-context) for such content that does not need to be rendered in SSR:
+
+```ts
+import { NoSSR } from '@modern-js/runtime/ssr';
+```
+
+Outside of elements that do not require SSR, wrap with a `NoSSR` component:
+
+```tsx
+<NoSSR>
+  <div>client content</div>
+</NoSSR>
+```
+
+After modifying the code, refresh page found that the previous Waring disappeared. Open the Network window of the browser developer tool to see that the returned HTML document does not contain the content of the `NoSSR` component package.
+
+:::info
+['useRuntimeContext'](/apis/app/runtime/core/use-runtime-context) can get complete request information, which can be used to ensure that the rendering results of SSR and CSR are consistent.
+
+:::
+
+## Concerned Memory Leaks
+
+:::warning
+In the SSR, developers need to pay special attention to the problem of memory leaks. Even small memory leaks can affect services..
+
+:::
+
+In SSR, every request triggers the component rendering. So, you need to avoid defining any potentially growing global data, or subscribing to events globally, or creating streams that will not be destroyed.
+
+For example, the following code, when using [redux-observable](https://redux-observable.js.org/), developers used to code like this:
+
+```tsx
+import { createEpicMiddleware, combineEpics } from 'redux-observable';
+
+const epicMiddleware = createEpicMiddleware();
+const rootEpic = combineEpics();
+
+export default function Test() {
+  epicMiddleware.run(rootEpic);
+  return <div>Hello Modern.js</div>;
+}
+```
+
+Create a Middleware instance `epicMiddleware` outside the component and call epicMiddleware.run inside the component.
+
+On the browser side, this code does not cause any problems. But in SSR, the Middleware instance will never be destroyed. Every time the component is rendered and `rootEpic` is called, new event bindings are added internally, causing the entire object to continue to grow larger, which ultimately affects application performance.
+
+Such problems in CSR are not easy to detect, so when switching from CSR to SSR, if you are not sure whether the application has such hidden dangers, you can press the application.
+
+## Crop SSR Data
+
+In order to keep the data requested in the SSR phase, it can be used directly on the browser side, Modern.js inject the data and state that collected during the rendering process into the HTML.
+
+As a result, CSR applications often have a large amount of interface data and the state of the components is not crop. If SSR is used directly, the rendered HTML size may be too large.
+
+At this time, SSR not only cannot bring an improvement in the user experience, but may have the opposite effect.
+
+Therefore, when using SSR, **developers need to do reasonable weight loss for the application**:
+
+1. Pay attention to the first screen, you can only request the data needed for the first screen in SSR, and render the rest on the browser side.
+2. Removes the data independent with render from the data returned by the interface.
+
+## Serverless Pre-render
+
+Modern.js provide Serverless Pre-rendering(SPR) to improve SSR performance.
+
+SPR uses pre-rendering and caching to provide the responsive performance of static Web for SSR pages. It allows SSR applications to have the responsiveness and stability of static Web pages, while keeping data dynamically updated.
+
+Using SPR in the Modern.js is very simple, just add the `<PreRender>` component, and the page where the component is located will automatically open SPR.
+
+This mock a component that uses the `useLoaderData` API, and the request in the Data Loader takes 2s.
+
+```jsx
+import { useLoaderData } from '@modern-js/runtime/router';
+
+export const loader = async () => {
+  await new Promise((resolve, reject) => {
+    setTimeout(() => {
+      resolve(null);
+    }, 2000);
+  });
+
+  return {
+    message: 'Hello Modern.js',
+  };
+};
+
+export default () => {
+  const data = useLoaderData();
+  return <div>{data?.message}</div>;
+};
+```
+
+After executing the `dev` command and opening the page, it is obvious that the page needs to wait 2s before returning.
+
+The next is to use the `<PreRender>` component, which can be exported directly from `@modern-js/runtime/ssr `:
+
+```ts
+import { PreRender } from '@modern-js/runtime/ssr';
+```
+
+Use the `PreRender` component in the routing component and set the parameter `interval` to indicate that the expiration time of the rendering result is 5s:
+
+```tsx
+<PreRender interval={5} />
+```
+
+After modification, execute `pnpm run build && pnpm run serve` to start the application and open the page.
+
+When open page for the first time, it is no different from the previous rendering, and there is also a 2s delay.
+
+Refresh page, and the page opens instantly, but at this time, the page data has not changed due to the refresh, because the cache has not expired.
+
+Wait 5s, refresh the page again, the data of the page is still unchanged. Refresh the page again The data changes, but the page still responds almost instantaneously.
+
+This is because in the previous request, the SPR has asynchronously obtained the new rendering result in the background, and the page requested this time is the version that has been cached in the server.
+
+It is conceivable that when `interval` is set to 1, users can have the responsive experience of a static page.
+
+:::info
+For more detail, see [`<PreRender>`](/apis/app/runtime/ssr/pre-render)。
+
+:::
+
+## Treeshaking
+
+When SSR is enabled, Modern.js will use the same entry to build both the SSR Bundle and the CSR Bundle. Therefore, the Web API in the SSR Bundle, or the Node API in the CSR Bundle, can lead to runtime errors.
+
+Web API into a component is usually to do some global listening, or to get browser-related data, such as:
+
+```tsx
+document.addEventListener('load', () => {
+  console.log('document load');
+});
+const App = () => {
+  return <div>Hello World</div>;
+};
+export default App;
+```
+
+The Node API is introduced in the component file, usually because of the use of Data Loader, for example:
+
+```ts
+import fse from 'fs-extra';
+export const loader = () => {
+  const file = fse.readFileSync('./myfile');
+  return {
+    ...
+  };
+};
+```
+
+### Use Environment Variables
+
+For the first case, we can directly use Modern.js built-in environment variables `MODERN_TARGET` to remove useless code at build time:
+
+```ts
+if (process.env.MODERN_TARGET === 'browser') {
+  document.addEventListener('load', () => {
+    console.log('document load');
+  });
+}
+```
+
+:::note
+For more information, see [environment variables](/guides/basic-features/env-vars).
+
+:::
+
+### Use File Suffix
+
+In the second case, the Treeshaking method does not guarantee that the code is completely separated. Modern.js also supports the packaging file of SSR Bundle and CSR Bundle products through the file suffixed with `.node.`.
+
+For example, the import of `fs-extra` in the code, when it is directly referenced to the component, will cause the CSR to load an error. You can create `.ts` and `.node.ts` files of the same name as a layer of proxy:
+
+```ts title="compat.ts"
+export { readFileSync } from 'fs-extra';
+```
+
+```ts title="compat.node.ts"
+export const readFileSync: any = () => {};
+```
+
+use `./compat` directly into the file. At this time, files with the `.node.ts` suffix will be used first in the SSR environment, and files with the `.ts` suffix will be used in the CSR environment.
+
+```ts title="App.tsx"
+import { readFileSync } from './compat'
+
+export const loader = () => {
+  const file = readFileSync('./myfile');
+  return {
+    ...
+  };
+};
+```
+
+### Independent File
+
+Both of the above methods will bring some burden to the developer. Modern.js based on [Nested Routing](/guides/basic-features/routes) developed and designed [Data Fetch](/guides/basic-features/data-fetch) to separate CSR and SSR code。
+
+## Remote Request
+
+When initiating remote requests in SSR, developers sometimes use request tools. Some interfaces need to pass user cookies, which developers can get through the ['useRuntimeContext'](/guides/basic-features/data-fetch#route-loader) API to achieve.
+
+It should be noted, the request header of the HTML request is obtained, which may not be applicable to remote requests, so **must not** pass through all request headers.
+
+In addition, some backend interfaces, or general gateways, will verify according to the information in the request header, and full pass-through is prone to various problems that are difficult to debug. It is recommended that **pass-through on demand**.
+
+Be sure to filter the `host` field if you really need to pass through all request headers.
+
+## Stream SSR
+
+Modern.js supports streaming rendering in React 18, the default rendering mode can be modified with the following configuration:
+
+```json
+{
+  "server": {
+    "ssr": {
+      "mode": "stream"
+    }
+  }
+}
+```
+
+:::note
+At present Modern.js built-in data fetch does not support streaming rendering. If app need it, developers can build it according to the demo of React Stream SSR.
+
+:::

package/en/guides/advanced-features/testing.mdx

@@ -0,0 +1,47 @@
+---
+sidebar_position: 10
+title: Testing
+---
+# Testing
+
+Modern.js inherits the testing capabilities of [Jest](https://jestjs.io/) by default.
+
+First need to execute `pnpm run new` enable [unit test/integration test] features：
+
+```
+? 请选择你想要的操作： 启用可选功能
+? 启用可选功能： 启用「单元测试 / 集成测试」功能
+```
+
+After executing the above command, the `"test": "modern test"` command will be automatically generated in package.json.
+
+register plugin in `modern.config.ts`:
+
+```ts title="modern.config.ts"
+import testPlugin from '@modern-js/plugin-testing';
+
+// https://modernjs.dev/docs/apis/app/config
+export default defineConfig({
+  plugins: [..., testPlugin()],
+});
+```
+
+## Test file
+
+Modern.js default recognized test file paths are: `<rootDir>/src/**/*.test.[jt]s?(x)` and `<rootDir>/tests/**/*.test.[jt]s?(x)`。
+
+If you need to customize the test directory, you can configure it with [tools.jest](/configure/app/tools/jest).
+
+## Usage
+
+Modern.js test support [testing-library](https://testing-library.com/docs/). API can be imported from `@modern-js/runtime/testing`.
+
+```
+import { render, screen } from '@modern-js/runtime/testing';
+```
+
+Other Modern.js supported testing APIs can be found [here](/apis/app/runtime/testing/cleanup)。
+
+## transform
+
+Modern.js tests use [babel-jest](https://www.npmjs.com/package/babel-jest) for source code compilation by default. If you need to use [ts-jest](https://github.com/kulshekhar/ts-jest), you can configure it through [testing.transform](/configure/app/testing/transformer).

package/en/guides/advanced-features/web-server.mdx

@@ -0,0 +1,58 @@
+---
+title: Custom Web Server
+sidebar_position: 2
+---
+# Custom Web Server
+
+Modern.js 作为以客户端为中心的开发框架，对服务端的定制能力较弱。而在有些开发场景下，需要定制特殊的服务端逻辑，例如用户鉴权、请求预处理、添加页面渲染骨架等。
+
+因此 Modern.js 提供了一种功能，让项目可以在给定的范围内扩展 Modern.js 内置的 Web Server，来实现相应的需求。
+
+## 创建自定义 Web Server
+
+在项目根目录执行 `pnpm run new` 命令，按照如下选择，开启「自定义 Web Serve」功能：
+
+```bash
+? 请选择你想要的操作 创建工程元素
+? 创建工程元素 新建「自定义 Web Server」源码目录
+```
+
+执行命令后，在 `modern.config.ts` 中注册 Server 插件:
+
+```ts title="modern.config.ts"
+import serverPlugin from '@modern-js/plugin-server';
+
+// https://modernjs.dev/docs/apis/app/config
+export default defineConfig({
+  plugins: [..., serverPlugin()],
+});
+```
+
+项目目录下会新建 `server/index.ts` 文件，自定义逻辑在这个文件中编写。
+
+## 使用 API 扩展 Web Server
+
+Modern.js 提供了 **Hook** 与 **Middleware** 两类 API 来扩展 Web Server。
+
+### Hook
+
+Hook 可以控制 Web Server 对请求处理的内置逻辑，非 BFF 请求会经过 Hook 的处理。
+
+Hook 不可以使用运行时框架拓展。
+
+详细 API 可以查看 [Hook](/apis/app/runtime/web-server/hook)。
+
+### Middleware
+
+Middleware 可以为 Web Server 添加前置中间件，只有 SSR 请求会经过 Middleware 的处理。
+
+Middleware 可以使用运行时框架拓展。
+
+详细 API 可以查看 [Hook](/apis/app/runtime/web-server/middleware)。
+
+## 完全自定义的 Web Server
+
+:::note
+敬请期待
+
+:::

package/en/guides/basic-features/alias.mdx

@@ -0,0 +1,65 @@
+---
+title: Alias
+sidebar_position: 8
+---
+# Alias
+
+Modern.js allow aliases in JS and CSS，and the following aliases are built in:
+
+```js
+{
+  '@': '<appDirectory>/src',
+  '@shared': '<appDirectory>/shared',
+}
+```
+
+:::info
+When the optional features is enable, the generator will also add built-in aliases dynamically. For example, when BFF is enabled, the `@api` alias will be added by default.
+
+:::
+
+For example, import the modules from the `src/common/` directory in the `src/App.tsx` file:
+
+```bash
+.
+├── common
+│   ├── styles
+│   │   └── base.css
+│   └── utils
+│       └── index.ts
+├── App.tsx
+```
+
+the code in `src/App.tsx`:
+
+```ts
+import utils from '@/src/common/utils';
+import '@/src/common/styles/base.css';
+```
+
+Modern.js also provides a way to config aliases. Adding the `@common` alias as an example. For TypeScript projects, you only need to configure `compilerOptions.paths` under the project root directory `tsconfig.json` as follows:
+
+```json
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"],
+      "@/common/*": ["./src/common/*"]
+    }
+  }
+}
+```
+
+JavaScript project can config by [`source.alias`](/configure/app/source/alias) in `modern.config.js`:
+
+```ts title="modern.config.ts"
+export default defineConfig({
+  source: {
+    alias: {
+      '@common': './src/common',
+    },
+  },
+});
+```
+
+for more detail, see 【[API - source.alias](/configure/app/source/alias)】。

package/en/guides/basic-features/builder.mdx

@@ -0,0 +1,47 @@
+---
+title: Builder
+sidebar_position: 2
+---
+# Builder
+
+**Modern.js uses [Modern.js Builder](https://modernjs.dev/builder) to build your Web APP. **
+
+Modern.js Builder is one of the core components of Modern.js. It is a build engine for modern Web development and can be used independently of Modern.js. Modern.js Builder supports multiple bundlers such as webpack and rspack, and it uses webpack by default.
+
+## Build Architecture
+
+From the perspective of building, Modern.js is divided into three layers, from top to bottom:
+
+- Upper-layer framework: Modern.js.
+- Universal build engine: Modern.js Builder.
+- Low-level bundlers: webpack and rspack.
+
+<img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/builder-layers-1117.png" style={{ maxWidth: '540px' }} />
+
+## Builder Documentation
+
+Since Modern.js Builder is a module that can be used independently, we provide a separate document for it, the site address is: [modernjs.dev/builder](https://modernjs.dev/builder).
+
+In this document, you can learn about the detailed introduction of Modern.js Builder, and you can also find a complete usage guide for each building features. When you encounter building issues, it is recommended that you first read the Modern.js Builder documentation to solve them.
+
+## Builder Config
+
+The config of Modern.js is inherited from Modern.js Builder, so you can use all build configs provided by Modern.js Builder in Modern.js.
+
+Take the `html.title` config of Modern.js Builder as an example, you can directly use this config in the `modern.config.ts` file, and it will be automatically passed to Modern.js Builder.
+
+```ts title="modern.config.js"
+export default defineConfig({
+  html: {
+    title: 'example',
+  },
+});
+```
+
+For details of building configs, please refer to [「Modern.js Builder - Builder Config」](https://modernjs.dev/builder/en/guide/basic/builder-config.html).
+
+## Building Features
+
+Modern.js Builder provides a wealth of building features, including dozens of features such as JavaScript compilation, CSS compilation, static resource processing, hot module replacement, code compression, and TS type checking.
+
+We recommend you to read [「Modern.js Builder - All Features」](https://modernjs.dev/builder/en/guide/features.html) to learn all the building features provided by Modern.js Builder.

package/en/guides/basic-features/css/css-in-js.mdx

@@ -0,0 +1,40 @@
+---
+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`.
+
+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';
+
+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';
+
+const Button = styled.button`
+  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/) ].
+
+:::info Additional
+Modern.js uses the Babel plugin [babel-plugin-styled-components](https://github.com/styled-components/babel-plugin-styled-components) internally, and the plugin can be configured through [`tools.styled Components`](/configure/app/tools/styled-components).
+
+:::
+
+:::tip
+If you need to use [styled-jsx](https://www.npmjs.com/package/styled-jsx), [Emotion](https://emotion.sh/) and other CSS-in-JS libraries, you need to install the dependency of the corresponding library first. For specific usage, please refer to the official website of the corresponding library.
+
+:::

package/en/guides/basic-features/css/css-modules.mdx

@@ -0,0 +1,87 @@
+---
+sidebar_position: 5
+---
+
+# CSS Modules
+
+Modern.js out of the box support for [CSS Modules](https://github.com/css-modules/css-modules).
+
+## File Suffix Form CSS Modules
+
+By default, files ending in `.module.(css|scss|sass|less)` are treated as CSS Modules files, for example:
+
+```css title="button.module.css"
+.redColor {
+  color: red;
+}
+```
+
+```js title="Button.jsx"
+import styles from './button.module.css';
+
+export default function Button() {
+  return (
+    <button type="button" className={styles.redColor}>
+      red button
+    </button>
+  );
+}
+```
+
+Will eventually be compiled as:
+
+```js
+<button type="button" className="button_redColor__1-RBg">
+  red button
+</button>
+```
+
+## Global CSS Modules
+
+If you want to remove the `.module` suffix from the filename, you can set [`output.disable CssModuleExtension`](/configure/app/output/disable-css-module-extension).
+
+After setting, all style files except the style files in the `node_modules/` directory and the file name format of `[name].global.(css|scss|sass|less)` will be processed as CSS Modules.
+
+If you need global styles at this point, you can solve it by creating a style file with the filename format `[name].global.(css|scss|sass|less)`, for example:
+
+```css title="app.global.css"
+.bg-blue {
+  background-color: blue;
+}
+```
+
+```css title="button.css"
+.redColor {
+  color: red;
+}
+```
+
+```js title="App.jsx"
+import './app.global.css';
+import styles from './button.css';
+
+export default function Button() {
+  return (
+    <button type="button" className={`${styles.redColor} bg-blue`}>
+      button
+    </button>
+  );
+}
+```
+
+Will eventually be compiled as:
+
+```js
+<button type="button" className="button__redColor--JsFYl bg-blue">
+  button
+</button>
+```
+
+The final effect is as follows:
+
+![](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/more-css-modules.png)
+
+:::tip
+When using [babel-plugin-react-css-modules](https://github.com/gajus/babel-plugin-react-css-modules), it is important to note that the configuration option `generateScopedName` of this plugin needs to be the same as [`output.css ModuleLocalIdentName`](/configure/app/output/css-module-local-ident-name).
+
+:::

package/en/guides/basic-features/css/less-sass.mdx

@@ -0,0 +1,17 @@
+---
+sidebar_position: 4
+---
+
+# Less and Sass
+
+[Less](https://lesscss.org/) and [Sass](https://sass-lang.com/) are two commonly used CSS preprocessors that Modern.js built-in support for the Less and Sass compile capabilities.
+
+## Customized Configuration
+
+- If you need to customize the configuration of [less-loader](https://github.com/webpack-contrib/less-loader), please refer to the [tools.less](/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](/configure/app/tools/sass).
+
+:::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](/guides/basic-features/css/postcss)].
+
+:::