@tachui/core 0.7.0-alpha1

package/src/modifiers/utils.ts

@@ -0,0 +1,413 @@
+/**
+ * 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

@@ -0,0 +1,190 @@
+/**
+ * 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)
+    })
+  })
+})