funicular 0.3.0 → 0.4.0

data/lib/funicular/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Funicular
-  VERSION = "0.3.0"
+  VERSION = "0.4.0"
 end

data/lib/generators/funicular/chat/templates/funicular_chat_component.rb.tt

@@ -1,25 +1,24 @@
 class FunicularChatComponent < Funicular::Component
-  styles do |css|
-    css.define :shell, "funicular-chat"
-    css.define :panel, "funicular-chat__panel"
-    css.define :header, "funicular-chat__header"
-    css.define :title, "funicular-chat__title"
-    css.define :subtitle, "funicular-chat__subtitle"
-    css.define :messages, "funicular-chat__messages"
-    css.define :empty, "funicular-chat__empty"
-    css.define :message, "funicular-chat__message"
-    css.define :name, "funicular-chat__message-name"
-    css.define :body, "funicular-chat__message-body"
-    css.define :form, "funicular-chat__form"
-    css.define :row, "funicular-chat__form-row"
-    css.define :input, "funicular-chat__input"
-    css.define :button,
-               base: "funicular-chat__button",
-               variants: {
-                 enabled: "funicular-chat__button--enabled",
-                 disabled: "funicular-chat__button--disabled"
-               }
-    css.define :error, "funicular-chat__error"
+  styles do
+    shell "funicular-chat"
+    panel "funicular-chat__panel"
+    header "funicular-chat__header"
+    title "funicular-chat__title"
+    subtitle "funicular-chat__subtitle"
+    messages "funicular-chat__messages"
+    empty "funicular-chat__empty"
+    message "funicular-chat__message"
+    name "funicular-chat__message-name"
+    body "funicular-chat__message-body"
+    form "funicular-chat__form"
+    row "funicular-chat__form-row"
+    input "funicular-chat__input"
+    button base: "funicular-chat__button",
+           variants: {
+             enabled: "funicular-chat__button--enabled",
+             disabled: "funicular-chat__button--disabled"
+           }
+    error "funicular-chat__error"
   end
 
   def initialize_state
@@ -95,37 +94,37 @@ class FunicularChatComponent < Funicular::Component
     end
   end
 
-  def render(h)
-    h.div(class: h.styles[:shell]) do |hh|
-      hh.div(class: h.styles[:panel]) do |panel|
-        panel.div(class: h.styles[:header]) do |header|
-          header.h1(class: h.styles[:title]) { "Funicular Chat" }
-          header.p(class: h.styles[:subtitle]) do
+  def render
+    div(class: styles.shell) do
+      div(class: styles.panel) do
+        div(class: styles.header) do
+          h1(class: styles.title) { "Funicular Chat" }
+          p(class: styles.subtitle) do
             state[:connected] ? "Realtime Ruby chat over ActionCable" : "Connecting..."
           end
         end
 
-        panel.div(class: h.styles[:messages]) do |messages|
+        div(class: styles.messages) do
           if state[:messages].empty?
-            messages.p(class: h.styles[:empty]) { "No messages yet." }
+            p(class: styles.empty) { "No messages yet." }
           else
             state[:messages].each do |message|
-              messages.div(class: h.styles[:message], key: message["id"]) do |item|
-                item.div(class: h.styles[:name]) { message["name"] }
-                item.div(class: h.styles[:body]) { message["body"] }
+              div(class: styles.message, key: message["id"]) do
+                div(class: styles.name) { message["name"] }
+                div(class: styles.body) { message["body"] }
               end
             end
           end
         end
 
-        panel.form(onsubmit: :send_message, class: h.styles[:form]) do |form|
+        form(onsubmit: :send_message, class: styles.form) do
           if state[:error]
-            form.div(class: h.styles[:error]) { state[:error] }
+            div(class: styles.error) { state[:error] }
           end
-          form.div(class: h.styles[:row]) do |row|
-            row.input(type: "text", value: state[:name], placeholder: "Name", oninput: :update_name, class: h.styles[:input])
-            row.input(type: "text", value: state[:body], placeholder: "Message", oninput: :update_body, class: h.styles[:input])
-            row.button(type: "submit", class: h.styles[:button, state[:sending] ? :disabled : :enabled], disabled: state[:sending]) do
+          div(class: styles.row) do
+            input(type: "text", value: state[:name], placeholder: "Name", oninput: :update_name, class: styles.input)
+            input(type: "text", value: state[:body], placeholder: "Message", oninput: :update_body, class: styles.input)
+            button(type: "submit", class: styles.button(state[:sending] ? :disabled : :enabled), disabled: state[:sending]) do
               state[:sending] ? "Sending..." : "Send"
             end
           end

data/minitest/dsl_test.rb

@@ -0,0 +1,237 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+# Bareword component DSL (0.4.0), CRuby/SSR side. Twin of test/dsl_test.rb;
+# the attr_accessor case differs by VM: CRuby fires method_added for attr_*
+# so the collision surfaces at class-definition time, while mruby relies on
+# the mount-time sweep.
+class DSLTest < Minitest::Test
+  def setup
+    Funicular::SSR::Runtime.load_framework!
+  end
+
+  def test_bareword_render_builds_nested_tree
+    klass = Class.new(Funicular::Component) do
+      def initialize_state
+        { items: ["a", "b"] }
+      end
+
+      def render
+        div(class: "list") do
+          h1 { "title" }
+          ul do
+            state[:items].each_with_index do |item, i|
+              li(key: i) { item }
+            end
+          end
+        end
+      end
+    end
+
+    vnode = klass.new.build_vdom
+
+    assert_equal "div", vnode.tag
+    assert_equal ["h1", "ul"], vnode.children.map(&:tag)
+    assert_equal 2, vnode.children[1].children.size
+  end
+
+  def test_defining_reserved_tag_name_raises_at_class_definition
+    assert_raises(Funicular::DSLCollisionError) do
+      Class.new(Funicular::Component) do
+        def label
+        end
+      end
+    end
+  end
+
+  def test_attr_accessor_collision_raises_at_class_definition_on_cruby
+    # CRuby fires method_added for attr_*, so this is caught immediately
+    # (on mruby the mount-time sweep catches it instead).
+    assert_raises(Funicular::DSLCollisionError) do
+      Class.new(Funicular::Component) do
+        attr_accessor :label
+      end
+    end
+  end
+
+  def test_included_module_collision_is_caught_at_first_build
+    mod = Module.new do
+      def select
+      end
+    end
+    klass = Class.new(Funicular::Component) do
+      def render
+        div { "x" }
+      end
+    end
+    klass.include(mod)
+
+    assert_raises(Funicular::DSLCollisionError) { klass.new.build_vdom }
+  end
+
+  def test_allow_dsl_override_restores_user_method_and_tag_escape_hatch
+    klass = Class.new(Funicular::Component) do
+      allow_dsl_override :label
+
+      def label
+        "custom"
+      end
+
+      def render
+        div { tag(:label) { label } }
+      end
+    end
+
+    vnode = klass.new.build_vdom
+
+    assert_equal "label", vnode.children.first.tag
+    assert_equal ["custom"], vnode.children.first.children
+  end
+
+  def test_render_with_parameter_raises_migration_error
+    klass = Class.new(Funicular::Component) do
+      def render(h)
+        h
+      end
+    end
+
+    error = assert_raises(Funicular::DSLCollisionError) { klass.new.build_vdom }
+    assert_match(/must not take parameters/, error.message)
+  end
+
+  def test_p_with_non_hash_raises_with_hint
+    klass = Class.new(Funicular::Component) do
+      def render
+        div { p "debug me" }
+      end
+    end
+
+    error = assert_raises(ArgumentError) { klass.new.build_vdom }
+    assert_match(/puts x.inspect/, error.message)
+  end
+
+  def test_p_with_hash_builds_paragraph
+    klass = Class.new(Funicular::Component) do
+      def render
+        p(class: "para") { "text" }
+      end
+    end
+
+    vnode = klass.new.build_vdom
+
+    assert_equal "p", vnode.tag
+    assert_equal ["text"], vnode.children
+  end
+
+  def test_tag_outside_render_raises
+    klass = Class.new(Funicular::Component) do
+      def render
+        div { "x" }
+      end
+    end
+    component = klass.new
+    component.build_vdom
+
+    assert_raises(Funicular::RenderContextError) { component.div { "outside" } }
+  end
+
+  def test_bareword_styles_definition_and_method_access
+    klass = Class.new(Funicular::Component) do
+      styles do
+        shell "app-shell"
+        display "display-class"
+        button base: "btn", variants: { primary: "btn--primary" }, active: "btn--on"
+      end
+
+      def render
+        div(class: styles.shell) do
+          span(class: styles.display) { "d" }
+          button(class: styles.button(:primary)) { "b" }
+          a(class: styles[:button, true] | "extra") { "x" }
+        end
+      end
+    end
+
+    vnode = klass.new.build_vdom
+
+    assert_equal "app-shell", vnode.props[:class]
+    # :display would resolve to Object#display on an Object-based accessor;
+    # the BasicObject accessor keeps it a plain style name under CRuby SSR,
+    # matching the mruby client.
+    assert_equal "display-class", vnode.children[0].props[:class]
+    assert_equal "btn btn--primary", vnode.children[1].props[:class]
+    assert_equal "btn btn--on extra", vnode.children[2].props[:class]
+  end
+
+  def test_unknown_style_raises
+    klass = Class.new(Funicular::Component) do
+      styles do
+        shell "app-shell"
+      end
+
+      def render
+        div { "x" }
+      end
+    end
+    component = klass.new
+
+    assert_raises(NoMethodError) { component.styles.typo_name }
+    assert_raises(ArgumentError) { component.styles[:typo] }
+  end
+
+  def test_bareword_helper_call_inside_styles_block_raises
+    assert_raises(ArgumentError) do
+      Class.new(Funicular::Component) do
+        styles do
+          button base: helper_that_does_not_exist("x")
+        end
+      end
+    end
+  end
+
+  def test_duplicate_style_definition_raises
+    assert_raises(ArgumentError) do
+      Class.new(Funicular::Component) do
+        styles do
+          shell "a"
+          shell "b"
+        end
+      end
+    end
+  end
+
+  def test_suspense_fallback_runs_bareword_in_own_component
+    klass = Class.new(Funicular::Component) do
+      use_suspense :user, ->(resolve, _reject) { resolve.call("u") }
+
+      def render
+        div do
+          suspense(:user, fallback: -> { span { "loading" } }) do |res|
+            span { res[:user] }
+          end
+        end
+      end
+    end
+
+    component = klass.new
+    vnode = component.build_vdom
+    assert_equal "loading", vnode.children.first.children.first
+
+    component.instance_variable_get(:@suspense_data)[:user] = "u"
+    component.instance_variable_get(:@suspense_states)[:user] = :resolved
+    vnode = component.build_vdom
+    assert_equal "u", vnode.children.first.children.first
+  end
+
+  def test_error_boundary_fallback_receives_view_context
+    fallback = ->(h, error) { h.div(class: "custom-error") { error.message } }
+    boundary = Funicular::ErrorBoundary.new(fallback: fallback)
+    boundary.catch_error(RuntimeError.new("boom"))
+    vnode = boundary.build_vdom
+
+    assert_equal "div", vnode.tag
+    assert_equal "custom-error", vnode.props[:class]
+    assert_equal ["boom"], vnode.children
+  end
+end

data/minitest/fixtures/funicular_app/components/greeting_component.rb

@@ -3,12 +3,12 @@ class GreetingComponent < Funicular::Component
     { title: "Default Title", items: [] }
   end
 
-  def render(h)
-    h.div(class: "greeting") do |hh|
-      hh.h1 { state[:title] }
-      hh.ul do |hhh|
+  def render
+    div(class: "greeting") do
+      h1 { state[:title] }
+      ul do
         state[:items].each do |item|
-          hhh.li(key: item["id"]) { item["name"] }
+          li(key: item["id"]) { item["name"] }
         end
       end
     end

data/minitest/form_for_test.rb

@@ -19,8 +19,8 @@ class FormForTest < Minitest::Test
         @submitted = data
       end
 
-      def render(h)
-        h.form_for(:comment, on_submit: :handle_submit) do |f|
+      def render
+        form_for(:comment, on_submit: :handle_submit) do |f|
           f.textarea(:body)
           f.submit("Post")
         end

data/minitest/hydration_test.rb

@@ -25,8 +25,8 @@ class HydrationMatchTest < Minitest::Test
   # invoked here (we feed vnodes directly); it only satisfies the abstract API.
   def probe
     klass = Class.new(Funicular::Component) do
-      def render(h)
-        h.div { "x" }
+      def render
+        div { "x" }
       end
 
       def match?(vnode, dom)

data/minitest/sig_tags_test.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+# The tag whitelist lives in mrblib/0_tags.rb (runtime) and is manually
+# enumerated in sig/tags.rbs and sig/view_context.rbs (types). These drifted
+# in the past; fail loudly when they do again.
+class SigTagsTest < Minitest::Test
+  ROOT = File.expand_path("..", __dir__)
+
+  def setup
+    Funicular::SSR::Runtime.load_framework!
+  end
+
+  def assert_sig_covers_all_tags(sig_path)
+    sig = File.read(File.join(ROOT, sig_path))
+    missing = Funicular::Tags::HTML_TAGS.reject do |tag|
+      sig.include?("def #{tag}: ")
+    end
+    assert_empty missing, "#{sig_path} is missing tag signatures: #{missing.join(', ')}"
+  end
+
+  def test_sig_tags_rbs_covers_all_tags
+    assert_sig_covers_all_tags("sig/tags.rbs")
+  end
+
+  def test_sig_view_context_rbs_covers_all_tags
+    assert_sig_covers_all_tags("sig/view_context.rbs")
+  end
+end

data/minitest/view_context_test.rb

@@ -7,7 +7,7 @@ class ViewContextTest < Minitest::Test
     Funicular::SSR::Runtime.load_framework!
   end
 
-  def test_explicit_state_styles_and_resources_do_not_collide_with_html_methods
+  def test_state_styles_and_resources_are_reachable_alongside_tags
     klass = Class.new(Funicular::Component) do
       styles { |css| css.define :hash, "hash-class" }
 
@@ -17,9 +17,9 @@ class ViewContextTest < Minitest::Test
         { class: "state-class", hash: "state-hash" }
       end
 
-      def render(h)
-        h.data(class: h.styles[:hash]) do
-          "#{state[:class]} #{state[:hash]} #{h.resources[:data]}"
+      def render
+        data(class: styles[:hash]) do
+          "#{state[:class]} #{state[:hash]} #{resources[:data]}"
         end
       end
     end
@@ -37,15 +37,15 @@ class ViewContextTest < Minitest::Test
 
   def test_component_children_are_vdom_children_not_props
     child = Class.new(Funicular::Component) do
-      def render(h)
-        h.div { children }
+      def render
+        div { children }
       end
     end
 
     parent = Class.new(Funicular::Component) do
-      define_method(:render) do |h|
-        h.component(child, title: "x") do |hh|
-          hh.span { "inside" }
+      define_method(:render) do
+        component(child, title: "x") do
+          span { "inside" }
         end
       end
     end
@@ -70,23 +70,23 @@ class ViewContextTest < Minitest::Test
     component_a.runtime = Funicular::Runtime.new(router_a)
     component_b.runtime = Funicular::Runtime.new(router_b)
 
-    assert_equal "/users/7", Funicular::ViewContext.new(component_a).routes.user_path(7)
-    assert_equal "/accounts/7", Funicular::ViewContext.new(component_b).routes.user_path(7)
+    assert_equal "/users/7", component_a.routes.user_path(7)
+    assert_equal "/accounts/7", component_b.routes.user_path(7)
   end
 
   def test_child_collector_is_restored_when_render_raises
     klass = Class.new(Funicular::Component) do
       attr_reader :captured
 
-      def render(h)
+      def render
         begin
-          h.div do |hh|
-            hh.span { "before" }
+          div do
+            span { "before" }
             raise "boom"
           end
         rescue
           @captured = current_children
-          h.div { "after" }
+          div { "after" }
         end
       end
     end

data/mrblib/0_tags.rb

@@ -0,0 +1,62 @@
+module Funicular
+  # Raised at class-definition time (method_added) or first mount when a
+  # component defines a method whose name collides with the view DSL.
+  class DSLCollisionError < StandardError; end
+
+  # Raised when a tag helper is called while the component is not rendering
+  # (e.g. from a stale proc or an event handler outside build_vdom).
+  class RenderContextError < StandardError; end
+
+  # Bareword tag DSL mixed into Funicular::Component. Tags are real public
+  # instance methods so `div(...)` works with self = the component inside
+  # `render`. Element construction is delegated to the component's internal
+  # ViewContext, which remains the single element factory (FormBuilder and
+  # the framework internals keep using it directly).
+  module Tags
+    # Single source of truth for the tag whitelist. sig/tags.rbs must list
+    # one method per entry; test/sig_tags_test.rb enforces that in CI.
+    HTML_TAGS = %w[
+      div span p a data
+      h1 h2 h3 h4 h5 h6
+      ul ol li
+      table thead tbody tr th td
+      form input textarea button select option label
+      header footer nav section article aside
+      img video audio canvas
+      br hr
+    ]
+
+    HELPER_NAMES = %w[
+      tag component form_for link_to button_to suspense
+      state props styles resources routes patch
+    ]
+
+    # Symbol => :tag | :helper. Component.method_added consults this to turn
+    # silent shadowing into a load-time error.
+    RESERVED_DSL = {} #: Hash[Symbol, Symbol]
+    HTML_TAGS.each { |name| RESERVED_DSL[name.to_sym] = :tag }
+    HELPER_NAMES.each { |name| RESERVED_DSL[name.to_sym] = :helper }
+
+    HTML_TAGS.each do |tag_name|
+      define_method(tag_name) do |props = {}, &block|
+        # @type self: Funicular::Component
+        unless props.is_a?(Hash)
+          hint = if tag_name == "p"
+            " Inside a component, `p` builds a <p> element; use `puts x.inspect` to debug."
+          else
+            ""
+          end
+          raise ArgumentError, "#{tag_name}() expects an attributes Hash, got #{props.class}.#{hint}"
+        end
+        __view__.tag(tag_name, props, &block)
+      end
+    end
+
+    # Escape hatch: emit any element, including custom elements outside the
+    # whitelist or a tag whose bareword is shadowed via allow_dsl_override.
+    def tag(name, props = {}, &block)
+      # @type self: Funicular::Component
+      __view__.tag(name, props, &block)
+    end
+  end
+end