quince 0.3.0 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2189200f4bee6758d6a981e3f4ba7b0d8dc558d0e0e2bb66fd421c11b404f954
-  data.tar.gz: 4153ceb85c057cfe7c2e74852aee81b82dde74362aecec53647b485fea191b87
+  metadata.gz: '0039bd9ca9658cfebba4048cc84fdbb095d8f2e656930501528f420c4dfa3bba'
+  data.tar.gz: a9720e7b11db54113fd56f1e09e43c980893297bbd5d3f46b1cdd0fc8ea2b61e
 SHA512:
-  metadata.gz: 923689df34d18c7357785812424acc62f38f89a3966c568bfd6e86f03c41eb1a9dd629eebdee4b1ae9321e42e1180d0be65af560613e31543496ebc312c40a30
-  data.tar.gz: 2624224d31f066ef9562333264e6f1cc00275bf72ab35942a1b0b3097864a14c89f04a6d4ebeee7ffb07ce240f22bde8f07939b61ee64a8019017ceceead23c9
+  metadata.gz: 6117b88cd23184b2072adae7b3b99ca868197119ffac9344477e6048519c735c7daa498067a4b96a92b60d68ce8fb5e0cc5a40529734c5c01c3b49e58317002d
+  data.tar.gz: f7952f3eea1cee2ef4153cbe4be1a5c709d777130f7eaa3be3ec0f5fa728da3550b81713766fcea6003673d8a65dd8a92aaae4ee3b1fb599b773463a67c5f05d

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    quince (0.3.0)
+    quince (0.4.0)
       oj (~> 3.13)
       typed_struct (>= 0.1.4)
 
@@ -9,7 +9,7 @@ GEM
   remote: https://rubygems.org/
   specs:
     diff-lcs (1.4.4)
-    oj (3.13.6)
+    oj (3.13.7)
     rake (13.0.6)
     rbs (1.6.2)
     rspec (3.10.0)

data/README.md

@@ -92,8 +92,8 @@ class Counter < Quince::Component
     def render
         div(
             h2("count is #{state.val}"),
-            button(onclick: method(:increment)) { "++" },
-            button(onclick: method(:decrement)) { "--" }
+            button(onclick: callback(:increment)) { "++" },
+            button(onclick: callback(:decrement)) { "--" }
         )
     end
 end

data/lib/quince/attributes_by_element.rb

@@ -475,6 +475,7 @@ module Quince
       onsearch: opt_callback,
       onkeyup: opt_callback,
       onselect: opt_callback,
+      onscroll: opt_callback,
     }.freeze
   end
 end

data/lib/quince/callback.js.erb

@@ -0,0 +1,30 @@
+const p = this.dataset[`quOn<%= key.to_s[2..-1] %>State`];
+<% if value.debugger %>debugger;<% end %>
+<% if value.if %>
+if (<%= value.if %>) {
+<% end %>
+<% if value.debounce_ms %>
+if (!window[`<%= fn_name %>`]) window[`<%= fn_name %>`] = Q.d((p) => {
+<% end %>
+Q.c(
+`<%= endpoint %>`,
+JSON.stringify(
+{component: p, event: `<%= key.to_s[2..-1]  %>`,stateContainer: `<%= state_container %>`,
+<% if value.take_form_values %>
+params: Q.f(this),
+<% end %>
+<% if rerender %>
+rerender: <%= rerender.to_json %>,
+<% end %>}),
+`<%= rerender&.dig(:selector)&.to_s || selector %>`,
+<% if mode = rerender&.dig(:mode) %>`<%= mode.to_s %>`<% end %>
+);
+<% if value.debounce_ms&.positive? %>
+}, <%= value.debounce_ms %>); window[`<%= fn_name %>`](p)
+<% end %>
+<% if value.if %>
+};
+<% end %>
+<% if value.prevent_default %>
+;return false;
+<% end %>

data/lib/quince/callback.rb

@@ -6,8 +6,10 @@ module Quince
       DEFAULT_CALLBACK_OPTIONS = {
         prevent_default: false,
         take_form_values: false,
-      # others could include:
-      # debounce: false,
+        debounce_ms: nil,
+        if: nil,
+        debugger: false,
+        rerender: nil,
       }.freeze
 
       def callback(method_name, **opts)
@@ -22,15 +24,24 @@ module Quince
     end
 
     module Interface
-      attr_reader :receiver, :method_name, :prevent_default, :take_form_values
+      attr_reader(
+        :receiver,
+        :method_name,
+        *ComponentHelpers::DEFAULT_CALLBACK_OPTIONS.keys,
+      )
     end
 
     include Interface
 
-    def initialize(receiver, method_name, prevent_default:, take_form_values:)
+    def initialize(
+      receiver,
+      method_name,
+      **opts
+    )
       @receiver, @method_name = receiver, method_name
-      @prevent_default = prevent_default
-      @take_form_values = take_form_values
+      ComponentHelpers::DEFAULT_CALLBACK_OPTIONS.each_key do |opt|
+        instance_variable_set :"@#{opt}", opts.fetch(opt)
+      end
     end
   end
 end

data/lib/quince/component.rb

@@ -10,7 +10,8 @@ module Quince
       def Props(**kw)
         self.const_set "Props", TypedStruct.new(
           { default: Quince::Types::Undefined },
-          Quince::Component::HTML_SELECTOR_ATTR => String,
+          Quince::Component::PARENT_SELECTOR_ATTR => String,
+          Quince::Component::SELF_SELECTOR => String,
           **kw,
         )
       end
@@ -23,16 +24,24 @@ module Quince
         self.const_set "State", st
       end
 
-      def exposed(action, meth0d: :POST)
+      def exposed(action, method: :POST)
         @exposed_actions ||= Set.new
         @exposed_actions.add action
         route = "/api/#{self.name}/#{action}"
         Quince.middleware.create_route_handler(
-          verb: meth0d,
+          verb: method,
           route: route,
         ) do |params|
           instance = Quince::Serialiser.deserialise(CGI.unescapeHTML(params[:component]))
           Quince::Component.class_variable_set :@@params, params
+          render_with = if params[:rerender]
+                          instance.instance_variable_set :@state_container, params[:stateContainer]
+                          params[:rerender][:method].to_sym
+                        else
+                          :render
+                        end
+          instance.instance_variable_set :@render_with, render_with
+          instance.instance_variable_set :@callback_event, params[:event]
           if @exposed_actions.member? action
             instance.send action
             instance
@@ -58,7 +67,9 @@ module Quince
       private
 
       def initialize_props(const, id, **props)
-        const::Props.new(HTML_SELECTOR_ATTR => id, **props) if const.const_defined?("Props")
+        if const.const_defined?("Props")
+          const::Props.new(PARENT_SELECTOR_ATTR => id, **props, SELF_SELECTOR => id)
+        end
       end
     end
 
@@ -76,7 +87,7 @@ module Quince
     protected
 
     def to(route, via: :POST)
-      self.class.exposed route, meth0d: via
+      self.class.exposed route, method: via
     end
 
     def params
@@ -87,10 +98,15 @@ module Quince
 
     attr_reader :__id
 
-    HTML_SELECTOR_ATTR = :"data-quid"
+    PARENT_SELECTOR_ATTR = :"data-quid-parent"
+    SELF_SELECTOR = :"data-quid"
+
+    def html_parent_selector
+      "[#{PARENT_SELECTOR_ATTR}='#{__id}']".freeze
+    end
 
-    def html_element_selector
-      "[#{HTML_SELECTOR_ATTR}='#{__id}']".freeze
+    def html_self_selector
+      "[#{SELF_SELECTOR}='#{props[SELF_SELECTOR]}']".freeze
     end
   end
 end

data/lib/quince/html_tag_components.rb

@@ -1,9 +1,13 @@
 require "oj"
 require_relative "attributes_by_element"
 require_relative "serialiser"
+require "erb"
 
 module Quince
   module HtmlTagComponents
+    CALLBACK_TEMPLATE = File.read(File.join(__dir__, "callback.js.erb")).delete!("\n").freeze
+    CALLBACK_ERB_INSTANCE = ERB.new(CALLBACK_TEMPLATE)
+
     def self.define_html_tag_component(const_name, attrs, self_closing: false)
       klass = Class.new(Quince::Component) do
         Props(
@@ -17,9 +21,12 @@ module Quince
               props.each_pair.map { |k, v| to_html_attr(k, v) }.compact.join(" ")
             end
           result = "<#{tag_name}"
-          result << " #{attrs}>" unless attrs.empty?
-
-          return result if self_closing?
+          if !attrs.empty?
+            result << " #{attrs}>"
+            return result if self_closing?
+          elsif attrs.empty? && self_closing?
+            return result << ">"
+          end
 
           result << Quince.to_html(children)
           result << "</#{tag_name}>"
@@ -37,22 +44,18 @@ module Quince
               receiver = value.receiver
               owner = receiver.class.name
               name = value.method_name
-              selector = receiver.send :html_element_selector
+              endpoint = "/api/#{owner}/#{name}"
+              selector = receiver.send :html_parent_selector
               internal = Quince::Serialiser.serialise receiver
-              payload = { component: CGI.escapeHTML(internal) }.to_json
-              payload_var_name = "p"
-              stringify_payload = if value.take_form_values
-                  "{...#{payload_var_name}, params: getFormValues(this)}"
-                else
-                  payload_var_name
-                end
-              cb = %Q{const #{payload_var_name} = #{payload}; callRemoteEndpoint(`/api/#{owner}/#{name}`, JSON.stringify(#{stringify_payload}),`#{selector}`)}
-              cb += ";return false" if value.prevent_default
-              CGI.escape_html(cb)
+              fn_name = "_Q_#{key}_#{receiver.send(:__id)}"
+              rerender = value.rerender
+              state_container = html_self_selector
+              code = CALLBACK_ERB_INSTANCE.result(binding)
+              return %Q{#{key}="#{CGI.escape_html(code)}" data-qu-#{key}-state="#{CGI.escapeHTML(internal)}"}
             when true
               return key
             when false, nil, Quince::Types::Undefined
-              return ""
+              return nil
             else
               raise "prop type not yet implemented #{value}"
             end

data/lib/quince/singleton_methods.rb

@@ -16,6 +16,7 @@ module Quince
         ) do |params|
           component = component.create if component.instance_of? Class
           Quince::Component.class_variable_set :@@params, params
+          component.instance_variable_set :@render_with, :render
           component
         end
       end
@@ -25,7 +26,7 @@ module Quince
     def define_constructor(const, constructor_name = const.to_s)
       HtmlTagComponents.instance_eval do
         define_method(constructor_name) do |*children, **props, &block_children|
-          new_props = { **props, Quince::Component::HTML_SELECTOR_ATTR => __id }
+          new_props = { **props, Quince::Component::PARENT_SELECTOR_ATTR => __id }
           const.create(*children, **new_props, &block_children)
         end
       end
@@ -44,12 +45,30 @@ module Quince
           output = to_html(output.call)
         when NilClass
           output = ""
-        else
+        when Component
           tmp = output
-          output = output.render
-          if output.is_a?(Array)
-            raise "#render in #{tmp.class} should not return multiple elements. Consider wrapping it in a div"
+          render_with = output.instance_variable_get(:@render_with) || :render
+          output = output.send render_with
+          case render_with
+          when :render
+            if output.is_a?(Array)
+              raise "#render in #{tmp.class} should not return multiple elements. Consider wrapping it in a div"
+            end
+          else
+            internal = Quince::Serialiser.serialise tmp
+            updated_state = CGI.escapeHTML(internal).to_json
+            selector = tmp.instance_variable_get :@state_container
+            event = tmp.instance_variable_get :@callback_event
+
+            scr = to_html(HtmlTagComponents::Script.create(<<~JS, type: "text/javascript"))
+              var stateContainer = document.querySelector(`#{selector}`);
+              stateContainer.dataset.quOn#{event}State = #{updated_state};
+            JS
+
+            output += (output.is_a?(String) ? scr : [scr])
           end
+        else
+          raise "don't know how to render #{output.class} (#{output.inspect})"
         end
       end
 

data/lib/quince/version.rb

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

data/scripts.js

@@ -1,28 +1,75 @@
-const callRemoteEndpoint = (endpoint, payload, selector) => {
-  fetch(
-    endpoint,
-    {
-      method: `POST`,
-      headers: {
-        "Content-Type": `application/json;charset=utf-8`
-      },
-      body: payload,
-    }
-  ).then(resp => resp.text()).then(html => {
-    const element = document.querySelector(selector);
-    if (!element) {
-      throw `element not found for ${selector}`;
-    }
+const Q = {
+  c: (endpoint, payload, selector, mode = "replace") => {
+    return fetch(
+      endpoint,
+      {
+        method: `POST`,
+        headers: {
+          "Content-Type": `application/json;charset=utf-8`
+        },
+        body: payload,
+      }
+    ).then(resp => resp.text()).then(html => {
+      const element = document.querySelector(selector);
+      if (!element) {
+        throw `element not found for ${selector}`;
+      }
 
-    element.outerHTML = html
-  })
-}
+      switch (mode) {
+        case "append_diff":
+          const tmpElem = document.createElement(element.nodeName);
+          tmpElem.innerHTML = html;
+          const newNodes = Array.from(tmpElem.childNodes);
+          const script = newNodes.pop();
+          const existingChildren = element.childNodes;
+          // This comparison doesn't currently work because of each node's unique id (data-quid).
+          // maybe it would be possible to use regex replace to on the raw html, but it could also
+          // be overkill
+          // let c = 0;
+          // for (; c < existingChildren.length; c++) {
+          //   if (existingChildren[c].isEqualNode(newNodes[c]))
+          //     continue;
+          //   else
+          //     break;
+          // }
+          // for the time being, we can just assume that we can just take the extra items
+          let c = existingChildren.length;
+          for (const node of newNodes.slice(c)) {
+            element.appendChild(node);
+          }
+
+          const newScript = document.createElement("script");
+          newScript.dataset.quid = script.dataset.quid;
+          newScript.innerHTML = script.innerHTML;
+          document.head.appendChild(newScript);
+          break;
+        case "replace": 
+          element.outerHTML = html;
+          break;
+        default:
+          throw `mode ${mode} is not valid`;
+      }
+    })
+  },
+  f: (elem) => {
+    let form = elem.localName === "form" ? elem : elem.form;
+    if (!form) {
+      throw `element ${elem} should belong to a form`;
+    }
+    const fd = new FormData(form);
+    return Object.fromEntries(fd.entries());
+  },
+  d: (func, wait_ms) => {
+    let timer = null;
 
-const getFormValues = (elem) => {
-  let form = elem.localName === "form" ? elem : elem.form;
-  if (!form) {
-    throw `element ${elem} should belong to a form`;
-  }
-  const fd = new FormData(form);
-  return Object.fromEntries(fd.entries());
-}
+    return (...args) => {
+      clearTimeout(timer);
+      return new Promise((resolve) => {
+        timer = setTimeout(
+          () => resolve(func(...args)),
+          wait_ms,
+        );
+      });
+    };
+  },
+};

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: quince
 version: !ruby/object:Gem::Version
-  version: 0.3.0
+  version: 0.4.0
 platform: ruby
 authors:
 - Joseph Johansen
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2021-09-15 00:00:00.000000000 Z
+date: 2021-09-24 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: typed_struct
@@ -57,6 +57,7 @@ files:
 - bin/setup
 - lib/quince.rb
 - lib/quince/attributes_by_element.rb
+- lib/quince/callback.js.erb
 - lib/quince/callback.rb
 - lib/quince/component.rb
 - lib/quince/html_tag_components.rb