@archie/devtools 0.0.9 → 0.0.11

package/dist/index.d.mts

@@ -1,31 +1,36 @@
-import { Plugin } from 'vite';
+import { ResolvedConfig } from 'vite';
 
 interface ArchieDevToolsOptions {
     /**
-     * Enable debug logging
+     * Enable debug logging.
      * @default false
      */
     debug?: boolean;
+    /**
+     * Files matching this pattern get the DnD auto-transform applied.
+     * @default /src\/pages\//
+     */
+    dndPages?: RegExp;
+}
+interface ArchieDevToolsPlugin {
+    name: string;
+    enforce?: 'pre' | 'post';
+    config?: () => {
+        resolve: {
+            dedupe: string[];
+        };
+    };
+    configResolved?: (config: ResolvedConfig) => void;
+    resolveId?: (id: string) => string | null;
+    load?: (id: string) => string | null;
+    api?: {
+        reactBabel?: (babelOptions: {
+            plugins: unknown[];
+        }, context: {
+            id: string;
+        }) => void;
+    };
 }
-/**
- * Archie DevTools Vite Plugin
- *
- * Provides build-time integration for Archie generated applications.
- * Currently serves as an extensibility point for future features:
- * - Component tagging (click-to-edit)
- * - HMR overrides
- * - Virtual file injection
- *
- * @example
- * ```typescript
- * // vite.config.ts
- * import { archieDevTools } from '@archie/devtools';
- *
- * export default defineConfig({
- *   plugins: [archieDevTools()]
- * })
- * ```
- */
-declare function archieDevTools(options?: ArchieDevToolsOptions): Plugin;
+declare function archieDevTools(options?: ArchieDevToolsOptions): ArchieDevToolsPlugin;
 
-export { type ArchieDevToolsOptions, archieDevTools };
+export { archieDevTools };

package/dist/index.d.ts

@@ -1,31 +1,36 @@
-import { Plugin } from 'vite';
+import { ResolvedConfig } from 'vite';
 
 interface ArchieDevToolsOptions {
     /**
-     * Enable debug logging
+     * Enable debug logging.
      * @default false
      */
     debug?: boolean;
+    /**
+     * Files matching this pattern get the DnD auto-transform applied.
+     * @default /src\/pages\//
+     */
+    dndPages?: RegExp;
+}
+interface ArchieDevToolsPlugin {
+    name: string;
+    enforce?: 'pre' | 'post';
+    config?: () => {
+        resolve: {
+            dedupe: string[];
+        };
+    };
+    configResolved?: (config: ResolvedConfig) => void;
+    resolveId?: (id: string) => string | null;
+    load?: (id: string) => string | null;
+    api?: {
+        reactBabel?: (babelOptions: {
+            plugins: unknown[];
+        }, context: {
+            id: string;
+        }) => void;
+    };
 }
-/**
- * Archie DevTools Vite Plugin
- *
- * Provides build-time integration for Archie generated applications.
- * Currently serves as an extensibility point for future features:
- * - Component tagging (click-to-edit)
- * - HMR overrides
- * - Virtual file injection
- *
- * @example
- * ```typescript
- * // vite.config.ts
- * import { archieDevTools } from '@archie/devtools';
- *
- * export default defineConfig({
- *   plugins: [archieDevTools()]
- * })
- * ```
- */
-declare function archieDevTools(options?: ArchieDevToolsOptions): Plugin;
+declare function archieDevTools(options?: ArchieDevToolsOptions): ArchieDevToolsPlugin;
 
-export { type ArchieDevToolsOptions, archieDevTools };
+export { archieDevTools };

package/dist/index.js

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
@@ -23,23 +33,505 @@ __export(index_exports, {
   archieDevTools: () => archieDevTools
 });
 module.exports = __toCommonJS(index_exports);
-function archieDevTools(options = {}) {
-  const { debug = false } = options;
-  const log = (...args) => {
-    if (debug) {
-      console.log("[Archie DevTools]", ...args);
+
+// 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
+var nodePath = __toESM(require("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,
+    dndPages = /src\/pages\//
+  } = options;
+  const log = (...args) => {
+    if (debug) console.log("[Archie DevTools]", ...args);
+  };
+  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;
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {