@modern-js/main-doc 2.5.0 → 2.7.0

package/en/apis/app/commands/dev.mdx

@@ -1,61 +0,0 @@
----
-sidebar_position: 1
----
-
-# dev / start
-
-```bash
-Usage: modern dev / modern start [options]
-
-Development commands
-
-Options:
-  -e --entry <entry>    compiler by entry
-  -c --config <config>  configuration file path, which can be a relative path or an absolute path
-  -h, --help            show command help
-  --analyze             analyze the bundle and view size of each module
-  --api-only            only start API service
-```
-
-`modern dev` start a development server，watch file change，default support React Fast Refresh:
-
-`modern start` is an alias of `modern dev` command, the usage of the two are exactly the same.
-
-```bash
-$ modern dev
-
-info    Starting dev server...
-info    App running at:
-
-  > Local:    http://localhost:8080/
-  > Network:  http://192.168.0.1:8080/
-```
-
-## Compile Partial Pages
-
-In multi-page (MPA) projects, the `--entry` option can be added to specify one or more pages to compile. In this way, only part of the code in the project will be compiled, and the dev startup speed will be faster.
-
-For example, execute `modern dev --entry`, the entry selector will be displayed in the command line interface:
-
-```bash
-$ modern dev --entry
-
-? Please select the entry that needs to be built
-❯ ◯ foo
-  ◯ bar
-  ◯ baz
-```
-
-For example, if you select the `foo` entry, only the code related to the `foo` entry will be compiled, and the code of other pages will not be compiled.
-
-### Specify the page by parameter
-
-You can also specify the page name through parameters after `--entry`, and the names of multiple pages can be separated by commas.
-
-```bash
-# Compile foo page
-modern dev --entry foo
-
-# Compile foo and bar pages
-modern dev --entry foo,bar
-```

package/en/apis/app/commands/inspect.mdx

@@ -1,61 +0,0 @@
----
-sidebar_position: 7
----
-# inspect
-
-```
-Usage: modern inspect [options]
-
-Options:
-  --env <env>           view the configuration in the target environment (default: "development")
-  --output <output>     Specify the path to output in the dist (default: "/")
-  --verbose             Show the full function in the result
-  -c --config <config>  configuration file path, which can be a relative path or an absolute path
-  -h, --help            show command help
-```
-
-`modern inspect` command used to view the [Modern.js Builder config](https://modernjs.dev/builder/en/guide/basic/builder-config.html) and webpack config of the project.
-
-After executing the command `npx modern inspect` in the project root directory, the following files will be generated in the `dist` directory of the project:
-
-- `builder.config.js`: The Modern.js Builder config to use at build time.
-- `webpack.config.web.js`: The webpack config used by to use at build time.
-
-```bash
-➜ npx modern inspect
-
-Inspect config succeed, open following files to view the content:
-
-  - Builder Config: /root/my-project/dist/builder.config.js
-  - Webpack Config (web): /root/my-project/dist/webpack.config.web.js
-```
-
-## Configuration Env
-
-By default, the inspect command will output the development configs, you can use the `--env production` option to output the production configs:
-
-```bash
-modern inspect --env production
-```
-
-## Verbose content
-
-By default, the inspect command will omit the function content in the config object, you can use the `--verbose` option to output the full content of the function:
-
-```bash
-modern inspect --verbose
-```
-
-### SSR Configuration
-
-If the project has enabled SSR, an additional `webpack.config.node.js` file will be generated in the `dist/`, corresponding to the webpack configuration at SSR build time.
-
-```bash
-➜ npx modern inspect
-
-Inspect config succeed, open following files to view the content:
-
-  - Builder Config: /root/my-project/dist/builder.config.js
-  - Webpack Config (web): /root/my-project/dist/webpack.config.web.js
-  - Webpack Config (node): /root/my-project/dist/webpack.config.node.js
-```

package/en/apis/app/commands/lint.mdx

@@ -1,19 +0,0 @@
----
-sidebar_position: 4
-title: lint
----
-# lint
-
-```bash
-Usage: modern lint [options] [...files]
-
-lint and fix source files
-
-Options:
-  --no-fix    disable auto fix source file
-  -h, --help  display help for command
-```
-
-Run ESLint to check the syntax of the code. Normally, only the part of the code modified by this commit needs to be checked by `lint-staged` during the `git commit` phase.
-
-- `--no-fix` close auto fix by lint.

package/en/apis/app/commands/new.mdx

@@ -1,55 +0,0 @@
----
-sidebar_position: 2
----
-# new
-
-```bash
-Usage: modern new [options]
-
-Execution Generator in App
-
-Options:
-  -d, --debug            using debug mode to log something (default: false)
-  -c, --config <config>  set default generator config(json string)
-  --dist-tag <tag>       use specified tag version for its generator
-  --registry             set npm registry url to run npm command
-  -h, --help             show command help
-```
-
-The `modern new` command is used to enable features to an existing project.
-
-For example, add application entry, enable some optional features such as Tailwind CSS, micro frontend, etc.
-
-### Add Entry
-
-In the project, execute the `new` command to add entries as follows:
-
-```bash
-$ npx modern new
-? Action Create project element
-? Create project element New "entry"
-? Entry name entry
-```
-
-### Enable Features
-
-In the project, execute the `new` command to enable features as follows:
-
-```bash
-$ npx modern new
-? Action Enable features
-? Enable features (Use arrow keys)
-❯ Enable Tailwind CSS
-  Enable BFF
-  Enable SSG
-  Enable Micro Frontend
-  Enable Unit Test / Integration Test
-  Enable Visual Testing (Storybook)
-```
-
-:::caution
-The `--config` parameter needs to use a JSON string.
-
-pnpm does not support the use of JSON strings as parameter values currently. Use `npm new` to turn on.【[Relate Issue](https://github.com/pnpm/pnpm/issues/3876)】
-
-:::

package/en/apis/app/commands/serve.mdx

@@ -1,27 +0,0 @@
----
-sidebar_position: 6
----
-# serve
-
-```bash
-Usage: modern serve [options]
-
-run server
-
-Options:
-  -c --config <config>  configuration file path, which can be a relative path or an absolute path
-  -h, --help            show command help
-  --api-only            only run API service
-```
-
-Usually use the `modern serve` command to enable project run in the production environment, and you need to execute the [`build'](/apis/app/commands/build) command in advance to build the product.
-
-By default, the project will run in `localhost:8080`, you can modify the Server port number with `server.port`:
-
-```js
-export default defineConfig({
-  server: {
-    port: 8081,
-  },
-});
-```

package/en/apis/app/commands/test.mdx

@@ -1,35 +0,0 @@
----
-sidebar_position: 3
----
-# test
-
-```bash
-Usage: modern test [options]
-
-Options:
-  -h, --help  show command help
-```
-
-:::caution
-`modern test` command need to execute the `new` command in advance to enable the `unit test/integration test`.
-
-:::
-
-`modern test` command will automatically run the test cases, the effect is as follows:
-
-```bash
-$ npx modern test
- PASS  src/tests/index.test.ts
-  The add method
-    ✓ should work fine. (2ms)
-
-Test Suites: 1 passed, 1 total
-Tests:       1 passed, 1 total
-Snapshots:   0 total
-Time:        0.994 s, estimated 1 s
-```
-
-:::info
-files match `*.test.(js|ts)` in `api/` or `src/` will be recognized as test cases by default.
-
-:::

package/en/apis/app/commands/upgrade.mdx

@@ -1,18 +0,0 @@
----
-sidebar_position: 8
----
-# upgrade
-
-```
-Usage: modern upgrade [options]
-
-upgrade Modern.js to latest version.
-
-Options:
-  --registry <registry>  specify npm registry (default: "")
-  -d,--debug             using debug mode to log something (default: false)
-  --cwd <cwd>            app directory (default: "")
-  -h, --help             show command help
-```
-
-Execute the command `npx modern upgrade` in the project, by default, dependencies in the `package.json` are updated to the latest version.

package/en/guides/css/_category_.json

@@ -1,5 +0,0 @@
-{
-  "label": "CSS Solutions",
-  "position": 4,
-  "collapsed": false
-}

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

@@ -1,40 +0,0 @@
----
-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/css/css-modules.mdx

@@ -1,87 +0,0 @@
----
-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/css/less-sass.mdx

@@ -1,17 +0,0 @@
----
-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/css/postcss)].
-
-:::

package/en/guides/css/postcss.mdx

@@ -1,79 +0,0 @@
----
-sidebar_position: 3
----
-
-# PostCSS
-
-[PostCSS](https://postcss.org/) is a tool for converting CSS code with JavaScript tools and plugins. Modern.js built-in PostCSS and integrates common PostCSS plugins such as [Autoprefixer](https://github.com/postcss/autoprefixer) to meet the style development needs of most projects.
-
-By default, Modern.js compile and transform CSS as follows:
-
-1. [Autoprefixer](https://github.com/postcss/autoprefixer) Automatically add the required browser vendor prefix to CSS rules according to the required browser range. Modern.js default supported browser ranges are: `['> 0.01%', 'not dead', 'not op_mini all']`.
-
-:::info Note
-  - [Supported browser range: `> 0.01%`] means that the browser market share is greater than 0.01%.
-  - `Not dead` means excluding browsers that are no longer officially supported and browsers that have not been updated in the past 24 months.
-  - `not op_mini all` means exclude Opera Mini.
-
-:::
-
-:::info Additional
-If you need to modify the default browser support range, you can configure `browserslist` in the project's `package.json` file, and set the rule to refer to the use of [Browserslist](https://github.com/browserslist/browserslist). The following is an example:
-`json title ="package.json" { "Browserslist": [ "The last 1 versions", "> 1%", "IE 10" ] } `
-
-:::
-
-2. Provide [CSS custom properties](https://www.w3.org/TR/css-variables-1/) support, you can define and use custom variables in CSS, such as:
-
-```css
-:root {
-  --main-bg-color: pink;
-}
-
-body {
-  background-color: var(--main-bg-color);
-}
-```
-
-3. Provide [CSS Nesting](https://drafts.csswg.org/css-nesting-1/) support, you can use nested writing in CSS, such as:
-
-```css
-table.colortable td {
-  text-align: center;
-}
-table.colortable td.c {
-  text-transform: uppercase;
-}
-```
-
-It can also be rewritten as CSS nested:
-
-```css
-table.colortable {
-  & td {
-    text-align: center;
-    &.c {
-      text-transform: uppercase;
-    }
-  }
-}
-```
-
-4. Fix known [Flexbugs](https://github.com/philipwalton/flexbugs).
-5. Provide compatibility with the following CSS features:
-   - [`initial` attribute value](https://developer.mozilla.org/en-US/docs/Web/CSS/initial_value)
-   - [`break-` attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/break-after)
-   - [`font-variant`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant)
-   - [Media Query Ranges](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#syntax_improvements_in_level_4)
-
-When you need to modify the PostCSS configuration, you can implement it through the underlying configuration [`tools.postcss`](/configure/app/tools/postcss), here is an example:
-
-```ts title="modern.config.ts"
-export default defineConfig({
-  tools: {
-    postcss: {
-      plugins: ['autoprefixer', ('postcss-flexbugs-fixes': {})],
-    },
-  },
-});
-```

package/zh/apis/app/commands/_category_.json

@@ -1,5 +0,0 @@
-{
-  "label": "命令",
-  "position": 0,
-  "collapsed": false
-}

package/zh/apis/app/commands/build.mdx

@@ -1,39 +0,0 @@
----
-sidebar_position: 5
----
-# build
-
-```bash
-Usage: modern build [options]
-
-build application
-
-Options:
-  -c --config <config>  指定配置文件路径，可以为相对路径或绝对路径
-  -h, --help  显示命令帮助
-  --analyze   分析构建产物体积，查看各个模块打包后的大小
-```
-
-`modern build` 命令默认会在 `dist/` 目录下构建出可用于生产环境的产物。
-
-可以通过修改配置 [`output.distPath`](/configure/app/output/dist-path) 指定产物的输出目录。
-
-## 分析构建产物体积
-
-执行 `npx modern build --analyze` 命令，可以在打包生产环境代码的同时，产出一个分析构建产物体积的 HTML 文件：
-
-```
-Bundle Analyzer saved report to /example/dist/report.html
-File sizes after production build:
-
-  122.35 KB  dist/static/js/885.1d4fbe5a.js
-  2.3 KB     dist/static/js/main.4b8e8d64.js
-  761 B      dist/static/js/runtime-main.edb7cf35.js
-  645 B      dist/static/css/main.0dd3ecc1.css
-```
-
-手动在浏览器中打开上述 HTML 文件，可以看到打包产物的瓦片图，并进行包体积分析和优化：
-
-<img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/mwa-build-analyze-8784f762c1ab0cb20935829d5f912c4c.png" />
-
-> 该功能基于 [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer) 实现。

package/zh/apis/app/commands/dev.mdx

@@ -1,61 +0,0 @@
----
-sidebar_position: 1
----
-
-# dev / start
-
-```bash
-Usage: modern dev / modern start [options]
-
-本地开发命令
-
-Options:
-  -e --entry <entry>    指定入口，只编译特定的页面
-  -c --config <config>  指定配置文件路径，可以为相对路径或绝对路径
-  -h, --help            显示命令帮助
-  --analyze             分析构建产物体积，查看各个模块打包后的大小
-  --api-only            仅启动 API 接口服务
-```
-
-`modern dev` 命令用于启动一个本地开发服务器，对源代码进行开发环境编译，同时监听源文件变化，默认支持模块热更新和 React Fast Refresh。
-
-`modern start` 是 `modern dev` 命令的别名，两者的功能和用法完全一致。
-
-```bash
-$ modern dev
-
-info    Starting dev server...
-info    App running at:
-
-  > Local:    http://localhost:8080/
-  > Network:  http://192.168.0.1:8080/
-```
-
-## 编译部分页面
-
-在多页面（MPA）项目中，可以添加 `--entry` 参数来指定编译其中的一个或多个页面。这样可以只编译项目中的部分代码，从而提升 dev 启动速度。
-
-比如执行 `modern dev --entry`，在命令行界面中会展示入口选择框：
-
-```bash
-$ modern dev --entry
-
-? 请选择需要构建的入口
-❯ ◯ foo
-  ◯ bar
-  ◯ baz
-```
-
-比如选择 `foo` 入口，那么只有 `foo` 入口相关的代码会进行编译，其他页面的代码将不会参与构建。
-
-### 通过参数指定页面
-
-你也可以在 `--entry` 后面通过参数来指定页面名称，多个页面的名称使用逗号分隔。
-
-```bash
-# 编译 foo 页面
-modern dev --entry foo
-
-# 编译 foo 和 bar 页面
-modern dev --entry foo,bar
-```

package/zh/apis/app/commands/inspect.mdx

@@ -1,61 +0,0 @@
----
-sidebar_position: 7
----
-# inspect
-
-```
-Usage: modern inspect [options]
-
-Options:
-  --env <env>           查看指定环境下的配置 (default: "development")
-  --output <output>     指定在 dist 目录下输出的路径 (default: "/")
-  --verbose             在结果中展示函数的完整内容
-  -c --config <config>  指定配置文件路径，可以为相对路径或绝对路径
-  -h, --help            显示命令帮助
-```
-
-`modern inspect` 命令，用于查看项目的 [Modern.js Builder 配置](https://modernjs.dev/builder/guide/basic/builder-config.html) 以及 webpack 配置。
-
-在项目根目录下执行命令 `npx modern inspect` 后，会在项目的 `dist` 目录生成以下文件：
-
-- `builder.config.js`: 表示在构建时使用的 Modern.js Builder 配置。
-- `webpack.config.web.js`: 表示在构建时使用的 webpack 配置。
-
-```bash
-➜ npx modern inspect
-
-Inspect config succeed, open following files to view the content:
-
-  - Builder Config: /root/my-project/dist/builder.config.js
-  - Webpack Config (web): /root/my-project/dist/webpack.config.web.js
-```
-
-## 指定环境
-
-默认情况下，inspect 命令会输出开发环境的配置，你可以添加 `--env production` 选项来输出生产环境的配置：
-
-```bash
-modern inspect --env production
-```
-
-## 完整内容
-
-默认情况下，inspect 命令会省略配置对象中的函数内容，你可以添加 `--verbose` 选项来输出函数的完整内容：
-
-```bash
-modern inspect --verbose
-```
-
-## SSR 构建配置
-
-如果项目开启了 SSR 能力，则在 `dist` 目录会另外生成一份 `webpack.config.node.js` 文件，对应 SSR 构建时的 webpack 配置。
-
-```bash
-➜ npx modern inspect
-
-Inspect config succeed, open following files to view the content:
-
-  - Builder Config: /root/my-project/dist/builder.config.js
-  - Webpack Config (web): /root/my-project/dist/webpack.config.web.js
-  - Webpack Config (node): /root/my-project/dist/webpack.config.node.js
-```