@trojanbox-vcp-test/site-edit-engine 0.1.0

package/dist/webpack-loader.cjs

@@ -0,0 +1,592 @@
+const generateModule = require("@babel/generator");
+const parser = require("@babel/parser");
+const traverseModule = require("@babel/traverse");
+const t = require("@babel/types");
+
+const generate =
+  typeof generateModule === "function"
+    ? generateModule
+    : generateModule.default;
+const traverse =
+  typeof traverseModule === "function"
+    ? traverseModule
+    : traverseModule.default;
+
+const ATTRIBUTES = {
+  key: "data-vcp-edit-key",
+  parentKey: "data-vcp-edit-parent-key",
+  movable: "data-vcp-movable",
+  removable: "data-vcp-removable",
+  flags: "data-vcp-flags",
+};
+
+const NON_EDITABLE_INTRINSIC_ELEMENTS = new Set([
+  "base",
+  "body",
+  "head",
+  "html",
+  "link",
+  "meta",
+  "noscript",
+  "script",
+  "style",
+  "template",
+  "title",
+]);
+
+const CONTAINER_INTRINSIC_ELEMENTS = new Set([
+  "article",
+  "aside",
+  "div",
+  "footer",
+  "form",
+  "header",
+  "li",
+  "main",
+  "nav",
+  "ol",
+  "section",
+  "ul",
+]);
+
+const SUPPRESS_HYDRATION_WARNING_PROP = "suppressHydrationWarning";
+
+function siteEditInstrumentationLoader(source, inputSourceMap) {
+  this.cacheable?.();
+  const callback = this.async();
+
+  try {
+    if (!shouldInstrumentResource(this.resourcePath)) {
+      callback(null, source, inputSourceMap);
+      return;
+    }
+
+    const options = this.getOptions?.() ?? {};
+    const result = instrumentSiteEditRuntimeAttributes({
+      source,
+      file: this.resourcePath,
+      projectRoot: options.projectRoot,
+    });
+    callback(null, result.code, inputSourceMap);
+  } catch (error) {
+    callback(error);
+  }
+}
+
+function shouldInstrumentResource(resourcePath) {
+  return (
+    typeof resourcePath === "string" &&
+    /\.(jsx|tsx)$/.test(resourcePath) &&
+    !resourcePath.includes("/node_modules/") &&
+    !resourcePath.endsWith(".d.ts")
+  );
+}
+
+function instrumentSiteEditRuntimeAttributes(options) {
+  if (!mayContainJsx(options.source)) {
+    return { code: options.source, elements: [] };
+  }
+
+  const attributes = options.attributes ?? ATTRIBUTES;
+  const ast = parser.parse(options.source, {
+    sourceType: "module",
+    plugins: ["jsx", "typescript"],
+  });
+  const elements = [];
+  const sourceFile = toProjectRelativeFile(options.file, options.projectRoot);
+
+  traverse(ast, {
+    JSXElement(path) {
+      const opening = path.node.openingElement;
+      const name = opening.name;
+
+      if (
+        !isSiteEditMarkableElement(name) ||
+        hasAttribute(opening, attributes.key)
+      ) {
+        return;
+      }
+
+      const componentName = findOwningComponentName(path) ?? "default";
+      const structuralPath = computeStructuralPathFromAst(path);
+      const key = computeSiteEditSourceIdentityKey(
+        sourceFile,
+        componentName,
+        structuralPath,
+      );
+      const tag = getJsxElementName(name) ?? "unknown";
+      const sourceKind = isConcreteElement(name) ? "jsx" : "component-call";
+      if (
+        sourceKind === "component-call" &&
+        !hasStructuredChild(path.node.children)
+      ) {
+        return;
+      }
+
+      appendStringAttribute(opening, attributes.key, key);
+      appendBooleanAttribute(opening, SUPPRESS_HYDRATION_WARNING_PROP);
+
+      elements.push({
+        key,
+        tag,
+        component_name: componentName,
+        source_file: sourceFile,
+        source_kind: sourceKind,
+      });
+    },
+  });
+
+  return {
+    code: generate(ast, { jsescOption: { minimal: true } }).code,
+    elements,
+  };
+}
+
+function mayContainJsx(source) {
+  return source.includes("<");
+}
+
+function computeSiteEditSourceIdentityKey(file, component, structuralPath) {
+  return `${file}::${component}::${structuralPath}`;
+}
+
+function toProjectRelativeFile(filename, projectRoot) {
+  const normalized = filename.replace(/\\/g, "/").replace(/^\.\//, "");
+  const normalizedRoot = projectRoot?.replace(/\\/g, "/").replace(/\/+$/, "");
+
+  if (normalizedRoot && normalized.startsWith(`${normalizedRoot}/`)) {
+    return normalized.slice(normalizedRoot.length + 1);
+  }
+
+  for (const [marker, offset] of [
+    ["/src/app/", 1],
+    ["/src/components/", 1],
+    ["/app/", 1],
+    ["/components/", 1],
+  ]) {
+    const index = normalized.indexOf(marker);
+    if (index >= 0) {
+      return normalized.slice(index + offset);
+    }
+  }
+
+  const fallback = normalized.match(
+    /(?:^|\/)((?:src\/app|src\/components|app|components)\/.+)$/,
+  );
+  return fallback?.[1] ?? normalized;
+}
+
+function isConcreteElement(name) {
+  return t.isJSXIdentifier(name) && /^[a-z]/.test(name.name);
+}
+
+function getJsxElementName(name) {
+  if (t.isJSXIdentifier(name)) {
+    return name.name;
+  }
+  if (t.isJSXMemberExpression(name)) {
+    return getJsxMemberExpressionName(name);
+  }
+
+  return null;
+}
+
+function isSiteEditMarkableElement(name) {
+  const elementName = getJsxElementName(name);
+  if (
+    !elementName ||
+    elementName === "Fragment" ||
+    elementName.endsWith(".Fragment")
+  ) {
+    return false;
+  }
+
+  return !NON_EDITABLE_INTRINSIC_ELEMENTS.has(elementName);
+}
+
+function hasAttribute(opening, name) {
+  return opening.attributes.some(
+    (attribute) =>
+      t.isJSXAttribute(attribute) &&
+      t.isJSXIdentifier(attribute.name, { name }),
+  );
+}
+
+function hasDirectTextChild(children) {
+  return children.some((child) => {
+    if (t.isJSXText(child)) {
+      return child.value.trim().length > 0;
+    }
+
+    if (!t.isJSXExpressionContainer(child)) {
+      return false;
+    }
+
+    if (t.isStringLiteral(child.expression)) {
+      return child.expression.value.trim().length > 0;
+    }
+
+    if (t.isTemplateLiteral(child.expression)) {
+      return child.expression.quasis.some((quasi) =>
+        quasi.value.cooked?.trim(),
+      );
+    }
+
+    return isPotentialDirectTextExpression(child.expression);
+  });
+}
+
+function isPotentialDirectTextExpression(expression) {
+  const unwrapped = unwrapTextExpression(expression);
+
+  return (
+    t.isIdentifier(unwrapped) ||
+    t.isMemberExpression(unwrapped) ||
+    t.isBinaryExpression(unwrapped) ||
+    t.isLogicalExpression(unwrapped) ||
+    t.isConditionalExpression(unwrapped)
+  );
+}
+
+function unwrapTextExpression(expression) {
+  let current = expression;
+
+  while (
+    t.isTSAsExpression(current) ||
+    t.isTSSatisfiesExpression(current) ||
+    t.isTSNonNullExpression(current) ||
+    t.isTypeCastExpression(current)
+  ) {
+    current = current.expression;
+  }
+
+  return current;
+}
+
+function appendStringAttribute(opening, name, value) {
+  opening.attributes.push(
+    t.jsxAttribute(t.jsxIdentifier(name), t.stringLiteral(value)),
+  );
+}
+
+function appendOptionalStringAttribute(opening, name, value) {
+  if (value === undefined || hasAttribute(opening, name)) {
+    return;
+  }
+
+  appendStringAttribute(opening, name, value);
+}
+
+function appendBooleanAttribute(opening, name) {
+  if (hasAttribute(opening, name)) {
+    return;
+  }
+
+  opening.attributes.push(t.jsxAttribute(t.jsxIdentifier(name), null));
+}
+
+function getJsxMemberExpressionName(name) {
+  const objectName = t.isJSXIdentifier(name.object)
+    ? name.object.name
+    : getJsxMemberExpressionName(name.object);
+
+  return `${objectName}.${name.property.name}`;
+}
+
+function findOwningComponentName(path) {
+  let current = path;
+
+  while (current) {
+    if (current.isFunctionDeclaration() || current.isClassDeclaration()) {
+      return current.node.id?.name ?? null;
+    }
+
+    if (current.isVariableDeclarator() && t.isIdentifier(current.node.id)) {
+      const init = current.get("init");
+      if (
+        !Array.isArray(init) &&
+        (init.isArrowFunctionExpression() || init.isFunctionExpression())
+      ) {
+        return current.node.id.name;
+      }
+    }
+
+    current = current.parentPath;
+  }
+
+  return null;
+}
+
+function findParentSiteEditElement(path) {
+  let current = path.parentPath;
+
+  while (current) {
+    if (
+      current.isJSXElement() &&
+      isSiteEditMarkableElement(current.node.openingElement.name)
+    ) {
+      return current;
+    }
+
+    current = current.parentPath;
+  }
+
+  return null;
+}
+
+function resolveParentKey(path, componentName, sourceFile, attributes) {
+  const parentElement = findParentSiteEditElement(path);
+  if (!parentElement) {
+    return undefined;
+  }
+
+  const explicitParentKey = getStringAttributeValue(
+    parentElement.node.openingElement,
+    attributes.key,
+  );
+  if (explicitParentKey) {
+    return explicitParentKey;
+  }
+
+  const parentStructuralPath = computeStructuralPathFromAst(parentElement);
+  return computeSiteEditSourceIdentityKey(
+    sourceFile,
+    componentName,
+    parentStructuralPath,
+  );
+}
+
+function getStringAttributeValue(opening, name) {
+  const attribute = opening.attributes.find(
+    (item) => t.isJSXAttribute(item) && t.isJSXIdentifier(item.name, { name }),
+  );
+  if (
+    !attribute ||
+    !t.isJSXAttribute(attribute) ||
+    !t.isStringLiteral(attribute.value)
+  ) {
+    return null;
+  }
+
+  return attribute.value.value;
+}
+
+function hasStructuredChild(children) {
+  return children.some(
+    (child) => t.isJSXElement(child) || t.isJSXFragment(child),
+  );
+}
+
+const structuralPathCache = new WeakMap();
+const structuralChildrenCache = new WeakMap();
+const siblingOrdinalCache = new WeakMap();
+
+function computeStructuralPathFromAst(path) {
+  const cached = structuralPathCache.get(path.node);
+  if (cached !== undefined) {
+    return cached;
+  }
+
+  const segments = [];
+  let current = path;
+
+  while (current) {
+    if (current.isJSXElement()) {
+      const segment = getStructuralSegment(current);
+      if (segment) {
+        segments.unshift(segment);
+      }
+    }
+
+    current = current.parentPath;
+  }
+
+  const structuralPath = segments.join("/");
+  structuralPathCache.set(path.node, structuralPath);
+  return structuralPath;
+}
+
+function getStructuralSegment(path) {
+  const tag = getJsxElementName(path.node.openingElement.name);
+  if (!tag || tag === "Fragment" || tag.endsWith(".Fragment")) {
+    return null;
+  }
+
+  if (/^[A-Z]/.test(tag)) {
+    return `component:${tag}#${computeSiblingOrdinal(path, tag)}`;
+  }
+
+  return `${tag}#${computeSiblingOrdinal(path, tag)}`;
+}
+
+function computeSiblingOrdinal(path, tag) {
+  const owner = findStructuralParent(path);
+  if (!owner) {
+    return 0;
+  }
+
+  const cached = siblingOrdinalCache.get(owner.node)?.get(tag)?.get(path.node);
+  if (cached !== undefined) {
+    return cached;
+  }
+
+  let ownerCache = siblingOrdinalCache.get(owner.node);
+  if (!ownerCache) {
+    ownerCache = new Map();
+    siblingOrdinalCache.set(owner.node, ownerCache);
+  }
+
+  let tagOrdinals = ownerCache.get(tag);
+  if (!tagOrdinals) {
+    tagOrdinals = new WeakMap();
+    ownerCache.set(tag, tagOrdinals);
+  }
+
+  let ordinal = 0;
+  for (const sibling of collectStructuralChildren(owner)) {
+    const siblingTag = getJsxElementName(sibling.node.openingElement.name);
+    if (siblingTag === tag) {
+      tagOrdinals.set(sibling.node, ordinal);
+      if (sibling.node === path.node) {
+        return ordinal;
+      }
+      ordinal += 1;
+    }
+  }
+
+  return tagOrdinals.get(path.node) ?? 0;
+}
+
+function findStructuralParent(path) {
+  let current = path.parentPath;
+  let fragmentOwner = null;
+
+  while (current) {
+    if (current.isJSXFragment()) {
+      fragmentOwner = current;
+      current = current.parentPath;
+      continue;
+    }
+
+    if (current.isJSXElement()) {
+      return current;
+    }
+
+    current = current.parentPath;
+  }
+
+  return fragmentOwner;
+}
+
+function collectStructuralChildren(owner) {
+  const cached = structuralChildrenCache.get(owner.node);
+  if (cached) {
+    return cached;
+  }
+
+  const structuralChildren = [];
+
+  const children = owner.get("children");
+  for (const child of children) {
+    if (Array.isArray(child)) {
+      continue;
+    }
+
+    if (child.isJSXElement()) {
+      structuralChildren.push(child);
+      continue;
+    }
+
+    if (child.isJSXFragment()) {
+      structuralChildren.push(...collectStructuralChildren(child));
+      continue;
+    }
+
+    if (child.isJSXExpressionContainer()) {
+      structuralChildren.push(
+        ...collectExpressionStructuralChildren(child.get("expression")),
+      );
+    }
+  }
+
+  structuralChildrenCache.set(owner.node, structuralChildren);
+  return structuralChildren;
+}
+
+function collectExpressionStructuralChildren(expression) {
+  if (expression.isJSXElement()) {
+    return [expression];
+  }
+
+  if (expression.isJSXFragment()) {
+    return collectStructuralChildren(expression);
+  }
+
+  if (expression.isParenthesizedExpression()) {
+    return collectExpressionStructuralChildren(expression.get("expression"));
+  }
+
+  if (expression.isLogicalExpression() && expression.node.operator === "&&") {
+    return collectExpressionStructuralChildren(expression.get("right"));
+  }
+
+  if (expression.isConditionalExpression()) {
+    return [
+      ...collectExpressionStructuralChildren(expression.get("consequent")),
+      ...collectExpressionStructuralChildren(expression.get("alternate")),
+    ];
+  }
+
+  if (expression.isCallExpression() && isMapCallExpression(expression.node)) {
+    return collectFunctionReturnStructuralChildren(
+      expression.get("arguments")[0],
+    );
+  }
+
+  return [];
+}
+
+function collectFunctionReturnStructuralChildren(path) {
+  if (!path?.isArrowFunctionExpression() && !path?.isFunctionExpression()) {
+    return [];
+  }
+
+  const body = path.get("body");
+  if (body.isJSXElement()) {
+    return [body];
+  }
+
+  if (body.isJSXFragment()) {
+    return collectStructuralChildren(body);
+  }
+
+  if (body.isParenthesizedExpression()) {
+    return collectExpressionStructuralChildren(body.get("expression"));
+  }
+
+  if (!body.isBlockStatement()) {
+    return [];
+  }
+
+  for (const statement of body.get("body")) {
+    if (!statement.isReturnStatement()) {
+      continue;
+    }
+    const argument = statement.get("argument");
+    return argument.node ? collectExpressionStructuralChildren(argument) : [];
+  }
+
+  return [];
+}
+
+function isMapCallExpression(node) {
+  return (
+    t.isMemberExpression(node.callee) &&
+    t.isIdentifier(node.callee.property) &&
+    node.callee.property.name === "map"
+  );
+}
+
+module.exports = siteEditInstrumentationLoader;
+module.exports.instrumentSiteEditRuntimeAttributes =
+  instrumentSiteEditRuntimeAttributes;

package/dist/webpack-loader.d.ts

@@ -0,0 +1,27 @@
+import type {
+  SiteEditInstrumentationOptions,
+  SiteEditInstrumentationResult,
+} from "./site-edit-instrumentation.js";
+
+declare function siteEditInstrumentationLoader(
+  this: {
+    cacheable?: () => void;
+    async?: () => (
+      error?: Error | null,
+      code?: string,
+      inputSourceMap?: unknown,
+    ) => void;
+    resourcePath?: string;
+    getOptions?: () => { projectRoot?: string };
+  },
+  source: string,
+  inputSourceMap?: unknown,
+): void;
+
+declare namespace siteEditInstrumentationLoader {
+  function instrumentSiteEditRuntimeAttributes(
+    options: SiteEditInstrumentationOptions,
+  ): SiteEditInstrumentationResult;
+}
+
+export = siteEditInstrumentationLoader;

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@trojanbox-vcp-test/site-edit-engine",
+  "version": "0.1.0",
+  "type": "module",
+  "license": "UNLICENSED",
+  "repository": {
+    "type": "git",
+    "url": "git+https://gitlab.cedemo.cn/vibe-coding-platform/vcp.git"
+  },
+  "homepage": "https://gitlab.cedemo.cn/vibe-coding-platform/vcp",
+  "bugs": {
+    "url": "https://gitlab.cedemo.cn/vibe-coding-platform/vcp/-/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "development": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./next-app-router": {
+      "development": "./src/next-app-router.ts",
+      "types": "./dist/next-app-router.d.ts",
+      "default": "./dist/next-app-router.js"
+    },
+    "./source-watcher": {
+      "development": "./src/source-watcher.ts",
+      "types": "./dist/source-watcher.d.ts",
+      "default": "./dist/source-watcher.js"
+    },
+    "./webpack-loader": {
+      "development": "./src/webpack-loader.cjs",
+      "types": "./dist/webpack-loader.d.ts",
+      "default": "./dist/webpack-loader.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "engines": {
+    "node": ">=24.0.0"
+  },
+  "scripts": {
+    "build": "pnpm --dir ../contracts build && node -e \"require('node:fs').rmSync('dist', { recursive: true, force: true })\" && tsc -p tsconfig.build.json && node -e \"const fs=require('node:fs'); fs.mkdirSync('dist', { recursive: true }); fs.copyFileSync('src/webpack-loader.cjs', 'dist/webpack-loader.cjs'); fs.copyFileSync('src/webpack-loader.d.ts', 'dist/webpack-loader.d.ts')\"",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
+  },
+  "dependencies": {
+    "@babel/generator": "^7.29.1",
+    "@babel/parser": "^7.29.3",
+    "@babel/traverse": "^7.29.0",
+    "@babel/types": "^7.29.0",
+    "@trojanbox-vcp-test/contracts": "^0.1.0"
+  },
+  "devDependencies": {
+    "@types/babel__generator": "^7.27.0",
+    "@types/babel__traverse": "^7.28.0",
+    "@types/node": "^24.0.0",
+    "typescript": "^5.8.0",
+    "vitest": "^3.2.0"
+  }
+}