@rip-lang/ui 0.1.3 → 0.3.2

package/package.json

@@ -1,15 +1,11 @@
 {
   "name": "@rip-lang/ui",
-  "version": "0.1.3",
-  "description": "Zero-build reactive web framework — VFS, file-based routing, reactive stash",
+  "version": "0.3.2",
+  "description": "Zero-build reactive web framework — rip.js + ui.rip + launch(url)",
   "type": "module",
-  "main": "ui.js",
+  "main": "ui.rip",
   "exports": {
-    ".": "./ui.js",
-    "./stash": "./stash.js",
-    "./vfs": "./vfs.js",
-    "./router": "./router.js",
-    "./renderer": "./renderer.js",
+    ".": "./ui.rip",
     "./serve": "./serve.rip"
   },
   "scripts": {
@@ -19,9 +15,6 @@
     "ui",
     "framework",
     "reactive",
-    "vfs",
-    "router",
-    "stash",
     "signals",
     "no-build",
     "rip",
@@ -39,19 +32,15 @@
   "author": "Steve Shreeve <steve.shreeve@gmail.com>",
   "license": "MIT",
   "dependencies": {
-    "rip-lang": "^3.4.4"
+    "rip-lang": "^3.9.1"
   },
   "files": [
-    "ui.js",
-    "stash.js",
-    "vfs.js",
-    "router.js",
-    "renderer.js",
+    "ui.rip",
     "serve.rip",
     "README.md"
   ],
   "peerDependencies": {
-    "@rip-lang/api": ">=1.1.4"
+    "@rip-lang/api": ">=1.1.6"
   },
   "peerDependenciesMeta": {
     "@rip-lang/api": {

package/serve.rip

@@ -1,24 +1,23 @@
 # ==============================================================================
-# @rip-lang/ui/serve — Rip UI Middleware for rip-api
+# @rip-lang/ui/serve — Rip UI Server Middleware
 # ==============================================================================
 #
-# Serves the Rip UI framework files, auto-generated page manifests, and
-# provides an SSE hot-reload channel for live development.
+# Serves the Rip UI runtime, auto-generated app bundles, and optional
+# SSE hot-reload.
 #
 # Usage:
 #   import { ripUI } from '@rip-lang/ui/serve'
-#
-#   use ripUI pages: 'pages', watch: true
+#   use ripUI dir: dir, components: 'pages', includes: ['ui'], watch: true, title: 'My App'
 #
 # Options:
-#   base:     string  — URL prefix for framework files (default: '/rip-ui')
-#   pages:    string  — directory containing .rip page files (default: 'pages')
-#   watch:    boolean — enable SSE hot-reload endpoint (default: false)
-#   debounce: number  — ms to batch filesystem events (default: 250)
-#
-# Registered routes:
-#   GET {base}/*           — framework JS files, manifest, SSE watch
-#   GET /pages/*           — individual .rip page files (for hot-reload refetch)
+#   app:        string  — URL mount point (default: '')
+#   dir:        string  — app directory on disk (default: '.')
+#   components: string  — directory for page components, relative to dir (default: 'components')
+#   includes:   array   — directories for shared components, relative to dir (default: [])
+#   watch:      boolean — enable SSE hot-reload endpoint (default: false)
+#   debounce:   number  — ms to batch filesystem events (default: 250)
+#   state:      object  — initial app state passed via bundle
+#   title:      string  — document title
 #
 # ==============================================================================
 
@@ -26,74 +25,96 @@ import { get } from '@rip-lang/api'
 import { watch as fsWatch } from 'node:fs'
 
 export ripUI = (opts = {}) ->
-  base       = opts.base or '/rip-ui'
-  pagesDir   = opts.pages or 'pages'
-  enableWatch = opts.watch or false
-  debounceMs = opts.debounce or 250
-  uiDir      = import.meta.dir
-
-  # Resolve compiler (rip.browser.js) from the rip-lang package
-  compilerPath = null
+  prefix        = opts.app or ''
+  appDir        = opts.dir or '.'
+  componentsDir = "#{appDir}/#{opts.components or 'components'}"
+  includeDirs   = (opts.includes or []).map (d) -> "#{appDir}/#{d}"
+  enableWatch   = opts.watch or false
+  debounceMs    = opts.debounce or 250
+  appState      = opts.state or null
+  appTitle      = opts.title or null
+  uiDir         = import.meta.dir
+
+  # Resolve rip-ui.min.js (compiler + UI framework bundled)
+  bundlePath = null
   try
-    compilerPath = Bun.fileURLToPath(import.meta.resolve('rip-lang/docs/dist/rip.browser.js'))
+    bundlePath = Bun.fileURLToPath(import.meta.resolve('rip-lang/docs/dist/rip-ui.min.js'))
   catch
-    compilerPath = "#{uiDir}/../../docs/dist/rip.browser.js"
-
-  # Framework file map: logical name → filesystem path
-  files =
-    'ui.js':       "#{uiDir}/ui.js"
-    'stash.js':    "#{uiDir}/stash.js"
-    'vfs.js':      "#{uiDir}/vfs.js"
-    'router.js':   "#{uiDir}/router.js"
-    'renderer.js': "#{uiDir}/renderer.js"
-    'compiler.js': compilerPath
-
-  # ---------------------------------------------------------------------------
-  # Route: /pages/* — individual .rip page files (for hot-reload refetch)
-  # ---------------------------------------------------------------------------
-
-  get '/pages/*', (c) ->
-    name = c.req.path.slice('/pages/'.length)
-    c.send "#{pagesDir}/#{name}", 'text/plain; charset=UTF-8'
-
-  # ---------------------------------------------------------------------------
-  # Route: {base}/* — framework files, manifest, SSE watch
-  # ---------------------------------------------------------------------------
-
-  get "#{base}/*", (c) ->
-    name = c.req.path.slice(base.length + 1)
-
-    # Framework JS files
-    if files[name]
-      return c.send files[name], 'application/javascript'
-
-    # Auto-generated manifest — bundles all .rip page sources as JSON
-    # Written to file so Bun.file() responses proxy cleanly through rip-server
-    if name is 'manifest.json'
+    bundlePath = "#{uiDir}/../../docs/dist/rip-ui.min.js"
+
+  # ----------------------------------------------------------------------------
+  # Route: /rip/* — framework files, registered once
+  # ----------------------------------------------------------------------------
+
+  unless ripUI._registered
+    get "/rip/rip-ui.min.js", (c) -> c.send bundlePath, 'application/javascript'
+    ripUI._registered = true
+
+  # ----------------------------------------------------------------------------
+  # Route: {prefix}/components/* — individual .rip component files (for hot-reload)
+  # Route: {prefix}/bundle  — app bundle (components + data as JSON)
+  # Route: {prefix}/watch   — SSE hot-reload stream
+  # ----------------------------------------------------------------------------
+
+  get "#{prefix}/components/*", (c) ->
+    name = c.req.path.slice("#{prefix}/components/".length)
+    c.send "#{componentsDir}/#{name}", 'text/plain; charset=UTF-8'
+
+  bundleCache = null
+  bundleDirty = true
+
+  # Invalidate bundle cache when components change
+  if enableWatch
+    fsWatch componentsDir, { recursive: true }, (event, filename) ->
+      bundleDirty = true if filename?.endsWith('.rip')
+    for incDir in includeDirs
+      fsWatch incDir, { recursive: true }, (event, filename) ->
+        bundleDirty = true if filename?.endsWith('.rip')
+
+  get "#{prefix}/bundle", (c) ->
+    if bundleDirty or not bundleCache
       glob = new Bun.Glob("**/*.rip")
-      bundle = {}
-      paths = Array.from(glob.scanSync(pagesDir))
+      components = {}
+      paths = Array.from(glob.scanSync(componentsDir))
       for path in paths
-        bundle["pages/#{path}"] = Bun.file("#{pagesDir}/#{path}").text!
-      manifestPath = "#{pagesDir}/.manifest.json"
-      Bun.write manifestPath, JSON.stringify(bundle)
-      return c.send manifestPath, 'application/json'
+        components["components/#{path}"] = Bun.file("#{componentsDir}/#{path}").text!
+
+      # Merge external include directories into components/_lib/
+      for dir in includeDirs
+        incPaths = Array.from(glob.scanSync(dir))
+        for path in incPaths
+          key = "components/_lib/#{path}"
+          components[key] = Bun.file("#{dir}/#{path}").text! unless components[key]
+
+      data = {}
+      data.title = appTitle if appTitle
+      data.watch = enableWatch
+      if appState
+        data[k] = v for k, v of appState
+
+      bundleCache = JSON.stringify({ components, data })
+      bundleDirty = false
 
-    # SSE watch endpoint — debounced, notify-only, with heartbeat
-    if name is 'watch' and enableWatch
+    new Response bundleCache, headers: { 'Content-Type': 'application/json' }
+
+  if enableWatch
+    get "#{prefix}/watch", (c) ->
       encoder = new TextEncoder()
       pending = new Set()
       timer    = null
       watcher  = null
       heartbeat = null
 
+      watchers = []
+
       cleanup = ->
-        watcher?.close()
+        w.close() for w in watchers
         clearTimeout(timer) if timer
         clearInterval(heartbeat) if heartbeat
-        watcher = heartbeat = timer = null
+        watchers = []
+        heartbeat = timer = null
 
-      return new Response new ReadableStream(
+      new Response new ReadableStream(
         start: (controller) ->
           send = (event, data) ->
             try
@@ -101,10 +122,8 @@ export ripUI = (opts = {}) ->
             catch
               cleanup()
 
-          # Send initial connection confirmation
           send 'connected', { time: Date.now() }
 
-          # Heartbeat every 5s to prevent Bun's idle timeout from closing the SSE
           heartbeat = setInterval ->
             try
               controller.enqueue encoder.encode(": heartbeat\n\n")
@@ -112,19 +131,22 @@ export ripUI = (opts = {}) ->
               cleanup()
           , 5000
 
-          # Flush pending changes as one batched notification
           flush = ->
             paths = Array.from(pending)
             pending.clear()
             timer = null
             send('changed', { paths }) if paths.length > 0
 
-          # Watch the pages directory for .rip file changes
-          watcher = fsWatch pagesDir, { recursive: true }, (event, filename) ->
-            return unless filename?.endsWith('.rip')
-            pending.add "pages/#{filename}"
-            clearTimeout(timer) if timer
-            timer = setTimeout(flush, debounceMs)
+          addWatcher = (dir, keyPrefix) ->
+            watchers.push fsWatch dir, { recursive: true }, (event, filename) ->
+              return unless filename?.endsWith('.rip')
+              pending.add "#{keyPrefix}#{filename}"
+              clearTimeout(timer) if timer
+              timer = setTimeout(flush, debounceMs)
+
+          addWatcher componentsDir, 'components/'
+          for incDir in includeDirs
+            addWatcher incDir, 'components/_lib/'
 
         cancel: -> cleanup()
       ),
@@ -133,8 +155,5 @@ export ripUI = (opts = {}) ->
           'Cache-Control': 'no-cache'
           'Connection': 'keep-alive'
 
-    # Unknown path under /rip-ui/
-    new Response 'Not Found', status: 404
-
-  # Return pass-through middleware for use()
+  # Return pass-through middleware
   (c, next) -> next!()