@archie/devtools 0.0.12 → 0.0.15

package/dist/index.d.mts

@@ -15,12 +15,12 @@ interface ArchieDevToolsOptions {
 interface ArchieDevToolsPlugin {
     name: string;
     enforce?: 'pre' | 'post';
-    config?: () => {
-        resolve: {
-            dedupe: string[];
-        };
-    };
+    config?: () => object;
     configResolved?: (config: ResolvedConfig) => void;
+    transform?: (code: string, id: string) => Promise<{
+        code: string;
+        map?: object | null;
+    } | null | undefined>;
     resolveId?: (id: string) => string | null;
     load?: (id: string) => string | null;
     api?: {

package/dist/index.d.ts

@@ -15,12 +15,12 @@ interface ArchieDevToolsOptions {
 interface ArchieDevToolsPlugin {
     name: string;
     enforce?: 'pre' | 'post';
-    config?: () => {
-        resolve: {
-            dedupe: string[];
-        };
-    };
+    config?: () => object;
     configResolved?: (config: ResolvedConfig) => void;
+    transform?: (code: string, id: string) => Promise<{
+        code: string;
+        map?: object | null;
+    } | null | undefined>;
     resolveId?: (id: string) => string | null;
     load?: (id: string) => string | null;
     api?: {

package/dist/index.js

@@ -234,6 +234,11 @@ function babelPluginEditorMeta({ types: t }, opts = {}) {
     }
     return "";
   }
+  function isHostLikeMemberExpressionName(name) {
+    if (!t.isJSXMemberExpression(name)) return false;
+    const propertyName = name.property.name;
+    return propertyName[0] === propertyName[0].toLowerCase();
+  }
   function computeNodeId(file, line, col, componentName) {
     return `${file}:${line}:${col}:${componentName}`;
   }
@@ -257,7 +262,7 @@ function babelPluginEditorMeta({ types: t }, opts = {}) {
         const loc = opening.loc?.start;
         if (loc) {
           const tag = getJSXTagName(opening);
-          return computeNodeId(file, loc.line, loc.column, tag);
+          return computeNodeId(file, loc.line, loc.column + 1, tag);
         }
         return null;
       }
@@ -405,9 +410,10 @@ function babelPluginEditorMeta({ types: t }, opts = {}) {
         const root = state.file.opts.root ?? "";
         const file = root ? nodePath.relative(root, filename) : filename;
         const line = loc.line;
-        const col = loc.column;
+        const col = loc.column + 1;
         const componentName = getJSXTagName(path.node);
         if (!componentName) return;
+        const isHostLikeMemberExpression = isHostLikeMemberExpressionName(path.node.name);
         const isHostElement = componentName[0] === componentName[0].toLowerCase();
         sanitizeSpreadAttributes(path.node.attributes);
         if (hasTruthyAsChildProp(path.node.attributes)) {
@@ -430,7 +436,7 @@ function babelPluginEditorMeta({ types: t }, opts = {}) {
               const decl = bp.parentPath;
               if (decl?.isImportDeclaration()) {
                 const src = decl.node.source.value;
-                if (isPackageImport(src)) return;
+                if (isPackageImport(src) && !isHostLikeMemberExpression) return;
               }
             }
             const programScope = path.scope.getProgramParent();
@@ -485,7 +491,9 @@ function archieDevTools(options = {}) {
   const log = (...args) => {
     if (debug) console.log("[Archie DevTools]", ...args);
   };
+  let babelCore = null;
   let includeHostSourceRef = false;
+  const transformedByHook = /* @__PURE__ */ new Set();
   const plugin = {
     name: "vite-plugin-archie-devtools",
     enforce: "pre",
@@ -493,12 +501,42 @@ function archieDevTools(options = {}) {
       return {
         resolve: {
           dedupe: ["react", "react-dom"]
+        },
+        optimizeDeps: {
+          exclude: ["@archie/devtools/client"]
         }
       };
     },
     configResolved(config) {
       includeHostSourceRef = !config.isProduction;
     },
+    async transform(code, id) {
+      if (!/\.[jt]sx$/.test(id) || /node_modules/.test(id)) return null;
+      try {
+        const babel = babelCore ?? (babelCore = await import("@babel/core"));
+        const isTS = /\.tsx$/.test(id);
+        const result = await babel.transformAsync(code, {
+          filename: id,
+          plugins: [
+            (b) => babelPluginEditorMeta(b, { includeHostSourceRef }),
+            ...dndPages.test(id) ? [(b) => babelPluginDndAuto(b, { importSource: INTERNAL_DND_SCOPE_IMPORT_SOURCE })] : []
+          ],
+          parserOpts: {
+            plugins: isTS ? ["jsx", "typescript"] : ["jsx"],
+            sourceType: "module"
+          },
+          sourceMaps: true,
+          configFile: false,
+          babelrc: false
+        });
+        if (!result?.code) return null;
+        transformedByHook.add(id);
+        return { code: result.code, map: result.map };
+      } catch (err) {
+        log("Babel transform failed for:", id, err);
+        return null;
+      }
+    },
     resolveId(id) {
       if (id === INTERNAL_DND_SCOPE_IMPORT_SOURCE) {
         return RESOLVED_DND_SCOPE_MODULE_ID;
@@ -513,14 +551,14 @@ function archieDevTools(options = {}) {
     },
     api: {
       reactBabel(babelOptions, context) {
-        if (!/node_modules/.test(context.id)) {
+        if (!/node_modules/.test(context.id) && !transformedByHook.has(context.id)) {
           babelOptions.plugins.push(
             (babel) => babelPluginEditorMeta(babel, {
               includeHostSourceRef
             })
           );
         }
-        if (dndPages.test(context.id)) {
+        if (dndPages.test(context.id) && !transformedByHook.has(context.id)) {
           log("Applying DnD transform to:", context.id);
           babelOptions.plugins.push(
             (babel) => babelPluginDndAuto(babel, {

package/dist/index.mjs

@@ -200,6 +200,11 @@ function babelPluginEditorMeta({ types: t }, opts = {}) {
     }
     return "";
   }
+  function isHostLikeMemberExpressionName(name) {
+    if (!t.isJSXMemberExpression(name)) return false;
+    const propertyName = name.property.name;
+    return propertyName[0] === propertyName[0].toLowerCase();
+  }
   function computeNodeId(file, line, col, componentName) {
     return `${file}:${line}:${col}:${componentName}`;
   }
@@ -223,7 +228,7 @@ function babelPluginEditorMeta({ types: t }, opts = {}) {
         const loc = opening.loc?.start;
         if (loc) {
           const tag = getJSXTagName(opening);
-          return computeNodeId(file, loc.line, loc.column, tag);
+          return computeNodeId(file, loc.line, loc.column + 1, tag);
         }
         return null;
       }
@@ -371,9 +376,10 @@ function babelPluginEditorMeta({ types: t }, opts = {}) {
         const root = state.file.opts.root ?? "";
         const file = root ? nodePath.relative(root, filename) : filename;
         const line = loc.line;
-        const col = loc.column;
+        const col = loc.column + 1;
         const componentName = getJSXTagName(path.node);
         if (!componentName) return;
+        const isHostLikeMemberExpression = isHostLikeMemberExpressionName(path.node.name);
         const isHostElement = componentName[0] === componentName[0].toLowerCase();
         sanitizeSpreadAttributes(path.node.attributes);
         if (hasTruthyAsChildProp(path.node.attributes)) {
@@ -396,7 +402,7 @@ function babelPluginEditorMeta({ types: t }, opts = {}) {
               const decl = bp.parentPath;
               if (decl?.isImportDeclaration()) {
                 const src = decl.node.source.value;
-                if (isPackageImport(src)) return;
+                if (isPackageImport(src) && !isHostLikeMemberExpression) return;
               }
             }
             const programScope = path.scope.getProgramParent();
@@ -451,7 +457,9 @@ function archieDevTools(options = {}) {
   const log = (...args) => {
     if (debug) console.log("[Archie DevTools]", ...args);
   };
+  let babelCore = null;
   let includeHostSourceRef = false;
+  const transformedByHook = /* @__PURE__ */ new Set();
   const plugin = {
     name: "vite-plugin-archie-devtools",
     enforce: "pre",
@@ -459,12 +467,42 @@ function archieDevTools(options = {}) {
       return {
         resolve: {
           dedupe: ["react", "react-dom"]
+        },
+        optimizeDeps: {
+          exclude: ["@archie/devtools/client"]
         }
       };
     },
     configResolved(config) {
       includeHostSourceRef = !config.isProduction;
     },
+    async transform(code, id) {
+      if (!/\.[jt]sx$/.test(id) || /node_modules/.test(id)) return null;
+      try {
+        const babel = babelCore ?? (babelCore = await import("@babel/core"));
+        const isTS = /\.tsx$/.test(id);
+        const result = await babel.transformAsync(code, {
+          filename: id,
+          plugins: [
+            (b) => babelPluginEditorMeta(b, { includeHostSourceRef }),
+            ...dndPages.test(id) ? [(b) => babelPluginDndAuto(b, { importSource: INTERNAL_DND_SCOPE_IMPORT_SOURCE })] : []
+          ],
+          parserOpts: {
+            plugins: isTS ? ["jsx", "typescript"] : ["jsx"],
+            sourceType: "module"
+          },
+          sourceMaps: true,
+          configFile: false,
+          babelrc: false
+        });
+        if (!result?.code) return null;
+        transformedByHook.add(id);
+        return { code: result.code, map: result.map };
+      } catch (err) {
+        log("Babel transform failed for:", id, err);
+        return null;
+      }
+    },
     resolveId(id) {
       if (id === INTERNAL_DND_SCOPE_IMPORT_SOURCE) {
         return RESOLVED_DND_SCOPE_MODULE_ID;
@@ -479,14 +517,14 @@ function archieDevTools(options = {}) {
     },
     api: {
       reactBabel(babelOptions, context) {
-        if (!/node_modules/.test(context.id)) {
+        if (!/node_modules/.test(context.id) && !transformedByHook.has(context.id)) {
           babelOptions.plugins.push(
             (babel) => babelPluginEditorMeta(babel, {
               includeHostSourceRef
             })
           );
         }
-        if (dndPages.test(context.id)) {
+        if (dndPages.test(context.id) && !transformedByHook.has(context.id)) {
           log("Applying DnD transform to:", context.id);
           babelOptions.plugins.push(
             (babel) => babelPluginDndAuto(babel, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@archie/devtools",
-  "version": "0.0.12",
+  "version": "0.0.15",
   "description": "DevTools for Archie generated applications - Route synchronization and editor communication",
   "repository": {
     "type": "git",
@@ -47,29 +47,29 @@
   "author": "8base",
   "license": "UNLICENSED",
   "devDependencies": {
-    "@babel/core": "^7.29.0",
-    "@babel/types": "^7.29.0",
-    "@dnd-kit/core": "^6.3.1",
-    "@dnd-kit/sortable": "^10.0.0",
-    "@dnd-kit/utilities": "^3.2.2",
-    "@remix-run/router": "^1.0.0",
-    "@types/babel__core": "^7.20.5",
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
-    "happy-dom": "^20.5.0",
-    "lucide-react": "^0.577.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "react-router-dom": "^7.0.0",
-    "tsup": "^8.0.0",
-    "typescript": "^5.0.0",
-    "vite": "^5.0.0 || ^6.0.0 || ^7.0.0",
-    "vitest": "^2.1.9",
-    "zustand": "^5.0.11"
+    "@babel/core": "7.29.0",
+    "@babel/types": "7.29.0",
+    "@dnd-kit/core": "6.3.1",
+    "@dnd-kit/sortable": "10.0.0",
+    "@dnd-kit/utilities": "3.2.2",
+    "@remix-run/router": "1.23.2",
+    "@types/babel__core": "7.20.5",
+    "@types/react": "19.2.14",
+    "@types/react-dom": "19.2.3",
+    "happy-dom": "20.8.9",
+    "lucide-react": "0.577.0",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "react-router-dom": "7.14.0",
+    "tsup": "8.5.1",
+    "typescript": "5.9.3",
+    "vite": "7.3.2",
+    "vitest": "4.1.3",
+    "zustand": "5.0.12"
   },
   "peerDependencies": {
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
     "react-router-dom": ">=6.4.0"
   }
-}
+}