vite-plugin-enter-dev 0.0.11 → 0.0.13

package/README.md

@@ -1,5 +1,27 @@
 # vite-plugin-enter-dev
 
-Version 0.0.11 adds recovery for full reloads missed before the first HMR connection or while disconnected. Each served HTML document includes the server instance and reload revision. The client compares that generation on initial connection and reconnection; a stale document reloads once, while a current document remains in place.
+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.
 
-The plugin uses Vite's public WebSocket and HTML transform hooks. It does not depend on optimizer internals or an arbitrary sleep. Existing workspaces must install this version and restart Vite to activate it. Publish 0.0.11 before deploying a Gateway that requires that version.
+`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,162 @@
+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];
+  }
+  let setup = [];
+  if (types.isArrowFunctionExpression(config) || types.isFunctionExpression(config)) {
+    if (types.isBlockStatement(config.body)) {
+      const last = config.body.body.at(-1);
+      if (!types.isReturnStatement(last)) {
+        throw new Error("Unsupported Vite config: expected a single unconditional return");
+      }
+      setup = config.body.body.slice(0, -1);
+      config = last.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)) throw new Error("Unsupported plugins property");
+  const pluginArrays = resolvePluginArrays(plugins.value, setup);
+  if (!pluginArrays.length) {
+    throw new Error("Unsupported Vite config: expected a literal plugins array");
+  }
+  const calls = pluginArrays.flatMap((array) => array.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), []);
+      pluginArrays[0].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;
+}
+function resolvePluginArrays(value, setup) {
+  if (setup.length === 0 && types.isArrayExpression(value)) return [value];
+  if (types.isTSAsExpression(value) || types.isTSSatisfiesExpression(value)) value = value.expression;
+  if (types.isCallExpression(value) && types.isMemberExpression(value.callee) && !value.callee.computed && types.isIdentifier(value.callee.property, { name: "filter" }) && value.arguments.length === 1 && types.isIdentifier(value.arguments[0], { name: "Boolean" })) value = value.callee.object;
+  if (!types.isIdentifier(value)) throw new Error("Unsupported dynamic plugins reference");
+  const name = value.name;
+  const first = setup[0];
+  if (!types.isVariableDeclaration(first, { kind: "const" }) || first.declarations.length !== 1) {
+    throw new Error("Unsupported plugins initializer");
+  }
+  const declaration = first.declarations[0];
+  if (!types.isIdentifier(declaration.id, { name }) || !types.isArrayExpression(declaration.init)) {
+    throw new Error("Unsupported plugins initializer");
+  }
+  const arrays = [declaration.init];
+  const visit = (statement) => {
+    if (types.isIfStatement(statement)) {
+      visit(statement.consequent);
+      if (statement.alternate) visit(statement.alternate);
+      return;
+    }
+    if (types.isBlockStatement(statement)) {
+      statement.body.forEach(visit);
+      return;
+    }
+    const call = types.isExpressionStatement(statement) ? statement.expression : void 0;
+    if (!types.isCallExpression(call) || !types.isMemberExpression(call.callee) || call.callee.computed || !types.isIdentifier(call.callee.object, { name }) || !types.isIdentifier(call.callee.property, { name: "push" }) || call.arguments.some((argument) => types.isJSXNamespacedName(argument) || types.isArgumentPlaceholder(argument))) {
+      throw new Error("Unsupported plugins mutation");
+    }
+    arrays.push(types.arrayExpression(call.arguments));
+  };
+  setup.slice(1).forEach(visit);
+  return arrays;
+}
+
+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

@@ -165,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();
         }
@@ -230,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"),
@@ -274,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";
 }
@@ -342,28 +342,22 @@ 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 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",
@@ -382,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',
@@ -556,6 +550,7 @@ function enterDevPlugin(options = {}) {
   };
   return [
     ...reactPlugin,
+    sourcePlugin,
     htmlInjectPlugin,
     sandboxServerPlugin,
     routerBasePlugin,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-enter-dev",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "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"
   }
-}
+}