meno-core 1.0.0

package/lib/client/styles/StyleInjector.ts

@@ -0,0 +1,154 @@
+/**
+ * Style Injector
+ * Handles CSS injection from component definitions into the page
+ * Supports template processing for per-instance CSS
+ * Unified with server-side CSS generation for consistency
+ */
+
+import type { ComponentRegistry } from '../componentRegistry';
+import type { ElementRegistry } from '../elementRegistry';
+import { hasTemplates, processCodeTemplates } from '../templateEngine';
+import { generateUtilityCSS, extractUtilityClassesFromHTML } from '../../shared/cssGeneration';
+import { getCachedBreakpointConfig, getCachedResponsiveScalesConfig } from '../responsiveStyleResolver';
+import { DEFAULT_BREAKPOINTS } from '../../shared/breakpoints';
+import { DEFAULT_RESPONSIVE_SCALES } from '../../shared/responsiveScaling';
+
+export interface StyleInjectorConfig {
+  componentRegistry: ComponentRegistry;
+  elementRegistry: ElementRegistry;
+  styleId?: string; // Default: 'component-css'
+}
+
+/**
+ * StyleInjector manages CSS injection from components into the page DOM
+ * 
+ * Features:
+ * - Collects CSS from all registered components
+ * - Processes templates per component instance when needed
+ * - Manages style tag lifecycle (removal/recreation)
+ */
+export class StyleInjector {
+  private componentRegistry: ComponentRegistry;
+  private elementRegistry: ElementRegistry;
+  private styleId: string;
+
+  constructor(config: StyleInjectorConfig) {
+    this.componentRegistry = config.componentRegistry;
+    this.elementRegistry = config.elementRegistry;
+    this.styleId = config.styleId || 'component-css';
+  }
+
+  /**
+   * Inject CSS from all registered components into the page
+   * Processes templates per component instance if needed
+   * Also generates utility CSS from classes used in the DOM
+   */
+  inject(): void {
+    try {
+      const allComponents = this.componentRegistry.getAll();
+      const processedCSSBlocks: string[] = [];
+
+      // Collect CSS from all components and process templates per instance
+      for (const [name, component] of Object.entries(allComponents)) {
+        if (component?.component?.css) {
+          const originalCSS = component.component.css;
+
+          // Check if CSS contains templates
+          if (hasTemplates(originalCSS)) {
+            // Process CSS for each component instance (templates need instance-specific props)
+            // Get all root paths for this component directly from registry
+            const componentRootPaths = this.elementRegistry.getComponentRootPaths(name);
+
+            // Process CSS for each instance
+            for (const rootPath of componentRootPaths) {
+              try {
+                const props = this.elementRegistry.getComponentProps(rootPath);
+                if (props) {
+                  const processedCSS = processCodeTemplates(originalCSS, props);
+                  processedCSSBlocks.push(`/* Component: ${name} (instance) */\n${processedCSS}`);
+                }
+              } catch (error) {
+                // Fallback to original CSS if template processing fails
+                processedCSSBlocks.push(`/* Component: ${name} */\n${originalCSS}`);
+              }
+            }
+          } else {
+            // No templates - render CSS only once for all instances
+            processedCSSBlocks.push(`/* Component: ${name} */\n${originalCSS}`);
+          }
+        }
+      }
+
+      // Generate utility CSS from classes currently used in the DOM
+      const utilityCSS = this.generateUtilityCSS();
+      if (utilityCSS) {
+        processedCSSBlocks.push(`/* Utility Classes */\n${utilityCSS}`);
+      }
+
+      // Inject CSS into page
+      if (processedCSSBlocks.length > 0) {
+        const combinedCSS = processedCSSBlocks.join('\n\n');
+
+        // Remove existing component CSS style tag if it exists
+        const existingStyle = document.getElementById(this.styleId);
+        if (existingStyle) {
+          existingStyle.remove();
+        }
+
+        // Create new style tag and append to head
+        if (document.head) {
+          const styleTag = document.createElement('style');
+          styleTag.id = this.styleId;
+          styleTag.textContent = combinedCSS;
+          document.head.appendChild(styleTag);
+        }
+      }
+    } catch (error) {
+    }
+  }
+
+  /**
+   * Generate utility CSS from classes used in the current DOM
+   * Uses shared CSS generation for consistency with static render
+   * Includes responsive scales config for auto-scaling calculations
+   */
+  private generateUtilityCSS(): string {
+    try {
+      // Get the root element where components are rendered
+      const rootElement = document.getElementById('root') || document.body;
+      if (!rootElement) return '';
+
+      // Extract all utility classes from the rendered DOM
+      const usedClasses = extractUtilityClassesFromHTML(rootElement.innerHTML);
+      if (usedClasses.size === 0) return '';
+
+      // Get cached configs (or use defaults if not yet loaded)
+      const breakpointConfig = getCachedBreakpointConfig() || DEFAULT_BREAKPOINTS;
+      const responsiveScalesConfig = getCachedResponsiveScalesConfig() || DEFAULT_RESPONSIVE_SCALES;
+
+      // Generate CSS for the extracted classes using shared utility
+      // Pass both breakpoint and responsive scales config for consistency with SSR
+      return generateUtilityCSS(usedClasses, breakpointConfig, responsiveScalesConfig);
+    } catch (error) {
+      return '';
+    }
+  }
+
+  /**
+   * Remove the injected style tag
+   */
+  clear(): void {
+    const existingStyle = document.getElementById(this.styleId);
+    if (existingStyle) {
+      existingStyle.remove();
+    }
+  }
+
+  /**
+   * Check if style tag exists in DOM
+   */
+  exists(): boolean {
+    return document.getElementById(this.styleId) !== null;
+  }
+}
+