@tachui/core 0.7.0-alpha1

package/src/runtime/index.ts

@@ -0,0 +1,202 @@
+/**
+ * TachUI Runtime System (Phase 3)
+ *
+ * Direct DOM rendering engine that provides efficient DOM manipulation
+ * without virtual DOM overhead. Integrates with the reactive system
+ * to provide surgical DOM updates and component lifecycle management.
+ */
+
+export {
+  ComponentManager,
+  createAdvancedComponent,
+  createComponent,
+  createFragment,
+  createReactiveComponent,
+  createRef,
+  forwardRef,
+  withLifecycle,
+} from './component'
+// Component context system for state management
+export {
+  ComponentContextDebug,
+  ComponentContextSymbol,
+  consumeEnvironmentValue,
+  createComponentContext,
+  createEnvironmentKey,
+  EnvironmentSymbol,
+  getCurrentComponentContext,
+  provideEnvironmentValue,
+  runWithComponentContext,
+  setCurrentComponentContext,
+  withComponentContext,
+  // EnvironmentKey type is exported from state module
+} from './component-context'
+// Context and DI types
+export type { TachUIContext } from './context'
+export {
+  ContextManager,
+  contextUtils,
+  createContext,
+  createContextConsumer,
+  DIContainer,
+  defaultContextManager,
+  globalDI,
+  Injectable,
+  inject,
+  useContext,
+  withProvider,
+} from './context'
+// Development tools
+export {
+  type ComponentTreeNode,
+  type DebugEvent,
+  type DevState,
+  DevTools,
+  type DevToolsConfig,
+  devUtils,
+  enableDevelopmentMode,
+  enablePerformanceTracking,
+  getComponentTree,
+  getDevTools,
+  globalDevTools,
+} from './dev-tools'
+// DOM Bridge - Component mounting system
+export {
+  mountRoot,
+  DOMBridgeDebug,
+  getComponentFromElement,
+  mountComponentChildren,
+  mountComponentTree,
+  unmountComponent,
+  unmountComponentEnhanced,
+  updateComponent,
+} from './dom-bridge'
+// Error handling and boundaries
+export {
+  createErrorBoundary,
+  ErrorBoundary,
+  type ErrorBoundaryProps,
+  type ErrorBoundaryState,
+  type ErrorCategory,
+  type ErrorHandler,
+  type ErrorHandlingConfig,
+  ErrorManager,
+  type ErrorRecoveryConfig,
+  type ErrorRecoveryStrategy,
+  type ErrorReporter,
+  type ErrorSeverity,
+  errorReporters,
+  errorUtils,
+  globalErrorManager,
+  type TachUIError,
+} from './error-boundary'
+// Error recovery
+export {
+  CircuitBreaker,
+  type CircuitBreakerConfig,
+  type CircuitBreakerState,
+  type FallbackConfig,
+  FallbackManager,
+  RecoveryOrchestrator,
+  RetryPolicy,
+  type RetryPolicyConfig,
+  recoveryPresets,
+  recoveryUtils,
+} from './error-recovery'
+// Error reporting and logging
+export {
+  type ErrorAggregation,
+  ErrorAggregator,
+  globalErrorAggregator,
+  globalLogger,
+  type LogEntry,
+  type Logger,
+  type LogLevel,
+  type ReportDestination,
+  type ReportingConfig,
+  reportDestinations,
+  reportingUtils,
+  StructuredLogger,
+  setupErrorReporting,
+} from './error-reporting'
+// Error utilities and debugging
+export {
+  devErrorUtils,
+  type ErrorAnalysis,
+  ErrorPatternDetector,
+  errorDebugUtils,
+  type PerformanceImpact,
+  PerformanceImpactAnalyzer,
+  type StackTraceAnalysis,
+  StackTraceAnalyzer,
+} from './error-utils'
+export { LifecycleManager } from './lifecycle'
+// Runtime utilities
+export { mount, unmount, updateProps } from './mounting'
+export { lazy, memo } from './optimization'
+export {
+  type ComponentMetrics,
+  globalPerformanceMonitor,
+  type MonitoringOptions,
+  type PerformanceListener,
+  type PerformanceMetric,
+  PerformanceMonitor,
+  performanceUtils,
+  type ReactiveMetrics,
+} from './performance'
+// Props and children handling
+export {
+  ChildrenManager,
+  createChildrenManager,
+  createPropsManager,
+  createRefManager,
+  defaultChildrenRenderer,
+  PropsManager,
+  propsUtils,
+  RefManager,
+} from './props'
+export { DOMRenderer, h, renderComponent, text } from './renderer'
+// Element override system (Tag Specification Enhancement)
+export * from './element-override'
+export * from './semantic-role-manager'
+export * from './development-warnings'
+// Enhanced lifecycle hooks (Phase 1)
+export {
+  AnimationManager,
+  FocusManager,
+  migrateFromSetTimeout,
+  onDOMError,
+  onDOMReady,
+  onError,
+  onMount,
+  onUnmount,
+  setupOutsideClickDetection,
+  setupPositioning,
+  useLifecycle,
+  withDOMAccess,
+  withErrorBoundary,
+  withReactiveAsset,
+} from '../lifecycle/hooks'
+// Core runtime types
+export type {
+  ChildrenRenderer,
+  Component,
+  ComponentChildren,
+  ComponentContext,
+  ComponentInstance,
+  ComponentProps,
+  ComponentRef,
+  ContextSubscription,
+  DOMError,
+  DOMNode,
+  Fragment,
+  IDIContainer,
+  LifecycleHooks,
+  PropsValidator,
+  Ref,
+  RefCallback,
+  RenderFunction,
+  ServiceRegistration,
+  StrictComponentProps,
+  ValidatedProps,
+} from './types'

package/src/runtime/lazy-component.ts

@@ -0,0 +1,268 @@
+/**
+ * Lazy Component System
+ *
+ * Provides runtime component resolution with dynamic imports for
+ * true component-level lazy loading.
+ */
+
+// No reactive imports needed - using simple state management to avoid memory leaks
+import type { ComponentInstance, DOMNode } from './types'
+
+export interface LazyComponentOptions {
+  /** Fallback to show while loading */
+  fallback?: DOMNode
+  /** Error fallback when import fails */
+  errorFallback?: (error: Error) => DOMNode
+  /** Timeout in milliseconds before showing error */
+  timeout?: number
+  /** Preload strategy */
+  preload?: 'never' | 'idle' | 'hover' | 'visible' | 'immediate'
+}
+
+export type LazyComponentLoader<T = any> = () => Promise<{ default: T } | T>
+
+export interface LazyComponentState {
+  loading: boolean
+  loaded: boolean
+  error: Error | null
+  component: any
+}
+
+/**
+ * Create a lazy-loaded component that imports on-demand
+ */
+export function lazy<T extends ComponentInstance>(
+  loader: LazyComponentLoader<T>,
+  options: LazyComponentOptions = {}
+): (props: any) => ComponentInstance {
+  const { fallback, errorFallback, timeout = 10000, preload = 'never' } = options
+
+  // Simple state management without reactive effects to prevent memory leaks
+  let loadTriggered = false
+  let componentLoaded: any = null
+  let isLoading = false
+  let loadError: Error | null = null
+  let loadingPromise: Promise<any> | null = null
+
+  // Manual loading function to avoid reactive loops
+  const triggerLoad = async () => {
+    if (loadTriggered || isLoading || componentLoaded || loadingPromise) {
+      return
+    }
+
+    loadTriggered = true
+    isLoading = true
+    loadError = null
+
+    loadingPromise = (async () => {
+      try {
+        const module = await Promise.race([
+          loader(),
+          new Promise<never>((_, reject) =>
+            setTimeout(() => reject(new Error('Component load timeout')), timeout)
+          ),
+        ])
+
+        // Handle both default exports and direct exports
+        componentLoaded = 'default' in module ? module.default : module
+      } catch (error) {
+        const errorObj = error as Error
+        // Only log in non-test environments to avoid polluting test output
+        if (typeof process === 'undefined' || process.env.NODE_ENV !== 'test') {
+          console.error('Failed to load lazy component:', errorObj)
+        }
+        loadError = errorObj
+      } finally {
+        isLoading = false
+        loadingPromise = null
+      }
+    })()
+
+    await loadingPromise
+  }
+
+  // Preload strategies
+  if (preload === 'idle' && typeof requestIdleCallback !== 'undefined') {
+    requestIdleCallback(() => {
+      triggerLoad().catch(() => {})
+    })
+  } else if (preload === 'idle') {
+    // Fallback for browsers without requestIdleCallback
+    setTimeout(() => {
+      triggerLoad().catch(() => {})
+    }, 100)
+  } else if (preload === 'immediate') {
+    // Start loading immediately but don't await
+    triggerLoad().catch(() => {})
+  }
+
+  return (props: any) => {
+    // Trigger loading if not already started
+    if (!loadTriggered && !isLoading && !componentLoaded) {
+      triggerLoad().catch(() => {})
+    }
+
+    // Handle error state
+    if (loadError) {
+      if (errorFallback) {
+        return errorFallback(loadError)
+      }
+      return createErrorComponent(loadError)
+    }
+
+    // Handle loading state
+    if (isLoading || !componentLoaded) {
+      if (fallback) {
+        return fallback
+      }
+      return createLoadingComponent()
+    }
+
+    // Render loaded component
+    try {
+      return typeof componentLoaded === 'function' ? componentLoaded(props) : componentLoaded
+    } catch (renderError) {
+      const errorObj = renderError as Error
+      // Only log in non-test environments to avoid polluting test output
+      if (typeof process === 'undefined' || process.env.NODE_ENV !== 'test') {
+        console.error('Error rendering lazy component:', errorObj)
+      }
+      return createErrorComponent(errorObj)
+    }
+  }
+}
+
+/**
+ * Create a suspense boundary for lazy components
+ */
+export function Suspense(props: {
+  fallback: DOMNode
+  children: ComponentInstance[]
+}): ComponentInstance {
+  // This would integrate with the actual rendering system
+  // For now, just return children directly
+  return {
+    type: 'component',
+    render: () => ({
+      type: 'element',
+      tag: 'div',
+      props: { class: 'tachui-suspense' },
+      children: props.children.map(() => ({
+        type: 'element' as const,
+        tag: 'div',
+        children: [],
+      })),
+    }),
+    props: props,
+    id: `suspense-${Math.random().toString(36).substr(2, 9)}`,
+  }
+}
+
+/**
+ * Preload a lazy component without rendering
+ */
+export function preloadComponent<T>(loader: LazyComponentLoader<T>): Promise<T> {
+  return loader().then((module) => {
+    if (module && typeof module === 'object' && 'default' in module) {
+      return (module as { default: T }).default
+    }
+    return module as T
+  })
+}
+
+/**
+ * Create multiple lazy components with shared preloading
+ */
+export function createLazyComponentGroup<T extends Record<string, LazyComponentLoader>>(
+  loaders: T,
+  options: LazyComponentOptions = {}
+): { [K in keyof T]: ReturnType<typeof lazy> } {
+  const components = {} as { [K in keyof T]: ReturnType<typeof lazy> }
+
+  for (const [name, loader] of Object.entries(loaders)) {
+    components[name as keyof T] = lazy(loader as LazyComponentLoader, options)
+  }
+
+  return components
+}
+
+/**
+ * Preload all components in a group
+ */
+export function preloadComponentGroup<T extends Record<string, LazyComponentLoader>>(
+  loaders: T
+): Promise<{ [K in keyof T]: any }> {
+  const promises = Object.entries(loaders).map(
+    async ([name, loader]) => [name, await preloadComponent(loader as LazyComponentLoader)] as const
+  )
+
+  return Promise.all(promises).then((results) => {
+    const resultMap: Record<string, any> = {}
+    for (const [name, component] of results) {
+      resultMap[name] = component
+    }
+    return resultMap as { [K in keyof T]: any }
+  })
+}
+
+// Helper functions for default fallback components
+function createLoadingComponent(): DOMNode {
+  return {
+    type: 'element',
+    tag: 'div',
+    props: {
+      class: 'tachui-lazy-loading',
+      style: 'padding: 16px; color: #666; text-align: center;',
+    },
+    children: [
+      {
+        type: 'text',
+        text: 'Loading component...',
+      },
+    ],
+  }
+}
+
+function createErrorComponent(error: Error): DOMNode {
+  return {
+    type: 'element',
+    tag: 'div',
+    props: {
+      class: 'tachui-lazy-error',
+      style:
+        'padding: 16px; color: #d32f2f; border: 1px solid #d32f2f; border-radius: 4px; background: #ffeaea;',
+    },
+    children: [
+      {
+        type: 'text',
+        text: `Failed to load component: ${error.message}`,
+      },
+    ],
+  }
+}
+
+// Advanced lazy loading with intersection observer for "visible" preload
+export function createVisibilityLazyComponent<T extends ComponentInstance>(
+  loader: LazyComponentLoader<T>,
+  options: LazyComponentOptions & { rootMargin?: string; threshold?: number } = {}
+): (props: any) => ComponentInstance {
+  const { rootMargin: _rootMargin = '50px', threshold: _threshold = 0.1, ...lazyOptions } = options
+
+  if (lazyOptions.preload === 'visible' && typeof IntersectionObserver !== 'undefined') {
+    return (props: any) => {
+      const lazyComponent = lazy(loader, { ...lazyOptions, preload: 'never' })
+
+      // In a real implementation, this would observe the actual DOM element
+      // For now, just trigger after a short delay to simulate visibility
+      setTimeout(() => {
+        // Trigger the lazy loading by calling the component once
+        lazyComponent(props)
+      }, 100)
+
+      return lazyComponent(props)
+    }
+  }
+
+  // Fallback to regular lazy loading
+  return lazy(loader, lazyOptions)
+}

package/src/runtime/lifecycle.ts

@@ -0,0 +1,10 @@
+/**
+ * Lifecycle Management System
+ *
+ * Placeholder for Phase 3.1.2 - will be fully implemented next
+ */
+
+// eslint-disable-next-line typescript-eslint/no-extraneous-class
+export class LifecycleManager {
+  // Placeholder implementation
+}

package/src/runtime/mounting.ts

@@ -0,0 +1,17 @@
+/**
+ * Component Mounting System
+ *
+ * Placeholder for Phase 3.1.2 - will be fully implemented next
+ */
+
+export function mount() {
+  // Placeholder implementation
+}
+
+export function unmount() {
+  // Placeholder implementation
+}
+
+export function updateProps() {
+  // Placeholder implementation
+}

package/src/runtime/optimization.ts

@@ -0,0 +1,13 @@
+/**
+ * Component Optimization System
+ *
+ * Placeholder for Phase 3.1.2 - will be fully implemented next
+ */
+
+export function memo() {
+  // Placeholder implementation
+}
+
+export function lazy() {
+  // Placeholder implementation
+}