@tachui/core 0.7.0-alpha1 → 0.7.1-alpha

package/src/modifiers/utils.ts

@@ -1,413 +0,0 @@
-/**
- * Modifier Utilities and Helper Functions
- *
- * Utility functions for creating custom modifiers, combining modifiers,
- * and working with the modifier system.
- */
-
-import { createEffect } from '../reactive'
-import { isSignal } from '../reactive/signal'
-import type { Signal } from '../reactive/types'
-import type { DOMNode } from '../runtime/types'
-import { BaseModifier } from './base'
-import type { Modifier, ModifierContext, ModifierFactory, ReactiveModifierProps } from './types'
-
-/**
- * Helper functions for working with modifiers
- */
-export const modifierHelpers = {
-  /**
-   * Check if a value is a reactive signal
-   */
-  isReactive<T>(value: T | Signal<T>): value is Signal<T> {
-    return isSignal(value)
-  },
-
-  /**
-   * Resolve a potentially reactive value
-   */
-  resolveValue<T>(value: T | Signal<T>): T {
-    return isSignal(value) ? value() : value
-  },
-
-  /**
-   * Create a reactive effect for a value
-   */
-  createReactiveEffect<T>(
-    value: T | Signal<T>,
-    onChange: (newValue: T) => void
-  ): (() => void) | null {
-    if (isSignal(value)) {
-      const effect = createEffect(() => {
-        const newValue = value()
-        onChange(newValue)
-      })
-      return () => effect.dispose()
-    }
-    return null
-  },
-
-  /**
-   * Merge modifier properties
-   */
-  mergeProperties<T extends Record<string, any>>(base: T, override: Partial<T>): T {
-    const result = { ...base }
-
-    for (const [key, value] of Object.entries(override)) {
-      if (value !== undefined) {
-        result[key as keyof T] = value
-      }
-    }
-
-    return result
-  },
-
-  /**
-   * Convert a CSS property name to camelCase
-   */
-  toCamelCase(cssProperty: string): string {
-    return cssProperty.replace(/-([a-z])/g, (_match, letter) => letter.toUpperCase())
-  },
-
-  /**
-   * Convert a camelCase property to CSS kebab-case
-   */
-  toKebabCase(camelProperty: string): string {
-    return camelProperty.replace(/([A-Z])/g, '-$1').toLowerCase()
-  },
-
-  /**
-   * Normalize a CSS value
-   */
-  normalizeCSSValue(value: any): string {
-    if (typeof value === 'number') {
-      return `${value}px`
-    }
-    if (typeof value === 'string') {
-      return value
-    }
-    return String(value)
-  },
-}
-
-/**
- * Create a custom modifier
- */
-export function createCustomModifier<TProps extends Record<string, any>>(
-  type: string,
-  priority: number,
-  applyFn: (node: DOMNode, context: ModifierContext, props: TProps) => DOMNode | undefined
-): ModifierFactory<TProps> {
-  class CustomModifier extends BaseModifier<TProps> {
-    readonly type = type
-    readonly priority = priority
-
-    apply(node: DOMNode, context: ModifierContext): DOMNode | undefined {
-      return applyFn(node, context, this.properties)
-    }
-  }
-
-  return (props: ReactiveModifierProps<TProps>) => new CustomModifier(props as TProps)
-}
-
-/**
- * Combine multiple modifiers into a single modifier
- */
-export function combineModifiers(
-  modifiers: Modifier[],
-  type: string = 'combined',
-  priority: number = 999
-): Modifier {
-  return createCustomModifier(type, priority, (node, context, _props) => {
-    let currentNode = node
-
-    // Apply all modifiers in sequence
-    for (const modifier of modifiers) {
-      const result = modifier.apply(currentNode, context)
-      if (result && typeof result === 'object' && 'type' in result) {
-        currentNode = result
-      }
-    }
-
-    return currentNode
-  })({})
-}
-
-/**
- * Create a conditional modifier that only applies if a condition is met
- */
-export function conditionalModifier(
-  condition: boolean | Signal<boolean>,
-  modifier: Modifier
-): Modifier {
-  return createCustomModifier(
-    `conditional-${modifier.type}`,
-    modifier.priority,
-    (node, context, _props) => {
-      const shouldApply = modifierHelpers.resolveValue(condition)
-
-      if (shouldApply) {
-        return modifier.apply(node, context)
-      }
-
-      // If reactive, set up effect to watch condition changes
-      if (isSignal(condition)) {
-        const effect = createEffect(() => {
-          const newCondition = condition()
-          if (context.element) {
-            if (newCondition) {
-              modifier.apply(node, context)
-            } else {
-              // Remove the modifier's effects
-              // This would need more sophisticated state tracking
-            }
-          }
-        })
-
-        // Store cleanup
-        if (!node.dispose) {
-          node.dispose = () => effect.dispose()
-        } else {
-          const existingDispose = node.dispose
-          node.dispose = () => {
-            effect.dispose()
-            existingDispose()
-          }
-        }
-      }
-
-      return node
-    }
-  )({})
-}
-
-/**
- * Create a modifier that applies different styles based on state
- */
-export function stateModifier<T extends string>(
-  stateSignal: Signal<T>,
-  stateModifiers: Record<T, Modifier[]>
-): Modifier {
-  return createCustomModifier('state', 500, (node, context, _props) => {
-    let currentNode = node
-
-    const applyStateModifiers = (state: T) => {
-      const modifiers = stateModifiers[state] || []
-
-      for (const modifier of modifiers) {
-        const result = modifier.apply(currentNode, context)
-        if (result && typeof result === 'object' && 'type' in result) {
-          currentNode = result
-        }
-      }
-    }
-
-    // Apply initial state
-    applyStateModifiers(stateSignal())
-
-    // Set up reactive effect
-    const effect = createEffect(() => {
-      const newState = stateSignal()
-      applyStateModifiers(newState)
-    })
-
-    // Store cleanup
-    if (!node.dispose) {
-      node.dispose = () => effect.dispose()
-    } else {
-      const existingDispose = node.dispose
-      node.dispose = () => {
-        effect.dispose()
-        existingDispose()
-      }
-    }
-
-    return currentNode
-  })({})
-}
-
-/**
- * Create a responsive modifier that applies different modifiers based on screen size
- */
-export function responsiveModifier(
-  breakpoints: Record<string, Modifier[]>,
-  defaultModifiers: Modifier[] = []
-): Modifier {
-  return createCustomModifier('responsive', 100, (node, context, _props) => {
-    let currentNode = node
-
-    const applyResponsiveModifiers = () => {
-      const width = window.innerWidth
-      let modifiersToApply = defaultModifiers
-
-      // Determine which breakpoint applies
-      for (const [breakpoint, modifiers] of Object.entries(breakpoints)) {
-        const breakpointWidth = parseInt(breakpoint)
-        if (width >= breakpointWidth) {
-          modifiersToApply = modifiers
-        }
-      }
-
-      // Apply the modifiers
-      for (const modifier of modifiersToApply) {
-        const result = modifier.apply(currentNode, context)
-        if (result && typeof result === 'object' && 'type' in result) {
-          currentNode = result
-        }
-      }
-    }
-
-    // Apply initial modifiers
-    applyResponsiveModifiers()
-
-    // Set up resize listener
-    const handleResize = () => applyResponsiveModifiers()
-    window.addEventListener('resize', handleResize)
-
-    // Store cleanup
-    const cleanup = () => window.removeEventListener('resize', handleResize)
-    if (!node.dispose) {
-      node.dispose = cleanup
-    } else {
-      const existingDispose = node.dispose
-      node.dispose = () => {
-        cleanup()
-        existingDispose()
-      }
-    }
-
-    return currentNode
-  })({})
-}
-
-/**
- * Create a modifier that applies CSS classes
- */
-export function classModifier(classes: string | string[] | Signal<string | string[]>): Modifier {
-  return createCustomModifier('class', 50, (node, context, _props) => {
-    if (!context.element) return node
-
-    const applyClasses = (classNames: string | string[]) => {
-      const classList = Array.isArray(classNames)
-        ? classNames
-        : classNames.split(' ').filter(Boolean)
-
-      if (context.element instanceof HTMLElement) {
-        context.element.classList.add(...classList)
-      }
-    }
-
-    if (isSignal(classes)) {
-      // Reactive classes
-      let previousClasses: string[] = []
-
-      const effect = createEffect(() => {
-        const newClasses = classes()
-        const newClassList = Array.isArray(newClasses)
-          ? newClasses
-          : newClasses.split(' ').filter(Boolean)
-
-        if (context.element instanceof HTMLElement) {
-          // Remove previous classes
-          context.element.classList.remove(...previousClasses)
-          // Add new classes
-          context.element.classList.add(...newClassList)
-          previousClasses = newClassList
-        }
-      })
-
-      // Store cleanup
-      if (!node.dispose) {
-        node.dispose = () => effect.dispose()
-      } else {
-        const existingDispose = node.dispose
-        node.dispose = () => {
-          effect.dispose()
-          existingDispose()
-        }
-      }
-    } else {
-      // Static classes
-      applyClasses(classes)
-    }
-
-    return node
-  })({})
-}
-
-/**
- * Create a modifier that applies inline styles
- */
-export function styleModifier(
-  styles: Record<string, string | number> | Signal<Record<string, string | number>>
-): Modifier {
-  return createCustomModifier('style', 200, (node, context, _props) => {
-    if (!context.element) return node
-
-    const applyStyles = (styleObj: Record<string, string | number>) => {
-      if (context.element instanceof HTMLElement) {
-        for (const [property, value] of Object.entries(styleObj)) {
-          const cssProperty = modifierHelpers.toKebabCase(property)
-          const cssValue = modifierHelpers.normalizeCSSValue(value)
-          context.element.style.setProperty(cssProperty, cssValue)
-        }
-      }
-    }
-
-    if (isSignal(styles)) {
-      // Reactive styles
-      const effect = createEffect(() => {
-        const newStyles = styles()
-        applyStyles(newStyles)
-      })
-
-      // Store cleanup
-      if (!node.dispose) {
-        node.dispose = () => effect.dispose()
-      } else {
-        const existingDispose = node.dispose
-        node.dispose = () => {
-          effect.dispose()
-          existingDispose()
-        }
-      }
-    } else {
-      // Static styles
-      applyStyles(styles)
-    }
-
-    return node
-  })({})
-}
-
-/**
- * Utility to create a modifier that adds event listeners
- */
-export function eventModifier(events: Record<string, EventListener>): Modifier {
-  return createCustomModifier('event', 300, (node, context, _props) => {
-    if (!context.element) return node
-
-    const cleanupFunctions: (() => void)[] = []
-
-    for (const [eventType, handler] of Object.entries(events)) {
-      context.element.addEventListener(eventType, handler)
-      cleanupFunctions.push(() => {
-        context.element?.removeEventListener(eventType, handler)
-      })
-    }
-
-    // Store cleanup
-    const cleanup = () => cleanupFunctions.forEach((fn) => fn())
-    if (!node.dispose) {
-      node.dispose = cleanup
-    } else {
-      const existingDispose = node.dispose
-      node.dispose = () => {
-        cleanup()
-        existingDispose()
-      }
-    }
-
-    return node
-  })({})
-}

package/src/plugins/__tests__/simplified-plugin-system.test.ts

@@ -1,190 +0,0 @@
-/**
- * Tests for Simplified Plugin System - Phase 1
- */
-
-import { describe, test, expect, beforeEach } from 'vitest'
-import {
-  SimplifiedTachUIInstance,
-  SimplifiedPluginManager,
-  SimplifiedComponentRegistry,
-  PluginError
-} from '../simplified-index'
-import type { TachUIPlugin, TachUIInstance } from '../simplified-types'
-
-describe('Simplified Plugin System', () => {
-  let instance: SimplifiedTachUIInstance
-
-  beforeEach(() => {
-    instance = new SimplifiedTachUIInstance()
-  })
-
-  describe('SimplifiedPluginManager', () => {
-    test('should install and manage plugins correctly', async () => {
-      const plugin: TachUIPlugin = {
-        name: 'test-plugin',
-        version: '1.0.0',
-        async install(instance: TachUIInstance) {
-          instance.registerService('test-service', { value: 'test' })
-        }
-      }
-
-      await instance.plugins.install(plugin)
-
-      expect(instance.plugins.isInstalled('test-plugin')).toBe(true)
-      expect(instance.plugins.getInstalledPlugins()).toContain('test-plugin')
-      expect(instance.getService('test-service')).toEqual({ value: 'test' })
-    })
-
-    test('should handle plugin errors gracefully', async () => {
-      const failingPlugin = {
-        name: 'failing-plugin',
-        version: '1.0.0',
-        async install() {
-          throw new Error('Installation failed')
-        }
-      }
-
-      await expect(instance.plugins.install(failingPlugin)).rejects.toThrow('Installation failed')
-      expect(instance.plugins.isInstalled('failing-plugin')).toBe(false)
-    })
-
-    test('should validate plugin basics correctly', async () => {
-      const invalidPlugin = { name: '', version: '1.0.0' } // Missing install method
-
-      await expect(instance.plugins.install(invalidPlugin as any)).rejects.toThrow('Plugin must have a valid name string')
-    })
-
-    test('should uninstall plugins correctly', async () => {
-      const plugin: TachUIPlugin = {
-        name: 'test-plugin',
-        version: '1.0.0',
-        async install(instance: TachUIInstance) {
-          instance.registerService('test-service', { value: 'test' })
-        },
-        async uninstall() {
-          // Cleanup logic would go here
-        }
-      }
-
-      await instance.plugins.install(plugin)
-      expect(instance.plugins.isInstalled('test-plugin')).toBe(true)
-
-      await instance.plugins.uninstall('test-plugin')
-      expect(instance.plugins.isInstalled('test-plugin')).toBe(false)
-    })
-  })
-
-  describe('SimplifiedComponentRegistry', () => {
-    test('should register and retrieve components', () => {
-      const testComponent = () => ({ type: 'div', props: {}, children: [] })
-      
-      instance.components.register({
-        name: 'TestComponent',
-        component: testComponent,
-        category: 'test',
-        tags: ['example']
-      })
-
-      expect(instance.components.has('TestComponent')).toBe(true)
-      expect(instance.components.getComponent('TestComponent')).toBe(testComponent)
-      
-      const registration = instance.components.get('TestComponent')
-      expect(registration?.category).toBe('test')
-      expect(registration?.tags).toContain('example')
-    })
-
-    test('should list components by category', () => {
-      const testComponent1 = () => ({ type: 'div', props: {}, children: [] })
-      const testComponent2 = () => ({ type: 'span', props: {}, children: [] })
-
-      instance.components.register({
-        name: 'TestComponent1',
-        component: testComponent1,
-        category: 'test'
-      })
-
-      instance.components.register({
-        name: 'TestComponent2', 
-        component: testComponent2,
-        category: 'test'
-      })
-
-      const testComponents = instance.components.listByCategory('test')
-      expect(testComponents).toHaveLength(2)
-      expect(testComponents.map(c => c.name)).toContain('TestComponent1')
-      expect(testComponents.map(c => c.name)).toContain('TestComponent2')
-    })
-
-    test('should unregister components correctly', () => {
-      const testComponent = () => ({ type: 'div', props: {}, children: [] })
-      
-      instance.components.register({
-        name: 'TestComponent',
-        component: testComponent
-      })
-
-      expect(instance.components.has('TestComponent')).toBe(true)
-      
-      const unregistered = instance.components.unregister('TestComponent')
-      expect(unregistered).toBe(true)
-      expect(instance.components.has('TestComponent')).toBe(false)
-    })
-  })
-
-  describe('SimplifiedTachUIInstance', () => {
-    test('should integrate plugins and components', async () => {
-      const plugin: TachUIPlugin = {
-        name: 'ui-plugin',
-        version: '1.0.0',
-        async install(instance: TachUIInstance) {
-          const buttonComponent = () => ({ type: 'button', props: {}, children: [] })
-          instance.registerComponent('Button', buttonComponent, {
-            category: 'input',
-            tags: ['interactive']
-          })
-        }
-      }
-
-      await instance.installPlugin(plugin)
-
-      expect(instance.isPluginInstalled('ui-plugin')).toBe(true)
-      expect(instance.components.has('Button')).toBe(true)
-      
-      const stats = instance.getStats()
-      expect(stats.plugins.installed).toBe(1)
-      expect(stats.components.totalComponents).toBe(1)
-    })
-
-    test('should handle services correctly', () => {
-      instance.registerService('config', { theme: 'dark' })
-      
-      expect(instance.hasService('config')).toBe(true)
-      expect(instance.getService('config')).toEqual({ theme: 'dark' })
-      
-      instance.unregisterService('config')
-      expect(instance.hasService('config')).toBe(false)
-    })
-
-    test('should reset correctly', async () => {
-      const plugin: TachUIPlugin = {
-        name: 'test-plugin',
-        version: '1.0.0',
-        async install(instance: TachUIInstance) {
-          instance.registerService('test-service', { value: 'test' })
-        }
-      }
-
-      await instance.installPlugin(plugin)
-      instance.registerService('direct-service', { value: 'direct' })
-
-      expect(instance.getInstalledPlugins()).toHaveLength(1)
-      expect(instance.services.size).toBe(2)
-
-      await instance.reset()
-
-      expect(instance.getInstalledPlugins()).toHaveLength(0)
-      expect(instance.services.size).toBe(0)
-      expect(instance.components.getStats().totalComponents).toBe(0)
-    })
-  })
-})