@archie/devtools 0.1.1 → 0.1.3

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;
@@ -350,11 +352,17 @@ function babelPluginEditorMeta({ types: t }, opts = {}) {
     }
     return "STATIC";
   }
-  const SHELL_FILE_RE = /(^|\/)shell\.jsx$/;
+  const SHELL_FILE_RE = /(^|\/)shell\.(jsx|tsx)$/;
   const SHELL_DIR_RE = /(^|\/)components\/shell\//;
+  const SHELL_BASENAME_RE = /shell/i;
   const CHROME_ANCESTOR_TAGS = /* @__PURE__ */ new Set(["nav", "aside", "header"]);
-  function computeIsChrome(file, path) {
+  function isChromeFilePath(file) {
     if (SHELL_FILE_RE.test(file) || SHELL_DIR_RE.test(file)) return true;
+    const base = file.split("/").pop() ?? file;
+    return SHELL_BASENAME_RE.test(base);
+  }
+  function computeIsChrome(file, path) {
+    if (isChromeFilePath(file)) return true;
     let current = path.parentPath;
     while (current) {
       if (current.isJSXElement()) {
@@ -368,17 +376,65 @@ function babelPluginEditorMeta({ types: t }, opts = {}) {
   function computeContainerKind(path) {
     const elPath = path.parentPath;
     if (!elPath?.isJSXElement()) return "none";
-    const children = meaningfulChildren(t, elPath.node.children);
-    if (children.length === 0) return "none";
-    const allPlain = children.every((c) => t.isJSXElement(c) || t.isJSXText(c));
+    if (!elPath.node.closingElement) return "none";
+    const children = elPath.node.children;
+    const allPlain = children.every((c) => {
+      if (t.isJSXElement(c)) return true;
+      if (t.isJSXText(c)) return c.value.trim() === "";
+      return false;
+    });
     return allPlain ? "plain" : "expression";
   }
-  function computeLockReason(isKitOrigin, isChrome, dynamicType, containerKind) {
+  const kitBoundNamesCache = /* @__PURE__ */ new WeakMap();
+  function computeKitBoundNames(programPath) {
+    const cached = kitBoundNamesCache.get(programPath.node);
+    if (cached) return cached;
+    const names = /* @__PURE__ */ new Set();
+    for (const stmt of programPath.node.body) {
+      if (!t.isVariableDeclaration(stmt)) continue;
+      for (const decl of stmt.declarations) {
+        if (!t.isObjectPattern(decl.id)) continue;
+        if (!decl.init || !t.isIdentifier(decl.init) || decl.init.name !== "Kit") continue;
+        for (const prop of decl.id.properties) {
+          if (!t.isObjectProperty(prop)) continue;
+          const value = t.isIdentifier(prop.value) ? prop.value : t.isIdentifier(prop.key) ? prop.key : null;
+          if (value) names.add(value.name);
+        }
+      }
+    }
+    kitBoundNamesCache.set(programPath.node, names);
+    return names;
+  }
+  function isKitComponentTagName(path) {
+    const name = path.node.name;
+    let head = null;
+    if (t.isJSXIdentifier(name)) {
+      head = name.name;
+    } else if (t.isJSXMemberExpression(name)) {
+      let cur = name;
+      while (t.isJSXMemberExpression(cur)) cur = cur.object;
+      if (t.isJSXIdentifier(cur)) head = cur.name;
+    }
+    if (!head || !/^[A-Z]/.test(head)) return false;
+    if (head === "Kit") return true;
+    const programPath = path.scope.getProgramParent().path;
+    if (programPath.isProgram() && computeKitBoundNames(programPath).has(head)) return true;
+    const binding = path.scope.getBinding(head);
+    if (binding) {
+      const bp = binding.path;
+      const isImport = bp.isImportSpecifier() || bp.isImportDefaultSpecifier() || bp.isImportNamespaceSpecifier();
+      if (isImport) {
+        const decl = bp.parentPath;
+        if (decl?.isImportDeclaration() && /kit-runtime/.test(decl.node.source.value)) return true;
+      }
+    }
+    return false;
+  }
+  function computeLockReason(isKitOrigin, isChrome, dynamicType) {
     if (isKitOrigin) return "KIT_INTERNAL";
     if (isChrome) return "CHROME_STRUCTURAL";
     if (dynamicType === "ARRAY") return "DYNAMIC_ARRAY";
     if (dynamicType === "CONDITIONAL") return "DYNAMIC_CONDITIONAL";
-    if (containerKind === "expression") return "EXPRESSION_CONTAINER";
     return void 0;
   }
   function isMovable(path) {
@@ -1028,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;
@@ -1055,7 +1115,8 @@ function babelPluginEditorMeta({ types: t }, opts = {}) {
           const dynamicType = computeDynamicType(path);
           const isChrome = computeIsChrome(file, path);
           const containerKind = computeContainerKind(path);
-          const lockReason = computeLockReason(isKitOrigin, isChrome, dynamicType, containerKind);
+          const isKitComponentContainer = isKitComponentTagName(path);
+          const lockReason = computeLockReason(isKitOrigin, isChrome, dynamicType);
           metaObj.properties.push(
             t.objectProperty(t.identifier("vid"), t.stringLiteral(vid)),
             t.objectProperty(t.identifier("isKitOrigin"), t.booleanLiteral(isKitOrigin)),
@@ -1063,6 +1124,11 @@ function babelPluginEditorMeta({ types: t }, opts = {}) {
             t.objectProperty(t.identifier("isChrome"), t.booleanLiteral(isChrome)),
             t.objectProperty(t.identifier("containerKind"), t.stringLiteral(containerKind))
           );
+          if (isKitComponentContainer) {
+            metaObj.properties.push(
+              t.objectProperty(t.identifier("isKitContainer"), t.booleanLiteral(true))
+            );
+          }
           if (lockReason) {
             metaObj.properties.push(
               t.objectProperty(t.identifier("lockReason"), t.stringLiteral(lockReason))
@@ -1156,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",
@@ -1172,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) => {
@@ -1207,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: {
@@ -1247,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-THKKWDMJ.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
             })
           );
         }