@rip-lang/ui 0.3.2 → 0.3.4

package/README.md

@@ -16,7 +16,7 @@ import { get, use, start, notFound } from '@rip-lang/api'
 import { ripUI } from '@rip-lang/ui/serve'
 
 dir = import.meta.dir
-use ripUI dir: dir, components: 'pages', includes: ['ui'], watch: true, title: 'My App'
+use ripUI dir: dir, components: 'routes', includes: ['ui'], watch: true, title: 'My App'
 get '/css/*', -> @send "#{dir}/css/#{@req.path.slice(5)}"
 notFound -> @send "#{dir}/index.html", 'text/html; charset=UTF-8'
 start port: 3000
@@ -75,6 +75,85 @@ export About = component
 Reactive props via `:=` signal passthrough. Readonly props via `=!`.
 Children blocks passed as DOM nodes via `@children`.
 
+## Render Block Syntax
+
+Inside a `render` block, elements are declared by tag name. Classes, attributes,
+and children can be expressed inline or across multiple indented lines.
+
+### Classes with `.(...)`
+
+The `.()` helper applies classes using CLSX semantics — strings are included
+directly, and object keys are conditionally included based on their values:
+
+```coffee
+button.('px-4 py-2 rounded-full') "Click"
+button.('px-4 py-2', active: isActive) "Click"
+```
+
+Arguments can span multiple lines, just like a normal function call:
+
+```coffee
+input.(
+  'block w-full rounded-lg border border-primary',
+  'text-sm-plus text-tertiary shadow-xs'
+)
+```
+
+### Indented Attributes
+
+Attributes can be placed on separate indented lines after the element:
+
+```coffee
+input.('rounded-lg border px-3.5 py-2.5')
+  type: "email"
+  value: user.email
+  disabled: true
+```
+
+This is equivalent to the inline form:
+
+```coffee
+input.('rounded-lg border px-3.5 py-2.5') type: "email", value: user.email, disabled: true
+```
+
+### The `class:` Attribute
+
+The `class:` attribute works like `.()` and merges cumulatively with any
+existing `.()` classes on the same element:
+
+```coffee
+input.('block w-full rounded-lg')
+  class: 'text-sm text-tertiary'
+  type: "email"
+```
+
+This produces a single combined class expression: `block w-full rounded-lg text-sm text-tertiary`.
+
+The `class:` value also supports `.()` syntax for conditional classes:
+
+```coffee
+div.('mt-4 p-4')
+  class: .('ring-1', highlighted: isHighlighted)
+  span "Content"
+```
+
+### Attributes and Children Together
+
+Attributes and children can coexist at the same indentation level. Attributes
+(key-value pairs) are listed first, followed by child elements:
+
+```coffee
+button.('flex items-center rounded-lg')
+  type: "submit"
+  disabled: saving
+
+  span.('font-bold') "Submit"
+  span.('text-sm text-secondary') "or press Enter"
+```
+
+Blank lines between attributes and children are fine — they don't break the
+structure.
+
 ## How It Works
 
 The browser loads one file — `rip-ui.min.js` (~52KB Brotli) — which bundles the
@@ -155,7 +234,7 @@ The `ripUI` middleware registers routes for the framework files, the app
 bundle, and optional SSE hot-reload:
 
 ```coffee
-use ripUI dir: dir, components: 'pages', includes: ['ui'], watch: true, title: 'My App'
+use ripUI dir: dir, components: 'routes', includes: ['ui'], watch: true, title: 'My App'
 ```
 
 | Option | Default | Description |
@@ -311,6 +390,30 @@ See `docs/demo.html` for a complete example — the full Rip UI Demo app
 (6 components, router, reactive state, persistence) in 337 lines of
 static HTML.
 
+## Tailwind CSS Autocompletion
+
+To get Tailwind class autocompletion inside `.()` CLSX helpers in render
+templates, install the
+[Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)
+extension and add these to your VS Code / Cursor settings:
+
+```json
+{
+  "tailwindCSS.includeLanguages": { "rip": "html" },
+  "tailwindCSS.experimental.classRegex": [
+    ["\\.\\(([\\s\\S]*?)\\)", "'([^']*)'"]
+  ]
+}
+```
+
+This gives you autocompletion, hover previews, and linting for Tailwind
+classes in expressions like:
+
+```coffee
+h1.('text-3xl font-semibold') "Hello"
+button.('flex items-center px-4 py-2 rounded-full') "Click"
+```
+
 ## License
 
 MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rip-lang/ui",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "description": "Zero-build reactive web framework — rip.js + ui.rip + launch(url)",
   "type": "module",
   "main": "ui.rip",

package/serve.rip

@@ -2,27 +2,25 @@
 # @rip-lang/ui/serve — Rip UI Server Middleware
 # ==============================================================================
 #
-# Serves the Rip UI runtime, auto-generated app bundles, and optional
-# SSE hot-reload.
+# Serves the Rip UI runtime, auto-generated app bundles, and component files.
+# Hot-reload SSE is handled by rip-server; this middleware registers watch dirs.
 #
 # Usage:
 #   import { ripUI } from '@rip-lang/ui/serve'
-#   use ripUI dir: dir, components: 'pages', includes: ['ui'], watch: true, title: 'My App'
+#   use ripUI dir: dir, components: 'routes', includes: ['ui'], watch: true, title: 'My App'
 #
 # Options:
 #   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)
+#   watch:      boolean — enable hot-reload (registers watch dirs with rip-server)
 #   state:      object  — initial app state passed via bundle
 #   title:      string  — document title
 #
 # ==============================================================================
 
 import { get } from '@rip-lang/api'
-import { watch as fsWatch } from 'node:fs'
 
 export ripUI = (opts = {}) ->
   prefix        = opts.app or ''
@@ -30,7 +28,6 @@ export ripUI = (opts = {}) ->
   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
@@ -51,109 +48,45 @@ export ripUI = (opts = {}) ->
     ripUI._registered = true
 
   # ----------------------------------------------------------------------------
-  # Route: {prefix}/components/* — individual .rip component files (for hot-reload)
+  # Route: {prefix}/components/* — individual .rip component files
   # 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")
-      components = {}
-      paths = Array.from(glob.scanSync(componentsDir))
-      for path in paths
-        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
-
-    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 = []
+    glob = new Bun.Glob("**/*.rip")
+    components = {}
+    paths = Array.from(glob.scanSync(componentsDir))
+    for path in paths
+      components["components/#{path}"] = Bun.file("#{componentsDir}/#{path}").text!
+
+    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
+
+    new Response JSON.stringify({ components, data }), headers: { 'Content-Type': 'application/json' }
 
-      cleanup = ->
-        w.close() for w in watchers
-        clearTimeout(timer) if timer
-        clearInterval(heartbeat) if heartbeat
-        watchers = []
-        heartbeat = timer = null
-
-      new Response new ReadableStream(
-        start: (controller) ->
-          send = (event, data) ->
-            try
-              controller.enqueue encoder.encode("event: #{event}\ndata: #{JSON.stringify(data)}\n\n")
-            catch
-              cleanup()
-
-          send 'connected', { time: Date.now() }
-
-          heartbeat = setInterval ->
-            try
-              controller.enqueue encoder.encode(": heartbeat\n\n")
-            catch
-              cleanup()
-          , 5000
-
-          flush = ->
-            paths = Array.from(pending)
-            pending.clear()
-            timer = null
-            send('changed', { paths }) if paths.length > 0
-
-          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/'
+  # ----------------------------------------------------------------------------
+  # Register watch directories with rip-server via control socket
+  # ----------------------------------------------------------------------------
 
-        cancel: -> cleanup()
-      ),
-        headers:
-          'Content-Type': 'text/event-stream'
-          'Cache-Control': 'no-cache'
-          'Connection': 'keep-alive'
+  if enableWatch and process.env.SOCKET_PREFIX
+    ctl = "/tmp/#{process.env.SOCKET_PREFIX}.ctl.sock"
+    dirs = [componentsDir, ...includeDirs]
+    body = JSON.stringify({ op: 'watch', prefix, dirs })
+    fetch('http://localhost/watch', { method: 'POST', body, headers: { 'content-type': 'application/json' }, unix: ctl }).catch (e) ->
+      console.warn "rip-ui: watch registration failed: #{e.message}"
 
   # Return pass-through middleware
   (c, next) -> next!()

package/ui.rip

@@ -906,7 +906,7 @@ export launch = (appBase = '', opts = {}) ->
 
   # Connect SSE watch if enabled
   if bundle.data?.watch
-    connectWatch appComponents, router, renderer, "#{appBase}/watch", appBase
+    connectWatch "#{appBase}/watch"
 
   # Expose for console and dev tools
   if typeof window isnt 'undefined'
@@ -925,7 +925,7 @@ export launch = (appBase = '', opts = {}) ->
 # SSE Watch — hot-reload connection
 # ==============================================================================
 
-connectWatch = (components, router, renderer, url, base = '') ->
+connectWatch = (url) ->
   retryDelay = 1000
   maxDelay = 30000
 
@@ -933,31 +933,15 @@ connectWatch = (components, router, renderer, url, base = '') ->
     es = new EventSource(url)
 
     es.addEventListener 'connected', ->
-      retryDelay = 1000  # reset backoff on successful connection
+      retryDelay = 1000
       console.log '[Rip] Hot reload connected'
 
-    es.addEventListener 'changed', (e) ->
-      { paths } = JSON.parse(e.data)
-      components.del(path) for path in paths
-      router.rebuild()
-
-      current = router.current
-      toFetch = paths.filter (p) ->
-        p is current.route?.file or current.layouts?.includes(p)
-
-      if toFetch.length > 0
-        results = await Promise.allSettled(toFetch.map (path) ->
-          res = await fetch(base + '/' + path)
-          content = res.text!
-          components.write path, content
-        )
-        failed = results.filter (r) -> r.status is 'rejected'
-        console.error '[Rip] Hot reload fetch error:', r.reason for r in failed
-        renderer.remount()
+    es.addEventListener 'reload', ->
+      console.log '[Rip] Reloading...'
+      location.reload()
 
     es.onerror = ->
       es.close()
-      console.log "[Rip] Hot reload reconnecting in #{retryDelay / 1000}s..."
       setTimeout connect, retryDelay
       retryDelay = Math.min(retryDelay * 2, maxDelay)