@uniweb/build 0.1.4 → 0.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniweb/build",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "Build tooling for the Uniweb Component Web Platform",
   "type": "module",
   "exports": {
@@ -11,7 +11,8 @@
     "./vite-plugin": "./src/vite-foundation-plugin.js",
     "./site": "./src/site/index.js",
     "./dev": "./src/dev/index.js",
-    "./prerender": "./src/prerender.js"
+    "./prerender": "./src/prerender.js",
+    "./i18n": "./src/i18n/index.js"
   },
   "files": [
     "src"
@@ -37,18 +38,21 @@
   "engines": {
     "node": ">=20.19"
   },
+  "devDependencies": {
+    "jest": "^29.7.0"
+  },
   "dependencies": {
     "js-yaml": "^4.1.0",
     "sharp": "^0.33.2"
   },
   "optionalDependencies": {
-    "@uniweb/content-reader": "1.0.2"
+    "@uniweb/content-reader": "1.0.3"
   },
   "peerDependencies": {
     "vite": "^5.0.0 || ^6.0.0 || ^7.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "@uniweb/core": "0.1.2"
+    "@uniweb/core": "0.1.5"
   },
   "peerDependenciesMeta": {
     "vite": {
@@ -63,5 +67,8 @@
     "@uniweb/core": {
       "optional": true
     }
+  },
+  "scripts": {
+    "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js"
   }
 }

package/src/docs.js

@@ -0,0 +1,217 @@
+/**
+ * Documentation Generator
+ *
+ * Generates markdown documentation from foundation schema.json
+ * or directly from component meta files.
+ */
+
+import { readFile, writeFile } from 'node:fs/promises'
+import { existsSync } from 'node:fs'
+import { join } from 'node:path'
+import { buildSchema } from './schema.js'
+
+/**
+ * Generate markdown documentation for a single component
+ *
+ * @param {string} name - Component name
+ * @param {Object} meta - Component metadata
+ * @returns {string} Markdown content
+ */
+function generateComponentDocs(name, meta) {
+  const lines = []
+
+  // Component header
+  lines.push(`## ${name}`)
+  lines.push('')
+
+  // Description
+  if (meta.description) {
+    lines.push(meta.description)
+    lines.push('')
+  }
+
+  // Category badge
+  if (meta.category) {
+    lines.push(`**Category:** ${meta.category}`)
+    lines.push('')
+  }
+
+  // Content Elements
+  if (meta.elements && Object.keys(meta.elements).length > 0) {
+    lines.push('### Content Elements')
+    lines.push('')
+    lines.push('| Element | Label | Required | Description |')
+    lines.push('|---------|-------|----------|-------------|')
+
+    for (const [key, element] of Object.entries(meta.elements)) {
+      const label = element.label || key
+      const required = element.required ? 'Yes' : ''
+      const description = element.description || ''
+      lines.push(`| \`${key}\` | ${label} | ${required} | ${description} |`)
+    }
+    lines.push('')
+  }
+
+  // Parameters/Properties
+  if (meta.properties && Object.keys(meta.properties).length > 0) {
+    lines.push('### Parameters')
+    lines.push('')
+    lines.push('| Parameter | Type | Default | Description |')
+    lines.push('|-----------|------|---------|-------------|')
+
+    for (const [key, prop] of Object.entries(meta.properties)) {
+      const type = prop.type || 'string'
+      const defaultVal = prop.default !== undefined ? `\`${prop.default}\`` : ''
+      let description = prop.label || ''
+
+      // Add options for select type
+      if (prop.type === 'select' && prop.options) {
+        const optionValues = prop.options.map(o =>
+          typeof o === 'object' ? o.value : o
+        ).join(', ')
+        description += description ? ` (${optionValues})` : optionValues
+      }
+
+      lines.push(`| \`${key}\` | ${type} | ${defaultVal} | ${description} |`)
+    }
+    lines.push('')
+  }
+
+  // Presets
+  if (meta.presets && meta.presets.length > 0) {
+    lines.push('### Presets')
+    lines.push('')
+
+    for (const preset of meta.presets) {
+      const settings = preset.settings
+        ? Object.entries(preset.settings)
+            .map(([k, v]) => `${k}: ${v}`)
+            .join(', ')
+        : ''
+      lines.push(`- **${preset.name}** - ${preset.label || ''} ${settings ? `(${settings})` : ''}`)
+    }
+    lines.push('')
+  }
+
+  return lines.join('\n')
+}
+
+/**
+ * Generate full markdown documentation for a foundation
+ *
+ * @param {Object} schema - Foundation schema object
+ * @param {Object} options - Generation options
+ * @param {string} [options.title] - Document title
+ * @returns {string} Complete markdown documentation
+ */
+export function generateDocsFromSchema(schema, options = {}) {
+  const { title = 'Foundation Components' } = options
+  const lines = []
+
+  // Header
+  lines.push(`# ${title}`)
+  lines.push('')
+
+  // Foundation info
+  const foundationMeta = schema._self
+  if (foundationMeta) {
+    if (foundationMeta.name) {
+      lines.push(`**${foundationMeta.name}**`)
+      lines.push('')
+    }
+    if (foundationMeta.description) {
+      lines.push(foundationMeta.description)
+      lines.push('')
+    }
+  }
+
+  lines.push('---')
+  lines.push('')
+
+  // Table of contents
+  const componentNames = Object.keys(schema).filter(k => k !== '_self')
+
+  if (componentNames.length > 0) {
+    lines.push('## Components')
+    lines.push('')
+    for (const name of componentNames) {
+      const meta = schema[name]
+      const title = meta.title || name
+      lines.push(`- [${title}](#${name.toLowerCase()}) - ${meta.description || ''}`)
+    }
+    lines.push('')
+    lines.push('---')
+    lines.push('')
+  }
+
+  // Component documentation
+  for (const name of componentNames) {
+    const meta = schema[name]
+    lines.push(generateComponentDocs(name, meta))
+    lines.push('---')
+    lines.push('')
+  }
+
+  // Footer
+  lines.push('*Generated from foundation schema*')
+
+  return lines.join('\n')
+}
+
+/**
+ * Generate documentation for a foundation directory
+ *
+ * Can read from existing schema.json or build schema from source.
+ *
+ * @param {string} foundationDir - Path to foundation directory
+ * @param {Object} options - Options
+ * @param {string} [options.output] - Output file path (default: COMPONENTS.md)
+ * @param {boolean} [options.fromSource] - Build schema from source instead of dist
+ * @returns {Promise<{outputPath: string, componentCount: number}>}
+ */
+export async function generateDocs(foundationDir, options = {}) {
+  const {
+    output = 'COMPONENTS.md',
+    fromSource = false,
+  } = options
+
+  let schema
+
+  // Try to load schema.json from dist
+  const schemaPath = join(foundationDir, 'dist', 'schema.json')
+
+  if (!fromSource && existsSync(schemaPath)) {
+    // Load from existing schema.json
+    const schemaContent = await readFile(schemaPath, 'utf-8')
+    schema = JSON.parse(schemaContent)
+  } else {
+    // Build schema from source
+    const srcDir = join(foundationDir, 'src')
+    if (!existsSync(srcDir)) {
+      throw new Error(`Source directory not found: ${srcDir}`)
+    }
+    schema = await buildSchema(srcDir)
+  }
+
+  // Get foundation name for title
+  const pkgPath = join(foundationDir, 'package.json')
+  let title = 'Foundation Components'
+  if (existsSync(pkgPath)) {
+    const pkg = JSON.parse(await readFile(pkgPath, 'utf-8'))
+    if (pkg.name) {
+      title = `${pkg.name} Components`
+    }
+  }
+
+  // Generate markdown
+  const markdown = generateDocsFromSchema(schema, { title })
+
+  // Write output
+  const outputPath = join(foundationDir, output)
+  await writeFile(outputPath, markdown)
+
+  // Count components
+  const componentCount = Object.keys(schema).filter(k => k !== '_self').length
+
+  return { outputPath, componentCount }
+}

package/src/generate-entry.js

@@ -14,11 +14,31 @@ import {
   extractRuntimeConfig,
 } from './schema.js'
 
+/**
+ * Detect site configuration file (for custom Layout, etc.)
+ * Looks for: src/site.js, src/site.jsx, src/site/index.js, src/site/index.jsx
+ */
+function detectSiteConfig(srcDir) {
+  const candidates = [
+    { path: 'site.js', ext: 'js' },
+    { path: 'site.jsx', ext: 'jsx' },
+    { path: 'site/index.js', ext: 'js' },
+    { path: 'site/index.jsx', ext: 'jsx' },
+  ]
+
+  for (const { path, ext } of candidates) {
+    if (existsSync(join(srcDir, path))) {
+      return { path: `./${path.replace(/\/index\.(js|jsx)$/, '')}`, ext }
+    }
+  }
+  return null
+}
+
 /**
  * Generate the entry point source code
  */
 function generateEntrySource(componentNames, runtimeConfig, options = {}) {
-  const { includeCss = true, cssPath = './index.css', componentExtensions = {} } = options
+  const { includeCss = true, cssPath = './index.css', componentExtensions = {}, siteConfig = null } = options
 
   const imports = []
   const exports = []
@@ -28,6 +48,11 @@ function generateEntrySource(componentNames, runtimeConfig, options = {}) {
     imports.push(`import '${cssPath}'`)
   }
 
+  // Site config import (for custom Layout, etc.)
+  if (siteConfig) {
+    imports.push(`import { site } from '${siteConfig.path}'`)
+  }
+
   // Component imports (use detected extension or default to .js)
   for (const name of componentNames) {
     const ext = componentExtensions[name] || 'js'
@@ -105,6 +130,11 @@ export function getSchema(name) {
     ? `\n// Named exports for direct imports\nexport { ${componentNames.join(', ')} }`
     : ''
 
+  // Site config export (for custom Layout, etc.)
+  const siteExport = siteConfig
+    ? `\n// Site configuration (Layout, etc.)\nexport { site }`
+    : `\n// No site configuration provided\nexport const site = null`
+
   return `// Auto-generated foundation entry point
 // DO NOT EDIT - This file is regenerated during build
 
@@ -114,6 +144,7 @@ ${componentsObj}
 ${runtimeConfigBlock}
 ${exportFunctions}
 ${namedExports}
+${siteExport}
 `
 }
 
@@ -166,10 +197,14 @@ export async function generateEntryPoint(srcDir, outputPath = null) {
   // Check if CSS exists
   const cssExists = existsSync(join(srcDir, 'index.css'))
 
+  // Check for site config (custom Layout, etc.)
+  const siteConfig = detectSiteConfig(srcDir)
+
   // Generate source
   const source = generateEntrySource(componentNames, runtimeConfig, {
     includeCss: cssExists,
     componentExtensions,
+    siteConfig,
   })
 
   // Write to file
@@ -179,11 +214,15 @@ export async function generateEntryPoint(srcDir, outputPath = null) {
 
   console.log(`Generated entry point: ${output}`)
   console.log(`  - ${componentNames.length} components: ${componentNames.join(', ')}`)
+  if (siteConfig) {
+    console.log(`  - Site config found: ${siteConfig.path}`)
+  }
 
   return {
     outputPath: output,
     componentNames,
     runtimeConfig,
+    siteConfig,
   }
 }
 

package/src/i18n/extract.js

@@ -0,0 +1,259 @@
+/**
+ * Extract translatable content from site-content.json
+ *
+ * Walks through all pages and sections, extracting translatable
+ * strings and building a manifest of translation units.
+ */
+
+import { computeHash } from './hash.js'
+
+/**
+ * Extract all translatable units from site content
+ * @param {Object} siteContent - Parsed site-content.json
+ * @returns {Object} Manifest with translation units
+ */
+export function extractTranslatableContent(siteContent) {
+  const units = {}
+
+  for (const page of siteContent.pages || []) {
+    const pageRoute = page.route || '/'
+
+    // Extract page metadata (title, description, keywords from page.yml)
+    extractFromPageMeta(page, pageRoute, units)
+
+    // Extract section content
+    for (const section of page.sections || []) {
+      extractFromSection(section, pageRoute, units)
+    }
+  }
+
+  return {
+    version: '1.0',
+    defaultLocale: siteContent.config?.defaultLanguage || 'en',
+    extracted: new Date().toISOString(),
+    units
+  }
+}
+
+/**
+ * Extract translatable page metadata
+ * @param {Object} page - Page data
+ * @param {string} pageRoute - Page route
+ * @param {Object} units - Units accumulator
+ */
+function extractFromPageMeta(page, pageRoute, units) {
+  // Use special section identifier for page-level metadata
+  const context = { page: pageRoute, section: '_meta' }
+
+  // Page title
+  if (page.title && typeof page.title === 'string') {
+    addUnit(units, page.title, 'page.title', context)
+  }
+
+  // Page description
+  if (page.description && typeof page.description === 'string') {
+    addUnit(units, page.description, 'page.description', context)
+  }
+
+  // SEO-specific fields (if present)
+  if (page.seo) {
+    // og:title, og:description might be different from page title/description
+    if (page.seo.ogTitle && typeof page.seo.ogTitle === 'string') {
+      addUnit(units, page.seo.ogTitle, 'page.seo.ogTitle', context)
+    }
+    if (page.seo.ogDescription && typeof page.seo.ogDescription === 'string') {
+      addUnit(units, page.seo.ogDescription, 'page.seo.ogDescription', context)
+    }
+  }
+
+  // Keywords (if array, join for translation context)
+  if (page.keywords) {
+    if (Array.isArray(page.keywords)) {
+      // Each keyword as separate unit for flexibility
+      page.keywords.forEach((keyword, index) => {
+        if (keyword && typeof keyword === 'string') {
+          addUnit(units, keyword, `page.keyword.${index}`, context)
+        }
+      })
+    } else if (typeof page.keywords === 'string') {
+      addUnit(units, page.keywords, 'page.keywords', context)
+    }
+  }
+}
+
+/**
+ * Extract translatable content from a section
+ * @param {Object} section - Section data
+ * @param {string} pageRoute - Parent page route
+ * @param {Object} units - Units accumulator
+ */
+function extractFromSection(section, pageRoute, units) {
+  const sectionId = section.id || 'unknown'
+  const context = { page: pageRoute, section: sectionId }
+
+  // Extract from parsed semantic content if available
+  // The section.content is ProseMirror doc, but we need parsed content
+  // For now, we'll extract from the raw ProseMirror structure
+  // In practice, this should use semantic-parser output
+
+  if (section.content?.type === 'doc') {
+    extractFromProseMirrorDoc(section.content, context, units)
+  }
+
+  // Recursively process subsections
+  for (const subsection of section.subsections || []) {
+    extractFromSection(subsection, pageRoute, units)
+  }
+}
+
+/**
+ * Extract translatable strings from ProseMirror document
+ * @param {Object} doc - ProseMirror document
+ * @param {Object} context - Current context (page, section)
+ * @param {Object} units - Units accumulator
+ */
+function extractFromProseMirrorDoc(doc, context, units) {
+  if (!doc.content) return
+
+  let headingIndex = { h1: 0, h2: 0, h3: 0, h4: 0 }
+  let paragraphIndex = 0
+  let linkIndex = 0
+
+  for (const node of doc.content) {
+    if (node.type === 'heading') {
+      const text = extractTextFromNode(node)
+      if (!text) continue
+
+      const level = node.attrs?.level || 1
+      const field = getHeadingField(level, headingIndex)
+      headingIndex[`h${level}`]++
+
+      addUnit(units, text, field, context)
+    } else if (node.type === 'paragraph') {
+      const result = extractFromParagraph(node, context, units, linkIndex)
+      linkIndex = result.linkIndex
+
+      // Add paragraph text if it's substantial (not just links/buttons)
+      const plainText = extractPlainTextFromParagraph(node)
+      if (plainText && plainText.length > 0) {
+        const field = paragraphIndex === 0 ? 'paragraph' : `paragraph.${paragraphIndex}`
+        addUnit(units, plainText, field, context)
+        paragraphIndex++
+      }
+    } else if (node.type === 'bulletList' || node.type === 'orderedList') {
+      extractFromList(node, context, units)
+    }
+  }
+}
+
+/**
+ * Determine field name for heading based on level and index
+ */
+function getHeadingField(level, index) {
+  // First H1 is title, first H2 is subtitle, H3 before H1 could be pretitle
+  // This is simplified - semantic-parser does this more intelligently
+  if (level === 1) return index.h1 === 0 ? 'title' : `heading.${index.h1}`
+  if (level === 2) return index.h2 === 0 ? 'subtitle' : `heading.h2.${index.h2}`
+  if (level === 3) return `heading.h3.${index.h3}`
+  return `heading.h${level}.${index[`h${level}`]}`
+}
+
+/**
+ * Extract from paragraph node, handling links specially
+ */
+function extractFromParagraph(node, context, units, linkIndex) {
+  if (!node.content) return { linkIndex }
+
+  for (const child of node.content) {
+    if (child.type === 'text' && child.marks) {
+      const linkMark = child.marks.find(m => m.type === 'link')
+      if (linkMark && child.text) {
+        const field = linkIndex === 0 ? 'link.label' : `link.${linkIndex}.label`
+        addUnit(units, child.text, field, context)
+        linkIndex++
+      }
+    }
+  }
+
+  return { linkIndex }
+}
+
+/**
+ * Extract plain text from paragraph, excluding link text
+ */
+function extractPlainTextFromParagraph(node) {
+  if (!node.content) return ''
+
+  const parts = []
+  for (const child of node.content) {
+    if (child.type === 'text') {
+      // Skip if it's a link
+      const isLink = child.marks?.some(m => m.type === 'link')
+      if (!isLink && child.text && child.text.trim()) {
+        parts.push(child.text)
+      }
+    }
+  }
+
+  return parts.join('').trim()
+}
+
+/**
+ * Extract from list items
+ */
+function extractFromList(listNode, context, units) {
+  if (!listNode.content) return
+
+  listNode.content.forEach((listItem, index) => {
+    if (listItem.type === 'listItem' && listItem.content) {
+      for (const child of listItem.content) {
+        if (child.type === 'paragraph') {
+          const text = extractTextFromNode(child)
+          if (text) {
+            addUnit(units, text, `list.${index}`, context)
+          }
+        }
+      }
+    }
+  })
+}
+
+/**
+ * Extract all text content from a node
+ */
+function extractTextFromNode(node) {
+  if (!node.content) return ''
+  return node.content
+    .filter(n => n.type === 'text')
+    .map(n => n.text || '')
+    .join('')
+    .trim()
+}
+
+/**
+ * Add a translation unit to the accumulator
+ */
+function addUnit(units, source, field, context) {
+  if (!source || source.length === 0) return
+
+  const hash = computeHash(source)
+
+  if (units[hash]) {
+    // Unit exists - add context if not already present
+    const existingContexts = units[hash].contexts
+    const contextKey = `${context.page}:${context.section}`
+    const exists = existingContexts.some(
+      c => `${c.page}:${c.section}` === contextKey
+    )
+    if (!exists) {
+      existingContexts.push({ ...context })
+    }
+  } else {
+    // New unit
+    units[hash] = {
+      source,
+      field,
+      contexts: [{ ...context }]
+    }
+  }
+}

package/src/i18n/hash.js

@@ -0,0 +1,30 @@
+/**
+ * Hash utilities for i18n translation units
+ */
+
+import { createHash } from 'crypto'
+
+/**
+ * Compute an 8-character hash for translation unit identification
+ * @param {string} text - Source text to hash
+ * @returns {string} 8-character hex hash
+ */
+export function computeHash(text) {
+  const normalized = normalizeText(text)
+  return createHash('sha256')
+    .update(normalized)
+    .digest('hex')
+    .slice(0, 8)
+}
+
+/**
+ * Normalize text for consistent hashing
+ * - Trim whitespace
+ * - Normalize internal whitespace to single spaces
+ * @param {string} text
+ * @returns {string}
+ */
+export function normalizeText(text) {
+  if (typeof text !== 'string') return ''
+  return text.trim().replace(/\s+/g, ' ')
+}