@uniweb/runtime 0.1.0

package/src/core/website.js

@@ -0,0 +1,157 @@
+/**
+ * Website
+ *
+ * Manages pages, themes, and localization for a website instance.
+ */
+
+import Page from './page.js'
+
+export default class Website {
+  constructor(websiteData) {
+    const { pages = [], theme = {}, config = {} } = websiteData
+
+    // Extract special pages (header, footer) and regular pages
+    this.headerPage = pages.find((p) => p.route === '/@header')
+    this.footerPage = pages.find((p) => p.route === '/@footer')
+
+    this.pages = pages
+      .filter((page) => page.route !== '/@header' && page.route !== '/@footer')
+      .map(
+        (page, index) =>
+          new Page(page, index, this.headerPage, this.footerPage)
+      )
+
+    this.activePage =
+      this.pages.find((page) => page.route === '/' || page.route === '/index') ||
+      this.pages[0]
+
+    this.pageRoutes = this.pages.map((page) => page.route)
+    this.themeData = theme
+    this.config = config
+    this.activeLang = config.defaultLanguage || 'en'
+    this.langs = config.languages || [
+      { label: 'English', value: 'en' },
+      { label: 'français', value: 'fr' }
+    ]
+  }
+
+  /**
+   * Get page by route
+   * @param {string} route
+   * @returns {Page|undefined}
+   */
+  getPage(route) {
+    return this.pages.find((page) => page.route === route)
+  }
+
+  /**
+   * Set active page by route
+   * @param {string} route
+   */
+  setActivePage(route) {
+    const page = this.getPage(route)
+    if (page) {
+      this.activePage = page
+    }
+  }
+
+  /**
+   * Get remote layout component from foundation config
+   */
+  getRemoteLayout() {
+    return globalThis.uniweb?.foundationConfig?.Layout || null
+  }
+
+  /**
+   * Get remote props from foundation config
+   */
+  getRemoteProps() {
+    return globalThis.uniweb?.foundationConfig?.props || null
+  }
+
+  /**
+   * Get routing components (Link, useNavigate, etc.)
+   */
+  getRoutingComponents() {
+    return globalThis.uniweb?.routingComponents || {}
+  }
+
+  /**
+   * Make href (for link transformation)
+   * @param {string} href
+   * @returns {string}
+   */
+  makeHref(href) {
+    // Could add basename handling here
+    return href
+  }
+
+  /**
+   * Get available languages
+   */
+  getLanguages() {
+    return this.langs
+  }
+
+  /**
+   * Get current language
+   */
+  getLanguage() {
+    return this.activeLang
+  }
+
+  /**
+   * Localize a value
+   * @param {any} val - Value to localize (object with lang keys, or string)
+   * @param {string} defaultVal - Default value if not found
+   * @param {string} givenLang - Override language
+   * @param {boolean} fallbackDefaultLangVal - Fall back to default language
+   * @returns {string}
+   */
+  localize(val, defaultVal = '', givenLang = '', fallbackDefaultLangVal = false) {
+    const lang = givenLang || this.activeLang
+    const defaultLang = this.langs[0]?.value || 'en'
+
+    if (typeof val === 'object' && !Array.isArray(val)) {
+      return fallbackDefaultLangVal
+        ? val?.[lang] || val?.[defaultLang] || defaultVal
+        : val?.[lang] || defaultVal
+    }
+
+    if (typeof val === 'string') {
+      if (!val.startsWith('{') && !val.startsWith('"')) return val
+
+      try {
+        const obj = JSON.parse(val)
+        if (typeof obj === 'object') {
+          return fallbackDefaultLangVal
+            ? obj?.[lang] || obj?.[defaultLang] || defaultVal
+            : obj?.[lang] || defaultVal
+        }
+        return obj
+      } catch {
+        return val
+      }
+    }
+
+    return defaultVal
+  }
+
+  /**
+   * Get search data for all pages
+   */
+  getSearchData() {
+    return this.pages.map((page) => ({
+      id: page.id,
+      title: page.title,
+      href: page.route,
+      route: page.route,
+      description: page.description,
+      content: page
+        .getPageBlocks()
+        .map((b) => b.title)
+        .filter(Boolean)
+        .join('\n')
+    }))
+  }
+}

package/src/index.js

@@ -0,0 +1,245 @@
+/**
+ * @uniweb/runtime - Main Entry Point
+ *
+ * This is the Vite/ESM-based runtime that loads foundations via dynamic import()
+ * instead of Webpack Module Federation.
+ */
+
+import React from 'react'
+import { createRoot } from 'react-dom/client'
+import { BrowserRouter, Routes, Route, useParams, useLocation, useNavigate } from 'react-router-dom'
+
+// Components
+import { ChildBlocks } from './components/PageRenderer.jsx'
+import Link from './components/Link.jsx'
+import SafeHtml from './components/SafeHtml.jsx'
+import WebsiteRenderer from './components/WebsiteRenderer.jsx'
+import ErrorBoundary from './components/ErrorBoundary.jsx'
+
+// Core
+import Uniweb from './core/uniweb.js'
+
+/**
+ * Load foundation CSS from URL
+ * @param {string} url - URL to foundation's CSS file
+ */
+async function loadFoundationCSS(url) {
+  if (!url) return
+
+  return new Promise((resolve) => {
+    const link = document.createElement('link')
+    link.rel = 'stylesheet'
+    link.href = url
+    link.onload = () => {
+      console.log('[Runtime] Foundation CSS loaded')
+      resolve()
+    }
+    link.onerror = () => {
+      console.warn('[Runtime] Could not load foundation CSS from:', url)
+      resolve() // Don't fail for CSS
+    }
+    document.head.appendChild(link)
+  })
+}
+
+/**
+ * Load a foundation module via dynamic import
+ * @param {string|Object} source - URL string or {url, cssUrl} object
+ * @returns {Promise<Object>} The loaded foundation module
+ */
+async function loadFoundation(source) {
+  const url = typeof source === 'string' ? source : source.url
+  const cssUrl = typeof source === 'object' ? source.cssUrl : null
+
+  console.log(`[Runtime] Loading foundation from: ${url}`)
+
+  try {
+    // Load CSS and JS in parallel
+    const [, foundation] = await Promise.all([
+      cssUrl ? loadFoundationCSS(cssUrl) : Promise.resolve(),
+      import(/* @vite-ignore */ url)
+    ])
+
+    console.log('[Runtime] Foundation loaded. Available components:',
+      typeof foundation.listComponents === 'function' ? foundation.listComponents() : 'unknown')
+
+    return foundation
+  } catch (error) {
+    console.error('[Runtime] Failed to load foundation:', error)
+    throw error
+  }
+}
+
+/**
+ * Initialize the Uniweb instance
+ * @param {Object} configData - Site configuration data
+ * @returns {Uniweb}
+ */
+function initUniweb(configData) {
+  const uniwebInstance = new Uniweb(configData)
+
+  // Global assignment for component access
+  globalThis.uniweb = uniwebInstance
+
+  // Set up child block renderer
+  uniwebInstance.childBlockRenderer = ChildBlocks
+
+  // Set up routing components for foundation components to use
+  uniwebInstance.routingComponents = {
+    Link,
+    SafeHtml,
+    useNavigate,
+    useParams,
+    useLocation
+  }
+
+  return uniwebInstance
+}
+
+/**
+ * Render the application
+ * @param {Object} options
+ */
+function render({ development = false, basename } = {}) {
+  const container = document.getElementById('root')
+  if (!container) {
+    console.error('[Runtime] Root element not found')
+    return
+  }
+
+  const root = createRoot(container)
+
+  const app = (
+    <ErrorBoundary
+      fallback={
+        <div style={{ padding: '2rem', textAlign: 'center' }}>
+          <h2>Something went wrong</h2>
+          <p>Please try refreshing the page</p>
+        </div>
+      }
+    >
+      <BrowserRouter basename={basename}>
+        <Routes>
+          <Route path="/*" element={<WebsiteRenderer />} />
+        </Routes>
+      </BrowserRouter>
+    </ErrorBoundary>
+  )
+
+  root.render(development ? <React.StrictMode>{app}</React.StrictMode> : app)
+}
+
+/**
+ * Initialize the Runtime Environment
+ *
+ * @param {string|Object|Promise} foundationSource - One of:
+ *   - URL string to foundation module
+ *   - Object with {url, cssUrl}
+ *   - Promise that resolves to a foundation module (legacy federation support)
+ * @param {Object} options
+ * @param {boolean} options.development - Enable development mode
+ * @param {Object} options.configData - Site configuration (or read from DOM)
+ * @param {string} options.basename - Router basename
+ */
+async function initRuntime(foundationSource, options = {}) {
+  const {
+    development = import.meta.env?.DEV ?? false,
+    configData: providedConfig = null,
+    basename
+  } = options
+
+  // Get config data from options, DOM, or global
+  const configData = providedConfig
+    ?? JSON.parse(document.getElementById('__SITE_CONTENT__')?.textContent || 'null')
+    ?? globalThis.__SITE_CONTENT__
+
+  if (!configData) {
+    console.error('[Runtime] No site configuration found')
+    return
+  }
+
+  // Initialize core runtime
+  const uniwebInstance = initUniweb(configData)
+
+  try {
+    let foundation
+
+    // Handle different foundation source types
+    if (typeof foundationSource === 'string' || (foundationSource && typeof foundationSource.url === 'string')) {
+      // ESM URL - load via dynamic import
+      foundation = await loadFoundation(foundationSource)
+    } else if (foundationSource && typeof foundationSource.then === 'function') {
+      // Promise (legacy Module Federation support)
+      const remoteModule = await foundationSource
+      // Handle double default wrapping
+      const innerModule = remoteModule?.default?.default ? remoteModule.default : remoteModule
+      // Convert to foundation interface
+      foundation = {
+        getComponent: (name) => innerModule.default?.[name],
+        listComponents: () => Object.keys(innerModule.default || {}),
+        ...innerModule
+      }
+    } else if (foundationSource && typeof foundationSource === 'object') {
+      // Already a foundation module
+      foundation = foundationSource
+    }
+
+    if (!foundation) {
+      throw new Error('Failed to load foundation')
+    }
+
+    // Set the foundation on the runtime
+    uniwebInstance.setFoundation(foundation)
+
+    // Set foundation config if provided
+    if (foundation.config || foundation.site) {
+      uniwebInstance.setFoundationConfig(foundation.config || foundation.site)
+    }
+
+    // Render the app
+    render({ development, basename })
+
+    // Log success
+    if (!development) {
+      console.log(
+        '%c<%c>%c Uniweb Runtime',
+        'color: #FA8400; font-weight: bold; font-size: 18px;',
+        'color: #00ADFE; font-weight: bold; font-size: 18px;',
+        "color: #333; font-size: 18px; font-family: system-ui, sans-serif;"
+      )
+    }
+  } catch (error) {
+    console.error('[Runtime] Initialization failed:', error)
+
+    // Render error state
+    const container = document.getElementById('root')
+    if (container) {
+      const root = createRoot(container)
+      root.render(
+        <div style={{ padding: '2rem', margin: '1rem', background: '#fef2f2', borderRadius: '0.5rem', color: '#dc2626' }}>
+          <h2>Runtime Error</h2>
+          <p>{error.message}</p>
+          {development && <pre style={{ fontSize: '0.75rem', overflow: 'auto' }}>{error.stack}</pre>}
+        </div>
+      )
+    }
+  }
+}
+
+// Legacy alias
+const initRTE = initRuntime
+
+// Exports
+export {
+  initRuntime,
+  initRTE,
+  // Components for external use
+  Link,
+  SafeHtml,
+  ChildBlocks,
+  ErrorBoundary,
+  // Core classes
+  Uniweb
+}
+
+export default initRuntime

package/src/vite/content-collector.js

@@ -0,0 +1,269 @@
+/**
+ * Content Collector for Vite
+ *
+ * Collects site content from a pages/ directory structure:
+ * - site.yml: Site configuration
+ * - pages/: Directory of page folders
+ *   - page.yml: Page metadata
+ *   - *.md: Section content with YAML frontmatter
+ *
+ * Uses @uniwebcms/content-reader for markdown → ProseMirror conversion
+ * when available, otherwise uses a simplified parser.
+ */
+
+import { readFile, readdir, stat } from 'node:fs/promises'
+import { join, parse, relative } from 'node:path'
+import { existsSync } from 'node:fs'
+import yaml from 'js-yaml'
+
+// Try to import content-reader, fall back to simplified parser
+let markdownToProseMirror
+try {
+  const contentReader = await import('@uniwebcms/content-reader')
+  markdownToProseMirror = contentReader.markdownToProseMirror
+} catch {
+  // Simplified fallback - just wraps content as text
+  markdownToProseMirror = (markdown) => ({
+    type: 'doc',
+    content: [
+      {
+        type: 'paragraph',
+        content: [{ type: 'text', text: markdown.trim() }]
+      }
+    ]
+  })
+}
+
+/**
+ * Parse YAML string using js-yaml
+ */
+function parseYaml(yamlString) {
+  try {
+    return yaml.load(yamlString) || {}
+  } catch (err) {
+    console.warn('[content-collector] YAML parse error:', err.message)
+    return {}
+  }
+}
+
+/**
+ * Read and parse a YAML file
+ */
+async function readYamlFile(filePath) {
+  try {
+    const content = await readFile(filePath, 'utf8')
+    return parseYaml(content)
+  } catch (err) {
+    if (err.code === 'ENOENT') return {}
+    throw err
+  }
+}
+
+/**
+ * Check if a file is a markdown file
+ */
+function isMarkdownFile(filename) {
+  return filename.endsWith('.md') && !filename.startsWith('_')
+}
+
+/**
+ * Parse numeric prefix from filename (e.g., "1-hero.md" → { prefix: "1", name: "hero" })
+ */
+function parseNumericPrefix(filename) {
+  const match = filename.match(/^(\d+(?:\.\d+)*)-?(.*)$/)
+  if (match) {
+    return { prefix: match[1], name: match[2] || match[1] }
+  }
+  return { prefix: null, name: filename }
+}
+
+/**
+ * Compare filenames for sorting by numeric prefix
+ */
+function compareFilenames(a, b) {
+  const { prefix: prefixA } = parseNumericPrefix(parse(a).name)
+  const { prefix: prefixB } = parseNumericPrefix(parse(b).name)
+
+  if (!prefixA && !prefixB) return a.localeCompare(b)
+  if (!prefixA) return 1
+  if (!prefixB) return -1
+
+  const partsA = prefixA.split('.').map(Number)
+  const partsB = prefixB.split('.').map(Number)
+
+  for (let i = 0; i < Math.max(partsA.length, partsB.length); i++) {
+    const numA = partsA[i] ?? 0
+    const numB = partsB[i] ?? 0
+    if (numA !== numB) return numA - numB
+  }
+
+  return 0
+}
+
+/**
+ * Process a markdown file into a section
+ */
+async function processMarkdownFile(filePath, id) {
+  const content = await readFile(filePath, 'utf8')
+  let frontMatter = {}
+  let markdown = content
+
+  // Extract frontmatter
+  if (content.trim().startsWith('---')) {
+    const parts = content.split('---\n')
+    if (parts.length >= 3) {
+      frontMatter = parseYaml(parts[1])
+      markdown = parts.slice(2).join('---\n')
+    }
+  }
+
+  const { component, preset, input, props, ...params } = frontMatter
+
+  // Convert markdown to ProseMirror
+  const proseMirrorContent = markdownToProseMirror(markdown)
+
+  return {
+    id,
+    component: component || 'Section',
+    preset,
+    input,
+    params: { ...params, ...props },
+    content: proseMirrorContent,
+    subsections: []
+  }
+}
+
+/**
+ * Build section hierarchy from flat list
+ */
+function buildSectionHierarchy(sections) {
+  const sectionMap = new Map()
+  const topLevel = []
+
+  // First pass: create map
+  for (const section of sections) {
+    sectionMap.set(section.id, section)
+  }
+
+  // Second pass: build hierarchy
+  for (const section of sections) {
+    if (!section.id.includes('.')) {
+      topLevel.push(section)
+      continue
+    }
+
+    const parts = section.id.split('.')
+    const parentId = parts.slice(0, -1).join('.')
+    const parent = sectionMap.get(parentId)
+
+    if (parent) {
+      parent.subsections.push(section)
+    } else {
+      // Orphan subsection - add to top level
+      topLevel.push(section)
+    }
+  }
+
+  return topLevel
+}
+
+/**
+ * Process a page directory
+ */
+async function processPage(pagePath, pageName, headerSections, footerSections) {
+  const pageConfig = await readYamlFile(join(pagePath, 'page.yml'))
+
+  if (pageConfig.hidden) return null
+
+  // Get markdown files
+  const files = await readdir(pagePath)
+  const mdFiles = files.filter(isMarkdownFile).sort(compareFilenames)
+
+  // Process sections
+  const sections = []
+  for (const file of mdFiles) {
+    const { name } = parse(file)
+    const { prefix } = parseNumericPrefix(name)
+    const id = prefix || name
+
+    const section = await processMarkdownFile(join(pagePath, file), id)
+    sections.push(section)
+  }
+
+  // Build hierarchy
+  const hierarchicalSections = buildSectionHierarchy(sections)
+
+  // Determine route
+  let route = '/' + pageName
+  if (pageName === 'home' || pageName === 'index') {
+    route = '/'
+  } else if (pageName.startsWith('@')) {
+    route = '/' + pageName
+  }
+
+  return {
+    route,
+    title: pageConfig.title || pageName,
+    description: pageConfig.description || '',
+    order: pageConfig.order,
+    sections: hierarchicalSections
+  }
+}
+
+/**
+ * Collect all site content
+ */
+export async function collectSiteContent(sitePath) {
+  const pagesPath = join(sitePath, 'pages')
+
+  // Read site config
+  const siteConfig = await readYamlFile(join(sitePath, 'site.yml'))
+  const themeConfig = await readYamlFile(join(sitePath, 'theme.yml'))
+
+  // Check if pages directory exists
+  if (!existsSync(pagesPath)) {
+    return {
+      config: siteConfig,
+      theme: themeConfig,
+      pages: []
+    }
+  }
+
+  // Get page directories
+  const entries = await readdir(pagesPath)
+  const pages = []
+  let header = null
+  let footer = null
+
+  for (const entry of entries) {
+    const entryPath = join(pagesPath, entry)
+    const stats = await stat(entryPath)
+
+    if (!stats.isDirectory()) continue
+
+    const page = await processPage(entryPath, entry)
+    if (!page) continue
+
+    // Handle special pages
+    if (entry === '@header' || page.route === '/@header') {
+      header = page
+    } else if (entry === '@footer' || page.route === '/@footer') {
+      footer = page
+    } else {
+      pages.push(page)
+    }
+  }
+
+  // Sort pages by order
+  pages.sort((a, b) => (a.order ?? 999) - (b.order ?? 999))
+
+  return {
+    config: siteConfig,
+    theme: themeConfig,
+    pages,
+    header,
+    footer
+  }
+}
+
+export default collectSiteContent