RubyGems - funicular - Versions diffs - 0.0.1 → 0.1.0 - Mend

funicular 0.0.1 → 0.1.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 (81) hide show

checksums.yaml +4 -4
data/CHANGELOG.md +56 -1
data/README.md +58 -20
data/Rakefile +74 -2
data/demo/keymap_editor.html +582 -0
data/demo/test_cable.html +179 -0
data/demo/test_chartjs.html +235 -0
data/demo/test_component.html +201 -0
data/demo/test_diff_patch.html +146 -0
data/demo/test_error_boundary.html +284 -0
data/demo/test_router.html +257 -0
data/demo/test_vdom.html +100 -0
data/demo/tic-tac-toe.html +201 -0
data/docs/README.md +419 -0
data/docs/advanced-features.md +632 -0
data/docs/architecture.md +409 -0
data/docs/components-and-state.md +539 -0
data/docs/data-fetching.md +528 -0
data/docs/forms.md +446 -0
data/docs/rails-integration.md +426 -0
data/docs/realtime.md +543 -0
data/docs/routing-and-navigation.md +427 -0
data/docs/styling.md +285 -0
data/exe/funicular +32 -0
data/lib/funicular/assets/funicular.rb +21 -0
data/lib/funicular/assets/funicular_debug.css +73 -0
data/lib/funicular/assets/funicular_debug.js +183 -0
data/lib/funicular/commands/routes.rb +69 -0
data/lib/funicular/compiler.rb +135 -0
data/lib/funicular/configuration.rb +76 -0
data/lib/funicular/helpers/picoruby_helper.rb +50 -0
data/lib/funicular/middleware.rb +98 -0
data/lib/funicular/railtie.rb +26 -0
data/lib/funicular/route_parser.rb +137 -0
data/lib/funicular/vendor/picorbc/VERSION +1 -0
data/lib/funicular/vendor/picorbc/picorbc.js +5283 -0
data/lib/funicular/vendor/picorbc/picorbc.wasm +0 -0
data/lib/funicular/vendor/picoruby/VERSION +1 -0
data/lib/funicular/vendor/picoruby/debug/init.iife.js +130 -0
data/lib/funicular/vendor/picoruby/debug/picoruby.js +6404 -0
data/lib/funicular/vendor/picoruby/debug/picoruby.wasm +0 -0
data/lib/funicular/vendor/picoruby/dist/init.iife.js +130 -0
data/lib/funicular/vendor/picoruby/dist/picoruby.js +2 -0
data/lib/funicular/vendor/picoruby/dist/picoruby.wasm +0 -0
data/lib/funicular/version.rb +1 -1
data/lib/funicular.rb +29 -1
data/lib/tasks/funicular.rake +135 -0
data/minitest/funicular_test.rb +13 -0
data/minitest/test_helper.rb +7 -0
data/mrbgem.rake +15 -0
data/mrblib/cable.rb +417 -0
data/mrblib/component.rb +911 -0
data/mrblib/debug.rb +205 -0
data/mrblib/differ.rb +244 -0
data/mrblib/environment_inquirer.rb +34 -0
data/mrblib/error_boundary.rb +125 -0
data/mrblib/file_upload.rb +184 -0
data/mrblib/form_builder.rb +284 -0
data/mrblib/funicular.rb +156 -0
data/mrblib/http.rb +89 -0
data/mrblib/model.rb +146 -0
data/mrblib/patcher.rb +203 -0
data/mrblib/router.rb +229 -0
data/mrblib/styles.rb +83 -0
data/mrblib/vdom.rb +273 -0
data/sig/cable.rbs +65 -0
data/sig/component.rbs +141 -0
data/sig/debug.rbs +28 -0
data/sig/differ.rbs +18 -0
data/sig/environment_iquirer.rbs +10 -0
data/sig/error_boundary.rbs +14 -0
data/sig/file_upload.rbs +18 -0
data/sig/form_builder.rbs +29 -0
data/sig/funicular.rbs +11 -1
data/sig/http.rbs +22 -0
data/sig/model.rbs +23 -0
data/sig/patcher.rbs +15 -0
data/sig/router.rbs +43 -0
data/sig/styles.rbs +25 -0
data/sig/vdom.rbs +59 -0
metadata +119 -8

data/demo/test_diff_patch.html ADDED Viewed

@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>Test Diff/Patch - PicoRuby Funicular</title>
+  <link rel="stylesheet" href="../test.css">
+</head>
+<body>
+  <div><a href="../index.html">Back</a></div>
+  <h1>Diff/Patch Test Suite</h1>
+  <div id="test-results"></div>
+  <div id="container"></div>
+  <script type="text/ruby">
+    require 'js'
+    require 'funicular'
+    doc = JS.document
+    results = doc.getElementById('test-results')
+    container = doc.getElementById('container')
+    def test_case(name, &block)
+      doc = JS.document
+      results = doc.getElementById('test-results')
+      div = doc.createElement('div')
+      div.className = 'test-case'
+      begin
+        block.call
+        div.className = 'test-case pass'
+        div.textContent = "PASS: #{name}"
+      rescue => e
+        div.className = 'test-case fail'
+        div.textContent = "FAIL: #{name} - #{e.message}"
+      end
+      results.appendChild(div)
+    end
+    test_case("Diff text change") do
+      old = Funicular::VDOM.create_text('Hello')
+      new = Funicular::VDOM.create_text('World')
+      patches = Funicular::VDOM.diff(old, new)
+      raise "Diff failed" if patches.empty?
+      raise "Wrong patch type" unless patches[0][0] == :replace
+    end
+    test_case("Diff props change") do
+      old = Funicular::VDOM.create_element('button', { class: 'red' })
+      new = Funicular::VDOM.create_element('button', { class: 'blue' })
+      patches = Funicular::VDOM.diff(old, new)
+      raise "Diff failed" if patches.empty?
+      raise "Wrong patch type" unless patches[0][0] == :props
+      raise "Wrong prop value" unless patches[0][1][:class] == 'blue'
+    end
+    test_case("Diff no change") do
+      old = Funicular::VDOM.create_element('div', { id: 'test' }, 'Same')
+      new = Funicular::VDOM.create_element('div', { id: 'test' }, 'Same')
+      patches = Funicular::VDOM.diff(old, new)
+      raise "Should have no patches" unless patches.empty?
+    end
+    test_case("Diff tag change") do
+      old = Funicular::VDOM.create_element('div')
+      new = Funicular::VDOM.create_element('span')
+      patches = Funicular::VDOM.diff(old, new)
+      raise "Diff failed" if patches.empty?
+      raise "Wrong patch type" unless patches[0][0] == :replace
+    end
+    test_case("Diff child addition") do
+      old = Funicular::VDOM.create_element('ul')
+      new = Funicular::VDOM.create_element('ul', {},
+        Funicular::VDOM.create_element('li', {}, 'Item 1')
+      )
+      patches = Funicular::VDOM.diff(old, new)
+      raise "Diff failed" if patches.empty?
+      raise "Wrong patch structure" unless patches[0].is_a?(Array)
+      raise "Wrong child index" unless patches[0][0] == 0
+    end
+    test_case("Patch text content") do
+      container = doc.getElementById('container')
+      container.innerHTML = ''
+      old_vnode = Funicular::VDOM.create_element('p', {}, 'Old text')
+      dom_node = Funicular::VDOM.render(old_vnode, container)
+      new_vnode = Funicular::VDOM.create_element('p', {}, 'New text')
+      patches = Funicular::VDOM.diff(old_vnode, new_vnode)
+      child = container.children[0]
+      Funicular::VDOM.patch(child, patches)
+      updated_text = child[:textContent].to_s
+      raise "Patch failed: got '#{updated_text}'" unless updated_text == 'New text'
+    end
+    test_case("Patch attributes") do
+      container = doc.getElementById('container')
+      container.innerHTML = ''
+      old_vnode = Funicular::VDOM.create_element('div', { class: 'old', id: 'test' })
+      dom_node = Funicular::VDOM.render(old_vnode, container)
+      new_vnode = Funicular::VDOM.create_element('div', { class: 'new', id: 'test' })
+      patches = Funicular::VDOM.diff(old_vnode, new_vnode)
+      child = container.children[0]
+      Funicular::VDOM.patch(child, patches)
+      updated_class = child[:className].to_s
+      raise "Patch failed: got '#{updated_class}'" unless updated_class == 'new'
+    end
+    test_case("Patch nested elements") do
+      container = doc.getElementById('container')
+      container.innerHTML = ''
+      old_vnode = Funicular::VDOM.create_element('div', {},
+        Funicular::VDOM.create_element('p', {}, 'Old')
+      )
+      dom_node = Funicular::VDOM.render(old_vnode, container)
+      new_vnode = Funicular::VDOM.create_element('div', {},
+        Funicular::VDOM.create_element('p', {}, 'New')
+      )
+      patches = Funicular::VDOM.diff(old_vnode, new_vnode)
+      child = container.children[0]
+      Funicular::VDOM.patch(child, patches)
+      p_element = child[:children][0]
+      updated_text = p_element[:textContent].to_s
+      raise "Patch failed: got '#{updated_text}'" unless updated_text == 'New'
+    end
+    summary = doc.createElement('h2')
+    summary.textContent = 'All tests completed!'
+    summary.style = 'color: green; margin-top: 20px;'
+    results.appendChild(summary)
+  </script>
+  <script src="../init.iife.js"></script>
+</body>
+</html>

data/demo/test_error_boundary.html ADDED Viewed

@@ -0,0 +1,284 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>Funicular Error Boundary Test</title>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      padding: 20px;
+      max-width: 900px;
+      margin: 0 auto;
+    }
+    .test-section {
+      margin: 20px 0;
+      padding: 15px;
+      border: 1px solid #ccc;
+      border-radius: 5px;
+    }
+    .test-result {
+      margin: 10px 0;
+      padding: 10px;
+      border-radius: 4px;
+    }
+    .test-result.pass {
+      background-color: #d4edda;
+      color: #155724;
+    }
+    .test-result.fail {
+      background-color: #f8d7da;
+      color: #721c24;
+    }
+    #app {
+      margin-top: 20px;
+      padding: 20px;
+      border: 2px solid #007bff;
+      border-radius: 5px;
+    }
+    button {
+      margin: 5px;
+      padding: 8px 16px;
+      cursor: pointer;
+    }
+    .demo-card {
+      border: 1px solid #ddd;
+      border-radius: 8px;
+      padding: 15px;
+      margin: 10px 0;
+      background: #f9f9f9;
+    }
+    .demo-card h3 {
+      margin-top: 0;
+      color: #333;
+    }
+    .debug-panel {
+      background: #e9ecef;
+      border-radius: 4px;
+      padding: 15px;
+      margin-top: 20px;
+    }
+    .debug-panel h4 {
+      margin-top: 0;
+      color: #495057;
+    }
+    pre {
+      background: #1e1e1e;
+      color: #d4d4d4;
+      padding: 10px;
+      border-radius: 4px;
+      overflow-x: auto;
+      font-size: 12px;
+    }
+  </style>
+</head>
+<body>
+  <div><a href="../index.html">Back</a></div>
+  <h1>Funicular Error Boundary Demo</h1>
+  <p>This demo shows how ErrorBoundary catches errors from child components and displays fallback UI.</p>
+  <div id="test-results"></div>
+  <div id="app"></div>
+  <div class="debug-panel">
+    <h4>Debug Information</h4>
+    <p>Open browser console to see error logs.</p>
+    <button id="show-errors">Show Caught Errors</button>
+    <button id="show-tree">Show Component Tree</button>
+    <pre id="debug-output"></pre>
+  </div>
+  <script type="text/ruby">
+    # A component that always throws an error during render
+    class BrokenComponent < Funicular::Component
+      def render
+        raise "BrokenComponent intentionally threw this error!"
+      end
+    end
+    # A working component to show mixed content
+    class WorkingComponent < Funicular::Component
+      def initialize_state
+        { count: 0 }
+      end
+      def increment(event)
+        event.preventDefault
+        patch(count: state[:count] + 1)
+      end
+      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
+        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." }
+          end
+        }
+        div do
+          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)
+            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,
+              fallback: custom_fallback,
+              on_error: error_handler
+            ) do
+              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." }
+            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
+              div(style: 'flex: 1; min-width: 200px;') do
+                h4 { "Broken:" }
+                component(Funicular::ErrorBoundary) do
+                  component(BrokenComponent)
+                end
+              end
+              div(style: 'flex: 1; min-width: 200px;') do
+                h4 { "Also Working:" }
+                component(Funicular::ErrorBoundary) do
+                  component(WorkingComponent)
+                end
+              end
+            end
+          end
+        end
+      end
+    end
+    def log_test(name, passed)
+      results = JS.document.getElementById('test-results')
+      div = JS.document.createElement('div')
+      div.className = passed ? 'test-result pass' : 'test-result fail'
+      div.textContent = "#{passed ? 'PASS' : 'FAIL'}: #{name}"
+      results.appendChild(div)
+      puts "#{passed ? 'PASS' : 'FAIL'}: #{name}"
+    end
+    def run_tests
+      puts "Starting Error Boundary tests..."
+      # Test 1: ErrorBoundary class exists
+      begin
+        exists = Funicular.const_defined?(:ErrorBoundary) && Funicular::ErrorBoundary.is_a?(Class)
+        log_test("ErrorBoundary class exists", exists)
+      rescue => e
+        log_test("ErrorBoundary class exists", false)
+        puts "Error: #{e.message}"
+      end
+      # Test 2: ErrorBoundary inherits from Component
+      begin
+        inherits = Funicular::ErrorBoundary.ancestors.include?(Funicular::Component)
+        log_test("ErrorBoundary inherits from Component", inherits)
+      rescue => e
+        log_test("ErrorBoundary inherits from Component", false)
+        puts "Error: #{e.message}"
+      end
+      # Test 3: ErrorBoundary has initial state
+      begin
+        boundary = Funicular::ErrorBoundary.new
+        has_state = boundary.state[:has_error] == false && boundary.state[:error].nil?
+        log_test("ErrorBoundary has correct initial state", has_state)
+      rescue => e
+        log_test("ErrorBoundary has correct initial state", false)
+        puts "Error: #{e.message}"
+      end
+      # Test 4: catch_error method works
+      begin
+        boundary = Funicular::ErrorBoundary.new
+        test_error = RuntimeError.new("Test error")
+        boundary.catch_error(test_error, { component_class: "TestComponent" })
+        caught = boundary.state[:has_error] == true && boundary.state[:error] == test_error
+        log_test("catch_error updates state correctly", caught)
+      rescue => e
+        log_test("catch_error updates state correctly", false)
+        puts "Error: #{e.message}"
+      end
+      # Test 5: Debug module tracks errors
+      begin
+        Funicular::Debug.clear_errors
+        boundary = Funicular::ErrorBoundary.new
+        test_error = RuntimeError.new("Debug test error")
+        boundary.catch_error(test_error, { component_class: "DebugTestComponent" })
+        last_err = Funicular::Debug.last_error
+        tracked = last_err && last_err[:error_message] == "Debug test error"
+        log_test("Debug module tracks errors", tracked)
+      rescue => e
+        log_test("Debug module tracks errors", false)
+        puts "Error: #{e.message}"
+      end
+      puts "Unit tests completed! Starting demo..."
+    end
+    # Run tests first
+    run_tests
+    # Setup debug panel buttons
+    JS.document.getElementById('show-errors').addEventListener('click') do
+      output = JS.document.getElementById('debug-output')
+      errors = Funicular::Debug.error_list
+      output.textContent = "Caught Errors:\n#{errors}"
+    end
+    JS.document.getElementById('show-tree').addEventListener('click') do
+      output = JS.document.getElementById('debug-output')
+      tree = Funicular::Debug.component_tree
+      output.textContent = "Component Tree:\n#{tree}"
+    end
+    # Start the demo application
+    container = JS.document.getElementById('app')
+    Funicular.start(ErrorBoundaryDemo, container: container)
+  </script>
+  <script src="../init.iife.js"></script>
+</body>
+</html>

data/demo/test_router.html ADDED Viewed

@@ -0,0 +1,257 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>Funicular Router Test</title>
+  <style>
+    body { font-family: Arial, sans-serif; padding: 20px; }
+    nav { margin-bottom: 20px; padding: 10px; background: #f0f0f0; border-radius: 5px; }
+    nav a { margin-right: 15px; text-decoration: none; color: #007bff; cursor: pointer; }
+    nav a:hover { text-decoration: underline; }
+    #app { padding: 20px; border: 2px solid #007bff; border-radius: 5px; min-height: 200px; }
+    .page-title { color: #333; margin-bottom: 15px; }
+    button { padding: 8px 16px; margin: 5px; cursor: pointer; background: #007bff; color: white; border: none; border-radius: 4px; }
+    button:hover { background: #0056b3; }
+    .status { margin-top: 10px; padding: 10px; background: #e7f3ff; border-radius: 4px; }
+    .info { margin-bottom: 10px; padding: 10px; background: #fff3cd; border-radius: 4px; font-size: 14px; }
+  </style>
+</head>
+<body>
+  <div><a href="../index.html">Back</a></div>
+  <h1>Funicular Router Test</h1>
+  <div class="info">
+    This demo uses pathname-based routing (History API).
+    Navigation links use <code>Funicular.router.navigate()</code>.
+  </div>
+  <nav id="nav"></nav>
+  <div id="app"></div>
+  <script type="text/ruby">
+    # Navigation component (shared across all pages)
+    class NavComponent < Funicular::Component
+      def go_to(path)
+        ->(event) {
+          event.preventDefault
+          Funicular.router.navigate(path)
+        }
+      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' }
+        end
+      end
+    end
+    class LoginComponent < Funicular::Component
+      def initialize_state
+        { username: '' }
+      end
+      def on_username_input(event)
+        patch(username: event.target[:value].to_s)
+      end
+      def on_login_click(event)
+        event.preventDefault
+        Funicular.router.navigate('/home')
+      end
+      def render
+        div(class: 'login-page') do
+          h2(class: 'page-title') { 'Login Page' }
+          div do
+            input(
+              type: 'text',
+              placeholder: 'Username',
+              value: state.username,
+              oninput: :on_username_input
+            )
+          end
+          div do
+            button(onclick: :on_login_click) { 'Login' }
+          end
+          div(class: 'status') do
+            "Username: #{state.username}"
+          end
+        end
+      end
+    end
+    class HomeComponent < Funicular::Component
+      def initialize_state
+        { count: 0 }
+      end
+      def increment(event)
+        event.preventDefault
+        patch(count: state.count + 1)
+      end
+      def go_to_settings(event)
+        event.preventDefault
+        Funicular.router.navigate('/settings')
+      end
+      def render
+        div(class: 'home-page') do
+          h2(class: 'page-title') { 'Home Page' }
+          div do
+            "Counter: #{state.count}"
+          end
+          div do
+            button(onclick: :increment) { 'Increment' }
+            button(onclick: :go_to_settings) { 'Go to Settings' }
+          end
+          div(class: 'status') do
+            "You are on the home page. Click around to test routing!"
+          end
+        end
+      end
+    end
+    class SettingsComponent < Funicular::Component
+      def initialize_state
+        { theme: 'light', notifications: true }
+      end
+      def toggle_theme(event)
+        event.preventDefault
+        new_theme = state.theme == 'light' ? 'dark' : 'light'
+        patch(theme: new_theme)
+      end
+      def toggle_notifications(event)
+        event.preventDefault
+        patch(notifications: !state.notifications)
+      end
+      def go_to_home(event)
+        event.preventDefault
+        Funicular.router.navigate('/home')
+      end
+      def render
+        div(class: 'settings-page') do
+          h2(class: 'page-title') { 'Settings Page' }
+          div do
+            span { "Theme: #{state.theme}" }
+            button(onclick: :toggle_theme) { 'Toggle Theme' }
+          end
+          div do
+            span { "Notifications: #{state.notifications ? 'ON' : 'OFF'}" }
+            button(onclick: :toggle_notifications) { 'Toggle Notifications' }
+          end
+          div do
+            button(onclick: :go_to_home) { 'Back to Home' }
+          end
+          div(class: 'status') do
+            "Configure your settings here"
+          end
+        end
+      end
+    end
+    # Demonstrates dynamic route with :id parameter
+    class UsersComponent < Funicular::Component
+      def initialize_state
+        { users: [
+          { id: 1, name: 'Alice' },
+          { id: 2, name: 'Bob' },
+          { id: 3, name: 'Charlie' }
+        ]}
+      end
+      def go_to_user(id)
+        ->(event) {
+          event.preventDefault
+          Funicular.router.navigate("/users/#{id}")
+        }
+      end
+      def render
+        div(class: 'users-page') do
+          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
+                  user[:name]
+                end
+              end
+            end
+          end
+          div(class: 'status') do
+            "Click a user to see dynamic route with :id parameter"
+          end
+        end
+      end
+    end
+    class UserDetailComponent < Funicular::Component
+      def initialize_state
+        { user_id: @props[:id] }
+      end
+      def go_back(event)
+        event.preventDefault
+        Funicular.router.navigate('/users')
+      end
+      def render
+        div(class: 'user-detail-page') do
+          h2(class: 'page-title') { "User Detail" }
+          div do
+            "Viewing user ID: #{state.user_id}"
+          end
+          div do
+            button(onclick: :go_back) { 'Back to Users' }
+          end
+          div(class: 'status') do
+            "This page demonstrates dynamic routing with params[:id] = #{state.user_id}"
+          end
+        end
+      end
+    end
+    # Start router with Rails-style DSL
+    puts "Starting Funicular Router..."
+    Funicular.start(container: 'app') do |router|
+      # Rails-style route definitions with named routes
+      router.get '/login',      to: LoginComponent,      as: :login
+      router.get '/home',       to: HomeComponent,       as: :home
+      router.get '/settings',   to: SettingsComponent,   as: :settings
+      router.get '/users',      to: UsersComponent,      as: :users
+      router.get '/users/:id',  to: UserDetailComponent, as: :user
+      router.set_default('/login')
+    end
+    puts "Router started!"
+    # Mount navigation component separately
+    NavComponent.new.mount(JS.global.document.getElementById('nav'))
+  </script>
+  <script src="../init.iife.js"></script>
+</body>
+</html>