@tachui/core 0.7.0-alpha1 → 0.7.1-alpha

package/src/runtime/renderer.ts

@@ -1,674 +0,0 @@
-/**
- * Direct DOM Renderer (Phase 3.1.1)
- *
- * Efficient DOM manipulation without virtual DOM overhead.
- * Provides surgical DOM updates integrated with the reactive system.
- */
-
-import { applyModifiersToNode } from '../modifiers/registry'
-import { createEffect, createRoot, isComputed, isSignal } from '../reactive'
-import type { ComponentInstance, DOMNode } from './types'
-import { semanticRoleManager } from './semantic-role-manager'
-import { debugManager } from '../debug'
-
-/**
- * Direct DOM renderer for efficient DOM manipulation
- */
-export class DOMRenderer {
-  private nodeMap = new WeakMap<DOMNode, Element | Text | Comment>()
-  private cleanupMap = new WeakMap<Element | Text | Comment, (() => void)[]>()
-  private renderedNodes = new Set<DOMNode>()
-
-  /**
-   * Render a DOM node to an actual DOM element
-   */
-  render(
-    node: DOMNode | DOMNode[],
-    container?: Element
-  ): Element | Text | Comment | DocumentFragment {
-    if (Array.isArray(node)) {
-      return this.renderFragment(node, container)
-    }
-
-    return this.renderSingle(node, container)
-  }
-
-  /**
-   * Render a single DOM node
-   */
-  private renderSingle(node: DOMNode, container?: Element): Element | Text | Comment {
-    // Track rendered nodes for cleanup
-    this.renderedNodes.add(node)
-
-    let element: Element | Text | Comment
-
-    switch (node.type) {
-      case 'element':
-        element = this.createElement(node)
-        break
-      case 'text':
-        element = this.createTextNode(node)
-        break
-      case 'comment':
-        element = this.createComment(node)
-        break
-      default:
-        throw new Error(`Unknown node type: ${(node as any).type}`)
-    }
-
-    // Store reference
-    this.nodeMap.set(node, element)
-    node.element = element
-
-    // Apply modifiers if present (only for Element nodes, not Text/Comment)
-    if (element instanceof Element) {
-      let modifiers: any[] = []
-      
-      // Check for modifiers directly on the node
-      if (
-        'modifiers' in node &&
-        Array.isArray((node as any).modifiers) &&
-        (node as any).modifiers.length > 0
-      ) {
-        modifiers = (node as any).modifiers
-      }
-      
-      // Check for modifiers in component metadata
-      if (
-        'componentMetadata' in node &&
-        (node as any).componentMetadata?.modifiers &&
-        Array.isArray((node as any).componentMetadata.modifiers) &&
-        (node as any).componentMetadata.modifiers.length > 0
-      ) {
-        modifiers = (node as any).componentMetadata.modifiers
-      }
-      
-      if (modifiers.length > 0) {
-        this.applyModifiersToElement(element, modifiers, node)
-      }
-    }
-
-    // Set up cleanup if provided
-    if (node.dispose) {
-      this.addCleanup(element, node.dispose)
-    }
-
-    // Append to container if provided
-    if (container) {
-      container.appendChild(element)
-    }
-
-    return element
-  }
-
-  /**
-   * Render multiple nodes as a document fragment
-   */
-  private renderFragment(nodes: DOMNode[], container?: Element): DocumentFragment {
-    const fragment = document.createDocumentFragment()
-
-    nodes.forEach((node) => {
-      const element = this.renderSingle(node)
-      fragment.appendChild(element)
-    })
-
-    if (container) {
-      container.appendChild(fragment)
-    }
-
-    return fragment
-  }
-
-  /**
-   * Create a DOM element with props and children
-   */
-  private createElement(node: DOMNode): Element {
-    if (!node.tag) {
-      throw new Error('Element node must have a tag')
-    }
-
-    const element = document.createElement(node.tag)
-
-    // Apply debug attributes if debug mode is enabled
-    this.applyDebugAttributes(element, node)
-
-    // Apply props
-    if (node.props) {
-      this.applyProps(element, node.props)
-    }
-
-    // Process semantic attributes for components with element overrides
-    if ('componentMetadata' in node && (node as any).componentMetadata) {
-      const metadata = (node as any).componentMetadata
-      if (metadata.overriddenTo && metadata.originalType) {
-        // Import and use semantic role manager
-        try {
-          semanticRoleManager.processElementNode(
-            element as HTMLElement,
-            node.tag,
-            metadata,
-            node.props?.['aria'] || undefined
-          )
-        } catch (error) {
-          // Gracefully handle missing semantic role manager
-          console.warn('[tachUI] Could not process semantic attributes:', error)
-        }
-      }
-    }
-
-    // Render children
-    if (node.children && node.children.length > 0) {
-      node.children.forEach((child) => {
-        const childElement = this.renderSingle(child)
-        element.appendChild(childElement)
-      })
-    }
-
-    return element
-  }
-
-  /**
-   * Apply debug attributes to DOM element if debug mode is enabled
-   */
-  private applyDebugAttributes(element: Element, node: DOMNode): void {
-    if (!debugManager.isEnabled()) {
-      return
-    }
-
-    // Extract component type and debug label from various sources
-    let componentType = node.tag || 'element'
-    let debugLabel: string | undefined
-
-    // Check component metadata for more specific type and debug label
-    if ('componentMetadata' in node && (node as any).componentMetadata) {
-      const metadata = (node as any).componentMetadata
-      if (metadata.type) {
-        componentType = metadata.type
-      }
-    }
-
-    // Check props for debug label
-    if (node.props && 'data-tachui-label' in node.props) {
-      debugLabel = node.props['data-tachui-label']
-    }
-
-    // Check direct debug label in props
-    if (node.props && 'debugLabel' in node.props) {
-      debugLabel = node.props.debugLabel
-    }
-
-    // Apply debug attributes using the debug manager
-    debugManager.addDebugAttributes(element as HTMLElement, componentType, debugLabel)
-  }
-
-  /**
-   * Create a text node
-   */
-  private createTextNode(node: DOMNode): Text {
-    return document.createTextNode(node.text || '')
-  }
-
-  /**
-   * Create a comment node
-   */
-  private createComment(node: DOMNode): Comment {
-    return document.createComment(node.text || '')
-  }
-
-  /**
-   * Apply props to a DOM element with reactive updates
-   */
-  private applyProps(element: Element, props: Record<string, any>): void {
-    Object.entries(props).forEach(([key, value]) => {
-      this.applyProp(element, key, value)
-    })
-  }
-
-  /**
-   * Apply a single prop to an element
-   */
-  private applyProp(element: Element, key: string, value: any): void {
-    // Handle special props
-    if (key === 'className' || key === 'class') {
-      this.applyClassName(element, value)
-      return
-    }
-
-    if (key === 'style') {
-      this.applyStyle(element, value)
-      return
-    }
-
-    if (key.startsWith('on') && typeof value === 'function') {
-      this.applyEventListener(element, key, value)
-      return
-    }
-
-    // Handle reactive values (signals and computed)
-    if (isSignal(value) || isComputed(value)) {
-      // Create reactive effect to update DOM when signal changes
-      const effect = createEffect(() => {
-        const currentValue = value()
-        this.setElementProp(element, key, currentValue)
-      })
-
-      // Add cleanup for the effect
-      this.addCleanup(element, () => {
-        effect.dispose()
-      })
-      return
-    }
-
-    // Handle regular props
-    this.setElementProp(element, key, value)
-  }
-
-  /**
-   * Set a property on an element
-   */
-  private setElementProp(element: Element, key: string, value: any): void {
-    if (value == null) {
-      element.removeAttribute(key)
-      return
-    }
-
-    // Handle boolean attributes
-    if (typeof value === 'boolean') {
-      if (value) {
-        element.setAttribute(key, '')
-      } else {
-        element.removeAttribute(key)
-      }
-      return
-    }
-
-    // Handle regular attributes
-    element.setAttribute(key, String(value))
-  }
-
-  /**
-   * Apply className with reactive updates
-   */
-  private applyClassName(element: Element, value: any): void {
-    if (isSignal(value) || isComputed(value)) {
-      // Reactive className
-      const effect = createEffect(() => {
-        const currentValue = value()
-        element.className = this.normalizeClassName(currentValue)
-      })
-
-      // Add cleanup
-      this.addCleanup(element, () => {
-        effect.dispose()
-      })
-    } else {
-      element.className = this.normalizeClassName(value)
-    }
-  }
-
-  /**
-   * Normalize className value
-   */
-  private normalizeClassName(value: any): string {
-    if (Array.isArray(value)) {
-      return value.filter(Boolean).join(' ')
-    }
-
-    if (typeof value === 'object' && value !== null) {
-      return Object.entries(value)
-        .filter(([, condition]) => Boolean(condition))
-        .map(([className]) => className)
-        .join(' ')
-    }
-
-    return String(value || '')
-  }
-
-  /**
-   * Apply styles with reactive updates
-   */
-  private applyStyle(element: Element, value: any): void {
-    const htmlElement = element as HTMLElement
-
-    if (isSignal(value) || isComputed(value)) {
-      // Reactive styles
-      const effect = createEffect(() => {
-        const currentValue = value()
-        this.setElementStyles(htmlElement, currentValue)
-      })
-
-      // Add cleanup
-      this.addCleanup(element, () => {
-        effect.dispose()
-      })
-    } else {
-      this.setElementStyles(htmlElement, value)
-    }
-  }
-
-  /**
-   * Set styles on an element
-   */
-  private setElementStyles(element: HTMLElement, styles: any): void {
-    if (typeof styles === 'string') {
-      element.style.cssText = styles
-      return
-    }
-
-    if (typeof styles === 'object' && styles !== null) {
-      Object.entries(styles).forEach(([property, value]) => {
-        if (isSignal(value) || isComputed(value)) {
-          // Individual style property is reactive
-          const effect = createEffect(() => {
-            const currentValue = value()
-            if (currentValue == null) {
-              element.style.removeProperty(property)
-            } else {
-              element.style.setProperty(
-                property.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`),
-                String(currentValue)
-              )
-            }
-          })
-
-          // Add cleanup
-          this.addCleanup(element, () => {
-            effect.dispose()
-          })
-        } else {
-          // Static style property
-          if (value == null) {
-            element.style.removeProperty(property)
-          } else {
-            element.style.setProperty(
-              property.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`),
-              String(value)
-            )
-          }
-        }
-      })
-    }
-  }
-
-  /**
-   * Apply event listener
-   */
-  private applyEventListener(element: Element, eventName: string, handler: Function): void {
-    const event = eventName.slice(2).toLowerCase() // Remove 'on' prefix
-
-    const listener = (e: Event) => {
-      try {
-        handler(e)
-      } catch (error) {
-        console.error(`Event handler error for ${eventName}:`, error)
-      }
-    }
-
-    element.addEventListener(event, listener)
-
-    // Add cleanup
-    this.addCleanup(element, () => {
-      element.removeEventListener(event, listener)
-    })
-  }
-
-  /**
-   * Add cleanup function for an element
-   */
-  private addCleanup(element: Element | Text | Comment, cleanup: () => void): void {
-    const existing = this.cleanupMap.get(element) || []
-    existing.push(cleanup)
-    this.cleanupMap.set(element, existing)
-  }
-
-  /**
-   * Update an existing DOM node
-   */
-  updateNode(node: DOMNode, newProps?: Record<string, any>): void {
-    const element = this.nodeMap.get(node)
-    if (!element || typeof (element as any).setAttribute !== 'function') {
-      return
-    }
-
-    if (newProps) {
-      // Directly apply new props without batching to ensure immediate update
-      this.applyProps(element as Element, newProps)
-    }
-  }
-
-  /**
-   * Remove a DOM node and run cleanup
-   */
-  removeNode(node: DOMNode): void {
-    const element = this.nodeMap.get(node)
-    if (!element) return
-
-    // Run cleanup functions
-    const cleanupFunctions = this.cleanupMap.get(element)
-    if (cleanupFunctions) {
-      cleanupFunctions.forEach((cleanup) => {
-        try {
-          cleanup()
-        } catch (error) {
-          console.error('Cleanup error:', error)
-        }
-      })
-      this.cleanupMap.delete(element)
-    }
-
-    // Remove from DOM
-    if (element.parentNode) {
-      element.parentNode.removeChild(element)
-    }
-
-    // Clean up references
-    this.nodeMap.delete(node)
-    if (node.element !== undefined) {
-      node.element = undefined
-    }
-  }
-
-  /**
-   * Create reactive text content
-   */
-  createReactiveText(textAccessor: () => string): Text {
-    const textNode = document.createTextNode('')
-
-    createEffect(() => {
-      textNode.textContent = textAccessor()
-    })
-
-    return textNode
-  }
-
-  /**
-   * Create reactive element with dynamic props
-   */
-  createReactiveElement(
-    tag: string,
-    propsAccessor: () => Record<string, any>,
-    children?: DOMNode[]
-  ): Element {
-    const element = document.createElement(tag)
-
-    // Apply reactive props
-    createEffect(() => {
-      const props = propsAccessor()
-      this.applyProps(element, props)
-    })
-
-    // Add children
-    if (children) {
-      children.forEach((child) => {
-        const childElement = this.renderSingle(child)
-        element.appendChild(childElement)
-      })
-    }
-
-    return element
-  }
-
-  /**
-   * Apply modifiers to a DOM element
-   */
-  private applyModifiersToElement(element: Element, modifiers: any[], node: any): void {
-    
-    try {
-      // Extract component instance from node if available
-      const componentInstance = node.componentInstance || 
-                               (node.componentMetadata && node.componentMetadata.componentInstance) ||
-                               node
-      
-      // Apply modifiers with batching enabled for better performance
-      applyModifiersToNode(
-        node,
-        modifiers,
-        {
-          element: element,
-          componentId: (node as any).componentId || 'unknown',
-          phase: 'creation',
-          componentInstance: componentInstance, // Pass the component instance
-        },
-        {
-          batch: true, // Enable batched modifier application
-        }
-      )
-    } catch (error) {
-      console.error('Failed to apply modifiers to element:', error)
-    }
-  }
-
-  /**
-   * Cleanup all tracked elements
-   */
-  cleanup(): void {
-    // Call dispose on all rendered nodes
-    for (const node of this.renderedNodes) {
-      if (node.dispose && typeof node.dispose === 'function') {
-        try {
-          node.dispose()
-        } catch (error) {
-          console.error('Cleanup error:', error)
-        }
-      }
-    }
-
-    // Clear all tracking
-    this.renderedNodes.clear()
-    this.nodeMap = new WeakMap()
-    this.cleanupMap = new WeakMap()
-  }
-}
-
-/**
- * Global renderer instance
- */
-const globalRenderer = new DOMRenderer()
-
-/**
- * Render a component instance to DOM
- */
-export function renderComponent(instance: ComponentInstance, container: Element): () => void {
-  return createRoot(() => {
-    let currentNodes: DOMNode[] = []
-    
-    // Create reactive effect for component re-rendering
-    const effect = createEffect(() => {
-      // Clear previous nodes
-      currentNodes.forEach((node) => {
-        globalRenderer.removeNode(node)
-      })
-      
-      // Render new nodes
-      const renderResult = instance.render()
-      const nodes = Array.isArray(renderResult) ? renderResult : [renderResult]
-      currentNodes = nodes
-
-      nodes.forEach((node) => {
-        globalRenderer.render(node, container)
-      })
-    })
-
-    // Return cleanup function
-    return () => {
-      effect.dispose()
-      currentNodes.forEach((node) => {
-        globalRenderer.removeNode(node)
-      })
-    }
-  })
-}
-
-/**
- * Create a DOM node helper
- */
-export function h(
-  tag: string,
-  props?: Record<string, any> | null,
-  ...children: (DOMNode | string | number)[]
-): DOMNode {
-  // Normalize children
-  const normalizedChildren: DOMNode[] = children
-    .flat()
-    .filter((child) => child != null)
-    .map((child) => {
-      if (typeof child === 'string' || typeof child === 'number') {
-        return { type: 'text', text: String(child) } as DOMNode
-      }
-      return child as DOMNode
-    })
-
-  const node: DOMNode = {
-    type: 'element',
-    tag,
-    props: props || {},
-    children: normalizedChildren,
-  }
-
-  return node
-}
-
-/**
- * Create a text node helper
- */
-export function text(content: string | (() => string)): DOMNode {
-  if (isSignal(content) || isComputed(content) || typeof content === 'function') {
-    // Reactive text content
-    const textNode: DOMNode = {
-      type: 'text',
-      text: '',
-      dispose: undefined,
-    }
-
-    // Create reactive effect
-    const cleanup = createRoot(() => {
-      const effect = createEffect(() => {
-        const newText = content()
-        textNode.text = String(newText)
-        // Update DOM if already rendered, but only if not using AsHTML modifier
-        if (textNode.element && textNode.element instanceof Text) {
-          // Check if parent element has AsHTML flag
-          const parentElement = textNode.element.parentElement
-          if (parentElement && (parentElement as any).__tachui_asHTML) {
-            // Skip updating text content when AsHTML is active
-            return
-          }
-          textNode.element.textContent = textNode.text
-        }
-      })
-
-      // Return cleanup function
-      return () => {
-        effect.dispose()
-      }
-    })
-
-    textNode.dispose = cleanup
-    return textNode
-  }
-
-  return {
-    type: 'text',
-    text: content,
-  }
-}