funicular 0.2.1 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fa8a7ba40464c4e28ecc1b784612a9a62a8a88af985efd2508f142e03443fe9a
-  data.tar.gz: a81683de0aa13f2d91f21ccbddf6b8ed802f673567591adee4b12de6d0453d91
+  metadata.gz: 56720ac2a4a7635871515e66f55bf5ed272bb49cb7cc3a403671494720ef16d7
+  data.tar.gz: 7bf29c93a9480501c53e9b10cb33d29eb73ec22964300aed1c3e124206a3ab40
 SHA512:
-  metadata.gz: b2809132d4fc00812c2443c2fb42e6744bbb25449beee2cb03c2b6cd2302792da21ba7d6a98ac462f7bcdc10b17af87988fa8fb38e635fa747d3bbba1e346c60
-  data.tar.gz: df0f03841a9f97ab6269f088be4b16a488430419cf7b5d196615488d098d149c6241bc08f495b477f3f539a72df13725412be09768fb90c3d96560677c9e2390
+  metadata.gz: 297df4162ffbe5259e2fe5c7738a310714a42ff3e1704386560c65d27e9a6d5aa19f5374e700915b388e37f9879926e2454296e9a39bfee4080d04310e2df295
+  data.tar.gz: c56295e03efd38afc789b876717f3ce05a0631f02197843362ff627084db12fc3ecdd925b9c8ce437dbc8cff1b6fca9ff9b2b9396a5c22e24fd203fbcf50740d

data/CHANGELOG.md

@@ -2,6 +2,60 @@
 
 ### 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
+  propagation, enabling isolated route helper sets across multiple apps.
+
+### Breaking Changes
+
+- **0.3.0 is a deliberate breaking DSL redesign. Existing Funicular
+  components written for 0.2.x require source changes.**
+- Component render methods must now accept a view context:
+  `def render(h)`. The former implicit component-level DSL methods for HTML
+  tags, `component`, `form_for`, `link_to`, `button_to`, `suspense`, styles,
+  resources, and route helpers have been removed.
+- HTML and framework helpers are now called through `h`, for example
+  `h.div`, `h.component(...)`, `h.form_for(...)`, `h.link_to(...)`,
+  `h.suspense(...)`, `h.styles[...]`, `h.resources[...]`, and `h.routes`.
+- Component state reads are explicit: use `state[:key]`, `state.fetch(:key)`,
+  or `h.state[:key]`. The old `state.key_name` method-style access has been
+  removed.
+- Style definitions are explicit: use `styles { |css| css.define(...) }`.
+  The old dynamic style definition DSL has been removed.
+- Component children are stored as `VDOM::Component#children`. The old
+  `children_block` prop path has been removed and no compatibility shim is
+  provided.
+- Route helpers are scoped by `Funicular::Runtime`; global
+  `Funicular::RouteHelpers` injection has been removed. Code that depends on
+  route helpers should use `h.routes`.
+- `FormBuilder`, `ErrorBoundary`, SSR, hydration, renderer, patcher, and HTML
+  serialization now operate through the same `ViewContext` / `Runtime`
+  architecture.
+
+### Changed
+
+- Since mruby-compiler-prism, which used to be mruby-compiler2 producing
+  picorbc, has become the default compiler for mruby, we changed the name
+  from picorbc to mrbc.
+
+### Fixed
+
+- Harden VDOM rendering against HTML and script injection in both SSR and
+  browser rendering: validate tag and attribute names, reject `script`
+  elements, and consistently block case-obfuscated event handlers, `srcdoc`,
+  and unsafe URL schemes including control-character variants.
+
+## [0.2.1] - 2026-06-15
+
+### Added
+
+- **Funicular::Component**: Add `name` field to form to find state changed.
+
+## [0.2.0] - 2026-06-11
+
+### Added
+
 - **Funicular::Store DSL**: Declarative client-side stores backed by
   IndexedDB. Subclass `Funicular::Store::Singleton` (one value per scope)
   or `Funicular::Store::Collection` (ordered list per scope) and use

data/README.md

@@ -72,13 +72,13 @@ git clone --recurse-submodules https://github.com/picoruby/picoruby.git
 cd picoruby/mrbgems/picoruby-funicular
 ```
 
-The CRubyGem side (`lib/`, `funicular.gemspec`, etc.) can be developed and tested independently inside that directory, but `rake copy_wasm` — which vendors the PicoRuby.wasm and picorbc wasm artifacts into the gem — relies on sibling directories within the picoruby repository (`mrbgems/picoruby-wasm/npm/`).
+The CRubyGem side (`lib/`, `funicular.gemspec`, etc.) can be developed and tested independently inside that directory, but `rake copy_wasm` — which vendors the PicoRuby.wasm and mrbc wasm artifacts into the gem — relies on sibling directories within the picoruby repository (`mrbgems/picoruby-wasm/npm/`).
 Running it from a standalone checkout will fail.
 
 ## Testing
 
 - CRubygem (Rails integration) test: `rake test` in this repository
-- PicoGem Funicular test: `rake test:gems:picoruby[picoruby-funicular]` in picoruby where mrbgems/picoruby-funicular exists as a submodule
+- PicoGem Funicular test: `rake test:gems:wasm[picoruby-funicular]` in picoruby where mrbgems/picoruby-funicular exists as a submodule
 
 ## Contributing
 

data/Rakefile

@@ -9,9 +9,17 @@ Rake::TestTask.new(:test) do |t|
   t.test_files = FileList["minitest/**/*_test.rb"]
 end
 
+namespace :test do
+  desc "Run the test suite with SimpleCov coverage measurement (report in coverage/)"
+  task :coverage do
+    ENV["COVERAGE"] = "1"
+    Rake::Task["test"].invoke
+  end
+end
+
 task default: :test
 
-desc "Copy picoruby and picorbc wasm artifacts from picoruby-wasm into the gem"
+desc "Copy picoruby and mrbc wasm artifacts from picoruby-wasm into the gem"
 task :copy_wasm do
   require "fileutils"
   require "json"
@@ -59,25 +67,25 @@ task :copy_wasm do
   puts "  wrote picoruby/VERSION (#{picoruby_version})"
 
   # ------------------------------------------------------------------
-  # 2) picorbc compiler (node CLI, run by Funicular::Compiler)
+  # 2) mrbc compiler (node CLI, run by Funicular::Compiler)
   # ------------------------------------------------------------------
-  picorbc_src  = File.join(npm_root, "picorbc", "debug")
-  picorbc_dest = File.join(vendor_root, "picorbc")
-  abort "Missing #{picorbc_src}" unless Dir.exist?(picorbc_src)
+  mrbc_src  = File.join(npm_root, "mrbc", "debug")
+  mrbc_dest = File.join(vendor_root, "mrbc")
+  abort "Missing #{mrbc_src}" unless Dir.exist?(mrbc_src)
 
-  picorbc_version = JSON.parse(File.read(File.join(npm_root, "picorbc", "package.json"))).fetch("version")
-  picorbc_files = %w[picorbc.js picorbc.wasm]
+  mrbc_version = JSON.parse(File.read(File.join(npm_root, "mrbc", "package.json"))).fetch("version")
+  mrbc_files = %w[mrbc.js mrbc.wasm]
 
-  FileUtils.rm_rf(picorbc_dest)
-  FileUtils.mkdir_p(picorbc_dest)
-  picorbc_files.each do |fname|
-    src_file = File.join(picorbc_src, fname)
+  FileUtils.rm_rf(mrbc_dest)
+  FileUtils.mkdir_p(mrbc_dest)
+  mrbc_files.each do |fname|
+    src_file = File.join(mrbc_src, fname)
     abort "Missing file: #{src_file}" unless File.exist?(src_file)
-    FileUtils.copy_file(src_file, File.join(picorbc_dest, fname))
+    FileUtils.copy_file(src_file, File.join(mrbc_dest, fname))
   end
-  File.chmod(0755, File.join(picorbc_dest, "picorbc.js"))
-  File.write(File.join(picorbc_dest, "VERSION"), "#{picorbc_version}\n")
-  puts "  copied picorbc (#{picorbc_version})"
+  File.chmod(0755, File.join(mrbc_dest, "mrbc.js"))
+  File.write(File.join(mrbc_dest, "VERSION"), "#{mrbc_version}\n")
+  puts "  copied mrbc (#{mrbc_version})"
 
   # ------------------------------------------------------------------
   # 3) PicoRuby runtime for DOM-backed Node.js tests

data/demo/test_chartjs.html

@@ -44,7 +44,7 @@
           return
         end
 
-        current_data = state.data_sets[state.month_index]
+        current_data = state[:data_sets][state[:month_index]]
 
         config = {
           type: 'line',
@@ -69,7 +69,7 @@
       end
 
       def component_updated
-        puts "component_updated: Updating Chart.js with data index #{state.month_index}"
+        puts "component_updated: Updating Chart.js with data index #{state[:month_index]}"
         update_chart
       end
 
@@ -80,22 +80,22 @@
 
       def next_data_set(event)
         event.preventDefault if event
-        new_index = (state.month_index + 1) % state.data_sets.size
-        puts "next_data_set: Changing index from #{state.month_index} to #{new_index}"
+        new_index = (state[:month_index] + 1) % state[:data_sets].size
+        puts "next_data_set: Changing index from #{state[:month_index]} to #{new_index}"
         patch(month_index: new_index)
       end
 
       def prev_data_set(event)
         event.preventDefault if event
-        new_index = (state.month_index - 1) % state.data_sets.size
-        puts "prev_data_set: Changing index from #{state.month_index} to #{new_index}"
+        new_index = (state[:month_index] - 1) % state[:data_sets].size
+        puts "prev_data_set: Changing index from #{state[:month_index]} to #{new_index}"
         patch(month_index: new_index)
       end
 
       def update_chart
         return unless @chart
 
-        current_data = state.data_sets[state.month_index]
+        current_data = state[:data_sets][state[:month_index]]
         puts "update_chart: Setting data to #{current_data[:labels].join(', ')}"
 
         # Convert to JS objects
@@ -118,18 +118,18 @@
         puts "update_chart: Chart.js update('active') called"
       end
 
-      def render
-        div(id: "dashboard") do
-          h2 { "Sales Dashboard" }
-          div(id: "chart-container") do
-            canvas(ref: :chart_canvas, id: "chart")
+      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")
           end
-          div do
-            button(id: "prev-btn", onclick: :prev_data_set) { "Previous Quarter" }
-            button(id: "next-btn", onclick: :next_data_set) { "Next Quarter" }
+          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" }
           end
-          div(id: "info") do
-            current = state.data_sets[state.month_index]
+          hh.div(id: "info") do
+            current = state[:data_sets][state[:month_index]]
             "Current data: #{current[:labels].join(', ')}"
           end
         end

data/demo/test_component.html

@@ -40,26 +40,26 @@
 
       def increment(event)
         event.preventDefault if event
-        patch(count: state.count + 1)
+        patch(count: state[:count] + 1)
       end
 
       def decrement(event)
         event.preventDefault if event
-        patch(count: state.count - 1)
+        patch(count: state[:count] - 1)
       end
 
-      def render
-        div(id: "counter-app") do
-          h2 { "Counter: #{state.count}" }
-          div(id: "status") do
-            "Mounted: #{state.mounted}"
+      def render(h)
+        h.div(id: "counter-app") do |hh|
+          hh.h2 { "Counter: #{state[:count]}" }
+          hh.div(id: "status") do
+            "Mounted: #{state[:mounted]}"
           end
-          div do
-            button(id: "increment-btn", onclick: :increment) { "+1" }
-            button(id: "decrement-btn", onclick: :decrement) { "-1" }
+          hh.div do |hhh|
+            hhh.button(id: "increment-btn", onclick: :increment) { "+1" }
+            hhh.button(id: "decrement-btn", onclick: :decrement) { "-1" }
           end
-          div(ref: :display, id: "display") do
-            "Current value: #{state.count}"
+          hh.div(ref: :display, id: "display") do
+            "Current value: #{state[:count]}"
           end
         end
       end
@@ -89,7 +89,7 @@
       # Test 2: Initial state
       begin
         counter = TestCounter.new
-        initial_state = counter.state.count == 0
+        initial_state = counter.state[:count] == 0
         log_test("Initial state", initial_state)
       rescue => e
         log_test("Initial state", false)
@@ -139,13 +139,13 @@
         has_button = btn != nil
 
         # Test handler logic by calling it directly (standard testing approach)
-        initial_count = counter.state.count
+        initial_count = counter.state[:count]
         counter.increment(nil)
         sleep 0.05
 
         h2_element = JS.document.querySelector('#counter-app h2')
         text = h2_element.textContent.to_s
-        handler_works = counter.state.count == initial_count + 1 && text.include?("#{initial_count + 1}")
+        handler_works = counter.state[:count] == initial_count + 1 && text.include?("#{initial_count + 1}")
 
         log_test("Event handler (click)", has_button && handler_works)
       rescue => e

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
+      def render(h)
         raise "BrokenComponent intentionally threw this error!"
       end
     end
@@ -107,80 +107,80 @@
         patch(count: state[:count] + 1)
       end
 
-      def render
-        div(class: 'demo-card') do
-          h3 { "Working Component" }
-          p { "Count: #{state[:count]}" }
-          button(onclick: :increment) { "Increment" }
+      def render(h)
+        h.div(class: 'demo-card') do |hh|
+          hh.h3 { "Working Component" }
+          hh.p { "Count: #{state[:count]}" }
+          hh.button(onclick: :increment) { "Increment" }
         end
       end
     end
 
     # Main demo application
     class ErrorBoundaryDemo < Funicular::Component
-      def render
+      def render(h)
         error_handler = ->(error, info) {
           puts "[Demo] Error caught by ErrorBoundary:"
           puts "  Error: #{error.message}"
           puts "  Component: #{info&.dig(:component_class)}"
         }
 
-        custom_fallback = ->(error) {
-          div(style: 'background: linear-gradient(135deg, #ff6b6b, #ee5a5a); color: white; padding: 20px; border-radius: 8px;') do
-            h3(style: 'margin-top: 0;') { "Custom Error Handler" }
-            p { "Caught: #{error.message}" }
-            p(style: 'font-size: 12px; opacity: 0.8;') { "This is a custom fallback provided via props." }
+        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." }
           end
         }
 
-        div do
-          h2 { "Error Boundary Demonstrations" }
+        h.div do |hh|
+          hh.h2 { "Error Boundary Demonstrations" }
 
           # Demo 1: Default fallback
-          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)
+          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)
             end
           end
 
           # Demo 2: Custom fallback
-          div(class: 'demo-card') do
-            h3 { "Demo 2: Custom Fallback UI" }
-            p { "ErrorBoundary with a custom fallback prop." }
-            component(Funicular::ErrorBoundary,
+          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,
               fallback: custom_fallback,
               on_error: error_handler
-            ) do
-              component(BrokenComponent)
+            ) do |boundary|
+              boundary.component(BrokenComponent)
             end
           end
 
           # Demo 3: Mixed content - some work, some fail
-          div(class: 'demo-card') do
-            h3 { "Demo 3: Isolated Error Boundaries" }
-            p { "Each component has its own ErrorBoundary. One failure doesn't affect others." }
+          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(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)
+            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)
                 end
               end
 
-              div(style: 'flex: 1; min-width: 200px;') do
-                h4 { "Broken:" }
-                component(Funicular::ErrorBoundary) do
-                  component(BrokenComponent)
+              row.div(style: 'flex: 1; min-width: 200px;') do |col|
+                col.h4 { "Broken:" }
+                col.component(Funicular::ErrorBoundary) do |boundary|
+                  boundary.component(BrokenComponent)
                 end
               end
 
-              div(style: 'flex: 1; min-width: 200px;') do
-                h4 { "Also Working:" }
-                component(Funicular::ErrorBoundary) do
-                  component(WorkingComponent)
+              row.div(style: 'flex: 1; min-width: 200px;') do |col|
+                col.h4 { "Also Working:" }
+                col.component(Funicular::ErrorBoundary) do |boundary|
+                  boundary.component(WorkingComponent)
                 end
               end
             end

data/demo/test_router.html

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