funicular 0.2.1 → 0.4.0

data/mrblib/debug.rb

@@ -152,16 +152,17 @@ module Funicular
 
         result = {} #: Hash[String, String]
         component.instance_variables.each do |var|
-          next if var == :@state
-          next if var.to_s.start_with?('@__debug')
-          if var == :@vdom || var == :@child_components
-            result[var.to_s] = "<omitted>"
+          name = var.to_s
+          next if name == '@state'
+          next if name.start_with?('@__debug')
+          if name == '@vdom' || name == '@child_components'
+            result[name] = "<omitted>"
             next
           end
           begin
-            result[var.to_s] = component.instance_variable_get(var).inspect
+            result[name] = component.instance_variable_get(var).inspect
           rescue
-            result[var.to_s] = "<error inspecting value>"
+            result[name] = "<error inspecting value>"
           end
         end
         JSON.generate(result)

data/mrblib/differ.rb

@@ -213,11 +213,13 @@ module Funicular
           # If only Proc props changed, update props but skip VDOM rebuild
           unless data_props_changed
             instance.props = new_node.props
+            instance.children = new_node.children
             return []
           end
 
           old_internal_vdom = instance.vdom
           instance.props = new_node.props
+          instance.children = new_node.children
           new_internal_vdom = instance.build_vdom
           internal_patches = diff(old_internal_vdom, new_internal_vdom)
 
@@ -227,7 +229,7 @@ module Funicular
         end
 
         # Original logic: If props changed, replace the entire component
-        if old_node.props != new_node.props
+        if old_node.props != new_node.props || old_node.children != new_node.children
           return [[:replace, new_node, old_node]]
         end
 

data/mrblib/error_boundary.rb

@@ -8,12 +8,18 @@ module Funicular
   #   end
   #
   # With custom fallback:
-  #   component(ErrorBoundary, fallback: ->(error) { div { "Error: #{error.message}" } }) do
+  #   component(ErrorBoundary, fallback: ->(h, error) { h.div { "Error: #{error.message}" } }) do
   #     component(RiskyComponent)
   #   end
   #
   # Props:
-  #   - fallback: Proc or Method that receives the error and returns VDOM
+  #   - fallback: Proc or Method that receives (view_context, error) and
+  #     returns VDOM. NOTE: unlike everywhere else, the fallback cannot use
+  #     bareword tags. The proc is created in the parent component's scope
+  #     but runs during the boundary's render, where only the boundary's
+  #     cursor is active; a bareword tag would dispatch against the parent
+  #     and raise RenderContextError. Build elements through the view
+  #     context argument (`h.div { ... }`) instead.
   #   - on_error: Optional callback when error is caught (for logging, reporting)
   #
   class ErrorBoundary < Component
@@ -72,7 +78,7 @@ module Funicular
 
     def render_fallback
       if props[:fallback]
-        result = props[:fallback].call(state[:error])
+        result = props[:fallback].call(__view__, state[:error])
         if result.is_a?(VDOM::VNode)
           result
         else
@@ -100,16 +106,8 @@ module Funicular
     end
 
     def render_children
-      # Children are passed via children_block prop from the component() DSL
-      # Errors are caught by VDOM::Renderer.render_component
-      if props[:children_block]
-        div(class: 'error-boundary-content') do
-          props[:children_block].call
-        end
-      elsif props[:children]
-        props[:children]
-      else
-        div { "" }
+      div(class: 'error-boundary-content') do
+        children
       end
     end
   end

data/mrblib/form_builder.rb

@@ -1,9 +1,10 @@
 module Funicular
   class FormBuilder
-    attr_reader :component, :model_key, :options
+    attr_reader :component, :view_context, :model_key, :options
 
-    def initialize(component, model_key, options = {})
+    def initialize(component, view_context, model_key, options = {})
       @component = component
+      @view_context = view_context
       @model_key = model_key
       @options = options
       # Per-form options win, then the global Funicular.configure_forms config,
@@ -32,7 +33,8 @@ module Funicular
       end
 
       # Check for errors
-      error_message = @component.state.errors ? @component.state.errors[field_key.to_sym] : nil
+      errors = @component.state[:errors]
+      error_message = errors ? errors[field_key.to_sym] : nil
       # errors may be a single message (legacy) or an array of messages
       # (Funicular::Model::Errors#messages). Show the first.
       error_message = error_message.first if error_message.is_a?(Array)
@@ -63,10 +65,10 @@ module Funicular
       attrs[:class] = css_class unless css_class.empty?
 
       # Render field + error message
-      @component.div do
-        @component.input(attrs)
+      @view_context.div do
+        @view_context.input(attrs)
         if has_error
-          @component.div(class: @error_class) { error_message }
+          @view_context.div(class: @error_class) { error_message }
         end
       end
     end
@@ -99,7 +101,8 @@ module Funicular
         set_nested_value(@model_key, field_key, new_value)
       end
 
-      error_message = @component.state.errors ? @component.state.errors[field_key.to_sym] : nil
+      errors = @component.state[:errors]
+      error_message = errors ? errors[field_key.to_sym] : nil
       # errors may be a single message (legacy) or an array of messages
       # (Funicular::Model::Errors#messages). Show the first.
       error_message = error_message.first if error_message.is_a?(Array)
@@ -125,10 +128,10 @@ module Funicular
 
       attrs[:class] = css_class unless css_class.empty?
 
-      @component.div do
-        @component.textarea(attrs)
+      @view_context.div do
+        @view_context.textarea(attrs)
         if has_error
-          @component.div(class: @error_class) { error_message }
+          @view_context.div(class: @error_class) { error_message }
         end
       end
     end
@@ -151,7 +154,7 @@ module Funicular
         onchange: on_change
       }.merge(options)
 
-      @component.input(attrs)
+      @view_context.input(attrs)
     end
 
     def select(field_name, choices, options = {})
@@ -165,7 +168,8 @@ module Funicular
         set_nested_value(@model_key, field_key, new_value)
       end
 
-      error_message = @component.state.errors ? @component.state.errors[field_key.to_sym] : nil
+      errors = @component.state[:errors]
+      error_message = errors ? errors[field_key.to_sym] : nil
       # errors may be a single message (legacy) or an array of messages
       # (Funicular::Model::Errors#messages). Show the first.
       error_message = error_message.first if error_message.is_a?(Array)
@@ -190,18 +194,18 @@ module Funicular
 
       attrs[:class] = css_class unless css_class.empty?
 
-      @component.div do
-        @component.select(attrs) do
+      @view_context.div do
+        @view_context.select(attrs) do
           choices.each do |choice|
             option_value, option_text = choice.is_a?(Array) ? choice : [choice, choice]
             selected = value.to_s == option_value.to_s
-            @component.option(value: option_value, selected: selected) do
+            @view_context.option(value: option_value, selected: selected) do
               option_text
             end
           end
         end
         if has_error
-          @component.div(class: @error_class) { error_message }
+          @view_context.div(class: @error_class) { error_message }
         end
       end
     end
@@ -232,17 +236,17 @@ module Funicular
         onchange: on_change
       }.merge(options)
 
-      @component.input(attrs)
+      @view_context.input(attrs)
     end
 
     def submit(label = "Submit", options = {})
       attrs = { type: "submit" }.merge(options)
-      @component.button(attrs) { label }
+      @view_context.button(attrs) { label }
     end
 
     def label(field_name, text = nil, options = {})
       text ||= field_name.to_s.split('_').map { |word| word.capitalize }.join(' ')
-      @component.label(options) { text }
+      @view_context.label(options) { text }
     end
 
     private
@@ -252,10 +256,10 @@ module Funicular
       keys = key_path.split('.')
       value = state
       keys.each do |key|
-        if value.respond_to?(key.to_sym)
-          value = value.send(key.to_sym)
-        elsif value.is_a?(Hash)
+        if value.is_a?(Hash)
           value = value[key.to_sym] || value[key]
+        elsif value.respond_to?(:[])
+          value = value[key.to_sym]
         else
           value = nil
         end
@@ -270,12 +274,12 @@ module Funicular
       if field_key.include?('.')
         # Complex nested update
         keys = field_key.split('.')
-        current_model = @component.state.send(model_key.to_sym)
+        current_model = @component.state[model_key.to_sym]
         updated_model = deep_merge_value(current_model, keys, new_value)
         @component.patch(model_key.to_sym => updated_model)
       else
         # Simple update
-        current_model = @component.state.send(model_key.to_sym)
+        current_model = @component.state[model_key.to_sym]
         if current_model.nil?
           @component.patch(model_key.to_sym => { field_key.to_sym => new_value })
         elsif current_model.is_a?(Hash)

data/mrblib/funicular.rb

@@ -18,7 +18,7 @@ module Funicular
   # Guard against redefinition: when the mrblib runtime is loaded into a
   # CRuby/Rails process for SSR, lib/funicular/version.rb has already defined
   # VERSION for the CRuby gem. In the wasm build VERSION is undefined here.
-  VERSION = '0.1.0' unless Funicular.const_defined?(:VERSION)
+  VERSION = '0.4.0' unless Funicular.const_defined?(:VERSION)
 
   def self.version
     VERSION
@@ -185,6 +185,7 @@ module Funicular
     # Otherwise, mount single component (backward compatible)
     if component_class
       instance = component_class.new(props)
+      instance.runtime = Funicular::Runtime.new(nil)
       server_root = hydrate ? first_element_child(container_element) : nil
       if server_root
         instance.seed_state(window_state)

data/mrblib/html_serializer.rb

@@ -16,10 +16,14 @@ module Funicular
       ]
 
       # Props that must never be emitted as HTML attributes.
-      SKIP_PROPS = %i[ref key children_block]
+      SKIP_PROPS = %i[ref key]
 
-      def self.serialize(vnode)
-        new.render(vnode)
+      def self.serialize(vnode, runtime = nil)
+        new(runtime).render(vnode)
+      end
+
+      def initialize(runtime = nil)
+        @runtime = runtime
       end
 
       def render(vnode)
@@ -46,7 +50,7 @@ module Funicular
         tag = element.tag
         attrs = serialize_props(element.props)
 
-        if VOID_ELEMENTS.include?(tag)
+        if VOID_ELEMENTS.include?(tag.downcase)
           "<#{tag}#{attrs}>"
         else
           "<#{tag}#{attrs}>#{render_children(element.children)}</#{tag}>"
@@ -75,6 +79,8 @@ module Funicular
 
       def render_component(component_vnode)
         instance = component_vnode.component_class.new(component_vnode.props)
+        instance.runtime = component_vnode.runtime || @runtime || Funicular::Runtime.new
+        instance.children = component_vnode.children
         component_vnode.instance = instance
         render(instance.build_vdom)
       end
@@ -83,17 +89,12 @@ module Funicular
         parts = [] #: Array[String]
         props.each do |key, value|
           key_str = key.to_s
-          next if SKIP_PROPS.include?(key)
+          normalized_key = key_str.downcase
+          next if SKIP_PROPS.include?(key) || SKIP_PROPS.include?(normalized_key.to_sym)
           # Event handlers are bound on the client, never serialized.
-          next if key_str.start_with?("on")
-
-          if URL_ATTRIBUTES.include?(key_str) &&
-             value.to_s.strip.downcase.start_with?("javascript:")
-            # Prevent XSS via javascript: URIs (mirrors Renderer#render_element).
-            next
-          end
+          next if VDOM.blocked_attribute?(normalized_key, value)
 
-          if BOOLEAN_ATTRIBUTES.include?(key_str)
+          if BOOLEAN_ATTRIBUTES.include?(normalized_key)
             # Boolean attributes are absent when false/nil, otherwise present.
             next if value.nil? || value.to_s == "false"
             parts << " #{key_str}=\"#{key_str}\""

data/mrblib/http.rb

@@ -134,6 +134,17 @@ module Funicular
         block.call(Response.new(status, data)) if block
       end
 
+      def parse_response_body(text)
+        return nil if text.nil?
+
+        body = text.to_s
+        return nil if body.empty?
+
+        JSON.parse(body)
+      rescue
+        body
+      end
+
       def request(method, url, body, cache: nil, &block)
         if method == "GET" && cache.is_a?(Integer) && cache > 0
           entry = cache_lookup(url)
@@ -163,7 +174,7 @@ module Funicular
         JS.global.fetch(url, options) do |response|
           status = response.status.to_i
           json_text = response.to_binary
-          data = JSON.parse(json_text)
+          data = parse_response_body(json_text)
           # @type var status: Integer
           http_response = Response.new(status, data)
 

data/mrblib/patcher.rb

@@ -1,8 +1,9 @@
 module Funicular
   module VDOM
     class Patcher
-      def initialize(doc = nil)
+      def initialize(doc = nil, runtime = nil)
         @doc = doc || JS.document
+        @runtime = runtime
       end
 
       def apply(element, patches)
@@ -28,7 +29,7 @@ module Funicular
             old_dom_element = instance.dom_element
 
             # Apply internal patches and get the potentially new root element
-            new_dom_element = Patcher.new(@doc).apply(old_dom_element, internal_patches)
+            new_dom_element = Patcher.new(@doc, instance.runtime).apply(old_dom_element, internal_patches)
 
             # Update the instance's reference to its root DOM element if it changed
             if new_dom_element != old_dom_element && new_dom_element.is_a?(JS::Element)
@@ -159,9 +160,10 @@ module Funicular
 
         props_patch.each do |key, value|
           key_str = key.to_s
+          normalized_key = key_str.downcase
 
           # Skip event handlers (handled by bind_events)
-          next if key_str.start_with?('on')
+          next if VDOM.event_attribute?(normalized_key)
 
           # Skip updating value for focused input/textarea elements
           if key_str == "value"
@@ -178,13 +180,13 @@ module Funicular
           end
 
           # Block javascript: URIs in URL attributes
-          if URL_ATTRIBUTES.include?(key_str) && value.to_s.strip.downcase.start_with?('javascript:')
+          if VDOM.blocked_attribute?(normalized_key, value)
             puts "[WARN] Funicular: Blocked potentially malicious value for attribute '#{key_str}'."
             next
           end
 
           # Handle boolean attributes
-          if BOOLEAN_ATTRIBUTES.include?(key_str)
+          if BOOLEAN_ATTRIBUTES.include?(normalized_key)
             if value.nil? || value.to_s == "false"
               element.removeAttribute(key_str)
               element[key_str] = false
@@ -225,14 +227,15 @@ module Funicular
           element = @doc.createElement(vnode.tag)
           vnode.props.each do |key, value|
             key_str = key.to_s
-            next if key_str.start_with?('on')
-            if URL_ATTRIBUTES.include?(key_str) && value.to_s.strip.downcase.start_with?('javascript:')
+            normalized_key = key_str.downcase
+            next if VDOM.event_attribute?(normalized_key)
+            if VDOM.blocked_attribute?(normalized_key, value)
               puts "[WARN] Funicular: Blocked potentially malicious value for attribute '#{key_str}'."
               next
             end
             if key_str == "value" && (vnode.tag == "input" || vnode.tag == "textarea")
               element[:value] = value.to_s
-            elsif BOOLEAN_ATTRIBUTES.include?(key_str)
+            elsif BOOLEAN_ATTRIBUTES.include?(normalized_key)
               if value.nil? || value.to_s == "false"
                 element[key_str] = false
               else
@@ -263,7 +266,7 @@ module Funicular
           element
         when :component
           raise "Expected Component vnode" unless vnode.is_a?(Component)
-          Renderer.new(@doc).render(vnode, nil)
+          Renderer.new(@doc, vnode.runtime || @runtime).render(vnode, nil)
         else
           raise "Unknown vnode type: #{vnode.type}"
         end

data/mrblib/router.rb

@@ -1,6 +1,6 @@
 module Funicular
   class Router
-    attr_reader :routes, :current_component, :current_path
+    attr_reader :routes, :current_component, :current_path, :url_helpers, :route_helpers
 
     def initialize(container)
       @container = container
@@ -10,7 +10,9 @@ module Funicular
       @current_path = nil
       @popstate_callback_id = nil
       @url_helpers = Module.new
-      Funicular.const_set(:RouteHelpers, @url_helpers) unless Funicular.const_defined?(:RouteHelpers)
+      @route_helpers = Object.new
+      @route_helpers.extend(@url_helpers)
+      @runtime = Funicular::Runtime.new(self)
     end
 
     # Rails-style DSL methods
@@ -133,6 +135,7 @@ module Funicular
       # Mount new component
       @current_path = path
       @current_component = component_class.new(params)
+      @current_component.runtime = @runtime
       # @type ivar @current_component: Funicular::Component
 
       server_root = hydrate_now ? Funicular.first_element_child(@container) : nil
@@ -147,6 +150,7 @@ module Funicular
           puts "[Funicular] Hydration failed, falling back to full render: #{e.message}"
           @container[:innerHTML] = ''
           @current_component = component_class.new(params)
+          @current_component.runtime = @runtime
         end
       end
 
@@ -194,19 +198,19 @@ module Funicular
       if param_names.empty?
         # No parameters - return static path
         @url_helpers.module_eval do
-          define_method(helper_method_name) do # steep:ignore
+          define_method(helper_method_name) do
             path_pattern
           end
         end
       else
         # With parameters
         @url_helpers.module_eval do
-          define_method(helper_method_name) do |*args| # steep:ignore
+          define_method(helper_method_name) do |*args|
             # Handle model objects with id method
             if args.length == 1 && args[0].respond_to?(:id) && param_names.length == 1
               args = [args[0].id]
             elsif args.length != param_names.length
-              raise ArgumentError, "#{helper_method_name} expects #{param_names.length} argument(s), got #{args.length}"
+              Kernel.raise ArgumentError, "#{helper_method_name} expects #{param_names.length} argument(s), got #{args.length}"
             end
 
             result = path_pattern.dup

data/mrblib/runtime.rb

@@ -0,0 +1,28 @@
+module Funicular
+  class Runtime
+    attr_accessor :router
+
+    def initialize(router = nil)
+      @router = router
+    end
+
+    def routes
+      router = @router
+      if router
+        router.route_helpers
+      else
+        EmptyRoutes
+      end
+    end
+  end
+
+  module EmptyRoutes
+    def self.method_missing(name, *args)
+      raise NoMethodError, "undefined route helper #{name}"
+    end
+
+    def self.respond_to_missing?(name, include_private = false)
+      false
+    end
+  end
+end

data/mrblib/styles.rb

@@ -25,28 +25,45 @@ module Funicular
     end
   end
 
-  class StyleAccessor
+  # Read-side accessor. One subclass is generated per component class with a
+  # real method per declared style name (see accessor_for), so lookups never
+  # go through method_missing at render time and a typo raises loudly.
+  # BasicObject keeps Object/Kernel names (display, hash, ...) usable as
+  # style names on both mruby and CRuby.
+  class StyleAccessor < BasicObject
+    def self.accessor_for(definitions)
+      klass = ::Class.new(self) #: singleton(StyleAccessor)
+      definitions.each_key do |name|
+        klass.__send__(:define_method, name) do |variant = nil|
+          self[name, variant] # steep:ignore
+        end
+      end
+      klass
+    end
+
     def initialize(definitions)
       @definitions = definitions
     end
 
-    def method_missing(name, *args)
+    def [](name, variant = nil)
       style = @definitions[name]
-      return StyleValue.new("") unless style
+      unless style
+        ::Kernel.raise ::ArgumentError,
+          "unknown style :#{name} (declared: #{@definitions.keys.map { |k| ":#{k}" }.join(', ')})"
+      end
 
-      if args.empty?
+      if variant.nil?
         # No arguments: return base or value
         StyleValue.new(style[:base] || style[:value] || "")
-      elsif args[0] == true || args[0] == false
+      elsif variant == true || variant == false
         # Boolean argument: base + active (if true)
-        # JS::Object#== now supports direct comparison with Ruby true/false
         base = style[:base] || ""
-        active_class = (args[0] == true) ? (style[:active] || "") : ""
+        active_class = (variant == true) ? (style[:active] || "") : ""
         StyleValue.new("#{base} #{active_class}".strip)
-      elsif args[0].is_a?(Symbol)
+      elsif ::Symbol === variant
         # Symbol argument: base + variants[symbol]
         base = style[:base] || ""
-        variant_class = style[:variants] ? (style[:variants][args[0]] || "") : ""
+        variant_class = style[:variants] ? (style[:variants][variant] || "") : ""
         StyleValue.new("#{base} #{variant_class}".strip)
       else
         # Other types: just return base
@@ -54,30 +71,99 @@ module Funicular
       end
     end
 
-    def respond_to_missing?(name, include_private = false)
-      @definitions.key?(name) || super
+    def method_missing(name, *_args)
+      ::Kernel.raise ::NoMethodError,
+        "unknown style '#{name}' (declared: #{@definitions.keys.map { |k| ":#{k}" }.join(', ')})"
+    end
+
+    def respond_to_missing?(name, _include_private = false)
+      @definitions.key?(name)
     end
   end
 
-  class StyleBuilder
+  # Definition-side builder. The class-level `styles do ... end` block is
+  # instance_exec'd on an instance, so barewords define styles:
+  #
+  #   styles do
+  #     shell "app-shell"
+  #     button base: "btn", variants: { primary: "btn--primary" }
+  #   end
+  #
+  # BasicObject keeps the bareword namespace clean on both VMs; the block
+  # also receives the builder as an argument for the explicit form
+  # `styles { |css| css.define(:name, ...) }`, needed when a value is
+  # computed (a bareword helper call inside the block would be captured as
+  # a style definition, and its nil return raises via validation below).
+  class StyleBuilder < BasicObject
+    # Style names that would clobber the builder/accessor internals.
+    RESERVED_NAMES = %i[
+      initialize method_missing respond_to_missing? define to_definitions
+      validate_options
+      == != ! [] equal? __send__ __id__ instance_eval instance_exec
+    ]
+
     def initialize
-      @definitions = {}
+      @definitions = {} #: Hash[Symbol, untyped]
     end
 
-    def method_missing(name, *args)
-      if args.size == 1 && args[0].is_a?(String)
-        # Simple style: name "class-string"
-        @definitions[name] = { value: args[0] }
-      elsif args.size == 1 && args[0].is_a?(Hash)
-        # Complex style with base/active/variants
-        @definitions[name] = args[0]
+    def define(name, value = nil, **options)
+      if RESERVED_NAMES.include?(name)
+        ::Kernel.raise ::ArgumentError, "style name :#{name} is reserved"
+      end
+      if @definitions.key?(name)
+        ::Kernel.raise ::ArgumentError, "style :#{name} is already defined"
+      end
+
+      if ::String === value
+        @definitions[name] = { value: value }
+      elsif ::Hash === value
+        @definitions[name] = validate_options(name, value)
+      elsif (::NilClass === value) && !options.empty?
+        @definitions[name] = validate_options(name, options)
       else
-        raise ArgumentError, "Invalid style definition for #{name}"
+        ::Kernel.raise ::ArgumentError,
+          "invalid style definition for :#{name}; expected a String, a " \
+          "Hash, or keyword options. Note: helper methods cannot be called " \
+          "bareword inside a styles block; use " \
+          "`styles { |css| css.define(...) }` for computed values."
+      end
+      self
+    end
+
+    def validate_options(name, options)
+      options.each do |key, val|
+        case key
+        when :value, :base, :active
+          unless ::String === val
+            ::Kernel.raise ::ArgumentError,
+              "style :#{name} option #{key}: must be a String. Note: helper " \
+              "methods cannot be called bareword inside a styles block; use " \
+              "`styles { |css| css.define(...) }` for computed values."
+          end
+        when :variants
+          unless (::Hash === val) && val.all? { |_k, v| ::String === v }
+            ::Kernel.raise ::ArgumentError,
+              "style :#{name} option variants: must be a Hash of Symbol => String"
+          end
+        else
+          ::Kernel.raise ::ArgumentError,
+            "style :#{name} has unknown option #{key.inspect} " \
+            "(allowed: value, base, active, variants)"
+        end
       end
+      options
     end
 
     def to_definitions
       @definitions
     end
+
+    def method_missing(name, value = nil, **options)
+      define(name, value, **options)
+    end
+
+    def respond_to_missing?(_name, _include_private = false)
+      true
+    end
   end
 end