@modern-js/module-tools-docs 2.39.0 → 2.39.1

package/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @modern-js/module-tools-docs
 
+## 2.39.1
+
 ## 2.39.0
 
 ## 2.38.0

package/docs/en/plugins/official-list/overview.md

@@ -7,3 +7,4 @@
 * [@modern-js/plugin-module-node-polyfill](./plugin-node-polyfill.mdx)： Inject Polyfills of Node core modules in the browser side.
 * [@modern-js/plugin-module-polyfill](./plugin-polyfill.md)：Inject polyfill for unsupported features used in your code.
 * [@modern-js/plugin-module-babel](./plugin-babel.md)：Use Babel to transform your code.
+* [@modern-js/plugin-module-vue](./plugin-vue.md)：Support for Vue component.

package/docs/en/plugins/official-list/plugin-vue.mdx

@@ -0,0 +1,55 @@
+# Vue Plugin
+
+The Vue plugin provides support for building Vue 3 components. The plugin internally integrates [esbuild-plugin-vue3](https://github.com/pipe01/esbuild-plugin-vue3) and [@vue/babel-plugin-jsx](https://github.com/vuejs/babel-plugin-jsx)。
+
+:::warning
+The current implementation of this plugin integrates directly with the community plugin and therefore does not support writing jsx/tsx in sfc.
+:::
+
+## Quick start
+
+### Install
+
+import { PackageManagerTabs } from '@theme';
+
+<PackageManagerTabs command="add @modern-js/plugin-module-vue -D" />
+
+### Register
+
+In Modern.js Module, you can register plugins in the following way:
+
+```ts
+import { moduleTools, defineConfig } from '@modern-js/module-tools';
+import { modulePluginVue } from '@modern-js/plugin-module-vue';
+
+export default defineConfig({
+  plugins: [moduleTools(), modulePluginVue()],
+});
+```
+
+## Options
+
+### vueJsxPluginOptions
+
+- **Type:**
+
+```ts
+type VueJSXPluginOptions = {
+  /** transform `on: { click: xx }` to `onClick: xxx` */
+  transformOn?: boolean;
+  /** enable optimization or not. */
+  optimize?: boolean;
+  /** merge static and dynamic class / style attributes / onXXX handlers */
+  mergeProps?: boolean;
+  /** configuring custom elements */
+  isCustomElement?: (tag: string) => boolean;
+  /** enable object slots syntax */
+  enableObjectSlots?: boolean;
+  /** Replace the function used when compiling JSX expressions */
+  pragma?: string;
+};
+```
+
+- **Default:** `{}`
+
+Options passed to `@vue/babel-plugin-jsx`, please refer to the [@vue/babel-plugin-jsx documentation](https://github.com/vuejs/babel-plugin-jsx) for detailed usage.

package/docs/zh/plugins/official-list/overview.md

@@ -2,8 +2,9 @@
 
 ## 官方插件
 
-* [@modern-js/plugin-module-import](./plugin-import.md)：使用 SWC 提供与 `babel-plugin-import` 一样的能力。
-* [@modern-js/plugin-module-banner](./plugin-banner.md)：为每个 JS 和 CSS 文件的顶部和底部添加自定义内容，例如版权信息。
-* [@modern-js/plugin-module-node-polyfill](./plugin-node-polyfill.mdx)：会自动注入 Node 核心模块在浏览器端的 polyfills。
-* [@modern-js/plugin-module-polyfill](./plugin-polyfill.md)：为你的代码中使用到的不支持的功能注入 polyfill。
-* [@modern-js/plugin-module-babel](./plugin-babel.md)：使用 Babel 转换你的代码。
+- [@modern-js/plugin-module-import](./plugin-import.md)：使用 SWC 提供与 `babel-plugin-import` 一样的能力。
+- [@modern-js/plugin-module-banner](./plugin-banner.md)：为每个 JS 和 CSS 文件的顶部和底部添加自定义内容，例如版权信息。
+- [@modern-js/plugin-module-node-polyfill](./plugin-node-polyfill.mdx)：会自动注入 Node 核心模块在浏览器端的 polyfills。
+- [@modern-js/plugin-module-polyfill](./plugin-polyfill.md)：为你的代码中使用到的不支持的功能注入 polyfill。
+- [@modern-js/plugin-module-babel](./plugin-babel.md)：使用 Babel 转换你的代码。
+- [@modern-js/plugin-module-vue](./plugin-vue.md)：提供对 Vue 3 组件构建的支持。

package/docs/zh/plugins/official-list/plugin-vue.mdx

@@ -0,0 +1,55 @@
+# Vue 插件
+
+Vue 插件提供了对 Vue 3 组件构建的支持，插件内部集成了 [esbuild-plugin-vue3](https://github.com/pipe01/esbuild-plugin-vue3) 和 [@vue/babel-plugin-jsx](https://github.com/vuejs/babel-plugin-jsx)。
+
+:::warning
+目前此插件的实现是直接集成社区插件，因此不支持在 sfc 里写 jsx/tsx.
+:::
+
+## 快速开始
+
+### 安装
+
+import { PackageManagerTabs } from '@theme';
+
+<PackageManagerTabs command="add @modern-js/plugin-module-vue -D" />
+
+### 注册插件
+
+在 Modern.js Module 中，你可以按照如下方式注册插件：
+
+```ts
+import { moduleTools, defineConfig } from '@modern-js/module-tools';
+import { modulePluginVue } from '@modern-js/plugin-module-vue';
+
+export default defineConfig({
+  plugins: [moduleTools(), modulePluginVue()],
+});
+```
+
+## 配置
+
+### vueJsxPluginOptions
+
+- **Type:**
+
+```ts
+type VueJSXPluginOptions = {
+  /** transform `on: { click: xx }` to `onClick: xxx` */
+  transformOn?: boolean;
+  /** enable optimization or not. */
+  optimize?: boolean;
+  /** merge static and dynamic class / style attributes / onXXX handlers */
+  mergeProps?: boolean;
+  /** configuring custom elements */
+  isCustomElement?: (tag: string) => boolean;
+  /** enable object slots syntax */
+  enableObjectSlots?: boolean;
+  /** Replace the function used when compiling JSX expressions */
+  pragma?: string;
+};
+```
+
+- **Default:** `{}`
+
+传递给 `@vue/babel-plugin-jsx` 的选项，请查阅 [@vue/babel-plugin-jsx](<(https://github.com/vuejs/babel-plugin-jsx)>) 文档 来了解具体用法。

package/package.json

@@ -9,14 +9,14 @@
     "directory": "packages/document/module-doc"
   },
   "license": "MIT",
-  "version": "2.39.0",
+  "version": "2.39.1",
   "main": "index.js",
   "devDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "rspress": "1.2.1",
-    "@rspress/shared": "1.2.1",
-    "@modern-js/doc-plugin-auto-sidebar": "2.39.0"
+    "rspress": "1.3.2",
+    "@rspress/shared": "1.3.2",
+    "@modern-js/doc-plugin-auto-sidebar": "2.39.1"
   },
   "scripts": {
     "dev": "rspress dev",