quince 0.4.1 → 0.4.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7821a6a97b508f9ad109b4ae7e59d9ccd774b94b2e451a9809eed7fa941e5cba
-  data.tar.gz: 5d5b6137d4089497408776c24152239fb99ac4977d5c31778cfa9bfa21518ee4
+  metadata.gz: 896b010bef61ab4914a5cf09ad07c94d2840063788c6637422dfe6544c9bda3c
+  data.tar.gz: e3c39708bc888257d56ae5463619dca5bc65ace9070537af7a488e5457ffd9a4
 SHA512:
-  metadata.gz: cb40eef0228b05bb3a7a05b7c32ec1b3bf47cd261d25a164f7df018e2dc94a5e720565ca7d2fd58edbb39899a481cbf7aacc50f01c97cd73bd815ca7dc95938b
-  data.tar.gz: a6fb31c6d7835f380670ee3be74952786653bf3a3b5f7712c0ac4dd9526b8e2f9564c127d71fe16c12cebbdccf0cd4df9cbcd8a3d243c327323572baa7ebde4a
+  metadata.gz: 7693d8919c8bc2f7af200afade98c9300131bf054a9a2614c9c3c80fa0eb90d2c153a092246bb7cf5b23661da2f57fde9038a712970ddecea45938eca4e4bcd5
+  data.tar.gz: da44b43b26aeeab5fe75579877e6e233e4425bf1befc12685ccdcc39aac445c617e16d2f28d571d1623afd1adc960db52a10918f39fc1922587e38c2aa736147

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    quince (0.4.1)
+    quince (0.4.2)
       oj (~> 3.13)
       typed_struct (>= 0.1.4)
 

data/lib/quince/callback.js.erb

@@ -17,7 +17,8 @@ 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? %>

data/lib/quince/callback.rb

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

data/lib/quince/html_tag_components.rb

@@ -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/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Quince
-  VERSION = "0.4.1"
+  VERSION = "0.4.2"
 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) => {
@@ -79,5 +105,29 @@ const Q = {
       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,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: quince
 version: !ruby/object:Gem::Version
-  version: 0.4.1
+  version: 0.4.2
 platform: ruby
 authors:
 - Joseph Johansen