meno-core 1.0.53 → 1.1.0

package/lib/server/astro/componentEmitter.ts

@@ -3,12 +3,7 @@
  * Generates .astro files from StructuredComponentDefinitions
  */
 
-import type {
-  ComponentDefinition,
-  StructuredComponentDefinition,
-  PropDefinition,
-} from '../../shared/types';
-import type { BasePropDefinition, ListPropDefinition, LinkPropValue } from '../../shared/types/components';
+import type { ComponentDefinition, StructuredComponentDefinition, PropDefinition } from '../../shared/types';
 import type { BreakpointConfig } from '../../shared/breakpoints';
 import { DEFAULT_BREAKPOINTS } from '../../shared/breakpoints';
 import { nodeToAstro, type AstroEmitContext } from './nodeToAstro';
@@ -90,12 +85,16 @@ function mergeClassNameOntoRoot(template: string): string {
   const tagMatch = template.match(/^(\s*<)(\w[\w-]*)([\s\S]*?)(\/?>)/);
   if (!tagMatch) return template;
 
-  const [fullMatch, prefix, tagName, attrs, close] = tagMatch;
+  const fullMatch = tagMatch[0];
+  const prefix = tagMatch[1] ?? '';
+  const tagName = tagMatch[2] ?? '';
+  const attrs = tagMatch[3] ?? '';
+  const close = tagMatch[4] ?? '';
 
   // Check for existing class:list
   const classListMatch = attrs.match(/\s+class:list=\{(\[[\s\S]*?\])\}/);
   if (classListMatch) {
-    const existingList = classListMatch[1];
+    const existingList = classListMatch[1] ?? '';
     // Append className to the array
     const newList = existingList.replace(/\]$/, `, className]`);
     const newAttrs = attrs.replace(classListMatch[0], ` class:list={${newList}}`);
@@ -105,7 +104,7 @@ function mergeClassNameOntoRoot(template: string): string {
   // Check for existing class="..." (static)
   const classStaticMatch = attrs.match(/\s+class="([^"]*)"/);
   if (classStaticMatch) {
-    const existing = classStaticMatch[1];
+    const existing = classStaticMatch[1] ?? '';
     const newAttrs = attrs.replace(classStaticMatch[0], ` class:list={["${existing}", className]}`);
     return prefix + tagName + newAttrs + close + template.slice(fullMatch.length);
   }
@@ -113,13 +112,13 @@ function mergeClassNameOntoRoot(template: string): string {
   // Check for existing class={expr} (dynamic)
   const classDynMatch = attrs.match(/\s+class=\{([^}]+)\}/);
   if (classDynMatch) {
-    const expr = classDynMatch[1];
+    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);
+  return `${prefix + tagName} class={className}${attrs}${close}${template.slice(fullMatch.length)}`;
 }
 
 // ---------------------------------------------------------------------------
@@ -147,7 +146,7 @@ export function emitAstroComponent(
   defaultLocale: string = 'en',
   responsiveScales?: ResponsiveScales,
   remConfig?: RemConversionConfig,
-  cmsOptions?: ComponentCmsOptions
+  cmsOptions?: ComponentCmsOptions,
 ): string {
   const comp = def.component;
   const propDefs = comp.interface || {};
@@ -208,21 +207,20 @@ export function emitAstroComponent(
     propDefs,
     ctx.imports,
     ctx.dynamicTags,
-    (ctx.needsI18nResolver || isCmsConsumer) ? defaultLocale : undefined,
+    ctx.needsI18nResolver || isCmsConsumer ? defaultLocale : undefined,
     ctx.imageImports,
     ctx.astroImports,
     ctx.frontmatterLines,
-    isCmsConsumer
+    isCmsConsumer,
   );
 
   // Build style/script sections
   const styleSection = comp.css ? `\n<style>\n${comp.css}\n</style>\n` : '';
-  const interactiveStyleSection = ctx.collectedInteractiveStyles!.size > 0
-    ? `\n<style is:global>\n${generateAllInteractiveCSS(ctx.collectedInteractiveStyles!, breakpoints, remConfig, responsiveScales)}\n</style>\n`
-    : '';
-  const scriptSection = comp.javascript
-    ? buildScriptSection(comp.javascript, comp, propDefs)
-    : '';
+  const interactiveStyleSection =
+    ctx.collectedInteractiveStyles!.size > 0
+      ? `\n<style is:global>\n${generateAllInteractiveCSS(ctx.collectedInteractiveStyles!, breakpoints, remConfig, responsiveScales)}\n</style>\n`
+      : '';
+  const scriptSection = comp.javascript ? buildScriptSection(comp.javascript, comp, propDefs) : '';
 
   return `---\n${frontmatter}---\n${templateBody}${styleSection}${interactiveStyleSection}${scriptSection}`;
 }
@@ -231,7 +229,7 @@ export function emitAstroComponent(
  * Build the frontmatter section (imports, Props interface, destructuring)
  */
 function buildFrontmatter(
-  componentName: string,
+  _componentName: string,
   propDefs: Record<string, PropDefinition>,
   imports: Set<string>,
   dynamicTags?: Map<string, string>,
@@ -239,7 +237,7 @@ function buildFrontmatter(
   imageImports?: Map<string, string>,
   astroImports?: Set<string>,
   frontmatterLines?: string[],
-  isCmsConsumer?: boolean
+  isCmsConsumer?: boolean,
 ): string {
   const lines: string[] = [];
 
@@ -332,7 +330,9 @@ function buildFrontmatter(
     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(
+      `    return v[locale] ?? v['${i18nDefaultLocale}'] ?? Object.values(v).find((s: any) => typeof s === 'string' && s !== '') ?? '';`,
+    );
     lines.push(`  }`);
     lines.push(`  return v ?? '';`);
     lines.push(`};`);
@@ -352,10 +352,7 @@ function buildFrontmatter(
 /**
  * Build a component with no structure (CSS/JS only)
  */
-function buildNoStructureComponent(
-  name: string,
-  comp: StructuredComponentDefinition
-): string {
+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 is:inline>\n${comp.javascript}\n</script>\n`;
@@ -374,14 +371,14 @@ 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;
-    }
-  );
+  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);
@@ -391,10 +388,7 @@ function transformDefineVarsJS(js: string, varNames: string[]): string {
 
   // 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'),
-      ''
-    );
+    result = result.replace(new RegExp(`^\\s*(var|let|const)\\s+${name}\\s*=[^;]*;?\\s*$`, 'gm'), '');
   }
 
   return result;
@@ -409,7 +403,7 @@ function transformDefineVarsJS(js: string, varNames: string[]): string {
 function buildScriptSection(
   js: string,
   comp: StructuredComponentDefinition,
-  propDefs: Record<string, PropDefinition>
+  propDefs: Record<string, PropDefinition>,
 ): string {
   // Capture el immediately (document.currentScript is only valid during script execution)
   // but defer the component init until DOMContentLoaded so deferred libraries are ready
@@ -423,9 +417,7 @@ function buildScriptSection(
     `if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', __init__); } else { __init__(); }`;
 
   if (comp.defineVars) {
-    const vars = comp.defineVars === true
-      ? Object.keys(propDefs).filter(k => k !== 'children')
-      : 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);

package/lib/server/astro/cssCollector.ts

@@ -6,11 +6,7 @@
  */
 
 import type { ComponentDefinition, ComponentNode } from '../../shared/types';
-import type {
-  StyleObject,
-  ResponsiveStyleObject,
-  StyleMapping,
-} from '../../shared/types/styles';
+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';
@@ -23,16 +19,11 @@ import { getScaleMultiplier, scalePropertyValue } from '../../shared/responsiveS
 
 function isStyleMapping(value: unknown): value is StyleMapping {
   return (
-    typeof value === 'object' &&
-    value !== null &&
-    '_mapping' in value &&
-    (value as StyleMapping)._mapping === true
+    typeof value === 'object' && value !== null && '_mapping' in value && (value as StyleMapping)._mapping === true
   );
 }
 
-function isResponsiveStyle(
-  style: StyleObject | ResponsiveStyleObject
-): style is ResponsiveStyleObject {
+function isResponsiveStyle(style: StyleObject | ResponsiveStyleObject): style is ResponsiveStyleObject {
   return 'base' in style || 'tablet' in style || 'mobile' in style;
 }
 
@@ -43,7 +34,7 @@ function collectFromStyle(
   style: StyleObject | ResponsiveStyleObject | undefined,
   classes: Set<string>,
   breakpoints: BreakpointConfig,
-  responsiveScales?: ResponsiveScales
+  responsiveScales?: ResponsiveScales,
 ): void {
   if (!style) return;
 
@@ -72,20 +63,17 @@ function collectFromFlatStyle(
   classes: Set<string>,
   breakpoints: BreakpointConfig,
   responsiveScales?: ResponsiveScales,
-  sourceBreakpoint?: string
+  sourceBreakpoint?: string,
 ): void {
   // Only auto-scale when mapping value lives in the base branch (or a flat
   // top-level style). Mappings inside an explicit breakpoint branch already
   // describe the override the author wants — don't re-scale them.
-  const shouldAutoScale =
-    responsiveScales?.enabled === true && sourceBreakpoint === undefined;
+  const shouldAutoScale = responsiveScales?.enabled === true && sourceBreakpoint === undefined;
 
   const scaleBreakpoints = shouldAutoScale
     ? Object.entries(breakpoints)
         .map(([name, cfg]) => ({ name, value: cfg?.breakpoint }))
-        .filter((bp): bp is { name: string; value: number } =>
-          typeof bp.value === 'number' && bp.value > 0
-        )
+        .filter((bp): bp is { name: string; value: number } => typeof bp.value === 'number' && bp.value > 0)
         .sort((a, b) => b.value - a.value)
     : [];
 
@@ -107,11 +95,7 @@ function collectFromFlatStyle(
         const strValue = String(cssValue);
         if (strValue === '') continue;
         for (const { name: bpName, value: bpPixels } of scaleBreakpoints) {
-          const scale = getScaleMultiplier(
-            responsiveScales,
-            property as CSSPropertyType,
-            bpName
-          );
+          const scale = getScaleMultiplier(responsiveScales, property as CSSPropertyType, bpName);
           if (scale == null) continue;
           const scaledValue = scalePropertyValue(strValue, baseRef, scale);
           if (scaledValue == null || scaledValue === strValue) continue;
@@ -131,7 +115,7 @@ function walkNode(
   node: ComponentNode | ComponentNode[] | string | number | null | undefined,
   classes: Set<string>,
   breakpoints: BreakpointConfig,
-  responsiveScales?: ResponsiveScales
+  responsiveScales?: ResponsiveScales,
 ): void {
   if (!node || typeof node === 'string' || typeof node === 'number') return;
 
@@ -179,7 +163,7 @@ function walkNode(
 export function collectAllMappingClasses(
   componentDefs: Record<string, ComponentDefinition>,
   breakpoints: BreakpointConfig = DEFAULT_BREAKPOINTS,
-  responsiveScales?: ResponsiveScales
+  responsiveScales?: ResponsiveScales,
 ): Set<string> {
   const classes = new Set<string>();