@tachui/core 0.7.0-alpha1

package/src/compiler/index.ts

@@ -0,0 +1,25 @@
+/**
+ * TachUI Compiler Module
+ *
+ * Entry point for the compile-time transformation system that converts
+ * SwiftUI-style syntax into reactive DOM updates.
+ */
+
+export { parseAdvancedSwiftUISyntax } from './advanced-parser'
+export { generateDOMCode } from './codegen'
+export type { EnhancedCodegenOptions, EnhancedCodegenResult } from './enhanced-codegen'
+export { generateEnhancedDOMCode } from './enhanced-codegen'
+export { parseSwiftUISyntax } from './parser'
+export { createTachUIPlugin } from './plugin'
+// Advanced AST types
+export type {
+  ArrayExpressionNode,
+  CallExpressionNode,
+  ConditionalNode,
+  ForEachNode,
+  MemberExpressionNode,
+  PropertyWrapperNode,
+  StateBindingNode,
+  TachUIPluginOptions,
+  TransformOptions,
+} from './types'

package/src/compiler/parser.ts

@@ -0,0 +1,461 @@
+/**
+ * SwiftUI Syntax Parser
+ *
+ * Parses SwiftUI-style syntax into an Abstract Syntax Tree (AST)
+ * for transformation into reactive DOM code.
+ */
+
+import type { ASTNode, ComponentNode, Expression, LiteralExpression, ModifierNode } from './types'
+
+/**
+ * Parse SwiftUI syntax code into an AST
+ */
+export function parseSwiftUISyntax(code: string, filename: string): ASTNode[] {
+  const parser = new SwiftUIParser(code, filename)
+  return parser.parse()
+}
+
+/**
+ * SwiftUI syntax parser implementation
+ */
+class SwiftUIParser {
+  private code: string
+  private filename: string
+  private position: number = 0
+  private line: number = 1
+  private column: number = 1
+
+  constructor(code: string, filename: string) {
+    this.code = code
+    this.filename = filename
+  }
+
+  /**
+   * Main parsing entry point
+   */
+  parse(): ASTNode[] {
+    const nodes: ASTNode[] = []
+
+    // Skip whitespace and find TachUI components
+    while (!this.isAtEnd()) {
+      this.skipWhitespace()
+
+      if (this.isAtEnd()) break
+
+      const node = this.parseNode()
+      if (node) {
+        nodes.push(node)
+      }
+    }
+
+    return nodes
+  }
+
+  /**
+   * Parse a single AST node
+   */
+  private parseNode(): ASTNode | null {
+    const start = this.currentPosition()
+
+    // Try to parse a component
+    if (this.isComponentStart()) {
+      return this.parseComponent(start)
+    }
+
+    // Skip non-TachUI code
+    this.advance()
+    return null
+  }
+
+  /**
+   * Parse a SwiftUI component (VStack, Text, Button, etc.)
+   */
+  private parseComponent(start: { line: number; column: number; offset: number }): ComponentNode {
+    const name = this.parseIdentifier()
+
+    if (!name) {
+      throw new Error(`Expected component name at line ${this.line}`)
+    }
+
+    this.skipWhitespace()
+
+    const children: ASTNode[] = []
+    const modifiers: ModifierNode[] = []
+
+    // Parse component body if it has one (VStack { ... })
+    if (this.peek() === '{') {
+      this.advance() // consume '{'
+      this.skipWhitespace()
+
+      while (!this.isAtEnd() && this.peek() !== '}') {
+        this.skipWhitespace()
+        const child = this.parseNode()
+        if (child) {
+          children.push(child)
+        }
+      }
+
+      if (this.peek() === '}') {
+        this.advance() // consume '}'
+      }
+    }
+
+    // Parse component arguments if it has them (Text("Hello"))
+    else if (this.peek() === '(') {
+      this.advance() // consume '('
+      this.skipWhitespace()
+
+      const arg = this.parseExpression()
+      if (arg) {
+        children.push(arg)
+      }
+
+      this.skipWhitespace()
+      if (this.peek() === ')') {
+        this.advance() // consume ')'
+      }
+    }
+
+    // Parse modifiers (.padding(), .background(), etc.)
+    this.skipWhitespace()
+    while (this.peek() === '.') {
+      const modifier = this.parseModifier()
+      if (modifier) {
+        modifiers.push(modifier)
+      }
+      this.skipWhitespace()
+    }
+
+    const end = this.currentPosition()
+
+    return {
+      type: 'Component',
+      name,
+      children,
+      modifiers,
+      loc: {
+        start,
+        end,
+        source: this.filename,
+      },
+    }
+  }
+
+  /**
+   * Parse a modifier (.padding(), .background(), etc.)
+   */
+  private parseModifier(): ModifierNode | null {
+    if (this.peek() !== '.') return null
+
+    const start = this.currentPosition()
+    this.advance() // consume '.'
+
+    const name = this.parseIdentifier()
+    if (!name) return null
+
+    const args: Expression[] = []
+
+    // Parse modifier arguments
+    if (this.peek() === '(') {
+      this.advance() // consume '('
+      this.skipWhitespace()
+
+      while (!this.isAtEnd() && this.peek() !== ')') {
+        const arg = this.parseExpression()
+        if (arg) {
+          args.push(arg)
+        }
+
+        this.skipWhitespace()
+        if (this.peek() === ',') {
+          this.advance() // consume ','
+          this.skipWhitespace()
+        }
+      }
+
+      if (this.peek() === ')') {
+        this.advance() // consume ')'
+      }
+    }
+
+    const end = this.currentPosition()
+
+    return {
+      type: 'Modifier',
+      name,
+      arguments: args,
+      loc: {
+        start,
+        end,
+        source: this.filename,
+      },
+    }
+  }
+
+  /**
+   * Parse an expression (literal, identifier, function call)
+   */
+  private parseExpression(): Expression | null {
+    this.skipWhitespace()
+
+    const start = this.currentPosition()
+
+    // String literal
+    if (this.peek() === '"' || this.peek() === "'") {
+      return this.parseStringLiteral(start)
+    }
+
+    // Number literal
+    if (this.isDigit(this.peek())) {
+      return this.parseNumberLiteral(start)
+    }
+
+    // Boolean literals
+    if (this.match('true') || this.match('false')) {
+      const value = this.code.slice(start.offset, this.position)
+      return {
+        type: 'Literal',
+        value: value === 'true',
+        raw: value,
+        loc: {
+          start,
+          end: this.currentPosition(),
+          source: this.filename,
+        },
+      } as LiteralExpression
+    }
+
+    // Identifier or function call
+    const identifier = this.parseIdentifier()
+    if (identifier) {
+      const end = this.currentPosition()
+      return {
+        type: 'Identifier',
+        name: identifier,
+        loc: {
+          start,
+          end,
+          source: this.filename,
+        },
+      } as Expression
+    }
+
+    return null
+  }
+
+  /**
+   * Parse a string literal
+   */
+  private parseStringLiteral(start: {
+    line: number
+    column: number
+    offset: number
+  }): LiteralExpression {
+    const quote = this.peek()
+    this.advance() // consume opening quote
+
+    let value = ''
+
+    while (!this.isAtEnd() && this.peek() !== quote) {
+      if (this.peek() === '\\') {
+        this.advance() // consume backslash
+        // Handle escape sequences
+        const escaped = this.peek()
+        switch (escaped) {
+          case 'n':
+            value += '\n'
+            break
+          case 't':
+            value += '\t'
+            break
+          case 'r':
+            value += '\r'
+            break
+          case '\\':
+            value += '\\'
+            break
+          case '"':
+            value += '"'
+            break
+          case "'":
+            value += "'"
+            break
+          default:
+            value += escaped
+            break
+        }
+        this.advance()
+      } else {
+        value += this.peek()
+        this.advance()
+      }
+    }
+
+    if (this.peek() === quote) {
+      this.advance() // consume closing quote
+    }
+
+    const raw = this.code.slice(start.offset, this.position)
+
+    return {
+      type: 'Literal',
+      value,
+      raw,
+      loc: {
+        start,
+        end: this.currentPosition(),
+        source: this.filename,
+      },
+    }
+  }
+
+  /**
+   * Parse a number literal
+   */
+  private parseNumberLiteral(start: {
+    line: number
+    column: number
+    offset: number
+  }): LiteralExpression {
+    let numStr = ''
+
+    while (!this.isAtEnd() && (this.isDigit(this.peek()) || this.peek() === '.')) {
+      numStr += this.peek()
+      this.advance()
+    }
+
+    const value = numStr.includes('.') ? parseFloat(numStr) : parseInt(numStr, 10)
+
+    return {
+      type: 'Literal',
+      value,
+      raw: numStr,
+      loc: {
+        start,
+        end: this.currentPosition(),
+        source: this.filename,
+      },
+    }
+  }
+
+  /**
+   * Parse an identifier (component name, variable name, etc.)
+   */
+  private parseIdentifier(): string | null {
+    if (!this.isAlpha(this.peek()) && this.peek() !== '_') {
+      return null
+    }
+
+    let identifier = ''
+
+    while (!this.isAtEnd() && (this.isAlphaNumeric(this.peek()) || this.peek() === '_')) {
+      identifier += this.peek()
+      this.advance()
+    }
+
+    return identifier
+  }
+
+  /**
+   * Helper methods
+   */
+  private isComponentStart(): boolean {
+    const savedPos = this.position
+    const savedLine = this.line
+    const savedColumn = this.column
+
+    const identifier = this.parseIdentifier()
+    const isComponent = identifier && this.isValidComponentName(identifier)
+
+    // Restore position
+    this.position = savedPos
+    this.line = savedLine
+    this.column = savedColumn
+
+    return !!isComponent
+  }
+
+  private isValidComponentName(name: string): boolean {
+    const components = [
+      'VStack',
+      'HStack',
+      'ZStack',
+      'List',
+      'Form',
+      'Text',
+      'Button',
+      'Image',
+      'TextField',
+      'Toggle',
+    ]
+    return components.includes(name)
+  }
+
+  private skipWhitespace(): void {
+    while (!this.isAtEnd() && this.isWhitespace(this.peek())) {
+      if (this.peek() === '\n') {
+        this.line++
+        this.column = 1
+      } else {
+        this.column++
+      }
+      this.position++
+    }
+  }
+
+  private match(expected: string): boolean {
+    if (this.code.slice(this.position, this.position + expected.length) === expected) {
+      this.position += expected.length
+      this.column += expected.length
+      return true
+    }
+    return false
+  }
+
+  private peek(): string {
+    if (this.isAtEnd()) return '\0'
+    return this.code[this.position]
+  }
+
+  private advance(): string {
+    const char = this.peek()
+    if (!this.isAtEnd()) {
+      this.position++
+      if (char === '\n') {
+        this.line++
+        this.column = 1
+      } else {
+        this.column++
+      }
+    }
+    return char
+  }
+
+  private isAtEnd(): boolean {
+    return this.position >= this.code.length
+  }
+
+  private isWhitespace(char: string): boolean {
+    return /\s/.test(char)
+  }
+
+  private isAlpha(char: string): boolean {
+    return /[a-zA-Z]/.test(char)
+  }
+
+  private isDigit(char: string): boolean {
+    return /[0-9]/.test(char)
+  }
+
+  private isAlphaNumeric(char: string): boolean {
+    return this.isAlpha(char) || this.isDigit(char)
+  }
+
+  private currentPosition() {
+    return {
+      line: this.line,
+      column: this.column,
+      offset: this.position,
+    }
+  }
+}

package/src/compiler/plugin.ts

@@ -0,0 +1,181 @@
+/**
+ * TachUI Vite Plugin
+ *
+ * Custom Vite plugin that transforms SwiftUI-style syntax into reactive DOM code.
+ * This is the core of Phase 2.1.1 - the plugin foundation for compile-time transformation.
+ */
+
+import type { Plugin, TransformResult } from 'vite'
+import { generateDOMCode } from './codegen'
+import { parseSwiftUISyntax } from './parser'
+import type { TachUIPluginOptions } from './types'
+
+/**
+ * Creates the TachUI Vite plugin for transforming SwiftUI syntax
+ */
+export function createTachUIPlugin(options: TachUIPluginOptions = {}): Plugin {
+  const {
+    include = ['.tsx', '.ts'],
+    exclude = ['node_modules/**', '**/*.test.*', '**/*.bench.*'],
+    dev = process.env.NODE_ENV === 'development',
+    transform: transformOptions = {},
+  } = options
+
+  return {
+    name: 'tachui-transform',
+    enforce: 'pre', // Run before other plugins
+
+    configResolved(config) {
+      // Access the resolved Vite config
+      if (dev && config.command === 'serve') {
+        console.log('🚀 TachUI plugin loaded in development mode')
+      }
+    },
+
+    buildStart() {
+      // Plugin initialization
+      this.addWatchFile('tachui.config.ts') // Watch for config changes
+    },
+
+    resolveId(id: string) {
+      // Handle virtual modules if needed
+      if (id === 'virtual:tachui-runtime') {
+        return id
+      }
+      return null
+    },
+
+    load(id: string) {
+      // Load virtual modules
+      if (id === 'virtual:tachui-runtime') {
+        return generateRuntimeCode()
+      }
+      return null
+    },
+
+    transform(code: string, id: string): TransformResult | null {
+      // Only transform files that match our criteria
+      if (!shouldTransform(id, include, exclude)) {
+        return null
+      }
+
+      try {
+        // Check if the file contains TachUI syntax
+        if (!containsTachUISyntax(code)) {
+          return null
+        }
+
+        if (dev) {
+          console.log(`🔄 Transforming: ${id}`)
+        }
+
+        // Parse SwiftUI syntax into AST
+        const ast = parseSwiftUISyntax(code, id)
+
+        // Generate reactive DOM code from AST
+        const transformedCode = generateDOMCode(ast, {
+          ...transformOptions,
+          sourceFile: id,
+          sourceMaps: transformOptions.sourceMaps ?? dev,
+        })
+
+        return {
+          code: transformedCode.code,
+          map: transformedCode.map,
+        }
+      } catch (error) {
+        // Provide helpful error messages during development
+        const message = error instanceof Error ? error.message : String(error)
+        this.error(`TachUI transformation failed in ${id}: ${message}`)
+        return null
+      }
+    },
+
+    handleHotUpdate(ctx) {
+      // Handle HMR for TachUI components
+      if (ctx.file.endsWith('.tui.tsx') || ctx.file.endsWith('.tui.ts')) {
+        // Mark for full reload if needed
+        ctx.server.ws.send({
+          type: 'full-reload',
+        })
+        return []
+      }
+    },
+  }
+}
+
+/**
+ * Determines if a file should be transformed by the plugin
+ */
+function shouldTransform(id: string, include: string[], exclude: string[]): boolean {
+  // Check if file extension is included
+  const hasIncludedExtension = include.some((ext) => id.endsWith(ext))
+  if (!hasIncludedExtension) {
+    return false
+  }
+
+  // Check if file is excluded
+  const isExcluded = exclude.some((pattern) => {
+    // Simple glob pattern matching
+    if (pattern.includes('**')) {
+      const regex = new RegExp(pattern.replace(/\*\*/g, '.*').replace(/\*/g, '[^/]*'))
+      return regex.test(id)
+    }
+    return id.includes(pattern)
+  })
+
+  return !isExcluded
+}
+
+/**
+ * Quick check to see if code contains TachUI syntax patterns
+ */
+function containsTachUISyntax(code: string): boolean {
+  // Look for SwiftUI-style component patterns
+  const tachUIPatterns = [
+    /\b(VStack|HStack|ZStack|List|Form)\s*\{/,
+    /\b(Text|Button|Image|TextField|Toggle)\s*\(/,
+    /\.(padding|background|foregroundColor|font|frame)\s*\(/,
+    /\.onTapGesture\s*\(/,
+  ]
+
+  return tachUIPatterns.some((pattern) => pattern.test(code))
+}
+
+/**
+ * Generates runtime code for virtual modules
+ */
+function generateRuntimeCode(): string {
+  return `
+// TachUI Runtime Module
+// This provides runtime utilities for transformed components
+
+import { createSignal, createEffect, createComputed } from '@tachui/core/reactive'
+
+export { createSignal, createEffect, createComputed }
+
+// Runtime helpers for component lifecycle
+export function mountComponent(element, render) {
+  const dispose = render()
+  element._tachui_dispose = dispose
+  return dispose
+}
+
+export function unmountComponent(element) {
+  if (element._tachui_dispose) {
+    element._tachui_dispose()
+    delete element._tachui_dispose
+  }
+}
+
+// Hot reload support
+if (import.meta.hot) {
+  import.meta.hot.accept()
+  
+  // Re-mount components on hot reload
+  import.meta.hot.dispose(() => {
+    document.querySelectorAll('[data-tachui-component]').forEach(unmountComponent)
+  })
+}
+`
+}