meno-core 1.0.38 → 1.0.39

package/lib/server/astro/componentEmitter.ts

@@ -0,0 +1,208 @@
+/**
+ * Component File Generator
+ * Generates .astro files from StructuredComponentDefinitions
+ */
+
+import type {
+  ComponentDefinition,
+  StructuredComponentDefinition,
+  PropDefinition,
+} from '../../shared/types';
+import type { BasePropDefinition, ListPropDefinition, LinkPropValue } from '../../shared/types/components';
+import type { BreakpointConfig } from '../../shared/breakpoints';
+import { DEFAULT_BREAKPOINTS } from '../../shared/breakpoints';
+import { nodeToAstro, type AstroEmitContext } from './nodeToAstro';
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+/**
+ * Convert a PropDefinition to a TypeScript type string
+ */
+function propDefToTSType(def: PropDefinition): string {
+  switch (def.type) {
+    case 'string':
+    case 'rich-text':
+    case 'file':
+      return 'string';
+    case 'number':
+      return 'number';
+    case 'boolean':
+      return 'boolean';
+    case 'select':
+      if ('options' in def && def.options && def.options.length > 0) {
+        return def.options.map((o) => `'${o}'`).join(' | ');
+      }
+      return 'string';
+    case 'link':
+      return '{ href: string; target?: string }';
+    case 'list':
+      return 'any[]';
+    default:
+      return 'any';
+  }
+}
+
+/**
+ * Format a default value for destructuring
+ */
+function formatDefault(def: PropDefinition): string | null {
+  if (!('default' in def) || def.default === undefined) return null;
+  const val = def.default;
+
+  if (typeof val === 'string') return JSON.stringify(val);
+  if (typeof val === 'number' || typeof val === 'boolean') return String(val);
+
+  // I18nValue
+  if (typeof val === 'object' && val !== null && '_i18n' in val) {
+    // Use the first available locale value
+    for (const [key, v] of Object.entries(val)) {
+      if (key !== '_i18n' && typeof v === 'string') return JSON.stringify(v);
+    }
+    return null;
+  }
+
+  // Link value
+  if (typeof val === 'object' && val !== null && 'href' in val) {
+    return JSON.stringify(val);
+  }
+
+  // Arrays
+  if (Array.isArray(val)) {
+    return JSON.stringify(val);
+  }
+
+  return JSON.stringify(val);
+}
+
+// ---------------------------------------------------------------------------
+// Main emitter
+// ---------------------------------------------------------------------------
+
+/**
+ * Generate a .astro file string from a component definition
+ */
+export function emitAstroComponent(
+  name: string,
+  def: ComponentDefinition,
+  allComponents: Record<string, ComponentDefinition>,
+  breakpoints: BreakpointConfig = DEFAULT_BREAKPOINTS
+): string {
+  const comp = def.component;
+  const propDefs = comp.interface || {};
+  const structure = comp.structure;
+
+  if (!structure) {
+    // Component with no structure - just CSS/JS
+    return buildNoStructureComponent(name, comp);
+  }
+
+  // Build the Astro context for template emission
+  const ctx: AstroEmitContext = {
+    imports: new Set<string>(),
+    isComponentDef: true,
+    componentProps: propDefs,
+    globalComponents: allComponents,
+    indent: 0,
+    ssrFallbacks: new Map(),
+    elementPath: [0],
+    fileType: 'component',
+    fileName: name,
+    breakpoints,
+  };
+
+  // Emit the template body
+  const templateBody = nodeToAstro(structure, ctx);
+
+  // Build frontmatter
+  const frontmatter = buildFrontmatter(name, propDefs, ctx.imports, ctx.dynamicTags);
+
+  // Build style/script sections
+  const styleSection = comp.css ? `\n<style>\n${comp.css}\n</style>\n` : '';
+  const scriptSection = comp.javascript ? `\n<script>\n${comp.javascript}\n</script>\n` : '';
+
+  return `---\n${frontmatter}---\n${templateBody}${styleSection}${scriptSection}`;
+}
+
+/**
+ * Build the frontmatter section (imports, Props interface, destructuring)
+ */
+function buildFrontmatter(
+  componentName: string,
+  propDefs: Record<string, PropDefinition>,
+  imports: Set<string>,
+  dynamicTags?: Map<string, string>
+): string {
+  const lines: string[] = [];
+
+  // Component imports
+  for (const imp of Array.from(imports).sort()) {
+    lines.push(`import ${imp} from './${imp}.astro';`);
+  }
+
+  if (lines.length > 0) lines.push('');
+
+  const propEntries = Object.entries(propDefs);
+
+  if (propEntries.length > 0) {
+    // Interface
+    lines.push('interface Props {');
+    for (const [propName, propDef] of propEntries) {
+      if (propName === 'children') continue;
+      const tsType = propDefToTSType(propDef);
+      const optional = 'default' in propDef && propDef.default !== undefined;
+      lines.push(`  ${propName}${optional ? '?' : ''}: ${tsType};`);
+    }
+    lines.push('}');
+    lines.push('');
+
+    // Destructuring with defaults
+    const destructParts: string[] = [];
+    for (const [propName, propDef] of propEntries) {
+      if (propName === 'children') continue;
+      const defaultVal = formatDefault(propDef);
+      if (defaultVal !== null) {
+        destructParts.push(`${propName} = ${defaultVal}`);
+      } else {
+        destructParts.push(propName);
+      }
+    }
+
+    if (destructParts.length > 0) {
+      if (destructParts.length <= 3 && destructParts.join(', ').length < 80) {
+        lines.push(`const { ${destructParts.join(', ')} } = Astro.props;`);
+      } else {
+        lines.push('const {');
+        for (const part of destructParts) {
+          lines.push(`  ${part},`);
+        }
+        lines.push('} = Astro.props;');
+      }
+    }
+  }
+
+  // Dynamic tag definitions (e.g., const Tag_0_0 = `h${size}`)
+  if (dynamicTags && dynamicTags.size > 0) {
+    lines.push('');
+    for (const [varName, templateExpr] of dynamicTags) {
+      lines.push(`const ${varName} = \`${templateExpr}\`;`);
+    }
+  }
+
+  if (lines.length > 0) lines.push('');
+  return lines.join('\n');
+}
+
+/**
+ * Build a component with no structure (CSS/JS only)
+ */
+function buildNoStructureComponent(
+  name: string,
+  comp: StructuredComponentDefinition
+): string {
+  let content = '---\n---\n<slot />\n';
+  if (comp.css) content += `\n<style>\n${comp.css}\n</style>\n`;
+  if (comp.javascript) content += `\n<script>\n${comp.javascript}\n</script>\n`;
+  return content;
+}

package/lib/server/astro/cssCollector.ts

@@ -0,0 +1,147 @@
+/**
+ * Mapping Variant CSS Collector (Tailwind)
+ * Walks all component definitions to find StyleMapping objects,
+ * generates Tailwind classes for every possible value, ensuring
+ * the Tailwind safelist covers all prop variants.
+ */
+
+import type { ComponentDefinition, ComponentNode } from '../../shared/types';
+import type {
+  StyleObject,
+  ResponsiveStyleObject,
+  StyleMapping,
+} from '../../shared/types/styles';
+import type { BreakpointConfig } from '../../shared/breakpoints';
+import { DEFAULT_BREAKPOINTS } from '../../shared/breakpoints';
+import { propertyToTailwind } from './tailwindMapper';
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+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;
+}
+
+/**
+ * Walk a style object and collect Tailwind classes for every possible mapping value
+ */
+function collectFromStyle(
+  style: StyleObject | ResponsiveStyleObject | undefined,
+  classes: Set<string>,
+  breakpoints: BreakpointConfig
+): void {
+  if (!style) return;
+
+  if (isResponsiveStyle(style)) {
+    for (const [bp, bpStyle] of Object.entries(style)) {
+      if (!bpStyle) continue;
+      let prefix = '';
+      if (bp !== 'base') {
+        const bpValue = breakpoints[bp]?.breakpoint;
+        if (bpValue) {
+          prefix = `max-[${bpValue}px]:`;
+        }
+      }
+      collectFromFlatStyle(bpStyle, prefix, classes);
+    }
+  } else {
+    collectFromFlatStyle(style, '', classes);
+  }
+}
+
+function collectFromFlatStyle(
+  style: StyleObject,
+  prefix: string,
+  classes: Set<string>
+): void {
+  for (const [property, value] of Object.entries(style)) {
+    if (!isStyleMapping(value)) continue;
+
+    // Generate a Tailwind class for each possible value in the mapping
+    for (const [, cssValue] of Object.entries(value.values)) {
+      const twClass = propertyToTailwind(property, cssValue);
+      if (twClass) {
+        classes.add(prefix ? `${prefix}${twClass}` : twClass);
+      }
+    }
+  }
+}
+
+/**
+ * Recursively walk a component node tree to collect mapping classes
+ */
+function walkNode(
+  node: ComponentNode | ComponentNode[] | string | number | null | undefined,
+  classes: Set<string>,
+  breakpoints: BreakpointConfig
+): void {
+  if (!node || typeof node === 'string' || typeof node === 'number') return;
+
+  if (Array.isArray(node)) {
+    for (const child of node) {
+      walkNode(child, classes, breakpoints);
+    }
+    return;
+  }
+
+  // Collect from style
+  if ('style' in node && node.style) {
+    collectFromStyle(node.style as StyleObject | ResponsiveStyleObject, classes, breakpoints);
+  }
+
+  // Collect from interactive styles
+  if ('interactiveStyles' in node && Array.isArray((node as any).interactiveStyles)) {
+    for (const rule of (node as any).interactiveStyles) {
+      if (rule.style) {
+        collectFromStyle(rule.style, classes, breakpoints);
+      }
+    }
+  }
+
+  // Recurse into children
+  if ('children' in node && node.children) {
+    if (Array.isArray(node.children)) {
+      for (const child of node.children) {
+        walkNode(child as ComponentNode, classes, breakpoints);
+      }
+    }
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Main export
+// ---------------------------------------------------------------------------
+
+/**
+ * Walk all component definitions, find all StyleMapping objects,
+ * and generate Tailwind classes for every value.
+ *
+ * @returns Set of Tailwind class names for the safelist
+ */
+export function collectAllMappingClasses(
+  componentDefs: Record<string, ComponentDefinition>,
+  breakpoints: BreakpointConfig = DEFAULT_BREAKPOINTS
+): Set<string> {
+  const classes = new Set<string>();
+
+  for (const def of Object.values(componentDefs)) {
+    const structure = def.component?.structure;
+    if (structure) {
+      walkNode(structure, classes, breakpoints);
+    }
+  }
+
+  return classes;
+}

package/lib/server/astro/index.ts

@@ -0,0 +1,5 @@
+export { nodeToAstro, type AstroEmitContext } from './nodeToAstro';
+export { emitAstroComponent } from './componentEmitter';
+export { emitAstroPage, type PageEmitOptions } from './pageEmitter';
+export { collectAllMappingClasses } from './cssCollector';
+export { propertyToTailwind, stylesToTailwind, responsiveStylesToTailwind } from './tailwindMapper';