funicular 0.2.0 → 0.3.0

data/mrblib/error_boundary.rb

@@ -3,13 +3,13 @@ module Funicular
   # a fallback UI instead of crashing the entire application.
   #
   # Usage:
-  #   component(ErrorBoundary) do
-  #     component(RiskyComponent)
+  #   h.component(ErrorBoundary) do |hh|
+  #     hh.component(RiskyComponent)
   #   end
   #
   # With custom fallback:
-  #   component(ErrorBoundary, fallback: ->(error) { div { "Error: #{error.message}" } }) do
-  #     component(RiskyComponent)
+  #   h.component(ErrorBoundary, fallback: ->(h, error) { h.div { "Error: #{error.message}" } }) do |hh|
+  #     hh.component(RiskyComponent)
   #   end
   #
   # Props:
@@ -60,56 +60,48 @@ module Funicular
       end
     end
 
-    def render
+    def render(h)
       if state[:has_error]
-        render_fallback
+        render_fallback(h)
       else
-        render_children
+        render_children(h)
       end
     end
 
     private
 
-    def render_fallback
+    def render_fallback(h)
       if props[:fallback]
-        result = props[:fallback].call(state[:error])
+        result = props[:fallback].call(h, state[:error])
         if result.is_a?(VDOM::VNode)
           result
         else
-          div { result.to_s }
+          h.div { result.to_s }
         end
       else
-        default_fallback
+        default_fallback(h)
       end
     end
 
-    def default_fallback
-      div(class: 'error-boundary-fallback', style: 'padding: 20px; background: #fee; border: 1px solid #f00; border-radius: 4px;') do
-        h3(style: 'color: #c00; margin: 0 0 10px 0;') { "Something went wrong" }
+    def default_fallback(h)
+      h.div(class: 'error-boundary-fallback', style: 'padding: 20px; background: #fee; border: 1px solid #f00; border-radius: 4px;') do |hh|
+        hh.h3(style: 'color: #c00; margin: 0 0 10px 0;') { "Something went wrong" }
         if state[:error]
-          div(style: 'font-family: monospace; white-space: pre-wrap; font-size: 12px; color: #600;') do
+          hh.div(style: 'font-family: monospace; white-space: pre-wrap; font-size: 12px; color: #600;') do
             "#{state[:error].class}: #{state[:error].message}"
           end
         end
         if Funicular.env.development? && state[:error_info]
-          div(style: 'margin-top: 10px; font-size: 11px; color: #666;') do
+          hh.div(style: 'margin-top: 10px; font-size: 11px; color: #666;') do
             "Component: #{state[:error_info][:component_class]}"
           end
         end
       end
     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 { "" }
+    def render_children(h)
+      h.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)
@@ -53,6 +55,7 @@ module Funicular
 
       # Build field attributes
       attrs = {
+        name: field_options[:name] || field_key,
         type: field_type,
         value: value,
         oninput: on_input
@@ -62,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 |h|
+        h.input(attrs)
         if has_error
-          @component.div(class: @error_class) { error_message }
+          h.div(class: @error_class) { error_message }
         end
       end
     end
@@ -98,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)
@@ -117,15 +121,17 @@ module Funicular
       end
 
       attrs = {
+        name: options[:name] || field_key,
+        value: value,
         oninput: on_input
       }.merge(options.reject { |k, _| k == :class })
 
       attrs[:class] = css_class unless css_class.empty?
 
-      @component.div do
-        @component.textarea(attrs) { value }
+      @view_context.div do |h|
+        h.textarea(attrs)
         if has_error
-          @component.div(class: @error_class) { error_message }
+          h.div(class: @error_class) { error_message }
         end
       end
     end
@@ -142,12 +148,13 @@ module Funicular
       end
 
       attrs = {
+        name: options[:name] || field_key,
         type: "checkbox",
         checked: value,
         onchange: on_change
       }.merge(options)
 
-      @component.input(attrs)
+      @view_context.input(attrs)
     end
 
     def select(field_name, choices, options = {})
@@ -161,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)
@@ -180,23 +188,24 @@ module Funicular
       end
 
       attrs = {
+        name: options[:name] || field_key,
         onchange: on_change
       }.merge(options.reject { |k, _| k == :class })
 
       attrs[:class] = css_class unless css_class.empty?
 
-      @component.div do
-        @component.select(attrs) do
+      @view_context.div do |h|
+        h.select(attrs) do |hh|
           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
+            hh.option(value: option_value, selected: selected) do
               option_text
             end
           end
         end
         if has_error
-          @component.div(class: @error_class) { error_message }
+          h.div(class: @error_class) { error_message }
         end
       end
     end
@@ -222,21 +231,22 @@ module Funicular
       on_change = custom_handler || default_handler
 
       attrs = {
+        name: options[:name] || field_key,
         type: "file",
         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
@@ -246,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
@@ -264,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.3.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,17 +180,19 @@ 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
             else
               element.setAttribute(key_str, key_str)
+              element[key_str] = true
             end
           elsif value.nil?
             element.removeAttribute(key_str)
@@ -223,17 +227,20 @@ 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
                 element.setAttribute(key_str, key_str)
+                element[key_str] = true
               end
             else
               element.setAttribute(key_str, value.to_s)
@@ -259,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

@@ -30,33 +30,29 @@ module Funicular
       @definitions = definitions
     end
 
-    def method_missing(name, *args)
+    def [](name, variant = nil)
       style = @definitions[name]
       return StyleValue.new("") unless style
 
-      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 variant.is_a?(Symbol)
         # 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
         StyleValue.new(style[:base] || style[:value] || "")
       end
     end
-
-    def respond_to_missing?(name, include_private = false)
-      @definitions.key?(name) || super
-    end
   end
 
   class StyleBuilder
@@ -64,13 +60,13 @@ module Funicular
       @definitions = {}
     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 value.is_a?(String)
+        @definitions[name] = { value: value }
+      elsif value.is_a?(Hash)
+        @definitions[name] = value
+      elsif !options.empty?
+        @definitions[name] = options
       else
         raise ArgumentError, "Invalid style definition for #{name}"
       end