@esmx/rspack-vue 3.0.0-rc.10

package/README.md

@@ -0,0 +1,29 @@
+# @esmx/rspack-vue
+
+为 Vue 框架提供专业的构建支持，包含完整的 Vue 组件开发、构建与服务端渲染能力。
+
+## 特性
+
+- 🚀 **高性能构建** - 基于 Rspack 的高性能构建，为 Vue 应用提供极致开发体验
+- 💡 **框架集成** - 完整支持 Vue 2/3，内置 vue-loader 及相关优化配置
+- 🎨 **组件支持** - 智能处理 .vue 单文件组件，支持模板、样式和脚本
+- 🛠️ **SSR 支持** - 内置服务端渲染支持，轻松构建同构应用
+- 🔧 **开发体验** - 支持热更新、智能提示和 TypeScript
+
+## 安装
+
+```bash
+pnpm add @esmx/rspack-vue -D
+# 或
+yarn add @esmx/rspack-vue -D
+# 或
+npm install @esmx/rspack-vue -D
+```
+
+## 文档
+
+访问 [@esmx/rspack-vue 官方文档](https://www.esmnext.com/api/app/rspack-vue.html) 获取详细的使用指南和 API 文档。
+
+## 许可证
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from '@esmx/rspack';
+export * from './vue';

package/dist/index.mjs

@@ -0,0 +1,2 @@
+export * from "@esmx/rspack";
+export * from "./vue.mjs";

package/dist/vue-core.d.ts

@@ -0,0 +1,5 @@
+import type { Esmx } from '@esmx/core';
+import type { RspackVueAppOptions } from './vue';
+type VueType = '2' | '3';
+export declare function createRspackVueApp(esmx: Esmx, vueType: VueType, options?: RspackVueAppOptions): Promise<import("@esmx/core").App>;
+export {};

package/dist/vue-core.mjs

@@ -0,0 +1,91 @@
+import { createRspackHtmlApp, rspack } from "@esmx/rspack";
+import { VueLoaderPlugin as VueLoader2Plugin } from "vue2-loader";
+import { VueLoaderPlugin as VueLoader3Plugin } from "vue3-loader";
+import { vue2Loader } from "./vue2-loader.mjs";
+import { vue3Loader } from "./vue3-loader.mjs";
+export function createRspackVueApp(esmx, vueType, options) {
+  return createRspackHtmlApp(esmx, {
+    ...options,
+    loaders: {
+      styleLoader: new URL(import.meta.resolve("vue-style-loader")).pathname,
+      ...options?.loaders
+    },
+    config(context) {
+      const { config, buildTarget } = context;
+      config.resolve = {
+        ...config.resolve,
+        extensions: [...config.resolve?.extensions ?? [], ".vue"]
+      };
+      config.plugins = config.plugins || [];
+      switch (vueType) {
+        case "2":
+          config.plugins.push(new VueLoader2Plugin());
+          break;
+        case "3":
+          config.plugins.push(new VueLoader3Plugin());
+          break;
+      }
+      if (buildTarget === "client") {
+        config.plugins.push(
+          new rspack.DefinePlugin({
+            "process.env.VUE_ENV": JSON.stringify(buildTarget)
+          })
+        );
+      }
+      const vueRuleUse = [
+        {
+          loader: new URL(import.meta.resolve(`vue${vueType}-loader`)).pathname,
+          options: {
+            ...options?.vueLoader,
+            experimentalInlineMatchResource: true,
+            optimizeSSR: buildTarget === "server"
+          }
+        }
+      ];
+      switch (vueType) {
+        case "2":
+          vueRuleUse.unshift(vue2Loader);
+          break;
+        case "3":
+          vueRuleUse.unshift(vue3Loader);
+          break;
+      }
+      config.module = {
+        ...config.module,
+        rules: [
+          ...config.module?.rules ?? [],
+          {
+            test: /\.vue$/,
+            use: vueRuleUse
+          }
+        ]
+      };
+      let vueAlias = null;
+      switch (vueType) {
+        case "2":
+          vueAlias = "vue/dist/vue.esm.js";
+          break;
+        case "3":
+          vueAlias = "vue/dist/vue.runtime.esm-browser.js";
+          break;
+      }
+      if (vueAlias) {
+        config.resolve.alias = {
+          ...config.resolve.alias,
+          vue$: vueAlias
+        };
+      }
+      if (vueType === "2") {
+        config.ignoreWarnings = [
+          ...config.ignoreWarnings ?? [],
+          (warning) => {
+            return warning.moduleDescriptor.name.includes(
+              "vue-server-renderer"
+            );
+          }
+        ];
+      }
+      options?.config?.(context);
+    }
+  });
+}

package/dist/vue.d.ts

@@ -0,0 +1,61 @@
+import type { Esmx } from '@esmx/core';
+import type { RspackHtmlAppOptions } from '@esmx/rspack';
+export interface RspackVueAppOptions extends RspackHtmlAppOptions {
+    /**
+     * vue-loader 配置项
+     *
+     * 用于配置 Vue 单文件组件的编译选项，完整选项参考:
+     * https://github.com/vuejs/vue-loader
+     */
+    vueLoader?: Record<string, any>;
+}
+/**
+ * 创建 Vue 2 应用构建器
+ *
+ * @param esmx - Esmx 实例
+ * @param options - Rspack Vue 应用配置项
+ * @returns 返回一个 Promise，解析为构建好的应用实例
+ *
+ * @example
+ * ```ts
+ * import type { EsmxOptions } from '@esmx/core';
+ *
+ * export default {
+ *   async devApp(esmx) {
+ *     return import('@esmx/rspack-vue').then((m) =>
+ *       m.createRspackVue2App(esmx, {
+ *         config({ config }) {
+ *           // 自定义 Rspack 配置
+ *         }
+ *       })
+ *     );
+ *   }
+ * } satisfies EsmxOptions;
+ * ```
+ */
+export declare function createRspackVue2App(esmx: Esmx, options?: RspackVueAppOptions): Promise<import("@esmx/core").App>;
+/**
+ * 创建 Vue 3 应用构建器
+ *
+ * @param esmx - Esmx 实例
+ * @param options - Rspack Vue 应用配置项
+ * @returns 返回一个 Promise，解析为构建好的应用实例
+ *
+ * @example
+ * ```ts
+ * import type { EsmxOptions } from '@esmx/core';
+ *
+ * export default {
+ *   async devApp(esmx) {
+ *     return import('@esmx/rspack-vue').then((m) =>
+ *       m.createRspackVue3App(esmx, {
+ *         config({ config }) {
+ *           // 自定义 Rspack 配置
+ *         }
+ *       })
+ *     );
+ *   }
+ * } satisfies EsmxOptions;
+ * ```
+ */
+export declare function createRspackVue3App(esmx: Esmx, options?: RspackVueAppOptions): Promise<import("@esmx/core").App>;

package/dist/vue.mjs

@@ -0,0 +1,7 @@
+import { createRspackVueApp } from "./vue-core.mjs";
+export function createRspackVue2App(esmx, options) {
+  return createRspackVueApp(esmx, "2", options);
+}
+export function createRspackVue3App(esmx, options) {
+  return createRspackVueApp(esmx, "3", options);
+}

package/dist/vue2-loader.d.ts

@@ -0,0 +1,3 @@
+import type { rspack } from '@esmx/rspack';
+export default function (this: rspack.LoaderContext, text: string): string;
+export declare const vue2Loader: string;

package/dist/vue2-loader.mjs

@@ -0,0 +1,22 @@
+const FIX_ESM = `api.install(require('vue').default)`;
+const ADD_IMPORT = `
+function initImport () {
+    const mixins = Array.isArray(component.options.mixins) ? component.options.mixins : [];
+    mixins.push({
+        serverPrefetch () {
+            this.$ssrContext?.importMetaSet?.add(import.meta);
+        }
+    });
+    component.options.mixins = mixins;
+}
+initImport();
+export default component.exports
+`;
+export default function(text) {
+  text = text.replaceAll(`api.install(require('vue'))`, FIX_ESM);
+  if (typeof this.target === "string" && this.target.includes("node")) {
+    text = text.replaceAll("export default component.exports", ADD_IMPORT);
+  }
+  return text;
+}
+export const vue2Loader = new URL(import.meta.resolve(import.meta.url)).pathname;

package/dist/vue3-loader.d.ts

@@ -0,0 +1,3 @@
+import type { rspack } from '@esmx/rspack';
+export default function (this: rspack.LoaderContext, text: string): string;
+export declare const vue3Loader: string;

package/dist/vue3-loader.mjs

@@ -0,0 +1,19 @@
+const ADD_IMPORT = `
+import { useSSRContext } from 'vue';
+function initImport () {
+
+    const mixins = Array.isArray(__exports__.mixins) ? __exports__.mixins : [];
+    mixins.push({
+        created () {
+            const ctx = useSSRContext();
+            ctx?.importMetaSet?.add(import.meta);
+        }
+    });
+    __exports__.mixins = mixins;
+}
+initImport();
+`;
+export default function(text) {
+  return text + ADD_IMPORT;
+}
+export const vue3Loader = new URL(import.meta.resolve(import.meta.url)).pathname;

package/package.json

@@ -0,0 +1,91 @@
+{
+    "name": "@esmx/rspack-vue",
+    "description": "A high-performance Vue integration for Esmx microfrontend framework, providing Vue 2/3 support with SSR and Module Federation capabilities.",
+    "author": {
+        "name": "lzxb",
+        "url": "https://github.com/lzxb"
+    },
+    "contributors": [
+        {
+            "name": "RockShi1994",
+            "url": "https://github.com/RockShi1994"
+        },
+        {
+            "name": "jerrychan7",
+            "url": "https://github.com/jerrychan7"
+        }
+    ],
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/js-esm/esmx.git",
+        "directory": "packages/rspack-vue"
+    },
+    "homepage": "https://github.com/js-esm/esmx",
+    "bugs": {
+        "url": "https://github.com/js-esm/esmx/issues"
+    },
+    "template": "library-node",
+    "license": "MIT",
+    "keywords": [
+        "Vue",
+        "Vue 2",
+        "Vue 3",
+        "Rspack",
+        "SSR",
+        "Module Federation",
+        "High Performance",
+        "Build Tool",
+        "Development Experience",
+        "Hot Module Replacement",
+        "TypeScript"
+    ],
+    "scripts": {
+        "lint:js": "biome check --write --no-errors-on-unmatched",
+        "lint:css": "stylelint '**/*.{css,vue}' --fix --aei",
+        "lint:type": "tsc --noEmit",
+        "test": "vitest run --pass-with-no-tests",
+        "coverage": "vitest run --coverage --pass-with-no-tests",
+        "build": "unbuild"
+    },
+    "peerDependencies": {
+        "@esmx/core": "*",
+        "vue": ">=2.7.8 || >=3.0.0"
+    },
+    "dependencies": {
+        "@esmx/rspack": "3.0.0-rc.10",
+        "vue-style-loader": "^4.1.3",
+        "vue2-loader": "npm:vue-loader@15.11.1",
+        "vue3-loader": "npm:vue-loader@^17.4.2"
+    },
+    "devDependencies": {
+        "@biomejs/biome": "1.9.4",
+        "@esmx/core": "3.0.0-rc.10",
+        "@esmx/lint": "3.0.0-rc.10",
+        "@types/node": "22.13.10",
+        "@vitest/coverage-v8": "3.0.8",
+        "stylelint": "16.15.0",
+        "typescript": "5.8.2",
+        "unbuild": "2.0.0",
+        "vitest": "3.0.8"
+    },
+    "version": "3.0.0-rc.10",
+    "type": "module",
+    "private": false,
+    "exports": {
+        ".": {
+            "import": "./dist/index.mjs",
+            "types": "./dist/index.d.ts"
+        }
+    },
+    "module": "dist/index.mjs",
+    "types": "./dist/index.d.ts",
+    "files": [
+        "lib",
+        "src",
+        "dist",
+        "*.mjs",
+        "template",
+        "public"
+    ],
+    "gitHead": "4a528ffecfdc6f2c6e7d97bc952427745f467691"
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from '@esmx/rspack';
+export * from './vue';

package/src/vue-core.ts

@@ -0,0 +1,110 @@
+import type { Esmx } from '@esmx/core';
+import { createRspackHtmlApp, rspack } from '@esmx/rspack';
+import { VueLoaderPlugin as VueLoader2Plugin } from 'vue2-loader';
+import { VueLoaderPlugin as VueLoader3Plugin } from 'vue3-loader';
+import type { RspackVueAppOptions } from './vue';
+import { vue2Loader } from './vue2-loader';
+import { vue3Loader } from './vue3-loader';
+
+type VueType = '2' | '3';
+
+export function createRspackVueApp(
+    esmx: Esmx,
+    vueType: VueType,
+    options?: RspackVueAppOptions
+) {
+    return createRspackHtmlApp(esmx, {
+        ...options,
+        loaders: {
+            styleLoader: new URL(import.meta.resolve('vue-style-loader'))
+                .pathname,
+            ...options?.loaders
+        },
+        config(context) {
+            const { config, buildTarget } = context;
+            // 支持 Vue 拓展名
+            config.resolve = {
+                ...config.resolve,
+                extensions: [...(config.resolve?.extensions ?? []), '.vue']
+            };
+            config.plugins = config.plugins || [];
+            switch (vueType) {
+                case '2':
+                    // @ts-ignore
+                    config.plugins.push(new VueLoader2Plugin());
+                    break;
+                case '3':
+                    config.plugins.push(new VueLoader3Plugin());
+                    break;
+            }
+            // 设置 Vue 相关的环境变量
+            if (buildTarget === 'client') {
+                config.plugins.push(
+                    new rspack.DefinePlugin({
+                        'process.env.VUE_ENV': JSON.stringify(buildTarget)
+                    })
+                );
+            }
+            // 设置 vue-loader
+            const vueRuleUse: rspack.RuleSetUse = [
+                {
+                    loader: new URL(import.meta.resolve(`vue${vueType}-loader`))
+                        .pathname,
+                    options: {
+                        ...options?.vueLoader,
+                        experimentalInlineMatchResource: true,
+                        optimizeSSR: buildTarget === 'server'
+                    }
+                }
+            ];
+            switch (vueType) {
+                case '2':
+                    vueRuleUse.unshift(vue2Loader);
+                    break;
+                case '3':
+                    vueRuleUse.unshift(vue3Loader);
+                    break;
+            }
+            config.module = {
+                ...config.module,
+                rules: [
+                    ...(config.module?.rules ?? []),
+                    {
+                        test: /\.vue$/,
+                        use: vueRuleUse
+                    }
+                ]
+            };
+            // 设置 vue 别名
+            let vueAlias: string | null = null;
+            switch (vueType) {
+                case '2':
+                    vueAlias = 'vue/dist/vue.esm.js';
+                    break;
+                case '3':
+                    vueAlias = 'vue/dist/vue.runtime.esm-browser.js';
+                    break;
+            }
+            if (vueAlias) {
+                config.resolve!.alias = {
+                    ...config.resolve!.alias!,
+                    vue$: vueAlias
+                };
+            }
+            // 设置 vue 相关忽略信息。
+            if (vueType === '2') {
+                config.ignoreWarnings = [
+                    ...(config.ignoreWarnings ?? []),
+                    (warning) => {
+                        // @ts-ignore
+                        return warning.moduleDescriptor.name.includes(
+                            'vue-server-renderer'
+                        );
+                    }
+                ];
+            }
+            // 设置自定义配置
+            options?.config?.(context);
+        }
+    });
+}

package/src/vue.ts

@@ -0,0 +1,69 @@
+import type { Esmx } from '@esmx/core';
+import type { RspackHtmlAppOptions } from '@esmx/rspack';
+import { createRspackVueApp } from './vue-core';
+
+export interface RspackVueAppOptions extends RspackHtmlAppOptions {
+    /**
+     * vue-loader 配置项
+     *
+     * 用于配置 Vue 单文件组件的编译选项，完整选项参考:
+     * https://github.com/vuejs/vue-loader
+     */
+    vueLoader?: Record<string, any>;
+}
+
+/**
+ * 创建 Vue 2 应用构建器
+ *
+ * @param esmx - Esmx 实例
+ * @param options - Rspack Vue 应用配置项
+ * @returns 返回一个 Promise，解析为构建好的应用实例
+ *
+ * @example
+ * ```ts
+ * import type { EsmxOptions } from '@esmx/core';
+ *
+ * export default {
+ *   async devApp(esmx) {
+ *     return import('@esmx/rspack-vue').then((m) =>
+ *       m.createRspackVue2App(esmx, {
+ *         config({ config }) {
+ *           // 自定义 Rspack 配置
+ *         }
+ *       })
+ *     );
+ *   }
+ * } satisfies EsmxOptions;
+ * ```
+ */
+export function createRspackVue2App(esmx: Esmx, options?: RspackVueAppOptions) {
+    return createRspackVueApp(esmx, '2', options);
+}
+
+/**
+ * 创建 Vue 3 应用构建器
+ *
+ * @param esmx - Esmx 实例
+ * @param options - Rspack Vue 应用配置项
+ * @returns 返回一个 Promise，解析为构建好的应用实例
+ *
+ * @example
+ * ```ts
+ * import type { EsmxOptions } from '@esmx/core';
+ *
+ * export default {
+ *   async devApp(esmx) {
+ *     return import('@esmx/rspack-vue').then((m) =>
+ *       m.createRspackVue3App(esmx, {
+ *         config({ config }) {
+ *           // 自定义 Rspack 配置
+ *         }
+ *       })
+ *     );
+ *   }
+ * } satisfies EsmxOptions;
+ * ```
+ */
+export function createRspackVue3App(esmx: Esmx, options?: RspackVueAppOptions) {
+    return createRspackVueApp(esmx, '3', options);
+}

package/src/vue2-loader.ts

@@ -0,0 +1,28 @@
+import type { rspack } from '@esmx/rspack';
+const FIX_ESM = `api.install(require('vue').default)`;
+const ADD_IMPORT = `
+function initImport () {
+    const mixins = Array.isArray(component.options.mixins) ? component.options.mixins : [];
+    mixins.push({
+        serverPrefetch () {
+            this.$ssrContext?.importMetaSet?.add(import.meta);
+        }
+    });
+    component.options.mixins = mixins;
+}
+initImport();
+export default component.exports
+`;
+
+export default function (this: rspack.LoaderContext, text: string) {
+    // 修复不支持热更新的 BUG
+    text = text.replaceAll(`api.install(require('vue'))`, FIX_ESM);
+    // 添加 CSS 依赖收集
+    if (typeof this.target === 'string' && this.target.includes('node')) {
+        text = text.replaceAll('export default component.exports', ADD_IMPORT);
+    }
+    return text;
+}
+
+export const vue2Loader = new URL(import.meta.resolve(import.meta.url))
+    .pathname;

package/src/vue3-loader.ts

@@ -0,0 +1,24 @@
+import type { rspack } from '@esmx/rspack';
+
+const ADD_IMPORT = `
+import { useSSRContext } from 'vue';
+function initImport () {
+
+    const mixins = Array.isArray(__exports__.mixins) ? __exports__.mixins : [];
+    mixins.push({
+        created () {
+            const ctx = useSSRContext();
+            ctx?.importMetaSet?.add(import.meta);
+        }
+    });
+    __exports__.mixins = mixins;
+}
+initImport();
+`;
+
+export default function (this: rspack.LoaderContext, text: string) {
+    return text + ADD_IMPORT;
+}
+
+export const vue3Loader = new URL(import.meta.resolve(import.meta.url))
+    .pathname;