@wsxjs/wsx-vite-plugin 0.0.5

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 WSX Framework Contributors
+
+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.

package/dist/index.d.mts

@@ -0,0 +1,39 @@
+import { Plugin } from 'vite';
+
+/**
+ * Vite Plugin for WSX (Web Component JSX)
+ *
+ * 专门处理.wsx文件：
+ * - 自动添加JSX pragma
+ * - 支持TypeScript编译
+ * - 完全隔离，不影响主项目React配置
+ */
+
+interface WSXPluginOptions {
+    /**
+     * JSX工厂函数名
+     * @default 'h'
+     */
+    jsxFactory?: string;
+    /**
+     * JSX Fragment函数名
+     * @default 'Fragment'
+     */
+    jsxFragment?: string;
+    /**
+     * 是否启用调试日志
+     * @default false
+     */
+    debug?: boolean;
+    /**
+     * 文件扩展名
+     * @default ['.wsx']
+     */
+    extensions?: string[];
+}
+/**
+ * WSX Vite插件
+ */
+declare function vitePluginWSX(options?: WSXPluginOptions): Plugin;
+
+export { vitePluginWSX as wsx };

package/dist/index.d.ts

@@ -0,0 +1,39 @@
+import { Plugin } from 'vite';
+
+/**
+ * Vite Plugin for WSX (Web Component JSX)
+ *
+ * 专门处理.wsx文件：
+ * - 自动添加JSX pragma
+ * - 支持TypeScript编译
+ * - 完全隔离，不影响主项目React配置
+ */
+
+interface WSXPluginOptions {
+    /**
+     * JSX工厂函数名
+     * @default 'h'
+     */
+    jsxFactory?: string;
+    /**
+     * JSX Fragment函数名
+     * @default 'Fragment'
+     */
+    jsxFragment?: string;
+    /**
+     * 是否启用调试日志
+     * @default false
+     */
+    debug?: boolean;
+    /**
+     * 文件扩展名
+     * @default ['.wsx']
+     */
+    extensions?: string[];
+}
+/**
+ * WSX Vite插件
+ */
+declare function vitePluginWSX(options?: WSXPluginOptions): Plugin;
+
+export { vitePluginWSX as wsx };

package/dist/index.js

@@ -0,0 +1,119 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  wsx: () => vite_plugin_wsx_default
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/vite-plugin-wsx.ts
+var import_esbuild = require("esbuild");
+function getJSXFactoryImportPath(_options) {
+  return "@wsxjs/wsx-core";
+}
+function vitePluginWSX(options = {}) {
+  const {
+    jsxFactory = "h",
+    jsxFragment = "Fragment",
+    debug = false,
+    extensions = [".wsx"]
+  } = options;
+  return {
+    name: "vite-plugin-wsx",
+    enforce: "pre",
+    // 确保在 React 插件之前执行
+    // 处理 .wsx 文件加载
+    load(id) {
+      const isWSXFile = extensions.some((ext) => id.endsWith(ext));
+      if (!isWSXFile) {
+        return null;
+      }
+      if (debug) {
+        console.log(`[WSX Plugin] Loading: ${id}`);
+      }
+      return null;
+    },
+    // 在transform阶段处理文件
+    async transform(code, id) {
+      const isWSXFile = extensions.some((ext) => id.endsWith(ext));
+      if (!isWSXFile) {
+        return null;
+      }
+      if (debug) {
+        console.log(`[WSX Plugin] Processing: ${id}`);
+      }
+      let transformedCode = code;
+      const hasWSXCoreImport = code.includes('from "@wsxjs/wsx-core"');
+      const hasJSXInImport = hasWSXCoreImport && (new RegExp(`[{,]\\s*${jsxFactory}\\s*[},]`).test(code) || new RegExp(`[{,]\\s*${jsxFragment}\\s*[},]`).test(code));
+      if (debug) {
+        console.log(`[WSX Plugin] Checking JSX imports for: ${id}`);
+        console.log(`  - hasWSXCoreImport: ${hasWSXCoreImport}`);
+        console.log(`  - hasJSXInImport: ${hasJSXInImport}`);
+        console.log(`  - has < character: ${code.includes("<")}`);
+        console.log(`  - has Fragment: ${code.includes("Fragment")}`);
+      }
+      if ((code.includes("<") || code.includes("Fragment")) && !hasJSXInImport) {
+        const importPath = getJSXFactoryImportPath(options);
+        const importStatement = `import { ${jsxFactory}, ${jsxFragment} } from "${importPath}";
+`;
+        transformedCode = importStatement + transformedCode;
+        if (debug) {
+          console.log(`[WSX Plugin] Added JSX factory import to: ${id}`);
+        }
+      }
+      try {
+        const result = await (0, import_esbuild.transform)(transformedCode, {
+          loader: "tsx",
+          jsx: "transform",
+          jsxFactory,
+          jsxFragment,
+          target: "es2020",
+          format: "esm"
+          // Esbuild supports decorators natively with tsx loader
+        });
+        if (debug) {
+          console.log(`[WSX Plugin] JSX transformed: ${id}`);
+        }
+        return {
+          code: result.code,
+          map: null
+        };
+      } catch (error) {
+        console.error(`[WSX Plugin] Transform error for ${id}:`, error);
+        throw error;
+      }
+    },
+    // We handle JSX transformation directly in the transform hook
+    // No need to modify global esbuild config
+    // 构建开始时的日志
+    buildStart() {
+      if (debug) {
+        console.log(`[WSX Plugin] Build started with extensions: ${extensions.join(", ")}`);
+        console.log(`[WSX Plugin] JSX Factory: ${jsxFactory}, Fragment: ${jsxFragment}`);
+      }
+    }
+  };
+}
+var vite_plugin_wsx_default = vitePluginWSX;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  wsx
+});

package/dist/index.mjs

@@ -0,0 +1,92 @@
+// src/vite-plugin-wsx.ts
+import { transform } from "esbuild";
+function getJSXFactoryImportPath(_options) {
+  return "@wsxjs/wsx-core";
+}
+function vitePluginWSX(options = {}) {
+  const {
+    jsxFactory = "h",
+    jsxFragment = "Fragment",
+    debug = false,
+    extensions = [".wsx"]
+  } = options;
+  return {
+    name: "vite-plugin-wsx",
+    enforce: "pre",
+    // 确保在 React 插件之前执行
+    // 处理 .wsx 文件加载
+    load(id) {
+      const isWSXFile = extensions.some((ext) => id.endsWith(ext));
+      if (!isWSXFile) {
+        return null;
+      }
+      if (debug) {
+        console.log(`[WSX Plugin] Loading: ${id}`);
+      }
+      return null;
+    },
+    // 在transform阶段处理文件
+    async transform(code, id) {
+      const isWSXFile = extensions.some((ext) => id.endsWith(ext));
+      if (!isWSXFile) {
+        return null;
+      }
+      if (debug) {
+        console.log(`[WSX Plugin] Processing: ${id}`);
+      }
+      let transformedCode = code;
+      const hasWSXCoreImport = code.includes('from "@wsxjs/wsx-core"');
+      const hasJSXInImport = hasWSXCoreImport && (new RegExp(`[{,]\\s*${jsxFactory}\\s*[},]`).test(code) || new RegExp(`[{,]\\s*${jsxFragment}\\s*[},]`).test(code));
+      if (debug) {
+        console.log(`[WSX Plugin] Checking JSX imports for: ${id}`);
+        console.log(`  - hasWSXCoreImport: ${hasWSXCoreImport}`);
+        console.log(`  - hasJSXInImport: ${hasJSXInImport}`);
+        console.log(`  - has < character: ${code.includes("<")}`);
+        console.log(`  - has Fragment: ${code.includes("Fragment")}`);
+      }
+      if ((code.includes("<") || code.includes("Fragment")) && !hasJSXInImport) {
+        const importPath = getJSXFactoryImportPath(options);
+        const importStatement = `import { ${jsxFactory}, ${jsxFragment} } from "${importPath}";
+`;
+        transformedCode = importStatement + transformedCode;
+        if (debug) {
+          console.log(`[WSX Plugin] Added JSX factory import to: ${id}`);
+        }
+      }
+      try {
+        const result = await transform(transformedCode, {
+          loader: "tsx",
+          jsx: "transform",
+          jsxFactory,
+          jsxFragment,
+          target: "es2020",
+          format: "esm"
+          // Esbuild supports decorators natively with tsx loader
+        });
+        if (debug) {
+          console.log(`[WSX Plugin] JSX transformed: ${id}`);
+        }
+        return {
+          code: result.code,
+          map: null
+        };
+      } catch (error) {
+        console.error(`[WSX Plugin] Transform error for ${id}:`, error);
+        throw error;
+      }
+    },
+    // We handle JSX transformation directly in the transform hook
+    // No need to modify global esbuild config
+    // 构建开始时的日志
+    buildStart() {
+      if (debug) {
+        console.log(`[WSX Plugin] Build started with extensions: ${extensions.join(", ")}`);
+        console.log(`[WSX Plugin] JSX Factory: ${jsxFactory}, Fragment: ${jsxFragment}`);
+      }
+    }
+  };
+}
+var vite_plugin_wsx_default = vitePluginWSX;
+export {
+  vite_plugin_wsx_default as wsx
+};

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@wsxjs/wsx-vite-plugin",
+  "version": "0.0.5",
+  "description": "Vite plugin for WSX Framework",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "!**/__tests__",
+    "!**/test"
+  ],
+  "keywords": [
+    "vite",
+    "plugin",
+    "wsx",
+    "web-components"
+  ],
+  "dependencies": {
+    "@wsxjs/wsx-core": "0.0.5"
+  },
+  "devDependencies": {
+    "@types/jest": "^29.0.0",
+    "@types/node": "^20.0.0",
+    "jest": "^29.0.0",
+    "ts-jest": "^29.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0",
+    "vite": "^5.0.0"
+  },
+  "peerDependencies": {
+    "vite": ">=4.0.0",
+    "esbuild": ">=0.25.0"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts --external esbuild",
+    "dev": "tsup src/index.ts --format cjs,esm --dts --watch --external esbuild",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist coverage"
+  }
+}

package/src/index.ts

@@ -0,0 +1 @@
+export { default as wsx } from "./vite-plugin-wsx";

package/src/vite-plugin-wsx.ts

@@ -0,0 +1,166 @@
+/* eslint-disable no-console */
+/**
+ * Vite Plugin for WSX (Web Component JSX)
+ *
+ * 专门处理.wsx文件：
+ * - 自动添加JSX pragma
+ * - 支持TypeScript编译
+ * - 完全隔离，不影响主项目React配置
+ */
+
+import type { Plugin } from "vite";
+import { transform } from "esbuild";
+
+export interface WSXPluginOptions {
+    /**
+     * JSX工厂函数名
+     * @default 'h'
+     */
+    jsxFactory?: string;
+
+    /**
+     * JSX Fragment函数名
+     * @default 'Fragment'
+     */
+    jsxFragment?: string;
+
+    /**
+     * 是否启用调试日志
+     * @default false
+     */
+    debug?: boolean;
+
+    /**
+     * 文件扩展名
+     * @default ['.wsx']
+     */
+    extensions?: string[];
+}
+
+/**
+ * 获取 JSX 工厂函数的导入路径
+ */
+function getJSXFactoryImportPath(_options: WSXPluginOptions): string {
+    // 使用 @wsxjs/wsx-core 包中的 JSX 工厂
+    return "@wsxjs/wsx-core";
+}
+
+/**
+ * WSX Vite插件
+ */
+export function vitePluginWSX(options: WSXPluginOptions = {}): Plugin {
+    const {
+        jsxFactory = "h",
+        jsxFragment = "Fragment",
+        debug = false,
+        extensions = [".wsx"],
+    } = options;
+
+    return {
+        name: "vite-plugin-wsx",
+        enforce: "pre", // 确保在 React 插件之前执行
+
+        // 处理 .wsx 文件加载
+        load(id: string) {
+            const isWSXFile = extensions.some((ext) => id.endsWith(ext));
+
+            if (!isWSXFile) {
+                return null;
+            }
+
+            if (debug) {
+                console.log(`[WSX Plugin] Loading: ${id}`);
+            }
+
+            // 返回 null 让 Vite 继续处理文件
+            return null;
+        },
+
+        // 在transform阶段处理文件
+        async transform(code: string, id: string) {
+            // 检查是否是WSX文件
+            const isWSXFile = extensions.some((ext) => id.endsWith(ext));
+
+            if (!isWSXFile) {
+                return null;
+            }
+
+            if (debug) {
+                console.log(`[WSX Plugin] Processing: ${id}`);
+            }
+
+            let transformedCode = code;
+
+            // 1. 检查是否已经有JSX工厂导入
+            const hasWSXCoreImport = code.includes('from "@wsxjs/wsx-core"');
+            // 更精确的检测：使用正则表达式检查 JSX 工厂函数是否在导入中
+            const hasJSXInImport =
+                hasWSXCoreImport &&
+                (new RegExp(`[{,]\\s*${jsxFactory}\\s*[},]`).test(code) ||
+                    new RegExp(`[{,]\\s*${jsxFragment}\\s*[},]`).test(code));
+
+            // 调试信息
+            if (debug) {
+                console.log(`[WSX Plugin] Checking JSX imports for: ${id}`);
+                console.log(`  - hasWSXCoreImport: ${hasWSXCoreImport}`);
+                console.log(`  - hasJSXInImport: ${hasJSXInImport}`);
+                console.log(`  - has < character: ${code.includes("<")}`);
+                console.log(`  - has Fragment: ${code.includes("Fragment")}`);
+            }
+
+            // 如果有JSX语法但没有JSX工厂导入，则需要注入
+            if ((code.includes("<") || code.includes("Fragment")) && !hasJSXInImport) {
+                // 使用标准的包导入
+                const importPath = getJSXFactoryImportPath(options);
+                const importStatement = `import { ${jsxFactory}, ${jsxFragment} } from "${importPath}";\n`;
+                transformedCode = importStatement + transformedCode;
+
+                if (debug) {
+                    console.log(`[WSX Plugin] Added JSX factory import to: ${id}`);
+                }
+            }
+
+            // 2. 添加JSX pragma - 不添加，让esbuild使用jsxFactory config
+            // JSX transformation will be handled by esbuild with our custom config
+
+            // 3. 使用 esbuild 进行 JSX 转换
+
+            try {
+                const result = await transform(transformedCode, {
+                    loader: "tsx",
+                    jsx: "transform",
+                    jsxFactory: jsxFactory,
+                    jsxFragment: jsxFragment,
+                    target: "es2020",
+                    format: "esm",
+                    // Esbuild supports decorators natively with tsx loader
+                });
+
+                if (debug) {
+                    console.log(`[WSX Plugin] JSX transformed: ${id}`);
+                }
+
+                return {
+                    code: result.code,
+                    map: null,
+                };
+            } catch (error) {
+                console.error(`[WSX Plugin] Transform error for ${id}:`, error);
+                throw error;
+            }
+        },
+
+        // We handle JSX transformation directly in the transform hook
+        // No need to modify global esbuild config
+
+        // 构建开始时的日志
+        buildStart() {
+            if (debug) {
+                console.log(`[WSX Plugin] Build started with extensions: ${extensions.join(", ")}`);
+                console.log(`[WSX Plugin] JSX Factory: ${jsxFactory}, Fragment: ${jsxFragment}`);
+            }
+        },
+    };
+}
+
+export default vitePluginWSX;