@archie/devtools 0.0.21 → 0.0.23

package/dist/index.mjs

@@ -178,6 +178,36 @@ function babelPluginDndAuto({ types: t }, opts = {}) {
 
 // src/babel-plugin-editor-meta.ts
 import * as nodePath from "path";
+var KIT_SLOT_ATTR = "data-kit-slot";
+var MAX_SLOT_SEGMENTS = 4;
+var NON_BINDING_ATTRS = /* @__PURE__ */ new Set(["__editorMeta", "key", "ref", KIT_SLOT_ATTR]);
+var STRUCTURAL_ATTRS = /* @__PURE__ */ new Set([
+  "id",
+  "htmlFor",
+  "slot",
+  "name",
+  "type",
+  "role",
+  // The camelCase carrier of the SAME durable key as `data-agent-id`: kit
+  // components take `agentId` and render it as the data attribute. Found on the
+  // real corpus (×4) — blocking only the dashed form would have left the prop
+  // form routable, and a durable key with a string-literal usage value sails
+  // straight through the usage-value law.
+  "agentId"
+]);
+function isNonContentAttribute(name) {
+  if (/^on[A-Z]/.test(name)) return true;
+  if (name.startsWith("data-")) return true;
+  return STRUCTURAL_ATTRS.has(name);
+}
+function normalizeSlot(raw) {
+  const value = raw.trim();
+  if (!value) return null;
+  const segments = value.split("/");
+  if (segments.length > MAX_SLOT_SEGMENTS) return null;
+  if (segments.some((segment) => segment.trim() === "")) return null;
+  return value;
+}
 function isPackageImport(src) {
   if (src.startsWith(".") || src.startsWith("/")) return false;
   if (src.startsWith("@")) {
@@ -193,7 +223,8 @@ function babelPluginEditorMeta({ types: t }, opts = {}) {
   const {
     fileExclude = /node_modules/,
     instrumentImported = true,
-    includeHostSourceRef = false
+    includeHostSourceRef = false,
+    origin = "screen"
   } = opts;
   function getJSXTagName(el) {
     const { name } = el;
@@ -306,29 +337,275 @@ function babelPluginEditorMeta({ types: t }, opts = {}) {
     }
     return false;
   }
+  function buildPayloadFilter(payload) {
+    return t.callExpression(
+      t.arrowFunctionExpression(
+        [
+          t.objectPattern([
+            t.objectProperty(
+              t.identifier("__editorMeta"),
+              t.identifier("_$em"),
+              false,
+              false
+            ),
+            t.objectProperty(
+              t.stringLiteral(KIT_SLOT_ATTR),
+              t.identifier("_$ks"),
+              false,
+              false
+            ),
+            t.restElement(t.identifier("_$r"))
+          ])
+        ],
+        t.identifier("_$r")
+      ),
+      [t.objectExpression([t.spreadElement(payload)])]
+    );
+  }
   function sanitizeSpreadAttributes(attrs) {
     for (const attr of attrs) {
       if (!t.isJSXSpreadAttribute(attr)) continue;
       if (isMetaStripSpreadExpression(attr.argument)) continue;
-      const origArg = attr.argument;
-      attr.argument = t.callExpression(
-        t.arrowFunctionExpression(
-          [
-            t.objectPattern([
-              t.objectProperty(
-                t.identifier("__editorMeta"),
-                t.identifier("_$em"),
-                false,
-                false
-              ),
-              t.restElement(t.identifier("_$r"))
-            ])
-          ],
-          t.identifier("_$r")
-        ),
-        [t.objectExpression([t.spreadElement(origArg)])]
-      );
+      attr.argument = buildPayloadFilter(attr.argument);
+    }
+  }
+  function consumeKitSlot(attrs) {
+    let slot = null;
+    let found = false;
+    for (const attr of attrs) {
+      if (!t.isJSXAttribute(attr)) continue;
+      if (!t.isJSXIdentifier(attr.name, { name: KIT_SLOT_ATTR })) continue;
+      found = true;
+      if (slot !== null) continue;
+      const { value } = attr;
+      if (t.isStringLiteral(value)) {
+        slot = normalizeSlot(value.value);
+      } else if (t.isJSXExpressionContainer(value) && t.isStringLiteral(value.expression)) {
+        slot = normalizeSlot(value.expression.value);
+      }
     }
+    if (!found) return { slot: null, found: false, attrs };
+    return {
+      slot,
+      found: true,
+      attrs: attrs.filter(
+        (attr) => !(t.isJSXAttribute(attr) && t.isJSXIdentifier(attr.name, { name: KIT_SLOT_ATTR }))
+      )
+    };
+  }
+  function getFunctionName(fn) {
+    const node = fn.node;
+    if (t.isFunctionDeclaration(node) && node.id) return node.id.name;
+    if (t.isFunctionExpression(node) && node.id) return node.id.name;
+    const parent = fn.parentPath;
+    if (parent?.isVariableDeclarator() && t.isIdentifier(parent.node.id)) {
+      return parent.node.id.name;
+    }
+    return null;
+  }
+  function buildPropMap(pattern) {
+    const map = /* @__PURE__ */ new Map();
+    for (const prop of pattern.properties) {
+      if (!t.isObjectProperty(prop) || prop.computed) continue;
+      const key = t.isIdentifier(prop.key) ? prop.key.name : t.isStringLiteral(prop.key) ? prop.key.value : null;
+      if (!key) continue;
+      const value = prop.value;
+      if (t.isIdentifier(value)) {
+        map.set(value.name, key);
+      } else if (t.isAssignmentPattern(value) && t.isIdentifier(value.left)) {
+        map.set(value.left.name, key);
+      }
+    }
+    return map;
+  }
+  function resolvePropContext(path2) {
+    let fn = path2.getFunctionParent();
+    while (fn) {
+      const [first] = fn.node.params;
+      if (first && t.isObjectPattern(first)) {
+        if (fn.scope.parent !== fn.scope.getProgramParent()) return null;
+        return {
+          componentScope: fn.scope,
+          propMap: buildPropMap(first),
+          componentName: getFunctionName(fn)
+        };
+      }
+      fn = fn.getFunctionParent();
+    }
+    return null;
+  }
+  function resolveProp(name, scope, ctx) {
+    const prop = ctx.propMap.get(name);
+    if (!prop) return null;
+    const binding = scope.getBinding(name);
+    if (!binding) return null;
+    if (binding.scope !== ctx.componentScope) return null;
+    if (!binding.constant) return null;
+    return prop;
+  }
+  function isScopeWithinComponent(scope, ctx) {
+    let current = scope;
+    while (current) {
+      if (current === ctx.componentScope) return true;
+      current = current.parent;
+    }
+    return false;
+  }
+  function resolveLocalConstInit(name, scope, ctx) {
+    const binding = scope.getBinding(name);
+    if (!binding) return null;
+    if (!binding.constant) return null;
+    const declarator = binding.path;
+    if (!declarator.isVariableDeclarator()) return null;
+    if (!isScopeWithinComponent(binding.scope, ctx)) return null;
+    const init = declarator.node.init;
+    if (!init || !t.isExpression(init)) return null;
+    return { init, scope: declarator.scope };
+  }
+  function isStaticStringLiteral(node) {
+    if (t.isStringLiteral(node)) return true;
+    return t.isTemplateLiteral(node) && node.expressions.length === 0;
+  }
+  function collectPropIdentifiers(node, scope, ctx, out = []) {
+    if (!node) return out;
+    const visit = (child) => collectPropIdentifiers(child, scope, ctx, out);
+    if (t.isIdentifier(node)) {
+      const prop = resolveProp(node.name, scope, ctx);
+      if (prop && !out.includes(prop)) out.push(prop);
+      return out;
+    }
+    if (t.isMemberExpression(node) || t.isOptionalMemberExpression(node)) {
+      visit(node.object);
+      if (node.computed) visit(node.property);
+      return out;
+    }
+    if (t.isCallExpression(node) || t.isOptionalCallExpression(node)) {
+      visit(node.callee);
+      node.arguments.forEach((arg) => visit(arg));
+      return out;
+    }
+    if (t.isTemplateLiteral(node)) {
+      node.expressions.forEach((expr) => visit(expr));
+      return out;
+    }
+    if (t.isConditionalExpression(node)) {
+      visit(node.test);
+      visit(node.consequent);
+      visit(node.alternate);
+      return out;
+    }
+    if (t.isLogicalExpression(node) || t.isBinaryExpression(node)) {
+      visit(node.left);
+      visit(node.right);
+      return out;
+    }
+    if (t.isUnaryExpression(node) || t.isAwaitExpression(node)) {
+      visit(node.argument);
+      return out;
+    }
+    if (t.isArrayExpression(node)) {
+      node.elements.forEach((el) => visit(el));
+      return out;
+    }
+    if (t.isObjectExpression(node)) {
+      for (const prop of node.properties) {
+        if (t.isObjectProperty(prop)) {
+          if (prop.computed) visit(prop.key);
+          visit(prop.value);
+        } else if (t.isSpreadElement(prop)) {
+          visit(prop.argument);
+        }
+      }
+      return out;
+    }
+    if (t.isSpreadElement(node)) {
+      visit(node.argument);
+      return out;
+    }
+    if (t.isTSAsExpression(node) || t.isTSNonNullExpression(node) || t.isTypeCastExpression(node)) {
+      visit(node.expression);
+      return out;
+    }
+    return out;
+  }
+  function classifyExpression(expr, scope, ctx, hop) {
+    if (t.isIdentifier(expr)) {
+      const prop = resolveProp(expr.name, scope, ctx);
+      if (prop) return { kind: "direct", prop };
+      if (hop > 0) return null;
+      const local = resolveLocalConstInit(expr.name, scope, ctx);
+      if (!local) return null;
+      const inner = classifyExpression(local.init, local.scope, ctx, hop + 1);
+      if (!inner) return null;
+      return { kind: inner.kind === "formatted" ? "formatted" : "derived", prop: inner.prop };
+    }
+    if (t.isLogicalExpression(expr) && (expr.operator === "||" || expr.operator === "??") && isStaticStringLiteral(expr.right)) {
+      const left = classifyExpression(expr.left, scope, ctx, hop);
+      if (!left) return null;
+      return { kind: left.kind === "formatted" ? "formatted" : "derived", prop: left.prop };
+    }
+    const props = collectPropIdentifiers(expr, scope, ctx);
+    return props.length > 0 ? { kind: "formatted", prop: props[0] } : null;
+  }
+  function meaningfulChildren(children) {
+    return children.filter((child) => {
+      if (t.isJSXText(child)) return child.value.trim() !== "";
+      if (t.isJSXExpressionContainer(child)) return !t.isJSXEmptyExpression(child.expression);
+      return true;
+    });
+  }
+  function collectPropBindings(path2, attrs) {
+    const ctx = resolvePropContext(path2);
+    if (!ctx || ctx.propMap.size === 0) return { bindings: [], owner: null };
+    if (ctx.componentName === null) return { bindings: [], owner: null };
+    const scope = path2.scope;
+    const bindings = [];
+    const elementPath = path2.parentPath;
+    if (elementPath && elementPath.isJSXElement()) {
+      const children = meaningfulChildren(elementPath.node.children);
+      const isSoleChild = children.length === 1;
+      for (const child of children) {
+        if (!t.isJSXExpressionContainer(child)) continue;
+        const expression = child.expression;
+        if (t.isJSXEmptyExpression(expression)) continue;
+        const verdict = classifyExpression(expression, scope, ctx, 0);
+        if (!verdict) continue;
+        bindings.push({
+          target: "children",
+          prop: verdict.prop,
+          kind: isSoleChild ? verdict.kind : "formatted"
+        });
+      }
+    }
+    for (const attr of attrs) {
+      if (!t.isJSXAttribute(attr)) continue;
+      const name = t.isJSXIdentifier(attr.name) ? attr.name.name : `${attr.name.namespace.name}:${attr.name.name.name}`;
+      if (NON_BINDING_ATTRS.has(name)) continue;
+      const value = attr.value;
+      if (!t.isJSXExpressionContainer(value)) continue;
+      const expression = value.expression;
+      if (t.isJSXEmptyExpression(expression)) continue;
+      const verdict = classifyExpression(expression, scope, ctx, 0);
+      if (!verdict) continue;
+      bindings.push({
+        target: `attr:${name}`,
+        prop: verdict.prop,
+        // M2b: machine-contract attributes are reported, never offered.
+        kind: isNonContentAttribute(name) ? "formatted" : verdict.kind
+      });
+    }
+    return { bindings, owner: bindings.length > 0 ? ctx.componentName : null };
+  }
+  function propBindingsToAst(bindings) {
+    return t.arrayExpression(
+      bindings.map(
+        (binding) => t.objectExpression([
+          t.objectProperty(t.identifier("target"), t.stringLiteral(binding.target)),
+          t.objectProperty(t.identifier("prop"), t.stringLiteral(binding.prop)),
+          t.objectProperty(t.identifier("kind"), t.stringLiteral(binding.kind))
+        ])
+      )
+    );
   }
   return {
     name: "babel-plugin-editor-meta",
@@ -356,25 +633,13 @@ function babelPluginEditorMeta({ types: t }, opts = {}) {
         if (!propsArg || t.isNullLiteral(propsArg)) return;
         if (!t.isExpression(propsArg)) return;
         if (isMetaStripSpreadExpression(propsArg)) return;
-        args[1] = t.callExpression(
-          t.arrowFunctionExpression(
-            [
-              t.objectPattern([
-                t.objectProperty(
-                  t.identifier("__editorMeta"),
-                  t.identifier("_$em"),
-                  false,
-                  false
-                ),
-                t.restElement(t.identifier("_$r"))
-              ])
-            ],
-            t.identifier("_$r")
-          ),
-          [t.objectExpression([t.spreadElement(propsArg)])]
-        );
+        args[1] = buildPayloadFilter(propsArg);
       },
       JSXOpeningElement(path2, state) {
+        const consumed = consumeKitSlot(path2.node.attributes);
+        path2.node.attributes = consumed.attrs;
+        const slot = consumed.slot;
+        const hasSlotAttr = consumed.found;
         const filename = state.filename ?? "";
         if (fileExclude.test(filename)) return;
         const existing = path2.node.attributes.find(
@@ -420,9 +685,11 @@ function babelPluginEditorMeta({ types: t }, opts = {}) {
           }
         }
         const nodeId = computeNodeId(file, line, col, componentName);
-        const movable = isMovable(path2);
+        const isKitOrigin = origin === "kit" || hasSlotAttr;
+        const movable = isKitOrigin ? false : isMovable(path2);
         const parentNodeId = getParentNodeId(path2, file);
         const staticPropsObj = extractStaticProps(path2.node.attributes);
+        const { bindings, owner } = collectPropBindings(path2, path2.node.attributes);
         const metaObj = t.objectExpression([
           t.objectProperty(t.identifier("nodeId"), t.stringLiteral(nodeId)),
           t.objectProperty(t.identifier("file"), t.stringLiteral(file)),
@@ -439,6 +706,22 @@ function babelPluginEditorMeta({ types: t }, opts = {}) {
             parentNodeId ? t.stringLiteral(parentNodeId) : t.nullLiteral()
           )
         ]);
+        if (slot !== null) {
+          metaObj.properties.push(
+            t.objectProperty(t.identifier("slot"), t.stringLiteral(slot))
+          );
+        }
+        if (bindings.length > 0) {
+          metaObj.properties.push(
+            t.objectProperty(t.identifier("propBindings"), propBindingsToAst(bindings))
+          );
+          metaObj.properties.push(
+            t.objectProperty(
+              t.identifier("propOwner"),
+              owner ? t.stringLiteral(owner) : t.nullLiteral()
+            )
+          );
+        }
         if (isHostElement && includeHostSourceRef) {
           path2.node.attributes.push(
             t.jsxAttribute(
@@ -447,10 +730,11 @@ function babelPluginEditorMeta({ types: t }, opts = {}) {
             )
           );
         }
+        const metaThunk = t.arrowFunctionExpression([], metaObj);
         path2.node.attributes.push(
           t.jsxAttribute(
             t.jsxIdentifier("__editorMeta"),
-            t.jsxExpressionContainer(metaObj)
+            t.jsxExpressionContainer(metaThunk)
           )
         );
       }
@@ -489,16 +773,28 @@ function archieDevTools(options = {}) {
     },
     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");
+        const candidates = [
+          join(__dirname, "client/inject-inspector/inspector.standalone.js"),
+          join(__dirname, "../src/client/inject-inspector/inspector.standalone.js")
+        ];
+        for (const candidate of candidates) {
+          try {
+            const content = readFileSync(candidate, "utf-8");
+            res.setHeader(
+              "Content-Type",
+              "application/javascript; charset=utf-8"
+            );
+            res.setHeader("Cache-Control", "no-store");
+            res.end(content);
+            return;
+          } catch {
+          }
         }
+        server.config.logger.warn(
+          `[archie-devtools] inspector.standalone.js not found at ${LOCAL_INSPECTOR_SERVE_PATH}. Tried: ${candidates.join(", ")}. Did you build with \`pnpm build:local\`?`
+        );
+        res.statusCode = 404;
+        res.end("Not found");
       });
     },
     async transform(code, id) {