@uniweb/build 0.1.32 → 0.2.0

package/README.md

@@ -333,6 +333,34 @@ dist/
             └── default.webp
 ```
 
+### Schema.json Structure
+
+The generated `schema.json` contains:
+
+```json
+{
+  "_self": {
+    "name": "foundation",
+    "version": "0.1.0",
+    "description": "My foundation description",
+    "vars": { ... }
+  },
+  "Hero": { ... },
+  "Features": { ... }
+}
+```
+
+The `_self` object contains foundation-level metadata:
+
+| Field | Source | Description |
+|-------|--------|-------------|
+| `name` | `package.json` | Foundation package name |
+| `version` | `package.json` | Foundation version |
+| `description` | `package.json` | Foundation description |
+| `vars` | `foundation.js` | CSS custom properties sites can override |
+
+Identity fields (`name`, `version`, `description`) come from the foundation's `package.json`. Configuration fields (`vars`, etc.) come from `src/foundation.js`.
+
 ## API Reference
 
 ### Schema Functions
@@ -341,7 +369,8 @@ dist/
 |----------|-------------|
 | `discoverComponents(srcDir)` | Discover all exposed components |
 | `loadComponentMeta(componentDir)` | Load meta file for a component |
-| `loadFoundationMeta(srcDir)` | Load foundation-level meta |
+| `loadPackageJson(srcDir)` | Load identity from package.json |
+| `loadFoundationConfig(srcDir)` | Load foundation.js configuration |
 | `buildSchema(srcDir)` | Build complete schema object |
 
 ### Entry Generation

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniweb/build",
-  "version": "0.1.32",
+  "version": "0.2.0",
   "description": "Build tooling for the Uniweb Component Web Platform",
   "type": "module",
   "exports": {
@@ -51,7 +51,7 @@
   },
   "optionalDependencies": {
     "@uniweb/content-reader": "1.0.4",
-    "@uniweb/runtime": "0.2.18"
+    "@uniweb/runtime": "0.2.20"
   },
   "peerDependencies": {
     "vite": "^5.0.0 || ^6.0.0 || ^7.0.0",
@@ -60,7 +60,7 @@
     "@tailwindcss/vite": "^4.0.0",
     "@vitejs/plugin-react": "^4.0.0 || ^5.0.0",
     "vite-plugin-svgr": "^4.0.0",
-    "@uniweb/core": "0.1.15"
+    "@uniweb/core": "0.2.0"
   },
   "peerDependenciesMeta": {
     "vite": {

package/src/docs.js

@@ -165,8 +165,8 @@ export async function generateDocs(foundationDir, options = {}) {
 
   let schema
 
-  // Try to load schema.json from dist
-  const schemaPath = join(foundationDir, 'dist', 'schema.json')
+  // Try to load schema.json from dist/meta (where foundation build outputs it)
+  const schemaPath = join(foundationDir, 'dist', 'meta', 'schema.json')
 
   if (!fromSource && existsSync(schemaPath)) {
     // Load from existing schema.json

package/src/generate-entry.js

@@ -26,20 +26,41 @@ import { discoverComponents } from './schema.js'
 import { extractAllRuntimeSchemas } from './runtime-schema.js'
 
 /**
- * Detect foundation exports file (for custom Layout, props, etc.)
- * Looks for: src/exports.js, src/exports.jsx, src/exports/index.js, src/exports/index.jsx
+ * Detect foundation config/exports file (for custom Layout, props, vars, etc.)
+ *
+ * Looks for (in order of preference):
+ * 1. foundation.js - New consolidated format
+ * 2. exports.js - Legacy format (for backward compatibility)
+ *
+ * The file should export:
+ * - Layout (optional) - Custom page layout component
+ * - props (optional) - Foundation-wide props
+ * - vars (optional) - CSS custom properties (also read by schema builder)
  */
 function detectFoundationExports(srcDir) {
-  const candidates = [
+  // Prefer foundation.js (new consolidated format)
+  const foundationCandidates = [
+    { path: 'foundation.js', ext: 'js' },
+    { path: 'foundation.jsx', ext: 'jsx' },
+  ]
+
+  for (const { path, ext } of foundationCandidates) {
+    if (existsSync(join(srcDir, path))) {
+      return { path: `./${path}`, ext, isFoundationJs: true }
+    }
+  }
+
+  // Fall back to exports.js (legacy format)
+  const legacyCandidates = [
     { path: 'exports.js', ext: 'js' },
     { path: 'exports.jsx', ext: 'jsx' },
     { path: 'exports/index.js', ext: 'js' },
     { path: 'exports/index.jsx', ext: 'jsx' },
   ]
 
-  for (const { path, ext } of candidates) {
+  for (const { path, ext } of legacyCandidates) {
     if (existsSync(join(srcDir, path))) {
-      return { path: `./${path.replace(/\/index\.(js|jsx)$/, '')}`, ext }
+      return { path: `./${path.replace(/\/index\.(js|jsx)$/, '')}`, ext, isFoundationJs: false }
     }
   }
   return null

package/src/index.js

@@ -7,7 +7,8 @@
 // Schema discovery and loading
 export {
   loadComponentMeta,
-  loadFoundationMeta,
+  loadFoundationConfig,
+  loadFoundationMeta, // @deprecated - use loadFoundationConfig
   discoverComponents,
   buildSchema,
   getExposedComponents,

package/src/prerender.js

@@ -306,9 +306,11 @@ function renderBlock(block) {
   }
 
   // Wrapper props
+  // Use stableId for DOM ID if available (stable across reordering)
   const theme = block.themeName
+  const sectionId = block.stableId || block.id
   const wrapperProps = {
-    id: `Section${block.id}`,
+    id: `section-${sectionId}`,
     className: theme || ''
   }
 
@@ -516,6 +518,14 @@ export async function prerenderSite(siteDir, options = {}) {
 function injectContent(shell, renderedContent, page, siteContent) {
   let html = shell
 
+  // Inject theme CSS if not already present
+  if (siteContent?.theme?.css && !html.includes('id="uniweb-theme"')) {
+    html = html.replace(
+      '</head>',
+      `  <style id="uniweb-theme">\n${siteContent.theme.css}\n    </style>\n  </head>`
+    )
+  }
+
   // Replace the empty root div with pre-rendered content
   html = html.replace(
     /<div id="root">[\s\S]*?<\/div>/,
@@ -548,7 +558,13 @@ function injectContent(shell, renderedContent, page, siteContent) {
 
   // Inject site content as JSON for hydration
   // Replace existing content if present, otherwise add it
-  const contentScript = `<script id="__SITE_CONTENT__" type="application/json">${JSON.stringify(siteContent)}</script>`
+  // Strip CSS from theme (it's already in a <style> tag)
+  const contentForJson = { ...siteContent }
+  if (contentForJson.theme?.css) {
+    contentForJson.theme = { ...contentForJson.theme }
+    delete contentForJson.theme.css
+  }
+  const contentScript = `<script id="__SITE_CONTENT__" type="application/json">${JSON.stringify(contentForJson)}</script>`
   if (html.includes('__SITE_CONTENT__')) {
     // Replace existing site content with updated version (includes expanded dynamic routes)
     // Match script tag with attributes in any order

package/src/schema.js

@@ -5,14 +5,17 @@
  * Schema data is for editor-time only, not runtime.
  */
 
-import { readdir } from 'node:fs/promises'
+import { readdir, readFile } from 'node:fs/promises'
 import { existsSync } from 'node:fs'
-import { join, basename } from 'node:path'
+import { join, dirname } from 'node:path'
 import { pathToFileURL } from 'node:url'
 
-// Meta file name (standardized to meta.js)
+// Component meta file name
 const META_FILE_NAME = 'meta.js'
 
+// Foundation config file name
+const FOUNDATION_FILE_NAME = 'foundation.js'
+
 // Default component paths (relative to srcDir)
 const DEFAULT_COMPONENT_PATHS = ['components']
 
@@ -44,21 +47,71 @@ export async function loadComponentMeta(componentDir) {
 }
 
 /**
- * Load foundation-level meta file
+ * Load package.json from foundation root
+ * Extracts identity fields: name, version, description
+ *
+ * @param {string} srcDir - Source directory (e.g., 'src')
+ * @returns {Object} Identity fields from package.json
  */
-export async function loadFoundationMeta(srcDir) {
-  const filePath = join(srcDir, META_FILE_NAME)
+export async function loadPackageJson(srcDir) {
+  // package.json is in the foundation root (parent of srcDir)
+  const foundationRoot = dirname(srcDir)
+  const packagePath = join(foundationRoot, 'package.json')
+
+  if (!existsSync(packagePath)) {
+    return {}
+  }
+
+  try {
+    const content = await readFile(packagePath, 'utf-8')
+    const pkg = JSON.parse(content)
+
+    // Extract only identity fields for schema
+    return {
+      name: pkg.name,
+      version: pkg.version,
+      description: pkg.description,
+    }
+  } catch (error) {
+    console.warn(`Warning: Failed to load package.json:`, error.message)
+    return {}
+  }
+}
+
+/**
+ * Load foundation-level config file (foundation.js)
+ *
+ * Contains foundation-wide configuration:
+ * - vars: CSS custom properties sites can override
+ * - Layout: Custom layout component
+ * - Future: providers, middleware, etc.
+ */
+export async function loadFoundationConfig(srcDir) {
+  const filePath = join(srcDir, FOUNDATION_FILE_NAME)
   if (!existsSync(filePath)) {
     return {}
   }
   try {
-    return await loadMetaFile(filePath)
+    const module = await import(pathToFileURL(filePath).href)
+    // Support both default export and named exports
+    return {
+      ...module.default,
+      vars: module.vars || module.default?.vars,
+      Layout: module.Layout || module.default?.Layout,
+    }
   } catch (error) {
-    console.warn(`Warning: Failed to load foundation meta ${filePath}:`, error.message)
+    console.warn(`Warning: Failed to load foundation config ${filePath}:`, error.message)
     return {}
   }
 }
 
+/**
+ * @deprecated Use loadFoundationConfig instead
+ */
+export async function loadFoundationMeta(srcDir) {
+  return loadFoundationConfig(srcDir)
+}
+
 /**
  * Discover components in a single path
  * @param {string} srcDir - Source directory (e.g., 'src')
@@ -127,17 +180,31 @@ export async function discoverComponents(srcDir, componentPaths = DEFAULT_COMPON
 
 /**
  * Build complete schema for a foundation
- * Returns { _self: foundationMeta, ComponentName: componentMeta, ... }
+ * Returns { _self: { identity + config }, ComponentName: componentMeta, ... }
+ *
+ * The _self object contains:
+ * - Identity from package.json (name, version, description)
+ * - Configuration from foundation.js (vars, Layout, etc.)
  *
  * @param {string} srcDir - Source directory
  * @param {string[]} [componentPaths] - Paths to search for components
  */
 export async function buildSchema(srcDir, componentPaths) {
-  const foundationMeta = await loadFoundationMeta(srcDir)
+  // Load identity from package.json
+  const identity = await loadPackageJson(srcDir)
+
+  // Load configuration from foundation.js
+  const foundationConfig = await loadFoundationConfig(srcDir)
+
+  // Discover components
   const components = await discoverComponents(srcDir, componentPaths)
 
   return {
-    _self: foundationMeta,
+    // Merge identity and config - identity fields take precedence
+    _self: {
+      ...foundationConfig,
+      ...identity,
+    },
     ...components,
   }
 }

package/src/site/config.js

@@ -235,7 +235,8 @@ export async function defineSiteConfig(options = {}) {
       inject: true,
       seo,
       assets,
-      search
+      search,
+      foundationPath: foundationInfo.path // For loading foundation theme vars
     }),
 
     // Foundation dev server (only in runtime mode with local foundation)