@useavalon/avalon 0.1.0

package/src/islands/universal-css-collector.ts

@@ -0,0 +1,157 @@
+/**
+ * Universal CSS Collector
+ * 
+ * Collects and manages CSS from all framework integrations (Vue, Svelte, Solid, Preact)
+ * during SSR rendering. Provides a unified interface for CSS injection into the document head.
+ */
+
+declare global {
+  var __universalSSRCSS: Map<string, UniversalCSSEntry> | undefined;
+}
+
+export interface UniversalCSSEntry {
+  css: string;
+  scopeId: string;
+  src: string;
+  framework: string;
+  timestamp: number;
+}
+
+// Initialize global CSS collector
+if (typeof globalThis !== "undefined" && !globalThis.__universalSSRCSS) {
+  globalThis.__universalSSRCSS = new Map();
+}
+
+/**
+ * Add CSS from any framework integration to the global collection
+ */
+export function addUniversalCSS(
+  css: string,
+  src: string,
+  framework: string,
+  scopeId?: string,
+): void {
+  if (!css || !css.trim()) {
+    return;
+  }
+
+  if (!globalThis.__universalSSRCSS) {
+    globalThis.__universalSSRCSS = new Map();
+  }
+
+  // Generate a unique key for this CSS entry
+  const key = scopeId || `${framework}-${src}`;
+
+  const entry: UniversalCSSEntry = {
+    css: css.trim(),
+    scopeId: key,
+    src,
+    framework,
+    timestamp: Date.now(),
+  };
+
+  globalThis.__universalSSRCSS.set(key, entry);
+}
+
+/**
+ * Get all collected CSS from all frameworks
+ */
+export function getUniversalCSS(clear = false): string {
+  if (!globalThis.__universalSSRCSS || globalThis.__universalSSRCSS.size === 0) {
+    return "";
+  }
+
+  const entries = Array.from(globalThis.__universalSSRCSS.values());
+
+  // Sort by timestamp to maintain render order
+  entries.sort((a, b) => a.timestamp - b.timestamp);
+
+  // Group by framework for better organization
+  const cssByFramework = entries.reduce((acc, entry) => {
+    if (!acc[entry.framework]) {
+      acc[entry.framework] = [];
+    }
+    acc[entry.framework].push(entry);
+    return acc;
+  }, {} as Record<string, UniversalCSSEntry[]>);
+
+  // Build CSS string with framework sections
+  const cssBlocks: string[] = [];
+
+  for (const [framework, frameworkEntries] of Object.entries(cssByFramework)) {
+    const frameworkCSS = frameworkEntries.map((entry) => {
+      const comment = `/* ${framework}: ${entry.src} (${entry.scopeId}) */`;
+      return `${comment}\n${entry.css}`;
+    }).join("\n\n");
+
+    cssBlocks.push(frameworkCSS);
+  }
+
+  const combinedCSS = cssBlocks.join("\n\n");
+
+  if (clear) {
+    globalThis.__universalSSRCSS.clear();
+  }
+
+  return combinedCSS;
+}
+
+/**
+ * Get CSS formatted for document head injection
+ */
+export function getUniversalCSSForHead(clear = false): string {
+  const css = getUniversalCSS(clear);
+
+  if (!css.trim()) {
+    return "";
+  }
+
+  const timestamp = new Date().toISOString();
+  const styleTag =
+    `<style data-universal-ssr="true" data-generated="${timestamp}">\n${css}\n</style>`;
+
+  return styleTag;
+}
+
+/**
+ * Clear all collected CSS
+ */
+export function clearUniversalCSS(): void {
+  if (globalThis.__universalSSRCSS) {
+    globalThis.__universalSSRCSS.clear();
+  }
+}
+
+/**
+ * Get CSS statistics
+ */
+export function getUniversalCSSStats(): {
+  totalComponents: number;
+  byFramework: Record<string, number>;
+  totalCSSSize: number;
+  averageCSSSize: number;
+} {
+  if (!globalThis.__universalSSRCSS || globalThis.__universalSSRCSS.size === 0) {
+    return {
+      totalComponents: 0,
+      byFramework: {},
+      totalCSSSize: 0,
+      averageCSSSize: 0,
+    };
+  }
+
+  const entries = Array.from(globalThis.__universalSSRCSS.values());
+  const byFramework = entries.reduce((acc, entry) => {
+    acc[entry.framework] = (acc[entry.framework] || 0) + 1;
+    return acc;
+  }, {} as Record<string, number>);
+
+  const totalCSSSize = entries.reduce((sum, entry) => sum + entry.css.length, 0);
+
+  return {
+    totalComponents: entries.length,
+    byFramework,
+    totalCSSSize,
+    averageCSSSize: entries.length > 0 ? Math.round(totalCSSSize / entries.length) : 0,
+  };
+}

package/src/islands/universal-head-collector.ts

@@ -0,0 +1,137 @@
+/**
+ * Universal Head Content Collector for SSR
+ * 
+ * Collects head content (scripts, meta tags, etc.) from framework integrations
+ * during SSR and injects them into the HTML head.
+ * 
+ * Similar to universal-css-collector.ts but for head content.
+ */
+
+interface HeadEntry {
+  content: string;
+  src: string;
+  framework: string;
+  type: 'script' | 'meta' | 'link' | 'other';
+}
+
+declare global {
+  var __universalSSRHead: Map<string, HeadEntry>;
+}
+
+/**
+ * Initialize the global head collector if it doesn't exist
+ */
+function initHeadCollector(): Map<string, HeadEntry> {
+  if (!globalThis.__universalSSRHead) {
+    globalThis.__universalSSRHead = new Map();
+  }
+  return globalThis.__universalSSRHead;
+}
+
+/**
+ * Add head content to the universal collector
+ * 
+ * @param content - The head content (script, meta tag, etc.)
+ * @param src - Source component path
+ * @param framework - Framework name
+ * @param type - Type of head content
+ */
+export function addUniversalHead(
+  content: string,
+  src: string,
+  framework: string,
+  type: 'script' | 'meta' | 'link' | 'other' = 'other'
+): void {
+  const collector = initHeadCollector();
+  
+  // Generate a unique key for this head entry
+  const key = `${framework}-${src}-${type}`;
+  
+  collector.set(key, {
+    content,
+    src,
+    framework,
+    type,
+  });
+}
+
+/**
+ * Get all collected head content formatted for injection into HTML head
+ * 
+ * @param clear - Whether to clear the collector after getting content
+ * @returns Formatted head content string
+ */
+export function getUniversalHeadForInjection(clear = false): string {
+  const collector = initHeadCollector();
+  
+  if (collector.size === 0) {
+    return '';
+  }
+  
+  const entries = Array.from(collector.values());
+  
+  // Group by type for better organization
+  const scripts = entries.filter(e => e.type === 'script');
+  const metas = entries.filter(e => e.type === 'meta');
+  const links = entries.filter(e => e.type === 'link');
+  const others = entries.filter(e => e.type === 'other');
+  
+  const parts: string[] = [];
+  
+  // Add meta tags first
+  if (metas.length > 0) {
+    parts.push('<!-- Framework Meta Tags -->');
+    parts.push(...metas.map(e => e.content));
+  }
+  
+  // Add links
+  if (links.length > 0) {
+    parts.push('<!-- Framework Links -->');
+    parts.push(...links.map(e => e.content));
+  }
+  
+  // Add scripts
+  if (scripts.length > 0) {
+    parts.push('<!-- Framework Hydration Scripts -->');
+    // Wrap script content in <script> tags if not already wrapped
+    parts.push(...scripts.map(e => {
+      const content = e.content.trim();
+      // Check if already wrapped in script tags
+      if (content.startsWith('<script')) {
+        return content;
+      }
+      // Wrap in script tags
+      return `<script>${content}</script>`;
+    }));
+  }
+  
+  // Add other content
+  if (others.length > 0) {
+    parts.push('<!-- Framework Head Content -->');
+    parts.push(...others.map(e => e.content));
+  }
+  
+  const result = parts.join('\n    ');
+  
+  if (clear) {
+    collector.clear();
+  }
+  
+  return result;
+}
+
+/**
+ * Clear all collected head content
+ */
+export function clearUniversalHead(): void {
+  const collector = initHeadCollector();
+  collector.clear();
+}
+
+/**
+ * Get the current size of the head collector
+ */
+export function getHeadCollectorSize(): number {
+  const collector = initHeadCollector();
+  return collector.size;
+}