chaincss 2.0.6 → 2.1.0

package/src/runtime/types.ts

@@ -0,0 +1,256 @@
+// @ts-nocheck — optional peer dependency
+// src/runtime/types.ts
+
+/**
+ * Runtime ChainCSS Type Definitions
+ * Only needed if using runtime mode
+ */
+
+// ============================================================================
+// Core Runtime Types
+// ============================================================================
+
+export interface RuntimeStyleDefinition {
+  selectors?: string[];
+  hover?: Record<string, string | number>;
+  _classes?: string[];
+  _name?: string;
+  [cssProperty: string]: any;
+}
+
+export interface UseChainStylesOptions {
+  /** Cache compiled styles */
+  cache?: boolean;
+  /** CSS class namespace prefix */
+  namespace?: string;
+  /** Watch for changes (development only) */
+  watch?: boolean;
+  /** Debug mode */
+  debug?: boolean;
+  /** Server-side rendering mode */
+  ssr?: boolean;
+}
+
+export interface RuntimeCompiledResult {
+  [key: string]: string;
+}
+
+// ============================================================================
+// Style Injector Types
+// ============================================================================
+
+export interface StyleInjector {
+  inject(styleId: string, style: RuntimeStyleDefinition): string;
+  injectMultiple(styles: Record<string, RuntimeStyleDefinition>, moduleId?: string): Record<string, string>;
+  update(styleId: string, style: RuntimeStyleDefinition): string;
+  remove(styleId: string): void;
+  removeModule(moduleId: string): void;
+  clear(): void;
+  setTokens(tokens: TokenStore): void;
+  getStyleElement(): HTMLStyleElement | null;
+  getStats(): { injectedStyles: number; modules: number };
+}
+
+// ============================================================================
+// Token Types
+// ============================================================================
+
+export interface TokenStore {
+  colors?: Record<string, string>;
+  spacing?: Record<string, string>;
+  typography?: {
+    fontFamily?: Record<string, string>;
+    fontSize?: Record<string, string>;
+    fontWeight?: Record<string, string>;
+    lineHeight?: Record<string, string>;
+    letterSpacing?: Record<string, string>;
+  };
+  breakpoints?: Record<string, string>;
+  zIndex?: Record<string, string>;
+  shadows?: Record<string, string>;
+  borderRadius?: Record<string, string>;
+  animations?: Record<string, any>;
+  [key: string]: any;
+}
+
+// ============================================================================
+// Manifest Types
+// ============================================================================
+
+export interface ChainCSSManifest {
+  atomicMap: Record<string, string>;
+  version: string;
+  timestamp?: number;
+  stats?: {
+    totalStyles: number;
+    atomicStyles: number;
+    uniqueProperties: number;
+    savings: string;
+  };
+}
+
+// ============================================================================
+// Framework-Specific Types (optional imports)
+// ============================================================================
+
+// React-specific types
+export interface UseAtomicClassesReturn {
+  classes: Record<string, string>;
+  cx: (name: string) => string;
+  cn: (...names: string[]) => string;
+  inject?: (styles: Record<string, any>) => void;
+}
+
+export interface UseDynamicChainStylesReturn extends UseAtomicClassesReturn {
+  updateStyles: (newStyles: Record<string, any>) => void;
+}
+
+export interface UseThemeChainStylesReturn extends UseAtomicClassesReturn {
+  theme: any;
+  setTheme: (theme: any) => void;
+}
+
+// Vue-specific types
+export interface UseAtomicClassesReturnVue {
+  classes: import('vue').Ref<Record<string, string>>;
+  cx: (name: string) => string;
+  cn: (...names: string[]) => string;
+  inject: (styles: Record<string, any>) => void;
+}
+
+export interface UseComputedStylesReturnVue {
+  classes: import('vue').Ref<Record<string, string>>;
+  rootClass: import('vue').ComputedRef<string>;
+}
+
+// Svelte-specific types
+export interface UseAtomicClassesReturnSvelte {
+  subscribe: (callback: (value: Record<string, string>) => void) => () => void;
+  get: () => Record<string, string>;
+  cx: (name: string) => string;
+  cn: (...names: string[]) => string;
+}
+
+export interface UseComputedStylesReturnSvelte {
+  classes: UseAtomicClassesReturnSvelte;
+  rootClass: import('svelte/store').Readable<string>;
+}
+
+// Solid-specific types (using type alias to avoid direct import error)
+// These will work if solid-js is installed, otherwise they default to any
+type SolidAccessor<T> = T extends any ? (() => T) : never;
+
+export interface UseAtomicClassesReturnSolid {
+  classes: SolidAccessor<Record<string, string>>;
+  cx: (...names: string[]) => string;
+  inject: (styles: Record<string, any>) => void;
+}
+
+export interface UseComputedStylesReturnSolid {
+  classes: SolidAccessor<Record<string, string>>;
+  rootClass: SolidAccessor<string>;
+}
+
+// ============================================================================
+// HMR Types
+// ============================================================================
+
+export interface HMRPayload {
+  file: string;
+  css?: string;
+  map?: Record<string, string>;
+  styles?: Record<string, any>;
+  timestamp: number;
+  moduleId?: string;
+}
+
+export interface HMRUpdateEvent {
+  type: 'chaincss:update';
+  data: HMRPayload;
+}
+
+// ============================================================================
+// Debug Types
+// ============================================================================
+
+export interface ChainCSSDebugger {
+  enabled: boolean;
+  log: (...args: any[]) => void;
+  warn: (...args: any[]) => void;
+  error: (...args: any[]) => void;
+  group: (label: string) => void;
+  groupEnd: () => void;
+  time: (label: string) => void;
+  timeEnd: (label: string) => void;
+}
+
+export interface DebugOptions {
+  enabled?: boolean;
+  verbose?: boolean;
+  prefix?: string;
+}
+
+// ============================================================================
+// Utility Types
+// ============================================================================
+
+export type CSSValue = string | number | undefined;
+export type CSSProperties = Record<string, CSSValue>;
+
+export type ResponsiveValue<T> = T | {
+  base?: T;
+  sm?: T;
+  md?: T;
+  lg?: T;
+  xl?: T;
+  '2xl'?: T;
+  [key: string]: T | undefined;
+};
+
+export type TokenValue<T = string> = T | `$${string}`;
+
+// ============================================================================
+// Global Augmentations
+// ============================================================================
+
+declare global {
+  interface Window {
+    __CHAINCSS_V2_TOKENS__?: TokenStore;
+    __CHAINCSS_MANIFEST__?: ChainCSSManifest;
+    __CHAINCSS_DEBUG__?: boolean;
+    __CHAINCSS_VUE_DEBUG__?: boolean;
+    __CHAINCSS_SVELTE_DEBUG__?: boolean;
+    __CHAINCSS_SOLID_DEBUG__?: boolean;
+    __CHAINCSS_REACT_DEBUG__?: boolean;
+  }
+}
+
+// ============================================================================
+// Type Guards
+// ============================================================================
+
+export function isRuntimeStyleDefinition(obj: any): obj is RuntimeStyleDefinition {
+  return obj && typeof obj === 'object' && (obj.selectors === undefined || Array.isArray(obj.selectors));
+}
+
+export function isStyleInjector(obj: any): obj is StyleInjector {
+  return obj && typeof obj === 'object' && 
+    typeof obj.injectMultiple === 'function' &&
+    typeof obj.removeModule === 'function';
+}
+
+export function isChainCSSManifest(obj: any): obj is ChainCSSManifest {
+  return obj && typeof obj === 'object' && 
+    'atomicMap' in obj && 
+    'version' in obj;
+}
+
+export function isTokenStore(obj: any): obj is TokenStore {
+  return obj && typeof obj === 'object';
+}
+
+export function isHMRPayload(obj: any): obj is HMRPayload {
+  return obj && typeof obj === 'object' && 
+    'file' in obj && 
+    'timestamp' in obj;
+}

package/src/runtime/utils.ts

@@ -0,0 +1,128 @@
+// src/runtime/utils.ts - Add missing exports
+
+/**
+ * Runtime utility functions for ChainCSS
+ */
+
+/**
+ * Generate a unique ID for style injection
+ */
+export function generateStyleId(prefix: string = 'chain'): string {
+  const random = Math.random().toString(36).substring(2, 10);
+  const timestamp = Date.now().toString(36);
+  return `${prefix}-${timestamp}-${random}`;
+}
+
+/**
+ * Simple hash function for class name generation
+ */
+export function hashString(str: string): string {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    hash = ((hash << 5) - hash) + str.charCodeAt(i);
+    hash |= 0;
+  }
+  return Math.abs(hash).toString(36);
+}
+
+/**
+ * Convert camelCase to kebab-case
+ */
+export function kebabCase(str: string): string {
+  return str.replace(/([A-Z])/g, '-$1').toLowerCase();
+}
+
+/**
+ * Check if code is running in browser
+ */
+export const isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined';
+
+/**
+ * Check if code is running in development mode
+ */
+export const isDevelopment = process.env.NODE_ENV === 'development';
+
+/**
+ * Check if code is running in production mode
+ */
+export const isProduction = process.env.NODE_ENV === 'production';
+
+/**
+ * Debounce function for HMR updates
+ */
+export function debounce<T extends (...args: any[]) => any>(
+  fn: T,
+  delay: number
+): (...args: Parameters<T>) => void {
+  let timeoutId: ReturnType<typeof setTimeout>;
+  
+  return (...args: Parameters<T>) => {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => fn(...args), delay);
+  };
+}
+
+/**
+ * Memoize function results
+ */
+export function memoize<T extends (...args: any[]) => any>(
+  fn: T
+): T & { cache: Map<string, ReturnType<T>> } {
+  const cache = new Map<string, ReturnType<T>>();
+  
+  const memoized = ((...args: Parameters<T>) => {
+    const key = JSON.stringify(args);
+    if (cache.has(key)) {
+      return cache.get(key);
+    }
+    const result = fn(...args);
+    cache.set(key, result);
+    return result;
+  }) as T & { cache: Map<string, ReturnType<T>> };
+  
+  memoized.cache = cache;
+  return memoized;
+}
+
+/**
+ * Safe class name joiner (like clsx)
+ */
+export function cn(...classes: (string | undefined | null | false)[]): string {
+  return classes.filter(Boolean).join(' ');
+}
+
+/**
+ * Warn in development only
+ */
+export function devWarn(message: string, ...args: any[]): void {
+  if (isDevelopment) {
+    console.warn(`[ChainCSS] ${message}`, ...args);
+  }
+}
+
+/**
+ * Log in development only
+ */
+export function devLog(message: string, ...args: any[]): void {
+  if (isDevelopment) {
+    console.log(`[ChainCSS] ${message}`, ...args);
+  }
+}
+
+/**
+ * Error logging (always)
+ */
+export function logError(message: string, error?: Error): void {
+  console.error(`[ChainCSS] ${message}`, error || '');
+}
+
+/**
+ * Create a debug logger
+ */
+export function createDebugger(module: string) {
+  return {
+    log: (...args: any[]) => devLog(`[${module}]`, ...args),
+    warn: (...args: any[]) => devWarn(`[${module}]`, ...args),
+    error: (...args: any[]) => logError(`[${module}]`, ...args)
+  };
+}

package/src/runtime/vite-env.d.ts

@@ -0,0 +1,120 @@
+// src/runtime/vite-env.d.ts (enhanced version)
+
+/// <reference types="vite/client" />
+
+/**
+ * Vite HMR API Type Extensions
+ * Provides full type support for import.meta.hot
+ */
+
+interface ImportMeta {
+  readonly hot?: {
+    /**
+     * Accept updates for this module
+     */
+    accept(cb?: (mod: any) => void): void;
+    
+    /**
+     * Accept updates for specific dependencies
+     */
+    accept(deps: string[], cb: (modules: any[]) => void): void;
+    
+    /**
+     * Handle disposal of this module
+     */
+    dispose(cb: (data: any) => void): void;
+    
+    /**
+     * Listen to custom HMR events
+     */
+    on(event: string, cb: (data: any) => void): void;
+    
+    /**
+     * Send custom HMR events
+     */
+    send(event: string, data: any): void;
+    
+    /**
+     * Decline updates for this module
+     */
+    decline(): void;
+    
+    /**
+     * Invalidate this module (force reload)
+     */
+    invalidate(): void;
+    
+    /**
+     * Check if HMR is available
+     */
+    hot: boolean;
+    
+    /**
+     * Current module data
+     */
+    data: any;
+  };
+}
+
+/**
+ * Webpack HMR API Type Extensions
+ * For Webpack compatibility
+ */
+declare module 'webpack' {
+  interface HotModule {
+    accept(callback?: (modules?: any[]) => void): void;
+    accept(dependencies: string[], callback?: (updatedDependencies: string[]) => void): void;
+    decline(): void;
+    dispose(callback: (data: any) => void): void;
+    addStatusHandler(callback: (status: string) => void): void;
+    removeStatusHandler(callback: (status: string) => void): void;
+    data: any;
+    status: () => string;
+  }
+  
+  interface NodeModule {
+    hot?: HotModule;
+  }
+}
+
+/**
+ * Global HMR utilities for ChainCSS
+ */
+declare namespace ChainCSSHMR {
+  interface HMREventMap {
+    'chaincss:update': {
+      file: string;
+      css?: string;
+      map?: Record<string, string>;
+      styles?: Record<string, any>;
+      timestamp?: number;
+    };
+    'vite:beforeUpdate': void;
+    'vite:afterUpdate': void;
+  }
+  
+  interface HMRUtils {
+    /**
+     * Setup HMR for the current environment
+     */
+    setupHMR(): void;
+    
+    /**
+     * Register a module for HMR updates
+     */
+    registerForHMR(moduleId: string, styles?: Record<string, any>, callback?: (newStyles: Record<string, any>) => void): void;
+    
+    /**
+     * Check if HMR is supported
+     */
+    isHMRSupported(): boolean;
+    
+    /**
+     * Get the current HMR environment type
+     */
+    getHMRType(): 'vite' | 'webpack' | 'none';
+  }
+}
+
+// Export types for use in other files
+export type { ChainCSSHMR };