@tachui/core 0.7.0-alpha1 → 0.8.0-alpha

package/src/lifecycle/hooks.ts

@@ -1,332 +0,0 @@
-/**
- * Enhanced Lifecycle Hook Registration API (Phase 1)
- *
- * Provides convenient utilities for registering lifecycle hooks with DOM context,
- * error handling, and migration helpers for setTimeout workarounds.
- */
-
-import type { ComponentInstance, ComponentProps, DOMError } from '../runtime/types'
-
-/**
- * Enhanced lifecycle hook registration using withLifecycle utility
- */
-export function useLifecycle(
-  instance: ComponentInstance,
-  hooks: {
-    onMount?: () => void | (() => void)
-    onUnmount?: () => void
-    onError?: (error: Error) => void
-    onDOMReady?: (elements: Map<string, Element>, primary?: Element) => void | (() => void)
-    onDOMError?: (error: DOMError, context: string) => void
-  }
-): void {
-  // Store enhanced hooks in a custom property for now
-  ;(instance as any)._enhancedLifecycle = { 
-    ...(instance as any)._enhancedLifecycle, 
-    ...hooks 
-  }
-}
-
-/**
- * Register onMount lifecycle hook
- */
-export function onMount(
-  instance: ComponentInstance, 
-  callback: () => void | (() => void)
-): void {
-  useLifecycle(instance, { onMount: callback })
-}
-
-/**
- * Register onDOMReady lifecycle hook with guaranteed DOM element access
- */
-export function onDOMReady(
-  instance: ComponentInstance,
-  callback: (elements: Map<string, Element>, primary?: Element) => void | (() => void)
-): void {
-  useLifecycle(instance, { onDOMReady: callback })
-}
-
-/**
- * Register onUnmount lifecycle hook
- */
-export function onUnmount(
-  instance: ComponentInstance, 
-  callback: () => void
-): void {
-  useLifecycle(instance, { onUnmount: callback })
-}
-
-/**
- * Register error handling hooks
- */
-export function onError(
-  instance: ComponentInstance,
-  callback: (error: Error) => void
-): void {
-  useLifecycle(instance, { onError: callback })
-}
-
-/**
- * Register DOM-specific error handling
- */
-export function onDOMError(
-  instance: ComponentInstance,
-  callback: (error: DOMError, context: string) => void
-): void {
-  useLifecycle(instance, { onDOMError: callback })
-}
-
-/**
- * Error boundary wrapper for components
- */
-export function withErrorBoundary<P extends ComponentProps>(
-  instance: ComponentInstance<P>,
-  errorHandler: (error: Error, context?: string) => void
-): ComponentInstance<P> {
-  useLifecycle(instance, {
-    onError: (error) => errorHandler(error),
-    onDOMError: (error, context) => errorHandler(error, `DOM:${context}`)
-  })
-  return instance
-}
-
-/**
- * DOM element access utilities
- */
-export function withDOMAccess<T extends ComponentInstance>(
-  instance: T,
-  callback: (element: Element) => void | (() => void)
-): void {
-  onDOMReady(instance, (_elements, primaryElement) => {
-    if (primaryElement) {
-      return callback(primaryElement)
-    }
-  })
-}
-
-/**
- * Reactive asset utilities for components
- */
-export function withReactiveAsset<T extends ComponentInstance>(
-  instance: T,
-  asset: any, // Asset type would be imported from assets system
-  updateCallback: (element: Element, value: string) => void
-): void {
-  withDOMAccess(instance, (element) => {
-    // This would integrate with the reactive asset system
-    // For now, providing interface for future implementation
-    if (typeof asset?.resolve === 'function') {
-      const resolvedValue = asset.resolve()
-      updateCallback(element, resolvedValue)
-    }
-  })
-}
-
-/**
- * Migration helper: Replace setTimeout workarounds with onDOMReady
- */
-export function migrateFromSetTimeout(
-  instance: ComponentInstance,
-  legacyDOMSetup: () => void
-): void {
-  // Add deprecation warning
-  console.warn('⚠️ setTimeout workaround detected. Consider migrating to onDOMReady.')
-  
-  onDOMReady(instance, () => {
-    legacyDOMSetup()
-  })
-}
-
-/**
- * Focus management utilities
- */
-export const FocusManager = {
-  /**
-   * Focus element when DOM is ready (replaces setTimeout focus hacks)
-   */
-  focusWhenReady(
-    instance: ComponentInstance,
-    selector?: string,
-    element?: Element
-  ): void {
-    onDOMReady(instance, (_elements, primaryElement) => {
-      let targetElement: Element | null = null
-      
-      if (element) {
-        targetElement = element
-      } else if (selector) {
-        targetElement = primaryElement?.querySelector(selector) || null
-      } else {
-        targetElement = primaryElement || null
-      }
-      
-      if (targetElement instanceof HTMLElement && typeof targetElement.focus === 'function') {
-        // Use requestAnimationFrame instead of setTimeout for focus
-        requestAnimationFrame(() => {
-          try {
-            targetElement!.focus()
-          } catch (error) {
-            console.warn('Focus failed:', error)
-          }
-        })
-      }
-    })
-  },
-
-  /**
-   * Focus first focusable element in component
-   */
-  focusFirstFocusable(instance: ComponentInstance): void {
-    onDOMReady(instance, (_elements, primaryElement) => {
-      if (primaryElement) {
-        const focusable = primaryElement.querySelector(
-          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-        ) as HTMLElement
-        
-        if (focusable) {
-          this.focusWhenReady(instance, undefined, focusable)
-        }
-      }
-    })
-  }
-}
-
-/**
- * Animation coordination utilities (replaces setTimeout animation hacks)
- */
-export const AnimationManager = {
-  /**
-   * Coordinate animations with DOM readiness
-   */
-  animateWhenReady(
-    instance: ComponentInstance,
-    animations: {
-      element?: Element
-      selector?: string
-      setup: (element: Element) => void
-      animate: (element: Element) => void
-    }
-  ): void {
-    onDOMReady(instance, (_elements, primaryElement) => {
-      let targetElement: Element | null = null
-      
-      if (animations.element) {
-        targetElement = animations.element
-      } else if (animations.selector) {
-        targetElement = primaryElement?.querySelector(animations.selector) || null
-      } else {
-        targetElement = primaryElement || null
-      }
-      
-      if (targetElement) {
-        // Setup initial state
-        animations.setup(targetElement)
-        
-        // Trigger animation on next frame
-        requestAnimationFrame(() => {
-          animations.animate(targetElement!)
-        })
-      }
-    })
-  },
-
-  /**
-   * Fade in animation (common pattern)
-   */
-  fadeIn(
-    instance: ComponentInstance,
-    element?: Element,
-    duration = 300
-  ): void {
-    this.animateWhenReady(instance, {
-      element,
-      setup: (el) => {
-        const htmlEl = el as HTMLElement
-        htmlEl.style.opacity = '0'
-        htmlEl.style.transition = `opacity ${duration}ms ease-out`
-      },
-      animate: (el) => {
-        const htmlEl = el as HTMLElement
-        htmlEl.style.opacity = '1'
-      }
-    })
-  },
-
-  /**
-   * Scale in animation (common for modals/alerts)
-   */
-  scaleIn(
-    instance: ComponentInstance,
-    element?: Element,
-    duration = 300
-  ): void {
-    this.animateWhenReady(instance, {
-      element,
-      setup: (el) => {
-        const htmlEl = el as HTMLElement
-        htmlEl.style.transform = 'scale(0.8)'
-        htmlEl.style.opacity = '0'
-        htmlEl.style.transition = `all ${duration}ms ease-out`
-      },
-      animate: (el) => {
-        const htmlEl = el as HTMLElement
-        htmlEl.style.transform = 'scale(1)'
-        htmlEl.style.opacity = '1'
-      }
-    })
-  }
-}
-
-/**
- * Outside click detection utility (replaces setTimeout blur workarounds)
- */
-export function setupOutsideClickDetection(
-  instance: ComponentInstance,
-  callback: () => void,
-  selector?: string
-): void {
-  onDOMReady(instance, (_elements, primaryElement) => {
-    const targetElement = selector 
-      ? primaryElement?.querySelector(selector)
-      : primaryElement
-    
-    if (targetElement) {
-      const handleClickOutside = (event: MouseEvent) => {
-        if (!targetElement.contains(event.target as Node)) {
-          callback()
-        }
-      }
-      
-      document.addEventListener('click', handleClickOutside)
-      
-      // Return cleanup function
-      onUnmount(instance, () => {
-        document.removeEventListener('click', handleClickOutside)
-      })
-    }
-  })
-}
-
-/**
- * Position calculation utility (replaces setTimeout positioning hacks)
- */
-export function setupPositioning(
-  instance: ComponentInstance,
-  triggerSelector: string,
-  targetSelector: string,
-  calculatePosition: (trigger: Element, target: Element) => { x: number; y: number }
-): void {
-  onDOMReady(instance, (_elements, primaryElement) => {
-    const trigger = primaryElement?.querySelector(triggerSelector)
-    const target = primaryElement?.querySelector(targetSelector)
-    
-    if (trigger && target) {
-      const position = calculatePosition(trigger, target)
-      const targetEl = target as HTMLElement
-      targetEl.style.left = `${position.x}px`
-      targetEl.style.top = `${position.y}px`
-    }
-  })
-}
-

package/src/modifiers/__tests__/as-html-integration.test.ts

@@ -1,204 +0,0 @@
-import { describe, test, expect } from 'vitest'
-import { ModifierBuilderImpl } from '../builder'
-
-// Mock components for testing integration
-const mockTextComponent = (content: string) => ({
-  type: 'Text',
-  __tachui_component_type: 'Text',
-  content,
-  props: { content }
-})
-
-const mockVStackComponent = () => ({
-  type: 'VStack',
-  __tachui_component_type: 'VStack',
-  props: { children: [] }
-})
-
-describe('AsHTML Integration Tests', () => {
-  test('asHTML method exists on ModifierBuilder', () => {
-    const component = mockTextComponent('<p>Test</p>')
-    const builder = new ModifierBuilderImpl(component)
-    
-    expect(typeof builder.asHTML).toBe('function')
-  })
-
-  test('asHTML returns ModifierBuilder for chaining', () => {
-    const component = mockTextComponent('<p>Test</p>')
-    const builder = new ModifierBuilderImpl(component)
-    
-    const result = builder.asHTML()
-    
-    expect(result).toBe(builder) // Should return the same builder instance for chaining
-    expect(result.asHTML).toBeDefined() // Should still have asHTML method for further chaining
-  })
-
-  test('asHTML can be chained with other modifiers', () => {
-    const component = mockTextComponent('<p>Styled content</p>')
-    const builder = new ModifierBuilderImpl(component)
-    
-    // Chain multiple modifiers including asHTML
-    const result = builder
-      .asHTML()
-      .padding(16)
-      .backgroundColor('#f0f0f0')
-      .cornerRadius(8)
-    
-    expect(result).toBe(builder)
-    
-    // Build should not throw
-    expect(() => result.build()).not.toThrow()
-  })
-
-  test('asHTML adds modifier to the modifier list', () => {
-    const component = mockTextComponent('<p>Test</p>')
-    const builder = new ModifierBuilderImpl(component)
-    
-    // Access private modifiers array for testing
-    const initialModifierCount = (builder as any).modifiers.length
-    
-    builder.asHTML()
-    
-    const finalModifierCount = (builder as any).modifiers.length
-    expect(finalModifierCount).toBe(initialModifierCount + 1)
-    
-    // Check that the last modifier is AsHTMLModifier
-    const lastModifier = (builder as any).modifiers[finalModifierCount - 1]
-    expect(lastModifier.type).toBe('asHTML')
-  })
-
-  test('asHTML with options adds configured modifier', () => {
-    const component = mockTextComponent('<p>Test</p>')
-    const builder = new ModifierBuilderImpl(component)
-    
-    const customSanitizer = (html: string) => html.replace(/<script.*?<\/script>/gi, '')
-    
-    builder.asHTML({ 
-      skipSanitizer: false,
-      customSanitizer,
-      allowedTags: ['p', 'strong', 'em']
-    })
-    
-    const modifiers = (builder as any).modifiers
-    const asHTMLModifier = modifiers[modifiers.length - 1]
-    
-    expect(asHTMLModifier.type).toBe('asHTML')
-    expect(asHTMLModifier.properties.skipSanitizer).toBe(false)
-    expect(asHTMLModifier.properties.customSanitizer).toBe(customSanitizer)
-    expect(asHTMLModifier.properties.allowedTags).toEqual(['p', 'strong', 'em'])
-  })
-
-  test('multiple asHTML calls add multiple modifiers', () => {
-    const component = mockTextComponent('<p>Test</p>')
-    const builder = new ModifierBuilderImpl(component)
-    
-    builder.asHTML()
-    builder.asHTML({ skipSanitizer: true })
-    
-    const modifiers = (builder as any).modifiers
-    const asHTMLModifiers = modifiers.filter((m: any) => m.type === 'asHTML')
-    
-    expect(asHTMLModifiers).toHaveLength(2)
-    expect(asHTMLModifiers[0].properties.skipSanitizer).toBeFalsy()
-    expect(asHTMLModifiers[1].properties.skipSanitizer).toBe(true)
-  })
-
-  test('asHTML works in complex modifier chains', () => {
-    const component = mockTextComponent('<article><h1>Title</h1><p>Content</p></article>')
-    const builder = new ModifierBuilderImpl(component)
-    
-    // Complex realistic chain
-    const result = builder
-      .padding({ vertical: 20, horizontal: 16 })
-      .backgroundColor('#ffffff')
-      .asHTML({ allowedTags: ['article', 'h1', 'p', 'strong', 'em'] })
-      .cornerRadius(8)
-      .shadow({
-        x: 0,
-        y: 2,
-        blur: 8,
-        color: 'rgba(0, 0, 0, 0.1)'
-      })
-      .margin({ bottom: 16 })
-      .maxWidth(600)
-      .fontSize('16px')
-      .lineHeight(1.6)
-    
-    expect(result).toBe(builder)
-    expect(() => result.build()).not.toThrow()
-    
-    // Check that asHTML modifier is in the chain
-    const modifiers = (builder as any).modifiers
-    const hasAsHTML = modifiers.some((m: any) => m.type === 'asHTML')
-    expect(hasAsHTML).toBe(true)
-  })
-
-  test('asHTML modifier priority is correct', () => {
-    const component = mockTextComponent('<p>Test</p>')
-    const builder = new ModifierBuilderImpl(component)
-    
-    builder.asHTML()
-    
-    const modifiers = (builder as any).modifiers
-    const asHTMLModifier = modifiers[modifiers.length - 1]
-    
-    expect(asHTMLModifier.priority).toBe(25) // After layout, before styling
-  })
-
-  test('built component maintains original structure with asHTML modifier', () => {
-    const originalContent = '<div class="article"><h1>Title</h1><p>Content</p></div>'
-    const component = mockTextComponent(originalContent)
-    const builder = new ModifierBuilderImpl(component)
-    
-    const builtComponent = builder
-      .asHTML()
-      .padding(16)
-      .build()
-    
-    // Component should maintain its basic structure
-    expect(builtComponent).toBeDefined()
-    expect(typeof builtComponent).toBe('object')
-    
-    // Should have modifiers applied
-    if ('modifiers' in builtComponent) {
-      const modifiers = (builtComponent as any).modifiers
-      const hasAsHTML = modifiers.some((m: any) => m.type === 'asHTML')
-      const hasPadding = modifiers.some((m: any) => m.type === 'padding')
-      
-      expect(hasAsHTML).toBe(true)
-      expect(hasPadding).toBe(true)
-    }
-  })
-
-  test('asHTML error handling in build chain', () => {
-    const component = mockVStackComponent() // Non-Text component
-    const builder = new ModifierBuilderImpl(component)
-    
-    // Adding asHTML to builder should work (error occurs during application)
-    expect(() => {
-      builder.asHTML()
-    }).not.toThrow()
-    
-    // Build should work (error occurs during render/apply)
-    expect(() => {
-      builder.build()
-    }).not.toThrow()
-    
-    // The error would occur when the modifier is actually applied to DOM
-    const modifiers = (builder as any).modifiers
-    const asHTMLModifier = modifiers[modifiers.length - 1]
-    
-    // Mock DOM application
-    const element = document.createElement('div')
-    const context = {
-      componentId: 'test',
-      componentInstance: component,
-      element,
-      phase: 'creation' as const
-    }
-    
-    expect(() => {
-      asHTMLModifier.apply(null, context)
-    }).toThrow('AsHTML modifier can only be applied to Text components')
-  })
-})