@archie/devtools 0.0.15 → 0.0.17

package/dist/client/client.d.mts

@@ -26,7 +26,8 @@ type InjectOptions = {
     /**
      * Where to load the inspector script from.
      * - "remote" (default): load from REMOTE_INSPECTOR_SCRIPT_URL with a dynamic hash to avoid cache.
-     * - "local": load from the bundled module (import('./inspector.js')).
+     * - "local": load from `localScriptUrl` (default `/_archie/inspector.js`), served by `archieDevTools()`
+     *   when `VITE_ARCHIE_LOCAL_INSPECTOR=true` in the host Vite app. You can also pass `localScriptUrl` directly.
      */
     scriptSource?: 'remote' | 'local';
     /**
@@ -35,6 +36,12 @@ type InjectOptions = {
      * Example: 'https://my-cdn.com/inspector.standalone.js'
      */
     scriptUrl?: string;
+    /**
+     * URL for the inspector script when `scriptSource` is `"local"`.
+     * Defaults to `/_archie/inspector.js` (middleware from `archieDevTools()` in dev).
+     * Override if you host the file elsewhere, e.g. `'http://localhost:4000/inspector.js'`.
+     */
+    localScriptUrl?: string;
 };
 
 interface ArchieRouteObjectLike {

package/dist/client/client.d.ts

@@ -26,7 +26,8 @@ type InjectOptions = {
     /**
      * Where to load the inspector script from.
      * - "remote" (default): load from REMOTE_INSPECTOR_SCRIPT_URL with a dynamic hash to avoid cache.
-     * - "local": load from the bundled module (import('./inspector.js')).
+     * - "local": load from `localScriptUrl` (default `/_archie/inspector.js`), served by `archieDevTools()`
+     *   when `VITE_ARCHIE_LOCAL_INSPECTOR=true` in the host Vite app. You can also pass `localScriptUrl` directly.
      */
     scriptSource?: 'remote' | 'local';
     /**
@@ -35,6 +36,12 @@ type InjectOptions = {
      * Example: 'https://my-cdn.com/inspector.standalone.js'
      */
     scriptUrl?: string;
+    /**
+     * URL for the inspector script when `scriptSource` is `"local"`.
+     * Defaults to `/_archie/inspector.js` (middleware from `archieDevTools()` in dev).
+     * Override if you host the file elsewhere, e.g. `'http://localhost:4000/inspector.js'`.
+     */
+    localScriptUrl?: string;
 };
 
 interface ArchieRouteObjectLike {

package/dist/client/client.js

@@ -9114,6 +9114,16 @@ function DndProvider({ children }) {
 // src/client/useArchieDevToolsRuntime.ts
 var import_react21 = require("react");
 
+// src/client/archieLocalInspectorEnv.ts
+var import_meta = {};
+function readArchieLocalInspectorFlag() {
+  try {
+    return import_meta.env?.VITE_ARCHIE_LOCAL_INSPECTOR === "true";
+  } catch {
+    return false;
+  }
+}
+
 // src/client/inject-inspector/archieOrigins.ts
 var ARCHIE_HOST_ORIGINS = [
   "https://app.dev.archie-platform.com",
@@ -9169,10 +9179,10 @@ function isLocalDev(referrer) {
   }
 }
 function injectInspector(opts = {}) {
-  if (typeof document === "undefined") return null;
+  if (typeof document === "undefined") return;
   const id = opts.id ?? DEFAULT_SCRIPT_ID;
   const existing = document.getElementById(id);
-  if (existing) return Promise.resolve(existing);
+  if (existing) return;
   const win = typeof window !== "undefined" ? window : null;
   if (win) {
     const referrer = typeof document.referrer === "string" ? document.referrer : "";
@@ -9210,36 +9220,23 @@ function injectInspector(opts = {}) {
       win["__ARCHIE_INSPECTOR_TARGET_ORIGIN__"] = target;
     }
   }
-  const useRemote = opts.scriptSource !== "local";
-  if (useRemote) {
-    const script = document.createElement("script");
-    script.id = id;
-    script.src = getInspectorScriptUrl(opts.scriptUrl ?? REMOTE_INSPECTOR_SCRIPT_URL, true);
-    document.head.appendChild(script);
-    return null;
-  }
-  return import(
-    /* @vite-ignore */
-    "./inspector.js"
-  ).then((m) => {
-    try {
-      m.default();
-    } catch (err) {
+  const useLocal = opts.scriptSource === "local";
+  const scriptUrl = useLocal ? opts.localScriptUrl ?? "/_archie/inspector.js" : getInspectorScriptUrl(opts.scriptUrl ?? REMOTE_INSPECTOR_SCRIPT_URL, true);
+  const script = document.createElement("script");
+  script.id = id;
+  script.src = scriptUrl;
+  if (useLocal) {
+    script.onerror = () => {
       if (typeof console !== "undefined" && console.error) {
-        console.error("[Archie DevTools] Inspector failed to run:", err);
+        console.error(
+          "[Archie DevTools] Failed to load local inspector from",
+          scriptUrl,
+          "\u2014 is archieDevTools() registered in your vite.config?"
+        );
       }
-      throw err;
-    }
-    const script = document.createElement("script");
-    script.id = id;
-    document.head.appendChild(script);
-    return script;
-  }).catch((err) => {
-    if (typeof console !== "undefined" && console.error) {
-      console.error("[Archie DevTools] Failed to load inspector:", err);
-    }
-    throw err;
-  });
+    };
+  }
+  document.head.appendChild(script);
 }
 
 // src/client/route-listener/routeListener.ts
@@ -9348,9 +9345,9 @@ function useArchieDevToolsRuntime({
     }
     const unsubscribe = setupArchieRouteListener(router);
     if (inspector !== false) {
-      const isLocalHost = typeof window !== "undefined" && (window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1");
+      const useLocalInspector = readArchieLocalInspectorFlag();
       injectInspector({
-        scriptSource: isLocalHost ? "local" : "remote",
+        ...useLocalInspector ? { scriptSource: "local" } : { scriptSource: "remote" },
         ...inspectorOptionsRef.current
       });
     }

package/dist/client/client.mjs

@@ -1,6 +1,6 @@
-import {
-  __publicField
-} from "../chunk-QZ7TP4HQ.mjs";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key2, value) => key2 in obj ? __defProp(obj, key2, { enumerable: true, configurable: true, writable: true, value }) : obj[key2] = value;
+var __publicField = (obj, key2, value) => __defNormalProp(obj, typeof key2 !== "symbol" ? key2 + "" : key2, value);
 
 // src/client/dnd/DndProvider.tsx
 import { useCallback as useCallback9, useEffect as useEffect13 } from "react";
@@ -9080,6 +9080,15 @@ function DndProvider({ children }) {
 // src/client/useArchieDevToolsRuntime.ts
 import { useEffect as useEffect14, useRef as useRef11 } from "react";
 
+// src/client/archieLocalInspectorEnv.ts
+function readArchieLocalInspectorFlag() {
+  try {
+    return import.meta.env?.VITE_ARCHIE_LOCAL_INSPECTOR === "true";
+  } catch {
+    return false;
+  }
+}
+
 // src/client/inject-inspector/archieOrigins.ts
 var ARCHIE_HOST_ORIGINS = [
   "https://app.dev.archie-platform.com",
@@ -9135,10 +9144,10 @@ function isLocalDev(referrer) {
   }
 }
 function injectInspector(opts = {}) {
-  if (typeof document === "undefined") return null;
+  if (typeof document === "undefined") return;
   const id = opts.id ?? DEFAULT_SCRIPT_ID;
   const existing = document.getElementById(id);
-  if (existing) return Promise.resolve(existing);
+  if (existing) return;
   const win = typeof window !== "undefined" ? window : null;
   if (win) {
     const referrer = typeof document.referrer === "string" ? document.referrer : "";
@@ -9176,36 +9185,23 @@ function injectInspector(opts = {}) {
       win["__ARCHIE_INSPECTOR_TARGET_ORIGIN__"] = target;
     }
   }
-  const useRemote = opts.scriptSource !== "local";
-  if (useRemote) {
-    const script = document.createElement("script");
-    script.id = id;
-    script.src = getInspectorScriptUrl(opts.scriptUrl ?? REMOTE_INSPECTOR_SCRIPT_URL, true);
-    document.head.appendChild(script);
-    return null;
-  }
-  return import(
-    /* @vite-ignore */
-    "./inspector.js"
-  ).then((m) => {
-    try {
-      m.default();
-    } catch (err) {
+  const useLocal = opts.scriptSource === "local";
+  const scriptUrl = useLocal ? opts.localScriptUrl ?? "/_archie/inspector.js" : getInspectorScriptUrl(opts.scriptUrl ?? REMOTE_INSPECTOR_SCRIPT_URL, true);
+  const script = document.createElement("script");
+  script.id = id;
+  script.src = scriptUrl;
+  if (useLocal) {
+    script.onerror = () => {
       if (typeof console !== "undefined" && console.error) {
-        console.error("[Archie DevTools] Inspector failed to run:", err);
+        console.error(
+          "[Archie DevTools] Failed to load local inspector from",
+          scriptUrl,
+          "\u2014 is archieDevTools() registered in your vite.config?"
+        );
       }
-      throw err;
-    }
-    const script = document.createElement("script");
-    script.id = id;
-    document.head.appendChild(script);
-    return script;
-  }).catch((err) => {
-    if (typeof console !== "undefined" && console.error) {
-      console.error("[Archie DevTools] Failed to load inspector:", err);
-    }
-    throw err;
-  });
+    };
+  }
+  document.head.appendChild(script);
 }
 
 // src/client/route-listener/routeListener.ts
@@ -9314,9 +9310,9 @@ function useArchieDevToolsRuntime({
     }
     const unsubscribe = setupArchieRouteListener(router);
     if (inspector !== false) {
-      const isLocalHost = typeof window !== "undefined" && (window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1");
+      const useLocalInspector = readArchieLocalInspectorFlag();
       injectInspector({
-        scriptSource: isLocalHost ? "local" : "remote",
+        ...useLocalInspector ? { scriptSource: "local" } : { scriptSource: "remote" },
         ...inspectorOptionsRef.current
       });
     }

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import { ResolvedConfig } from 'vite';
+import { ResolvedConfig, ViteDevServer } from 'vite';
 
 interface ArchieDevToolsOptions {
     /**
@@ -17,6 +17,7 @@ interface ArchieDevToolsPlugin {
     enforce?: 'pre' | 'post';
     config?: () => object;
     configResolved?: (config: ResolvedConfig) => void;
+    configureServer?: (server: ViteDevServer) => void;
     transform?: (code: string, id: string) => Promise<{
         code: string;
         map?: object | null;

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { ResolvedConfig } from 'vite';
+import { ResolvedConfig, ViteDevServer } from 'vite';
 
 interface ArchieDevToolsOptions {
     /**
@@ -17,6 +17,7 @@ interface ArchieDevToolsPlugin {
     enforce?: 'pre' | 'post';
     config?: () => object;
     configResolved?: (config: ResolvedConfig) => void;
+    configureServer?: (server: ViteDevServer) => void;
     transform?: (code: string, id: string) => Promise<{
         code: string;
         map?: object | null;

package/dist/index.js

@@ -28,11 +28,13 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
-var index_exports = {};
-__export(index_exports, {
+var src_exports = {};
+__export(src_exports, {
   archieDevTools: () => archieDevTools
 });
-module.exports = __toCommonJS(index_exports);
+module.exports = __toCommonJS(src_exports);
+var import_node_fs = require("fs");
+var import_node_path = require("path");
 
 // src/client/dnd/virtual/dndScopeVirtualModule.ts
 var INTERNAL_DND_SCOPE_IMPORT_SOURCE = "virtual:archie-devtools/dnd-scope";
@@ -96,7 +98,8 @@ function babelPluginDndAuto({ types: t }, opts = {}) {
       } else {
         continue;
       }
-      props.push(t.objectProperty(t.identifier(keyName), value));
+      const key = /^[a-zA-Z_$][\w$]*$/.test(keyName) ? t.identifier(keyName) : t.stringLiteral(keyName);
+      props.push(t.objectProperty(key, value));
     }
     return t.objectExpression(props);
   }
@@ -483,6 +486,7 @@ function babelPluginEditorMeta({ types: t }, opts = {}) {
 }
 
 // src/index.ts
+var LOCAL_INSPECTOR_SERVE_PATH = "/_archie/inspector.js";
 function archieDevTools(options = {}) {
   const {
     debug = false,
@@ -510,6 +514,20 @@ function archieDevTools(options = {}) {
     configResolved(config) {
       includeHostSourceRef = !config.isProduction;
     },
+    configureServer(server) {
+      server.middlewares.use(LOCAL_INSPECTOR_SERVE_PATH, (_req, res) => {
+        const standaloneFile = (0, import_node_path.join)(__dirname, "../src/client/inject-inspector/inspector.standalone.js");
+        try {
+          const content = (0, import_node_fs.readFileSync)(standaloneFile, "utf-8");
+          res.setHeader("Content-Type", "application/javascript; charset=utf-8");
+          res.setHeader("Cache-Control", "no-store");
+          res.end(content);
+        } catch {
+          res.statusCode = 404;
+          res.end("Not found");
+        }
+      });
+    },
     async transform(code, id) {
       if (!/\.[jt]sx$/.test(id) || /node_modules/.test(id)) return null;
       try {

package/dist/index.mjs

@@ -1,4 +1,13 @@
-import "./chunk-QZ7TP4HQ.mjs";
+// node_modules/tsup/assets/esm_shims.js
+import path from "path";
+import { fileURLToPath } from "url";
+var getFilename = () => fileURLToPath(import.meta.url);
+var getDirname = () => path.dirname(getFilename());
+var __dirname = /* @__PURE__ */ getDirname();
+
+// src/index.ts
+import { readFileSync } from "fs";
+import { join } from "path";
 
 // src/client/dnd/virtual/dndScopeVirtualModule.ts
 var INTERNAL_DND_SCOPE_IMPORT_SOURCE = "virtual:archie-devtools/dnd-scope";
@@ -62,7 +71,8 @@ function babelPluginDndAuto({ types: t }, opts = {}) {
       } else {
         continue;
       }
-      props.push(t.objectProperty(t.identifier(keyName), value));
+      const key = /^[a-zA-Z_$][\w$]*$/.test(keyName) ? t.identifier(keyName) : t.stringLiteral(keyName);
+      props.push(t.objectProperty(key, value));
     }
     return t.objectExpression(props);
   }
@@ -129,16 +139,16 @@ function babelPluginDndAuto({ types: t }, opts = {}) {
   return {
     name: "babel-plugin-dnd-auto",
     visitor: {
-      ExportDefaultDeclaration(path, state) {
+      ExportDefaultDeclaration(path2, state) {
         const filename = state.filename ?? "";
         if (fileExclude.test(filename)) return;
         if (fileMatch && !fileMatch.test(filename)) return;
-        const { declaration } = path.node;
+        const { declaration } = path2.node;
         if (!t.isFunctionDeclaration(declaration)) return;
         const componentName = declaration.id?.name ?? "Component";
         const scopeCounter = { n: 0 };
         let didTransform = false;
-        path.traverse({
+        path2.traverse({
           ReturnStatement(retPath) {
             const fnParent = retPath.getFunctionParent();
             if (fnParent?.node !== declaration) return;
@@ -208,8 +218,8 @@ function babelPluginEditorMeta({ types: t }, opts = {}) {
   function computeNodeId(file, line, col, componentName) {
     return `${file}:${line}:${col}:${componentName}`;
   }
-  function isMovable(path) {
-    const elPath = path.parentPath;
+  function isMovable(path2) {
+    const elPath = path2.parentPath;
     if (!elPath) return false;
     const parentEl = elPath.parentPath;
     if (!parentEl || !parentEl.isJSXElement()) return false;
@@ -218,8 +228,8 @@ function babelPluginEditorMeta({ types: t }, opts = {}) {
     );
     return siblings.length >= 2;
   }
-  function getParentNodeId(path, file) {
-    const elPath = path.parentPath;
+  function getParentNodeId(path2, file) {
+    const elPath = path2.parentPath;
     if (!elPath) return null;
     let ancestor = elPath.parentPath;
     while (ancestor) {
@@ -323,10 +333,10 @@ function babelPluginEditorMeta({ types: t }, opts = {}) {
   return {
     name: "babel-plugin-editor-meta",
     visitor: {
-      CallExpression(path, state) {
+      CallExpression(path2, state) {
         const filename = state.filename ?? "";
         if (fileExclude.test(filename)) return;
-        const callee = path.node.callee;
+        const callee = path2.node.callee;
         let isCreateElement = false;
         let isCloneElement = false;
         if (t.isIdentifier(callee, { name: "createElement" })) {
@@ -339,7 +349,7 @@ function babelPluginEditorMeta({ types: t }, opts = {}) {
           isCloneElement = true;
         }
         if (!isCreateElement && !isCloneElement) return;
-        const args = path.node.arguments;
+        const args = path2.node.arguments;
         if (args.length < 2) return;
         if (isCreateElement && !t.isStringLiteral(args[0])) return;
         const propsArg = args[1];
@@ -364,37 +374,37 @@ function babelPluginEditorMeta({ types: t }, opts = {}) {
           [t.objectExpression([t.spreadElement(propsArg)])]
         );
       },
-      JSXOpeningElement(path, state) {
+      JSXOpeningElement(path2, state) {
         const filename = state.filename ?? "";
         if (fileExclude.test(filename)) return;
-        const existing = path.node.attributes.find(
+        const existing = path2.node.attributes.find(
           (a) => t.isJSXAttribute(a) && t.isJSXIdentifier(a.name, { name: "__editorMeta" })
         );
         if (existing) return;
-        const loc = path.node.loc?.start;
+        const loc = path2.node.loc?.start;
         if (!loc) return;
         const root = state.file.opts.root ?? "";
         const file = root ? nodePath.relative(root, filename) : filename;
         const line = loc.line;
         const col = loc.column + 1;
-        const componentName = getJSXTagName(path.node);
+        const componentName = getJSXTagName(path2.node);
         if (!componentName) return;
-        const isHostLikeMemberExpression = isHostLikeMemberExpressionName(path.node.name);
+        const isHostLikeMemberExpression = isHostLikeMemberExpressionName(path2.node.name);
         const isHostElement = componentName[0] === componentName[0].toLowerCase();
-        sanitizeSpreadAttributes(path.node.attributes);
-        if (hasTruthyAsChildProp(path.node.attributes)) {
+        sanitizeSpreadAttributes(path2.node.attributes);
+        if (hasTruthyAsChildProp(path2.node.attributes)) {
           return;
         }
         let rootName = null;
-        if (t.isJSXIdentifier(path.node.name)) {
-          rootName = path.node.name.name;
-        } else if (t.isJSXMemberExpression(path.node.name)) {
-          let cur = path.node.name;
+        if (t.isJSXIdentifier(path2.node.name)) {
+          rootName = path2.node.name.name;
+        } else if (t.isJSXMemberExpression(path2.node.name)) {
+          let cur = path2.node.name;
           while (t.isJSXMemberExpression(cur)) cur = cur.object;
           if (t.isJSXIdentifier(cur)) rootName = cur.name;
         }
         if (rootName) {
-          const binding = path.scope.getBinding(rootName);
+          const binding = path2.scope.getBinding(rootName);
           if (binding) {
             const bp = binding.path;
             if (bp.isImportSpecifier() || bp.isImportDefaultSpecifier() || bp.isImportNamespaceSpecifier()) {
@@ -405,14 +415,14 @@ function babelPluginEditorMeta({ types: t }, opts = {}) {
                 if (isPackageImport(src) && !isHostLikeMemberExpression) return;
               }
             }
-            const programScope = path.scope.getProgramParent();
+            const programScope = path2.scope.getProgramParent();
             if (binding.scope !== programScope) return;
           }
         }
         const nodeId = computeNodeId(file, line, col, componentName);
-        const movable = isMovable(path);
-        const parentNodeId = getParentNodeId(path, file);
-        const staticPropsObj = extractStaticProps(path.node.attributes);
+        const movable = isMovable(path2);
+        const parentNodeId = getParentNodeId(path2, file);
+        const staticPropsObj = extractStaticProps(path2.node.attributes);
         const metaObj = t.objectExpression([
           t.objectProperty(t.identifier("nodeId"), t.stringLiteral(nodeId)),
           t.objectProperty(t.identifier("file"), t.stringLiteral(file)),
@@ -430,14 +440,14 @@ function babelPluginEditorMeta({ types: t }, opts = {}) {
           )
         ]);
         if (isHostElement && includeHostSourceRef) {
-          path.node.attributes.push(
+          path2.node.attributes.push(
             t.jsxAttribute(
               t.jsxIdentifier("data-archie-source-ref"),
               t.stringLiteral(`${file}::${line}::${col}`)
             )
           );
         }
-        path.node.attributes.push(
+        path2.node.attributes.push(
           t.jsxAttribute(
             t.jsxIdentifier("__editorMeta"),
             t.jsxExpressionContainer(metaObj)
@@ -449,6 +459,7 @@ function babelPluginEditorMeta({ types: t }, opts = {}) {
 }
 
 // src/index.ts
+var LOCAL_INSPECTOR_SERVE_PATH = "/_archie/inspector.js";
 function archieDevTools(options = {}) {
   const {
     debug = false,
@@ -476,6 +487,20 @@ function archieDevTools(options = {}) {
     configResolved(config) {
       includeHostSourceRef = !config.isProduction;
     },
+    configureServer(server) {
+      server.middlewares.use(LOCAL_INSPECTOR_SERVE_PATH, (_req, res) => {
+        const standaloneFile = join(__dirname, "../src/client/inject-inspector/inspector.standalone.js");
+        try {
+          const content = readFileSync(standaloneFile, "utf-8");
+          res.setHeader("Content-Type", "application/javascript; charset=utf-8");
+          res.setHeader("Cache-Control", "no-store");
+          res.end(content);
+        } catch {
+          res.statusCode = 404;
+          res.end("Not found");
+        }
+      });
+    },
     async transform(code, id) {
       if (!/\.[jt]sx$/.test(id) || /node_modules/.test(id)) return null;
       try {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@archie/devtools",
-  "version": "0.0.15",
+  "version": "0.0.17",
   "description": "DevTools for Archie generated applications - Route synchronization and editor communication",
   "repository": {
     "type": "git",
@@ -72,4 +72,4 @@
     "react-dom": ">=18.0.0",
     "react-router-dom": ">=6.4.0"
   }
-}
+}

package/dist/chunk-QZ7TP4HQ.mjs

@@ -1,7 +0,0 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-
-export {
-  __publicField
-};