RubyGems - funicular - Versions diffs - 0.3.0 → 0.5.0 - Mend

funicular 0.3.0 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (85) hide show

checksums.yaml +4 -4
data/CHANGELOG.md +486 -1
data/demo/local_notes.html +207 -0
data/demo/test_chartjs.html +9 -9
data/demo/test_component.html +8 -8
data/demo/test_error_boundary.html +44 -41
data/demo/test_router.html +48 -48
data/demo/tic-tac-toe.html +25 -25
data/docs/architecture.md +227 -12
data/docs/local_database.md +1035 -0
data/lib/funicular/assets/funicular.rb +14 -0
data/lib/funicular/configuration.rb +65 -0
data/lib/funicular/epoch_header.rb +69 -0
data/lib/funicular/epoch_stamping.rb +66 -0
data/lib/funicular/helpers/picoruby_helper.rb +96 -1
data/lib/funicular/railtie.rb +30 -0
data/lib/funicular/schema.rb +45 -12
data/lib/funicular/session_epoch.rb +110 -0
data/lib/funicular/ssr/runtime.rb +58 -12
data/lib/funicular/ssr.rb +25 -0
data/lib/funicular/testing/node_runner.mjs +19 -0
data/lib/funicular/testing.rb +47 -0
data/lib/funicular/vendor/mrbc/VERSION +1 -1
data/lib/funicular/vendor/mrbc/mrbc.js +655 -574
data/lib/funicular/vendor/mrbc/mrbc.wasm +0 -0
data/lib/funicular/vendor/picoruby/VERSION +1 -1
data/lib/funicular/vendor/picoruby/debug/picoruby.js +800 -530
data/lib/funicular/vendor/picoruby/debug/picoruby.wasm +0 -0
data/lib/funicular/vendor/picoruby/dist/picoruby.js +2 -2
data/lib/funicular/vendor/picoruby/dist/picoruby.wasm +0 -0
data/lib/funicular/vendor/picoruby-test-node/VERSION +1 -1
data/lib/funicular/vendor/picoruby-test-node/picoruby.js +2 -6909
data/lib/funicular/vendor/picoruby-test-node/picoruby.wasm +0 -0
data/lib/funicular/version.rb +1 -1
data/lib/funicular.rb +1 -0
data/lib/generators/funicular/chat/templates/funicular_chat_component.rb.tt +37 -38
data/lib/tasks/funicular.rake +10 -2
data/minitest/callback_error_visibility_test.rb +48 -0
data/minitest/configuration_test.rb +78 -0
data/minitest/dsl_test.rb +264 -0
data/minitest/epoch_header_test.rb +149 -0
data/minitest/epoch_stamping_test.rb +225 -0
data/minitest/fixtures/funicular_app/components/greeting_component.rb +5 -5
data/minitest/fixtures/funicular_app/components/probe_component.rb +15 -0
data/minitest/form_for_test.rb +2 -2
data/minitest/hydration_test.rb +2 -2
data/minitest/navigation_guard_test.rb +65 -0
data/minitest/picoruby_helper_test.rb +236 -0
data/minitest/schema_test.rb +47 -0
data/minitest/session_epoch_test.rb +122 -0
data/minitest/sig_tags_test.rb +30 -0
data/minitest/ssr_database_test.rb +78 -0
data/minitest/ssr_reload_test.rb +106 -0
data/minitest/ssr_test.rb +41 -0
data/minitest/testing_ensure_compiled_test.rb +52 -0
data/minitest/validations_test.rb +35 -5
data/minitest/view_context_test.rb +15 -15
data/mrbgem.rake +2 -0
data/mrblib/0_tags.rb +62 -0
data/mrblib/cable.rb +1 -1
data/mrblib/component.rb +226 -24
data/mrblib/db.rb +3116 -0
data/mrblib/error_boundary.rb +25 -19
data/mrblib/file_upload.rb +17 -7
data/mrblib/form_builder.rb +10 -10
data/mrblib/funicular.rb +136 -17
data/mrblib/http.rb +84 -107
data/mrblib/model.rb +1178 -23
data/mrblib/relation.rb +342 -0
data/mrblib/router.rb +45 -4
data/mrblib/styles.rb +122 -12
data/mrblib/view_context.rb +3 -32
data/sig/component.rbs +25 -4
data/sig/db.rbs +328 -0
data/sig/error_boundary.rbs +4 -4
data/sig/funicular.rbs +5 -0
data/sig/http.rbs +8 -21
data/sig/model.rbs +101 -7
data/sig/relation.rbs +44 -0
data/sig/router.rbs +1 -0
data/sig/styles.rbs +19 -5
data/sig/tags.rbs +54 -0
data/sig/view_context.rbs +47 -34
metadata +23 -2
data/lib/funicular/vendor/picoruby-test-node/picoruby.wasm.map +0 -1

data/demo/local_notes.html ADDED Viewed

@@ -0,0 +1,207 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>Local Notes - Funicular</title>
+</head>
+<body>
+  <div><a href="../index.html">Back</a></div>
+  <h1>Local Notes (Funicular local database)</h1>
+  <!-- A page declaring storage :local models must choose its
+       namespace explicitly (docs decision 12) or the boot fails
+       loud. A Rails app gets these attributes from
+       picoruby_include_tag; this static page carries them by hand. -->
+  <div id="app"
+       data-funicular-local-database="true"
+       data-funicular-application-id="local_notes_demo"
+       data-funicular-anonymous-only="true"></div>
+  <div class="explain">
+    <p>A server-less demo of the local database layer:
+      <code>storage :local</code>, <code>.local</code> queries,
+      <code>watch</code>, snapshot persistence, the single-writer
+      election, and <code>Funicular::DB.wipe</code>.</p>
+    <ul>
+      <li><b>Add some notes, then reload the page.</b> The writer tab
+        snapshots the database into IndexedDB about half a second
+        after the last write, and the next visit restores it.</li>
+      <li><b>Open this page in a second tab.</b> Only one tab per
+        browser profile wins the writer election; the other becomes a
+        persistent reader whose writes raise. Close the writer tab
+        and reload the reader to take over.</li>
+      <li><b>Press "Wipe everything".</b> Both databases of this
+        namespace are dropped and rebuilt empty, the stored snapshots
+        are deleted, and the watcher re-renders onto empty tables.</li>
+      <li>The list re-renders through
+        <code>watch(:notes) { Note.local.order(created_at: :desc) }</code>
+        after every change event; no manual state bookkeeping.</li>
+    </ul>
+  </div>
+  <script type="text/ruby">
+    class Note < Funicular::Model
+      table_name "local_notes"
+      storage :local do
+        migrate 1 do |t|
+          t.string :title
+          t.timestamps
+        end
+      end
+    end
+    class NotesApp < Funicular::Component
+      READER_MESSAGE =
+        "This tab is a persistent reader: another tab holds the " \
+        "writer lock. Close the writer tab and reload to write here."
+      def initialize_state
+        # start boots the database before anything mounts, so the
+        # durability verdict is already final here.
+        {
+          notes: [],
+          message: "",
+          durability: Funicular::DB.durability,
+        }
+      end
+      def component_mounted
+        watch(:notes) { Note.local.order(created_at: :desc) }
+      end
+      def handle_add(event)
+        event.preventDefault
+        field = JS.document.getElementById("note-title")
+        title = field[:value].to_s
+        return if title.empty?
+        begin
+          Note.create(title: title)
+          field[:value] = ""
+          patch(message: "")
+        rescue Funicular::DB::ReadOnlyTabError
+          patch(message: READER_MESSAGE)
+        end
+      end
+      def handle_delete(note)
+        -> {
+          begin
+            note.destroy
+            patch(message: "")
+          rescue Funicular::DB::ReadOnlyTabError
+            patch(message: READER_MESSAGE)
+          end
+        }
+      end
+      def handle_wipe(event)
+        event.preventDefault
+        begin
+          Funicular::DB.wipe
+          patch(message: "Wiped: tables rebuilt empty, snapshots deleted.")
+        rescue Funicular::DB::ReadOnlyTabError
+          patch(message: READER_MESSAGE)
+        end
+      end
+      def render
+        notes = state[:notes]
+        div(class: "notes-app") do
+          p(class: "status") do
+            "durability: #{state[:durability]} | notes: #{notes.size}"
+          end
+          div(class: "composer") do
+            # A placeholder disappears as soon as text is typed, so it
+            # cannot be the field's accessible name.
+            label(for: "note-title") { "Note title" }
+            input(type: "text", id: "note-title",
+                  placeholder: "What to remember?")
+            button(onclick: :handle_add) { "Add" }
+            button(onclick: :handle_wipe, class: "danger") do
+              "Wipe everything"
+            end
+          end
+          p(class: "message") { state[:message] }
+          ul(class: "notes") do
+            notes.each do |note|
+              li(key: note.id) do
+                span(class: "title") { note.title }
+                span(class: "stamp") { note.created_at.to_s }
+                button(onclick: handle_delete(note), class: "delete") do
+                  "delete"
+                end
+              end
+            end
+          end
+        end
+      end
+    end
+    # No load_schemas round: a local-only app boots right inside
+    # start's gate. The namespace comes from the hand-written
+    # data-funicular-* attributes on the #app container above: pages
+    # with storage :local models must declare anonymous_only (or a
+    # user key) explicitly -- a silent shared default would merge
+    # every user's data, so the boot fails loud without it.
+    Funicular.start(NotesApp, container: 'app')
+  </script>
+  <script src="../init.iife.js"></script>
+</body>
+<style>
+.notes-app {
+  max-width: 560px;
+}
+.status {
+  color: #555;
+  font-family: monospace;
+}
+.composer input {
+  margin-right: 6px;
+  padding: 4px 6px;
+  width: 260px;
+}
+.composer button {
+  margin-right: 6px;
+}
+.composer .danger {
+  color: #a00;
+}
+.message {
+  color: #a00;
+  min-height: 1.2em;
+}
+ul.notes {
+  list-style: none;
+  padding: 0;
+}
+ul.notes li {
+  border-bottom: 1px solid #ddd;
+  display: flex;
+  gap: 10px;
+  padding: 6px 2px;
+}
+ul.notes .title {
+  flex: 1;
+}
+ul.notes .stamp {
+  color: #888;
+  font-size: 0.85em;
+}
+.explain {
+  border-top: 1px solid #ccc;
+  color: #333;
+  margin-top: 24px;
+  max-width: 640px;
+  padding-top: 12px;
+}
+</style>
+</html>

data/demo/test_chartjs.html CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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