npm - @modern-js/main-doc - Versions diffs - 2.49.0 → 2.49.2 - Mend

@modern-js/main-doc 2.49.0 → 2.49.2

Files changed (10) hide show

package/docs/en/community/blog/overview.md +0 -8
package/docs/en/community/contributing-guide.mdx +0 -16
package/docs/en/configure/app/dev/client.mdx +42 -0
package/docs/en/guides/get-started/tech-stack.mdx +0 -32
package/docs/en/guides/topic-detail/generator/plugin/category.md +1 -1
package/docs/zh/community/blog/overview.md +0 -12
package/docs/zh/community/contributing-guide.mdx +0 -16
package/docs/zh/configure/app/dev/client.mdx +42 -0
package/docs/zh/guides/get-started/tech-stack.mdx +0 -32
package/package.json +7 -7

package/docs/en/community/blog/overview.md CHANGED Viewed

@@ -8,8 +8,6 @@ Welcome to Modern.js blog!
 You can find the latest update of Modern.js and our thought processes here. Occasionally we explain the infrastructure behind it.
----
 ## Announcing Modern.js v2: support Rspack
 > Published on 16.03.2023
@@ -20,8 +18,6 @@ Modern.js is a suite of infrastructure tools we built for web development inside
 We are extremely proud of what we have achieved so far, you can also refer to [this article(English version under construction)](/community/blog/v2-release-note)👈🏻 to see what has changed over the last year in Modern.js.
----
 ## What is Streaming SSR in React 18
 > Published on 16.12.2022
@@ -36,8 +32,6 @@ To understand its design further, check out this [Github Discussion](https://git
 Or read more from us at [here(Further content in English under construction)](https://mp.weixin.qq.com/s/w4FS5sBcHqRl-Saqi19Y6g).
----
 ## Introducing React Server Component in Modern.js
 > Published on 01.12.2022
@@ -59,8 +53,6 @@ We updated Modern.js to v1.21.0 during Sept - Oct. Major upgrade includes:
 [Read more (English version under construction)](/community/blog/2022-0910-updates)
----
 ## Updates during July - August in 2022
 > Published on 2022.09.05

package/docs/en/community/contributing-guide.mdx CHANGED Viewed

@@ -6,8 +6,6 @@ sidebar_position: 3
 Thanks for that you are interested in contributing to Modern.js. Before starting your contribution, please take a moment to read the following guidelines.
----
 ## Setup the Dev Environment
 ### Fork the Repo
@@ -81,8 +79,6 @@ Set the email for local repo:
 git config user.email "SOME_EMAIL@example.com"
 ```
----
 ## Making Changes and Building
 Once you have set up the local development environment in your forked repo, we can start development.
@@ -123,8 +119,6 @@ If you need to clean all `node_modules/*` in the project, run the `reset` comman
 pnpm run reset
 ```
----
 ## Testing
 ### Add New Tests
@@ -164,8 +158,6 @@ If you need to run a specified test, you can add keywords to filter:
 npx jest copy-assets
 ```
----
 ## Linting
 To help maintain consistency and readability of the codebase, we use a ESLint to lint the codes.
@@ -176,8 +168,6 @@ You can run the Linter by executing the following command:
 pnpm run lint
 ```
----
 ## Benchmarking
 You can input `!bench-framework` or `!bench-module` in the comment area of the PR to do benchmarking on `@modern-js/app-tools` and `@modern-js/module-tools` respectively (you need to have Collaborator and above permissions).
@@ -186,8 +176,6 @@ You can focus on metrics related to build time and bundle size based on the comp
 Dependencies installation-related metrics base on publishing process, so the data is relatively lagging and is for reference only.
----
 ## Documentation
 Currently Modern.js provides documentation in English and Chinese. If you can use Chinese, please update both documents at the same time. Otherwise, just update the English documentation.
@@ -207,8 +195,6 @@ This website is built with Rspress, the document content can be written using ma
 The source code of Rspress can be found in [this repo](https://github.com/web-infra-dev/rspress).
----
 ## Submitting Changes
 ### Add a Changeset
@@ -239,8 +225,6 @@ feat(plugin-swc): Add `xxx` config
 |____________ Type
 ```
----
 ## Publishing
 We use **Modern.js Monorepo Solution** to manage version and changelog.

package/docs/en/configure/app/dev/client.mdx ADDED Viewed

@@ -0,0 +1,42 @@
+---
+sidebar_label: client
+---
+# dev.client
+Configure the client code injected by Modern.js during the development process. This can be used to set the WebSocket URL for HMR.
+- **Type:**
+```ts
+type Client = {
+  /** Specify the protocol name for the WebSocket request */
+  protocol?: 'ws' | 'wss';
+  /** Specify the path for the WebSocket request */
+  path?: string;
+  /** Specify the port number for the WebSocket request */
+  port?: string;
+  /** Specify the host for the WebSocket request */
+  host?: string;
+  /**
+   * Shows overlay in the browser when there are compiler errors
+   * This feature requires the current browser version to support [Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)
+   */
+  overlay?: boolean;
+};
+```
+- **Default:**
+```js
+const defaultConfig = {
+  path: '/webpack-hmr',
+  // Defaults to the port number of the dev server
+  port: '',
+  host: location.hostname,
+  protocol: location.protocol === 'https:' ? 'wss' : 'ws',
+  overlay: false,
+};
+```
+For detailed usage, please refer to [Rsbuild - dev.client](https://rsbuild.dev/config/dev/client).

package/docs/en/guides/get-started/tech-stack.mdx CHANGED Viewed

@@ -8,56 +8,42 @@ The Modern.js framework comes with built-in popular libraries and development to
 In this document, you can learn about the main technology stack involved in the Modern.js framework, as well as some optional libraries and tools.
----
 ## UI Library
 Modern.js uses [React 18](https://react.dev/) to build user interfaces and is also compatible with React 17.
 Rsbuild supports building Vue applications. If you need to use Vue, you can refer to ["Rsbuild - Vue"](https://rsbuild.dev/guide/framework/vue3).
----
 ## Routing
 Modern.js uses [React Router 6](https://reactrouter.com/en/main) for routing and is also compatible with React Router 5.
 Modern.js supports conventional routing, self-controlled routing, or other routing schemes. Please refer to ["Routing"](/en/guides/basic-features/routes) to make your choice.
----
 ## Micro Frontends
 Modern.js provides out-of-the-box support for the [Garfish](https://www.garfishjs.org/) micro frontend framework.
 We are also working with Zack Jackson, the author of [Module Federation](https://webpack.js.org/concepts/module-federation/), to provide a more comprehensive solution.
----
 ## State Management
 Modern.js can be used with any community state management library, such as [Redux](https://redux.js.org/), [Jotai](https://jotai.org/), [Zustand](https://docs.pmnd.rs/zustand), [Valtio](https://valtio.pmnd.rs/), and more.
 Modern.js also provides a wrapper around Redux called Reduck for state management. You can refer to ["Reduck State Management"](/en/guides/topic-detail/model/quick-start) for usage.
----
 ## Package Manager
 Modern.js can be used with any community package manager, such as [npm](https://www.npmjs.com/package/npm), [yarn](https://classic.yarnpkg.com/lang/en/), [pnpm](https://pnpm.io/), or [Bun](https://bun.sh/).
 We recommend using pnpm for faster installation speed.
----
 ## Bundler
 Modern.js uses [Webpack 5](https://webpack.js.org/) or [Rspack](https://www.rspack.dev/) to bundle your web applications.
 The default bundler used is Webpack 5. You can refer to ["Using Rspack"](/en/guides/advanced-features/rspack-start) to switch to the faster Rspack.
----
 ## Transpiler
 Modern.js uses [Babel](https://babeljs.io/), [SWC](https://swc.rs/), or [esbuild](https://esbuild.github.io/) as JavaScript transpiler to transform TypeScript or JSX into JavaScript code that can run in browsers and perform syntax downgrades.
@@ -65,8 +51,6 @@ Modern.js uses [Babel](https://babeljs.io/), [SWC](https://swc.rs/), or [esbuild
 - When using Webpack for bundling, the default tool is Babel, which can be switched to SWC or esbuild.
 - When using Rspack for bundling, the default tool is SWC, which can be switched to Babel.
----
 ## Minimizer
 During production builds, Modern.js uses [Terser](https://github.com/terser/terser), [SWC](https://swc.rs/), or [esbuild](https://esbuild.github.io/) to minify JavaScript code, and [cssnano](https://cssnano.co/) to minify CSS code.
@@ -74,16 +58,12 @@ During production builds, Modern.js uses [Terser](https://github.com/terser/ters
 - When using Webpack for bundling, the default tool for minifying JS code is Terser, which can be switched to SWC or esbuild.
 - When using Rspack for bundling, the default tool for minifying JS code is SWC, and switching to other tools is not currently supported.
----
 ## CSS Transformer
 Modern.js uses [PostCSS](https://postcss.org/) to transform CSS code and enables [autoprefixer](https://github.com/postcss/autoprefixer) by default to add CSS prefixes.
 Modern.js supports enabling ["Tailwind CSS"](/en/guides/basic-features/css.html#using-tailwind-css) and is compatible with both Tailwind CSS v2 and v3.
----
 ## CSS Preprocessors
 Modern.js supports three CSS preprocessors: [Sass](https://sass-lang.com/), [Less](https://lesscss.org/), and [Stylus](https://stylus-lang.com/):
@@ -91,46 +71,34 @@ Modern.js supports three CSS preprocessors: [Sass](https://sass-lang.com/), [Les
 - Sass and Less are supported by default and ready to use.
 - Stylus is optional and can be used by referring to the ["Stylus Plugin"](https://rsbuild.dev/plugins/list/plugin-stylus).
----
 ## CSS Modules
 Modern.js provides out-of-the-box support for [CSS Modules](https://github.com/css-modules/css-modules), which is implemented internally based on [css-loader](https://www.npmjs.com/package/css-loader).
 Please refer to ["Use CSS Modules"](/guides/basic-features/css-modules) for usage instructions.
----
 ## CSS-in-JS
 Modern.js supports the use of [styled-components](https://styled-components.com/). Please refer to ["Using CSS-in-JS"](/en/guides/basic-features/css.html#using-css-in-js) for usage instructions.
 If you need to use other CSS-in-JS solutions, you can integrate them into your project on your own.
----
 ## Testing Framework
 Modern.js supports the use of [Jest](https://jestjs.io/) for unit testing or integration testing. This feature is optional. Please refer to ["Using Jest"](/en/guides/advanced-features/testing) to enable it.
 If you need to use [Vitest](https://vitest.dev/) or other testing frameworks, you can integrate them into your project on your own.
----
 ## UI Components
 Modern.js can be used with any React UI component library from the community, such as [MUI](https://mui.com/), [Ant Design](https://ant.design/), [Arco Design](https://github.com/arco-design/arco-design), [Semi Design](https://semi.design/), [Radix UI](https://www.radix-ui.com/), and more.
 Additionally, Modern.js provides built-in support for [on-demand import](/configure/app/source/transform-import) of Ant Design and Arco Design.
----
 ## Component Development
 Modern.js supports the use of [Storybook](https://storybook.js.org/) for developing UI components. This feature is optional. Please refer to ["Using Storybook"](/en/guides/advanced-features/using-storybook) to enable it.
----
 ## Node.js Framework
 import TechStackNodeFramework from '@site-docs-en/components/tech-stack-node-framework';

package/docs/en/guides/topic-detail/generator/plugin/category.md CHANGED Viewed

@@ -2,7 +2,7 @@
 sidebar_position: 2
 ---
-## Introduction
+# Introduction
 There are two types of generator plugin:

package/docs/zh/community/blog/overview.md CHANGED Viewed

@@ -8,8 +8,6 @@ sidebar_position: 1
 在这里，你可以了解到 Modern.js 的最新进展和技术分享。
----
 ## AIGC 如何影响下一代文档搜索方案？
 > 发表于 2023.05.11
@@ -18,8 +16,6 @@ sidebar_position: 1
 [了解更多 →](https://mp.weixin.qq.com/s/OGuixAbvbIYr2viQrOrPXg)
----
 ## Modern.js v2 发布：支持 Rspack 构建
 > 发表于 2023.03.16
@@ -32,8 +28,6 @@ Modern.js 是字节跳动 Web Infra 团队开源的一套 Web 工程体系。在
 [了解更多 →](/community/blog/v2-release-note)
----
 ## React Streaming SSR 原理解析
 > 发表于 2022.12.16
@@ -45,8 +39,6 @@ React 18 提供了一种新的 SSR 渲染模式： Streaming SSR。通过 Stream
 [了解更多 →](https://mp.weixin.qq.com/s/w4FS5sBcHqRl-Saqi19Y6g)
----
 ## React Server Component 介绍
 > 发表于 2022.12.01
@@ -57,8 +49,6 @@ React 官方对 Server Component 是这样介绍的: **zero-bundle-size React Se
 [了解更多 →](https://mp.weixin.qq.com/s/B-XLvW00vl5RE1Ur3EW4ow)
----
 ## 2022 年 9 ~ 10 月更新内容
 > 发表于 2022.11.01
@@ -70,8 +60,6 @@ Modern.js 9 ~ 10 月的最新版本为 v1.21.0，本双月的主要更新有：
 [了解更多 →](/community/blog/2022-0910-updates)
----
 ## 2022 年 7 ~ 8 月更新内容
 > 发表于 2022.09.05

package/docs/zh/community/contributing-guide.mdx CHANGED Viewed

@@ -6,8 +6,6 @@ sidebar_position: 3
 感谢你有兴趣为 Modern.js 做贡献！在开始你的贡献之前，请花几分钟时间阅读以下指南。
----
 ## 设置开发环境
 ### Fork 仓库
@@ -80,8 +78,6 @@ git config --global user.email "SOME_EMAIL@example.com"
 git config user.email "SOME_EMAIL@example.com"
 ```
----
 ## 代码变更和构建
 当你在 fork 的仓库中设置完本地开发环境后，我们就可以开始开发了。
@@ -122,8 +118,6 @@ pnpm run prepare
 pnpm run reset
 ```
----
 ## 测试
 ### 添加新测试
@@ -163,8 +157,6 @@ pnpm run test:e2e
 npx jest copy-assets
 ```
----
 ## Linting
 为了帮助保持代码风格的一致性和可读性，我们使用 ESLint 对代码进行校验。
@@ -175,8 +167,6 @@ npx jest copy-assets
 pnpm run lint
 ```
----
 ## Benchmarking
 你可以在 PR 的评论区中输入 `!bench-framework` 或 `!bench-module` 分别对 `@modern-js/app-tools` 和 `@modern-js/module-tools` 做性能测试（这需要你具有 Collaborator 及以上的权限）。
@@ -185,8 +175,6 @@ pnpm run lint
 依赖安装相关指标由于需要前置的发包流程，因此数据相对有滞后性，仅供参考。
----
 ## 文档
 目前 Modern.js 提供英文和中文文档。如果你熟悉中文，请同时更新中英文文档。否则，只需更新英文文档即可。
@@ -206,8 +194,6 @@ root
 Rspress 的源代码可以在 [这个仓库](https://github.com/web-infra-dev/rspress) 中找到。
----
 ## 提交变更
 ### 添加 Changeset
@@ -238,8 +224,6 @@ feat(plugin-swc): 添加 `xxx` 配置项
 |____________ 类型
 ```
----
 ## 发布
 Modern.js 使用 [Changesets](https://github.com/changesets/changesets) 来管理版本和 changelog。

package/docs/zh/configure/app/dev/client.mdx ADDED Viewed

@@ -0,0 +1,42 @@
+---
+sidebar_label: client
+---
+# dev.client
+配置 Modern.js 在开发过程中注入的 client 代码，可以用于设置热更新对应的 WebSocket URL。
+- **类型：**
+```ts
+type Client = {
+  /** 指定 WebSocket 请求的协议名称 */
+  protocol?: 'ws' | 'wss';
+  /** 指定 WebSocket 请求的路径 */
+  path?: string;
+  /** 指定 WebSocket 请求的端口号 */
+  port?: string;
+  /** 指定 WebSocket 请求的 host */
+  host?: string;
+  /**
+   * 当出现编译错误时，在浏览器中显示遮盖
+   * 该功能需要当前浏览器版本支持 [Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)
+   */
+  overlay?: boolean;
+};
+```
+- **默认值：**
+```js
+const defaultConfig = {
+  path: '/webpack-hmr',
+  // 默认为开发服务器的端口号
+  port: '',
+  host: location.hostname,
+  protocol: location.protocol === 'https:' ? 'wss' : 'ws',
+  overlay: true,
+};
+```
+详细用法可参考 [Rsbuild - dev.client](https://rsbuild.dev/zh/config/dev/client)。

package/docs/zh/guides/get-started/tech-stack.mdx CHANGED Viewed

@@ -8,56 +8,42 @@ Modern.js 框架默认集成了一些社区中流行的库和开发工具。
 在这篇文档中，你可以了解到 Modern.js 框架涉及的主要技术栈，以及一些可选的库和工具。
----
 ## UI 库
 Modern.js 使用 [React 18](https://react.dev/) 来构建用户界面，同时也兼容 React 17。
 Modern.js 底层的 Rsbuild 支持构建 Vue 应用，如果你需要使用 Vue，可以参考[「Rsbuild - Vue」](https://rsbuild.dev/zh/guide/framework/vue3)。
----
 ## 路由
 Modern.js 的路由基于 [React Router 6](https://reactrouter.com/en/main)，同时也兼容 React Router 5。
 Modern.js 支持约定式路由、自控式路由或其他路由方案，请参考[「路由方案」](/guides/basic-features/routes) 进行选择。
----
 ## 微前端
 Modern.js 提供对 [Garfish](https://www.garfishjs.org/) 微前端框架开箱即用的支持。
 同时，我们也正在与 [Module Federation](https://webpack.js.org/concepts/module-federation/) 的作者 Zack Jackson 合作，以提供更完整的解决方案。
----
 ## 状态管理
 Modern.js 可以与社区中任意的状态管理库搭配使用，比如 [Redux](https://redux.js.org/)、[Jotai](https://jotai.org/)、[Zustand](https://docs.pmnd.rs/zustand)、[Valtio](https://valtio.pmnd.rs/) 等。
 Modern.js 也基于 Redux 封装了 Reduck 状态管理库，你可以参考 [「Reduck 状态管理」](/guides/topic-detail/model/quick-start)来使用。
----
 ## 包管理器
 Modern.js 可以与社区中任意的包管理器搭配使用，比如 [npm](https://www.npmjs.com/package/npm)、[yarn](https://classic.yarnpkg.com/lang/en/)、[pnpm](https://pnpm.io/) 或 [Bun](https://bun.sh/)。
 我们推荐使用 pnpm 来获得更快的安装速度。
----
 ## 打包工具
 Modern.js 使用 [Webpack 5](https://webpack.js.org/) 或 [Rspack](https://www.rspack.dev/) 来打包你的 Web 应用。
 默认使用的打包工具为 Webpack 5，你可以参考[「使用 Rspack」](/guides/advanced-features/rspack-start) 来切换到更快的 Rspack。
----
 ## 转译工具
 Modern.js 使用 [Babel](https://babeljs.io/)、[SWC](https://swc.rs/) 或 [esbuild](https://esbuild.github.io/) 作为 JS 转译工具，将 TypeScript 或 JSX 转义为可以在浏览器上运行的 JavaScript 代码，并进行语法降级。
@@ -65,8 +51,6 @@ Modern.js 使用 [Babel](https://babeljs.io/)、[SWC](https://swc.rs/) 或 [esbu
 - 使用 Webpack 打包时，默认为 Babel，支持切换到 SWC 或 esbuild。
 - 使用 Rspack 打包时，默认为 SWC，支持切换到 Babel。
----
 ## 压缩工具
 在生产环境构建时，Modern.js 使用 [Terser](https://github.com/terser/terser)、[SWC](https://swc.rs/) 或 [esbuild](https://esbuild.github.io/) 来压缩 JavaScript 代码，使用 [cssnano](https://cssnano.co/) 来压缩 CSS 代码。
@@ -74,16 +58,12 @@ Modern.js 使用 [Babel](https://babeljs.io/)、[SWC](https://swc.rs/) 或 [esbu
 - 使用 Webpack 打包时，默认使用 Terser 压缩 JS 代码，支持切换到 SWC 或 esbuild。
 - 使用 Rspack 打包时，默认使用 SWC 压缩 JS 代码，暂不支持切换到其他工具。
----
 ## CSS 转换
 Modern.js 使用 [PostCSS](https://postcss.org/) 来转换 CSS 代码，并默认开启 [autoprefixer](https://github.com/postcss/autoprefixer) 来补全 CSS 前缀。
 Modern.js 支持[「启用 Tailwind CSS」](/guides/basic-features/css.html#使用-tailwind-css)，并同时兼容 Tailwind CSS v2 和 v3 版本。
----
 ## CSS 预处理器
 Modern.js 支持 [Sass](https://sass-lang.com/)、[Less](https://lesscss.org/) 和 [Stylus](https://stylus-lang.com/) 三种 CSS 预处理器：
@@ -91,46 +71,34 @@ Modern.js 支持 [Sass](https://sass-lang.com/)、[Less](https://lesscss.org/)
 - 默认支持 Sass 和 Less，开箱即用。
 - 可选支持 Stylus，请参考[「Stylus 插件」](https://rsbuild.dev/zh/plugins/list/plugin-stylus) 来使用。
----
 ## CSS Modules
 Modern.js 对 [CSS Modules](https://github.com/css-modules/css-modules) 提供了开箱即用的支持，内部基于 [css-loader](https://www.npmjs.com/package/css-loader) 实现。
 请参考[「使用 CSS Modules」](/guides/basic-features/css-modules) 来使用。
----
 ## CSS-in-JS
 Modern.js 支持使用 [styled-components](https://styled-components.com/)，请参考[「使用 CSS-in-JS」](/guides/basic-features/css.html#使用-css-in-js) 来使用。
 如果你需要使用其他 CSS-in-JS 方案，可以自行集成到你的项目中。
----
 ## 测试框架
 Modern.js 支持使用 [Jest](https://jestjs.io/) 进行单元测试或集成测试。该功能为可选功能，请参考[「使用 Jest 测试」](/guides/advanced-features/testing) 启用。
 如果你需要使用 [Vitest](https://vitest.dev/) 或其他测试框架，可以自行集成到你的项目中。
----
 ## 组件库
 Modern.js 可以与社区中任意的 React 组件库搭配使用，比如 [MUI](https://mui.com/)、[Ant Design](https://ant.design/)、[Arco Design](https://github.com/arco-design/arco-design)、[Semi Design](https://semi.design/)、[Radix UI](https://www.radix-ui.com/) 等。
 同时，Modern.js 内置了对 Ant Design 和 Arco Design 的 [按需引入](/configure/app/source/transform-import) 支持。
----
 ## 组件开发
 Modern.js 支持使用 [Storybook](https://storybook.js.org/) 来开发 UI 组件。该功能为可选功能，请参考[「使用 Storybook」](/guides/advanced-features/using-storybook) 启用。
----
 ## Node.js 框架
 import TechStackNodeFramework from '@site-docs/components/tech-stack-node-framework';

package/package.json CHANGED Viewed

@@ -15,17 +15,17 @@
     "modern",
     "modern.js"
   ],
-  "version": "2.49.0",
+  "version": "2.49.2",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public",
     "provenance": true
   },
   "dependencies": {
-    "@modern-js/sandpack-react": "2.49.0"
+    "@modern-js/sandpack-react": "2.49.2"
   },
   "peerDependencies": {
-    "@modern-js/builder-doc": "^2.49.0"
+    "@modern-js/builder-doc": "^2.49.2"
   },
   "devDependencies": {
     "classnames": "^2",
@@ -35,12 +35,12 @@
     "ts-node": "^10.9.1",
     "typescript": "^5",
     "fs-extra": "^10",
-    "rspress": "1.16.0",
-    "@rspress/shared": "1.16.0",
+    "rspress": "1.18.2",
+    "@rspress/shared": "1.18.2",
     "@types/node": "^16",
     "@types/fs-extra": "9.0.13",
-    "@modern-js/builder-doc": "2.49.0",
-    "@modern-js/doc-plugin-auto-sidebar": "2.49.0"
+    "@modern-js/doc-plugin-auto-sidebar": "2.49.2",
+    "@modern-js/builder-doc": "2.49.2"
   },
   "scripts": {
     "dev": "rspress dev",