vite-plugin-enter-dev 0.0.4 → 0.0.6

package/dist/index.d.ts

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

package/dist/index.js

@@ -0,0 +1,282 @@
+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
+  } = 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-message-listener",
+    enforce: "pre",
+    transformIndexHtml(html) {
+      if (!injectMessageListener) {
+        return html;
+      }
+      const messageListenerScript = `
+  <script>
+    (function() {
+      window.__earlyErrors__ = [];
+      window.__earlyConsoleLogs__ = [];
+      
+      const earlyErrorHandler = function(event) {
+        window.__earlyErrors__.push({
+          type: 'error',
+          message: event.message,
+          filename: event.filename,
+          lineno: event.lineno,
+          colno: event.colno,
+          error: event.error ? {
+            name: event.error.name,
+            message: event.error.message,
+            stack: event.error.stack
+          } : null,
+          timestamp: Date.now()
+        });
+      };
+      window.addEventListener('error', earlyErrorHandler, true);
+      
+      const earlyRejectionHandler = function(event) {
+        const reason = event.reason;
+        window.__earlyErrors__.push({
+          type: 'unhandledrejection',
+          reason: reason instanceof Error ? {
+            name: reason.name,
+            message: reason.message,
+            stack: reason.stack
+          } : String(reason),
+          timestamp: Date.now()
+        });
+      };
+      window.addEventListener('unhandledrejection', earlyRejectionHandler, true);
+      
+      const originalConsoleError = console.error;
+      const originalConsoleWarn = console.warn;
+      
+      console.error = function(...args) {
+        originalConsoleError.apply(console, args);
+        
+        window.__earlyConsoleLogs__.push({
+          type: 'error',
+          args: args.map(arg => {
+            if (arg instanceof Error) {
+              return {
+                name: arg.name,
+                message: arg.message,
+                stack: arg.stack
+              };
+            }
+            try {
+              return String(arg);
+            } catch {
+              return '[Unstringifiable]';
+            }
+          }),
+          timestamp: Date.now()
+        });
+      };
+      
+      console.warn = function(...args) {
+        originalConsoleWarn.apply(console, args);
+        
+        window.__earlyConsoleLogs__.push({
+          type: 'warn',
+          args: args.map(arg => {
+            try {
+              return String(arg);
+            } catch {
+              return '[Unstringifiable]';
+            }
+          }),
+          timestamp: Date.now()
+        });
+      };
+      
+      window.__cleanupEarlyErrorHandlers__ = function() {
+        window.removeEventListener('error', earlyErrorHandler, true);
+        window.removeEventListener('unhandledrejection', earlyRejectionHandler, true);
+        
+        console.error = originalConsoleError;
+        console.warn = originalConsoleWarn;
+        
+        delete window.__cleanupEarlyErrorHandlers__;
+      };
+    })();
+    
+    window.addEventListener('message', (event) => {
+      if (event.data.type === 'inject-script') {
+        try {
+          console.log('Executing injector script in sandbox...');
+
+          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>")) {
+        return html.replace("</head>", `${messageListenerScript}
+</head>`);
+      } else if (html.includes("</title>")) {
+        return html.replace("</title>", `</title>${messageListenerScript}`);
+      }
+      return html;
+    }
+  };
+  return [...reactPlugin, htmlInjectPlugin];
+}
+function enterProdPlugin(options = {}) {
+  const {
+    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 fontsInjectPlugin = {
+    name: "enter-prod-fonts-inject",
+    enforce: "pre",
+    transformIndexHtml(html) {
+      if (!injectGoogleFonts) {
+        return html;
+      }
+      const googleFontsLink = `<link href="${googleFontsUrl}" rel="stylesheet">`;
+      if (html.includes(googleFontsUrl)) {
+        return html;
+      }
+      if (html.includes("</head>")) {
+        return html.replace("</head>", `  ${googleFontsLink}
+</head>`);
+      }
+      return html;
+    }
+  };
+  return [fontsInjectPlugin];
+}
+
+export { enterDevPlugin, enterProdPlugin };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-enter-dev",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "type": "module",
   "private": false,
   "description": "A Vite plugin for development enhancements",