funicular 0.5.1 → 0.5.2

data/minitest/ssr_test.rb

@@ -32,6 +32,22 @@ class SSRTest < Minitest::Test
                  serialize(el("p", {}, ["a & b <c>"]))
   end
 
+  def test_marks_empty_slots_and_seams_between_texts
+    assert_equal "<div><!----><b></b>a<!---->b<i></i>c</div>",
+                 serialize(el("div", {}, [nil, el("b"), "a", "b", el("i"), "c"]))
+  end
+
+  def test_raw_text_elements_are_not_marked
+    assert_equal "<textarea>ab</textarea>", serialize(el("textarea", {}, [nil, "a", "b"]))
+  end
+
+  def test_doubles_the_leading_newline_the_parser_strips
+    assert_equal "<pre>\n\nfoo</pre>", serialize(el("pre", {}, ["\nfoo"]))
+    assert_equal "<textarea>\n\nfoo</textarea>", serialize(el("textarea", {}, ["\nfoo"]))
+    assert_equal "<pre>foo\n</pre>", serialize(el("pre", {}, ["foo\n"]))
+    assert_equal "<div>\nfoo</div>", serialize(el("div", {}, ["\nfoo"]))
+  end
+
   def test_escapes_attribute_values
     assert_equal '<div title="&quot;hi&quot;"></div>',
                  serialize(el("div", { title: '"hi"' }))

data/mrblib/component.rb

@@ -418,6 +418,14 @@ module Funicular
       @suspense_definitions ||= {}
     end
 
+    # True while patch is re-rendering this component. Callers that would
+    # re-enter patch from inside that render (for example a child page that
+    # navigates in component_mounted) must take another path, because patch
+    # ignores nested calls.
+    def updating?
+      @updating
+    end
+
     # Update state and trigger re-render
     def patch(new_state)
       return unless @mounted
@@ -709,8 +717,8 @@ module Funicular
       end
 
       # Recursively bind events for children
-      if vnode.children && dom_element.children
-        children = dom_element.children.to_a
+      if vnode.children
+        children = VDOM.child_nodes(dom_element)
         vnode.children.each_with_index do |child_vnode, index|
           if child_vnode.is_a?(VDOM::Element)
             child_element = children[index]
@@ -748,8 +756,8 @@ module Funicular
         refs_map[ref_name] = dom_element
       end
 
-      if vnode.children && dom_element.children
-        children = dom_element.children.to_a
+      if vnode.children
+        children = VDOM.child_nodes(dom_element)
         vnode.children.each_with_index do |child_vnode, index|
           if child_vnode.is_a?(VDOM::Element)
             child_element = children[index]
@@ -810,6 +818,20 @@ module Funicular
       __view__.component(component_class, props, &block)
     end
 
+    def outlet
+      router = @runtime&.router
+      depth = router&.current_layouts&.index(self.class)
+      return unless router && depth
+
+      nested = router.current_layouts[depth + 1]
+      return component(nested, preserve: true, __route__: router.current_path) if nested
+
+      route = router.current_route
+      return unless route
+
+      component(route[0], route[1])
+    end
+
     def form_for(model_key, options = {}, &block)
       build_form_for(__view__, model_key, options, &block)
     end
@@ -1024,9 +1046,22 @@ module Funicular
       return unless vnode.is_a?(VDOM::Element)
       return unless dom_element
 
-      dom_children = dom_element.children.to_a
+      dom_children = VDOM.child_nodes(dom_element)
+      skipped = 0
+      previous_text = false
       vnode.children.each_with_index do |child, index|
-        child_dom = dom_children[index]
+        text = VDOM.text(child)
+        child_dom = dom_children[index + skipped]
+        if text && child_dom && child_dom[:nodeType] == 8
+          if text.empty?
+            dom_element.replaceChild(dom_element[:ownerDocument].createTextNode(''), child_dom)
+          elsif previous_text
+            dom_element.removeChild(child_dom)
+            skipped += 1
+            child_dom = dom_children[index + skipped]
+          end
+        end
+        previous_text = !text.to_s.empty?
         next unless child_dom
 
         if child.is_a?(VDOM::Component)

data/mrblib/differ.rb

@@ -29,6 +29,8 @@ module Funicular
         else
           if old_node == new_node
             []
+          elsif old_node.is_a?(String) && new_node.is_a?(String)
+            [[:text, new_node]]
           else
             [[:replace, new_node, old_node]]
           end
@@ -38,11 +40,7 @@ module Funicular
       private
 
       def self.diff_text(old_node, new_node)
-        if old_node.content != new_node.content
-          [[:replace, new_node, old_node]]
-        else
-          []
-        end
+        old_node.content == new_node.content ? [] : [[:text, new_node.content]]
       end
 
       def self.diff_element(old_node, new_node)
@@ -158,10 +156,10 @@ module Funicular
         #    "Loading..." placeholder that never disappeared once the keyed
         #    list it was replaced by arrived. Raw String children are text
         #    nodes in the DOM (normalize_children keeps them as Strings), so
-        #    they must be collected here as well; only nil slots are skipped.
+        #    they must be collected here as well. normalize_children never
+        #    leaves nil in the list, so every entry is a real DOM node.
         removes = [] #: Array[[Integer, child_t]]
         old_children.each_with_index do |old_child, old_index|
-          next if old_child.nil?
           next if matched_old_indices[old_index]
           removes << [old_index, old_child]
           has_change = true

data/mrblib/html_serializer.rb

@@ -18,6 +18,13 @@ module Funicular
       # Props that must never be emitted as HTML attributes.
       SKIP_PROPS = %i[ref key]
 
+      RAW_TEXT_ELEMENTS = %w[textarea title style]
+
+      # The HTML parser drops one newline right after the start tag of these
+      # elements. Emit an extra newline so the text node the client VDOM
+      # expects survives parsing with its content intact.
+      NEWLINE_STRIPPING_ELEMENTS = %w[pre textarea listing]
+
       def self.serialize(vnode, runtime = nil)
         new(runtime).render(vnode)
       end
@@ -50,27 +57,33 @@ module Funicular
         tag = element.tag
         attrs = serialize_props(element.props)
 
-        if VOID_ELEMENTS.include?(tag.downcase)
+        lower = tag.downcase
+        if VOID_ELEMENTS.include?(lower)
           "<#{tag}#{attrs}>"
         else
-          "<#{tag}#{attrs}>#{render_children(element.children)}</#{tag}>"
+          inner = render_children(element.children, !RAW_TEXT_ELEMENTS.include?(lower))
+          inner = "\n#{inner}" if NEWLINE_STRIPPING_ELEMENTS.include?(lower) && inner.start_with?("\n")
+          "<#{tag}#{attrs}>#{inner}</#{tag}>"
         end
       end
 
-      def render_children(children)
-        parts = [] #: Array[String]
-        children.each do |child|
-          if child.is_a?(VNode)
-            parts << render(child)
-          elsif child.is_a?(String)
-            parts << escape_html(child)
-          elsif child.is_a?(Array)
-            parts << render_children(child)
-          elsif !child.nil?
-            parts << escape_html(child.to_s)
+      # Element#children is flattened by normalize_children, so nested arrays
+      # need no handling here.
+      def render_children(children, marks)
+        previous_text = false
+        children.map do |child|
+          text = VDOM.text(child)
+          html = if text
+            escape_html(text)
+          elsif child.is_a?(VNode)
+            render(child)
+          else
+            ''
           end
-        end
-        parts.join
+          html = "<!---->#{html}" if marks && text && (text.empty? || previous_text)
+          previous_text = !text.to_s.empty?
+          html
+        end.join
       end
 
       def render_text(text)

data/mrblib/patcher.rb

@@ -24,6 +24,8 @@ module Funicular
             # Props patches only make sense for Element nodes (text nodes have
             # no attributes); narrow before delegating.
             update_props(element, patch[1]) if element.is_a?(JS::Element)
+          when :text
+            element[:nodeValue] = patch[1].to_s
           when :update_and_rebind
             instance, internal_patches, new_vdom = patch[1], patch[2], patch[3]
             old_dom_element = instance.dom_element
@@ -85,7 +87,7 @@ module Funicular
             ops = patch[1]
             removes = patch[2]
 
-            snapshot = child_nodes_array(element)
+            snapshot = VDOM.child_nodes(element)
 
             # Phase 1: removes (descending old_index)
             sorted_removes = removes.sort { |a, b| b[0] <=> a[0] }
@@ -146,7 +148,7 @@ module Funicular
           when Integer
             child_index = patch[0]
             child_patches = patch[1]
-            children = child_nodes_array(element)
+            children = VDOM.child_nodes(element)
             child_element = children[child_index]
             if child_element.nil?
               # No existing child at this index - we need to create new elements
@@ -164,7 +166,7 @@ module Funicular
               end
             elsif child_element.is_a?(JS::Object)
               # Recurse into the child node. apply handles both Element and
-              # text Node cases (the latter only meaningfully via :replace).
+              # text Node cases (the latter via :text or :replace).
               apply(child_element, child_patches)
             end
           end
@@ -174,14 +176,6 @@ module Funicular
 
       private
 
-      # childNodes (not children) so that text nodes are included. Each call
-      # crosses the wasm boundary once per child, so callers should read it
-      # once and work on the returned array.
-      def child_nodes_array(element)
-        child_nodes = element[:childNodes]
-        child_nodes.is_a?(JS::Object) ? child_nodes.to_a : [] #: Array[untyped]
-      end
-
       def unmount_component(vnode)
         return unless vnode.is_a?(VDOM::Component) && vnode.instance
         vnode.instance.unmount

data/mrblib/router.rb

@@ -1,6 +1,6 @@
 module Funicular
   class Router
-    attr_reader :routes, :current_component, :current_path, :url_helpers, :route_helpers
+    attr_reader :routes, :current_path, :url_helpers, :route_helpers, :current_route, :current_layouts
 
     def initialize(container)
       @container = container
@@ -8,6 +8,10 @@ module Funicular
       @default_route = nil
       @current_component = nil
       @current_path = nil
+      @current_route = nil
+      @current_layouts = []
+      @layout_stack = [] #: Array[singleton(Component)]
+      @layout_root = nil
       @popstate_callback_id = nil
       @beforeunload_callback_id = nil
       @url_helpers = Module.new
@@ -47,6 +51,27 @@ module Funicular
       @default_route = path
     end
 
+    def layout(component_class)
+      @layout_stack.push(component_class)
+      yield
+    ensure
+      @layout_stack.pop
+    end
+
+    def current_component
+      layout_root = @layout_root
+      route = @current_route
+      return @current_component unless layout_root && route
+
+      instance = layout_root #: Component?
+      chain = (@current_layouts[1..-1] || []) + [route[0]]
+      chain.each do |klass|
+        return nil unless instance
+        instance = find_component_instance(instance.vdom, klass)
+      end
+      instance
+    end
+
     # Resolve a path to [component_class, params] without any DOM/JS work.
     # Public entry point used by server-side rendering.
     def match(path)
@@ -91,7 +116,7 @@ module Funicular
       # a guard is active. sync: the decision must be made on the JS
       # event dispatch stack, so the guard must not suspend.
       @beforeunload_callback_id = JS.global.addEventListener('beforeunload', sync: true) do |event|
-        if @current_component&.navigation_guard
+        if current_component&.navigation_guard
           event.preventDefault
           event[:returnValue] = ''
         end
@@ -136,7 +161,7 @@ module Funicular
     # allowed; a String from the guard prompts the user via
     # Funicular.confirm. True when no component or no guard.
     def leave_allowed?
-      message = @current_component&.navigation_guard
+      message = current_component&.navigation_guard
       return true unless message
       Funicular.confirm(message)
     end
@@ -160,16 +185,19 @@ module Funicular
       @hydrate_initial = false
 
       # Find matching route
-      component_class, params = find_route(path)
+      route, params = match_route(path)
 
-      unless component_class
+      unless route
         # Maybe render a 404 component?
         return
       end
+      component_class = route[:component]
 
       # Don't remount if already on this path
       return if @current_path == path
 
+      return render_with_layouts(route, params, path, hydrate_now) unless route[:layouts].empty?
+
       # Unmount current component
       unmount_current_component
 
@@ -198,10 +226,56 @@ module Funicular
       @current_component.mount(@container)
     end
 
+    def render_with_layouts(route, params, path, hydrate_now)
+      if hydrate_now && Funicular.first_element_child(@container)
+        puts '[Funicular] Layouts do not support hydration; rendering fresh.'
+        @container[:innerHTML] = ''
+      end
+
+      layouts = route[:layouts]
+      layout_root = @layout_root
+      # Reuse the mounted chain only under the same outermost layout, and
+      # only when that root is not mid-render: Component#patch drops nested
+      # calls, so a page that navigates from component_mounted during a
+      # re-render would otherwise change the URL and leave the old page in
+      # the DOM. Remounting the chain matches what bare routes do.
+      reusable = layout_root && layout_root.mounted && !layout_root.updating? &&
+                 @current_layouts.first == layouts.first
+      unmount_current_component unless reusable
+
+      @current_path = path
+      @current_route = [route[:component], params]
+      @current_layouts = layouts
+
+      if layout_root && reusable
+        layout_root.patch(__route__: path)
+      else
+        layout_root = layouts.first.new
+        layout_root.runtime = @runtime
+        @layout_root = layout_root
+        layout_root.mount(@container)
+      end
+    end
+
+    def find_component_instance(vnode, component_class)
+      return unless vnode.is_a?(VDOM::Element) || vnode.is_a?(VDOM::Component)
+      return vnode.instance if vnode.is_a?(VDOM::Component) && vnode.component_class == component_class
+
+      vnode.children.each do |child|
+        found = find_component_instance(child, component_class)
+        return found if found
+      end
+      nil
+    end
+
     # Unmount current component
     def unmount_current_component
       @current_component&.unmount
       @current_component = nil
+      @layout_root&.unmount
+      @layout_root = nil
+      @current_layouts = []
+      @current_route = nil
       @current_path = nil
     end
 
@@ -215,7 +289,8 @@ module Funicular
         component: component_class,
         name: name,
         pattern_segments: pattern_segments,
-        constraints: constraints || {}
+        constraints: constraints || {},
+        layouts: @layout_stack.dup
       }
       # @type var route: Funicular::route_definition_t
       @routes << route
@@ -273,6 +348,11 @@ module Funicular
     end
 
     def find_route(path)
+      route, params = match_route(path)
+      [route && route[:component], params]
+    end
+
+    def match_route(path)
       path_segments = path.split('/').reject { |s| s.empty? }
       params = {} #: Hash[Symbol, untyped]
 
@@ -302,7 +382,7 @@ module Funicular
           end
         end
 
-        return [route[:component], params] if match
+        return [route, params] if match
       end
 
       [nil, params] # No route found

data/mrblib/vdom.rb

@@ -39,6 +39,16 @@ module Funicular
       true
     end
 
+    def self.text(child)
+      return child if child.is_a?(String)
+      child.content.to_s if child.is_a?(Text)
+    end
+
+    def self.child_nodes(element)
+      nodes = element[:childNodes]
+      nodes.is_a?(JS::Object) ? nodes.to_a : [] #: Array[untyped]
+    end
+
     def self.event_attribute?(name)
       name.to_s.downcase.start_with?('on')
     end
@@ -120,8 +130,8 @@ module Funicular
             # Recursively normalize nested arrays
             # @type var child: Array[Funicular::VDOM::child_t]
             result.concat(normalize_children(child))
-          when nil
-            # Skip nil values
+          when nil, false
+            result << ''
           else
             # Convert other types to strings
             result << child.to_s

data/mrblib/version.rb

@@ -7,5 +7,5 @@
 # Keep this file free of any dependency: it must evaluate standalone in
 # both PicoRuby and CRuby, regardless of load order.
 module Funicular
-  VERSION = '0.5.1'
+  VERSION = '0.5.2'
 end

data/sig/component.rbs

@@ -61,6 +61,7 @@ module Funicular
     def render_suspense: (Symbol name, fallback: untyped, ?error: untyped) { (ResourceAccessor) -> untyped } -> untyped
 
     def navigation_guard: () -> String?
+    def updating?: () -> bool
     def patch: (Hash[Symbol, untyped] new_state) -> void
     def mount: (JS::Element container) -> void
     def hydrate: (JS::Element dom_element) -> void
@@ -75,6 +76,7 @@ module Funicular
     def __view__: () -> ViewContext
     def routes: () -> untyped
     def component: (singleton(Component) component_class, ?Hash[Symbol, untyped] props) ?{ () -> untyped } -> VDOM::Component
+    def outlet: () -> VDOM::Component?
     def form_for: (Symbol model_key, ?Hash[Symbol, untyped] options) { (FormBuilder) -> void } -> VDOM::Element
     def link_to: (String path, **untyped options) ?{ -> untyped } -> VDOM::Element
     def button_to: (String path, ?method: Symbol, **untyped options) ?{ -> untyped } -> VDOM::Element

data/sig/html_serializer.rbs

@@ -3,6 +3,8 @@ module Funicular
     class HTMLSerializer
       VOID_ELEMENTS: Array[String]
       SKIP_PROPS: Array[Symbol]
+      RAW_TEXT_ELEMENTS: Array[String]
+      NEWLINE_STRIPPING_ELEMENTS: Array[String]
 
       def self.serialize: (VNode? vnode, ?Runtime? runtime) -> String
       def initialize: (?Runtime? runtime) -> void
@@ -10,7 +12,7 @@ module Funicular
 
       private
       def render_element: (Element element) -> String
-      def render_children: (Array[child_t] children) -> String
+      def render_children: (Array[child_t] children, bool marks) -> String
       def render_text: (Text text) -> String
       def render_component: (Component component_vnode) -> String
       def serialize_props: (Hash[Symbol, untyped] props) -> String

data/sig/patcher.rbs

@@ -9,7 +9,6 @@ module Funicular
       def apply: (JS::Object element, Array[patch_t] patches) -> JS::Object
 
       # Accepts JS::Object since callers narrow via is_a?(JS::Element) at runtime
-      private def child_nodes_array: (JS::Object element) -> Array[untyped]
       private def update_props: (JS::Object element, Hash[Symbol, String?] props_patch) -> void
       private def create_element: (untyped vnode) -> JS::Object
       private def unmount_component: (VDOM::VNode vnode) -> void

data/sig/router.rbs

@@ -1,10 +1,11 @@
 module Funicular
   type route_constraints_t = Hash[Symbol, Regexp]
-  type route_definition_t = { method: Symbol, path: String, component: singleton(Component), name: String?, pattern_segments: Array[String], constraints: route_constraints_t }
+  type route_definition_t = { method: Symbol, path: String, component: singleton(Component), name: String?, pattern_segments: Array[String], constraints: route_constraints_t, layouts: Array[singleton(Component)] }
 
   class Router
     attr_reader routes: Array[route_definition_t]
-    attr_reader current_component: Component?
+    attr_reader current_route: [singleton(Component), Hash[Symbol, untyped]]?
+    attr_reader current_layouts: Array[singleton(Component)]
     attr_reader current_path: String?
     attr_reader url_helpers: Module
     attr_reader route_helpers: untyped
@@ -17,6 +18,8 @@ module Funicular
     def delete: (String path, to: singleton(Component), ?as: String?, ?constraints: route_constraints_t?) -> void
     def add_route: (String path, singleton(Component) component_class, ?as: String?, ?constraints: route_constraints_t?) -> void
     def set_default: (String path) -> void
+    def layout: (singleton(Component) component_class) { () -> void } -> void
+    def current_component: () -> Component?
     def match: (String path) -> [singleton(Component)?, Hash[Symbol, untyped]]
     def start: (?hydrate: bool) -> void
     def stop: () -> void
@@ -28,7 +31,10 @@ module Funicular
     private def generate_url_helper: (String name, String path_pattern) -> void
     private def extract_param_names: (String path_pattern) -> Array[Symbol]
     private def handle_route_change: () -> void
+    private def render_with_layouts: (route_definition_t route, Hash[Symbol, untyped] params, String path, bool? hydrate_now) -> void
+    private def find_component_instance: (untyped vnode, singleton(Component) component_class) -> Component?
     private def unmount_current_component: () -> void
     private def find_route: (String path) -> [singleton(Component) | nil, Hash[Symbol, untyped]]
+    private def match_route: (String path) -> [route_definition_t?, Hash[Symbol, untyped]]
   end
 end

data/sig/vdom.rbs

@@ -7,6 +7,8 @@ module Funicular
     SCRIPTING_ELEMENTS: Array[String]
 
     def self.valid_tag_name?: (untyped name) -> bool
+    def self.text: (untyped child) -> String?
+    def self.child_nodes: (untyped element) -> Array[untyped]
     def self.valid_attribute_name?: (untyped name) -> bool
     def self.event_attribute?: (untyped name) -> bool
     def self.unsafe_url?: (untyped name, untyped value) -> bool

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: funicular
 version: !ruby/object:Gem::Version
-  version: 0.5.1
+  version: 0.5.2
 platform: ruby
 authors:
 - HASUMI Hitoshi
@@ -187,7 +187,7 @@ homepage: https://github.com/picoruby/funicular
 licenses:
 - MIT
 metadata:
-  homepage_uri: https://picoruby.org/funicular-getting-started
+  homepage_uri: https://picoruby.org/funicular
   source_code_uri: https://github.com/picoruby/funicular
   changelog_uri: https://github.com/picoruby/funicular/blob/master/CHANGELOG.md
 post_install_message: |2+
@@ -226,6 +226,6 @@ required_rubygems_version: !ruby/object:Gem::Requirement
 requirements: []
 rubygems_version: 4.0.20
 specification_version: 4
-summary: Rails plugin for client-side Ruby development with mruby
+summary: Rails plugin for client-side Ruby development with PicoRuby
 test_files: []
 ...