vite-plugin-enter-dev 0.0.10 → 0.0.12

package/README.md

@@ -0,0 +1,27 @@
+# vite-plugin-enter-dev
+
+Version 0.0.12 preserves the host React compiler and its Babel options. Use
+`enterDevPlugin({ react: false })` alongside `@vitejs/plugin-react`; Enter adds
+source locations through `api.reactBabel`. Templates without a host compiler
+can keep `enterDevPlugin()`. Duplicate React compilers fail at configuration
+resolution with an actionable error instead of serving broken entry modules.
+
+`vite-plugin-enter-dev/configure` exports `configureVite(source)` and
+`configureViteFile(path, check?)`. The Gateway uses these to repair existing
+and imported Vite configurations. Migration preserves host options, handles
+static configurations and aliased imports, and is idempotent. Unsupported
+dynamic configurations fail without changing the file; check mode never writes.
+File migration requires the caller to exclude concurrent file writers for the
+whole operation; the Gateway holds and drains its workspace lock before calling.
+
+Version 0.0.11's reload-generation recovery remains enabled: served documents
+compare the server instance and reload revision on initial HMR connection and
+reconnection, reloading once when stale.
+
+Run `pnpm test`, `pnpm lint`, and `pnpm typecheck` in this package. Tests compile
+a real TSX entry through Vite and verify source annotations, migration, and
+host Babel options.
+
+Publish 0.0.12 before deploying a Gateway requiring it. Existing sandboxes must
+upgrade the package, migrate the configuration, and restart Vite; the Gateway
+checks this even when the old server's readiness endpoint still responds.

package/dist/configure.d.ts

@@ -0,0 +1,4 @@
+declare function configureVite(source: string): string;
+declare function configureViteFile(path: string, check?: boolean): boolean;
+
+export { configureVite, configureViteFile };

package/dist/configure.js

@@ -0,0 +1,123 @@
+import { parseSync, types, traverse, transformFromAstSync } from '@babel/core';
+import { readFileSync, writeFileSync, statSync, renameSync, rmSync } from 'fs';
+import { randomUUID } from 'crypto';
+
+// src/configure.ts
+function configureVite(source) {
+  const ast = parseSync(source, { babelrc: false, configFile: false, parserOpts: { plugins: ["typescript"] } });
+  if (!ast) throw new Error("Cannot parse Vite config");
+  const imports = ast.program.body.filter((node) => types.isImportDeclaration(node));
+  if (imports.some((node) => node.source.value === "@vitejs/plugin-react" && node.specifiers.some((item) => !types.isImportDefaultSpecifier(item)))) {
+    throw new Error("Unsupported React import: expected a default import");
+  }
+  const defineNames = imports.filter((node) => node.source.value === "vite").flatMap((node) => node.specifiers.filter((item) => types.isImportSpecifier(item) && types.isIdentifier(item.imported, { name: "defineConfig" })).map((item) => item.local.name));
+  const reactNames = imports.filter((node) => node.source.value === "@vitejs/plugin-react").flatMap((node) => node.specifiers.filter((item) => types.isImportDefaultSpecifier(item)).map((item) => item.local.name));
+  const entry = ast.program.body.find((node) => types.isExportDefaultDeclaration(node));
+  let config = entry?.declaration;
+  if (types.isIdentifier(config)) {
+    const name = config.name;
+    traverse(ast, {
+      Program(path) {
+        const binding2 = path.scope.getBinding(name);
+        if (!binding2?.constant || binding2.referencePaths.length !== 1 || !binding2.referencePaths[0]?.parentPath?.isExportDefaultDeclaration()) {
+          throw new Error("Unsupported Vite config: exported binding has other references");
+        }
+      }
+    });
+    const binding = ast.program.body.filter((node) => types.isVariableDeclaration(node, { kind: "const" })).flatMap((node) => node.declarations).find((node) => types.isIdentifier(node.id, { name }));
+    config = binding?.init ?? void 0;
+  }
+  if (types.isCallExpression(config)) {
+    if (!types.isIdentifier(config.callee) || !defineNames.includes(config.callee.name) || config.arguments.length !== 1) throw new Error("Unsupported Vite config wrapper");
+    config = config.arguments[0];
+  }
+  if (types.isArrowFunctionExpression(config) || types.isFunctionExpression(config)) {
+    if (types.isBlockStatement(config.body)) {
+      if (config.body.body.length !== 1 || !types.isReturnStatement(config.body.body[0])) {
+        throw new Error("Unsupported Vite config: expected a single unconditional return");
+      }
+      config = config.body.body[0].argument ?? void 0;
+    } else {
+      config = config.body;
+    }
+  }
+  if (!types.isObjectExpression(config)) throw new Error("Unsupported Vite config: expected a static exported configuration object");
+  if (config.properties.some((node) => types.isSpreadElement(node) || node.computed || types.isObjectMethod(node) && (types.isIdentifier(node.key, { name: "plugins" }) || types.isStringLiteral(node.key, { value: "plugins" })))) {
+    throw new Error("Unsupported Vite config: dynamic configuration may override plugins");
+  }
+  const pluginProperties = config.properties.filter((node) => types.isObjectProperty(node) && !node.computed && (types.isIdentifier(node.key, { name: "plugins" }) || types.isStringLiteral(node.key, { value: "plugins" })));
+  if (pluginProperties.length > 1) throw new Error("Unsupported Vite config: duplicate plugins properties");
+  let changed = false;
+  let plugins = pluginProperties[0];
+  if (!plugins) {
+    plugins = types.objectProperty(types.identifier("plugins"), types.arrayExpression([]));
+    config.properties.push(plugins);
+    changed = true;
+  }
+  if (!types.isObjectProperty(plugins) || !types.isArrayExpression(plugins.value)) {
+    throw new Error("Unsupported Vite config: expected a literal plugins array");
+  }
+  const calls = plugins.value.elements.map((node) => types.isSpreadElement(node) ? node.argument : node);
+  if (calls.some((node) => !types.isCallExpression(node) && node !== null && !types.isBooleanLiteral(node))) {
+    throw new Error("Unsupported Vite config: dynamic plugin list");
+  }
+  const hostReact = calls.some((node) => types.isCallExpression(node) && types.isIdentifier(node.callee) && reactNames.includes(node.callee.name));
+  for (const name of ["enterProdPlugin", "enterDevPlugin"]) {
+    const specifiers = imports.filter((node) => node.source.value === "vite-plugin-enter-dev").flatMap((node) => node.specifiers).filter((node) => types.isImportSpecifier(node) && types.isIdentifier(node.imported, { name }));
+    const aliases = specifiers.map((node) => node.local.name);
+    let local = aliases[0];
+    if (!local) {
+      local = name;
+      while (new RegExp(`\\b${local}\\b`).test(source)) local = `_${local}`;
+      ast.program.body.unshift(types.importDeclaration([types.importSpecifier(types.identifier(local), types.identifier(name))], types.stringLiteral("vite-plugin-enter-dev")));
+      changed = true;
+    }
+    const matching = calls.filter((node) => types.isCallExpression(node) && types.isIdentifier(node.callee) && (aliases.includes(node.callee.name) || node.callee.name === local));
+    if (matching.length > 1) throw new Error(`Duplicate ${name} calls in Vite config`);
+    let call = matching[0];
+    if (!call) {
+      call = types.callExpression(types.identifier(local), []);
+      plugins.value.elements.push(types.spreadElement(call));
+      changed = true;
+    }
+    if (name !== "enterDevPlugin" || !hostReact || !types.isCallExpression(call)) continue;
+    if (call.arguments.length === 0) call.arguments.push(types.objectExpression([]));
+    const options = call.arguments[0];
+    if (!types.isObjectExpression(options) || options.properties.some((node) => !types.isObjectProperty(node) || node.computed)) {
+      throw new Error("Unsupported enterDevPlugin options: expected a static object");
+    }
+    const matchingOptions = options.properties.filter((node) => types.isObjectProperty(node) && !node.computed && (types.isIdentifier(node.key, { name: "react" }) || types.isStringLiteral(node.key, { value: "react" })));
+    if (matchingOptions.length > 1) throw new Error("Unsupported duplicate react options");
+    const option = matchingOptions[0];
+    if (types.isObjectProperty(option)) {
+      if (!types.isBooleanLiteral(option.value)) throw new Error("Unsupported dynamic enterDevPlugin react option");
+      if (!option.value.value) continue;
+      option.value = types.booleanLiteral(false);
+    } else {
+      options.properties.push(types.objectProperty(types.identifier("react"), types.booleanLiteral(false)));
+    }
+    changed = true;
+  }
+  if (!changed) return source;
+  const result = transformFromAstSync(ast, source, { babelrc: false, configFile: false });
+  if (!result?.code) throw new Error("Cannot generate Vite config");
+  return `${result.code}
+`;
+}
+function configureViteFile(path, check = false) {
+  const source = readFileSync(path, "utf8");
+  const output = configureVite(source);
+  if (source === output) return false;
+  if (check) return true;
+  const temporary = `${path}.${randomUUID()}.tmp`;
+  try {
+    writeFileSync(temporary, output, { flag: "wx", mode: statSync(path).mode });
+    if (readFileSync(path, "utf8") !== source) throw new Error("Vite config changed during migration");
+    renameSync(temporary, path);
+  } finally {
+    rmSync(temporary, { force: true });
+  }
+  return true;
+}
+
+export { configureVite, configureViteFile };

package/dist/index.d.ts

@@ -11,9 +11,8 @@ interface DevOptions {
      * 宿主框架自己已经注册了 React 转换时必须传 false：vinext 会在
      * configResolved 里检测重复注册并直接抛错
      * （"[vinext] Duplicate @vitejs/plugin-react detected"），
-     * 整个 dev server 和 build 都起不来。关掉后本插件只保留
-     * allowedHosts / 端口 / base / 消息监听，代价是失去可视化编辑
-     * 需要的源码位置注入。
+     * 整个 dev server 和 build 都起不来。源码位置通过宿主 React
+     * 插件的 Babel 扩展接口注入，无需重复注册编译器。
      */
     react?: boolean;
 }

package/dist/index.js

@@ -1,4 +1,5 @@
 import react from '@vitejs/plugin-react';
+import { randomUUID } from 'crypto';
 
 // src/index.ts
 
@@ -164,7 +165,7 @@ function injectSourcePlugin({ types: t }) {
     name: "inject-source-location-enhanced",
     visitor: {
       Program: {
-        enter(path, state) {
+        enter(_path, state) {
           state.threeImportedElements = /* @__PURE__ */ new Set();
           state.threeNamespaces = /* @__PURE__ */ new Set();
         }
@@ -229,7 +230,7 @@ function injectSourcePlugin({ types: t }) {
         );
         const sourceStackAttr = t.jsxAttribute(
           t.jsxIdentifier("data-source-stack"),
-          t.stringLiteral(JSON.stringify(elementInfo))
+          t.jsxExpressionContainer(t.stringLiteral(JSON.stringify(elementInfo)))
         );
         const elementTypeAttr = t.jsxAttribute(
           t.jsxIdentifier("data-element-type"),
@@ -273,7 +274,7 @@ function getElementType(nameNode) {
   if (nameNode.type === "JSXIdentifier") {
     return nameNode.name;
   } else if (nameNode.type === "JSXMemberExpression") {
-    return `${nameNode.object.name}.${nameNode.property.name}`;
+    return `${getElementType(nameNode.object)}.${nameNode.property.name}`;
   }
   return "unknown";
 }
@@ -283,35 +284,80 @@ function getParentElementType(parentNode) {
   }
   return null;
 }
+function reloadGenerationPlugin() {
+  const instance = randomUUID();
+  let revision = 0;
+  let base = "/";
+  const generation = () => `${instance}:${revision}`;
+  return {
+    name: "enter-dev-reload-generation",
+    apply: "serve",
+    configResolved(config) {
+      base = config.base;
+    },
+    configureServer(server) {
+      const originalSend = server.ws.send.bind(server.ws);
+      const send = (payload, data) => {
+        if (typeof payload === "string") {
+          originalSend(payload, data);
+          return;
+        }
+        if (payload.type === "full-reload") revision += 1;
+        originalSend(payload);
+      };
+      server.ws.send = send;
+      server.ws.on("enter:check-generation", (data, client) => {
+        if (data?.generation !== generation()) {
+          client.send("enter:reload-required", { generation: generation() });
+        }
+      });
+      server.httpServer?.once("close", () => {
+        if (server.ws.send === send) server.ws.send = originalSend;
+      });
+    },
+    transformIndexHtml() {
+      return [
+        {
+          tag: "script",
+          attrs: { type: "module" },
+          injectTo: "head-prepend",
+          children: `import { createHotContext } from ${JSON.stringify(`${base}@vite/client`)};
+const generation = ${JSON.stringify(generation())};
+const hot = createHotContext('/@enter/reload-generation');
+let reloading = false;
+hot.on('enter:reload-required', () => {
+  if (reloading) return;
+  reloading = true;
+  window.location.reload();
+});
+const check = () => hot.send('enter:check-generation', { generation });
+hot.on('vite:ws:connect', check);
+check();`
+        }
+      ];
+    }
+  };
+}
 
 // src/index.ts
 function enterDevPlugin(options = {}) {
-  const {
-    injectMessageListener = true,
-    react: enableReact = true
-  } = options;
-  const reactPlugin = enableReact ? react({
-    // 确保在开发模式下启用JSX源码映射
-    jsxImportSource: void 0,
-    jsxRuntime: "automatic",
-    // 启用构建时注入源码位置信息
-    babel: {
-      plugins: [
-        // 我们的自定义插件：在构建时注入源码位置
-        [injectSourcePlugin],
-        // 标准的React JSX转换
-        [
-          "@babel/plugin-transform-react-jsx",
-          {
-            runtime: "automatic",
-            importSource: "react",
-            development: true
-            // 保持开发模式以获得更好的调试体验
-          }
-        ]
-      ]
+  const { injectMessageListener = true, react: enableReact = true } = options;
+  const reactPlugin = enableReact ? react() : [];
+  const sourcePlugin = {
+    name: "enter-dev-source-location",
+    api: {
+      reactBabel(config) {
+        if (!config.plugins.some((plugin) => (Array.isArray(plugin) ? plugin[0] : plugin) === injectSourcePlugin)) {
+          config.plugins.push(injectSourcePlugin);
+        }
+      }
+    },
+    configResolved(config) {
+      if (config.plugins.filter((plugin) => plugin.name === "vite:react-babel").length > 1) {
+        throw new Error("Enter preview: duplicate React plugins. Use enterDevPlugin({ react: false }) when the project provides React.");
+      }
     }
-  }) : [];
+  };
   const htmlInjectPlugin = {
     name: "enter-dev-message-listener",
     enforce: "pre",
@@ -330,7 +376,7 @@ function enterDevPlugin(options = {}) {
         if (target && (target.tagName === 'SCRIPT' || target.tagName === 'LINK')) {
           const isStylesheet =
             target.tagName === 'LINK' &&
-            String(target.rel || '').toLowerCase().split(/s+/).includes('stylesheet');
+            String(target.rel || '').toLowerCase().split(/\\s+/).includes('stylesheet');
           if (target.tagName === 'SCRIPT' || isStylesheet) {
             window.__earlyErrors__.push({
               type: 'resource',
@@ -502,7 +548,15 @@ function enterDevPlugin(options = {}) {
       }
     }
   };
-  return [...reactPlugin, htmlInjectPlugin, sandboxServerPlugin, routerBasePlugin, publicAssetReloadPlugin];
+  return [
+    ...reactPlugin,
+    sourcePlugin,
+    htmlInjectPlugin,
+    sandboxServerPlugin,
+    routerBasePlugin,
+    publicAssetReloadPlugin,
+    reloadGenerationPlugin()
+  ];
 }
 function enterProdPlugin(options = {}) {
   const {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-enter-dev",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "type": "module",
   "private": false,
   "description": "A Vite plugin for development enhancements",
@@ -11,17 +11,15 @@
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
+    },
+    "./configure": {
+      "types": "./dist/configure.d.ts",
+      "import": "./dist/configure.js"
     }
   },
   "files": [
     "dist"
   ],
-  "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
-    "lint": "eslint . --max-warnings 0",
-    "typecheck": "tsc --noEmit"
-  },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
@@ -34,19 +32,31 @@
   ],
   "author": "",
   "license": "MIT",
-  "packageManager": "pnpm@10.15.0",
   "devDependencies": {
     "@types/node": "^20.19.9",
-    "@workspace/eslint-config": "workspace:*",
-    "@workspace/typescript-config": "workspace:*",
     "tsup": "^8.5.1",
-    "typescript": "^5.9.2",
-    "vite": "^6.0.0"
+    "@typescript/native": "npm:typescript@7.0.2",
+    "typescript": "npm:@typescript/typescript6@6.0.2",
+    "vite": "^6.0.0",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "@types/babel__core": "^7.20.5",
+    "eslint": "^9.32.0",
+    "@workspace/eslint-config": "0.0.0",
+    "@workspace/typescript-config": "0.0.0"
   },
   "peerDependencies": {
     "vite": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0"
   },
   "dependencies": {
-    "@vitejs/plugin-react": "^5.1.1"
+    "@vitejs/plugin-react": "^5.1.1",
+    "@babel/core": "^7.28.3"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "eslint . --max-warnings 0",
+    "typecheck": "tsc --noEmit",
+    "test": "pnpm build && node --test --test-timeout=15000 *.test.mjs"
   }
-}
+}