quince 0.2.1 → 0.4.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1b5c0ef933d95f7026239bcfc5685e4aeb1582382056725b245cd37838540bf4
-  data.tar.gz: c790f0bc40602888167f46bf9636c55a739d5191645fd43e3614c78e381c6d1f
+  metadata.gz: 896b010bef61ab4914a5cf09ad07c94d2840063788c6637422dfe6544c9bda3c
+  data.tar.gz: e3c39708bc888257d56ae5463619dca5bc65ace9070537af7a488e5457ffd9a4
 SHA512:
-  metadata.gz: d7f561f03a959ed9fb221d0462f8901fe9f0cb20bda9e80ede4757a6a5cf89c979da5f80c135054454ef64ad5ddec09751a23088fe08762084b13c097c56db3c
-  data.tar.gz: 47f28845aad32b4ba53f76acf4fab7695c903cb8d94197b6ac0096f16a2f048684f5677d35edeaa0c06554ae19d32152294f878e5ef5e8cbd9eccd581671389a
+  metadata.gz: 7693d8919c8bc2f7af200afade98c9300131bf054a9a2614c9c3c80fa0eb90d2c153a092246bb7cf5b23661da2f57fde9038a712970ddecea45938eca4e4bcd5
+  data.tar.gz: da44b43b26aeeab5fe75579877e6e233e4425bf1befc12685ccdcc39aac445c617e16d2f28d571d1623afd1adc960db52a10918f39fc1922587e38c2aa736147

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    quince (0.2.1)
+    quince (0.4.2)
       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

@@ -11,7 +11,7 @@ module Quince
     t = Quince::Types
     opt_string_sym = Rbs("#{t::OptionalString} | Symbol")
     opt_bool = t::OptionalBoolean
-    opt_method = Rbs("Method | Quince::Types::Undefined")
+    opt_callback = Rbs("Quince::Callback::Interface | Quince::Types::Undefined")
     value = opt_string_sym # for now
 
     ATTRIBUTES_BY_ELEMENT = {
@@ -468,13 +468,14 @@ module Quince
     }.freeze
 
     DOM_EVENTS = {
-      onclick: opt_method,
-      onsubmit: opt_method,
-      onblur: opt_method,
-      onchange: opt_method,
-      onsearch: opt_method,
-      onkeyup: opt_method,
-      onselect: opt_method,
+      onclick: opt_callback,
+      onsubmit: opt_callback,
+      onblur: opt_callback,
+      onchange: opt_callback,
+      onsearch: opt_callback,
+      onkeyup: opt_callback,
+      onselect: opt_callback,
+      onscroll: opt_callback,
     }.freeze
   end
 end

data/lib/quince/callback.js.erb

@@ -0,0 +1,32 @@
+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 %>`,
+`<%= (mode = rerender&.dig(:mode)) ? mode.to_s : "replace" %>`,
+<%= value.handle_errors.to_json %>,
+);
+<% unless push_params_state == "null" %>Q.ps(<%= push_params_state %>);<% 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

@@ -0,0 +1,49 @@
+module Quince
+  class Callback
+    module ComponentHelpers
+      protected
+
+      DEFAULT_CALLBACK_OPTIONS = {
+        prevent_default: false,
+        take_form_values: false,
+        debounce_ms: nil,
+        if: nil,
+        debugger: false,
+        rerender: nil,
+        push_params_state: nil,
+        handle_errors: true,
+      }.freeze
+
+      def callback(method_name, **opts)
+        unless self.class.instance_variable_get(:@exposed_actions).member?(method_name)
+          raise "The action you called is not exposed"
+        end
+
+        opts = DEFAULT_CALLBACK_OPTIONS.merge opts
+
+        Callback.new(self, method_name, **opts)
+      end
+    end
+
+    module Interface
+      attr_reader(
+        :receiver,
+        :method_name,
+        *ComponentHelpers::DEFAULT_CALLBACK_OPTIONS.keys,
+      )
+    end
+
+    include Interface
+
+    def initialize(
+      receiver,
+      method_name,
+      **opts
+    )
+      @receiver, @method_name = receiver, method_name
+      ComponentHelpers::DEFAULT_CALLBACK_OPTIONS.each_key do |opt|
+        instance_variable_set :"@#{opt}", opts.fetch(opt)
+      end
+    end
+  end
+end

data/lib/quince/component.rb

@@ -1,3 +1,5 @@
+require_relative "callback"
+
 module Quince
   class Component
     class << self
@@ -8,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
@@ -21,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 params[:component]
+          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
@@ -47,7 +58,8 @@ module Quince
           id = SecureRandom.alphanumeric 6
           instance.instance_variable_set :@__id, id
           instance.instance_variable_set :@props, initialize_props(self, id, **props)
-          instance.instance_variable_set(:@children, block_children || children)
+          kids = block_children ? block_children.call : children
+          instance.instance_variable_set(:@children, kids)
           instance.send :initialize
         end
       end
@@ -55,10 +67,14 @@ 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
 
+    include Callback::ComponentHelpers
+
     # set default
     @@params = {}
 
@@ -71,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
@@ -82,10 +98,15 @@ module Quince
 
     attr_reader :__id
 
-    HTML_SELECTOR_ATTR = :"data-respid"
+    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}>"
@@ -33,30 +40,23 @@ module Quince
           attrib = case value
             when String, Integer, Float, Symbol
               value.to_s
-            when Method
-              owner = value.owner
+            when Callback::Interface
               receiver = value.receiver
-              name = value.name
-              selector = receiver.send :html_element_selector
+              owner = receiver.class.name
+              name = value.method_name
+              endpoint = "/api/#{owner}/#{name}"
+              selector = receiver.send :html_parent_selector
               internal = Quince::Serialiser.serialise receiver
-              payload = { component: internal }.to_json
-              case key
-              when :onclick
-                CGI.escape_html(
-                  "callRemoteEndpoint(`/api/#{owner}/#{name}`,`#{payload}`,`#{selector}`)"
-                )
-              when :onsubmit, :onchange, :onblur, :onsearch, :onkeyup, :onselect
-                ev = "const p = #{payload}; callRemoteEndpoint( `/api/#{owner}/#{name}`, JSON.stringify({...p, params: getFormValues(this)}), `#{selector}`)"
-                case key
-                when :onsubmit
-                  ev += "; return false"
-                end
-                CGI.escape_html(ev)
-              end
+              fn_name = "_Q_#{key}_#{receiver.send(:__id)}"
+              rerender = value.rerender
+              state_container = html_self_selector
+              push_params_state = value.push_params_state.to_json
+              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
@@ -92,6 +92,34 @@ module Quince
         contents
       }
     end
+
+    ERROR_HANDLING_STYLES = <<~CSS.freeze
+      .quince-err-container {
+        position: absolute;
+        bottom: 32px;
+        width: 300px;
+        height: 50px;
+        background-color: white;
+        border-radius: 4px;
+        border: 1px solid #bbb;
+        z-index: 999;
+        box-shadow: 2px 2px 8px rgba(0,0,0,0.3);
+        padding: 0 24px;
+        left: calc(50vw - 50px);
+      }
+
+      .quince-err-msg {
+        font-size: 1.2em;
+        text-align: center;
+        margin: auto;
+        color: chocolate;
+      }
+    CSS
+    private_constant :ERROR_HANDLING_STYLES
+
+    def error_message_styles
+      style(ERROR_HANDLING_STYLES)
+    end
   end
 
   Quince::Component.include HtmlTagComponents

data/lib/quince/serialiser.rb

@@ -2,98 +2,11 @@ module Quince
   class Serialiser
     class << self
       def serialise(obj)
-        val = case obj
-          when Quince::Component
-            {
-              id: serialise(obj.send(:__id)),
-              props: serialise(obj.props),
-              state: serialise(obj.state),
-              children: serialise(obj.children),
-              html_element_selector: serialise(obj.send(:html_element_selector)),
-            }
-          when Array
-            obj.map { |e| serialise e }
-          when TypedStruct, Struct, OpenStruct, Hash
-            result = obj.each_pair.each_with_object({}) do |(k, v), ob|
-              case v
-              when Undefined
-                next
-              else
-                ob[k] = serialise(v)
-              end
-            end
-            if result.empty? && !obj.is_a?(Hash)
-              obj = nil
-              nil
-            else
-              result
-            end
-          when Proc
-            obj = obj.call # is there a more efficient way of doing this?
-            serialise(obj)
-          when String
-            res = obj.gsub "\n", '\n'
-            res.gsub! ?", '\"'
-            res
-          else
-            obj
-          end
-
-        { t: obj.class&.name, v: val }
+        Oj.dump(obj)
       end
 
       def deserialise(json)
-        case json[:t]
-        when "String", "Integer", "Float", "NilClass", "TrueClass", "FalseClass"
-          json[:v]
-        when "Symbol"
-          json[:v].to_sym
-        when "Array"
-          json[:v].map { |e| deserialise e }
-        when "Hash"
-          transform_hash json[:v]
-        when "OpenStruct"
-          OpenStruct.new(**transform_hash(props))
-        when nil
-          nil
-        else
-          klass = Object.const_get(json[:t])
-          if klass < TypedStruct
-            transform_hash_for_struct(json[:v]) || {}
-          elsif klass < Quince::Component
-            instance = klass.allocate
-            val = json[:v]
-            id = deserialise val[:id]
-
-            instance.instance_variable_set :@__id, id
-            instance.instance_variable_set(
-              :@props,
-              klass.send(
-                :initialize_props,
-                klass,
-                id,
-                **(deserialise(val[:props]) || {}),
-              ),
-            )
-            st = deserialise(val[:state])
-            instance.instance_variable_set :@state, klass::State.new(**st) if st
-            instance.instance_variable_set :@children, deserialise(val[:children])
-            instance
-          else
-            klass = Object.const_get(json[:t])
-            klass.new(deserialise(json[:v]))
-          end
-        end
-      end
-
-      private
-
-      def transform_hash(hsh)
-        hsh.transform_values! { |v| deserialise v }
-      end
-
-      def transform_hash_for_struct(hsh)
-        hsh.to_h { |k, v| [k.to_sym, deserialise(v)] }
+        Oj.load(json)
       end
     end
   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.2.1"
+  VERSION = "0.4.2"
 end

data/scripts.js

@@ -1,28 +1,133 @@
-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, handleErrors) => {
+    return fetch(
+      endpoint,
+      {
+        method: `POST`,
+        headers: {
+          "Content-Type": `application/json;charset=utf-8`
+        },
+        body: payload,
+      }
+    ).then(resp => {
+      if (resp.status <= 299) {
+        return resp.text()
+      } else if (resp.status >= 500) {
+        throw Q.em["500"];
+      } else {
+        let msg = Q.em[`${resp.code}`];
+        
+        if (!msg && resp.code >= 400) msg = Q.em.generic;
+        
+        throw msg;
+      }
+    }).then(html => {
+      const element = document.querySelector(selector);
+      if (!element) {
+        throw `element not found for ${selector}`;
+      }
+
+      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);
+          }
 
-    element.outerHTML = html
-  })
-}
+          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`;
+      }
+    }).catch(err => {
+      if (!handleErrors) throw err;
+
+      let msg;
+      if (typeof err === "string") {
+        msg = err;
+      } else if (err.message) {
+        if (err.message.startsWith("NetworkError")) {
+          msg = Q.em.network;
+        } else {
+          msg = err.message;
+        }
+      } else msg = Q.em.generic;
+      Q.e(msg, 2500);
+    })
+  },
+  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`;
+    return (...args) => {
+      clearTimeout(timer);
+      return new Promise((resolve) => {
+        timer = setTimeout(
+          () => resolve(func(...args)),
+          wait_ms,
+        );
+      });
+    };
+  },
+  ps: (stateObj) => {
+    const base = location.origin + location.pathname;
+    const url = new URL(base);
+    for (const p in stateObj) {
+      url.searchParams.append(p, stateObj[p]);
+    };
+    window.history.pushState({}, document.title, url);
+  },
+  e: (msg, durationMs) => {
+    const containerClassName = "quince-err-container";
+    document.querySelectorAll(`.${containerClassName}`).forEach(e => e.remove());
+    const container = document.createElement("div");
+    const strong = document.createElement("strong");
+    strong.innerText = msg;
+    container.className = containerClassName;
+    strong.className = "quince-err-msg";
+    container.appendChild(strong);
+    document.body.insertAdjacentElement("afterbegin", container);
+    setTimeout(() => container.remove(), durationMs);
+  },
+  em: {
+    400: "Bad request",
+    401: "Unauthorised",
+    402: "Payment required",
+    403: "Forbidden",
+    404: "Not found",
+    422: "Unprocessable entity",
+    429: "Too many requests",
+    500: "Internal server error",
+    generic: "An error occurred",
+    network: "Network error", 
   }
-  const fd = new FormData(form);
-  return Object.fromEntries(fd.entries());
-}
+};

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: quince
 version: !ruby/object:Gem::Version
-  version: 0.2.1
+  version: 0.4.2
 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,8 @@ 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
 - lib/quince/serialiser.rb