@cube-dev/ui-kit 0.0.0-canary-da1f163 → 0.0.0-canary-7f29fb4

package/es/tasty/injector/injector.js

@@ -0,0 +1,336 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-7f29fb4
+ * Released under the MIT license.
+ */
+
+/**
+ * Style injector that works with structured style objects
+ * Eliminates CSS string parsing for better performance
+ */
+import { flattenNestedCssForSelector } from './flatten';
+import { SheetManager } from './sheet-manager';
+/**
+ * Generate sequential class name with format t{number}
+ */
+function generateClassName(counter) {
+    return `t${counter}`;
+}
+export class StyleInjector {
+    sheetManager;
+    config;
+    cleanupScheduled = false;
+    constructor(config = {}) {
+        this.config = config;
+        this.sheetManager = new SheetManager(config);
+    }
+    /**
+     * Inject styles from StyleResult objects
+     */
+    inject(rules, options) {
+        const root = options?.root || document;
+        const registry = this.sheetManager.getRegistry(root);
+        if (rules.length === 0) {
+            return {
+                className: '',
+                dispose: () => { },
+            };
+        }
+        // Convert to flattened rules
+        let flattenedRules = this.convertToFlattenedRules(rules);
+        // Try to dedupe by className first — if the same class was already inserted, reuse it
+        // Only extract className if it looks like a generated tasty className (t + digits)
+        const preExtractedClass = this.extractClassName(rules);
+        const generatedClass = preExtractedClass && /^t\d+$/.test(preExtractedClass)
+            ? preExtractedClass
+            : null;
+        if (generatedClass &&
+            registry.rules.has(generatedClass) &&
+            registry.refCounts.has(generatedClass)) {
+            const currentRefCount = registry.refCounts.get(generatedClass) || 0;
+            registry.refCounts.set(generatedClass, currentRefCount + 1);
+            // Update metrics
+            if (registry.metrics) {
+                registry.metrics.hits++;
+            }
+            return {
+                className: generatedClass,
+                dispose: () => this.dispose(generatedClass, registry),
+            };
+        }
+        // Try to restore from unused styles if className exists but is not active
+        if (generatedClass &&
+            registry.rules.has(generatedClass) &&
+            !registry.refCounts.has(generatedClass)) {
+            const restored = this.sheetManager.restoreFromUnused(registry, generatedClass);
+            if (restored) {
+                // Update metrics
+                if (registry.metrics) {
+                    registry.metrics.hits++;
+                }
+                return {
+                    className: generatedClass,
+                    dispose: () => this.dispose(generatedClass, registry),
+                };
+            }
+        }
+        // No active cache dedupe — rely on provided className or disposed cache only
+        // Generate final className - only use extracted className if it's a generated tasty className
+        const className = generatedClass
+            ? generatedClass
+            : generateClassName(registry.classCounter++);
+        // If a different pre-extracted class was used in rules, rewrite selectors to the final class
+        let rulesToInsert = generatedClass && generatedClass !== className
+            ? flattenedRules.map((r) => {
+                if (r.selector.startsWith('.' + generatedClass)) {
+                    return {
+                        ...r,
+                        selector: '.' + className + r.selector.slice(generatedClass.length + 1),
+                    };
+                }
+                return r;
+            })
+            : flattenedRules;
+        // Normalize any occurrence of :is(<class list>) to plain class reference for stable batching
+        const isWithClasses = /:is\(\s*\.[A-Za-z0-9_-]+(?:\s*,\s*\.[A-Za-z0-9_-]+)*\s*\)/g;
+        rulesToInsert = rulesToInsert.map((r) => {
+            if (isWithClasses.test(r.selector)) {
+                return {
+                    ...r,
+                    selector: r.selector.replace(isWithClasses, `.${className}`),
+                };
+            }
+            return r;
+        });
+        // Insert rules using existing sheet manager
+        const ruleInfo = this.sheetManager.insertRule(registry, rulesToInsert, className, root);
+        if (!ruleInfo) {
+            // Update metrics
+            if (registry.metrics) {
+                registry.metrics.misses++;
+            }
+            return {
+                className,
+                dispose: () => { },
+            };
+        }
+        // Store in registry
+        registry.refCounts.set(className, 1);
+        registry.rules.set(className, ruleInfo);
+        // Update metrics
+        if (registry.metrics) {
+            registry.metrics.totalInsertions++;
+            registry.metrics.misses++;
+        }
+        return {
+            className,
+            dispose: () => this.dispose(className, registry),
+        };
+    }
+    /**
+     * Convert StyleResult to FlattenedRule format
+     */
+    convertToFlattenedRules(rules) {
+        return rules.map((rule) => ({
+            selector: rule.selector,
+            declarations: rule.declarations,
+            atRules: rule.atRules,
+        }));
+    }
+    /**
+     * Extract className from rules (assumes first rule contains the base className)
+     */
+    extractClassName(rules) {
+        for (const rule of rules) {
+            const match = rule.selector.match(/^\.([a-zA-Z0-9_-]+)/);
+            if (match) {
+                return match[1];
+            }
+        }
+        return null;
+    }
+    /**
+     * Generate cache key from flattened rules with optimized deduplication
+     */
+    generateCacheKey(rules) {
+        const normalizeSelector = (selector) => {
+            const match = selector.match(/^\.[a-zA-Z0-9_-]+(.*)$/);
+            return match ? match[1] : selector;
+        };
+        // Sort rules to ensure consistent cache keys for equivalent rule sets
+        const sortedRules = [...rules].sort((a, b) => {
+            const aKey = `${normalizeSelector(a.selector)}${a.atRules ? a.atRules.join('|') : ''}`;
+            const bKey = `${normalizeSelector(b.selector)}${b.atRules ? b.atRules.join('|') : ''}`;
+            return aKey.localeCompare(bKey);
+        });
+        return sortedRules
+            .map((rule) => {
+            const at = rule.atRules && rule.atRules.length
+                ? `@${rule.atRules.join('|')}`
+                : '';
+            const sel = normalizeSelector(rule.selector);
+            // Normalize declarations by sorting properties for consistent caching
+            const normalizedDeclarations = rule.declarations
+                .split(';')
+                .filter(Boolean)
+                .map((decl) => decl.trim())
+                .sort()
+                .join(';');
+            return `${sel}{${normalizedDeclarations}}${at}`;
+        })
+            .join('');
+    }
+    /**
+     * Dispose of a className
+     */
+    dispose(className, registry) {
+        const currentRefCount = registry.refCounts.get(className) || 0;
+        if (currentRefCount <= 1) {
+            // Mark as unused immediately
+            this.sheetManager.markAsUnused(registry, className);
+        }
+        else {
+            registry.refCounts.set(className, currentRefCount - 1);
+        }
+    }
+    /**
+     * Cleanup unused rules
+     */
+    cleanup(root) {
+        const registry = this.sheetManager.getRegistry(root || document);
+        this.sheetManager.processCleanupQueue(registry);
+    }
+    /**
+     * Force bulk cleanup of unused styles
+     */
+    forceBulkCleanup(root) {
+        const registry = this.sheetManager.getRegistry(root || document);
+        this.sheetManager['performBulkCleanup'](registry);
+    }
+    /**
+     * Inject global CSS rule
+     */
+    injectGlobal(selector, cssText, options) {
+        const root = options?.root || document;
+        const registry = this.sheetManager.getRegistry(root);
+        if (!cssText || !selector) {
+            return () => { };
+        }
+        // Use a stable pseudo-className to track these global rules in the registry
+        const className = generateClassName(registry.classCounter++);
+        // Flatten nested CSS against the provided selector (handles &, .Class, SubElement, etc.)
+        const flattenedRules = flattenNestedCssForSelector(cssText, selector);
+        // Insert the rules as a block using the sheet manager, just like normal rules
+        const ruleInfo = this.sheetManager.insertGlobalRule(registry, flattenedRules, className, root);
+        if (!ruleInfo) {
+            return () => { };
+        }
+        // Track in registry for ref-counted disposal
+        registry.refCounts.set(className, 1);
+        registry.rules.set(className, ruleInfo);
+        return () => this.dispose(className, registry);
+    }
+    /**
+     * Get CSS text from all sheets (for SSR)
+     */
+    getCssText(options) {
+        const root = options?.root || document;
+        const registry = this.sheetManager.getRegistry(root);
+        return this.sheetManager.getCssText(registry);
+    }
+    /**
+     * Get CSS only for the provided tasty classNames (e.g., ["t0","t3"])
+     */
+    getCssTextForClasses(classNames, options) {
+        const root = options?.root || document;
+        const registry = this.sheetManager.getRegistry(root);
+        const cssChunks = [];
+        const seenBatchKeys = new Set();
+        for (const cls of classNames) {
+            // Include batched rules for this class
+            const keys = registry.classToBatchedKeys.get(cls);
+            if (keys) {
+                for (const key of keys) {
+                    if (seenBatchKeys.has(key))
+                        continue;
+                    const entry = registry.batchedRules.get(key);
+                    const meta = entry || registry.batchedRuleMeta.get(key);
+                    if (entry) {
+                        // Prefer live CSSOM text when available
+                        const sheet = registry.sheets[entry.sheetIndex];
+                        const styleSheet = sheet?.sheet?.sheet;
+                        if (styleSheet && !this.config.forceTextInjection) {
+                            const idx = Math.max(0, Math.min(entry.ruleIndex, styleSheet.cssRules.length - 1));
+                            const rule = styleSheet.cssRules[idx];
+                            if (rule)
+                                cssChunks.push(rule.cssText);
+                        }
+                        else if (entry.currentCssText) {
+                            cssChunks.push(entry.currentCssText);
+                        }
+                        seenBatchKeys.add(key);
+                    }
+                    else if (meta) {
+                        // If meta exists but no entry (e.g., fully cleaned), we can reconstruct CSS if needed
+                        // but skip since there's no active rule in sheet
+                    }
+                }
+            }
+            // Include legacy per-class rules (non-batched)
+            const info = registry.rules.get(cls);
+            if (info) {
+                if (info.cssText && info.cssText.length) {
+                    cssChunks.push(...info.cssText);
+                }
+                else if (info.sheetIndex >= 0) {
+                    const sheet = registry.sheets[info.sheetIndex];
+                    const styleSheet = sheet?.sheet?.sheet;
+                    if (styleSheet) {
+                        const start = Math.max(0, info.ruleIndex);
+                        const end = Math.min(styleSheet.cssRules.length - 1, info.endRuleIndex ?? info.ruleIndex);
+                        for (let i = start; i <= end; i++) {
+                            const rule = styleSheet.cssRules[i];
+                            if (rule)
+                                cssChunks.push(rule.cssText);
+                        }
+                    }
+                }
+            }
+        }
+        return cssChunks.join('\n');
+    }
+    /**
+     * Get cache performance metrics
+     */
+    getMetrics(options) {
+        const root = options?.root || document;
+        const registry = this.sheetManager.getRegistry(root);
+        return this.sheetManager.getMetrics(registry);
+    }
+    /**
+     * Reset cache performance metrics
+     */
+    resetMetrics(options) {
+        const root = options?.root || document;
+        const registry = this.sheetManager.getRegistry(root);
+        this.sheetManager.resetMetrics(registry);
+    }
+    /**
+     * Force cleanup of unused styles (useful for memory pressure)
+     */
+    forceCleanupUnused(options) {
+        const root = options?.root || document;
+        const registry = this.sheetManager.getRegistry(root);
+        this.sheetManager['performBulkCleanup'](registry);
+    }
+    /**
+     * Destroy all resources for a root
+     */
+    destroy(root) {
+        const targetRoot = root || document;
+        this.sheetManager.cleanup(targetRoot);
+    }
+}
+
+