mayu-live 0.0.0

data/lib/mayu/vdom/reconciliation.rb

@@ -0,0 +1,205 @@
+# typed: true
+# frozen_string_literal: true
+
+require_relative "interfaces"
+
+module Mayu
+  module VDOM
+    module Reconciliation
+      class RangeIterator
+        def initialize(elements)
+          @head = 0
+          @tail = elements.length.pred
+          @elements = elements
+        end
+
+        def done? = @head > @tail
+
+        def head = @elements[@head]
+        def tail = @elements[@tail]
+
+        def tail_idx = @tail
+
+        def next_head! = @head += 1
+        def next_tail! = @tail -= 1
+
+        def to_a = @elements[to_range] || []
+        def to_range = @head..@tail
+
+        def [](idx)
+          @elements[idx]
+        end
+
+        def []=(idx, value)
+          @elements[idx] = value
+        end
+      end
+
+      module Patches
+        extend T::Sig
+
+        class Init < T::Struct
+          const :descriptor, Interfaces::Descriptor
+          def inspect = "#{self.class.name}(#{descriptor.type.to_s})"
+        end
+
+        class InsertBefore < T::Struct
+          const :vnode, Interfaces::VNode
+          const :ref, T.nilable(Interfaces::VNode)
+
+          def inspect =
+            "#{self.class.name}(#{vnode.id.inspect}, #{ref&.id.inspect})"
+        end
+
+        class InsertAfter < T::Struct
+          const :vnode, Interfaces::VNode
+          const :ref, T.nilable(Interfaces::VNode)
+
+          def inspect =
+            "#{self.class.name}(#{vnode.id.inspect}, #{ref&.id.inspect})"
+        end
+
+        class Patch < T::Struct
+          const :vnode, Interfaces::VNode
+          const :descriptor, Interfaces::Descriptor
+          def inspect =
+            "#{self.class.name}(#{vnode.id.inspect}, #{descriptor.type.to_s})"
+        end
+
+        class Remove < T::Struct
+          const :vnode, Interfaces::VNode
+          def inspect = "#{self.class.name}(#{vnode.id.inspect})"
+        end
+
+        Any =
+          T.type_alias { T.any(Init, InsertBefore, InsertAfter, Patch, Remove) }
+      end
+
+      class Result < T::Struct
+        const :vnodes, T::Array[Interfaces::VNode]
+        const :patches, T::Array[Patches::Any]
+      end
+
+      extend T::Sig
+
+      sig do
+        params(
+          old_children: T::Array[Interfaces::VNode],
+          descriptors: T::Array[Interfaces::Descriptor],
+          block:
+            T
+              .proc
+              .params(arg0: Patches::Any)
+              .returns(T.nilable(Interfaces::VNode))
+        ).returns(Result)
+      end
+      def self.reconcile(old_children, descriptors, &block)
+        # TODO: Make it possible to disable the following check in production:
+        Children.check_duplicate_keys(descriptors)
+
+        grouped = old_children.group_by { _1.descriptor }
+
+        new_children =
+          descriptors
+            .map do |descriptor|
+              if vnode = grouped[descriptor]&.shift
+                yield Patches::Patch.new(vnode:, descriptor:)
+              else
+                yield Patches::Init.new(descriptor:)
+              end
+            end
+            .compact
+
+        patches = T.let([], T::Array[Patches::Any])
+
+        delta_time_ms =
+          Mayu::Utils.measure_time do
+            patches.concat(diff(old_children, new_children))
+
+            grouped.values.flatten.each do |removed|
+              patches << Patches::Remove.new(vnode: removed)
+            end
+          end
+
+        if delta_time_ms > 10
+          Console.logger.warn(self, "Diffing took %.3fms" % delta_time_ms)
+        end
+
+        Result.new(vnodes: new_children, patches:)
+      end
+
+      def self.diff(old, new)
+        old = old.dup
+        new = new.dup
+
+        old_ids = old.map(&:id).sort
+
+        iold = RangeIterator.new(old)
+        inew = RangeIterator.new(new)
+
+        ops = []
+
+        until iold.done? || inew.done?
+          iold.next_head! and next unless iold.head
+          iold.next_tail! and next unless iold.tail
+          inew.next_head! and next unless inew.head
+          inew.next_tail! and next unless inew.tail
+
+          if iold.tail.eql?(inew.tail)
+            iold.next_tail!
+            inew.next_tail!
+            next
+          end
+
+          if iold.head.eql?(inew.head)
+            iold.next_head!
+            inew.next_head!
+            next
+          end
+
+          if iold.head.eql?(inew.tail)
+            # Right move
+            ops << Patches::InsertAfter.new(vnode: iold.head, ref: iold.tail)
+            iold.next_head!
+            inew.next_tail!
+            next
+          end
+
+          if iold.tail.eql?(inew.head)
+            # Left move
+            ops << Patches::InsertBefore.new(vnode: iold.tail, ref: iold.head)
+            inew.next_head!
+            iold.next_tail!
+            next
+          end
+
+          if old_index = old.find_index { _1.eql?(inew.head) }
+            old[old_index] = nil
+            ops << Patches::InsertBefore.new(vnode: inew.head, ref: iold.head)
+            inew.next_head!
+            next
+          end
+
+          ops << Patches::InsertBefore.new(vnode: inew.head, ref: iold.head)
+
+          inew.next_head!
+        end
+
+        if iold.done?
+          before = new[inew.tail_idx.succ]
+
+          until inew.done?
+            ops << Patches::InsertBefore.new(vnode: inew.head, ref: before)
+            inew.next_head!
+          end
+        elsif inew.done?
+          iold.to_a.compact.each do |vnode|
+            # ops << Patches::Remove.new(vnode:)
+          end
+        end
+
+        ops
+      end
+    end
+  end
+end

data/lib/mayu/vdom/reconciliation.test.rb

@@ -0,0 +1,56 @@
+# typed: true
+
+require "minitest/autorun"
+require "test_helper"
+require_relative "../utils"
+require_relative "reconciliation"
+require_relative "descriptor"
+require_relative "h"
+
+class Mayu::VDOM::Reconciliation::Test < Minitest::Test
+  class VNode < T::Struct
+    extend T::Sig
+    include Mayu::VDOM::Interfaces::VNode
+
+    const :id, String, factory: -> { SecureRandom.alphanumeric(8) }
+    prop :descriptor, Mayu::VDOM::Descriptor
+  end
+
+  def test_reconciliation
+    descriptors = 200.times.map { |i| Mayu::VDOM::H[:li, i.to_s, key: i] }
+
+    patches = []
+
+    vnodes = T.let([], T::Array[VNode])
+
+    p Mayu::Utils.measure_time { vnodes = update(vnodes, descriptors) }
+
+    assert_equal(vnodes.map(&:descriptor), descriptors)
+
+    descriptors = descriptors.shuffle
+
+    p Mayu::Utils.measure_time { vnodes = update(vnodes, descriptors) }
+
+    descriptors = descriptors.shuffle.slice(0..100).to_a
+
+    p Mayu::Utils.measure_time { vnodes = update(vnodes, descriptors) }
+
+    assert_equal(vnodes.map(&:descriptor).map(&:key), descriptors.map(&:key))
+  end
+
+  def update(vnodes, descriptors)
+    result =
+      Mayu::VDOM::Reconciliation.reconcile(vnodes, descriptors) do
+        case _1
+        in Mayu::VDOM::Reconciliation::Patches::Init => init
+          VNode.new(descriptor: init.descriptor)
+        in Mayu::VDOM::Reconciliation::Patches::Patch => patch
+          vnode = patch.vnode
+          vnode.descriptor = patch.descriptor
+          vnode
+        end
+      end
+    p(count: result.patches.length)
+    result.vnodes.then { T.cast(_1, T::Array[VNode]) }
+  end
+end

data/lib/mayu/vdom/special_elements.rb

@@ -0,0 +1,108 @@
+# typed: strict
+
+require_relative "./descriptor"
+require_relative "../component"
+
+module Mayu
+  module VDOM
+    module SpecialElements
+      extend T::Sig
+
+      class Head < Component::Base
+        sig { override.returns(T.nilable(VDOM::Descriptor)) }
+        def render
+          T.unsafe(VDOM::H)[
+            :__mayu_head,
+            *children,
+            VDOM::H[:__mayu_links],
+            **props
+          ]
+        end
+      end
+
+      class Body < Component::Base
+        sig { override.returns(T.nilable(VDOM::Descriptor)) }
+        def render
+          T.unsafe(VDOM::H)[
+            :__mayu_body,
+            *children,
+            VDOM::H[:__mayu_scripts],
+            **props
+          ]
+        end
+      end
+
+      class A < Component::Base
+        EXTERNAL_LINK_RE = T.let(%r{\A[a-z0-9]+://}, Regexp)
+
+        sig { override.returns(T.nilable(VDOM::Descriptor)) }
+        def render
+          T.unsafe(VDOM::H)[:__mayu_a, *children, **overridden_props]
+        end
+
+        private
+
+        sig { returns(T::Hash[Symbol, T.untyped]) }
+        def overridden_props
+          if EXTERNAL_LINK_RE.match?(props[:href] || nil)
+            { rel: "noreferrer", external: true, **props }
+          elsif !props[:href] || props[:href].to_s.empty?
+            props
+          else
+            { **props, on_click: "Mayu.navigate(event)" }
+          end
+        end
+      end
+
+      class Select < Component::Base
+        class InvalidNestingError < StandardError
+        end
+
+        sig { override.returns(T.nilable(VDOM::Descriptor)) }
+        def render
+          value = props[:value]
+
+          options =
+            Array(children).flatten.compact.map do |descriptor|
+              unless descriptor.type == :option
+                raise InvalidNestingError,
+                      "Only option are valid children for select, you passed #{descriptor.type}"
+              end
+
+              T.unsafe(VDOM::H)[
+                descriptor.type,
+                *descriptor.children,
+                **descriptor.props,
+                key: descriptor.key,
+                selected: !value.nil? && value == descriptor.props[:value]
+              ]
+            end
+
+          T.unsafe(VDOM::H)[:__mayu_select, *options, **props.except(:value)]
+        end
+      end
+
+      MAPPINGS =
+        T.let(
+          {
+            head: Head,
+            __mayu_head: :head,
+            body: Body,
+            __mayu_body: :body,
+            a: A,
+            __mayu_a: :a,
+            select: Select,
+            __mayu_select: :select
+          }.freeze,
+          T::Hash[Symbol, Component::ElementType]
+        )
+
+      sig do
+        params(type: Component::ElementType).returns(Component::ElementType)
+      end
+      def self.for_type(type)
+        MAPPINGS.fetch(T.unsafe(type), type)
+      end
+    end
+  end
+end

data/lib/mayu/vdom/update_context.rb

@@ -0,0 +1,180 @@
+# typed: strict
+
+module Mayu
+  module VDOM
+    class UpdateContext
+      extend T::Sig
+
+      sig { returns(T::Array[T.untyped]) }
+      attr_reader :patches
+
+      sig { void }
+      def initialize
+        @patches = T.let([], T::Array[T.untyped])
+        @parents = T.let([], T::Array[VNode])
+        @dom_parent_ids = T.let([], T::Array[VNode::Id])
+        @stylesheets = T.let(Set.new, T::Set[String])
+      end
+
+      sig { returns(T.untyped) }
+      def stylesheet_patch
+        return [] if @stylesheets.empty?
+
+        paths = @stylesheets.to_a.map { "/__mayu/static/#{_1}" }
+
+        [{ type: :stylesheet, paths: }]
+      end
+
+      sig { returns(T.nilable(VNode)) }
+      def parent = @parents.last
+
+      sig { returns(VNode::Id) }
+      def dom_parent_id = @dom_parent_ids.last || "probably root"
+
+      sig { params(vnode: VNode, blk: T.proc.void).void }
+      def enter(vnode, &blk)
+        # Sleep so that the fiber yields,
+        # so that other things can run..
+        sleep(0)
+
+        dom_parent_id =
+          (vnode.descriptor.element? ? vnode.id : vnode.dom_parent_id)
+
+        @parents.push(vnode)
+        @dom_parent_ids.push(dom_parent_id) if dom_parent_id
+        yield
+      ensure
+        @dom_parent_ids.pop if dom_parent_id
+        @parents.pop
+      end
+
+      sig do
+        params(
+          vnode: VNode,
+          before: T.nilable(VNode),
+          after: T.nilable(VNode)
+        ).void
+      end
+      def insert(vnode, before: nil, after: nil)
+        html = vnode.to_html
+        ids = vnode.id_tree
+
+        if before
+          add_patch(
+            :insert,
+            id: vnode.dom_id,
+            parent: dom_parent_id,
+            before: before.dom_id,
+            html:,
+            ids:
+          )
+        elsif after
+          add_patch(
+            :insert,
+            id: vnode.dom_id,
+            parent: dom_parent_id,
+            after: after.dom_id,
+            html:,
+            ids:
+          )
+        else
+          add_patch(
+            :insert,
+            id: vnode.dom_id,
+            parent: dom_parent_id,
+            html:,
+            ids:
+          )
+        end
+      end
+
+      sig do
+        params(
+          vnode: VNode,
+          before: T.nilable(VNode),
+          after: T.nilable(VNode)
+        ).void
+      end
+      def move(vnode, before: nil, after: nil)
+        if before
+          add_patch(
+            :move,
+            id: vnode.dom_id,
+            parent: vnode.dom_parent_id,
+            before: before.dom_id
+          )
+        elsif after
+          add_patch(
+            :move,
+            id: vnode.dom_id,
+            parent: vnode.dom_parent_id,
+            after: after.dom_id
+          )
+        else
+          add_patch(:move, id: vnode.dom_id, parent: vnode.dom_parent_id)
+        end
+      end
+
+      sig { params(vnode: VNode, attr: String, value: T.nilable(String)).void }
+      def css(vnode, attr, value = nil)
+        if value
+          add_patch(:css, id: vnode.dom_id, attr:, value:)
+        else
+          add_patch(:css, id: vnode.dom_id, attr:)
+        end
+      end
+
+      sig { params(hash: String).void }
+      def stylesheet(hash)
+        @stylesheets.add(hash)
+      end
+
+      sig { params(vnode: VNode, text: String, append: T::Boolean).void }
+      def text(vnode, text, append: false)
+        if append
+          add_patch(:text, id: vnode.dom_id, append: text)
+        else
+          add_patch(:text, id: vnode.dom_id, text:)
+        end
+      end
+
+      sig { params(vnode: VNode).void }
+      def remove(vnode)
+        if vnode.component
+          if child = vnode.children.first
+            return remove(child)
+          end
+        end
+        # puts "\e[31mremove\e[0m #{vnode.key}"
+        add_patch(:remove, id: vnode.dom_id, parent: vnode.dom_parent_id)
+      end
+
+      sig { params(vnode: VNode, name: String, value: String).void }
+      def set_attribute(vnode, name, value)
+        add_patch(:attr, id: vnode.dom_id, name: attr_name(name), value:)
+      end
+
+      sig { params(vnode: VNode, name: String).void }
+      def remove_attribute(vnode, name)
+        add_patch(:attr, id: vnode.dom_id, name: attr_name(name))
+      end
+
+      private
+
+      sig { params(type: Symbol, args: T.untyped).void }
+      def add_patch(type, **args)
+        # puts "\e[35;5mXXXXXX \e[33m#{type}:\e[0m #{args.inspect}"
+        @patches.push(args.merge(type:))
+      end
+
+      sig { params(attr: T.any(String, Symbol)).returns(String) }
+      def attr_name(attr)
+        attr
+          .to_s
+          .sub(/^on_/, "on")
+          .sub(/\Ainitial_value\Z/, "value")
+          .tr("_", "-")
+      end
+    end
+  end
+end

data/lib/mayu/vdom/vdom.perf.test.rb

@@ -0,0 +1,146 @@
+# typed: false
+
+require "minitest/autorun"
+require "test_helper"
+require "async"
+require "rexml/document"
+require "stringio"
+require "ruby-prof"
+require_relative "vtree"
+require_relative "h"
+require_relative "../session"
+require_relative "../commands"
+require_relative "../app_metrics"
+
+class Mayu::VDOM::PerformanceTest < Minitest::Test
+  H = Mayu::VDOM::H
+
+  class Item < Mayu::Component::Base
+    def render
+      H[:li, H[:a, props[:children].to_a, href: props[:path]]]
+    end
+  end
+
+  class MyComponent < Mayu::Component::Base
+    def self.get_initial_state(**props)
+      { page: 0 }
+    end
+
+    def handle_next_page(e)
+      update { |state| { page: state[:page].succ } }
+    end
+
+    def render
+      per_page = 50
+      items = props[:items].slice(state[:page] * per_page, per_page)
+
+      H[
+        :div,
+        (H[:button, on_click: handler(:handle_next_page)] unless items.empty?),
+        H[:ul, items.map { H[Item, _1, key: _1, path: "/#{_1}"] }]
+      ]
+    end
+  end
+
+  def test_perf
+    items = 2000.times.map { SecureRandom.alphanumeric(5 + rand(10)) }
+
+    Async do
+      vtree = setup_vtree
+      app = H[MyComponent, items:]
+      vtree.render(app)
+      vtree.to_html.tap { |html| print_xml(html) }
+
+      # https://ruby-prof.github.io/#measurements
+      RubyProf.measure_mode = RubyProf::WALL_TIME
+      # RubyProf.measure_mode = RubyProf::PROCESS_TIME
+      # RubyProf.measure_mode = RubyProf::ALLOCATIONS
+      # RubyProf.measure_mode = RubyProf::MEMORY
+
+      profile = RubyProf::Profile.new(track_allocations: true)
+      profile.exclude_methods!(T::Types::Union, :recursively_valid?)
+      profile.exclude_methods!(T::Types::FixedArray, :initialize)
+      profile.exclude_methods!(T::Props::WeakConstructor, :initialize)
+      # profile.exclude_methods!(T::Props::Constructor::DecoratorMethods, :construct_props_without_defaults)
+      profile.exclude_methods!(T::Types::TypedEnumerable, :recursively_valid?)
+      # profile.exclude_methods!(T::Private::Methods::Signature, :initialize)
+
+      result =
+        profile.profile do
+          while handler_ref =
+                  vtree.instance_variable_get(:@handlers).values.first
+            handler_ref.call({})
+            update_vtree(vtree)
+          end
+        end
+
+      printer = RubyProf::MultiPrinter.new(result)
+      path = File.join(Mayu::TestHelper::ROOT, "profile")
+      FileUtils.mkdir_p(path)
+      printer.print(path:, profile: File.basename(__FILE__, ".*"))
+
+      vtree.render(app)
+      vtree.to_html.tap { |html| print_xml(html) }
+    end
+  end
+
+  private
+
+  def update_vtree(vtree)
+    ctx = Mayu::VDOM::UpdateContext.new
+
+    vtree.update_queue.size.times do
+      case vtree.update_queue.dequeue
+      in Mayu::VDOM::VNode => vnode
+        next if vnode.removed?
+        vtree.patch(ctx, vnode, vnode.descriptor, lifecycles: false)
+      else
+        # ok
+      end
+    end
+
+    ctx
+  end
+
+  def setup_vtree
+    $metrics ||= Mayu::AppMetrics.setup(Prometheus::Client.registry)
+    config =
+      Mayu::Configuration.from_hash!(
+        { "mode" => :test, "root" => "/laiehbaleihf", "secret_key" => "test" }
+      )
+    environment = Mayu::Environment.new(config, $metrics)
+
+    environment.instance_eval do
+      def load_root(path, headers: {})
+        H[:div]
+      end
+      def match_route(path)
+      end
+    end
+
+    session = Mayu::Session.new(environment:, path: "/")
+    Mayu::VDOM::VTree.new(session:)
+  end
+
+  def print_xml(source)
+    io = StringIO.new
+    doc = REXML::Document.new(source)
+    formatter = REXML::Formatters::Pretty.new
+    formatter.compact = true
+    formatter.write(doc, io)
+    io.rewind
+
+    puts(
+      io
+        .read
+        .to_s
+        .gsub(/(mayu-id='?)(\d+)/) { "#{$~[1]}\e[1;34m#{$~[2]}\e[0m" }
+        .gsub(/(mayu-key='?)(\d+)/) { "#{$~[1]}\e[1;35m#{$~[2]}\e[0m" }
+        .gsub(/>(.*?)</) { ">\e[33m#{$~[1]}\e[0m<" }
+    )
+  end
+
+  def extract_numbers(source)
+    REXML::Document.new(source).get_elements("//li").map(&:text).map(&:to_i)
+  end
+end