@codeleap/styles 5.8.2 → 5.8.4

package/src/classes/tests/StyleCache.spec.ts

@@ -0,0 +1,452 @@
+import { describe, test, expect, beforeEach } from 'bun:test'
+import { StyleCache } from '../StyleCache'
+
+class MockStateStorage {
+  private storage = new Map<string, any>()
+
+  getItem(key: string): any {
+    return this.storage.get(key) || null
+  }
+
+  setItem(key: string, value: any): void {
+    this.storage.set(key, value)
+  }
+
+  removeItem(key: string): void {
+    this.storage.delete(key)
+  }
+
+  clear(): void {
+    this.storage.clear()
+  }
+
+  get size(): number {
+    return this.storage.size
+  }
+}
+
+describe('StyleCache', () => {
+  let styleCache: StyleCache
+  let mockStorage: MockStateStorage
+
+  beforeEach(() => {
+    mockStorage = new MockStateStorage()
+    styleCache = new StyleCache(mockStorage)
+  })
+
+  describe('Constructor', () => {
+    test('should create StyleCache with all cache instances', () => {
+      expect(styleCache).toBeDefined()
+      expect(styleCache.styles).toBeDefined()
+      expect(styleCache.compositions).toBeDefined()
+      expect(styleCache.responsive).toBeDefined()
+      expect(styleCache.variants).toBeDefined()
+      expect(styleCache.common).toBeDefined()
+      expect(styleCache.components).toBeDefined()
+    })
+
+    test('should create non-persistent caches for styles, compositions, and responsive', () => {
+      expect(styleCache.styles.registryName).toBe('styles')
+      expect(styleCache.compositions.registryName).toBe('compositions')
+      expect(styleCache.responsive.registryName).toBe('responsive')
+      
+      // Non-persistent caches should not have persistCache enabled
+      expect(styleCache.styles.persistCache).toBe(false)
+      expect(styleCache.compositions.persistCache).toBe(false)
+      expect(styleCache.responsive.persistCache).toBe(false)
+    })
+
+    test('should create persistent caches for variants, common, and components', () => {
+      expect(styleCache.variants.registryName).toBe('variants')
+      expect(styleCache.common.registryName).toBe('common')
+      expect(styleCache.components.registryName).toBe('components')
+      
+      // Persistent caches should have persistCache enabled
+      expect(styleCache.variants.persistCache).toBe(true)
+      expect(styleCache.common.persistCache).toBe(true)
+      expect(styleCache.components.persistCache).toBe(true)
+    })
+  })
+
+  describe('registerBaseKey', () => {
+    test('should generate base key with provided keys and version', () => {
+      const keys = ['key1', 'key2', { prop: 'value' }]
+      const originalKeysLength = keys.length
+      
+      const result = styleCache.registerBaseKey(keys)
+      
+      expect(typeof result).toBe('string')
+      expect(result).toBeTruthy()
+      expect(styleCache.baseKey).toBe(result)
+      // Should have added the version to keys array
+      expect(keys.length).toBeGreaterThanOrEqual(originalKeysLength + 1)
+    })
+
+    test('should modify original keys array by adding version', () => {
+      const keys = ['test']
+      const originalKeys = [...keys]
+      
+      styleCache.registerBaseKey(keys)
+      
+      expect(keys.length).toBeGreaterThanOrEqual(originalKeys.length + 1)
+      expect(keys.slice(0, 1)).toEqual(originalKeys)
+      // Last item should be the version
+      expect(typeof keys[keys.length - 1]).toBe('object')
+    })
+
+    test('should handle empty keys array', () => {
+      const keys: any[] = []
+      
+      const result = styleCache.registerBaseKey(keys)
+      
+      expect(typeof result).toBe('string')
+      expect(result).toBeTruthy()
+      expect(keys.length).toBeGreaterThanOrEqual(1)
+      expect(styleCache.baseKey).toBe(result)
+    })
+
+    test('should generate different keys for different inputs', () => {
+      const keys1 = ['a', 'b']
+      const keys2 = ['c', 'd']
+      
+      const result1 = styleCache.registerBaseKey(keys1)
+      const result2 = styleCache.registerBaseKey(keys2)
+      
+      expect(result1).not.toBe(result2)
+    })
+  })
+
+  describe('wipeCache', () => {
+    test('should clear all cache instances', () => {
+      // First, add some data to caches
+      styleCache.styles.cache['test1'] = 'value1'
+      styleCache.compositions.cache['test2'] = 'value2'
+      styleCache.responsive.cache['test3'] = 'value3'
+      styleCache.variants.cache['test4'] = 'value4'
+      styleCache.common.cache['test5'] = 'value5'
+      styleCache.components.cache['test6'] = 'value6'
+      
+      // Verify data exists
+      expect(Object.keys(styleCache.styles.cache).length).toBeGreaterThan(0)
+      expect(Object.keys(styleCache.compositions.cache).length).toBeGreaterThan(0)
+      expect(Object.keys(styleCache.responsive.cache).length).toBeGreaterThan(0)
+      expect(Object.keys(styleCache.variants.cache).length).toBeGreaterThan(0)
+      expect(Object.keys(styleCache.common.cache).length).toBeGreaterThan(0)
+      expect(Object.keys(styleCache.components.cache).length).toBeGreaterThan(0)
+      
+      // Clear all caches
+      styleCache.wipeCache()
+      
+      // Verify all caches are empty
+      expect(Object.keys(styleCache.styles.cache)).toHaveLength(0)
+      expect(Object.keys(styleCache.compositions.cache)).toHaveLength(0)
+      expect(Object.keys(styleCache.responsive.cache)).toHaveLength(0)
+      expect(Object.keys(styleCache.variants.cache)).toHaveLength(0)
+      expect(Object.keys(styleCache.common.cache)).toHaveLength(0)
+      expect(Object.keys(styleCache.components.cache)).toHaveLength(0)
+    })
+
+    test('should also clear persistent storage for persistent caches', () => {
+      // Add some data that would be persisted
+      styleCache.variants.cacheFor('persistent-key', 'persistent-value')
+      styleCache.common.cacheFor('common-key', 'common-value')
+      styleCache.components.cacheFor('component-key', 'component-value')
+      
+      // Verify storage has data
+      expect(mockStorage.size).toBeGreaterThan(0)
+      
+      styleCache.wipeCache()
+      
+      // Storage should be cleared for persistent caches
+      expect(mockStorage.size).toBe(0)
+    })
+  })
+
+  describe('keyFor', () => {
+    beforeEach(() => {
+      styleCache.registerBaseKey(['test-app'])
+    })
+
+    test('should generate key and return null for non-existent cache value', () => {
+      const keyData = { prop1: 'value1', prop2: 'value2' }
+      
+      const result = styleCache.keyFor('styles', keyData)
+      
+      expect(typeof result.key).toBe('string')
+      expect(result.key).toBeTruthy()
+      expect(result.value).toBeNull()
+    })
+
+    test('should handle functions in keyData by converting to string', () => {
+      const testFunction = () => 'test'
+      const keyData = { 
+        prop1: 'value1', 
+        func: testFunction,
+        prop2: 'value2' 
+      }
+      
+      const result = styleCache.keyFor('components', keyData)
+      
+      expect(typeof result.key).toBe('string')
+      expect(result.key).toBeTruthy()
+      expect(result.value).toBeNull()
+    })
+
+    test('should return existing cached value after decompression', () => {
+      const keyData = { prop: 'value' }
+      const testValue = { result: 'data' }
+      
+      // First, get the key that would be generated
+      const { key } = styleCache.keyFor('styles', keyData)
+      
+      // Cache the value
+      styleCache.cacheFor('styles', key, testValue)
+      
+      // Retrieve the cached value
+      const result = styleCache.keyFor('styles', keyData)
+      
+      expect(result.key).toBe(key)
+      expect(result.value).toEqual(testValue)
+    })
+
+    test('should work with array keyData', () => {
+      const keyData = ['item1', 'item2', 'item3']
+      
+      const result = styleCache.keyFor('responsive', keyData)
+      
+      expect(typeof result.key).toBe('string')
+      expect(result.key).toBeTruthy()
+      expect(result.value).toBeNull()
+    })
+
+    test('should generate different keys for different keyData', () => {
+      const keyData1 = { prop: 'value1' }
+      const keyData2 = { prop: 'value2' }
+      
+      const result1 = styleCache.keyFor('styles', keyData1)
+      const result2 = styleCache.keyFor('styles', keyData2)
+      
+      expect(result1.key).not.toBe(result2.key)
+    })
+
+    test('should work with different cache types', () => {
+      const keyData = { test: 'data' }
+      const cacheTypes = ['styles', 'compositions', 'responsive', 'variants', 'common', 'components'] as const
+      
+      const results = cacheTypes.map(cacheType => {
+        return styleCache.keyFor(cacheType, keyData)
+      })
+      
+      // All should generate keys
+      results.forEach(result => {
+        expect(typeof result.key).toBe('string')
+        expect(result.key).toBeTruthy()
+      })
+      
+      // Keys should be the same since baseKey and keyData are the same
+      const firstKey = results[0].key
+      results.forEach(result => {
+        expect(result.key).toBe(firstKey)
+      })
+    })
+  })
+
+  describe('cacheFor', () => {
+    beforeEach(() => {
+      styleCache.registerBaseKey(['test-app'])
+    })
+
+    test('should compress and cache value when CACHE_ENABLED is true', () => {
+      const testValue = { data: 'test', number: 42 }
+      
+      const result = styleCache.cacheFor('styles', 'test-key', testValue)
+      
+      // Should return compressed value
+      expect(typeof result).toBe('string')
+      
+      // Should be stored in cache
+      expect(styleCache.styles.cache['test-key']).toBeDefined()
+    })
+
+    test('should work with different cache types', () => {
+      const testValue = { test: 'data' }
+      const cacheTypes = ['styles', 'compositions', 'responsive', 'variants', 'common', 'components'] as const
+      
+      cacheTypes.forEach(cacheType => {
+        const result = styleCache.cacheFor(cacheType, `${cacheType}-key`, testValue)
+        
+        expect(result).toBeDefined()
+        expect(styleCache[cacheType].cache[`${cacheType}-key`]).toBeDefined()
+      })
+    })
+
+    test('should handle various data types', () => {
+      const testCases = [
+        { name: 'object', value: { prop: 'value' } },
+        { name: 'array', value: [1, 2, 3] },
+        { name: 'string', value: 'test string' },
+        { name: 'number', value: 42 },
+        { name: 'boolean', value: true },
+      ]
+      
+      testCases.forEach(({ name, value }) => {
+        const result = styleCache.cacheFor('styles', `key-${name}`, value)
+        expect(result).toBeDefined()
+        expect(styleCache.styles.cache[`key-${name}`]).toBeDefined()
+      })
+    })
+
+    test('should persist cache for persistent cache types', () => {
+      const testValue = { persistent: 'data' }
+      
+      styleCache.cacheFor('variants', 'persistent-key', testValue)
+      
+      // Should be stored in memory cache
+      expect(styleCache.variants.cache['persistent-key']).toBeDefined()
+      
+      // Should also be persisted to storage
+      expect(mockStorage.size).toBeGreaterThan(0)
+    })
+  })
+
+  describe('Integration tests', () => {
+    test('should handle complete cache workflow', () => {
+      // 1. Register base key
+      const baseKey = styleCache.registerBaseKey(['my-app', 'v1.0'])
+      expect(styleCache.baseKey).toBe(baseKey)
+      
+      // 2. Generate key and check for existing value (should be null)
+      const keyData = { component: 'Button', variant: 'primary', size: 'large' }
+      let result = styleCache.keyFor('components', keyData)
+      expect(result.value).toBeNull()
+      
+      // 3. Cache a value
+      const testValue = { 
+        backgroundColor: 'blue', 
+        color: 'white',
+        padding: '12px 24px',
+        borderRadius: '4px'
+      }
+      const cachedResult = styleCache.cacheFor('components', result.key, testValue)
+      expect(cachedResult).toBeDefined()
+      
+      // 4. Retrieve cached value (should now exist)
+      result = styleCache.keyFor('components', keyData)
+      expect(result.value).toEqual(testValue)
+    })
+
+    test('should maintain separate caches for different types', () => {
+      const keyData = { test: 'data' }
+      const stylesValue = { color: 'red' }
+      const componentsValue = { backgroundColor: 'blue' }
+      
+      // Get keys for both cache types (should be the same)
+      const stylesResult = styleCache.keyFor('styles', keyData)
+      const componentsResult = styleCache.keyFor('components', keyData)
+      expect(stylesResult.key).toBe(componentsResult.key)
+      
+      // Cache different values in each cache type
+      styleCache.cacheFor('styles', stylesResult.key, stylesValue)
+      styleCache.cacheFor('components', componentsResult.key, componentsValue)
+      
+      // Retrieve values - should be different
+      const retrievedStyles = styleCache.keyFor('styles', keyData)
+      const retrievedComponents = styleCache.keyFor('components', keyData)
+      
+      expect(retrievedStyles.value).toEqual(stylesValue)
+      expect(retrievedComponents.value).toEqual(componentsValue)
+    })
+
+    test('should handle cache persistence and restoration', () => {
+      // Cache some values in persistent caches
+      const variantsValue = { variant: 'primary' }
+      const commonValue = { common: 'styles' }
+      
+      styleCache.cacheFor('variants', 'variants-key', variantsValue)
+      styleCache.cacheFor('common', 'common-key', commonValue)
+      
+      // Verify persistence
+      expect(mockStorage.size).toBeGreaterThan(0)
+      
+      // Create new StyleCache with same storage
+      const newStyleCache = new StyleCache(mockStorage)
+      
+      // Values should be restored from storage
+      expect(Object.keys(newStyleCache.variants.cache).length).toBeGreaterThan(0)
+      expect(Object.keys(newStyleCache.common.cache).length).toBeGreaterThan(0)
+    })
+
+    test('should handle cache clearing and restoration', () => {
+      // Add data to all caches
+      const testValue = { data: 'test' }
+      
+      styleCache.cacheFor('styles', 'styles-key', testValue)
+      styleCache.cacheFor('components', 'components-key', testValue)
+      styleCache.cacheFor('variants', 'variants-key', testValue)
+      
+      // Verify data exists
+      expect(Object.keys(styleCache.styles.cache).length).toBeGreaterThan(0)
+      expect(Object.keys(styleCache.components.cache).length).toBeGreaterThan(0)
+      expect(Object.keys(styleCache.variants.cache).length).toBeGreaterThan(0)
+      expect(mockStorage.size).toBeGreaterThan(0)
+      
+      // Clear all caches
+      styleCache.wipeCache()
+      
+      // Verify everything is cleared
+      expect(Object.keys(styleCache.styles.cache)).toHaveLength(0)
+      expect(Object.keys(styleCache.components.cache)).toHaveLength(0)
+      expect(Object.keys(styleCache.variants.cache)).toHaveLength(0)
+      expect(mockStorage.size).toBe(0)
+    })
+
+    test('should handle complex keyData with nested objects and functions', () => {
+      styleCache.registerBaseKey(['complex-test'])
+      
+      const complexKeyData = {
+        theme: {
+          primary: '#007bff',
+          secondary: '#6c757d',
+          breakpoints: ['sm', 'md', 'lg']
+        },
+        transform: (value: string) => value.toUpperCase(),
+        isActive: true,
+        index: 0
+      }
+      
+      // Should handle complex data without errors
+      const result = styleCache.keyFor('styles', complexKeyData)
+      expect(typeof result.key).toBe('string')
+      expect(result.key).toBeTruthy()
+      
+      // Should be able to cache and retrieve
+      const complexValue = { 
+        computed: 'styles',
+        rules: ['rule1', 'rule2']
+      }
+      
+      styleCache.cacheFor('styles', result.key, complexValue)
+      
+      const retrieved = styleCache.keyFor('styles', complexKeyData)
+      expect(retrieved.value).toEqual(complexValue)
+    })
+  })
+
+  describe('Edge cases and error handling', () => {
+    test('should handle very large objects', () => {
+      styleCache.registerBaseKey(['large-objects'])
+      
+      const largeObject: Record<string, any> = {}
+      for (let i = 0; i < 1000; i++) {
+        largeObject[`key${i}`] = `value${i}`
+      }
+      
+      const result = styleCache.keyFor('styles', largeObject)
+      expect(result.key).toBeTruthy()
+      
+      styleCache.cacheFor('styles', result.key, largeObject)
+      const retrieved = styleCache.keyFor('styles', largeObject)
+      expect(retrieved.value).toEqual(largeObject)
+    })
+  })
+})

package/src/classes/tests/StylePersistor.spec.ts

@@ -0,0 +1,231 @@
+import { test, expect, describe, beforeEach, jest, Mock } from 'bun:test'
+import { StylePersistor, StoragePersistor } from '../StylePersistor'
+import { minifier } from '../../tools'
+
+interface MockStorage extends StoragePersistor {
+  set: Mock<(...args: any[]) => any>
+  get: Mock<(...args: any[]) => any>
+  del: Mock<(...args: any[]) => any>
+}
+
+describe('StylePersistor', () => {
+  let mockStorage: MockStorage
+  let persistor: StylePersistor
+
+  beforeEach(() => {
+    mockStorage = {
+      set: jest.fn(),
+      get: jest.fn(),
+      del: jest.fn()
+    } as MockStorage
+    
+    persistor = new StylePersistor(mockStorage)
+  })
+
+  describe('setItem', () => {
+    test('should compress and store value using underlying storage', () => {
+      const testValue = 'test-value'
+      const compressedValue = minifier.compress(testValue)
+      
+      persistor.setItem('test-key', testValue)
+      
+      expect(mockStorage.set).toHaveBeenCalledWith('test-key', compressedValue)
+    })
+
+    test('should handle empty string values with compression', () => {
+      const compressedEmpty = minifier.compress('')
+      
+      persistor.setItem('empty', '')
+      
+      expect(mockStorage.set).toHaveBeenCalledWith('empty', compressedEmpty)
+    })
+
+    test('should handle special characters with compression', () => {
+      const value = 'value with spaces & symbols!'
+      const compressedValue = minifier.compress(value)
+      
+      persistor.setItem('special/key:test', value)
+      
+      expect(mockStorage.set).toHaveBeenCalledWith('special/key:test', compressedValue)
+    })
+  })
+
+  describe('getItem', () => {
+    test('should retrieve and decompress stored value', () => {
+      const originalData = 'test data for compression'
+      const compressedData = minifier.compress(originalData)
+      
+      mockStorage.get.mockReturnValue(compressedData)
+      
+      const result = persistor.getItem('test-key')
+      
+      expect(mockStorage.get).toHaveBeenCalledWith('test-key')
+      expect(result).toBe(originalData)
+    })
+
+    test('should return null when storage returns null', () => {
+      mockStorage.get.mockReturnValue(null)
+      
+      const result = persistor.getItem('nonexistent-key')
+      
+      expect(result).toBeNull()
+    })
+
+    test('should return null when storage returns undefined', () => {
+      mockStorage.get.mockReturnValue(undefined)
+      
+      const result = persistor.getItem('undefined-key')
+      
+      expect(result).toBeNull()
+    })
+
+    test('should handle various data types with compression/decompression', () => {
+      const testCases = [
+        'simple string',
+        '{"json": "data"}',
+        '',
+        'special chars: áéíóú!@#$%',
+        '12345'
+      ]
+
+      testCases.forEach(testData => {
+        const compressedData = minifier.compress(testData)
+        mockStorage.get.mockReturnValue(compressedData)
+        
+        const result = persistor.getItem('test-key')
+        expect(result).toBe(testData)
+      })
+    })
+
+    test('should return null when decompression fails', () => {
+      const invalidData = 'invalid compressed data'
+      mockStorage.get.mockReturnValue(invalidData)
+      
+      const originalDecompress = minifier.decompress
+      minifier.decompress = jest.fn().mockReturnValue(null)
+      
+      const result = persistor.getItem('invalid-key')
+      
+      expect(result).toBeNull()
+      
+      minifier.decompress = originalDecompress
+    })
+  })
+
+  describe('removeItem', () => {
+    test('should delete item using underlying storage', () => {
+      persistor.removeItem('test-key')
+      
+      expect(mockStorage.del).toHaveBeenCalledWith('test-key')
+    })
+
+    test('should handle removal of nonexistent keys', () => {
+      persistor.removeItem('nonexistent-key')
+      
+      expect(mockStorage.del).toHaveBeenCalledWith('nonexistent-key')
+    })
+
+    test('should handle special characters in key', () => {
+      persistor.removeItem('special/key:test')
+      
+      expect(mockStorage.del).toHaveBeenCalledWith('special/key:test')
+    })
+  })
+
+  describe('integration with real minifier', () => {
+    test('should handle complete compression/decompression workflow', () => {
+      const testData = 'workflow test data'
+      const compressedData = minifier.compress(testData)
+      
+      persistor.setItem('workflow-test', testData)
+      expect(mockStorage.set).toHaveBeenCalledWith('workflow-test', compressedData)
+
+      mockStorage.get.mockReturnValue(compressedData)
+      const retrieved = persistor.getItem('workflow-test')
+      expect(retrieved).toBe(testData)
+
+      persistor.removeItem('workflow-test')
+      expect(mockStorage.del).toHaveBeenCalledWith('workflow-test')
+    })
+
+    test('should verify compression actually reduces size for large data', () => {
+      const largeData = 'a'.repeat(1000)
+      const compressedData = minifier.compress(largeData)
+      
+      expect(compressedData.length).toBeLessThanOrEqual(largeData.length)
+      
+      mockStorage.get.mockReturnValue(compressedData)
+      const result = persistor.getItem('large-data')
+      
+      expect(result).toBe(largeData)
+    })
+  })
+
+  describe('error handling', () => {
+    test('should handle storage set errors', () => {
+      const errorStorage: MockStorage = {
+        set: jest.fn().mockImplementation(() => { 
+          throw new Error('Storage set error') 
+        }),
+        get: jest.fn(),
+        del: jest.fn()
+      } as MockStorage
+      
+      const errorPersistor = new StylePersistor(errorStorage)
+      
+      expect(() => errorPersistor.setItem('key', 'value')).toThrow('Storage set error')
+    })
+
+    test('should handle storage get errors', () => {
+      const errorStorage: MockStorage = {
+        set: jest.fn(),
+        get: jest.fn().mockImplementation(() => { 
+          throw new Error('Storage get error') 
+        }),
+        del: jest.fn()
+      } as MockStorage
+      
+      const errorPersistor = new StylePersistor(errorStorage)
+      
+      expect(() => errorPersistor.getItem('key')).toThrow('Storage get error')
+    })
+
+    test('should handle storage delete errors', () => {
+      const errorStorage: MockStorage = {
+        set: jest.fn(),
+        get: jest.fn(),
+        del: jest.fn().mockImplementation(() => { 
+          throw new Error('Storage del error') 
+        })
+      } as MockStorage
+      
+      const errorPersistor = new StylePersistor(errorStorage)
+      
+      expect(() => errorPersistor.removeItem('key')).toThrow('Storage del error')
+    })
+
+    test('should handle minifier compression errors', () => {
+      const originalCompress = minifier.compress
+      minifier.compress = jest.fn().mockImplementation(() => {
+        throw new Error('Compression error')
+      })
+      
+      expect(() => persistor.setItem('key', 'value')).toThrow('Compression error')
+      
+      minifier.compress = originalCompress
+    })
+
+    test('should handle minifier decompression errors gracefully', () => {
+      const originalDecompress = minifier.decompress
+      minifier.decompress = jest.fn().mockImplementation(() => {
+        throw new Error('Decompression error')
+      })
+      
+      mockStorage.get.mockReturnValue('some data')
+      
+      expect(() => persistor.getItem('error-key')).toThrow('Decompression error')
+      
+      minifier.decompress = originalDecompress
+    })
+  })
+})

package/src/{lib/constants.ts → constants.ts}

@@ -6,4 +6,5 @@ export const StyleConstants = {
   STORE_CACHE_ENABLED: true,
   CACHE_ENABLED: true,
   IS_BROWSER: isBrowser() as boolean,
+  LOG: false,
 }

package/src/hooks/index.ts

@@ -0,0 +1,4 @@
+export * from './useCompositionStyles'
+export * from './useNestedStylesByKey'
+export * from './useStyleObserver'
+export * from './useTheme'