funicular 0.3.0 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 56720ac2a4a7635871515e66f55bf5ed272bb49cb7cc3a403671494720ef16d7
-  data.tar.gz: 7bf29c93a9480501c53e9b10cb33d29eb73ec22964300aed1c3e124206a3ab40
+  metadata.gz: 5816e8e43d54e6bec4b6bb8a06da6165ab138e549cdbad649d2acba002a5fec4
+  data.tar.gz: 51ed5ca984f12669bfd1587bf384ea685c54e2d03dff9552d3cc49485d29081f
 SHA512:
-  metadata.gz: 297df4162ffbe5259e2fe5c7738a310714a42ff3e1704386560c65d27e9a6d5aa19f5374e700915b388e37f9879926e2454296e9a39bfee4080d04310e2df295
-  data.tar.gz: c56295e03efd38afc789b876717f3ce05a0631f02197843362ff627084db12fc3ecdd925b9c8ce437dbc8cff1b6fca9ff9b2b9396a5c22e24fd203fbcf50740d
+  metadata.gz: 360c39bdc7375ae5967c37f0b24437fa6d254f8814520ae984cc455195ac957b1279988a430f752e731eb40eab62cbeba178bc1ad08dc8836c7ce64c0d0810d5
+  data.tar.gz: 31bb97a1b6fbedbf3d1b1539c3e8ea5a8169c91095733c09d38f465c463a56071ecb766524945e307b66998708e09fff0ce0f6388e009f54b9d9945169922259

data/CHANGELOG.md

@@ -2,6 +2,63 @@
 
 ### Added
 
+- 0.4.0 bareword component DSL: `render` (zero-arity) runs with `self` as
+  the component, so HTML tags, `component`, `form_for`, `link_to`,
+  `button_to`, `suspense`, `state`, `props`, `styles`, `resources`, and
+  `routes` are all called bareword, without the 0.3.0 `h.` receiver.
+- DSL collision detection: tag and helper names are reserved inside
+  component classes. Defining one raises `Funicular::DSLCollisionError` at
+  class-definition time (`method_added`) or at first mount
+  (`validate_dsl_conflicts!`, covering `attr_*` on mruby and included
+  modules). `allow_dsl_override :name` opts out per class; the shadowed
+  element stays reachable via `tag(:name, ...)`.
+- Bareword style definitions: the class-level `styles do ... end` block
+  runs on a `BasicObject` cleanroom builder, so any name (including
+  `display`, `hash`, ...) defines a style identically on mruby and CRuby.
+  The explicit `styles { |css| css.define(...) }` form remains for
+  computed values.
+- Generated style accessors: each declared style name becomes a real
+  method on a per-component accessor, e.g. `styles.button(:disabled)`;
+  the `styles[:name, variant]` form is kept.
+
+### Breaking Changes
+
+- **0.4.0 is a breaking DSL change against 0.3.0. Components written for
+  0.3.0 migrate mechanically: delete the `render(h)` parameter, drop the
+  `h.` receivers, convert `css.define :name, "..."` to bareword
+  `name "..."`, and `h.styles[:name, variant]` to
+  `styles.name(variant)`.**
+- `p` inside a component builds a `<p>` element. Debug with
+  `puts x.inspect`; a non-Hash argument to any tag raises `ArgumentError`
+  with a hint.
+- A local variable named after a tag shadows the zero-paren call form
+  (plain Ruby scoping); write `option()` or rename the local.
+- Tag and helper names (RESERVED_DSL) can no longer be defined as
+  component methods without `allow_dsl_override`.
+- Style lookups of unknown names raise (`NoMethodError` for
+  `styles.typo`, `ArgumentError` for `styles[:typo]`) instead of
+  silently returning an empty class string. Style definition values are
+  validated (String / Hash / keyword options; unknown option keys raise).
+- Tag helpers called while the component is not rendering raise
+  `Funicular::RenderContextError` instead of being silently dropped.
+- `ErrorBoundary` `fallback:`/`error:` procs keep an explicit view
+  context (`->(h, error) { h.div { ... } }`): they are created in the
+  parent's scope but run during the boundary's render, so barewords
+  cannot work there by design.
+- `Component#render_suspense` no longer takes a view context; suspense
+  `fallback:`/`error:`/content procs run bareword in their own component
+  (`fallback: -> { div { "Loading" } }`).
+
+### Changed
+
+- Requires picoruby-wasm with `JS::Object < BasicObject` (picoruby
+  9e69333f): Kernel names (`hash`, `send`, `open`, ...) no longer shadow
+  JS property access, and unknown `?`/`!` methods on JS values raise.
+
+## [0.3.0] - 2026-07-13
+
+### Added
+
 - 0.3.0 rendering architecture: `render(h)` now receives a `ViewContext`
   facade for elements, components, forms, styles, resources, and routes.
 - Per-app `Runtime` context for route helpers and renderer/serializer

data/demo/test_chartjs.html

@@ -118,17 +118,17 @@
         puts "update_chart: Chart.js update('active') called"
       end
 
-      def render(h)
-        h.div(id: "dashboard") do |hh|
-          hh.h2 { "Sales Dashboard" }
-          hh.div(id: "chart-container") do |hhh|
-            hhh.canvas(ref: :chart_canvas, id: "chart")
+      def render
+        div(id: "dashboard") do
+          h2 { "Sales Dashboard" }
+          div(id: "chart-container") do
+            canvas(ref: :chart_canvas, id: "chart")
           end
-          hh.div do |hhh|
-            hhh.button(id: "prev-btn", onclick: :prev_data_set) { "Previous Quarter" }
-            hhh.button(id: "next-btn", onclick: :next_data_set) { "Next Quarter" }
+          div do
+            button(id: "prev-btn", onclick: :prev_data_set) { "Previous Quarter" }
+            button(id: "next-btn", onclick: :next_data_set) { "Next Quarter" }
           end
-          hh.div(id: "info") do
+          div(id: "info") do
             current = state[:data_sets][state[:month_index]]
             "Current data: #{current[:labels].join(', ')}"
           end

data/demo/test_component.html

@@ -48,17 +48,17 @@
         patch(count: state[:count] - 1)
       end
 
-      def render(h)
-        h.div(id: "counter-app") do |hh|
-          hh.h2 { "Counter: #{state[:count]}" }
-          hh.div(id: "status") do
+      def render
+        div(id: "counter-app") do
+          h2 { "Counter: #{state[:count]}" }
+          div(id: "status") do
             "Mounted: #{state[:mounted]}"
           end
-          hh.div do |hhh|
-            hhh.button(id: "increment-btn", onclick: :increment) { "+1" }
-            hhh.button(id: "decrement-btn", onclick: :decrement) { "-1" }
+          div do
+            button(id: "increment-btn", onclick: :increment) { "+1" }
+            button(id: "decrement-btn", onclick: :decrement) { "-1" }
           end
-          hh.div(ref: :display, id: "display") do
+          div(ref: :display, id: "display") do
             "Current value: #{state[:count]}"
           end
         end

data/demo/test_error_boundary.html

@@ -91,7 +91,7 @@
   <script type="text/ruby">
     # A component that always throws an error during render
     class BrokenComponent < Funicular::Component
-      def render(h)
+      def render
         raise "BrokenComponent intentionally threw this error!"
       end
     end
@@ -107,80 +107,83 @@
         patch(count: state[:count] + 1)
       end
 
-      def render(h)
-        h.div(class: 'demo-card') do |hh|
-          hh.h3 { "Working Component" }
-          hh.p { "Count: #{state[:count]}" }
-          hh.button(onclick: :increment) { "Increment" }
+      def render
+        div(class: 'demo-card') do
+          h3 { "Working Component" }
+          p { "Count: #{state[:count]}" }
+          button(onclick: :increment) { "Increment" }
         end
       end
     end
 
     # Main demo application
     class ErrorBoundaryDemo < Funicular::Component
-      def render(h)
+      def render
         error_handler = ->(error, info) {
           puts "[Demo] Error caught by ErrorBoundary:"
           puts "  Error: #{error.message}"
           puts "  Component: #{info&.dig(:component_class)}"
         }
 
-        custom_fallback = ->(hh, error) {
-          hh.div(style: 'background: linear-gradient(135deg, #ff6b6b, #ee5a5a); color: white; padding: 20px; border-radius: 8px;') do |hhh|
-            hhh.h3(style: 'margin-top: 0;') { "Custom Error Handler" }
-            hhh.p { "Caught: #{error.message}" }
-            hhh.p(style: 'font-size: 12px; opacity: 0.8;') { "This is a custom fallback provided via props." }
+        # NOTE: an ErrorBoundary fallback runs during the BOUNDARY's render,
+        # not this component's, so it cannot use bareword tags. It receives
+        # the boundary's view context and builds elements through it.
+        custom_fallback = ->(h, error) {
+          h.div(style: 'background: linear-gradient(135deg, #ff6b6b, #ee5a5a); color: white; padding: 20px; border-radius: 8px;') do
+            h.h3(style: 'margin-top: 0;') { "Custom Error Handler" }
+            h.p { "Caught: #{error.message}" }
+            h.p(style: 'font-size: 12px; opacity: 0.8;') { "This is a custom fallback provided via props." }
           end
         }
 
-        h.div do |hh|
-          hh.h2 { "Error Boundary Demonstrations" }
+        div do
+          h2 { "Error Boundary Demonstrations" }
 
           # Demo 1: Default fallback
-          hh.div(class: 'demo-card') do |card|
-            card.h3 { "Demo 1: Default Fallback UI" }
-            card.p { "ErrorBoundary wraps a component that always throws. Default fallback is shown." }
-            card.component(Funicular::ErrorBoundary, on_error: error_handler) do |boundary|
-              boundary.component(BrokenComponent)
+          div(class: 'demo-card') do
+            h3 { "Demo 1: Default Fallback UI" }
+            p { "ErrorBoundary wraps a component that always throws. Default fallback is shown." }
+            component(Funicular::ErrorBoundary, on_error: error_handler) do
+              component(BrokenComponent)
             end
           end
 
           # Demo 2: Custom fallback
-          hh.div(class: 'demo-card') do |card|
-            card.h3 { "Demo 2: Custom Fallback UI" }
-            card.p { "ErrorBoundary with a custom fallback prop." }
-            card.component(Funicular::ErrorBoundary,
+          div(class: 'demo-card') do
+            h3 { "Demo 2: Custom Fallback UI" }
+            p { "ErrorBoundary with a custom fallback prop." }
+            component(Funicular::ErrorBoundary,
               fallback: custom_fallback,
               on_error: error_handler
-            ) do |boundary|
-              boundary.component(BrokenComponent)
+            ) do
+              component(BrokenComponent)
             end
           end
 
           # Demo 3: Mixed content - some work, some fail
-          hh.div(class: 'demo-card') do |card|
-            card.h3 { "Demo 3: Isolated Error Boundaries" }
-            card.p { "Each component has its own ErrorBoundary. One failure doesn't affect others." }
+          div(class: 'demo-card') do
+            h3 { "Demo 3: Isolated Error Boundaries" }
+            p { "Each component has its own ErrorBoundary. One failure doesn't affect others." }
 
-            card.div(style: 'display: flex; gap: 15px; flex-wrap: wrap;') do |row|
-              row.div(style: 'flex: 1; min-width: 200px;') do |col|
-                col.h4 { "Working:" }
-                col.component(Funicular::ErrorBoundary) do |boundary|
-                  boundary.component(WorkingComponent)
+            div(style: 'display: flex; gap: 15px; flex-wrap: wrap;') do
+              div(style: 'flex: 1; min-width: 200px;') do
+                h4 { "Working:" }
+                component(Funicular::ErrorBoundary) do
+                  component(WorkingComponent)
                 end
               end
 
-              row.div(style: 'flex: 1; min-width: 200px;') do |col|
-                col.h4 { "Broken:" }
-                col.component(Funicular::ErrorBoundary) do |boundary|
-                  boundary.component(BrokenComponent)
+              div(style: 'flex: 1; min-width: 200px;') do
+                h4 { "Broken:" }
+                component(Funicular::ErrorBoundary) do
+                  component(BrokenComponent)
                 end
               end
 
-              row.div(style: 'flex: 1; min-width: 200px;') do |col|
-                col.h4 { "Also Working:" }
-                col.component(Funicular::ErrorBoundary) do |boundary|
-                  boundary.component(WorkingComponent)
+              div(style: 'flex: 1; min-width: 200px;') do
+                h4 { "Also Working:" }
+                component(Funicular::ErrorBoundary) do
+                  component(WorkingComponent)
                 end
               end
             end

data/demo/test_router.html

@@ -39,12 +39,12 @@
         }
       end
 
-      def render(h)
-        h.nav do |hh|
-          hh.a(href: '/login', onclick: go_to('/login')) { 'Login' }
-          hh.a(href: '/home', onclick: go_to('/home')) { 'Home' }
-          hh.a(href: '/settings', onclick: go_to('/settings')) { 'Settings' }
-          hh.a(href: '/users', onclick: go_to('/users')) { 'Users' }
+      def render
+        nav do
+          a(href: '/login', onclick: go_to('/login')) { 'Login' }
+          a(href: '/home', onclick: go_to('/home')) { 'Home' }
+          a(href: '/settings', onclick: go_to('/settings')) { 'Settings' }
+          a(href: '/users', onclick: go_to('/users')) { 'Users' }
         end
       end
     end
@@ -63,12 +63,12 @@
         Funicular.router.navigate('/home')
       end
 
-      def render(h)
-        h.div(class: 'login-page') do |hh|
-          hh.h2(class: 'page-title') { 'Login Page' }
+      def render
+        div(class: 'login-page') do
+          h2(class: 'page-title') { 'Login Page' }
 
-          hh.div do |hhh|
-            hhh.input(
+          div do
+            input(
               type: 'text',
               placeholder: 'Username',
               value: state[:username],
@@ -76,11 +76,11 @@
             )
           end
 
-          hh.div do |hhh|
-            hhh.button(onclick: :on_login_click) { 'Login' }
+          div do
+            button(onclick: :on_login_click) { 'Login' }
           end
 
-          hh.div(class: 'status') do
+          div(class: 'status') do
             "Username: #{state[:username]}"
           end
         end
@@ -102,20 +102,20 @@
         Funicular.router.navigate('/settings')
       end
 
-      def render(h)
-        h.div(class: 'home-page') do |hh|
-          hh.h2(class: 'page-title') { 'Home Page' }
+      def render
+        div(class: 'home-page') do
+          h2(class: 'page-title') { 'Home Page' }
 
-          hh.div do
+          div do
             "Counter: #{state[:count]}"
           end
 
-          hh.div do |hhh|
-            hhh.button(onclick: :increment) { 'Increment' }
-            hhh.button(onclick: :go_to_settings) { 'Go to Settings' }
+          div do
+            button(onclick: :increment) { 'Increment' }
+            button(onclick: :go_to_settings) { 'Go to Settings' }
           end
 
-          hh.div(class: 'status') do
+          div(class: 'status') do
             "You are on the home page. Click around to test routing!"
           end
         end
@@ -143,25 +143,25 @@
         Funicular.router.navigate('/home')
       end
 
-      def render(h)
-        h.div(class: 'settings-page') do |hh|
-          hh.h2(class: 'page-title') { 'Settings Page' }
+      def render
+        div(class: 'settings-page') do
+          h2(class: 'page-title') { 'Settings Page' }
 
-          hh.div do |hhh|
-            hhh.span { "Theme: #{state[:theme]}" }
-            hhh.button(onclick: :toggle_theme) { 'Toggle Theme' }
+          div do
+            span { "Theme: #{state[:theme]}" }
+            button(onclick: :toggle_theme) { 'Toggle Theme' }
           end
 
-          hh.div do |hhh|
-            hhh.span { "Notifications: #{state[:notifications] ? 'ON' : 'OFF'}" }
-            hhh.button(onclick: :toggle_notifications) { 'Toggle Notifications' }
+          div do
+            span { "Notifications: #{state[:notifications] ? 'ON' : 'OFF'}" }
+            button(onclick: :toggle_notifications) { 'Toggle Notifications' }
           end
 
-          hh.div do |hhh|
-            hhh.button(onclick: :go_to_home) { 'Back to Home' }
+          div do
+            button(onclick: :go_to_home) { 'Back to Home' }
           end
 
-          hh.div(class: 'status') do
+          div(class: 'status') do
             "Configure your settings here"
           end
         end
@@ -185,21 +185,21 @@
         }
       end
 
-      def render(h)
-        h.div(class: 'users-page') do |hh|
-          hh.h2(class: 'page-title') { 'Users List' }
+      def render
+        div(class: 'users-page') do
+          h2(class: 'page-title') { 'Users List' }
 
-          hh.ul do |hhh|
+          ul do
             state[:users].each do |user|
-              hhh.li do |item|
-                item.a(href: "/users/#{user[:id]}", onclick: go_to_user(user[:id])) do
+              li do
+                a(href: "/users/#{user[:id]}", onclick: go_to_user(user[:id])) do
                   user[:name]
                 end
               end
             end
           end
 
-          hh.div(class: 'status') do
+          div(class: 'status') do
             "Click a user to see dynamic route with :id parameter"
           end
         end
@@ -216,19 +216,19 @@
         Funicular.router.navigate('/users')
       end
 
-      def render(h)
-        h.div(class: 'user-detail-page') do |hh|
-          hh.h2(class: 'page-title') { "User Detail" }
+      def render
+        div(class: 'user-detail-page') do
+          h2(class: 'page-title') { "User Detail" }
 
-          hh.div do
+          div do
             "Viewing user ID: #{state[:user_id]}"
           end
 
-          hh.div do |hhh|
-            hhh.button(onclick: :go_back) { 'Back to Users' }
+          div do
+            button(onclick: :go_back) { 'Back to Users' }
           end
 
-          hh.div(class: 'status') do
+          div(class: 'status') do
             "This page demonstrates dynamic routing with params[:id] = #{state[:user_id]}"
           end
         end

data/demo/tic-tac-toe.html

@@ -38,8 +38,8 @@
         on_click.call if on_click
       end
 
-      def render(h)
-        h.button(class: 'square', onclick: :handle_click) do
+      def render
+        button(class: 'square', onclick: :handle_click) do
           props[:value] || ''
         end
       end
@@ -55,7 +55,7 @@
         }
       end
 
-      def render(h)
+      def render
         squares = props[:squares]
         x_is_next = props[:x_is_next]
 
@@ -66,22 +66,22 @@
           "Next player: #{x_is_next ? 'X' : 'O'}"
         end
 
-        h.div do |hh|
-          hh.div(class: 'status') { status }
-          hh.div(class: 'board-row') do |hhh|
-            hhh.component(Square, value: squares[0], on_click: handle_click(0))
-            hhh.component(Square, value: squares[1], on_click: handle_click(1))
-            hhh.component(Square, value: squares[2], on_click: handle_click(2))
+        div do
+          div(class: 'status') { status }
+          div(class: 'board-row') do
+            component(Square, value: squares[0], on_click: handle_click(0))
+            component(Square, value: squares[1], on_click: handle_click(1))
+            component(Square, value: squares[2], on_click: handle_click(2))
           end
-          hh.div(class: 'board-row') do |hhh|
-            hhh.component(Square, value: squares[3], on_click: handle_click(3))
-            hhh.component(Square, value: squares[4], on_click: handle_click(4))
-            hhh.component(Square, value: squares[5], on_click: handle_click(5))
+          div(class: 'board-row') do
+            component(Square, value: squares[3], on_click: handle_click(3))
+            component(Square, value: squares[4], on_click: handle_click(4))
+            component(Square, value: squares[5], on_click: handle_click(5))
           end
-          hh.div(class: 'board-row') do |hhh|
-            hhh.component(Square, value: squares[6], on_click: handle_click(6))
-            hhh.component(Square, value: squares[7], on_click: handle_click(7))
-            hhh.component(Square, value: squares[8], on_click: handle_click(8))
+          div(class: 'board-row') do
+            component(Square, value: squares[6], on_click: handle_click(6))
+            component(Square, value: squares[7], on_click: handle_click(7))
+            component(Square, value: squares[8], on_click: handle_click(8))
           end
         end
       end
@@ -115,30 +115,30 @@
         }
       end
 
-      def render(h)
+      def render
         history = state[:history]
         current_move = state[:current_move]
         x_is_next = (current_move % 2 == 0)
         current_squares = history[current_move]
 
-        h.div(class: 'game') do |hh|
-          hh.div(class: 'game-board') do |hhh|
-            hhh.component(Board,
+        div(class: 'game') do
+          div(class: 'game-board') do
+            component(Board,
               x_is_next: x_is_next,
               squares: current_squares,
               on_play: ->(i) { handle_play(i) }
             )
           end
-          hh.div(class: 'game-info') do |hhh|
-            hhh.ol do |hhhh|
+          div(class: 'game-info') do
+            ol do
               history.each_with_index do |_squares, move|
                 description = if move > 0
                   "Go to move ##{move}"
                 else
                   'Go to game start'
                 end
-                hhhh.li(key: move) do |item|
-                  item.button(onclick: jump_to(move)) { description }
+                li(key: move) do
+                  button(onclick: jump_to(move)) { description }
                 end
               end
             end

data/docs/architecture.md

@@ -30,7 +30,8 @@ stay free of browser-only calls on any server code path
 |---------------------------------------------------------|-------------------------------------------------------------------------------------------------|
 | `funicular.rb`                                          | Top-level module: `start`, `router`, `server?`, `debug_color` export                            |
 | `runtime.rb`                                            | Per-app runtime context propagated through render/SSR/hydration                                 |
-| `view_context.rb`                                       | Thin render facade passed as `render(h)`: elements, components, forms, routes, styles, suspense |
+| `0_tags.rb`                                             | Bareword tag DSL mixed into `Component`; reserved-name list and collision errors                |
+| `view_context.rb`                                       | Internal element factory shared by the tag DSL, FormBuilder, and framework helpers              |
 | `component.rb`                                          | `Funicular::Component` base: state, props, lifecycle, suspense loading, refs                    |
 | `vdom.rb`                                               | Virtual DOM nodes, including component vnodes with ordinary `children`                          |
 | `differ.rb`                                             | `Differ.diff(old, new)` -- minimal patch set, key-based list reconciliation                     |
@@ -41,25 +42,44 @@ stay free of browser-only calls on any server code path
 | `http.rb`                                               | Low-level fetch wrapper, CSRF, IndexedDB response cache                                         |
 | `cable.rb`                                              | ActionCable-compatible consumer/subscription client                                             |
 | `store.rb`, `store_singleton.rb`, `store_collection.rb` | IndexedDB-backed stores, scope API, `subscribes_to`, event dispatch                             |
-| `form_builder.rb`                                       | `h.form_for` field helpers with inline error rendering                                          |
+| `form_builder.rb`                                       | `form_for` field helpers with inline error rendering                                            |
 | `0_validations.rb`, `1_validators.rb`                   | ActiveModel-style validators and `errors`                                                       |
-| `styles.rb`                                             | CSS-in-Ruby `styles { |css| css.define ... }` and `h.styles[...]` access                        |
+| `styles.rb`                                             | CSS-in-Ruby bareword `styles do ... end` builder and generated `styles.name` accessors          |
 | `error_boundary.rb`                                     | `ErrorBoundary` component                                                                       |
 | `file_upload.rb`                                        | File / FormData upload helper                                                                   |
 | `debug.rb`                                              | Development-only component/error registry for the DevTools extension                            |
 | `environment_inquirer.rb`                               | Environment detection (`server?`, `development?`)                                               |
 
 The render cycle: a state change calls `patch()`, which rebuilds the component's
-VDOM by calling `render(h)`, diffs it against the previous VDOM with `Differ`,
+VDOM by calling `render`, diffs it against the previous VDOM with `Differ`,
 and applies the result with `Patcher`. Event handlers are native DOM listeners,
 re-bound on each render.
 
-Application code receives all render helpers through `h`. HTML is authored as
-`h.div`, custom elements as `h.tag(:custom_element)`, child components as
-`h.component`, forms as `h.form_for`, styles as `h.styles[:name]`, resources as
-`h.resources[:name]`, and routes as `h.routes.user_path(id)`. Component state is
+Inside `render` (zero-arity as of 0.4.0), `self` is the component, so the
+DSL is bareword: HTML is authored as `div`, custom elements as
+`tag(:custom_element)`, child components as `component`, forms as `form_for`,
+styles as `styles.name(variant)` or `styles[:name]`, resources as
+`resources[:name]`, and routes as `routes.user_path(id)`. Component state is
 explicitly read with `state[:name]` or `state.fetch(:name)`.
 
+Tag and helper names (~46 words) are reserved inside component classes:
+defining one raises `DSLCollisionError` at class-definition time
+(`method_added`) or at first mount (`validate_dsl_conflicts!`, which also
+covers `attr_*` on mruby and included modules). `allow_dsl_override :name`
+opts out per class; the shadowed element stays reachable via `tag(:name)`.
+Two caveats are inherent to barewords: `p` builds a `<p>` element (use
+`puts x.inspect` for debugging; non-Hash arguments raise with a hint), and
+a local variable named after a tag shadows the zero-paren call form (write
+`option()` or rename the local). Procs handed to ANOTHER component --
+ErrorBoundary's `fallback:` -- run under that component's cursor and
+therefore receive an explicit view context instead of barewords.
+
+Style definitions are bareword too: the class-level `styles do ... end`
+block runs on a BasicObject cleanroom builder, so any name (including
+`display`, `hash`, ...) defines a style identically on mruby and CRuby.
+Computed values need the explicit form `styles { |css| css.define(...) }`.
+Unknown style lookups raise instead of returning an empty class string.
+
 Component children are ordinary VDOM children stored on
 `VDOM::Component#children`; there is no delayed `children_block` prop. This keeps
 SSR, diffing, ErrorBoundary rendering, and hydration on the same data model.
@@ -96,6 +116,23 @@ SSR, diffing, ErrorBoundary rendering, and hydration on the same data model.
 Because `copy_wasm` reads sibling directories inside the picoruby repository, it
 only works from within that checkout -- see Development below.
 
+## JavaScript interop contract
+
+As of picoruby commit 9e69333f, `JS::Object` inherits `BasicObject` instead of
+`Object`. Consequences for framework code:
+
+- Dot access on JS values is reliable for names Kernel used to shadow
+  (`hash`, `send`, `open`, `class`, `method`, ...): they now reach the JS side
+  via `method_missing`.
+- The Ruby protocol predicates `nil?`, `is_a?`, `kind_of?`, `instance_of?`, and
+  `respond_to?` are defined in C on `JS::Object` (a `?` suffix is illegal in a
+  JS identifier, so they can never shadow a JS property). `respond_to?` does a
+  real method-table lookup only; it does not report JS properties.
+- Any other name ending in `?` or `!` raises `NoMethodError` instead of being
+  forwarded to JS, so typos fail loudly rather than silently returning nil.
+- `==`, `to_s`, `inspect`, `[]`, `[]=`, `to_a`, and `typeof` are defined
+  directly on `JS::Object` and behave as before.
+
 ## Server-side rendering, briefly
 
 For SSR the `mrblib/` framework is loaded into the Rails process under CRuby.
@@ -103,7 +140,7 @@ For SSR the `mrblib/` framework is loaded into the Rails process under CRuby.
 `app/funicular/initializer.rb`, builds a `Runtime` around that router, builds the
 component's VDOM, and serializes it with `HTMLSerializer`. The state is also
 embedded as `window.__FUNICULAR_STATE__` so the browser can hydrate the markup
-rather than rebuild it. Keep `render(h)` deterministic and free of browser-only
+rather than rebuild it. Keep `render` deterministic and free of browser-only
 calls so the same code is safe on both sides.
 
 ## Development

data/lib/funicular/ssr/runtime.rb

@@ -21,6 +21,7 @@ module Funicular
       # few real dependencies exist (vdom before html_serializer; styles and
       # vdom before component; component before error_boundary).
       LOAD_ORDER = %w[
+        0_tags
         environment_inquirer
         vdom
         html_serializer

data/lib/funicular/vendor/mrbc/VERSION

@@ -1 +1 @@
-4.0.1
+4.0.2