@uniweb/runtime 0.1.0

package/src/vite/foundation-plugin.js

@@ -0,0 +1,194 @@
+/**
+ * Vite Plugin: Foundation
+ *
+ * Builds and serves a foundation within the site's dev server.
+ * This enables a single dev server for both site and foundation development.
+ *
+ * Usage:
+ * ```js
+ * import { foundationPlugin } from '@uniweb/runtime/vite'
+ *
+ * export default defineConfig({
+ *   plugins: [
+ *     foundationPlugin({
+ *       name: 'my-foundation',
+ *       path: '../my-foundation',  // Path to foundation package
+ *       serve: '/foundation',      // URL path to serve from
+ *     })
+ *   ]
+ * })
+ * ```
+ */
+
+import { resolve, join, relative } from 'node:path'
+import { watch } from 'node:fs'
+import { readFile, readdir, stat } from 'node:fs/promises'
+import { existsSync } from 'node:fs'
+import { build } from 'vite'
+
+/**
+ * Create the foundation plugin
+ */
+export function foundationPlugin(options = {}) {
+  const {
+    name = 'foundation',
+    path: foundationPath = '../foundation',
+    serve: servePath = '/foundation',
+    watch: shouldWatch = true,
+    buildOnStart = true
+  } = options
+
+  let resolvedFoundationPath = null
+  let resolvedDistPath = null
+  let server = null
+  let watcher = null
+  let isBuilding = false
+  let lastBuildTime = 0
+
+  /**
+   * Build the foundation using Vite
+   */
+  async function buildFoundation() {
+    if (isBuilding) return
+    isBuilding = true
+
+    const startTime = Date.now()
+    console.log(`[foundation] Building ${name}...`)
+
+    try {
+      // Use Vite's native config loading by specifying configFile
+      const configPath = join(resolvedFoundationPath, 'vite.config.js')
+
+      // Build using Vite with the foundation's own config file
+      await build({
+        root: resolvedFoundationPath,
+        configFile: existsSync(configPath) ? configPath : false,
+        logLevel: 'warn',
+        build: {
+          outDir: 'dist',
+          emptyOutDir: true,
+          watch: null, // Don't use Vite's watch, we handle it ourselves
+        },
+      })
+
+      lastBuildTime = Date.now()
+      console.log(`[foundation] Built ${name} in ${lastBuildTime - startTime}ms`)
+
+      // Trigger HMR reload if server is running
+      if (server) {
+        server.ws.send({ type: 'full-reload' })
+      }
+    } catch (err) {
+      console.error(`[foundation] Build failed:`, err.message)
+    } finally {
+      isBuilding = false
+    }
+  }
+
+  return {
+    name: 'uniweb:foundation',
+    // Run before other plugins to intercept foundation requests
+    enforce: 'pre',
+
+    configResolved(config) {
+      resolvedFoundationPath = resolve(config.root, foundationPath)
+      resolvedDistPath = join(resolvedFoundationPath, 'dist')
+    },
+
+    async buildStart() {
+      if (buildOnStart) {
+        await buildFoundation()
+      }
+    },
+
+    configureServer(devServer) {
+      server = devServer
+
+      // Serve foundation files via middleware
+      // For JS files, use Vite's transform pipeline to properly resolve imports
+      devServer.middlewares.use(async (req, res, next) => {
+        const urlPath = req.url.split('?')[0]
+
+        if (!urlPath.startsWith(servePath)) {
+          return next()
+        }
+
+        const filePath = urlPath.slice(servePath.length) || '/foundation.js'
+        const fullPath = join(resolvedDistPath, filePath)
+
+        if (!existsSync(fullPath)) {
+          return next()
+        }
+
+        try {
+          let content = await readFile(fullPath, 'utf-8')
+          let contentType = 'application/octet-stream'
+
+          if (filePath.endsWith('.js')) {
+            contentType = 'application/javascript'
+
+            // Use Vite's transform pipeline to resolve bare imports
+            // This properly handles React ESM/CJS interop
+            const result = await devServer.transformRequest(
+              `/@fs${fullPath}`,
+              { html: false }
+            )
+
+            if (result) {
+              content = result.code
+            }
+          } else if (filePath.endsWith('.css')) {
+            contentType = 'text/css'
+          } else if (filePath.endsWith('.json')) {
+            contentType = 'application/json'
+          }
+
+          res.setHeader('Content-Type', contentType)
+          res.setHeader('Cache-Control', 'no-cache')
+          res.setHeader('Access-Control-Allow-Origin', '*')
+          res.end(content)
+        } catch (err) {
+          next(err)
+        }
+      })
+
+      // Watch foundation source for changes
+      if (shouldWatch) {
+        const srcPath = join(resolvedFoundationPath, 'src')
+
+        // Debounce rebuilds
+        let rebuildTimeout = null
+        const scheduleRebuild = () => {
+          if (rebuildTimeout) clearTimeout(rebuildTimeout)
+          rebuildTimeout = setTimeout(() => {
+            buildFoundation()
+          }, 200)
+        }
+
+        try {
+          watcher = watch(srcPath, { recursive: true }, (eventType, filename) => {
+            // Ignore non-source files
+            if (filename && (filename.endsWith('.js') || filename.endsWith('.jsx') ||
+                filename.endsWith('.ts') || filename.endsWith('.tsx') ||
+                filename.endsWith('.css') || filename.endsWith('.svg'))) {
+              console.log(`[foundation] ${filename} changed`)
+              scheduleRebuild()
+            }
+          })
+          console.log(`[foundation] Watching ${srcPath}`)
+        } catch (err) {
+          console.warn(`[foundation] Could not watch source:`, err.message)
+        }
+      }
+    },
+
+    closeBundle() {
+      if (watcher) {
+        watcher.close()
+        watcher = null
+      }
+    }
+  }
+}
+
+export default foundationPlugin

package/src/vite/index.js

@@ -0,0 +1,7 @@
+/**
+ * Vite plugins for @uniweb/runtime
+ */
+
+export { siteContentPlugin } from './site-content-plugin.js'
+export { collectSiteContent } from './content-collector.js'
+export { foundationPlugin } from './foundation-plugin.js'

package/src/vite/site-content-plugin.js

@@ -0,0 +1,135 @@
+/**
+ * Vite Plugin: Site Content
+ *
+ * Collects site content from pages/ directory and injects it into HTML.
+ * Watches for changes in development mode.
+ *
+ * Usage:
+ * ```js
+ * import { siteContentPlugin } from '@uniweb/runtime/vite'
+ *
+ * export default defineConfig({
+ *   plugins: [
+ *     siteContentPlugin({
+ *       sitePath: './site',  // Path to site directory
+ *       inject: true,        // Inject into HTML
+ *     })
+ *   ]
+ * })
+ * ```
+ */
+
+import { resolve } from 'node:path'
+import { watch } from 'node:fs'
+import { collectSiteContent } from './content-collector.js'
+
+/**
+ * Create the site content plugin
+ */
+export function siteContentPlugin(options = {}) {
+  const {
+    sitePath = './',
+    pagesDir = 'pages',
+    variableName = '__SITE_CONTENT__',
+    inject = true,
+    filename = 'site-content.json',
+    watch: shouldWatch = true
+  } = options
+
+  let siteContent = null
+  let resolvedSitePath = null
+  let watcher = null
+  let server = null
+
+  return {
+    name: 'uniweb:site-content',
+
+    configResolved(config) {
+      resolvedSitePath = resolve(config.root, sitePath)
+    },
+
+    async buildStart() {
+      // Collect content at build start
+      try {
+        siteContent = await collectSiteContent(resolvedSitePath)
+        console.log(`[site-content] Collected ${siteContent.pages?.length || 0} pages`)
+      } catch (err) {
+        console.error('[site-content] Failed to collect content:', err.message)
+        siteContent = { config: {}, theme: {}, pages: [] }
+      }
+    },
+
+    configureServer(devServer) {
+      server = devServer
+
+      // Watch for content changes in dev mode
+      if (shouldWatch) {
+        const watchPath = resolve(resolvedSitePath, pagesDir)
+
+        // Debounce rebuilds
+        let rebuildTimeout = null
+        const scheduleRebuild = () => {
+          if (rebuildTimeout) clearTimeout(rebuildTimeout)
+          rebuildTimeout = setTimeout(async () => {
+            console.log('[site-content] Content changed, rebuilding...')
+            try {
+              siteContent = await collectSiteContent(resolvedSitePath)
+              console.log(`[site-content] Rebuilt ${siteContent.pages?.length || 0} pages`)
+
+              // Send full reload to client
+              server.ws.send({ type: 'full-reload' })
+            } catch (err) {
+              console.error('[site-content] Rebuild failed:', err.message)
+            }
+          }, 100)
+        }
+
+        try {
+          watcher = watch(watchPath, { recursive: true }, scheduleRebuild)
+          console.log(`[site-content] Watching ${watchPath}`)
+        } catch (err) {
+          console.warn('[site-content] Could not watch pages directory:', err.message)
+        }
+      }
+
+      // Serve content as JSON endpoint
+      devServer.middlewares.use((req, res, next) => {
+        if (req.url === `/${filename}`) {
+          res.setHeader('Content-Type', 'application/json')
+          res.end(JSON.stringify(siteContent, null, 2))
+          return
+        }
+        next()
+      })
+    },
+
+    transformIndexHtml(html) {
+      if (!inject || !siteContent) return html
+
+      // Inject content as JSON script tag
+      const injection = `<script type="application/json" id="${variableName}">${JSON.stringify(siteContent)}</script>\n`
+
+      // Insert before </head>
+      return html.replace('</head>', injection + '</head>')
+    },
+
+    generateBundle() {
+      // Emit content as JSON file in production build
+      this.emitFile({
+        type: 'asset',
+        fileName: filename,
+        source: JSON.stringify(siteContent, null, 2)
+      })
+    },
+
+    closeBundle() {
+      // Clean up watcher
+      if (watcher) {
+        watcher.close()
+        watcher = null
+      }
+    }
+  }
+}
+
+export default siteContentPlugin