Processing Architecture

Overview

This document details how nuxt-smartscript processes text and transforms it into properly formatted typography. The processing pipeline is identical for both client and server, ensuring consistent results.

The Processing Pipeline

Detailed Processing Steps

Step 1: Element Selection and Exclusion

Exclusion Zones:

• <pre> - Code blocks
• <code> - Inline code
• <script> - JavaScript
• <style> - CSS
• [data-no-superscript] - Explicit opt-out
• .no-superscript - Class-based opt-out

Step 2: Text Node Discovery

// TreeWalker configuration
const walker = document.createTreeWalker(
  element,
  NodeFilter.SHOW_TEXT,
  {
    acceptNode(node) {
      // Skip empty nodes
      if (!node.textContent?.trim()) {
        return NodeFilter.FILTER_REJECT
      }
      
      // Skip if parent is already transformed
      if (parent.classList.contains('ss-tm')) {
        return NodeFilter.FILTER_REJECT
      }
      
      // Skip if in exclusion zone
      if (shouldExclude(node)) {
        return NodeFilter.FILTER_REJECT
      }
      
      return NodeFilter.FILTER_ACCEPT
    }
  }
)

Step 3: Pattern Matching

Pattern Priority Order:

1. Symbols (™, ®, ©) - Highest priority
2. Ordinals (1st, 2nd) - Common in text
3. Chemicals (H2O, CO2) - Scientific notation
4. Math superscript (x^2) - Mathematical
5. Math subscript (x_n) - Lowest priority

Step 4: Text Processing

TextPart Structure:

interface TextPart {
  content: string      // The text content
  type: 'text' | 'super' | 'sub'
  subtype?: 'trademark' | 'registered' | 'ordinal' | 'chemical' | 'math'
  originalLength: number  // For tracking position
}

Step 5: Element Creation

Element Types:

• SPAN - For positioned symbols (™, ®)

  • Allows position: relative for fine control
  • Used for trademark and registered marks

• SUP - For semantic superscripts

  • Ordinals (1st, 2nd)
  • Math superscripts (x²)

• SUB - For semantic subscripts

  • Chemical formulas (H₂O)
  • Math subscripts (xₙ)

Step 6: DOM Replacement

Pattern Details

Symbol Patterns

Chemical Patterns

Math Notation Patterns

Performance Optimizations

Batch Processing

Pattern Caching

Early Exit Strategies

Debugging and Logging

Error Recovery

Integration Points

Client-Side Integration

// Vue integration
app.config.globalProperties.$smartscript = {
  process: (element) => engine.processElement(element),
  refresh: () => engine.processAll(),
  disable: () => engine.stop(),
  enable: () => engine.start()
}

Server-Side Integration

// Nitro hook integration
nitro.hooks.hook('render:html', (html, { event }) => {
  const config = event.context.$config.public.smartscript
  const processed = processWithJsdom(html, config)
  return processed
})

Configuration Integration

// Runtime config merge
const finalConfig = {
  ...defaultConfig,
  ...userConfig,
  transformations: {
    ...defaultConfig.transformations,
    ...userConfig.transformations
  }
}