@uniweb/runtime 0.1.2 → 0.2.1

package/README.md

@@ -1,10 +1,12 @@
 # @uniweb/runtime
 
-Runtime loader and Vite plugins for Uniweb sites.
+Minimal runtime for loading Uniweb foundations and orchestrating rendering.
 
 ## Overview
 
-This package provides the runtime environment for Uniweb sites—content-driven websites that load Foundation components dynamically. It bridges site content with Foundation components and provides Vite plugins for development.
+This package provides the browser-side runtime for Uniweb sites. It loads foundations dynamically and renders content using React Router.
+
+For Vite build plugins, see [`@uniweb/build`](https://github.com/uniweb/build).
 
 ## Installation
 
@@ -12,13 +14,6 @@ This package provides the runtime environment for Uniweb sites—content-driven
 npm install @uniweb/runtime
 ```
 
-## Features
-
-- **Foundation Loading** - Load Foundations via dynamic import or import maps
-- **Content Rendering** - Render pages from structured content (JSON/YAML)
-- **Vite Plugins** - Collect site content and serve foundations in development
-- **React Integration** - Built on React with React Router for navigation
-
 ## Usage
 
 ### Runtime Loading
@@ -26,7 +21,7 @@ npm install @uniweb/runtime
 Initialize the runtime with a Foundation URL:
 
 ```jsx
-import { initRuntime } from '@uniweb/runtime'
+import initRuntime from '@uniweb/runtime'
 
 // Load foundation from URL
 initRuntime('/foundation/foundation.js', {
@@ -40,194 +35,76 @@ initRuntime({
 })
 ```
 
-### Vite Plugins for Sites
-
-Use the Vite plugins to collect content and optionally serve a foundation:
-
-```js
-// vite.config.js
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-import { siteContentPlugin, foundationPlugin } from '@uniweb/runtime/vite'
-
-export default defineConfig({
-  plugins: [
-    react(),
-
-    // Collect content from pages/ directory
-    siteContentPlugin({
-      sitePath: './',
-      inject: true,  // Inject into HTML
-    }),
-
-    // Optional: Serve foundation in dev mode
-    foundationPlugin({
-      name: 'my-foundation',
-      path: '../my-foundation',
-      serve: '/foundation',
-    }),
-  ]
-})
-```
-
-### Site Content Structure
-
-Sites use a pages/ directory structure:
-
-```
-site/
-├── site.yml           # Site configuration
-├── theme.yml          # Theme configuration
-└── pages/
-    ├── @header/       # Special: header section
-    │   └── 1.md
-    ├── @footer/       # Special: footer section
-    │   └── 1.md
-    ├── home/          # Home page (route: /)
-    │   ├── page.yml   # Page metadata
-    │   ├── 1.md       # First section
-    │   └── 2.md       # Second section
-    └── about/         # About page (route: /about)
-        ├── page.yml
-        └── 1.md
-```
-
-### Section Markdown Format
-
-Each `.md` file is a section with YAML frontmatter for configuration and markdown body for content:
-
-```markdown
----
-component: Hero
-preset: default
-theme: dark
----
+### Static Bundling
 
-# Welcome to Our Site
+Foundation imported directly and bundled with the site:
 
-Building the future together.
+```jsx
+import * as Foundation from '@my-org/my-foundation'
+import initRuntime from '@uniweb/runtime'
 
-[Get Started](#features)
+initRuntime(Foundation)
 ```
 
-The frontmatter specifies the component and configuration parameters. The markdown body contains the actual content, which is semantically parsed into structured data (headings → titles, paragraphs → descriptions, links → CTAs).
-
-## API Reference
-
-### Runtime Functions
-
-| Function | Description |
-|----------|-------------|
-| `initRuntime(source, options)` | Initialize runtime with foundation |
-| `initRTE(source, options)` | Alias for initRuntime |
-
-### Exported Components
-
-| Component | Description |
-|-----------|-------------|
-| `Link` | Router-aware link component |
-| `SafeHtml` | Safe HTML rendering |
-| `ChildBlocks` | Render child sections |
-| `ErrorBoundary` | Error boundary wrapper |
-
-### Vite Plugins
+## API
 
-| Plugin | Description |
-|--------|-------------|
-| `siteContentPlugin(options)` | Collect and inject site content |
-| `foundationPlugin(options)` | Build and serve foundation in dev |
-| `collectSiteContent(sitePath)` | Programmatic content collection |
+### initRuntime(source, options)
 
-### Plugin Options
+Initialize the runtime with a foundation.
 
-**siteContentPlugin:**
-```js
-{
-  sitePath: './',           // Path to site directory
-  pagesDir: 'pages',        // Pages subdirectory
-  inject: true,             // Inject into HTML
-  filename: 'site-content.json',  // Output filename
-  watch: true               // Watch for changes (dev)
-}
-```
+**source** - One of:
+- URL string to foundation module
+- Object with `{ url, cssUrl }`
+- Foundation module object (for static bundling)
 
-**foundationPlugin:**
+**options:**
 ```js
 {
-  name: 'foundation',       // Foundation name (for logs)
-  path: '../foundation',    // Path to foundation package
-  serve: '/foundation',     // URL path to serve from
-  watch: true,              // Watch for changes
-  buildOnStart: true        // Build when dev server starts
+  development: false,    // Enable dev mode (StrictMode, verbose errors)
+  configData: null,      // Site content (or reads from DOM)
+  basename: undefined    // React Router basename
 }
 ```
 
-## Core Classes
-
-### Uniweb
-
-The main runtime instance (available as `globalThis.uniweb`):
-
-```js
-uniweb.getComponent(name)     // Get component from foundation
-uniweb.listComponents()       // List available components
-uniweb.activeWebsite          // Current website instance
-```
-
-### Website
+For core classes (`Uniweb`, `Website`, `Block`, etc.), import from [`@uniweb/core`](https://github.com/uniweb/core).
 
-Manages pages, theme, and localization:
+## Architecture
 
-```js
-website.getPage(route)        // Get page by route
-website.setActivePage(route)  // Navigate to page
-website.localize(value)       // Localize a value
-website.getLanguage()         // Get current language
 ```
-
-### Block
-
-Represents a section on a page:
-
-```js
-block.initComponent()         // Initialize foundation component
-block.getBlockContent()       // Get structured content
-block.getBlockProperties()    // Get configuration properties
-block.getBlockLinks()         // Get links from content
+@uniweb/runtime (browser)
+    │
+    ├── Loads foundation dynamically
+    ├── Creates Uniweb instance via @uniweb/core
+    └── Orchestrates React/Router rendering
 ```
 
-## Two Loading Modes
+Foundations should:
+- Import components from `@uniweb/kit` (bundled)
+- Mark `@uniweb/core` as external (provided by runtime)
 
-### Runtime Loading (Import Maps)
+## Build Plugins
 
-Foundation loaded at runtime via dynamic import. React provided by host via import map.
+Vite plugins have moved to `@uniweb/build`:
 
-```html
-<script type="importmap">
-{
-  "imports": {
-    "react": "https://esm.sh/react@18",
-    "react-dom": "https://esm.sh/react-dom@18"
-  }
-}
-</script>
-```
-
-### Static Bundling
-
-Foundation imported directly and bundled with the site.
-
-```jsx
-import * as Foundation from '@my-org/my-foundation'
-import { initRuntime } from '@uniweb/runtime'
+```js
+// vite.config.js
+import { siteContentPlugin } from '@uniweb/build/site'
+import { foundationDevPlugin } from '@uniweb/build/dev'
 
-initRuntime(Foundation)
+export default defineConfig({
+  plugins: [
+    siteContentPlugin({ sitePath: './', inject: true }),
+    foundationDevPlugin({ path: '../foundation', serve: '/foundation' }),
+  ]
+})
 ```
 
 ## Related Packages
 
-- [`uniweb`](https://github.com/uniweb/cli) - CLI for creating Uniweb projects
-- [`@uniweb/build`](https://github.com/uniweb/build) - Foundation build tooling
+- [`@uniweb/core`](https://github.com/uniweb/core) - Core classes (Uniweb, Website, Block)
+- [`@uniweb/kit`](https://github.com/uniweb/kit) - Component library for foundations
+- [`@uniweb/build`](https://github.com/uniweb/build) - Vite build plugins
+- [`uniweb`](https://github.com/uniweb/cli) - CLI for creating projects
 
 ## License
 

package/package.json

@@ -1,11 +1,10 @@
 {
   "name": "@uniweb/runtime",
-  "version": "0.1.2",
-  "description": "Runtime loader and Vite plugins for Uniweb sites",
+  "version": "0.2.1",
+  "description": "Minimal runtime for loading Uniweb foundations",
   "type": "module",
   "exports": {
-    ".": "./src/index.jsx",
-    "./vite": "./src/vite/index.js"
+    ".": "./src/index.jsx"
   },
   "files": [
     "src"
@@ -13,9 +12,8 @@
   "keywords": [
     "uniweb",
     "runtime",
-    "vite",
     "react",
-    "components"
+    "foundation"
   ],
   "author": "Proximify",
   "license": "Apache-2.0",
@@ -31,21 +29,11 @@
     "node": ">=20.19"
   },
   "dependencies": {
-    "js-yaml": "^4.1.0",
-    "@uniweb/semantic-parser": "1.0.1"
+    "@uniweb/core": "0.1.2"
   },
   "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "react-router-dom": "^6.0.0 || ^7.0.0",
-    "vite": "^5.0.0 || ^6.0.0 || ^7.0.0"
-  },
-  "peerDependenciesMeta": {
-    "vite": {
-      "optional": true
-    }
-  },
-  "optionalDependencies": {
-    "@uniweb/content-reader": "1.0.1"
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "react-router-dom": "^6.0.0 || ^7.0.0"
   }
 }

package/src/index.jsx

@@ -1,23 +1,21 @@
 /**
  * @uniweb/runtime - Main Entry Point
  *
- * This is the Vite/ESM-based runtime that loads foundations via dynamic import()
- * instead of Webpack Module Federation.
+ * Minimal runtime for loading foundations and orchestrating rendering.
+ * Foundations should import components from @uniweb/kit.
  */
 
 import React from 'react'
 import { createRoot } from 'react-dom/client'
-import { BrowserRouter, Routes, Route, useParams, useLocation, useNavigate } from 'react-router-dom'
+import { BrowserRouter, Routes, Route } 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'
+// Core factory from @uniweb/core
+import { createUniweb } from '@uniweb/core'
 
 /**
  * Load foundation CSS from URL
@@ -60,8 +58,10 @@ async function loadFoundation(source) {
       import(/* @vite-ignore */ url)
     ])
 
-    console.log('[Runtime] Foundation loaded. Available components:',
-      typeof foundation.listComponents === 'function' ? foundation.listComponents() : 'unknown')
+    console.log(
+      '[Runtime] Foundation loaded. Available components:',
+      typeof foundation.listComponents === 'function' ? foundation.listComponents() : 'unknown'
+    )
 
     return foundation
   } catch (error) {
@@ -76,23 +76,12 @@ async function loadFoundation(source) {
  * @returns {Uniweb}
  */
 function initUniweb(configData) {
-  const uniwebInstance = new Uniweb(configData)
+  // Create singleton via @uniweb/core (also assigns to globalThis.uniweb)
+  const uniwebInstance = createUniweb(configData)
 
-  // Global assignment for component access
-  globalThis.uniweb = uniwebInstance
-
-  // Set up child block renderer
+  // Set up child block renderer for nested blocks
   uniwebInstance.childBlockRenderer = ChildBlocks
 
-  // Set up routing components for foundation components to use
-  uniwebInstance.routingComponents = {
-    Link,
-    SafeHtml,
-    useNavigate,
-    useParams,
-    useLocation
-  }
-
   return uniwebInstance
 }
 
@@ -149,9 +138,10 @@ async function initRuntime(foundationSource, options = {}) {
   } = options
 
   // Get config data from options, DOM, or global
-  const configData = providedConfig
-    ?? JSON.parse(document.getElementById('__SITE_CONTENT__')?.textContent || 'null')
-    ?? globalThis.__SITE_CONTENT__
+  const configData =
+    providedConfig ??
+    JSON.parse(document.getElementById('__SITE_CONTENT__')?.textContent || 'null') ??
+    globalThis.__SITE_CONTENT__
 
   if (!configData) {
     console.error('[Runtime] No site configuration found')
@@ -205,7 +195,7 @@ async function initRuntime(foundationSource, options = {}) {
         '%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;"
+        'color: #333; font-size: 18px; font-family: system-ui, sans-serif;'
       )
     }
   } catch (error) {
@@ -216,7 +206,15 @@ async function initRuntime(foundationSource, options = {}) {
     if (container) {
       const root = createRoot(container)
       root.render(
-        <div style={{ padding: '2rem', margin: '1rem', background: '#fef2f2', borderRadius: '0.5rem', color: '#dc2626' }}>
+        <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>}
@@ -226,20 +224,5 @@ async function initRuntime(foundationSource, options = {}) {
   }
 }
 
-// Legacy alias
-const initRTE = initRuntime
-
-// Exports
-export {
-  initRuntime,
-  initRTE,
-  // Components for external use
-  Link,
-  SafeHtml,
-  ChildBlocks,
-  ErrorBoundary,
-  // Core classes
-  Uniweb
-}
-
+export { initRuntime }
 export default initRuntime

package/src/components/Link.jsx

@@ -1,28 +0,0 @@
-/**
- * Link
- *
- * A wrapper around React Router's Link that integrates with the runtime.
- */
-
-import React from 'react'
-import { Link as RouterLink } from 'react-router-dom'
-
-export default function Link({ to, href, children, className, ...props }) {
-  const target = to || href
-
-  // External links
-  if (target?.startsWith('http') || target?.startsWith('mailto:') || target?.startsWith('tel:')) {
-    return (
-      <a href={target} className={className} {...props}>
-        {children}
-      </a>
-    )
-  }
-
-  // Internal links via React Router
-  return (
-    <RouterLink to={target || '/'} className={className} {...props}>
-      {children}
-    </RouterLink>
-  )
-}

package/src/components/SafeHtml.jsx

@@ -1,22 +0,0 @@
-/**
- * SafeHtml
- *
- * Safely render HTML content with sanitization.
- * TODO: Add DOMPurify for production use
- */
-
-import React from 'react'
-
-export default function SafeHtml({ html, className, as: Component = 'div', ...props }) {
-  if (!html) return null
-
-  // For now, render directly
-  // TODO: Integrate DOMPurify for sanitization
-  return (
-    <Component
-      className={className}
-      dangerouslySetInnerHTML={{ __html: html }}
-      {...props}
-    />
-  )
-}