meno-core 1.0.39 → 1.0.41

package/lib/server/astro/componentEmitter.ts

@@ -76,6 +76,47 @@ function formatDefault(def: PropDefinition): string | null {
   return JSON.stringify(val);
 }
 
+/**
+ * Merge the `className` variable onto the root element's class attribute.
+ * Handles: class="existing", class:list={[...]}, class={expr}, or no class at all.
+ */
+function mergeClassNameOntoRoot(template: string): string {
+  // Find the first opening tag (skip whitespace/newlines)
+  const tagMatch = template.match(/^(\s*<)(\w[\w-]*)([\s\S]*?)(\/?>)/);
+  if (!tagMatch) return template;
+
+  const [fullMatch, prefix, tagName, attrs, close] = tagMatch;
+
+  // Check for existing class:list
+  const classListMatch = attrs.match(/\s+class:list=\{(\[[\s\S]*?\])\}/);
+  if (classListMatch) {
+    const existingList = classListMatch[1];
+    // Append className to the array
+    const newList = existingList.replace(/\]$/, `, className]`);
+    const newAttrs = attrs.replace(classListMatch[0], ` class:list={${newList}}`);
+    return prefix + tagName + newAttrs + close + template.slice(fullMatch.length);
+  }
+
+  // Check for existing class="..." (static)
+  const classStaticMatch = attrs.match(/\s+class="([^"]*)"/);
+  if (classStaticMatch) {
+    const existing = classStaticMatch[1];
+    const newAttrs = attrs.replace(classStaticMatch[0], ` class:list={["${existing}", className]}`);
+    return prefix + tagName + newAttrs + close + template.slice(fullMatch.length);
+  }
+
+  // Check for existing class={expr} (dynamic)
+  const classDynMatch = attrs.match(/\s+class=\{([^}]+)\}/);
+  if (classDynMatch) {
+    const expr = classDynMatch[1];
+    const newAttrs = attrs.replace(classDynMatch[0], ` class:list={[${expr}, className]}`);
+    return prefix + tagName + newAttrs + close + template.slice(fullMatch.length);
+  }
+
+  // No existing class — add class={className}
+  return prefix + tagName + ` class={className}` + attrs + close + template.slice(fullMatch.length);
+}
+
 // ---------------------------------------------------------------------------
 // Main emitter
 // ---------------------------------------------------------------------------
@@ -87,7 +128,8 @@ export function emitAstroComponent(
   name: string,
   def: ComponentDefinition,
   allComponents: Record<string, ComponentDefinition>,
-  breakpoints: BreakpointConfig = DEFAULT_BREAKPOINTS
+  breakpoints: BreakpointConfig = DEFAULT_BREAKPOINTS,
+  defaultLocale: string = 'en'
 ): string {
   const comp = def.component;
   const propDefs = comp.interface || {};
@@ -110,17 +152,23 @@ export function emitAstroComponent(
     fileType: 'component',
     fileName: name,
     breakpoints,
+    defaultLocale,
   };
 
   // Emit the template body
-  const templateBody = nodeToAstro(structure, ctx);
+  let templateBody = nodeToAstro(structure, ctx);
+
+  // Merge instance className onto the root element (for acceptsStyles support)
+  templateBody = mergeClassNameOntoRoot(templateBody);
 
-  // Build frontmatter
-  const frontmatter = buildFrontmatter(name, propDefs, ctx.imports, ctx.dynamicTags);
+  // Build frontmatter (includes class prop for instance style support)
+  const frontmatter = buildFrontmatter(name, propDefs, ctx.imports, ctx.dynamicTags, ctx.needsI18nResolver ? defaultLocale : undefined);
 
   // 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` : '';
+  const scriptSection = comp.javascript
+    ? buildScriptSection(comp.javascript, comp, propDefs)
+    : '';
 
   return `---\n${frontmatter}---\n${templateBody}${styleSection}${scriptSection}`;
 }
@@ -132,7 +180,8 @@ function buildFrontmatter(
   componentName: string,
   propDefs: Record<string, PropDefinition>,
   imports: Set<string>,
-  dynamicTags?: Map<string, string>
+  dynamicTags?: Map<string, string>,
+  i18nDefaultLocale?: string
 ): string {
   const lines: string[] = [];
 
@@ -145,7 +194,8 @@ function buildFrontmatter(
 
   const propEntries = Object.entries(propDefs);
 
-  if (propEntries.length > 0) {
+  // Always generate Props interface and destructuring (at minimum for class prop)
+  {
     // Interface
     lines.push('interface Props {');
     for (const [propName, propDef] of propEntries) {
@@ -154,6 +204,8 @@ function buildFrontmatter(
       const optional = 'default' in propDef && propDef.default !== undefined;
       lines.push(`  ${propName}${optional ? '?' : ''}: ${tsType};`);
     }
+    // Always include class prop for instance style support
+    lines.push('  class?: string;');
     lines.push('}');
     lines.push('');
 
@@ -164,21 +216,24 @@ function buildFrontmatter(
       const defaultVal = formatDefault(propDef);
       if (defaultVal !== null) {
         destructParts.push(`${propName} = ${defaultVal}`);
+      } else if (propDef.type === 'link') {
+        destructParts.push(`${propName} = { href: "#" }`);
       } 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;');
+    // Always include class prop (renamed to className to avoid reserved word)
+    destructParts.push('class: className = ""');
+
+    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;');
     }
   }
 
@@ -190,6 +245,18 @@ function buildFrontmatter(
     }
   }
 
+  // i18n resolver helper — resolves { _i18n: true, en: "...", pl: "..." } at runtime
+  if (i18nDefaultLocale) {
+    lines.push('');
+    lines.push(`const r = (v: any) => {`);
+    lines.push(`  if (v && typeof v === 'object' && v._i18n) {`);
+    lines.push(`    const locale = Astro.currentLocale ?? '${i18nDefaultLocale}';`);
+    lines.push(`    return v[locale] ?? v['${i18nDefaultLocale}'] ?? Object.values(v).find((s: any) => typeof s === 'string' && s !== '') ?? '';`);
+    lines.push(`  }`);
+    lines.push(`  return v ?? '';`);
+    lines.push(`};`);
+  }
+
   if (lines.length > 0) lines.push('');
   return lines.join('\n');
 }
@@ -203,6 +270,72 @@ function buildNoStructureComponent(
 ): 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`;
+  if (comp.javascript) content += `\n<script is:inline>\n${comp.javascript}\n</script>\n`;
   return content;
 }
+
+/**
+ * Transform JS for define:vars compatibility.
+ * Astro's define:vars injects each prop as a script-scope variable, not a `props` object.
+ * This function:
+ * 1. Removes `const/let/var { x, y } = props;` destructuring lines
+ * 2. Replaces `props.X` references with direct `X` variable access
+ * 3. Drops `var/let/const` from redeclarations of define:vars variables
+ */
+function transformDefineVarsJS(js: string, varNames: string[]): string {
+  let result = js;
+
+  // 1. Remove destructuring from props: `const { x, y } = props;`
+  result = result.replace(
+    /^\s*(const|let|var)\s+\{([^}]+)\}\s*=\s*props\s*;?\s*$/gm,
+    (match, _keyword, inner) => {
+      const names = inner.split(',').map((s: string) => s.trim()).filter(Boolean);
+      if (names.every((n: string) => varNames.includes(n))) return '';
+      return match;
+    }
+  );
+
+  // 2. Replace `props.X` with `X` (longest names first to avoid substring conflicts)
+  const sorted = [...varNames].sort((a, b) => b.length - a.length);
+  for (const name of sorted) {
+    result = result.replace(new RegExp(`props\\.${name}\\b`, 'g'), name);
+  }
+
+  // 3. Remove redeclarations of define:vars variables (already injected as const by Astro)
+  for (const name of varNames) {
+    result = result.replace(
+      new RegExp(`^\\s*(var|let|const)\\s+${name}\\s*=[^;]*;?\\s*$`, 'gm'),
+      ''
+    );
+  }
+
+  return result;
+}
+
+/**
+ * Build the script section with proper el/props initialization.
+ * - defineVars components: use Astro's define:vars to pass props into inline script
+ * - other components: use is:inline to avoid module bundling
+ * Both cases use document.currentScript.previousElementSibling to get el.
+ */
+function buildScriptSection(
+  js: string,
+  comp: StructuredComponentDefinition,
+  propDefs: Record<string, PropDefinition>
+): string {
+  const elInit = 'const el = document.currentScript.previousElementSibling;';
+
+  if (comp.defineVars) {
+    const vars = comp.defineVars === true
+      ? Object.keys(propDefs).filter(k => k !== 'children')
+      : comp.defineVars;
+
+    if (vars.length > 0) {
+      const transformedJS = transformDefineVarsJS(js, vars);
+      const defineVarsObj = `{ ${vars.join(', ')} }`;
+      return `\n<script define:vars={${defineVarsObj}}>\n${elInit}\n${transformedJS}\n</script>\n`;
+    }
+  }
+
+  return `\n<script is:inline>\n${elInit}\n${js}\n</script>\n`;
+}