feat(module-tools): init plugin vue (#4879)

packages/document/module-doc/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.

packages/document/module-doc/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.

packages/document/module-doc/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 组件构建的支持。

packages/document/module-doc/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)>) 文档 来了解具体用法。

packages/module/plugin-module-vue/.eslintrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+  root: true,
+  extends: ['@modern-js'],
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: ['./tsconfig.json'],
+  },
+};

packages/module/plugin-module-vue/.npmignore

@@ -0,0 +1,31 @@
+.DS_Store
+
+.pnp
+.pnp.js
+.env.local
+.env.*.local
+*.log*
+
+node_modules/
+*.tsbuildinfo
+.eslintcache
+
+coverage/
+output/
+output_resource/
+tests/
+
+.vscode/**/*
+!.vscode/settings.json
+!.vscode/extensions.json
+.idea/
+
+src/
+
+modern.config.*
+jest.config.js
+.eslintrc.js
+.eslintrc
+tsconfig.json
+CHANGELOG.md
+

packages/module/plugin-module-vue/CHANGELOG.md

@@ -0,0 +1 @@
+# @modern-js/plugin-module-vue

packages/module/plugin-module-vue/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021-present Modern.js
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/module/plugin-module-vue/README.md

@@ -0,0 +1,7 @@
+# @modern-js/plugin-module-vue
+
+The Vue plugin of Modern.js Module.
+
+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).
+
+See <http://modernjs.dev/module-tools/plugins/official-list/plugin-vue.html> for details.

packages/module/plugin-module-vue/modern.config.js

@@ -0,0 +1,5 @@
+const { tscLikeBuildConfig } = require('@scripts/build');
+
+module.exports = {
+  buildConfig: tscLikeBuildConfig,
+};

packages/module/plugin-module-vue/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@modern-js/plugin-module-vue",
+  "version": "2.39.0",
+  "description": "The vue plugin of Modern.js Module",
+  "keywords": [
+    "react",
+    "framework",
+    "modern",
+    "modern.js"
+  ],
+  "homepage": "https://modernjs.dev/module-tools",
+  "bugs": "https://github.com/web-infra-dev/modern.js/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/web-infra-dev/modern.js",
+    "directory": "packages/module/plugin-module-vue"
+  },
+  "license": "MIT",
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "types": "./src/index.ts",
+  "scripts": {
+    "build": "mdn build",
+    "dev": "mdn build --watch",
+    "prepublishOnly": "only-allow-pnpm"
+  },
+  "dependencies": {
+    "@babel/core": "^7.22.5",
+    "@babel/plugin-syntax-typescript": "7.22.5",
+    "@modern-js/plugin-module-babel": "workspace:*",
+    "@swc/helpers": "0.5.1",
+    "@vue/babel-plugin-jsx": "1.1.5",
+    "esbuild-plugin-vue3": "0.3.2"
+  },
+  "devDependencies": {
+    "@modern-js/module-tools": "workspace:*",
+    "@scripts/build": "workspace:*",
+    "@types/babel__core": "7.1.16",
+    "@types/node": "^14",
+    "jest": "^29",
+    "typescript": "^5"
+  },
+  "peerDependencies": {
+    "@modern-js/module-tools": "workspace:^2.39.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true,
+    "registry": "https://registry.npmjs.org/",
+    "types": "./dist/index.d.ts"
+  }
+}

packages/module/plugin-module-vue/src/index.ts

@@ -0,0 +1,35 @@
+import type { CliPlugin, ModuleTools } from '@modern-js/module-tools';
+import vuePlugin from 'esbuild-plugin-vue3';
+import { modulePluginBabel } from '@modern-js/plugin-module-babel';
+import type { VueJSXPluginOptions } from '@vue/babel-plugin-jsx';
+
+export const modulePluginVue = (options?: {
+  vueJsxPluginOptions?: VueJSXPluginOptions;
+}): CliPlugin<ModuleTools> => ({
+  name: 'vue-plugin',
+  usePlugins: [
+    modulePluginBabel({
+      plugins: [
+        [require('@babel/plugin-syntax-typescript'), { isTSX: true }],
+        [
+          require('@vue/babel-plugin-jsx'),
+          {
+            ...options?.vueJsxPluginOptions,
+          },
+        ],
+      ],
+    }),
+  ],
+  setup: () => ({
+    beforeBuildTask(config) {
+      const lastEsbuildOptions = config.esbuildOptions;
+      config.esbuildOptions = c => {
+        const lastEsbuildConfig = lastEsbuildOptions(c);
+        lastEsbuildConfig.plugins?.unshift(vuePlugin() as any);
+        return lastEsbuildConfig;
+      };
+      config.jsx = 'preserve';
+      return config;
+    },
+  }),
+});

packages/module/plugin-module-vue/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "@modern-js/tsconfig/base",
+  "compilerOptions": {
+    "declaration": false,
+    "jsx": "preserve",
+    "baseUrl": "./",
+    "isolatedModules": true,
+    "paths": {}
+  },
+  "include": ["src"]
+}