meno-core 1.0.39 → 1.0.41

package/lib/server/webflow/nodeToWebflow.ts

@@ -0,0 +1,423 @@
+/**
+ * Node-to-Webflow Converter
+ * Recursively converts Meno's ComponentNode tree into Webflow element tree.
+ * Follows the same traversal pattern as nodeToAstro.ts.
+ */
+
+import type {
+  ComponentNode,
+  ComponentDefinition,
+  StructuredComponentDefinition,
+  HtmlNode,
+  ComponentInstanceNode,
+  SlotMarker,
+  EmbedNode,
+  LinkNode,
+} from '../../shared/types';
+import type { ListNode } from '../../shared/registry/nodeTypes/ListNodeType';
+import type {
+  StyleObject,
+  ResponsiveStyleObject,
+  InteractiveStyles,
+} from '../../shared/types/styles';
+import type { BreakpointConfig } from '../../shared/breakpoints';
+import { generateElementClassName } from '../../shared/elementClassName';
+import { isVoidElement } from '../../shared/nodeUtils';
+import { NODE_TYPE } from '../../shared/constants';
+import type { WebflowElement, WebflowStyleClass } from './types';
+import { mapStylesToWebflow } from './styleMapper';
+
+// ---------------------------------------------------------------------------
+// Context
+// ---------------------------------------------------------------------------
+
+export interface WebflowEmitContext {
+  /** All global components */
+  globalComponents: Record<string, ComponentDefinition>;
+  /** Current element path for class name generation */
+  elementPath: number[];
+  /** File type for element class context */
+  fileType: 'component' | 'page';
+  /** File name for element class context */
+  fileName: string;
+  /** Breakpoint config */
+  breakpoints: BreakpointConfig;
+  /** Collected style classes (side output) */
+  styleClasses: Map<string, WebflowStyleClass>;
+  /** Children passed from a component instance to fill slot markers */
+  slotChildren?: (ComponentNode | string)[] | ComponentNode | string;
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function buildElementClass(ctx: WebflowEmitContext, label: string | undefined): string {
+  return generateElementClassName({
+    fileType: ctx.fileType,
+    fileName: ctx.fileName,
+    label,
+    path: ctx.elementPath,
+  });
+}
+
+function resolveTemplate(text: string, props?: Record<string, unknown>): string {
+  if (!props) return text;
+  return text.replace(/\{\{(.+?)\}\}/g, (_, expr) => {
+    const trimmed = expr.trim();
+
+    // Support "expr || 'fallback'" pattern
+    const orMatch = trimmed.match(/^(.+?)\s*\|\|\s*['"](.+?)['"]$/);
+    if (orMatch) {
+      const value = resolveNestedProp(props, orMatch[1].trim());
+      return (value !== undefined && value !== '' && value !== null)
+        ? String(value)
+        : orMatch[2];
+    }
+
+    // Support "expr ? 'a' : 'b'" ternary pattern
+    const ternaryMatch = trimmed.match(/^(.+?)\s*\?\s*['"](.+?)['"]\s*:\s*['"](.+?)['"]$/);
+    if (ternaryMatch) {
+      const value = resolveNestedProp(props, ternaryMatch[1].trim());
+      return value ? ternaryMatch[2] : ternaryMatch[3];
+    }
+
+    // Simple prop lookup with dot-notation
+    const value = resolveNestedProp(props, trimmed);
+    return value !== undefined ? String(value) : '';
+  });
+}
+
+function resolveNestedProp(obj: Record<string, unknown>, path: string): unknown {
+  const parts = path.split('.');
+  let current: unknown = obj;
+  for (const part of parts) {
+    if (current === null || current === undefined || typeof current !== 'object') return undefined;
+    current = (current as Record<string, unknown>)[part];
+  }
+  return current;
+}
+
+function hasTemplates(text: string): boolean {
+  return /\{\{.+?\}\}/.test(text);
+}
+
+// ---------------------------------------------------------------------------
+// Main recursive converter
+// ---------------------------------------------------------------------------
+
+/**
+ * Convert a ComponentNode tree to Webflow element tree.
+ * Also collects WebflowStyleClass definitions as a side effect in ctx.styleClasses.
+ */
+export function nodeToWebflow(
+  node: ComponentNode | ComponentNode[] | string | number | null | undefined,
+  ctx: WebflowEmitContext,
+  instanceProps?: Record<string, unknown>
+): WebflowElement[] {
+  if (node === null || node === undefined) return [];
+
+  // Text/number
+  if (typeof node === 'string') {
+    const text = instanceProps ? resolveTemplate(node, instanceProps) : node;
+    return [{ tag: 'span', textContent: text }];
+  }
+  if (typeof node === 'number') {
+    return [{ tag: 'span', textContent: String(node) }];
+  }
+
+  // Array of nodes
+  if (Array.isArray(node)) {
+    const results: WebflowElement[] = [];
+    for (let i = 0; i < node.length; i++) {
+      const child = node[i];
+      const savedPath = [...ctx.elementPath];
+      ctx.elementPath = [...ctx.elementPath, i];
+      results.push(...nodeToWebflow(child, ctx, instanceProps));
+      ctx.elementPath = savedPath;
+    }
+    return results;
+  }
+
+  // Dispatch by node type
+  switch (node.type) {
+    case NODE_TYPE.NODE:
+      return [emitHtmlNode(node as HtmlNode, ctx, instanceProps)];
+    case NODE_TYPE.COMPONENT:
+      return emitComponentInstance(node as ComponentInstanceNode, ctx, instanceProps);
+    case NODE_TYPE.SLOT:
+      return emitSlotMarker(node as SlotMarker, ctx, instanceProps);
+    case NODE_TYPE.EMBED:
+      return [emitEmbedNode(node as EmbedNode, ctx, instanceProps)];
+    case NODE_TYPE.LINK:
+      return [emitLinkNode(node as LinkNode, ctx, instanceProps)];
+    case NODE_TYPE.LIST:
+    case 'cms-list' as any:
+    case NODE_TYPE.LOCALE_LIST:
+      // Complex nodes — emit a placeholder div
+      return [{ tag: 'div', attributes: { 'data-meno-type': node.type } }];
+    default:
+      return [];
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Node type emitters
+// ---------------------------------------------------------------------------
+
+function emitHtmlNode(
+  node: HtmlNode,
+  ctx: WebflowEmitContext,
+  instanceProps?: Record<string, unknown>
+): WebflowElement {
+  const tag = hasTemplates(node.tag) && instanceProps
+    ? resolveTemplate(node.tag, instanceProps)
+    : node.tag;
+
+  const style = node.style as StyleObject | ResponsiveStyleObject | undefined;
+  const interactiveStyles = node.interactiveStyles as InteractiveStyles | undefined;
+
+  // Generate element class and map styles
+  const needsClass = style || (interactiveStyles && interactiveStyles.length > 0) || node.generateElementClass;
+  let className: string | undefined;
+  let comboClassNames: string[] | undefined;
+
+  if (needsClass) {
+    const elementClass = buildElementClass(ctx, node.label);
+    const { primaryClass, comboClasses } = mapStylesToWebflow(
+      elementClass, style, interactiveStyles, ctx.breakpoints
+    );
+
+    className = primaryClass.name;
+    ctx.styleClasses.set(primaryClass.name, primaryClass);
+
+    if (comboClasses.length > 0) {
+      comboClassNames = [];
+      for (const combo of comboClasses) {
+        ctx.styleClasses.set(combo.name, combo);
+        comboClassNames.push(combo.name);
+      }
+    }
+  }
+
+  // Build attributes
+  const attributes: Record<string, string | number | boolean> = {};
+  if (node.attributes) {
+    for (const [key, value] of Object.entries(node.attributes)) {
+      if (instanceProps && typeof value === 'string' && hasTemplates(value)) {
+        attributes[key] = resolveTemplate(value, instanceProps);
+      } else {
+        attributes[key] = value;
+      }
+    }
+  }
+
+  // Build children
+  let children: WebflowElement[] | undefined;
+  let textContent: string | undefined;
+  if (!isVoidElement(tag) && node.children) {
+    // Optimize: single string child becomes textContent instead of child element
+    if (typeof node.children === 'string') {
+      textContent = instanceProps ? resolveTemplate(node.children, instanceProps) : node.children;
+    } else if (
+      Array.isArray(node.children) &&
+      node.children.length === 1 &&
+      typeof node.children[0] === 'string'
+    ) {
+      const text = node.children[0] as string;
+      textContent = instanceProps ? resolveTemplate(text, instanceProps) : text;
+    } else {
+      const innerCtx = { ...ctx, elementPath: [...ctx.elementPath] };
+      children = convertChildren(node.children, innerCtx, instanceProps);
+      if (children.length === 0) children = undefined;
+    }
+  }
+
+  // Handle conditional rendering
+  let conditional: WebflowElement['conditional'];
+  const ifValue = (node as any).if;
+  if (ifValue !== undefined && ifValue !== true) {
+    if (typeof ifValue === 'object' && ifValue._mapping) {
+      conditional = { prop: ifValue.prop, condition: 'truthy' };
+    } else if (typeof ifValue === 'string') {
+      const match = ifValue.match(/^\{\{(.+)\}\}$/);
+      conditional = { prop: match ? match[1].trim() : ifValue, condition: 'truthy' };
+    }
+  }
+
+  const element: WebflowElement = { tag };
+  if (className) element.className = className;
+  if (comboClassNames) element.comboClasses = comboClassNames;
+  if (textContent) element.textContent = textContent;
+  if (children) element.children = children;
+  if (Object.keys(attributes).length > 0) element.attributes = attributes;
+  if (conditional) element.conditional = conditional;
+
+  return element;
+}
+
+function emitComponentInstance(
+  node: ComponentInstanceNode,
+  ctx: WebflowEmitContext,
+  parentProps?: Record<string, unknown>
+): WebflowElement[] {
+  const compDef = ctx.globalComponents[node.component];
+  if (!compDef) {
+    // Unknown component — emit placeholder
+    return [{ tag: 'div', attributes: { 'data-component': node.component } }];
+  }
+
+  // Resolve props: merge defaults with instance props
+  const resolvedProps: Record<string, unknown> = {};
+  const structured = compDef.component;
+
+  if (structured?.interface) {
+    for (const [key, propDef] of Object.entries(structured.interface)) {
+      resolvedProps[key] = propDef.default;
+    }
+  }
+
+  if (node.props) {
+    for (const [key, value] of Object.entries(node.props)) {
+      if (key === 'children') continue;
+      if (typeof value === 'string' && hasTemplates(value) && parentProps) {
+        resolvedProps[key] = resolveTemplate(value, parentProps);
+      } else {
+        resolvedProps[key] = value;
+      }
+    }
+  }
+
+  // Inline-expand the component's node tree
+  const body = structured?.structure || (compDef as any).node;
+  if (!body) return [];
+
+  const compCtx: WebflowEmitContext = {
+    ...ctx,
+    fileType: 'component',
+    fileName: node.component,
+    elementPath: [0],
+    slotChildren: node.children,
+  };
+
+  return nodeToWebflow(body, compCtx, resolvedProps);
+}
+
+function emitSlotMarker(
+  node: SlotMarker,
+  ctx: WebflowEmitContext,
+  instanceProps?: Record<string, unknown>
+): WebflowElement[] {
+  // Use instance children passed via context to fill the slot
+  if (ctx.slotChildren) {
+    // Switch back to parent context (page-level) for slot children
+    const parentCtx: WebflowEmitContext = {
+      ...ctx,
+      slotChildren: undefined, // prevent infinite slot nesting
+    };
+    return convertChildren(ctx.slotChildren as any, parentCtx, instanceProps);
+  }
+  // Fall back to slot defaults
+  if (node.default) {
+    return convertChildren(node.default as any, ctx, instanceProps);
+  }
+  return [];
+}
+
+function emitEmbedNode(
+  node: EmbedNode,
+  ctx: WebflowEmitContext,
+  instanceProps?: Record<string, unknown>
+): WebflowElement {
+  const style = node.style as StyleObject | ResponsiveStyleObject | undefined;
+  const interactiveStyles = node.interactiveStyles as InteractiveStyles | undefined;
+
+  let className: string | undefined;
+  if (style || (interactiveStyles && interactiveStyles.length > 0)) {
+    const elementClass = buildElementClass(ctx, node.label);
+    const { primaryClass } = mapStylesToWebflow(
+      elementClass, style, interactiveStyles, ctx.breakpoints
+    );
+    className = primaryClass.name;
+    ctx.styleClasses.set(primaryClass.name, primaryClass);
+  }
+
+  const htmlStr = typeof node.html === 'string' ? node.html : '';
+
+  const element: WebflowElement = {
+    tag: 'div',
+    rawHtml: htmlStr,
+  };
+  if (className) element.className = className;
+
+  return element;
+}
+
+function emitLinkNode(
+  node: LinkNode,
+  ctx: WebflowEmitContext,
+  instanceProps?: Record<string, unknown>
+): WebflowElement {
+  const style = node.style as StyleObject | ResponsiveStyleObject | undefined;
+  const interactiveStyles = node.interactiveStyles as InteractiveStyles | undefined;
+
+  let className: string | undefined;
+  if (style || (interactiveStyles && interactiveStyles.length > 0)) {
+    const elementClass = buildElementClass(ctx, node.label);
+    const { primaryClass } = mapStylesToWebflow(
+      elementClass, style, interactiveStyles, ctx.breakpoints
+    );
+    className = primaryClass.name;
+    ctx.styleClasses.set(primaryClass.name, primaryClass);
+  }
+
+  // Resolve href
+  let href = '#';
+  if (typeof node.href === 'string') {
+    href = instanceProps && hasTemplates(node.href)
+      ? resolveTemplate(node.href, instanceProps)
+      : node.href;
+  }
+
+  const attributes: Record<string, string | number | boolean> = { href };
+  if (node.attributes) {
+    for (const [key, value] of Object.entries(node.attributes)) {
+      attributes[key] = value;
+    }
+  }
+
+  let children: WebflowElement[] | undefined;
+  if (node.children) {
+    children = convertChildren(node.children, ctx, instanceProps);
+    if (children.length === 0) children = undefined;
+  }
+
+  const element: WebflowElement = { tag: 'a', attributes };
+  if (className) element.className = className;
+  if (children) element.children = children;
+
+  return element;
+}
+
+// ---------------------------------------------------------------------------
+// Children helper
+// ---------------------------------------------------------------------------
+
+function convertChildren(
+  children: (ComponentNode | string)[] | string | ComponentNode | null | undefined,
+  ctx: WebflowEmitContext,
+  instanceProps?: Record<string, unknown>
+): WebflowElement[] {
+  if (!children) return [];
+
+  if (typeof children === 'string') {
+    return nodeToWebflow(children, ctx, instanceProps);
+  }
+
+  if (Array.isArray(children)) {
+    return nodeToWebflow(children as ComponentNode[], ctx, instanceProps);
+  }
+
+  // Single node
+  return nodeToWebflow(children, ctx, instanceProps);
+}

package/lib/server/webflow/styleMapper.ts

@@ -0,0 +1,241 @@
+/**
+ * Webflow Style Mapper
+ * Converts Meno styles (ResponsiveStyleObject + InteractiveStyles) into
+ * Webflow named style classes with breakpoint and pseudo-state overrides.
+ */
+
+import type {
+  StyleObject,
+  ResponsiveStyleObject,
+  StyleMapping,
+  InteractiveStyles,
+} from '../../shared/types/styles';
+import type { BreakpointConfig } from '../../shared/breakpoints';
+import type { WebflowStyleClass, WebflowBreakpoint, WebflowPseudoState, CSSProperties } from './types';
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+/** CSS properties that accept unitless numeric values */
+const UNITLESS_PROPERTIES = new Set([
+  'opacity', 'z-index', 'flex-grow', 'flex-shrink', 'flex',
+  'order', 'orphans', 'widows', 'column-count', 'font-weight',
+  'tab-size',
+]);
+
+function isStyleMapping(value: unknown): value is StyleMapping {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    '_mapping' in value &&
+    (value as StyleMapping)._mapping === true
+  );
+}
+
+function isResponsiveStyle(
+  style: StyleObject | ResponsiveStyleObject
+): style is ResponsiveStyleObject {
+  return 'base' in style || 'tablet' in style || 'mobile' in style;
+}
+
+/**
+ * Convert a camelCase CSS property to kebab-case
+ */
+function toKebabCase(prop: string): string {
+  return prop.replace(/([A-Z])/g, '-$1').toLowerCase();
+}
+
+/**
+ * Convert a flat StyleObject to CSS properties, skipping StyleMappings
+ */
+function styleObjectToCSS(style: StyleObject): CSSProperties {
+  const css: CSSProperties = {};
+  for (const [prop, value] of Object.entries(style)) {
+    if (isStyleMapping(value)) continue;
+    if (value === '' || value === undefined || value === null) continue;
+    if (typeof value === 'boolean' || typeof value === 'object') continue;
+    const cssProp = toKebabCase(prop);
+    if (typeof value === 'number') {
+      if (isNaN(value)) continue;
+      css[cssProp] = UNITLESS_PROPERTIES.has(cssProp) ? String(value) : `${value}px`;
+    } else {
+      css[cssProp] = String(value);
+    }
+  }
+  return css;
+}
+
+/**
+ * Extract all StyleMappings from a style object (flat or responsive)
+ */
+function collectStyleMappings(
+  style: StyleObject | ResponsiveStyleObject | undefined
+): Array<{ property: string; mapping: StyleMapping }> {
+  if (!style) return [];
+  const result: Array<{ property: string; mapping: StyleMapping }> = [];
+
+  if (isResponsiveStyle(style)) {
+    // Only collect from base — mappings apply across breakpoints
+    const base = (style as ResponsiveStyleObject).base;
+    if (base) {
+      for (const [prop, value] of Object.entries(base)) {
+        if (isStyleMapping(value)) {
+          result.push({ property: prop, mapping: value });
+        }
+      }
+    }
+  } else {
+    for (const [prop, value] of Object.entries(style)) {
+      if (isStyleMapping(value)) {
+        result.push({ property: prop, mapping: value });
+      }
+    }
+  }
+  return result;
+}
+
+/**
+ * Map interactive style postfix to Webflow pseudo-state
+ */
+function postfixToPseudoState(postfix: string): WebflowPseudoState | null {
+  if (postfix.includes(':hover')) return 'hover';
+  if (postfix.includes(':focus-visible')) return 'focus-visible';
+  if (postfix.includes(':focus')) return 'focus';
+  if (postfix.includes(':active')) return 'active';
+  if (postfix.includes(':visited')) return 'visited';
+  return null;
+}
+
+// ---------------------------------------------------------------------------
+// Main Mapper
+// ---------------------------------------------------------------------------
+
+export interface StyleMapperResult {
+  /** The primary style class for this element */
+  primaryClass: WebflowStyleClass;
+  /** Combo classes for StyleMapping variants */
+  comboClasses: WebflowStyleClass[];
+}
+
+/**
+ * Convert Meno element styles to Webflow style classes.
+ *
+ * @param className - Element class name (e.g., "c_navigation_hamburger")
+ * @param style - Element's responsive style object
+ * @param interactiveStyles - Element's interactive (hover/focus/etc.) styles
+ * @param breakpoints - Project breakpoint configuration
+ */
+export function mapStylesToWebflow(
+  className: string,
+  style: StyleObject | ResponsiveStyleObject | undefined,
+  interactiveStyles: InteractiveStyles | undefined,
+  breakpoints: BreakpointConfig
+): StyleMapperResult {
+  // Convert underscores to dashes for Webflow class naming convention
+  const webflowClassName = className.replace(/_/g, '-');
+
+  const primaryClass: WebflowStyleClass = {
+    name: webflowClassName,
+    base: {},
+  };
+
+  // --- Base + breakpoint styles ---
+  if (style) {
+    if (isResponsiveStyle(style)) {
+      const responsive = style as ResponsiveStyleObject;
+
+      if (responsive.base) {
+        primaryClass.base = styleObjectToCSS(responsive.base);
+      }
+
+      if (responsive.tablet) {
+        if (!primaryClass.breakpoints) primaryClass.breakpoints = {};
+        primaryClass.breakpoints.Tablet = styleObjectToCSS(responsive.tablet);
+      }
+
+      if (responsive.mobile) {
+        if (!primaryClass.breakpoints) primaryClass.breakpoints = {};
+        primaryClass.breakpoints.MobilePortrait = styleObjectToCSS(responsive.mobile);
+      }
+
+      // Handle additional custom breakpoints (map to closest Webflow breakpoint)
+      for (const [bpName, bpStyle] of Object.entries(responsive)) {
+        if (!bpStyle || bpName === 'base' || bpName === 'tablet' || bpName === 'mobile') continue;
+        // Custom breakpoints map to Tablet as closest approximation
+        if (!primaryClass.breakpoints) primaryClass.breakpoints = {};
+        primaryClass.breakpoints.Tablet = {
+          ...primaryClass.breakpoints.Tablet,
+          ...styleObjectToCSS(bpStyle),
+        };
+      }
+    } else {
+      // Flat style object — treat as base/Desktop
+      primaryClass.base = styleObjectToCSS(style as StyleObject);
+    }
+  }
+
+  // --- Interactive styles (hover, focus, etc.) ---
+  if (interactiveStyles && interactiveStyles.length > 0) {
+    for (const rule of interactiveStyles) {
+      if (!rule.postfix) continue;
+
+      const pseudoState = postfixToPseudoState(rule.postfix);
+      if (!pseudoState) continue;
+
+      const ruleStyle = rule.style;
+      if (!primaryClass.pseudoStates) primaryClass.pseudoStates = {};
+
+      if (isResponsiveStyle(ruleStyle)) {
+        const responsive = ruleStyle as ResponsiveStyleObject;
+        // Merge base styles into the pseudo-state
+        if (responsive.base) {
+          primaryClass.pseudoStates[pseudoState] = {
+            ...primaryClass.pseudoStates[pseudoState],
+            ...styleObjectToCSS(responsive.base),
+          };
+        }
+      } else {
+        primaryClass.pseudoStates[pseudoState] = {
+          ...primaryClass.pseudoStates[pseudoState],
+          ...styleObjectToCSS(ruleStyle as StyleObject),
+        };
+      }
+    }
+  }
+
+  // --- Combo classes for StyleMappings ---
+  const comboClasses: WebflowStyleClass[] = [];
+  const mappings = collectStyleMappings(style);
+
+  for (const { property, mapping } of mappings) {
+    for (const [value, cssValue] of Object.entries(mapping.values)) {
+      if (cssValue === '' || cssValue === undefined) continue;
+
+      const comboName = `is-${sanitizeClassName(mapping.prop)}-${sanitizeClassName(String(value))}`;
+      const comboClass: WebflowStyleClass = {
+        name: comboName,
+        base: {
+          [toKebabCase(property)]: typeof cssValue === 'number'
+            ? (UNITLESS_PROPERTIES.has(toKebabCase(property)) ? String(cssValue) : `${cssValue}px`)
+            : String(cssValue),
+        },
+        comboParent: webflowClassName,
+      };
+      comboClasses.push(comboClass);
+    }
+  }
+
+  return { primaryClass, comboClasses };
+}
+
+/**
+ * Sanitize a string for use as a CSS class name segment
+ */
+function sanitizeClassName(name: string): string {
+  return name
+    .toLowerCase()
+    .replace(/[^a-z0-9-]/g, '-')
+    .replace(/-+/g, '-')
+    .replace(/^-|-$/g, '');
+}