@tachui/core 0.7.0-alpha1 → 0.8.0-alpha

package/src/modifiers/__tests__/margin-string-support.test.ts

@@ -1,41 +0,0 @@
-/**
- * Test string support in margin modifier
- */
-
-import { describe, expect, it } from 'vitest'
-import { margin, marginHorizontal, marginVertical, marginTop, marginBottom } from '../margin'
-
-describe('Margin Modifier - String Value Support', () => {
-  it('should accept string values for horizontal/vertical', () => {
-    const modifier = margin({ horizontal: 'auto', vertical: 30 })
-    expect(modifier).toBeDefined()
-    expect(modifier.type).toBe('margin')
-  })
-
-  it('should accept auto for all sides', () => {
-    const modifier = margin({ all: 'auto' })
-    expect(modifier).toBeDefined()
-  })
-
-  it('should accept mixed string and number values', () => {
-    const modifier = margin({
-      top: 10,
-      bottom: 20,
-      left: 'auto',
-      right: 'auto'
-    })
-    expect(modifier).toBeDefined()
-  })
-
-  it('should support convenience functions with strings', () => {
-    expect(marginHorizontal('auto')).toBeDefined()
-    expect(marginVertical('2rem')).toBeDefined()
-    expect(marginTop('1em')).toBeDefined()
-    expect(marginBottom('50%')).toBeDefined()
-  })
-
-  it('should support margin shorthand function with string', () => {
-    expect(margin('auto')).toBeDefined()
-    expect(margin('1rem')).toBeDefined()
-  })
-})

package/src/modifiers/__tests__/padding-string-support.test.ts

@@ -1,41 +0,0 @@
-/**
- * Test string support in padding modifier
- */
-
-import { describe, expect, it } from 'vitest'
-import { padding, paddingHorizontal, paddingVertical, paddingTop, paddingBottom } from '../padding'
-
-describe('Padding Modifier - String Value Support', () => {
-  it('should accept string values for horizontal/vertical', () => {
-    const modifier = padding({ horizontal: '2rem', vertical: 30 })
-    expect(modifier).toBeDefined()
-    expect(modifier.type).toBe('padding')
-  })
-
-  it('should accept string for all sides', () => {
-    const modifier = padding({ all: '1rem' })
-    expect(modifier).toBeDefined()
-  })
-
-  it('should accept mixed string and number values', () => {
-    const modifier = padding({
-      top: 10,
-      bottom: 20,
-      left: '1rem',
-      right: '2rem'
-    })
-    expect(modifier).toBeDefined()
-  })
-
-  it('should support convenience functions with strings', () => {
-    expect(paddingHorizontal('2rem')).toBeDefined()
-    expect(paddingVertical('1em')).toBeDefined()
-    expect(paddingTop('10px')).toBeDefined()
-    expect(paddingBottom('50%')).toBeDefined()
-  })
-
-  it('should support padding shorthand function with string', () => {
-    expect(padding('1rem')).toBeDefined()
-    expect(padding('10px')).toBeDefined()
-  })
-})

package/src/modifiers/as-html-validator.ts

@@ -1,68 +0,0 @@
-/**
- * Development-time validator for AsHTML content
- * Provides warnings about potentially dangerous content patterns
- */
-
-export class AsHTMLValidator {
-  private static readonly SUSPICIOUS_PATTERNS = [
-    { pattern: /<script/i, message: 'Script tags detected' },
-    { pattern: /javascript:/i, message: 'JavaScript URLs detected' },
-    { pattern: /on\w+\s*=/i, message: 'Event handlers detected' },
-    { pattern: /<iframe/i, message: 'Iframe elements detected' },
-    { pattern: /<object/i, message: 'Object elements detected' },
-    { pattern: /<embed/i, message: 'Embed elements detected' },
-    { pattern: /<form/i, message: 'Form elements detected' },
-    { pattern: /data:.*script/i, message: 'Data URLs with scripts detected' },
-    { pattern: /@import/i, message: 'CSS import statements detected' },
-    { pattern: /expression\s*\(/i, message: 'CSS expressions detected' }
-  ]
-
-  /**
-   * Validate HTML content in development mode
-   */
-  static validate(html: string, options: ValidationOptions = {}): ValidationResult {
-    if (options.suppressWarnings) {
-      return { isValid: true, warnings: [] }
-    }
-
-    const warnings: string[] = []
-    
-    for (const { pattern, message } of this.SUSPICIOUS_PATTERNS) {
-      if (pattern.test(html)) {
-        warnings.push(message)
-      }
-    }
-
-    // Check for user input patterns
-    if (this.looksLikeUserInput(html)) {
-      warnings.push('Content appears to contain user input - ensure it\'s properly sanitized')
-    }
-
-    return {
-      isValid: warnings.length === 0,
-      warnings
-    }
-  }
-
-  private static looksLikeUserInput(html: string): boolean {
-    // Heuristics to detect potential user input
-    const userInputIndicators = [
-      /&lt;script/i,  // HTML-encoded script tags
-      /&amp;#/,        // HTML entities that might be user input
-      /%3Cscript/i,    // URL-encoded script tags
-      /\{\{.*\}\}/,    // Template syntax
-      /\$\{.*\}/       // ES6 template literals
-    ]
-
-    return userInputIndicators.some(pattern => pattern.test(html))
-  }
-}
-
-export interface ValidationOptions {
-  suppressWarnings?: boolean
-}
-
-export interface ValidationResult {
-  isValid: boolean
-  warnings: string[]
-}

package/src/modifiers/as-html.ts

@@ -1,216 +0,0 @@
-/**
- * AsHTML Modifier - Renders Text component content as HTML
- * 
- * Security-first design with:
- * - Text component restriction only
- * - Built-in basic sanitization by default
- * - Non-reactive for performance
- * - Clear error messages for misuse
- */
-
-import { BaseModifier } from './base'
-import type { DOMNode, ComponentInstance } from '../runtime/types'
-import type { ModifierContext } from './types'
-import { BasicSanitizer, type BasicSanitizerOptions } from './basic-sanitizer'
-import { AsHTMLValidator } from './as-html-validator'
-
-export interface AsHTMLOptions extends BasicSanitizerOptions {
-  /** Skip basic sanitization (use with extreme caution) */
-  skipSanitizer?: boolean
-  /** Custom sanitization function */
-  customSanitizer?: (html: string) => string
-  /** Development-only validation */
-  __devModeValidate?: boolean
-  /** Suppress development warnings */
-  __suppressWarnings?: boolean
-}
-
-/**
- * Text component interface for type safety
- */
-export interface TextComponent extends ComponentInstance {
-  readonly __tachui_component_type: 'Text'
-  content: string
-}
-
-export class AsHTMLModifier extends BaseModifier<AsHTMLOptions> {
-  readonly type = 'asHTML'
-  readonly priority = 25 // After layout, before styling
-
-  constructor(options: AsHTMLOptions = {}) {
-    super(options)
-  }
-
-  apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined {
-    if (!context.element || !context.componentInstance) return
-
-    // Security check: Only allow Text components
-    const component = context.componentInstance
-    if (!this.isTextComponent(component)) {
-      throw new Error(
-        `AsHTML modifier can only be applied to Text components. ` +
-        `Found: ${component.type || 'unknown'} component. ` +
-        `Use Text('<your-html>').modifier.asHTML() instead.`
-      )
-    }
-
-    // Get the content from the Text component
-    const htmlContent = this.getTextComponentContent(component)
-    
-    if (!htmlContent) {
-      if (process.env.NODE_ENV === 'development') {
-        console.warn('asHTML: No content found in Text component')
-      }
-      return undefined
-    }
-
-    // Process and apply HTML content (non-reactive for performance)
-    const processedHTML = this.sanitizeHTML(htmlContent)
-    
-    // Clear all existing child nodes first
-    while (context.element.firstChild) {
-      context.element.removeChild(context.element.firstChild)
-    }
-    
-    // Set HTML content
-    context.element.innerHTML = processedHTML
-    
-    // Mark element to prevent text() function from overwriting innerHTML
-    ;(context.element as any).__tachui_asHTML = true
-
-    // Perform validation after processing (development only)
-    if (process.env.NODE_ENV === 'development') {
-      this.validateContent(htmlContent) // Validate original content, not processed
-    }
-
-    return undefined
-  }
-
-  private isTextComponent(component: any): boolean {
-    // Check if component is a Text component
-    // Multiple checks for different ways Text components might be identified
-    return component.type === 'Text' || 
-           component.constructor?.name === 'TextComponent' ||
-           component.__tachui_component_type === 'Text' ||
-           (component.props && component.props.__componentType === 'Text') ||
-           // Check componentMetadata for enhanced Text components
-           (component.componentMetadata && component.componentMetadata.type === 'Text') ||
-           (component.componentMetadata && component.componentMetadata.originalType === 'Text')
-  }
-
-  private getTextComponentContent(component: any): string {
-    // Extract content from Text component
-    // Text components should have their content in a predictable location
-    
-    // Primary: Direct content property
-    if (typeof component.content === 'string') {
-      return component.content
-    }
-    
-    // Secondary: Props content
-    if (component.props && typeof component.props.content === 'string') {
-      return component.props.content
-    }
-    
-    // Tertiary: Check children array for text nodes (for enhanced Text components)
-    if (component.children && Array.isArray(component.children) && component.children.length > 0) {
-      const firstChild = component.children[0]
-      if (firstChild && firstChild.type === 'text' && typeof firstChild.text === 'string') {
-        return firstChild.text
-      }
-    }
-    
-    // Quaternary: Text property
-    if (typeof component.text === 'string') {
-      return component.text
-    }
-    
-    // Fifth: Check props for common text properties
-    if (component.props) {
-      if (typeof component.props.text === 'string') {
-        return component.props.text
-      }
-      if (typeof component.props.children === 'string') {
-        return component.props.children
-      }
-    }
-
-    // Fallback: Check for direct string (in case of simple Text usage)
-    if (typeof component === 'string') {
-      return component
-    }
-
-    return ''
-  }
-
-  private sanitizeHTML(html: string): string {
-    if (!html || typeof html !== 'string') {
-      return ''
-    }
-
-    // Skip sanitization if explicitly requested
-    if (this.properties.skipSanitizer) {
-      return html
-    }
-
-    // Use custom sanitizer if provided
-    if (this.properties.customSanitizer) {
-      return this.properties.customSanitizer(html)
-    }
-
-    // Apply basic sanitization
-    return BasicSanitizer.sanitize(html, this.properties)
-  }
-
-  private validateContent(html: string): void {
-    if (this.properties.__suppressWarnings) return
-
-    // Validate content
-    const validationResult = AsHTMLValidator.validate(html, {
-      suppressWarnings: this.properties.__suppressWarnings
-    })
-
-    if (!validationResult.isValid && validationResult.warnings.length > 0) {
-      console.group('🔒 AsHTML Security Warnings')
-      console.warn('Potentially dangerous content detected in asHTML:')
-      validationResult.warnings.forEach(warning => {
-        console.warn(`  • ${warning}`)
-      })
-      console.warn('Consider using a more comprehensive sanitization solution like DOMPurify')
-      console.warn('To suppress these warnings, use { __suppressWarnings: true }')
-      console.groupEnd()
-    }
-
-    // Warn about skipped sanitization
-    if (this.properties.skipSanitizer) {
-      console.warn('🚨 AsHTML: Sanitization is DISABLED. Ensure content is safe!')
-    }
-  }
-}
-
-/**
- * Create an asHTML modifier for rendering HTML content
- * 
- * By default, applies basic sanitization to remove common XSS vectors.
- * Use { skipSanitizer: true } to bypass sanitization (dangerous).
- * 
- * The modifier treats the component's content as HTML instead of plain text.
- * SECURITY: Only works on Text components.
- * 
- * @param options - Configuration options
- * 
- * @example
- * ```typescript
- * // Safe: Basic sanitization applied
- * Text('<p>Hello <strong>world</strong></p>').modifier.asHTML().build()
- * 
- * // Dangerous: Skip sanitization
- * Text(serverTemplate).modifier.asHTML({ skipSanitizer: true }).build()
- * 
- * // Custom sanitization
- * Text(content).modifier.asHTML({ customSanitizer: DOMPurify.sanitize }).build()
- * ```
- */
-export function asHTML(options: AsHTMLOptions = {}): AsHTMLModifier {
-  return new AsHTMLModifier(options)
-}