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_cable.html ADDED Viewed

@@ -0,0 +1,179 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>Funicular::Cable Test</title>
+  <link rel="stylesheet" href="../test.css">
+</head>
+<body>
+  <div><a href="../index.html">Back</a></div>
+  <h1>Funicular::Cable Test</h1>
+  <p>Make sure the test server is running: <code>cd mrbgems/picoruby-funicular/demo/cable_server && ruby server.rb</code></p>
+  <div class="test-section">
+    <h3>Connection Status</h3>
+    <div id="status" class="status disconnected">Disconnected</div>
+  </div>
+  <div class="test-section">
+    <h3>Test 1: Basic Connection</h3>
+    <button id="btn-test1">Test Connection</button>
+    <div id="test1-result"></div>
+  </div>
+  <div class="test-section">
+    <h3>Test 2: Subscribe to Channel</h3>
+    <button id="btn-test2">Subscribe to ChatChannel</button>
+    <div id="test2-result"></div>
+  </div>
+  <div class="test-section">
+    <h3>Test 3: Send Message</h3>
+    <input type="text" id="messageInput" placeholder="Enter a message" value="Hello from Funicular!">
+    <button id="btn-test3">Send Message</button>
+    <div id="test3-result"></div>
+  </div>
+  <div class="test-section">
+    <h3>Test 4: Receive Messages</h3>
+    <div id="messages"></div>
+  </div>
+  <div class="test-section">
+    <h3>Test 5: Unsubscribe</h3>
+    <button id="btn-test5">Unsubscribe</button>
+    <div id="test5-result"></div>
+  </div>
+  <div class="test-section">
+    <h3>Test 6: Reconnection (Exponential Backoff)</h3>
+    <p>Stop the server, then restart it to test automatic reconnection with exponential backoff.</p>
+    <div id="test6-result">Waiting for reconnection events...</div>
+  </div>
+  <script src="../init.iife.js"></script>
+  <script type="text/ruby">
+    # Global variables for testing
+    $consumer = nil
+    $subscription = nil
+    $message_count = 0
+    def log_message(msg)
+      messages_div = JS.document.getElementById('messages')
+      message_div = JS.document.createElement('div')
+      message_div.className = 'message'
+      now = Time.now
+      message_div.textContent = "[#{now} (#{now.to_i})] #{msg}"
+      messages_div.appendChild(message_div)
+      messages_div.scrollTop = messages_div.scrollHeight
+    end
+    def update_status(connected)
+      status_div = JS.document.getElementById('status')
+      if connected
+        status_div.textContent = 'Connected'
+        status_div.className = 'status connected'
+      else
+        status_div.textContent = 'Disconnected'
+        status_div.className = 'status disconnected'
+      end
+    end
+    # Test 1: Basic Connection
+    btn1 = JS.document.getElementById('btn-test1')
+    btn1.addEventListener('click') do |event|
+      result_div = JS.document.getElementById('test1-result')
+      begin
+        $consumer = Funicular::Cable.create_consumer('ws://localhost:9292/cable')
+        # Wait a moment for connection
+        sleep 1
+        if $consumer
+          result_div.innerHTML = '<span class="pass">PASS: Consumer created and connected</span>'
+          update_status(true)
+        else
+          result_div.innerHTML = '<span class="fail">FAIL: Consumer not created</span>'
+        end
+      rescue => e
+        result_div.innerHTML = "<span class=\"fail\">FAIL: #{e.message}</span>"
+      end
+    end
+    # Test 2: Subscribe to Channel
+    btn2 = JS.document.getElementById('btn-test2')
+    btn2.addEventListener('click') do |event|
+      result_div = JS.document.getElementById('test2-result')
+      unless $consumer
+        result_div.innerHTML = '<span class="fail">FAIL: Run Test 1 first</span>'
+        next
+      end
+      begin
+        $subscription = $consumer.subscriptions.create(channel: 'ChatChannel', room: 'lobby') do |message|
+          log_message("Received: #{message.inspect}")
+          $message_count += 1
+        end
+        $subscription.on_connected do
+          result_div.innerHTML = '<span class="pass">PASS: Subscribed to ChatChannel</span>'
+          log_message('Subscription confirmed!')
+        end
+        $subscription.on_rejected do
+          result_div.innerHTML = '<span class="fail">FAIL: Subscription rejected</span>'
+        end
+      rescue => e
+        result_div.innerHTML = "<span class=\"fail\">FAIL: #{e.message}</span>"
+      end
+    end
+    # Test 3: Send Message
+    btn3 = JS.document.getElementById('btn-test3')
+    btn3.addEventListener('click') do |event|
+      result_div = JS.document.getElementById('test3-result')
+      unless $subscription
+        result_div.innerHTML = '<span class="fail">FAIL: Run Test 2 first</span>'
+        next
+      end
+      begin
+        input = JS.document.getElementById('messageInput')
+        message_text = input[:value].to_s
+        $subscription.perform('speak', message: message_text)
+        result_div.innerHTML = '<span class="pass">PASS: Message sent</span>'
+        log_message("Sent: #{message_text}")
+      rescue => e
+        result_div.innerHTML = "<span class=\"fail\">FAIL: #{e.message}</span>"
+      end
+    end
+    # Test 5: Unsubscribe
+    btn5 = JS.document.getElementById('btn-test5')
+    btn5.addEventListener('click') do |event|
+      result_div = JS.document.getElementById('test5-result')
+      unless $subscription
+        result_div.innerHTML = '<span class="fail">FAIL: No active subscription</span>'
+        next
+      end
+      begin
+        $subscription.unsubscribe
+        $subscription = nil
+        result_div.innerHTML = '<span class="pass">PASS: Unsubscribed</span>'
+        log_message('Unsubscribed from ChatChannel')
+      rescue => e
+        result_div.innerHTML = "<span class=\"fail\">FAIL: #{e.message}</span>"
+      end
+    end
+    puts "Funicular::Cable test page loaded"
+    puts "Run tests in order: Connection -> Subscribe -> Send Message -> Unsubscribe"
+  </script>
+</body>
+</html>

data/demo/test_chartjs.html ADDED Viewed

@@ -0,0 +1,235 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>Funicular Chart.js Integration Test</title>
+  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
+  <style>
+    body { font-family: Arial, sans-serif; padding: 20px; }
+    .test-section { margin: 20px 0; padding: 15px; border: 1px solid #ccc; border-radius: 5px; }
+    .test-result { margin: 10px 0; padding: 10px; }
+    .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; }
+    #chart-container { width: 600px; height: 400px; margin: 20px auto; }
+    button { margin: 5px; padding: 8px 16px; cursor: pointer; }
+  </style>
+</head>
+<body>
+  <div><a href="../index.html">Back</a></div>
+  <h1>Funicular Chart.js Integration Tests</h1>
+  <div id="test-results"></div>
+  <div id="app"></div>
+  <script src="../init.iife.js"></script>
+  <script type="text/ruby">
+    class DashboardComponent < Funicular::Component
+      def initialize_state
+        {
+          month_index: 0,
+          data_sets: [
+            { labels: ['Jan', 'Feb', 'Mar'], values: [10, 20, 15] },
+            { labels: ['Apr', 'May', 'Jun'], values: [25, 30, 28] },
+            { labels: ['Jul', 'Aug', 'Sep'], values: [35, 40, 38] }
+          ]
+        }
+      end
+      def component_mounted
+        puts "component_mounted: Initializing Chart.js"
+        canvas = @refs[:chart_canvas]
+        unless canvas
+          puts "ERROR: canvas ref not found!"
+          return
+        end
+        current_data = state.data_sets[state.month_index]
+        config = {
+          type: 'line',
+          data: {
+            labels: current_data[:labels],
+            datasets: [{
+              label: 'Sales',
+              data: current_data[:values],
+              borderColor: 'rgb(75, 192, 192)',
+              tension: 0.1
+            }]
+          },
+          options: {
+            responsive: true,
+            maintainAspectRatio: false
+          }
+        }
+        js_config = JS::Bridge.to_js(config)
+        @chart = JS.global[:Chart].new(canvas, js_config)
+        puts "Chart.js initialized successfully"
+      end
+      def component_updated
+        puts "component_updated: Updating Chart.js with data index #{state.month_index}"
+        update_chart
+      end
+      def component_will_unmount
+        puts "component_will_unmount: Destroying Chart.js"
+        @chart.destroy if @chart
+      end
+      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}"
+        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}"
+        patch(month_index: new_index)
+      end
+      def update_chart
+        return unless @chart
+        current_data = state.data_sets[state.month_index]
+        puts "update_chart: Setting data to #{current_data[:labels].join(', ')}"
+        # Convert to JS objects
+        new_labels = JS::Bridge.to_js(current_data[:labels])
+        new_data = JS::Bridge.to_js(current_data[:values])
+        puts "update_chart: new_labels type: #{new_labels.type}"
+        puts "update_chart: new_data type: #{new_data.type}"
+        # Update chart data
+        @chart[:data][:labels] = new_labels
+        @chart[:data][:datasets][0][:data] = new_data
+        # Verify the data was set
+        puts "update_chart: Chart labels after setting: #{@chart[:data][:labels][0]}"
+        puts "update_chart: Chart data after setting: #{@chart[:data][:datasets][0][:data][0]}"
+        # Call update() method with explicit argument to ensure method call
+        @chart.update("active")
+        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")
+          end
+          div do
+            button(id: "prev-btn", onclick: :prev_data_set) { "Previous Quarter" }
+            button(id: "next-btn", onclick: :next_data_set) { "Next Quarter" }
+          end
+          div(id: "info") do
+            current = state.data_sets[state.month_index]
+            "Current data: #{current[:labels].join(', ')}"
+          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 Chart.js integration tests..."
+      # Test 1: JS::Bridge.to_js with Hash
+      begin
+        hash = { a: 1, b: "test", c: true }
+        js_obj = JS::Bridge.to_js(hash)
+        test1 = js_obj[:a].to_i == 1 && js_obj[:b].to_s == "test"
+        log_test("JS::Bridge.to_js(Hash)", test1)
+      rescue => e
+        log_test("JS::Bridge.to_js(Hash)", false)
+        puts "Error: #{e.message}"
+      end
+      # Test 2: JS::Bridge.to_js with nested Hash
+      begin
+        nested = { outer: { inner: 42 } }
+        js_nested = JS::Bridge.to_js(nested)
+        test2 = js_nested[:outer][:inner].to_i == 42
+        log_test("JS::Bridge.to_js(nested Hash)", test2)
+      rescue => e
+        log_test("JS::Bridge.to_js(nested Hash)", false)
+        puts "Error: #{e.message}"
+      end
+      # Test 3: JS::Bridge.to_js with Array
+      begin
+        array = [1, 2, 3]
+        js_array = JS::Bridge.to_js(array)
+        test3 = js_array[0].to_i == 1 && js_array[2].to_i == 3
+        log_test("JS::Bridge.to_js(Array)", test3)
+      rescue => e
+        log_test("JS::Bridge.to_js(Array)", false)
+        puts "Error: #{e.message}"
+      end
+      # Test 4: JS::Bridge.to_js with Array of Hashes
+      begin
+        complex = [{ x: 10 }, { x: 20 }]
+        js_complex = JS::Bridge.to_js(complex)
+        test4 = js_complex[0][:x].to_i == 10 && js_complex[1][:x].to_i == 20
+        log_test("JS::Bridge.to_js(Array of Hashes)", test4)
+      rescue => e
+        log_test("JS::Bridge.to_js(Array of Hashes)", false)
+        puts "Error: #{e.message}"
+      end
+      # Test 5: Chart.js availability
+      begin
+        test5 = !JS.global[:Chart].nil?
+        log_test("Chart.js loaded", test5)
+      rescue => e
+        log_test("Chart.js loaded", false)
+        puts "Error: #{e.message}"
+      end
+      # Test 6: Component with Chart.js
+      begin
+        container = JS.document.getElementById('app')
+        dashboard = DashboardComponent.new
+        dashboard.mount(container)
+        sleep 0.1
+        test6 = !dashboard.instance_variable_get(:@chart).nil?
+        log_test("Chart.js component integration", test6)
+      rescue => e
+        log_test("Chart.js component integration", false)
+        puts "Error: #{e.message}"
+      end
+      # Test 7: Ref attribute
+      begin
+        test7 = !dashboard.refs[:chart_canvas].nil?
+        log_test("Ref attribute for canvas", test7)
+      rescue => e
+        log_test("Ref attribute for canvas", false)
+        puts "Error: #{e.message}"
+      end
+      puts "All tests completed!"
+      puts ""
+      puts "Manual test: Click 'Next Quarter' and 'Previous Quarter' buttons to verify chart updates"
+    end
+    run_tests
+  </script>
+</body>
+</html>

data/demo/test_component.html ADDED Viewed

@@ -0,0 +1,201 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>Funicular Component Test</title>
+  <style>
+    body { font-family: Arial, sans-serif; padding: 20px; }
+    .test-section { margin: 20px 0; padding: 15px; border: 1px solid #ccc; border-radius: 5px; }
+    .test-result { margin: 10px 0; padding: 10px; }
+    .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; }
+  </style>
+</head>
+<body>
+  <div><a href="../index.html">Back</a></div>
+  <h1>Funicular Component Tests</h1>
+  <div id="test-results"></div>
+  <div id="app"></div>
+  <script type="text/ruby">
+    class TestCounter < Funicular::Component
+      def initialize_state
+        { count: 0, mounted: false }
+      end
+      def component_will_mount
+      end
+      def component_mounted
+        patch(mounted: true)
+      end
+      def component_will_update
+      end
+      def component_updated
+      end
+      def increment(event)
+        event.preventDefault if event
+        patch(count: state.count + 1)
+      end
+      def decrement(event)
+        event.preventDefault if event
+        patch(count: state.count - 1)
+      end
+      def render
+        div(id: "counter-app") do
+          h2 { "Counter: #{state.count}" }
+          div(id: "status") do
+            "Mounted: #{state.mounted}"
+          end
+          div do
+            button(id: "increment-btn", onclick: :increment) { "+1" }
+            button(id: "decrement-btn", onclick: :decrement) { "-1" }
+          end
+          div(ref: :display, id: "display") do
+            "Current value: #{state.count}"
+          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 Funicular Component tests..."
+      # Test 1: Component creation
+      begin
+        counter = TestCounter.new
+        log_test("Component creation", counter.is_a?(Funicular::Component))
+      rescue => e
+        log_test("Component creation", false)
+        puts "Error: #{e.message}"
+      end
+      # Test 2: Initial state
+      begin
+        counter = TestCounter.new
+        initial_state = counter.state.count == 0
+        log_test("Initial state", initial_state)
+      rescue => e
+        log_test("Initial state", false)
+        puts "Error: #{e.message}"
+      end
+      # Test 3: Mount component
+      begin
+        container = JS.document.getElementById('app')
+        counter = Funicular.start(TestCounter, container: container)
+        sleep 0.1
+        mounted = JS.document.getElementById('counter-app') != nil
+        log_test("Component mount", mounted)
+      rescue => e
+        log_test("Component mount", false)
+        puts "Error: #{e.message}"
+      end
+      # Test 4: State update
+      begin
+        container = JS.document.getElementById('app')
+        container.innerHTML = ''
+        counter = Funicular.start(TestCounter, container: container)
+        sleep 0.1
+        counter.patch(count: 5)
+        sleep 0.1
+        h2_element = JS.document.querySelector('#counter-app h2')
+        text = h2_element.textContent.to_s
+        state_updated = text.include?("5")
+        log_test("State update", state_updated)
+      rescue => e
+        log_test("State update", false)
+        puts "Error: #{e.message}"
+      end
+      # Test 5: Event handler binding and execution
+      # Note: Manual browser clicks work correctly (verified in console logs)
+      # For automated testing, we test the handler logic directly
+      begin
+        container = JS.document.getElementById('app')
+        container.innerHTML = ''
+        counter = Funicular.start(TestCounter, container: container)
+        sleep 0.1
+        # Verify event handler is bound (button exists and has onclick attribute)
+        btn = JS.document.getElementById('increment-btn')
+        has_button = btn != nil
+        # Test handler logic by calling it directly (standard testing approach)
+        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}")
+        log_test("Event handler (click)", has_button && handler_works)
+      rescue => e
+        log_test("Event handler (click)", false)
+        puts "Error: #{e.message}"
+      end
+      # Test 6: Ref attribute
+      begin
+        container = JS.document.getElementById('app')
+        container.innerHTML = ''
+        counter = Funicular.start(TestCounter, container: container)
+        sleep 0.1
+        ref_element = counter.refs[:display]
+        has_ref = ref_element != nil && ref_element.id.to_s == "display"
+        log_test("Ref attribute", has_ref)
+      rescue => e
+        log_test("Ref attribute", false)
+        puts "Error: #{e.message}"
+      end
+      # Test 7: Multiple updates
+      begin
+        container = JS.document.getElementById('app')
+        container.innerHTML = ''
+        counter = Funicular.start(TestCounter, container: container)
+        sleep 0.1
+        counter.patch(count: 10)
+        sleep 0.05
+        counter.patch(count: 20)
+        sleep 0.05
+        counter.patch(count: 30)
+        sleep 0.1
+        h2_element = JS.document.querySelector('#counter-app h2')
+        text = h2_element.textContent.to_s
+        multiple_updates = text.include?("30")
+        log_test("Multiple updates", multiple_updates)
+      rescue => e
+        log_test("Multiple updates", false)
+        puts "Error: #{e.message}"
+      end
+      puts "All tests completed!"
+    end
+    run_tests
+  </script>
+  <script src="../init.iife.js"></script>
+</body>
+</html>