@deneb-ui/cli 2.0.88 → 2.0.89

package/src/arc/transforms/index.cjs

@@ -0,0 +1,195 @@
+'use strict';
+
+const {
+  parseSource,
+  printSource,
+  hasDirective,
+  ensureImport,
+  ensureDefaultImport,
+  sanitizeDuplicateBindings,
+} = require('../ast.cjs');
+const {
+  hasMetadataExport,
+  hasClientDirective,
+  needsClientDirective,
+  canSafelyInjectClientDirective,
+  ensureClientDirective,
+} = require('../rsc-boundary.cjs');
+
+// Context & primitives
+const { findElementByLoc } = require('./transform-context.cjs');
+const { applyTransformToElement } = require('./element-transform.cjs');
+const { instrumentChildCardComponent } = require('./components/child-card.cjs');
+const { instrumentReusableComponent } = require('./components/reusable-component.cjs');
+const { applyCollectionTransform } = require('./collections/list.cjs');
+const { instrumentPageKey, inferPageKey } = require('./routing/page-key.cjs');
+const { instrumentLayoutSource } = require('./routing/shared-layout.cjs');
+const {
+  resolveSiteDataSpecifier,
+  resolveSiteDataRuntimeSpecifier,
+  rewriteRecursiveSiteDataContext,
+  ensureJsonModule,
+  injectSiteDataHook,
+} = require('./runtime/provider.cjs');
+const {
+  sanitizeContradictoryMarkers,
+  healBroadContainerMarkers,
+  healHiddenPreviewMarkers,
+  healLegacyProductDetailLinks,
+  healSectionOverflowHidden,
+  healDecorativeOverlays,
+  healMissingSiteDataHooks,
+} = require('./healing/sanitizer.cjs');
+const {
+  healEmptyStateConditionals,
+  healUnguardedModalConditionals,
+  healUnguardedModalConditionalsInSource,
+  sanitizeContradictoryMarkersInSource,
+} = require('./healing/conditionals.cjs');
+
+function applyFilePlan(filePlan, profile) {
+  if (!filePlan.originalCode || !filePlan.transformations.length) {
+    return { code: filePlan.originalCode, changed: false };
+  }
+
+  const ast = parseSource(filePlan.originalCode, filePlan.file);
+  let isClient = hasDirective(ast, 'use client') || hasClientDirective(ast) || /['"]use client['"]/.test(filePlan.originalCode.slice(0, 400));
+  const hasMetadata = hasMetadataExport(ast);
+  let applied = 0;
+  const failures = [];
+
+  const supported = new Set([
+    'split-action-contract',
+    'form-submit-action',
+    'extract-url',
+    'extract-image',
+    'extract-picture',
+    'extract-alt',
+    'extract-placeholder',
+    'extract-text',
+    'extract-prop',
+    'wrap-text-span',
+    'collection-conversion',
+    'style-bind',
+    'extract-tailwind-bg',
+    'instrument-child-card',
+    'bind-button-with-icon',
+    'bind-highlighted-heading',
+    'prop-flow-callsite',
+    'instrument-reusable-component',
+  ]);
+
+  const isTypeScript = Boolean(filePlan.file && /\.(tsx|ts)$/.test(filePlan.file));
+
+  // Collections run first: they rewrite the array declaration and add an index
+  // parameter, and later per-element edits must observe that shape.
+  const ordered = [...filePlan.transformations].sort(
+    (left, right) =>
+      Number(right.operation === 'collection-conversion') -
+      Number(left.operation === 'collection-conversion')
+  );
+
+  for (const transform of ordered) {
+    if (transform.decision === 'skip') continue;
+    if (!supported.has(transform.operation)) continue;
+
+    if (transform.operation === 'instrument-child-card') {
+      try {
+        if (instrumentChildCardComponent(ast, transform, isTypeScript)) applied++;
+      } catch (err) {
+        failures.push({ loc: transform.loc, reason: err.message });
+      }
+      continue;
+    }
+
+    if (transform.operation === 'instrument-reusable-component') {
+      try {
+        if (instrumentReusableComponent(ast, transform, isTypeScript)) applied++;
+      } catch (err) {
+        failures.push({ loc: transform.loc, reason: err.message });
+      }
+      continue;
+    }
+
+    if (transform.operation === 'collection-conversion') {
+      try {
+        if (applyCollectionTransform(ast, transform, isClient, isTypeScript)) applied++;
+        else failures.push({ loc: transform.loc, reason: 'collection-not-bindable' });
+      } catch (err) {
+        failures.push({ loc: transform.loc, reason: err.message });
+      }
+      continue;
+    }
+
+    const pathNode = findElementByLoc(ast, transform.loc, transform.componentName || transform.tag);
+    if (!pathNode) {
+      failures.push({ loc: transform.loc, reason: 'node-not-found' });
+      continue;
+    }
+    try {
+      applyTransformToElement(pathNode, transform);
+      applied++;
+    } catch (err) {
+      failures.push({ loc: transform.loc, reason: err.message });
+    }
+  }
+
+  if (applied === 0) {
+    return { code: filePlan.originalCode, changed: false, applied, failures };
+  }
+
+  if (!isClient && profile?.router === 'next-app' && !hasMetadata && canSafelyInjectClientDirective(ast, filePlan.file, profile)) {
+    if (needsClientDirective(ast, filePlan.originalCode)) {
+      ensureClientDirective(ast);
+      isClient = true;
+    }
+  }
+
+  const siteDataImport = resolveSiteDataSpecifier(profile, filePlan.file);
+  if (isClient) {
+    const runtimeSpecifier = resolveSiteDataRuntimeSpecifier(profile);
+    injectSiteDataHook(ast);
+    ensureImport(ast, runtimeSpecifier, ['useSiteData']);
+  } else {
+    ensureDefaultImport(ast, siteDataImport, 'siteData');
+  }
+  sanitizeDuplicateBindings(ast);
+
+  // Sanitize any conflicting data-preview-static on elements with editable markers
+  sanitizeContradictoryMarkers(ast);
+  healBroadContainerMarkers(ast);
+  healEmptyStateConditionals(ast);
+  healHiddenPreviewMarkers(ast);
+  healLegacyProductDetailLinks(ast);
+  healSectionOverflowHidden(ast);
+  healDecorativeOverlays(ast);
+
+  const code = printSource(ast, filePlan.originalCode);
+  return { code, changed: true, applied, failures, usedClientHook: isClient };
+}
+
+module.exports = {
+  applyFilePlan,
+  applyCollectionTransform,
+  instrumentLayoutSource,
+  instrumentPageKey,
+  resolveSiteDataSpecifier,
+  resolveSiteDataRuntimeSpecifier,
+  rewriteRecursiveSiteDataContext,
+  ensureJsonModule,
+  inferPageKey,
+  sanitizeContradictoryMarkers,
+  sanitizeContradictoryMarkersInSource,
+  healBroadContainerMarkers,
+  healEmptyStateConditionals,
+  healHiddenPreviewMarkers,
+  healSectionOverflowHidden,
+  healDecorativeOverlays,
+  healLegacyProductDetailLinks,
+  healMissingSiteDataHooks,
+  healUnguardedModalConditionals,
+  healUnguardedModalConditionalsInSource,
+  injectSiteDataHook,
+  instrumentChildCardComponent,
+  instrumentReusableComponent,
+};

package/src/arc/transforms/primitives/action.cjs

@@ -0,0 +1,76 @@
+'use strict';
+
+const {
+  getJsxName,
+  hasJsxAttribute,
+  jsxPreviewAttr,
+  wrapTextInEditableSpan,
+  ensureStyleAttrs,
+  siteDataBinding,
+  b,
+} = require('../../ast.cjs');
+const { ensurePreviewPath } = require('../transform-context.cjs');
+const { replaceTextChildren } = require('./text.cjs');
+
+function splitActionChildren(node, labelField, labelFallback) {
+  const nextChildren = [];
+  let wrapped = false;
+  for (const child of node.children || []) {
+    if (!child) continue;
+    if (child.type === 'JSXElement' && getJsxName(child) === 'span' && !hasJsxAttribute(child, 'data-preview-field-path')) {
+      ensurePreviewPath(child, labelField);
+      ensureStyleAttrs(child, labelField, 'text');
+      replaceTextChildren(child, labelField, labelFallback, 'text');
+      nextChildren.push(child);
+      wrapped = true;
+    } else if (child.type === 'JSXText' && child.value.replace(/\s+/g, '').length) {
+      const leading = child.value.match(/^\s*/)?.[0] || '';
+      const trailing = child.value.match(/\s*$/)?.[0] || '';
+      if (leading) nextChildren.push(b.jsxText(leading));
+      nextChildren.push(wrapTextInEditableSpan(labelField, labelFallback, 'text'));
+      if (trailing && trailing !== leading) nextChildren.push(b.jsxText(trailing));
+      wrapped = true;
+    } else if (
+      child.type === 'JSXExpressionContainer' &&
+      child.expression &&
+      (child.expression.type === 'StringLiteral' || child.expression.type === 'Literal')
+    ) {
+      nextChildren.push(wrapTextInEditableSpan(labelField, labelFallback, 'text'));
+      wrapped = true;
+    } else {
+      nextChildren.push(child);
+    }
+  }
+  if (!wrapped) {
+    nextChildren.push(wrapTextInEditableSpan(labelField, labelFallback, 'text'));
+  }
+  node.children = nextChildren;
+}
+
+function wrapHiddenUrlSibling(pathNode, urlField, fallback) {
+  const urlParts = urlField.split('.');
+  const hiddenUrl = b.jsxElement(
+    b.jsxOpeningElement(
+      b.jsxIdentifier('span'),
+      [
+        b.jsxAttribute(b.jsxIdentifier('hidden')),
+        b.jsxAttribute(b.jsxIdentifier('aria-hidden'), b.stringLiteral('true')),
+        jsxPreviewAttr(urlField),
+      ],
+      false
+    ),
+    b.jsxClosingElement(b.jsxIdentifier('span')),
+    [b.jsxExpressionContainer(siteDataBinding(urlParts, fallback, 'url'))],
+    false
+  );
+  if (pathNode.parent && Array.isArray(pathNode.parent.node?.children)) {
+    pathNode.insertAfter(hiddenUrl);
+  } else if (pathNode.node && Array.isArray(pathNode.node.children)) {
+    pathNode.node.children = [hiddenUrl, ...(pathNode.node.children || [])];
+  }
+}
+
+module.exports = {
+  splitActionChildren,
+  wrapHiddenUrlSibling,
+};

package/src/arc/transforms/primitives/text.cjs

@@ -0,0 +1,65 @@
+'use strict';
+
+const {
+  siteDataBinding,
+  wrapTextInEditableSpan,
+  b,
+} = require('../../ast.cjs');
+
+function replaceTextChildren(node, fieldPath, fallback, fieldType) {
+  const nextChildren = [];
+  let replaced = false;
+  for (const child of node.children || []) {
+    if (!child) continue;
+    if (child.type === 'JSXText' && child.value.replace(/\s+/g, '').length) {
+      nextChildren.push(b.jsxExpressionContainer(siteDataBinding(fieldPath.split('.'), fallback, fieldType)));
+      replaced = true;
+    } else if (
+      child.type === 'JSXExpressionContainer' &&
+      child.expression &&
+      (child.expression.type === 'StringLiteral' ||
+        child.expression.type === 'Literal' ||
+        child.expression.type === 'Identifier')
+    ) {
+      nextChildren.push(b.jsxExpressionContainer(siteDataBinding(fieldPath.split('.'), fallback, fieldType)));
+      replaced = true;
+    } else {
+      nextChildren.push(child);
+    }
+  }
+  if (!replaced) {
+    nextChildren.push(b.jsxExpressionContainer(siteDataBinding(fieldPath.split('.'), fallback, fieldType)));
+  }
+  node.children = nextChildren;
+}
+
+/**
+ * Replaces literal text children with an editable <span>, leaving the container
+ * element and every one of its classes untouched.
+ */
+function wrapLiteralTextChildren(node, fieldPath, fallback) {
+  const nextChildren = [];
+  let wrapped = false;
+
+  for (const child of node.children || []) {
+    if (!child) continue;
+    if (!wrapped && child.type === 'JSXText' && child.value.replace(/\s+/g, '').length) {
+      const leading = child.value.match(/^\s*/)?.[0] || '';
+      const trailing = child.value.match(/\s*$/)?.[0] || '';
+      if (leading) nextChildren.push(b.jsxText(leading));
+      nextChildren.push(wrapTextInEditableSpan(fieldPath, fallback, 'text'));
+      if (trailing) nextChildren.push(b.jsxText(trailing));
+      wrapped = true;
+      continue;
+    }
+    if (child.type === 'JSXText' && child.value.replace(/\s+/g, '').length) continue;
+    nextChildren.push(child);
+  }
+
+  if (wrapped) node.children = nextChildren;
+}
+
+module.exports = {
+  replaceTextChildren,
+  wrapLiteralTextChildren,
+};

package/src/arc/transforms/routing/page-key.cjs

@@ -0,0 +1,84 @@
+'use strict';
+
+const recast = require('recast');
+const {
+  parseSource,
+  printSource,
+  getJsxName,
+  b,
+} = require('../../ast.cjs');
+const { toPosix } = require('../../fs-utils.cjs');
+
+function inferPageKey(relativeFile) {
+  const posix = toPosix(relativeFile);
+  if (/(^|\/)page\.(tsx|jsx|js)$/.test(posix)) {
+    const parts = posix.split('/');
+    const idx = parts.lastIndexOf('app');
+    const segs = parts.slice(idx + 1, -1).filter((s) => !(s.startsWith('(') && s.endsWith(')')));
+    if (!segs.length) return 'home';
+    return segs.join('_').replace(/[^a-z0-9_-]/gi, '_').toLowerCase();
+  }
+  return 'home';
+}
+
+/**
+ * Stamps a route's page component with data-preview-page-key. Fivora requires
+ * exactly one per exported route, so the key comes from the scanned route id
+ * rather than being guessed from the filename — Pages Router uses
+ * `pages/contact.jsx`, App Router uses `app/contact/page.tsx`.
+ *
+ * `<main>` is preferred, but any project shape is supported by falling back to
+ * the outermost element the page component returns.
+ */
+function instrumentPageKey(code, relativeFile, pageKey) {
+  if (code.includes('data-preview-page-key')) return { code, updated: false };
+  const key = pageKey || inferPageKey(relativeFile);
+
+  let ast;
+  try {
+    ast = parseSource(code, relativeFile);
+  } catch {
+    return { code, updated: false };
+  }
+
+  const attribute = () =>
+    b.jsxAttribute(b.jsxIdentifier('data-preview-page-key'), b.stringLiteral(key));
+
+  let target = null;
+  recast.types.visit(ast, {
+    visitJSXOpeningElement(pathNode) {
+      const name = pathNode.node.name && pathNode.node.name.name;
+      if (!target && name === 'main') {
+        target = pathNode.node;
+        return false;
+      }
+      this.traverse(pathNode);
+    },
+  });
+
+  if (!target) {
+    // No <main>: use the first host element of the returned tree so the marker
+    // still lands inside this route's exported HTML.
+    recast.types.visit(ast, {
+      visitJSXElement(pathNode) {
+        if (target) return false;
+        const name = getJsxName(pathNode.node);
+        if (typeof name === 'string' && /^[a-z]/.test(name)) {
+          target = pathNode.node.openingElement;
+          return false;
+        }
+        this.traverse(pathNode);
+      },
+    });
+  }
+
+  if (!target) return { code, updated: false };
+  target.attributes = target.attributes || [];
+  target.attributes.unshift(attribute());
+  return { code: printSource(ast, code), updated: true };
+}
+
+module.exports = {
+  instrumentPageKey,
+  inferPageKey,
+};