@archie/devtools 0.0.10 → 0.0.11

package/dist/index.mjs

@@ -1,21 +1,503 @@
+import "./chunk-QZ7TP4HQ.mjs";
+
+// src/client/dnd/virtual/dndScopeVirtualModule.ts
+var INTERNAL_DND_SCOPE_IMPORT_SOURCE = "virtual:archie-devtools/dnd-scope";
+var RESOLVED_DND_SCOPE_MODULE_ID = `\0${INTERNAL_DND_SCOPE_IMPORT_SOURCE}`;
+function getDndScopeVirtualModuleSource() {
+  return `
+import React from 'react';
+
+export function DndScope({ id, tag = 'div', tagProps = {}, items = [], direction }) {
+  void direction;
+  const children = Array.isArray(items)
+    ? items.map((item) => React.createElement(React.Fragment, { key: item.id }, item.node))
+    : [];
+
+  return React.createElement(
+    tag,
+    { ...(tagProps || {}), 'data-dnd-scope': id },
+    ...children,
+  );
+}
+`;
+}
+
+// src/client/dnd/babel-plugin-dnd-auto.ts
+var SCOPE_LOCAL = "__DndScope";
+function babelPluginDndAuto({ types: t }, opts = {}) {
+  const {
+    fileMatch,
+    fileExclude = /node_modules/,
+    minComponents = 2,
+    importSource = INTERNAL_DND_SCOPE_IMPORT_SOURCE
+  } = opts;
+  function getJSXTagName(el) {
+    const { name } = el;
+    if (t.isJSXIdentifier(name)) return name.name;
+    if (t.isJSXMemberExpression(name)) {
+      const obj = t.isJSXIdentifier(name.object) ? name.object.name : "";
+      return `${obj}.${name.property.name}`;
+    }
+    return "";
+  }
+  function isHTMLTag(name) {
+    return name.length > 0 && name[0] === name[0].toLowerCase();
+  }
+  function isPascalTag(name) {
+    return name.length > 0 && name[0] !== name[0].toLowerCase();
+  }
+  function attrsToObject(attrs) {
+    const props = [];
+    for (const attr of attrs) {
+      if (!t.isJSXAttribute(attr)) continue;
+      const keyName = t.isJSXIdentifier(attr.name) ? attr.name.name : attr.name.name.name;
+      let value;
+      if (attr.value === null || attr.value === void 0) {
+        value = t.booleanLiteral(true);
+      } else if (t.isStringLiteral(attr.value)) {
+        value = attr.value;
+      } else if (t.isJSXExpressionContainer(attr.value)) {
+        const expr = attr.value.expression;
+        value = t.isJSXEmptyExpression(expr) ? t.booleanLiteral(true) : expr;
+      } else {
+        continue;
+      }
+      props.push(t.objectProperty(t.identifier(keyName), value));
+    }
+    return t.objectExpression(props);
+  }
+  function buildItemObject(itemId, type, draggable, node) {
+    return t.objectExpression([
+      t.objectProperty(t.identifier("id"), t.stringLiteral(itemId)),
+      t.objectProperty(t.identifier("type"), t.stringLiteral(type)),
+      t.objectProperty(t.identifier("label"), t.stringLiteral(type)),
+      // `node` is a JSX element — valid inside a JS object literal
+      t.objectProperty(t.identifier("node"), node),
+      t.objectProperty(t.identifier("draggable"), t.booleanLiteral(draggable))
+    ]);
+  }
+  function maybeTransformRoot(jsxEl, componentName, scopeCounter) {
+    const { openingElement, children } = jsxEl;
+    const tagName = getJSXTagName(openingElement);
+    if (!isHTMLTag(tagName)) return null;
+    const elementChildren = children.filter(
+      (c) => t.isJSXElement(c)
+    );
+    const pascalCount = elementChildren.filter(
+      (c) => isPascalTag(getJSXTagName(c.openingElement))
+    ).length;
+    if (pascalCount < minComponents) return null;
+    scopeCounter.n += 1;
+    const scopeId = `${componentName}_s${scopeCounter.n}`;
+    const itemObjects = [];
+    elementChildren.forEach((child, idx) => {
+      const childTag = getJSXTagName(child.openingElement);
+      const draggable = isPascalTag(childTag);
+      const type = draggable ? childTag : `__html_${idx}`;
+      const itemId = `${scopeId}_${childTag}_${idx}`;
+      itemObjects.push(buildItemObject(itemId, type, draggable, child));
+    });
+    const jsxAttrs = openingElement.attributes.filter(
+      (a) => t.isJSXAttribute(a)
+    );
+    const tagPropsObj = attrsToObject(jsxAttrs);
+    const dndScopeEl = t.jsxElement(
+      t.jsxOpeningElement(
+        t.jsxIdentifier(SCOPE_LOCAL),
+        [
+          t.jsxAttribute(t.jsxIdentifier("id"), t.stringLiteral(scopeId)),
+          t.jsxAttribute(t.jsxIdentifier("tag"), t.stringLiteral(tagName)),
+          t.jsxAttribute(
+            t.jsxIdentifier("tagProps"),
+            t.jsxExpressionContainer(tagPropsObj)
+          ),
+          t.jsxAttribute(
+            t.jsxIdentifier("items"),
+            t.jsxExpressionContainer(t.arrayExpression(itemObjects))
+          )
+        ],
+        true
+        // self-closing
+      ),
+      null,
+      // no closing element (self-closing)
+      [],
+      true
+    );
+    return dndScopeEl;
+  }
+  return {
+    name: "babel-plugin-dnd-auto",
+    visitor: {
+      ExportDefaultDeclaration(path, state) {
+        const filename = state.filename ?? "";
+        if (fileExclude.test(filename)) return;
+        if (fileMatch && !fileMatch.test(filename)) return;
+        const { declaration } = path.node;
+        if (!t.isFunctionDeclaration(declaration)) return;
+        const componentName = declaration.id?.name ?? "Component";
+        const scopeCounter = { n: 0 };
+        let didTransform = false;
+        path.traverse({
+          ReturnStatement(retPath) {
+            const fnParent = retPath.getFunctionParent();
+            if (fnParent?.node !== declaration) return;
+            const arg = retPath.node.argument;
+            if (!arg || !t.isJSXElement(arg)) return;
+            const transformed = maybeTransformRoot(arg, componentName, scopeCounter);
+            if (transformed) {
+              retPath.node.argument = transformed;
+              didTransform = true;
+            }
+          }
+        });
+        if (didTransform && !state._dndInjected) {
+          state._dndInjected = true;
+          state.file.path.unshiftContainer(
+            "body",
+            t.importDeclaration(
+              [t.importSpecifier(t.identifier(SCOPE_LOCAL), t.identifier("DndScope"))],
+              t.stringLiteral(importSource)
+            )
+          );
+        }
+      }
+    }
+  };
+}
+
+// src/babel-plugin-editor-meta.ts
+import * as nodePath from "path";
+function isPackageImport(src) {
+  if (src.startsWith(".") || src.startsWith("/")) return false;
+  if (src.startsWith("@")) {
+    const slashIdx = src.indexOf("/");
+    if (slashIdx === 1) return false;
+    if (slashIdx > 1) return true;
+    return true;
+  }
+  if (src.startsWith("~/") || src.startsWith("#/")) return false;
+  return true;
+}
+function babelPluginEditorMeta({ types: t }, opts = {}) {
+  const {
+    fileExclude = /node_modules/,
+    instrumentImported = true,
+    includeHostSourceRef = false
+  } = opts;
+  function getJSXTagName(el) {
+    const { name } = el;
+    if (t.isJSXIdentifier(name)) return name.name;
+    if (t.isJSXMemberExpression(name)) {
+      const parts = [];
+      let current = name;
+      while (t.isJSXMemberExpression(current)) {
+        parts.unshift(current.property.name);
+        current = current.object;
+      }
+      if (t.isJSXIdentifier(current)) parts.unshift(current.name);
+      return parts.join(".");
+    }
+    return "";
+  }
+  function computeNodeId(file, line, col, componentName) {
+    return `${file}:${line}:${col}:${componentName}`;
+  }
+  function isMovable(path) {
+    const elPath = path.parentPath;
+    if (!elPath) return false;
+    const parentEl = elPath.parentPath;
+    if (!parentEl || !parentEl.isJSXElement()) return false;
+    const siblings = parentEl.node.children.filter(
+      (c) => t.isJSXElement(c)
+    );
+    return siblings.length >= 2;
+  }
+  function getParentNodeId(path, file) {
+    const elPath = path.parentPath;
+    if (!elPath) return null;
+    let ancestor = elPath.parentPath;
+    while (ancestor) {
+      if (ancestor.isJSXElement()) {
+        const opening = ancestor.node.openingElement;
+        const loc = opening.loc?.start;
+        if (loc) {
+          const tag = getJSXTagName(opening);
+          return computeNodeId(file, loc.line, loc.column, tag);
+        }
+        return null;
+      }
+      ancestor = ancestor.parentPath;
+    }
+    return null;
+  }
+  function extractStaticProps(attrs) {
+    const props = [];
+    let hasAny = false;
+    for (const attr of attrs) {
+      if (t.isJSXSpreadAttribute(attr)) continue;
+      if (!t.isJSXAttribute(attr)) continue;
+      const keyName = t.isJSXIdentifier(attr.name) ? attr.name.name : attr.name.name.name;
+      if (keyName === "__editorMeta") continue;
+      let value;
+      if (attr.value === null || attr.value === void 0) {
+        value = t.booleanLiteral(true);
+      } else if (t.isStringLiteral(attr.value)) {
+        value = attr.value;
+      } else if (t.isJSXExpressionContainer(attr.value)) {
+        const expr = attr.value.expression;
+        if (t.isNumericLiteral(expr)) {
+          value = expr;
+        } else if (t.isBooleanLiteral(expr)) {
+          value = expr;
+        } else if (t.isNullLiteral(expr)) {
+          value = expr;
+        } else if (t.isStringLiteral(expr)) {
+          value = expr;
+        } else {
+          value = t.stringLiteral("__dynamic__");
+        }
+      } else {
+        continue;
+      }
+      props.push(t.objectProperty(t.stringLiteral(keyName), value));
+      hasAny = true;
+    }
+    return hasAny ? t.objectExpression(props) : null;
+  }
+  function isMetaStripSpreadExpression(arg) {
+    if (!t.isCallExpression(arg)) return false;
+    if (!t.isArrowFunctionExpression(arg.callee)) return false;
+    const [firstParam] = arg.callee.params;
+    if (!firstParam || !t.isObjectPattern(firstParam)) return false;
+    return firstParam.properties.some((prop) => {
+      if (!t.isObjectProperty(prop)) return false;
+      if (!t.isIdentifier(prop.key)) return false;
+      return prop.key.name === "__editorMeta";
+    });
+  }
+  function hasTruthyAsChildProp(attrs) {
+    for (const attr of attrs) {
+      if (!t.isJSXAttribute(attr) || !t.isJSXIdentifier(attr.name, { name: "asChild" })) {
+        continue;
+      }
+      if (attr.value == null) return true;
+      if (t.isJSXExpressionContainer(attr.value)) {
+        const expr = attr.value.expression;
+        if (t.isBooleanLiteral(expr)) return expr.value;
+      }
+      if (t.isStringLiteral(attr.value)) return attr.value.value !== "false";
+      return true;
+    }
+    return false;
+  }
+  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)])]
+      );
+    }
+  }
+  return {
+    name: "babel-plugin-editor-meta",
+    visitor: {
+      CallExpression(path, state) {
+        const filename = state.filename ?? "";
+        if (fileExclude.test(filename)) return;
+        const callee = path.node.callee;
+        let isCreateElement = false;
+        let isCloneElement = false;
+        if (t.isIdentifier(callee, { name: "createElement" })) {
+          isCreateElement = true;
+        } else if (t.isMemberExpression(callee) && t.isIdentifier(callee.property, { name: "createElement" })) {
+          isCreateElement = true;
+        } else if (t.isIdentifier(callee, { name: "cloneElement" })) {
+          isCloneElement = true;
+        } else if (t.isMemberExpression(callee) && t.isIdentifier(callee.property, { name: "cloneElement" })) {
+          isCloneElement = true;
+        }
+        if (!isCreateElement && !isCloneElement) return;
+        const args = path.node.arguments;
+        if (args.length < 2) return;
+        if (isCreateElement && !t.isStringLiteral(args[0])) return;
+        const propsArg = args[1];
+        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)])]
+        );
+      },
+      JSXOpeningElement(path, state) {
+        const filename = state.filename ?? "";
+        if (fileExclude.test(filename)) return;
+        const existing = path.node.attributes.find(
+          (a) => t.isJSXAttribute(a) && t.isJSXIdentifier(a.name, { name: "__editorMeta" })
+        );
+        if (existing) return;
+        const loc = path.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;
+        const componentName = getJSXTagName(path.node);
+        if (!componentName) return;
+        const isHostElement = componentName[0] === componentName[0].toLowerCase();
+        sanitizeSpreadAttributes(path.node.attributes);
+        if (hasTruthyAsChildProp(path.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;
+          while (t.isJSXMemberExpression(cur)) cur = cur.object;
+          if (t.isJSXIdentifier(cur)) rootName = cur.name;
+        }
+        if (rootName) {
+          const binding = path.scope.getBinding(rootName);
+          if (binding) {
+            const bp = binding.path;
+            if (bp.isImportSpecifier() || bp.isImportDefaultSpecifier() || bp.isImportNamespaceSpecifier()) {
+              if (!instrumentImported) return;
+              const decl = bp.parentPath;
+              if (decl?.isImportDeclaration()) {
+                const src = decl.node.source.value;
+                if (isPackageImport(src)) return;
+              }
+            }
+            const programScope = path.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 metaObj = t.objectExpression([
+          t.objectProperty(t.identifier("nodeId"), t.stringLiteral(nodeId)),
+          t.objectProperty(t.identifier("file"), t.stringLiteral(file)),
+          t.objectProperty(t.identifier("line"), t.numericLiteral(line)),
+          t.objectProperty(t.identifier("col"), t.numericLiteral(col)),
+          t.objectProperty(t.identifier("componentName"), t.stringLiteral(componentName)),
+          t.objectProperty(
+            t.identifier("staticProps"),
+            staticPropsObj ?? t.nullLiteral()
+          ),
+          t.objectProperty(t.identifier("movable"), t.booleanLiteral(movable)),
+          t.objectProperty(
+            t.identifier("parentNodeId"),
+            parentNodeId ? t.stringLiteral(parentNodeId) : t.nullLiteral()
+          )
+        ]);
+        if (isHostElement && includeHostSourceRef) {
+          path.node.attributes.push(
+            t.jsxAttribute(
+              t.jsxIdentifier("data-archie-source-ref"),
+              t.stringLiteral(`${file}::${line}::${col}`)
+            )
+          );
+        }
+        path.node.attributes.push(
+          t.jsxAttribute(
+            t.jsxIdentifier("__editorMeta"),
+            t.jsxExpressionContainer(metaObj)
+          )
+        );
+      }
+    }
+  };
+}
+
 // src/index.ts
 function archieDevTools(options = {}) {
-  const { debug = false } = options;
+  const {
+    debug = false,
+    dndPages = /src\/pages\//
+  } = options;
   const log = (...args) => {
-    if (debug) {
-      console.log("[Archie DevTools]", ...args);
-    }
+    if (debug) console.log("[Archie DevTools]", ...args);
   };
-  return {
+  let includeHostSourceRef = false;
+  const plugin = {
     name: "vite-plugin-archie-devtools",
     enforce: "pre",
+    config() {
+      return {
+        resolve: {
+          dedupe: ["react", "react-dom"]
+        }
+      };
+    },
     configResolved(config) {
-      log("Plugin initialized for project:", config.root);
+      includeHostSourceRef = !config.isProduction;
+    },
+    resolveId(id) {
+      if (id === INTERNAL_DND_SCOPE_IMPORT_SOURCE) {
+        return RESOLVED_DND_SCOPE_MODULE_ID;
+      }
+      return null;
+    },
+    load(id) {
+      if (id === RESOLVED_DND_SCOPE_MODULE_ID) {
+        return getDndScopeVirtualModuleSource();
+      }
+      return null;
     },
-    configureServer() {
-      log("Dev server configured");
+    api: {
+      reactBabel(babelOptions, context) {
+        if (!/node_modules/.test(context.id)) {
+          babelOptions.plugins.push(
+            (babel) => babelPluginEditorMeta(babel, {
+              includeHostSourceRef
+            })
+          );
+        }
+        if (dndPages.test(context.id)) {
+          log("Applying DnD transform to:", context.id);
+          babelOptions.plugins.push(
+            (babel) => babelPluginDndAuto(babel, {
+              importSource: INTERNAL_DND_SCOPE_IMPORT_SOURCE
+            })
+          );
+        }
+      }
     }
   };
+  return plugin;
 }
 export {
   archieDevTools

package/package.json

@@ -1,7 +1,15 @@
 {
   "name": "@archie/devtools",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "description": "DevTools for Archie generated applications - Route synchronization and editor communication",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/8base-archie/archie-devtools.git"
+  },
+  "publishConfig": {
+    "access": "restricted",
+    "provenance": false
+  },
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -15,24 +23,14 @@
       "types": "./dist/client/client.d.ts",
       "import": "./dist/client/client.mjs",
       "require": "./dist/client/client.js"
-    },
-    "./client/inject-inspector/auto": {
-      "types": "./dist/client/inject-inspector/auto.d.ts",
-      "import": "./dist/client/inject-inspector/auto.mjs",
-      "require": "./dist/client/inject-inspector/auto.js"
-    },
-    "./constants": {
-      "types": "./dist/constants/archieOrigins.d.ts",
-      "import": "./dist/constants/archieOrigins.mjs",
-      "require": "./dist/constants/archieOrigins.js"
     }
   },
   "scripts": {
     "test": "vitest run",
     "test:watch": "vitest",
     "inspector:local": "node scripts/generate-inspector-local.js",
-    "build": "tsup src/index.ts src/client/client.ts src/client/inject-inspector/injectInspector.ts src/client/inject-inspector/auto.ts src/client/route-listener/routeListener.ts src/constants/archieOrigins.ts --format cjs,esm --dts",
-    "dev": "tsup src/index.ts src/client/client.ts src/client/inject-inspector/injectInspector.ts src/client/inject-inspector/auto.ts src/client/route-listener/routeListener.ts src/constants/archieOrigins.ts --format cjs,esm --dts --watch",
+    "build": "tsup",
+    "dev": "tsup --watch",
     "typecheck": "tsc --noEmit",
     "release": "node publish.js"
   },
@@ -47,28 +45,31 @@
     "react-router"
   ],
   "author": "8base",
-  "license": "MIT",
+  "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"
+    "vitest": "^2.1.9",
+    "zustand": "^5.0.11"
   },
   "peerDependencies": {
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
     "react-router-dom": ">=6.4.0"
-  },
-  "peerDependenciesMeta": {
-    "vite": {
-      "optional": true
-    }
   }
 }

package/dist/chunk-D5EA6RR5.mjs

@@ -1,47 +0,0 @@
-// src/constants/archieOrigins.ts
-var ARCHIE_HOST_ORIGINS = [
-  "https://app.dev.archie-platform.com",
-  "https://app.staging.archie-platform.com",
-  "https://app.archie.com"
-];
-var ARCHIE_PREVIEW_ORIGIN_SUFFIXES = [
-  ".staging.archie-platform.com",
-  ".archie-platform.com",
-  ".archie.com"
-];
-var PREVIEW_DEPLOY_HOST_SUFFIXES = [
-  ".previews.staging.archie-platform.com",
-  ".previews.archie-platform.com",
-  ".previews.archie.com"
-];
-var LOCAL_DEV_ORIGINS = [
-  "http://localhost:3000",
-  "http://localhost:3001"
-];
-function getAllowedOrigins(includeLocal = false) {
-  const list = [...ARCHIE_HOST_ORIGINS];
-  if (includeLocal) list.push(...LOCAL_DEV_ORIGINS);
-  return list;
-}
-function getAllowedOriginPatterns() {
-  return [...ARCHIE_PREVIEW_ORIGIN_SUFFIXES];
-}
-function isPreviewOrigin(origin) {
-  if (!origin || typeof origin !== "string") return false;
-  try {
-    const host = new URL(origin).host;
-    return PREVIEW_DEPLOY_HOST_SUFFIXES.some((suffix) => host.endsWith(suffix));
-  } catch {
-    return false;
-  }
-}
-
-export {
-  ARCHIE_HOST_ORIGINS,
-  ARCHIE_PREVIEW_ORIGIN_SUFFIXES,
-  PREVIEW_DEPLOY_HOST_SUFFIXES,
-  LOCAL_DEV_ORIGINS,
-  getAllowedOrigins,
-  getAllowedOriginPatterns,
-  isPreviewOrigin
-};