vite-plugin-enter-dev 0.0.1

package/dist/index.d.ts

@@ -0,0 +1,19 @@
+import { PluginOption } from 'vite';
+
+interface Options {
+    /**
+     * 是否注入消息监听器脚本（默认：true）
+     */
+    injectMessageListener?: boolean;
+    /**
+     * 是否注入 Google Fonts（默认：true）
+     */
+    injectGoogleFonts?: boolean;
+    /**
+     * Google Fonts 链接（可自定义）
+     */
+    googleFontsUrl?: string;
+}
+declare function enterDevPlugin(options?: Options): PluginOption[];
+
+export { enterDevPlugin as default };

package/dist/index.js

@@ -0,0 +1,182 @@
+import react from '@vitejs/plugin-react';
+
+// src/index.ts
+
+// src/sourceInfoInjectPlugin.ts
+function injectSourcePlugin({ types: t }) {
+  return {
+    name: "inject-source-location-enhanced",
+    visitor: {
+      JSXElement(path, state) {
+        const { node } = path;
+        const filename = state.filename || state.file.opts.filename || "unknown";
+        const start = node.loc?.start;
+        const end = node.loc?.end;
+        if (!start) return;
+        const relativePath = filename.replace(/^.*\/src\//, "src/").replace(/\\/g, "/");
+        const sourceLocation = `${relativePath}:${start.line}:${start.column + 1}`;
+        const elementType = getElementType(node.openingElement.name);
+        const elementInfo = {
+          fileName: relativePath,
+          lineNumber: start.line,
+          columnNumber: start.column + 1,
+          endLine: end?.line || start.line,
+          endColumn: end?.column ? end.column + 1 : start.column + 1,
+          elementType,
+          tagName: elementType.toLowerCase(),
+          // 获取元素的属性信息
+          attributes: node.openingElement.attributes.map((attr) => {
+            if (attr.type === "JSXAttribute" && attr.name) {
+              return {
+                name: attr.name.name,
+                hasValue: !!attr.value,
+                line: attr.loc?.start?.line,
+                column: attr.loc?.start?.column
+              };
+            }
+            return null;
+          }).filter(Boolean),
+          // 记录是否有子元素
+          hasChildren: node.children && node.children.length > 0,
+          // 记录父元素信息（如果可获得）
+          parentElement: getParentElementType(path.parent)
+        };
+        const sourceLocationAttr = t.jsxAttribute(
+          t.jsxIdentifier("data-source-location"),
+          t.stringLiteral(sourceLocation)
+        );
+        const sourceStackAttr = t.jsxAttribute(
+          t.jsxIdentifier("data-source-stack"),
+          t.stringLiteral(JSON.stringify(elementInfo))
+        );
+        const elementTypeAttr = t.jsxAttribute(
+          t.jsxIdentifier("data-element-type"),
+          t.stringLiteral(elementType)
+        );
+        const lineNumberAttr = t.jsxAttribute(
+          t.jsxIdentifier("data-line-number"),
+          t.stringLiteral(start.line.toString())
+        );
+        const runtimeFileAttr = t.jsxAttribute(
+          t.jsxIdentifier("data-real-file"),
+          t.stringLiteral(relativePath)
+        );
+        const runtimeLineAttr = t.jsxAttribute(
+          t.jsxIdentifier("data-real-line"),
+          t.stringLiteral(start.line.toString())
+        );
+        const runtimeColumnAttr = t.jsxAttribute(
+          t.jsxIdentifier("data-real-column"),
+          t.stringLiteral((start.column + 1).toString())
+        );
+        const injectionMethodAttr = t.jsxAttribute(
+          t.jsxIdentifier("data-injected-source"),
+          t.stringLiteral("babel")
+        );
+        node.openingElement.attributes.push(
+          sourceLocationAttr,
+          sourceStackAttr,
+          elementTypeAttr,
+          lineNumberAttr,
+          runtimeFileAttr,
+          runtimeLineAttr,
+          runtimeColumnAttr,
+          injectionMethodAttr
+        );
+      }
+    }
+  };
+}
+function getElementType(nameNode) {
+  if (nameNode.type === "JSXIdentifier") {
+    return nameNode.name;
+  } else if (nameNode.type === "JSXMemberExpression") {
+    return `${nameNode.object.name}.${nameNode.property.name}`;
+  }
+  return "unknown";
+}
+function getParentElementType(parentNode) {
+  if (parentNode && parentNode.type === "JSXElement" && parentNode.openingElement) {
+    return getElementType(parentNode.openingElement.name);
+  }
+  return null;
+}
+
+// src/index.ts
+function enterDevPlugin(options = {}) {
+  const {
+    injectMessageListener = true,
+    injectGoogleFonts = true,
+    googleFontsUrl = "https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900;950&family=Poppins:wght@100;200;300;400;500;600;700;800;900;950&family=Roboto:wght@100;200;300;400;500;600;700;800;900;950&display=swap"
+  } = options;
+  const reactPlugin = react({
+    // 确保在开发模式下启用JSX源码映射
+    jsxImportSource: void 0,
+    jsxRuntime: "automatic",
+    // 启用构建时注入源码位置信息
+    babel: {
+      plugins: [
+        // 我们的自定义插件：在构建时注入源码位置
+        [injectSourcePlugin],
+        // 标准的React JSX转换
+        [
+          "@babel/plugin-transform-react-jsx",
+          {
+            runtime: "automatic",
+            importSource: "react",
+            development: true
+            // 保持开发模式以获得更好的调试体验
+          }
+        ]
+      ]
+    }
+  });
+  const htmlInjectPlugin = {
+    name: "enter-dev-custom-html-inject",
+    enforce: "pre",
+    transformIndexHtml(html) {
+      let transformedHtml = html;
+      if (injectMessageListener) {
+        const messageListenerScript = `
+  <script>
+    // \u6DFB\u52A0\u6D88\u606F\u76D1\u542C\u5668\uFF0C\u63A5\u6536\u6765\u81EA\u4E3B\u5DE5\u7A0B\u7684\u6CE8\u5165\u811A\u672C
+    window.addEventListener('message', (event) => {
+      if (event.data.type === 'inject-script') {
+        try {
+          console.log('Executing injector script in sandbox...');
+
+          // \u521B\u5EFAscript\u5143\u7D20\u5E76\u6267\u884C
+          const script = document.createElement('script');
+          script.textContent = event.data.script;
+          document.head.appendChild(script);
+          console.log('Injector script executed successfully');
+        } catch (error) {
+          console.error('Failed to execute injector script:', error);
+        }
+      }
+    });
+
+  </script>`;
+        if (html.includes("</head>")) {
+          transformedHtml = transformedHtml.replace("</head>", `${messageListenerScript}
+</head>`);
+        } else if (html.includes("</title>")) {
+          transformedHtml = transformedHtml.replace("</title>", `</title>${messageListenerScript}`);
+        }
+      }
+      if (injectGoogleFonts) {
+        const googleFontsLink = `<link href="${googleFontsUrl}" rel="stylesheet">`;
+        if (!transformedHtml.includes(googleFontsUrl)) {
+          if (transformedHtml.includes("</head>")) {
+            transformedHtml = transformedHtml.replace("</head>", `  ${googleFontsLink}
+</head>`);
+          }
+        }
+      }
+      return transformedHtml;
+    }
+  };
+  return [...reactPlugin, htmlInjectPlugin];
+}
+
+export { enterDevPlugin as default };

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "vite-plugin-enter-dev",
+  "version": "0.0.1",
+  "type": "module",
+  "private": false,
+  "description": "A Vite plugin for development enhancements",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "eslint . --max-warnings 0"
+  },
+  "keywords": [
+    "vite",
+    "vite-plugin",
+    "development",
+    "enter",
+    "enter.pro"
+  ],
+  "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"
+  },
+  "peerDependencies": {
+    "vite": "^5.0.0 || ^6.0.0"
+  },
+  "dependencies": {
+    "@vitejs/plugin-react": "^5.1.1"
+  }
+}