meno-core 1.0.53 → 1.1.0

package/lib/client/scripts/ScriptExecutor.ts

@@ -19,20 +19,15 @@ export interface ScriptExecutorConfig {
 /**
  * Generate destructure statement for defineVars
  */
-function generateDestructure(
-  defineVars: true | string[],
-  interfaceDef?: Record<string, PropDefinition>
-): string {
-  const vars = defineVars === true
-    ? Object.keys(interfaceDef || {})
-    : defineVars;
+function generateDestructure(defineVars: true | string[], interfaceDef?: Record<string, PropDefinition>): string {
+  const vars = defineVars === true ? Object.keys(interfaceDef || {}) : defineVars;
   if (vars.length === 0) return '';
   return `var {${vars.join(', ')}} = props;`;
 }
 
 /**
  * ScriptExecutor manages JavaScript execution from components
- * 
+ *
  * Features:
  * - Executes JavaScript from all registered components
  * - Processes templates per component instance when needed
@@ -59,8 +54,10 @@ export class ScriptExecutor {
     // wrapper degrades gracefully when the hook is absent (e.g. direct
     // <script> use outside the runtime) — see executeWithInitPattern.
     if (typeof window !== 'undefined') {
-      (window as { __menoShouldBind?: (el: Element, name: string) => boolean }).__menoShouldBind =
-        (el: Element, name: string) => this.shouldBind(el, name);
+      (window as { __menoShouldBind?: (el: Element, name: string) => boolean }).__menoShouldBind = (
+        el: Element,
+        name: string,
+      ) => this.shouldBind(el, name);
     }
   }
 
@@ -71,7 +68,7 @@ export class ScriptExecutor {
    */
   private shouldBind(el: Element, componentName: string): boolean {
     let names = this.boundElements.get(el);
-    if (names && names.has(componentName)) return false;
+    if (names?.has(componentName)) return false;
     if (!names) {
       names = new Set();
       this.boundElements.set(el, names);
@@ -89,7 +86,7 @@ export class ScriptExecutor {
    * @private
    */
   private executeWrappedJS(jsCode: string, componentName: string): void {
-    if (!jsCode || !jsCode.trim()) return;
+    if (!jsCode?.trim()) return;
 
     const wrappedJS = `(function() {
       // Component: ${componentName}
@@ -133,7 +130,7 @@ export class ScriptExecutor {
       try {
         const processedJS = processCodeTemplates(originalJS, props);
         this.executeWrappedJS(processedJS, `${componentName} (instance: ${rootPath})`);
-      } catch (templateError) {
+      } catch (_templateError) {
         // Fallback to original JS if template processing fails (similar to StyleInjector)
         this.executeWrappedJS(originalJS, `${componentName} (instance: ${rootPath})`);
       }
@@ -155,7 +152,7 @@ export class ScriptExecutor {
     componentName: string,
     js: string,
     defineVars: true | string[],
-    interfaceDef?: Record<string, PropDefinition>
+    interfaceDef?: Record<string, PropDefinition>,
   ): void {
     const destructure = generateDestructure(defineVars, interfaceDef);
 
@@ -218,12 +215,7 @@ export class ScriptExecutor {
         if (defineVars) {
           // Use initComponent pattern - queries all instances and initializes each with props
           if (!executedComponents.has(componentName)) {
-            this.executeWithInitPattern(
-              componentName,
-              originalJS,
-              defineVars,
-              component.component.interface
-            );
+            this.executeWithInitPattern(componentName, originalJS, defineVars, component.component.interface);
             executedComponents.add(componentName);
           }
         } else if (hasTemplates(originalJS)) {
@@ -281,12 +273,7 @@ export class ScriptExecutor {
 
       // Check if component uses defineVars (Astro-style prop injection)
       if (defineVars) {
-        this.executeWithInitPattern(
-          componentName,
-          originalJS,
-          defineVars,
-          component.component.interface
-        );
+        this.executeWithInitPattern(componentName, originalJS, defineVars, component.component.interface);
       } else if (hasTemplates(originalJS)) {
         // Legacy: Process and execute JS per instance (templates need instance-specific props)
         const componentRootPaths = this.elementRegistry.getComponentRootPaths(componentName);
@@ -315,11 +302,7 @@ export class ScriptExecutor {
    * @param element - The DOM element to re-execute for
    * @param newProps - New props to inject
    */
-  executeForElement(
-    componentName: string,
-    element: HTMLElement,
-    newProps: Record<string, unknown>
-  ): void {
+  executeForElement(componentName: string, element: HTMLElement, newProps: Record<string, unknown>): void {
     try {
       const component = this.componentRegistry.get(componentName);
       if (!component?.component?.javascript) return;
@@ -331,9 +314,7 @@ export class ScriptExecutor {
       const destructure = generateDestructure(defineVars, component.component.interface);
 
       // Update data-props attribute (keyed by component name)
-      const varsToExpose = defineVars === true
-        ? Object.keys(component.component.interface || {})
-        : defineVars;
+      const varsToExpose = defineVars === true ? Object.keys(component.component.interface || {}) : defineVars;
 
       const propsForJS: Record<string, unknown> = {};
       for (const varName of varsToExpose) {
@@ -346,7 +327,9 @@ export class ScriptExecutor {
       let allProps: Record<string, unknown> = {};
       const existingStr = element.getAttribute('data-props');
       if (existingStr) {
-        try { allProps = JSON.parse(existingStr); } catch {}
+        try {
+          allProps = JSON.parse(existingStr);
+        } catch {}
       }
       allProps[componentName] = propsForJS;
       element.setAttribute('data-props', JSON.stringify(allProps));
@@ -368,4 +351,3 @@ export class ScriptExecutor {
     }
   }
 }
-

package/lib/client/services/PrefetchService.test.ts

@@ -2,7 +2,7 @@
  * PrefetchService unit tests
  */
 
-import { describe, test, expect, beforeEach, afterEach, mock, spyOn } from 'bun:test';
+import { describe, test, expect, beforeEach, afterEach, mock } from 'bun:test';
 import { PrefetchService } from './PrefetchService';
 import { DEFAULT_PREFETCH_CONFIG } from '../../shared/types/prefetch';
 
@@ -19,7 +19,7 @@ describe('PrefetchService', () => {
       Promise.resolve({
         ok: true,
         json: () => Promise.resolve({ root: { type: 'node', tag: 'div' } }),
-      } as Response)
+      } as Response),
     ) as unknown as typeof fetch;
 
     // Create service with enabled config
@@ -166,7 +166,7 @@ describe('PrefetchService', () => {
         Promise.resolve({
           ok: false,
           status: 404,
-        } as Response)
+        } as Response),
       ) as unknown as typeof fetch;
 
       await service.prefetch('/nonexistent');

package/lib/client/services/PrefetchService.ts

@@ -10,12 +10,7 @@
  */
 
 import { API_ROUTES } from '../../shared/constants';
-import type {
-  PrefetchConfig,
-  PrefetchStrategy,
-  CachedPageEntry,
-  ConnectionInfo,
-} from '../../shared/types/prefetch';
+import type { PrefetchConfig, PrefetchStrategy, CachedPageEntry, ConnectionInfo } from '../../shared/types/prefetch';
 import { DEFAULT_PREFETCH_CONFIG } from '../../shared/types/prefetch';
 
 export interface PrefetchServiceConfig {
@@ -52,9 +47,7 @@ export class PrefetchService {
 
     return {
       saveData: connection?.saveData ?? false,
-      effectiveType:
-        (connection?.effectiveType as ConnectionInfo['effectiveType']) ??
-        'unknown',
+      effectiveType: (connection?.effectiveType as ConnectionInfo['effectiveType']) ?? 'unknown',
       downlink: connection?.downlink ?? Infinity,
     };
   }
@@ -62,9 +55,7 @@ export class PrefetchService {
   /**
    * Determine effective strategy based on connection quality
    */
-  private getEffectiveStrategy(
-    requestedStrategy: PrefetchStrategy
-  ): PrefetchStrategy {
+  private getEffectiveStrategy(requestedStrategy: PrefetchStrategy): PrefetchStrategy {
     if (!this.config.respectSaveData) return requestedStrategy;
 
     const { saveData, effectiveType, downlink } = this.getConnectionInfo();
@@ -110,13 +101,13 @@ export class PrefetchService {
     if (this.cache.size <= this.config.maxCacheSize) return;
 
     // Get oldest entries and remove them
-    const entries = Array.from(this.cache.entries()).sort(
-      (a, b) => a[1].timestamp - b[1].timestamp
-    );
+    const entries = Array.from(this.cache.entries()).sort((a, b) => a[1].timestamp - b[1].timestamp);
 
     const toRemove = this.cache.size - this.config.maxCacheSize;
     for (let i = 0; i < toRemove; i++) {
-      this.cache.delete(entries[i][0]);
+      const entry = entries[i];
+      if (entry === undefined) continue;
+      this.cache.delete(entry[0]);
     }
   }
 
@@ -133,14 +124,11 @@ export class PrefetchService {
 
     try {
       // Fetch page data (same endpoint RouteLoader uses)
-      const response = await fetch(
-        `${API_ROUTES.PAGE_CONTENT}?page=${encodeURIComponent(path)}`,
-        {
-          signal: abortController.signal,
-          // Allow browser caching for prefetched content
-          cache: 'default',
-        }
-      );
+      const response = await fetch(`${API_ROUTES.PAGE_CONTENT}?page=${encodeURIComponent(path)}`, {
+        signal: abortController.signal,
+        // Allow browser caching for prefetched content
+        cache: 'default',
+      });
 
       if (!response.ok) {
         this.pendingPrefetches.delete(path);
@@ -242,13 +230,13 @@ export class PrefetchService {
           if (entry.isIntersecting) {
             const link = entry.target as HTMLAnchorElement;
             const href = link.getAttribute('href');
-            if (href && href.startsWith('/')) {
+            if (href?.startsWith('/')) {
               this.prefetch(href);
             }
           }
         });
       },
-      { rootMargin: '50px' } // Start prefetching slightly before visible
+      { rootMargin: '50px' }, // Start prefetching slightly before visible
     );
   }
 
@@ -301,11 +289,15 @@ export class PrefetchService {
    */
   clear(): void {
     // Cancel all pending prefetches
-    this.pendingPrefetches.forEach((controller) => controller.abort());
+    this.pendingPrefetches.forEach((controller) => {
+      controller.abort();
+    });
     this.pendingPrefetches.clear();
 
     // Clear all hover timeouts
-    this.hoverTimeouts.forEach((timeout) => clearTimeout(timeout));
+    this.hoverTimeouts.forEach((timeout) => {
+      clearTimeout(timeout);
+    });
     this.hoverTimeouts.clear();
 
     // Clear cache
@@ -313,7 +305,9 @@ export class PrefetchService {
 
     // Cleanup viewport observer
     if (this.viewportObserver) {
-      this.observedLinks.forEach((link) => this.viewportObserver?.unobserve(link));
+      this.observedLinks.forEach((link) => {
+        this.viewportObserver?.unobserve(link);
+      });
       this.observedLinks.clear();
       this.linkPathMap.clear();
       this.viewportObserver.disconnect();

package/lib/client/styleProcessor.test.ts

@@ -11,7 +11,7 @@ describe('styleProcessor', () => {
       expect(result).toEqual({
         color: 'red',
         fontSize: '16px',
-        padding: '10px'
+        padding: '10px',
       });
     });
 
@@ -22,7 +22,7 @@ describe('styleProcessor', () => {
       expect(result).toEqual({
         color: 'blue',
         fontSize: '16px',
-        padding: '10px'
+        padding: '10px',
       });
     });
 
@@ -31,7 +31,7 @@ describe('styleProcessor', () => {
       const result = mergeStyles(style1, undefined, { fontSize: '16px' });
       expect(result).toEqual({
         color: 'red',
-        fontSize: '16px'
+        fontSize: '16px',
       });
     });
 
@@ -49,15 +49,15 @@ describe('styleProcessor', () => {
       const style1: StyleObject = {
         display: 'flex',
         flexDirection: 'column',
-        padding: '20px'
+        padding: '20px',
       };
       const style2: StyleObject = {
         backgroundColor: '#f0f0f0',
-        border: '1px solid #ccc'
+        border: '1px solid #ccc',
       };
       const style3: StyleObject = {
         padding: '30px',
-        margin: '10px'
+        margin: '10px',
       };
       const result = mergeStyles(style1, style2, style3);
       expect(result).toEqual({
@@ -66,7 +66,7 @@ describe('styleProcessor', () => {
         padding: '30px',
         backgroundColor: '#f0f0f0',
         border: '1px solid #ccc',
-        margin: '10px'
+        margin: '10px',
       });
     });
 
@@ -108,7 +108,7 @@ describe('styleProcessor', () => {
       expect(result).toEqual({
         opacity: 0.5,
         zIndex: 20,
-        fontSize: 16
+        fontSize: 16,
       });
     });
 
@@ -119,7 +119,7 @@ describe('styleProcessor', () => {
       expect(result).toEqual({
         opacity: 0,
         margin: '0',
-        padding: '0px'
+        padding: '0px',
       });
     });
   });

package/lib/client/styleProcessor.ts

@@ -4,6 +4,7 @@
  */
 
 import type { ComponentDefinition, StyleObject, StyleValue } from '../shared/types';
+import { logRuntimeError } from '../shared/errorLogger';
 import { processStructure, normalizeStyle } from './templateEngine';
 
 type ComponentProps = Record<string, unknown>;
@@ -12,10 +13,7 @@ type ComponentProps = Record<string, unknown>;
  * Merge component styles from structured component definition
  * Returns merged props with all applicable styles
  */
-export function mergeComponentStyles(
-  componentDef: ComponentDefinition,
-  props: ComponentProps
-): ComponentProps {
+export function mergeComponentStyles(componentDef: ComponentDefinition, props: ComponentProps): ComponentProps {
   try {
     // Start with base props from component definition
     let mergedProps: ComponentProps = { ...(componentDef.props || {}) };
@@ -43,20 +41,31 @@ export function mergeComponentStyles(
     // processStructure now reads from structure.style and merges into props.style
     try {
       if (structuredComponentDef.structure) {
-        const processed = processStructure(structuredComponentDef.structure, { props: effectiveInputProps, componentDef: structuredComponentDef });
+        const processed = processStructure(structuredComponentDef.structure, {
+          props: effectiveInputProps,
+          componentDef: structuredComponentDef,
+        });
         // Type guard: ensure processed is a ComponentNode with props
         if (processed && typeof processed === 'object' && !Array.isArray(processed) && 'props' in processed) {
           const processedProps = processed.props as Record<string, unknown> | undefined;
-          const structureStyle = (processedProps?.style && typeof processedProps.style === 'object' && processedProps.style !== null && !Array.isArray(processedProps.style))
-            ? processedProps.style as Record<string, unknown>
-            : {};
-          const currentStyle = typeof mergedProps.style === 'object' && mergedProps.style !== null && !Array.isArray(mergedProps.style)
-            ? { ...mergedProps.style as Record<string, unknown> }
-            : {};
+          const structureStyle =
+            processedProps?.style &&
+            typeof processedProps.style === 'object' &&
+            processedProps.style !== null &&
+            !Array.isArray(processedProps.style)
+              ? (processedProps.style as Record<string, unknown>)
+              : {};
+          const currentStyle =
+            typeof mergedProps.style === 'object' && mergedProps.style !== null && !Array.isArray(mergedProps.style)
+              ? { ...(mergedProps.style as Record<string, unknown>) }
+              : {};
           mergedProps.style = { ...currentStyle, ...structureStyle };
         }
       }
     } catch (e) {
+      // A malformed structure-style merge must not break rendering, but it should
+      // not vanish either — the element would silently render with wrong styles.
+      logRuntimeError('styleProcessor.mergeStructureStyle', e);
     }
 
     // Merge with instance props (allows overrides)
@@ -64,7 +73,7 @@ export function mergeComponentStyles(
     const restProps = props || {};
     const normalizedMergedStyle = normalizeStyle(mergedProps.style as StyleValue) || {};
     const normalizedRestStyle = normalizeStyle(restProps?.style as StyleValue) || {};
-    
+
     mergedProps = {
       ...mergedProps,
       ...restProps,
@@ -75,7 +84,7 @@ export function mergeComponentStyles(
     };
 
     return mergedProps;
-  } catch (error) {
+  } catch (_error) {
     // Return props as-is if merging fails
     return props || {};
   }
@@ -87,7 +96,7 @@ export function mergeComponentStyles(
 export function mergeStyles(...styles: (StyleObject | undefined)[]): StyleObject {
   return styles.reduce<StyleObject>((acc, style) => {
     if (!style) return acc;
-    return { ...acc, ...style };
+    Object.assign(acc, style);
+    return acc;
   }, {});
 }
-