@rip-lang/ui 0.1.3 → 0.3.0

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.0",
+  "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,14 +32,10 @@
   "author": "Steve Shreeve <steve.shreeve@gmail.com>",
   "license": "MIT",
   "dependencies": {
-    "rip-lang": "^3.4.4"
+    "rip-lang": "^3.6.0"
   },
   "files": [
-    "ui.js",
-    "stash.js",
-    "vfs.js",
-    "router.js",
-    "renderer.js",
+    "ui.rip",
     "serve.rip",
     "README.md"
   ],

package/serve.rip

@@ -1,24 +1,22 @@
 # ==============================================================================
-# @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 app: '/demo', dir: dir, 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  — components subdirectory name (default: 'components')
+#   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,61 +24,70 @@ 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
+  prefix        = opts.app or ''
+  appDir        = opts.dir or '.'
+  componentsDir = opts.components or "#{appDir}/components"
+  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 compiler (rip.browser.js)
   compilerPath = null
   try
     compilerPath = Bun.fileURLToPath(import.meta.resolve('rip-lang/docs/dist/rip.browser.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'
+  # ----------------------------------------------------------------------------
+  # Route: /rip/* — framework files (compiler + ui.rip), registered once
+  # ----------------------------------------------------------------------------
+
+  unless ripUI._registered
+    get "/rip/browser.js", (c) -> c.send compilerPath, 'application/javascript'
+    get "/rip/ui.rip", (c) -> c.send "#{uiDir}/ui.rip", 'text/plain; charset=UTF-8'
+    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')
+
+  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!
+
+      data = {}
+      data.title = appTitle if appTitle
+      data.watch = enableWatch
+      if appState
+        data[k] = v for k, v of appState
 
-    # SSE watch endpoint — debounced, notify-only, with heartbeat
-    if name is 'watch' and enableWatch
+      bundleCache = JSON.stringify({ components, data })
+      bundleDirty = false
+
+    new Response bundleCache, headers: { 'Content-Type': 'application/json' }
+
+  if enableWatch
+    get "#{prefix}/watch", (c) ->
       encoder = new TextEncoder()
       pending = new Set()
       timer    = null
@@ -93,7 +100,7 @@ export ripUI = (opts = {}) ->
         clearInterval(heartbeat) if heartbeat
         watcher = heartbeat = timer = null
 
-      return new Response new ReadableStream(
+      new Response new ReadableStream(
         start: (controller) ->
           send = (event, data) ->
             try
@@ -101,10 +108,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,17 +117,15 @@ 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) ->
+          watcher = fsWatch componentsDir, { recursive: true }, (event, filename) ->
             return unless filename?.endsWith('.rip')
-            pending.add "pages/#{filename}"
+            pending.add "components/#{filename}"
             clearTimeout(timer) if timer
             timer = setTimeout(flush, debounceMs)
 
@@ -133,8 +136,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!()