@cube-dev/ui-kit 0.0.0-canary-55e23f2 → 0.0.0-canary-21dd9ff

package/es/tasty/injector/index.js

@@ -0,0 +1,165 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-21dd9ff
+ * Released under the MIT license.
+ */
+
+import { StyleInjector } from './injector';
+// Use a more robust global singleton that survives React Strict Mode
+const GLOBAL_INJECTOR_KEY = '__TASTY_GLOBAL_INJECTOR__';
+/**
+ * Detect if we're running in a test environment
+ */
+function isTestEnvironment() {
+    // Check Node.js environment
+    if (typeof process !== 'undefined' && process.env?.NODE_ENV === 'test') {
+        return true;
+    }
+    // Check for Jest globals (safely)
+    if (typeof global !== 'undefined') {
+        const g = global;
+        if (g.jest || g.expect || g.describe || g.it) {
+            return true;
+        }
+    }
+    // Check for jsdom environment (common in tests)
+    if (typeof window !== 'undefined' &&
+        window.navigator?.userAgent?.includes('jsdom')) {
+        return true;
+    }
+    // Check for other test runners
+    if (typeof globalThis !== 'undefined') {
+        const gt = globalThis;
+        if (gt.vitest || gt.mocha) {
+            return true;
+        }
+    }
+    return false;
+}
+/**
+ * Configure the global style injector
+ */
+export function configure(config = {}) {
+    const fullConfig = {
+        maxRulesPerSheet: 8192, // safer default cap per sheet
+        cacheSize: 500, // default LRU cache size for disposed rulesets
+        cleanupDelay: 5000, // default delay before actual DOM cleanup (ignored if idleCleanup is true)
+        idleCleanup: true, // default to using requestIdleCallback instead of setTimeout
+        collectMetrics: false, // default to no performance tracking
+        forceTextInjection: false, // auto-enable for test environments
+        debugMode: false, // reduce memory usage by avoiding full cssText storage
+        ...config,
+    };
+    // Store on window to survive React Strict Mode resets
+    if (typeof window !== 'undefined') {
+        window[GLOBAL_INJECTOR_KEY] = new StyleInjector(fullConfig);
+    }
+    else {
+        // Fallback for SSR
+        globalThis[GLOBAL_INJECTOR_KEY] = new StyleInjector(fullConfig);
+    }
+}
+/**
+ * Get or create the global injector instance
+ */
+function getGlobalInjector() {
+    const storage = typeof window !== 'undefined' ? window : globalThis;
+    if (!storage[GLOBAL_INJECTOR_KEY]) {
+        configure();
+    }
+    return storage[GLOBAL_INJECTOR_KEY];
+}
+/**
+ * Inject styles and return className with dispose function
+ */
+export function inject(rules, options) {
+    return getGlobalInjector().inject(rules, options);
+}
+/**
+ * Inject global CSS rule (legacy method - not supported in direct injector)
+ */
+export function injectGlobal(selector, cssText, options) {
+    return getGlobalInjector().injectGlobal(selector, cssText, options);
+}
+/**
+ * Get CSS text from all sheets (for SSR)
+ */
+export function getCssText(options) {
+    return getGlobalInjector().getCssText(options);
+}
+/**
+ * Collect only CSS used by a rendered subtree (like jest-styled-components).
+ * Pass the container returned by render(...).
+ */
+export function getCssTextForNode(node, options) {
+    // Collect tasty-generated class names (t<number>) from the subtree
+    const classSet = new Set();
+    const readClasses = (el) => {
+        const cls = el.getAttribute('class');
+        if (!cls)
+            return;
+        for (const token of cls.split(/\s+/)) {
+            if (/^t\d+$/.test(token))
+                classSet.add(token);
+        }
+    };
+    // Include node itself if it's an Element
+    if (node.getAttribute) {
+        readClasses(node);
+    }
+    // Walk descendants
+    const elements = node.querySelectorAll
+        ? node.querySelectorAll('[class]')
+        : [];
+    elements && elements.forEach(readClasses);
+    return getGlobalInjector().getCssTextForClasses(classSet, options);
+}
+/**
+ * Force cleanup of unused rules
+ */
+export function cleanup(root) {
+    return getGlobalInjector().cleanup(root);
+}
+/**
+ * Check if we're currently running in a test environment
+ */
+export function getIsTestEnvironment() {
+    return isTestEnvironment();
+}
+/**
+ * Get the global injector instance for debugging
+ */
+export const injector = {
+    get instance() {
+        return getGlobalInjector();
+    },
+};
+/**
+ * Destroy all resources and clean up
+ */
+export function destroy(root) {
+    return getGlobalInjector().destroy(root);
+}
+/**
+ * Create a new isolated injector instance
+ */
+export function createInjector(config = {}) {
+    const isTest = isTestEnvironment();
+    const fullConfig = {
+        maxRulesPerSheet: 8192, // safer default cap per sheet
+        cacheSize: 500, // default LRU cache size for disposed rulesets
+        cleanupDelay: 5000, // default delay before actual DOM cleanup (ignored if idleCleanup is true)
+        idleCleanup: true, // default to using requestIdleCallback instead of setTimeout
+        collectMetrics: false, // default to no performance tracking
+        forceTextInjection: isTest, // auto-enable for test environments
+        debugMode: false, // reduce memory usage by avoiding full cssText storage
+        ...config,
+    };
+    return new StyleInjector(fullConfig);
+}
+export { StyleInjector } from './injector';
+export { SheetManager } from './sheet-manager';
+export { flattenNestedCss } from './flatten';
+
+        

package/es/tasty/injector/injector.js

@@ -0,0 +1,315 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-21dd9ff
+ * 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
+        const 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)) {
+            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 disposed cache if className exists but is not active
+        if (generatedClass && !registry.rules.has(generatedClass)) {
+            const restored = this.sheetManager.restoreFromDisposedCache(registry, generatedClass);
+            if (restored) {
+                const currentRefCount = registry.refCounts.get(generatedClass) || 0;
+                registry.refCounts.set(generatedClass, currentRefCount + 1);
+                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
+        const 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;
+        // 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 for deletion and schedule cleanup - but keep cache entries for disposal cache
+            registry.refCounts.set(className, 0);
+            registry.deletionQueue.push(className);
+            this.scheduleCleanup(registry);
+        }
+        else {
+            registry.refCounts.set(className, currentRefCount - 1);
+        }
+    }
+    /**
+     * Cleanup unused rules
+     */
+    cleanup(root) {
+        const registry = this.sheetManager.getRegistry(root || document);
+        this.sheetManager.processCleanupQueue(registry);
+    }
+    /**
+     * Schedule cleanup to run in the next microtask
+     */
+    scheduleCleanup(registry) {
+        if (this.cleanupScheduled)
+            return;
+        this.cleanupScheduled = true;
+        Promise.resolve().then(() => {
+            this.sheetManager.processCleanupQueue(registry);
+            this.cleanupScheduled = false;
+        });
+    }
+    /**
+     * 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 = [];
+        for (const cls of classNames) {
+            const info = registry.rules.get(cls) || registry.disposedCache.get(cls)?.ruleInfo;
+            if (info) {
+                if (info.cssText && info.cssText.length) {
+                    cssChunks.push(...info.cssText);
+                }
+                else {
+                    // Fallback: try to read from live sheet by index range
+                    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 disposed rulesets (useful for memory pressure)
+     */
+    forceCleanupDisposed(options) {
+        const root = options?.root || document;
+        const registry = this.sheetManager.getRegistry(root);
+        // Clear any scheduled cleanups and immediately clean those
+        for (const [className, timeoutId] of registry.cleanupTimeouts) {
+            if (this.config.idleCleanup &&
+                typeof cancelIdleCallback !== 'undefined') {
+                cancelIdleCallback(timeoutId);
+            }
+            else {
+                clearTimeout(timeoutId);
+            }
+            const disposedInfo = registry.disposedCache.get(className);
+            if (disposedInfo) {
+                this.sheetManager['performActualCleanup'](registry, className);
+            }
+        }
+        registry.cleanupTimeouts.clear();
+        // Also cleanup any remaining disposed entries that were not scheduled
+        const keys = Array.from(registry.disposedCache.keys());
+        for (const cls of keys) {
+            this.sheetManager['performActualCleanup'](registry, cls);
+        }
+    }
+    /**
+     * Destroy all resources for a root
+     */
+    destroy(root) {
+        const targetRoot = root || document;
+        this.sheetManager.cleanup(targetRoot);
+    }
+}
+
+