quince 0.4.0 → 0.5.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '0039bd9ca9658cfebba4048cc84fdbb095d8f2e656930501528f420c4dfa3bba'
-  data.tar.gz: a9720e7b11db54113fd56f1e09e43c980893297bbd5d3f46b1cdd0fc8ea2b61e
+  metadata.gz: b96b6d822903711930bf3baf921a25c7132761cbc339ff290ee1923aba16f4a6
+  data.tar.gz: 9ea1dd9174b8e4f7aa100a83fb29aef865b4426d0889cc41e31b1d13c83cacd6
 SHA512:
-  metadata.gz: 6117b88cd23184b2072adae7b3b99ca868197119ffac9344477e6048519c735c7daa498067a4b96a92b60d68ce8fb5e0cc5a40529734c5c01c3b49e58317002d
-  data.tar.gz: f7952f3eea1cee2ef4153cbe4be1a5c709d777130f7eaa3be3ec0f5fa728da3550b81713766fcea6003673d8a65dd8a92aaae4ee3b1fb599b773463a67c5f05d
+  metadata.gz: 59599fdd6fb5b40d606bcc2f70d636f0f214f10e14c424cd95d3b7c1dddef4341368d8569fff5ad5d5ebc77fcd0b865e274229d66b19665bb48ec54c62fca5f7
+  data.tar.gz: b6ecdd02de862f7659ac94a3c588687fd2b265e7ceb2ed3cae8893587e5d4e37454a7d9015398baf1e67c82cde6141ec32383093a7799db466c438b3bd52e241

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    quince (0.4.0)
+    quince (0.5.1)
       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.7)
+    oj (3.13.9)
     rake (13.0.6)
     rbs (1.6.2)
     rspec (3.10.0)

data/lib/quince/attributes_by_element.rb

@@ -4,14 +4,14 @@ require_relative "types"
 
 module Quince
   module HtmlTagComponents
-    referrer_policy = Rbs("'' | 'no-referrer' | 'no-referrer-when-downgrade' | 'origin' | 'origin-when-cross-origin' | 'same-origin' | 'strict-origin' | 'strict-origin-when-cross-origin' | 'unsafe-url' | Quince::Types::Undefined")
+    referrer_policy = Rbs("'' | 'no-referrer' | 'no-referrer-when-downgrade' | 'origin' | 'origin-when-cross-origin' | 'same-origin' | 'strict-origin' | 'strict-origin-when-cross-origin' | 'unsafe-url' | nil")
     form_method = Rbs(
-      '"get" | "post" | "GET" | "POST" | :GET | :POST | :get | :post | Quince::Types::Undefined'
+      '"get" | "post" | "GET" | "POST" | :GET | :POST | :get | :post | nil'
     )
     t = Quince::Types
     opt_string_sym = Rbs("#{t::OptionalString} | Symbol")
     opt_bool = t::OptionalBoolean
-    opt_callback = Rbs("Quince::Callback::Interface | Quince::Types::Undefined")
+    opt_callback = Rbs("Quince::Callback::Interface | nil")
     value = opt_string_sym # for now
 
     ATTRIBUTES_BY_ELEMENT = {
@@ -58,7 +58,7 @@ module Quince
         formnovalidate: opt_bool,
         formtarget: opt_string_sym,
         name: opt_string_sym,
-        type: Rbs("'submit' | 'reset' | 'button' | Quince::Types::Undefined"),
+        type: Rbs("'submit' | 'reset' | 'button' | nil"),
         value: value,
       }.freeze,
       "Canvas" => {
@@ -128,7 +128,7 @@ module Quince
         allowfullscreen: opt_bool,
         allowtransparency: opt_bool,
         height: opt_string_sym,
-        loading: Rbs('"eager" | "lazy" | Quince::Types::Undefined'),
+        loading: Rbs('"eager" | "lazy" | nil'),
         name: opt_string_sym,
         referrerpolicy: referrer_policy,
         sandbox: opt_string_sym,
@@ -192,7 +192,7 @@ module Quince
       "Ol" => {
         reversed: opt_bool,
         start: opt_string_sym,
-        type: Rbs("'1' | 'a' | 'A' | 'i' | 'I' | Quince::Types::Undefined"),
+        type: Rbs("'1' | 'a' | 'A' | 'i' | 'I' | nil"),
       }.freeze,
       "Optgroup" => {
         disabled: opt_bool,
@@ -270,7 +270,7 @@ module Quince
       }.freeze,
       "Tbody" => {}.freeze,
       "Td" => {
-        align: Rbs('"left" | "center" | "right" | "justify" | "char" | Quince::Types::Undefined'),
+        align: Rbs('"left" | "center" | "right" | "justify" | "char" | nil'),
         colspan: opt_string_sym,
         headers: opt_string_sym,
         rowspan: opt_string_sym,
@@ -278,7 +278,7 @@ module Quince
         abbr: opt_string_sym,
         height: opt_string_sym,
         width: opt_string_sym,
-        valign: Rbs('"top" | "middle" | "bottom" | "baseline" | Quince::Types::Undefined'),
+        valign: Rbs('"top" | "middle" | "bottom" | "baseline" | nil'),
       }.freeze,
       "Textarea" => {
         autocomplete: opt_string_sym,
@@ -300,7 +300,7 @@ module Quince
       }.freeze,
       "Tfoot" => {}.freeze,
       "Th" => {
-        align: Rbs('"left" | "center" | "right" | "justify" | "char" | Quince::Types::Undefined'),
+        align: Rbs('"left" | "center" | "right" | "justify" | "char" | nil'),
         colspan: opt_string_sym,
         headers: opt_string_sym,
         rowspan: opt_string_sym,
@@ -364,10 +364,10 @@ module Quince
       "Hr" => {}.freeze,
       "Img" => {
         alt: opt_string_sym,
-        crossorigin: Rbs('"anonymous" | "use-credentials" | "" | Quince::Types::Undefined'),
-        decoding: Rbs('"async" | "auto" | "sync" | Quince::Types::Undefined'),
+        crossorigin: Rbs('"anonymous" | "use-credentials" | "" | nil'),
+        decoding: Rbs('"async" | "auto" | "sync" | nil'),
         height: Rbs("#{opt_string_sym} | Integer"),
-        loading: Rbs('"eager" | "lazy" | Quince::Types::Undefined'),
+        loading: Rbs('"eager" | "lazy" | nil'),
         referrerpolicy: referrer_policy,
         sizes: opt_string_sym,
         src: opt_string_sym,
@@ -479,5 +479,3 @@ module Quince
     }.freeze
   end
 end
-
-Undefined = Quince::Types::Undefined

data/lib/quince/callback.js.erb

@@ -17,8 +17,10 @@ params: Q.f(this),
 rerender: <%= rerender.to_json %>,
 <% end %>}),
 `<%= rerender&.dig(:selector)&.to_s || selector %>`,
-<% if mode = rerender&.dig(:mode) %>`<%= mode.to_s %>`<% end %>
+`<%= (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 %>

data/lib/quince/callback.rb

@@ -10,6 +10,8 @@ module Quince
         if: nil,
         debugger: false,
         rerender: nil,
+        push_params_state: nil,
+        handle_errors: true,
       }.freeze
 
       def callback(method_name, **opts)

data/lib/quince/component.rb

@@ -9,7 +9,6 @@ module Quince
 
       def Props(**kw)
         self.const_set "Props", TypedStruct.new(
-          { default: Quince::Types::Undefined },
           Quince::Component::PARENT_SELECTOR_ATTR => String,
           Quince::Component::SELF_SELECTOR => String,
           **kw,
@@ -17,10 +16,7 @@ module Quince
       end
 
       def State(**kw)
-        st = kw.empty? ? nil : TypedStruct.new(
-          { default: Quince::Types::Undefined },
-          **kw,
-        )
+        st = kw.empty? ? nil : TypedStruct.new(**kw)
         self.const_set "State", st
       end
 
@@ -33,13 +29,13 @@ module Quince
           route: route,
         ) do |params|
           instance = Quince::Serialiser.deserialise(CGI.unescapeHTML(params[:component]))
-          Quince::Component.class_variable_set :@@params, params
+          Quince::Component.class_variable_set :@@params, 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 :@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
@@ -68,7 +64,11 @@ module Quince
 
       def initialize_props(const, id, **props)
         if const.const_defined?("Props")
-          const::Props.new(PARENT_SELECTOR_ATTR => id, **props, SELF_SELECTOR => id)
+          const::Props.new(
+            PARENT_SELECTOR_ATTR => id,
+            **props,
+            SELF_SELECTOR => id,
+          )
         end
       end
     end

data/lib/quince/html_tag_components.rb

@@ -50,11 +50,12 @@ module Quince
               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
+            when false, nil
               return nil
             else
               raise "prop type not yet implemented #{value}"
@@ -91,14 +92,35 @@ module Quince
         contents
       }
     end
-  end
 
-  Quince::Component.include HtmlTagComponents
-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);
+      }
 
-# tmp hack
-class TypedStruct < Struct
-  def to_json(*args)
-    to_h.to_json(*args)
+      .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
 end

data/lib/quince/singleton_methods.rb

@@ -23,12 +23,30 @@ module Quince
       Object.send :private, :expose
     end
 
-    def define_constructor(const, constructor_name = const.to_s)
+    def define_constructor(const, constructor_name = nil)
+      if const.name
+        parts = const.name.split("::")
+        parent_namespace = Object.const_get(parts[0...-1].join("::")) if parts.length > 1
+        constructor_name ||= parts.last
+      end
+      constructor_name ||= const.to_s
+
       HtmlTagComponents.instance_eval do
-        define_method(constructor_name) do |*children, **props, &block_children|
-          new_props = { **props, Quince::Component::PARENT_SELECTOR_ATTR => __id }
+        mthd = lambda do |*children, **props, &block_children|
+          new_props = {
+            **props,
+            Quince::Component::PARENT_SELECTOR_ATTR => __id,
+          }
           const.create(*children, **new_props, &block_children)
         end
+
+        if parent_namespace
+          parent_namespace.instance_exec do
+            define_method(constructor_name, &mthd)
+          end
+        else
+          define_method(constructor_name, &mthd)
+        end
       end
     end
 
@@ -64,6 +82,7 @@ module Quince
               var stateContainer = document.querySelector(`#{selector}`);
               stateContainer.dataset.quOn#{event}State = #{updated_state};
             JS
+            output = output.render if output.is_a?(Component)
 
             output += (output.is_a?(String) ? scr : [scr])
           end
@@ -76,3 +95,10 @@ module Quince
     end
   end
 end
+
+############## TODO #############
+# I think you should be able to know when a component is the first to be called in a render method,
+# so you should be able to attach some props to it behind the scenes. Then any consumers of this
+# state just have to know the selector, so they can read from it before passing it to the back end.
+#
+# Also, the front end needs to be updated such that script tags from the back end are always read

data/lib/quince/types.rb

@@ -1,13 +1,8 @@
 module Quince
   module Types
-    class Base; end
-
     # precompiled helper types
-    OptionalString = Rbs("String | Quince::Types::Undefined").freeze
-    OptionalBoolean = Rbs("true | false | Quince::Types::Undefined").freeze
-
-    # no functional value for now, other than constants
-    Undefined = Class.new(Base).new.freeze
-    Any = Class.new(Base).new.freeze
+    OptionalString = Rbs("String?").freeze
+    OptionalBoolean = Rbs("true | false | nil").freeze
+    Any = Rbs("untyped").freeze
   end
 end

data/lib/quince/version.rb

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

data/scripts.js

@@ -1,5 +1,5 @@
 const Q = {
-  c: (endpoint, payload, selector, mode = "replace") => {
+  c: (endpoint, payload, selector, mode, handleErrors) => {
     return fetch(
       endpoint,
       {
@@ -9,7 +9,19 @@ const Q = {
         },
         body: payload,
       }
-    ).then(resp => resp.text()).then(html => {
+    ).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}`;
@@ -49,6 +61,20 @@ const Q = {
         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) => {
@@ -72,4 +98,36 @@ const Q = {
       });
     };
   },
+  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", 
+  }
 };

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: quince
 version: !ruby/object:Gem::Version
-  version: 0.4.0
+  version: 0.5.1
 platform: ruby
 authors:
 - Joseph Johansen
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2021-09-24 00:00:00.000000000 Z
+date: 2021-10-15 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: typed_struct