@tachui/core 0.7.0-alpha1

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

@@ -0,0 +1,41 @@
+/**
+ * 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

@@ -0,0 +1,41 @@
+/**
+ * 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

@@ -0,0 +1,68 @@
+/**
+ * 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

@@ -0,0 +1,216 @@
+/**
+ * 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)
+}