@archie/devtools 0.1.2 → 0.1.3

package/README.md

@@ -89,6 +89,11 @@ opción `allowLegacyIds` es `true` (default en esta versión — transicional,
 se eliminará más adelante); con `allowLegacyIds: false` el elemento no se
 instrumenta.
 
+El plugin nunca estampa `data-vid` en runtime (eso lo hace el stamper de
+Genesis). El plugin Vite (`archieDevTools()`) solo VALIDA: en dev, un
+`JSXOpeningElement` sin `data-vid` dispara un warning una vez por archivo
+(`onMissingVid` en `babel-plugin-editor-meta.ts`).
+
 En runtime, `node-key.ts` resuelve la identidad con la prioridad
 `meta.vid` → `data-vid` del DOM → (legado) `meta.nodeId` → `runtime:N`, y
 `fiber-bridge.ts` expone `getNodeMeta(el)`, que valida el `NodeMeta`

package/dist/{chunk-WBZJILZ6.mjs → chunk-U4KG6UDY.mjs}

@@ -63,8 +63,10 @@ function babelPluginEditorMeta({ types: t }, opts = {}) {
     includeHostSourceRef = false,
     origin = "screen",
     templateOrigin = false,
-    allowLegacyIds = true
+    allowLegacyIds = true,
+    onMissingVid
   } = opts;
+  let missingVidWarned = false;
   function getJSXTagName(el) {
     const { name } = el;
     if (t.isJSXIdentifier(name)) return name.name;
@@ -883,6 +885,10 @@ function babelPluginEditorMeta({ types: t }, opts = {}) {
           }
         }
         const vid = readVidAttr(path2.node.attributes);
+        if (!vid && onMissingVid && !missingVidWarned) {
+          missingVidWarned = true;
+          onMissingVid({ file, line, col, componentName, instrumented: allowLegacyIds });
+        }
         if (!vid && !allowLegacyIds) return;
         const nodeId = vid ?? computeNodeId(file, line, col, componentName);
         const isKitOrigin = origin === "kit" || hasSlotAttr;

package/dist/client/client.js

@@ -4598,6 +4598,15 @@ function resolveVidFromElement(el) {
   const key2 = getNodeKeyFromElement(el);
   return VID_PATTERN.test(key2) ? key2 : null;
 }
+function resolveVidForScannedNode(nodeId, nodeMap, fallbackEl) {
+  const scannedVid = nodeId ? nodeMap.get(nodeId)?.editorMeta?.vid : void 0;
+  if (scannedVid && VID_PATTERN.test(scannedVid)) return scannedVid;
+  return fallbackEl ? resolveVidFromElement(fallbackEl) : null;
+}
+function resolveVidForScannedNodeStrict(nodeId, nodeMap) {
+  const scannedVid = nodeId ? nodeMap.get(nodeId)?.editorMeta?.vid : void 0;
+  return scannedVid && VID_PATTERN.test(scannedVid) ? scannedVid : null;
+}
 function getInspectorRefFromElement(el) {
   const resolved = resolveDragSurface(el);
   const host = resolved.host ?? el;
@@ -8294,12 +8303,12 @@ function useDragVisualLoop({
 
 // src/client/dnd/design-mode/useDragLifecycle.ts
 var import_react13 = require("react");
-function emitRefused(code, cause, element) {
+function emitRefused(code, cause, vid) {
   dispatchRuntimeEvent({
     type: "drag-refused",
     code,
     cause,
-    vid: element ? resolveVidFromElement(element) : null
+    vid
   });
 }
 function resolveLaneAllowedContainers(anchorElement, srcContainerId) {
@@ -8373,7 +8382,8 @@ function recordCommittedMove(args) {
     sourceLaneSnapshot,
     targetLaneSnapshot,
     resolveNodeElement,
-    recordMoveChange
+    recordMoveChange,
+    nodeMap
   } = args;
   const sourceLaneIdentitySnapshot = captureCommitLaneIdentitySnapshot(
     sourceLaneSnapshot,
@@ -8418,10 +8428,10 @@ function recordCommittedMove(args) {
   });
   const componentName = getEditorMeta(anchorEl)?.componentName;
   const operationId = `${command.at}:${anchorNodeId}`;
-  const targetVid = resolveVidFromElement(selectedEl);
   const targetContainerId = command.to.parentNodeId ?? command.to.laneContainerId;
   const targetContainerEl = targetContainerId ? resolveNodeElement(targetContainerId) : null;
-  const containerVid = targetContainerEl ? resolveVidFromElement(targetContainerEl) : null;
+  const targetVid = resolveVidForScannedNode(selectedNodeId, nodeMap, selectedEl);
+  const containerVid = resolveVidForScannedNode(targetContainerId, nodeMap, targetContainerEl);
   const binding = resolveRowBinding(selectedEl);
   const beforePayload = buildMovePayloadWithEffectiveIdentities({
     placement: command.from,
@@ -8568,7 +8578,7 @@ function useDragLifecycle({
       emitRefused(
         resolveRefusalCode(found.editorMeta, "GATE_REJECT"),
         "Node is not draggable (dynamic render, chrome, or kit-origin).",
-        found.element
+        resolveVidForScannedNode(activeId, refs.nodeMapRef.current, found.element)
       );
       return;
     }
@@ -8597,7 +8607,11 @@ function useDragLifecycle({
       emitRefused(
         resolveRefusalCode(anchorScanned?.editorMeta, "GATE_REJECT"),
         "Resolved drag anchor is not draggable.",
-        anchorScanned?.element ?? found.element
+        resolveVidForScannedNode(
+          anchor.anchorNodeId,
+          refs.nodeMapRef.current,
+          anchorScanned?.element ?? found.element
+        )
       );
       return;
     }
@@ -8613,7 +8627,7 @@ function useDragLifecycle({
     refs.droppableContainerIdsRef.current = droppableSet;
     dispatchRuntimeEvent({
       type: "drag-started",
-      targetVid: resolveVidFromElement(anchorScanned.element),
+      targetVid: resolveVidForScannedNode(anchorNodeId, refs.nodeMapRef.current, anchorScanned.element),
       droppable: Array.from(droppableSet)
     });
     const engineOptions = buildDragIntentEngineOptions(anchorScanned.element, srcContainerId, blockedContainerIds);
@@ -8694,7 +8708,7 @@ function useDragLifecycle({
         emitRefused(
           resolveRefusalCode(targetMeta, "CONTAINER_NOT_PLAIN"),
           "Drop target is outside the droppable set for this node.",
-          targetContainerEl
+          resolveVidForScannedNode(dropTargetId, refs.nodeMapRef.current, targetContainerEl)
         );
         clearDragState();
         syncHistoryAvailability();
@@ -8760,7 +8774,8 @@ function useDragLifecycle({
             sourceLaneSnapshot,
             targetLaneSnapshot,
             resolveNodeElement,
-            recordMoveChange
+            recordMoveChange,
+            nodeMap: refs.nodeMapRef.current
           });
         }
       }
@@ -8911,7 +8926,7 @@ function useResizeSession({
       return;
     }
     const inspectorRef = getInspectorRefFromElement(element);
-    const targetVid = resolveVidFromElement(element);
+    const targetVid = resolveVidForScannedNode(targetNodeId, refs.nodeMapRef.current, element);
     const resizeCmd = {
       type: "resize",
       mode,
@@ -9161,7 +9176,7 @@ function commitExternalDrop(x, y, engine, component, refs, resolveNodeElement, s
       };
     }
     const operationId = `${insertCommand.at}:${nodeId}`;
-    const containerVid = containerEl ? resolveVidFromElement(containerEl) : null;
+    const containerVid = resolveVidForScannedNodeStrict(intent.containerId, refs.nodeMapRef.current);
     const insertedVid = resolveVidFromElement(newElement);
     useDesignModeStore.getState().recordInsertChange({
       operationId,
@@ -10003,8 +10018,14 @@ function isPreviewOrigin(origin) {
 
 // src/client/inject-inspector/injectInspector.ts
 var DEFAULT_SCRIPT_ID = "archie-inspector-script";
-var REMOTE_INSPECTOR_SCRIPT_URL = "https://pub-bf238c278d9644b39ec34ecaca1d315c.r2.dev/inspector.standalone.js";
-function getInspectorScriptUrl(base, cacheBust = true) {
+var R2_INSPECTOR_BASE_URL = "https://pub-bf238c278d9644b39ec34ecaca1d315c.r2.dev";
+function readBuildVersion() {
+  return "0.1.3" ? "0.1.3" : null;
+}
+var REMOTE_INSPECTOR_VERSION = readBuildVersion();
+var isRemoteInspectorUrlVersioned = REMOTE_INSPECTOR_VERSION !== null;
+var REMOTE_INSPECTOR_SCRIPT_URL = REMOTE_INSPECTOR_VERSION ? `${R2_INSPECTOR_BASE_URL}/inspector.standalone@${REMOTE_INSPECTOR_VERSION}.js` : `${R2_INSPECTOR_BASE_URL}/inspector.standalone.js`;
+function getInspectorScriptUrl(base, cacheBust) {
   const separator = base.includes("?") ? "&" : "?";
   return cacheBust ? `${base}${separator}h=${Date.now()}` : base;
 }
@@ -10060,7 +10081,8 @@ function injectInspector(opts = {}) {
     }
   }
   const useLocal = opts.scriptSource === "local";
-  const scriptUrl = useLocal ? opts.localScriptUrl ?? "/_archie/inspector.js" : getInspectorScriptUrl(opts.scriptUrl ?? REMOTE_INSPECTOR_SCRIPT_URL, true);
+  const usingDefaultVersionedUrl = opts.scriptUrl === void 0 && isRemoteInspectorUrlVersioned;
+  const scriptUrl = useLocal ? opts.localScriptUrl ?? "/_archie/inspector.js" : getInspectorScriptUrl(opts.scriptUrl ?? REMOTE_INSPECTOR_SCRIPT_URL, !usingDefaultVersionedUrl);
   const script = document.createElement("script");
   script.id = id;
   script.src = scriptUrl;

package/dist/client/client.mjs

@@ -4563,6 +4563,15 @@ function resolveVidFromElement(el) {
   const key2 = getNodeKeyFromElement(el);
   return VID_PATTERN.test(key2) ? key2 : null;
 }
+function resolveVidForScannedNode(nodeId, nodeMap, fallbackEl) {
+  const scannedVid = nodeId ? nodeMap.get(nodeId)?.editorMeta?.vid : void 0;
+  if (scannedVid && VID_PATTERN.test(scannedVid)) return scannedVid;
+  return fallbackEl ? resolveVidFromElement(fallbackEl) : null;
+}
+function resolveVidForScannedNodeStrict(nodeId, nodeMap) {
+  const scannedVid = nodeId ? nodeMap.get(nodeId)?.editorMeta?.vid : void 0;
+  return scannedVid && VID_PATTERN.test(scannedVid) ? scannedVid : null;
+}
 function getInspectorRefFromElement(el) {
   const resolved = resolveDragSurface(el);
   const host = resolved.host ?? el;
@@ -8259,12 +8268,12 @@ function useDragVisualLoop({
 
 // src/client/dnd/design-mode/useDragLifecycle.ts
 import { useState as useState5, useCallback as useCallback6 } from "react";
-function emitRefused(code, cause, element) {
+function emitRefused(code, cause, vid) {
   dispatchRuntimeEvent({
     type: "drag-refused",
     code,
     cause,
-    vid: element ? resolveVidFromElement(element) : null
+    vid
   });
 }
 function resolveLaneAllowedContainers(anchorElement, srcContainerId) {
@@ -8338,7 +8347,8 @@ function recordCommittedMove(args) {
     sourceLaneSnapshot,
     targetLaneSnapshot,
     resolveNodeElement,
-    recordMoveChange
+    recordMoveChange,
+    nodeMap
   } = args;
   const sourceLaneIdentitySnapshot = captureCommitLaneIdentitySnapshot(
     sourceLaneSnapshot,
@@ -8383,10 +8393,10 @@ function recordCommittedMove(args) {
   });
   const componentName = getEditorMeta(anchorEl)?.componentName;
   const operationId = `${command.at}:${anchorNodeId}`;
-  const targetVid = resolveVidFromElement(selectedEl);
   const targetContainerId = command.to.parentNodeId ?? command.to.laneContainerId;
   const targetContainerEl = targetContainerId ? resolveNodeElement(targetContainerId) : null;
-  const containerVid = targetContainerEl ? resolveVidFromElement(targetContainerEl) : null;
+  const targetVid = resolveVidForScannedNode(selectedNodeId, nodeMap, selectedEl);
+  const containerVid = resolveVidForScannedNode(targetContainerId, nodeMap, targetContainerEl);
   const binding = resolveRowBinding(selectedEl);
   const beforePayload = buildMovePayloadWithEffectiveIdentities({
     placement: command.from,
@@ -8533,7 +8543,7 @@ function useDragLifecycle({
       emitRefused(
         resolveRefusalCode(found.editorMeta, "GATE_REJECT"),
         "Node is not draggable (dynamic render, chrome, or kit-origin).",
-        found.element
+        resolveVidForScannedNode(activeId, refs.nodeMapRef.current, found.element)
       );
       return;
     }
@@ -8562,7 +8572,11 @@ function useDragLifecycle({
       emitRefused(
         resolveRefusalCode(anchorScanned?.editorMeta, "GATE_REJECT"),
         "Resolved drag anchor is not draggable.",
-        anchorScanned?.element ?? found.element
+        resolveVidForScannedNode(
+          anchor.anchorNodeId,
+          refs.nodeMapRef.current,
+          anchorScanned?.element ?? found.element
+        )
       );
       return;
     }
@@ -8578,7 +8592,7 @@ function useDragLifecycle({
     refs.droppableContainerIdsRef.current = droppableSet;
     dispatchRuntimeEvent({
       type: "drag-started",
-      targetVid: resolveVidFromElement(anchorScanned.element),
+      targetVid: resolveVidForScannedNode(anchorNodeId, refs.nodeMapRef.current, anchorScanned.element),
       droppable: Array.from(droppableSet)
     });
     const engineOptions = buildDragIntentEngineOptions(anchorScanned.element, srcContainerId, blockedContainerIds);
@@ -8659,7 +8673,7 @@ function useDragLifecycle({
         emitRefused(
           resolveRefusalCode(targetMeta, "CONTAINER_NOT_PLAIN"),
           "Drop target is outside the droppable set for this node.",
-          targetContainerEl
+          resolveVidForScannedNode(dropTargetId, refs.nodeMapRef.current, targetContainerEl)
         );
         clearDragState();
         syncHistoryAvailability();
@@ -8725,7 +8739,8 @@ function useDragLifecycle({
             sourceLaneSnapshot,
             targetLaneSnapshot,
             resolveNodeElement,
-            recordMoveChange
+            recordMoveChange,
+            nodeMap: refs.nodeMapRef.current
           });
         }
       }
@@ -8876,7 +8891,7 @@ function useResizeSession({
       return;
     }
     const inspectorRef = getInspectorRefFromElement(element);
-    const targetVid = resolveVidFromElement(element);
+    const targetVid = resolveVidForScannedNode(targetNodeId, refs.nodeMapRef.current, element);
     const resizeCmd = {
       type: "resize",
       mode,
@@ -9126,7 +9141,7 @@ function commitExternalDrop(x, y, engine, component, refs, resolveNodeElement, s
       };
     }
     const operationId = `${insertCommand.at}:${nodeId}`;
-    const containerVid = containerEl ? resolveVidFromElement(containerEl) : null;
+    const containerVid = resolveVidForScannedNodeStrict(intent.containerId, refs.nodeMapRef.current);
     const insertedVid = resolveVidFromElement(newElement);
     useDesignModeStore.getState().recordInsertChange({
       operationId,
@@ -9968,8 +9983,14 @@ function isPreviewOrigin(origin) {
 
 // src/client/inject-inspector/injectInspector.ts
 var DEFAULT_SCRIPT_ID = "archie-inspector-script";
-var REMOTE_INSPECTOR_SCRIPT_URL = "https://pub-bf238c278d9644b39ec34ecaca1d315c.r2.dev/inspector.standalone.js";
-function getInspectorScriptUrl(base, cacheBust = true) {
+var R2_INSPECTOR_BASE_URL = "https://pub-bf238c278d9644b39ec34ecaca1d315c.r2.dev";
+function readBuildVersion() {
+  return "0.1.3" ? "0.1.3" : null;
+}
+var REMOTE_INSPECTOR_VERSION = readBuildVersion();
+var isRemoteInspectorUrlVersioned = REMOTE_INSPECTOR_VERSION !== null;
+var REMOTE_INSPECTOR_SCRIPT_URL = REMOTE_INSPECTOR_VERSION ? `${R2_INSPECTOR_BASE_URL}/inspector.standalone@${REMOTE_INSPECTOR_VERSION}.js` : `${R2_INSPECTOR_BASE_URL}/inspector.standalone.js`;
+function getInspectorScriptUrl(base, cacheBust) {
   const separator = base.includes("?") ? "&" : "?";
   return cacheBust ? `${base}${separator}h=${Date.now()}` : base;
 }
@@ -10025,7 +10046,8 @@ function injectInspector(opts = {}) {
     }
   }
   const useLocal = opts.scriptSource === "local";
-  const scriptUrl = useLocal ? opts.localScriptUrl ?? "/_archie/inspector.js" : getInspectorScriptUrl(opts.scriptUrl ?? REMOTE_INSPECTOR_SCRIPT_URL, true);
+  const usingDefaultVersionedUrl = opts.scriptUrl === void 0 && isRemoteInspectorUrlVersioned;
+  const scriptUrl = useLocal ? opts.localScriptUrl ?? "/_archie/inspector.js" : getInspectorScriptUrl(opts.scriptUrl ?? REMOTE_INSPECTOR_SCRIPT_URL, !usingDefaultVersionedUrl);
   const script = document.createElement("script");
   script.id = id;
   script.src = scriptUrl;

package/dist/collection-binding.mjs

@@ -1,6 +1,6 @@
 import {
   meaningfulChildren
-} from "./chunk-WBZJILZ6.mjs";
+} from "./chunk-U4KG6UDY.mjs";
 
 // src/babel-plugin-collection-binding.ts
 import { VISITOR_KEYS } from "@babel/types";

package/dist/index.d.mts

@@ -165,6 +165,23 @@ interface EditorMetaPluginOptions {
      * @default true
      */
     allowLegacyIds?: boolean;
+    /**
+     * Called at most once per file, the first time a `JSXOpeningElement` has
+     * no well-formed `data-vid`. Signal only — never itself changes
+     * instrumentation. `instrumented` reports what THIS element gets right
+     * after the callback returns: `true` when it falls back to legacy
+     * `file:line:col:componentName` addressing (`allowLegacyIds` true, the
+     * default), `false` when the plugin declines to instrument it at all
+     * (`allowLegacyIds: false`) — the callback fires before that decision, so
+     * a caller cannot infer it from call order alone.
+     */
+    onMissingVid?: (info: {
+        file: string;
+        line: number;
+        col: number;
+        componentName: string;
+        instrumented: boolean;
+    }) => void;
 }
 declare function babelPluginEditorMeta({ types: t }: {
     types: typeof types;

package/dist/index.d.ts

@@ -165,6 +165,23 @@ interface EditorMetaPluginOptions {
      * @default true
      */
     allowLegacyIds?: boolean;
+    /**
+     * Called at most once per file, the first time a `JSXOpeningElement` has
+     * no well-formed `data-vid`. Signal only — never itself changes
+     * instrumentation. `instrumented` reports what THIS element gets right
+     * after the callback returns: `true` when it falls back to legacy
+     * `file:line:col:componentName` addressing (`allowLegacyIds` true, the
+     * default), `false` when the plugin declines to instrument it at all
+     * (`allowLegacyIds: false`) — the callback fires before that decision, so
+     * a caller cannot infer it from call order alone.
+     */
+    onMissingVid?: (info: {
+        file: string;
+        line: number;
+        col: number;
+        componentName: string;
+        instrumented: boolean;
+    }) => void;
 }
 declare function babelPluginEditorMeta({ types: t }: {
     types: typeof types;

package/dist/index.js

@@ -262,8 +262,10 @@ function babelPluginEditorMeta({ types: t }, opts = {}) {
     includeHostSourceRef = false,
     origin = "screen",
     templateOrigin = false,
-    allowLegacyIds = true
+    allowLegacyIds = true,
+    onMissingVid
   } = opts;
+  let missingVidWarned = false;
   function getJSXTagName(el) {
     const { name } = el;
     if (t.isJSXIdentifier(name)) return name.name;
@@ -1082,6 +1084,10 @@ function babelPluginEditorMeta({ types: t }, opts = {}) {
           }
         }
         const vid = readVidAttr(path.node.attributes);
+        if (!vid && onMissingVid && !missingVidWarned) {
+          missingVidWarned = true;
+          onMissingVid({ file, line, col, componentName, instrumented: allowLegacyIds });
+        }
         if (!vid && !allowLegacyIds) return;
         const nodeId = vid ?? computeNodeId(file, line, col, componentName);
         const isKitOrigin = origin === "kit" || hasSlotAttr;
@@ -1216,7 +1222,17 @@ function archieDevTools(options = {}) {
   };
   let babelCore = null;
   let includeHostSourceRef = false;
+  let isDevServer = false;
   const transformedByHook = /* @__PURE__ */ new Set();
+  const warnedMissingVidFiles = /* @__PURE__ */ new Set();
+  function warnMissingVid(info) {
+    if (warnedMissingVidFiles.has(info.file)) return;
+    warnedMissingVidFiles.add(info.file);
+    const outcome = info.instrumented ? "the visual editor falls back to legacy file:line:col addressing for it, which breaks on every source edit" : "this file is not instrumented for the visual editor at all";
+    console.warn(
+      `[Archie DevTools] Missing data-vid on <${info.componentName}> at ${info.file}:${info.line}:${info.col}. This file was not stamped with stable element ids \u2014 ${outcome}. Re-run the Genesis stamper.`
+    );
+  }
   const plugin = {
     name: "vite-plugin-archie-devtools",
     enforce: "pre",
@@ -1232,6 +1248,7 @@ function archieDevTools(options = {}) {
     },
     configResolved(config) {
       includeHostSourceRef = !config.isProduction;
+      isDevServer = config.command === "serve";
     },
     configureServer(server) {
       server.middlewares.use(LOCAL_INSPECTOR_SERVE_PATH, (_req, res) => {
@@ -1267,7 +1284,10 @@ function archieDevTools(options = {}) {
         const result = await babel.transformAsync(code, {
           filename: id,
           plugins: [
-            (b) => babelPluginEditorMeta(b, { includeHostSourceRef }),
+            (b) => babelPluginEditorMeta(b, {
+              includeHostSourceRef,
+              onMissingVid: isDevServer ? warnMissingVid : void 0
+            }),
             ...dndPages.test(id) ? [(b) => babelPluginDndAuto(b, { importSource: INTERNAL_DND_SCOPE_IMPORT_SOURCE })] : []
           ],
           parserOpts: {
@@ -1307,7 +1327,8 @@ function archieDevTools(options = {}) {
         if (!/node_modules/.test(context.id) && !transformedByHook.has(context.id)) {
           babelOptions.plugins.push(
             (babel) => babelPluginEditorMeta(babel, {
-              includeHostSourceRef
+              includeHostSourceRef,
+              onMissingVid: isDevServer ? warnMissingVid : void 0
             })
           );
         }

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import {
   __dirname,
   babelPluginEditorMeta
-} from "./chunk-WBZJILZ6.mjs";
+} from "./chunk-U4KG6UDY.mjs";
 
 // src/index.ts
 import { readFileSync } from "fs";
@@ -186,7 +186,17 @@ function archieDevTools(options = {}) {
   };
   let babelCore = null;
   let includeHostSourceRef = false;
+  let isDevServer = false;
   const transformedByHook = /* @__PURE__ */ new Set();
+  const warnedMissingVidFiles = /* @__PURE__ */ new Set();
+  function warnMissingVid(info) {
+    if (warnedMissingVidFiles.has(info.file)) return;
+    warnedMissingVidFiles.add(info.file);
+    const outcome = info.instrumented ? "the visual editor falls back to legacy file:line:col addressing for it, which breaks on every source edit" : "this file is not instrumented for the visual editor at all";
+    console.warn(
+      `[Archie DevTools] Missing data-vid on <${info.componentName}> at ${info.file}:${info.line}:${info.col}. This file was not stamped with stable element ids \u2014 ${outcome}. Re-run the Genesis stamper.`
+    );
+  }
   const plugin = {
     name: "vite-plugin-archie-devtools",
     enforce: "pre",
@@ -202,6 +212,7 @@ function archieDevTools(options = {}) {
     },
     configResolved(config) {
       includeHostSourceRef = !config.isProduction;
+      isDevServer = config.command === "serve";
     },
     configureServer(server) {
       server.middlewares.use(LOCAL_INSPECTOR_SERVE_PATH, (_req, res) => {
@@ -237,7 +248,10 @@ function archieDevTools(options = {}) {
         const result = await babel.transformAsync(code, {
           filename: id,
           plugins: [
-            (b) => babelPluginEditorMeta(b, { includeHostSourceRef }),
+            (b) => babelPluginEditorMeta(b, {
+              includeHostSourceRef,
+              onMissingVid: isDevServer ? warnMissingVid : void 0
+            }),
             ...dndPages.test(id) ? [(b) => babelPluginDndAuto(b, { importSource: INTERNAL_DND_SCOPE_IMPORT_SOURCE })] : []
           ],
           parserOpts: {
@@ -277,7 +291,8 @@ function archieDevTools(options = {}) {
         if (!/node_modules/.test(context.id) && !transformedByHook.has(context.id)) {
           babelOptions.plugins.push(
             (babel) => babelPluginEditorMeta(babel, {
-              includeHostSourceRef
+              includeHostSourceRef,
+              onMissingVid: isDevServer ? warnMissingVid : void 0
             })
           );
         }