chaincss 2.0.6 → 2.1.0

package/src/runtime/auto-hooks.tsx

@@ -0,0 +1,127 @@
+// src/runtime/auto-hooks.tsx
+
+import React, { useEffect, useRef, useState } from 'react';
+import { smartChain } from '../core/smart-chain.js';
+import { styleInjector, compileRuntime } from './injector.js';
+
+export interface UseSmartStylesOptions {
+  debug?: boolean;
+  ssr?: boolean;
+  moduleId?: string;
+}
+
+export function useSmartStyles<T extends Record<string, any>>(
+  styleBuilder: (chain: any) => any,
+  deps: any[] = [],
+  options: UseSmartStylesOptions = {}
+): Record<string, string> {
+  const moduleId = useRef(options.moduleId || `smart-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`);
+  const [classMap, setClassMap] = useState<Record<string, string>>({});
+  const isMounted = useRef(true);
+  
+  useEffect(() => {
+    isMounted.current = true;
+    
+    // Clean up previous styles
+    if (moduleId.current) {
+      styleInjector.removeModule(moduleId.current);
+    }
+    
+    // Build styles with auto-detection
+    const chainInstance = smartChain();
+    const result = styleBuilder(chainInstance);
+    
+    // Check if we got a hybrid result
+    if (result && (result as any).__isHybrid) {
+      const hybrid = result as any;
+      
+      // Static styles are already handled, just need to inject dynamic parts
+      if (hybrid.__runtimeClasses && typeof hybrid.__runtimeClasses === 'object') {
+        const dynamicMap = compileRuntime(hybrid.__runtimeClasses, moduleId.current);
+        
+        if (isMounted.current) {
+          setClassMap({
+            ...(typeof hybrid.__buildClasses === 'object' ? hybrid.__buildClasses : {}),
+            ...dynamicMap
+          });
+        }
+        
+        if (options.debug) {
+          console.log('[ChainCSS Smart] Hybrid styles - Static:', hybrid.__buildClasses, 'Dynamic:', dynamicMap);
+        }
+      } else if (isMounted.current) {
+        setClassMap(typeof hybrid === 'object' ? hybrid : {});
+      }
+    } 
+    // Pure runtime or build result
+    else if (result && typeof result === 'object' && Object.keys(result).length > 0) {
+      // Check if it needs injection (runtime mode)
+      const needsInjection = Object.values(result).some(v => 
+        typeof v === 'object' && v !== null && !String(v).startsWith('c-')
+      );
+      
+      if (needsInjection && !options.ssr) {
+        const injected = compileRuntime(result, moduleId.current);
+        if (isMounted.current) {
+          setClassMap(injected);
+        }
+      } else if (isMounted.current) {
+        setClassMap(result);
+      }
+    }
+    
+    return () => {
+      isMounted.current = false;
+      if (moduleId.current) {
+        styleInjector.removeModule(moduleId.current);
+      }
+    };
+  }, deps);
+  
+  return classMap;
+}
+
+export function createSmartComponent<P extends Record<string, any>>(
+  Component: React.ComponentType<P>,
+  baseStyles?: (chain: any) => any
+): React.FC<P & { className?: string }> {
+  const SmartComponent: React.FC<P & { className?: string }> = (props) => {
+    const styles = useSmartStyles((chain) => {
+      let instance = chain();
+      
+      if (baseStyles) {
+        instance = baseStyles(instance);
+      }
+      
+      if (props.className) {
+        instance = instance.className(props.className);
+      }
+      
+      return instance.$el();
+    }, [props.className]);
+    
+    return React.createElement(Component, {
+      ...props,
+      className: styles.root || props.className
+    });
+  };
+  
+  SmartComponent.displayName = `SmartComponent(${Component.displayName || Component.name || 'Component'})`;
+  
+  return SmartComponent;
+}
+
+// HOC for wrapping components with smart styles
+export function withSmartStyles<P extends Record<string, any>>(
+  WrappedComponent: React.ComponentType<P>,
+  styles: (chain: any) => any
+): React.FC<P> {
+  const WithSmartStylesComponent: React.FC<P> = (props) => {
+    const classMap = useSmartStyles(styles, []);
+    return React.createElement(WrappedComponent, { ...props, ...classMap });
+  };
+  
+  WithSmartStylesComponent.displayName = `WithSmartStyles(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`;
+  
+  return WithSmartStylesComponent;
+}

package/src/runtime/auto-vue.ts

@@ -0,0 +1,72 @@
+// src/runtime/auto-vue.ts
+
+import { ref, watch, onUnmounted, type Ref } from 'vue';
+import { smartChain } from '../core/smart-chain.js';
+import { styleInjector, compileRuntime } from './injector.js';
+
+export interface UseSmartStylesOptions {
+  debug?: boolean;
+  ssr?: boolean;
+}
+
+export function useSmartStyles<T extends Record<string, any>>(
+  styleBuilder: (chain: any) => any,
+  deps?: Ref<any>[],
+  options: UseSmartStylesOptions = {}
+): Ref<Record<string, string>> {
+  const moduleId = `smart-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
+  const classMap = ref<Record<string, string>>({});
+  
+  const updateStyles = () => {
+    // Clean up previous styles
+    styleInjector.removeModule(moduleId);
+    
+    // Build styles with auto-detection
+    const chainInstance = smartChain();
+    const result = styleBuilder(chainInstance);
+    
+    // Handle hybrid result
+    if (result && result.__isHybrid) {
+      const hybrid = result as any;
+      
+      if (hybrid.__runtimeClasses && typeof hybrid.__runtimeClasses === 'object') {
+        const dynamicMap = compileRuntime(hybrid.__runtimeClasses, moduleId);
+        classMap.value = {
+          ...(typeof hybrid.__buildClasses === 'object' ? hybrid.__buildClasses : {}),
+          ...dynamicMap
+        };
+      } else {
+        classMap.value = typeof hybrid === 'object' ? hybrid : {};
+      }
+    }
+    // Pure result
+    else if (result && typeof result === 'object') {
+      const needsInjection = Object.values(result).some(v => 
+        typeof v === 'object' && v !== null && !String(v).startsWith('c-')
+      );
+      
+      if (needsInjection && !options.ssr) {
+        classMap.value = compileRuntime(result, moduleId);
+      } else {
+        classMap.value = result;
+      }
+    }
+    
+    if (options.debug) {
+      console.log('[ChainCSS Vue Smart] Updated styles:', classMap.value);
+    }
+  };
+  
+  updateStyles();
+  
+  // Watch dependencies if provided
+  if (deps && deps.length > 0) {
+    watch(deps, updateStyles, { deep: true });
+  }
+  
+  onUnmounted(() => {
+    styleInjector.removeModule(moduleId);
+  });
+  
+  return classMap;
+}

package/src/runtime/hmr.ts

@@ -0,0 +1,212 @@
+// src/runtime/hmr.ts (fixed version)
+
+import { styleInjector, compileRuntime } from './injector.js';
+
+interface HMRPayload {
+  file: string;
+  css?: string;
+  map?: Record<string, string>;
+  styles?: Record<string, any>;
+  timestamp?: number;
+}
+
+// Type detection for different bundlers
+function getHMREnvironment(): 'vite' | 'webpack' | 'none' {
+  if (typeof window === 'undefined') return 'none';
+  
+  // Check for Vite HMR
+  if (typeof import.meta !== 'undefined' && (import.meta as any).hot) {
+    return 'vite';
+  }
+  
+  // Check for Webpack HMR
+  if ((module as any).hot) {
+    return 'webpack';
+  }
+  
+  return 'none';
+}
+
+export function setupHMR(): void {
+  const env = getHMREnvironment();
+  
+  if (env === 'vite') {
+    setupViteHMR();
+  } else if (env === 'webpack') {
+    setupWebpackHMR();
+  }
+}
+
+function setupViteHMR(): void {
+  if (typeof window === 'undefined') return;
+  
+  const hot = (import.meta as any).hot;
+  if (!hot) return;
+  
+  // Listen for ChainCSS update events
+  hot.on('chaincss:update', (payload: HMRPayload) => {
+    console.log(`[ChainCSS HMR] 🔄 Updating styles for ${payload.file}`);
+    
+    // If new CSS is provided, inject it
+    if (payload.css) {
+      const styleId = 'chaincss-hmr-styles';
+      let styleElement = document.getElementById(styleId) as HTMLStyleElement;
+      
+      if (!styleElement) {
+        styleElement = document.createElement('style');
+        styleElement.id = styleId;
+        styleElement.setAttribute('data-chaincss', 'hmr');
+        document.head.appendChild(styleElement);
+      }
+      
+      styleElement.textContent = payload.css;
+      console.log(`[ChainCSS HMR] ✅ Injected ${payload.css.length} bytes of CSS`);
+    }
+    
+    // If new manifest is provided, update atomic mapping
+    if (payload.map) {
+      // Update manifest (would be handled by manifest system)
+      if (typeof window !== 'undefined') {
+        (window as any).__CHAINCSS_MANIFEST__ = payload.map;
+      }
+      console.log(`[ChainCSS HMR] ✅ Updated manifest with ${Object.keys(payload.map).length} entries`);
+    }
+    
+    // If full styles are provided, recompile and inject
+    if (payload.styles) {
+      const moduleId = `hmr-${payload.file}-${payload.timestamp || Date.now()}`;
+      const result = compileRuntime(payload.styles, moduleId);
+      console.log(`[ChainCSS HMR] ✅ Recompiled ${Object.keys(result).length} styles`);
+    }
+  });
+  
+  // Listen for before update to clean up
+  hot.on('vite:beforeUpdate', () => {
+    console.log('[ChainCSS HMR] 🧹 Clearing runtime styles before update');
+    styleInjector.removeAll();
+  });
+  
+  console.log('[ChainCSS HMR] ✅ Vite HMR setup complete');
+}
+
+function setupWebpackHMR(): void {
+  if (typeof window === 'undefined') return;
+  
+  const hot = (module as any).hot;
+  if (!hot) return;
+  
+  // Webpack HMR uses accept() pattern
+  hot.accept((err: Error | null) => {
+    if (err) {
+      console.error('[ChainCSS HMR] ❌ Update failed:', err);
+      return;
+    }
+    
+    console.log('[ChainCSS HMR] 🔄 Webpack HMR update');
+    styleInjector.removeAll();
+  });
+  
+  hot.dispose(() => {
+    console.log('[ChainCSS HMR] 🧹 Cleaning up styles');
+    styleInjector.removeAll();
+  });
+  
+  console.log('[ChainCSS HMR] ✅ Webpack HMR setup complete');
+}
+
+/**
+ * Register a module for HMR updates
+ * @param moduleId - Unique identifier for the module
+ * @param styles - Current styles object (optional)
+ * @param callback - Callback when module updates (optional)
+ */
+export function registerForHMR(
+  moduleId: string, 
+  styles?: Record<string, any>,
+  callback?: (newStyles: Record<string, any>) => void
+): void {
+  const env = getHMREnvironment();
+  
+  if (env === 'vite') {
+    registerViteHMR(moduleId, styles, callback);
+  } else if (env === 'webpack') {
+    registerWebpackHMR(moduleId, styles, callback);
+  }
+}
+
+function registerViteHMR(
+  moduleId: string, 
+  styles?: Record<string, any>,
+  callback?: (newStyles: Record<string, any>) => void
+): void {
+  const hot = (import.meta as any).hot;
+  if (!hot) return;
+  
+  // Accept updates for this module
+  hot.accept(() => {
+    console.log(`[ChainCSS HMR] 🔄 Accepting update for ${moduleId}`);
+    
+    // Clean up old styles
+    styleInjector.removeModule(moduleId);
+    
+    // If callback provided, call it with new styles
+    if (callback && styles) {
+      callback(styles);
+    }
+  });
+  
+  // Handle disposal
+  hot.dispose(() => {
+    console.log(`[ChainCSS HMR] 🧹 Disposing module: ${moduleId}`);
+    styleInjector.removeModule(moduleId);
+  });
+}
+
+function registerWebpackHMR(
+  moduleId: string, 
+  styles?: Record<string, any>,
+  callback?: (newStyles: Record<string, any>) => void
+): void {
+  const hot = (module as any).hot;
+  if (!hot) return;
+  
+  hot.accept(() => {
+    console.log(`[ChainCSS HMR] 🔄 Webpack HMR accept for ${moduleId}`);
+    
+    if (callback && styles) {
+      callback(styles);
+    }
+  });
+  
+  hot.dispose(() => {
+    console.log(`[ChainCSS HMR] 🧹 Webpack HMR dispose for ${moduleId}`);
+    styleInjector.removeModule(moduleId);
+  });
+}
+
+/**
+ * Get HMR status
+ */
+export function isHMRSupported(): boolean {
+  return getHMREnvironment() !== 'none';
+}
+
+/**
+ * Get current HMR environment
+ */
+export function getHMRType(): string {
+  return getHMREnvironment();
+}
+
+// Auto-setup in browser
+if (typeof window !== 'undefined') {
+  setupHMR();
+}
+
+// Export utilities
+export default {
+  setupHMR,
+  registerForHMR,
+  isHMRSupported,
+  getHMRType
+};

package/src/runtime/index.ts

@@ -0,0 +1,82 @@
+// chaincss/src/runtime/index.ts
+
+/**
+ * ChainCSS Runtime Module
+ * 
+ * WARNING: Importing from this module adds ~3.2KB to your bundle.
+ * For production, use build-time compilation with chaincss/plugin/vite instead.
+ */
+
+// Core runtime
+export { compileRuntime as compile, runRuntime as run, styleInjector } from './injector.js';
+export { $, $t, chain, setManifest } from './Chain.js';
+
+// React hooks
+export {
+  useChainStyles,
+  useDynamicChainStyles,
+  useThemeChainStyles,
+  ChainCSSGlobal,
+  cx,
+  withChainStyles,
+  enableChainCSSDebug,
+  disableChainCSSDebug,
+  isDebugEnabled,
+  createStyledComponent,
+  useComputedStyles
+} from './react.js';
+
+// Vue composables
+export {
+  useAtomicClasses,
+  ChainCSSGlobal as ChainCSSGlobalVue,
+  createStyledComponent as createStyledVueComponent,  // This is fine - it renames
+  createStyledComponents as createStyledVueComponents,
+  useComputedStyles as useComputedStylesVue,  // This renames useComputedStyles
+  provideStyleContext,
+  injectStyleContext
+} from './vue.js';
+
+// Svelte
+export {
+  useAtomicClasses as useAtomicClassesSvelte,
+  cx as cxSvelte,
+  ChainCSSGlobal as ChainCSSGlobalSvelte,
+  createStyledComponent as createStyledSvelteComponent,
+  createStyledComponents as createStyledSvelteComponents,
+  useComputedStyles as useComputedStylesSvelte,
+  provideStyleContext as provideStyleContextSvelte,
+  injectStyleContext as injectStyleContextSvelte,
+  chainStyles
+} from './svelte.js';
+
+// HMR
+export { setupHMR, registerForHMR } from './hmr.js';
+
+// Utilities
+export {
+  generateStyleId,
+  hashString,
+  kebabCase,
+  isBrowser,
+  isDevelopment,
+  isProduction,
+  debounce,
+  memoize,
+  cn as cnUtils,
+  devWarn,
+  devLog,
+  logError,
+  createDebugger
+} from './utils.js';
+
+// Types
+export type {
+  RuntimeStyleDefinition,
+  UseChainStylesOptions,
+  RuntimeCompiledResult,
+  StyleInjector,
+  UseAtomicClassesReturn,
+  HMRPayload,
+  ChainCSSDebugger
+} from './types.js';