clapton 0.0.13 → 0.0.15

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e238016cc8650d4f218c6a542329d5fcbbe844dd68124f2464063df016f25c1f
-  data.tar.gz: 36ae66989cf010520398499d54f007dbebb7deb6f91d37a578677eb8555bb53c
+  metadata.gz: 31438028bfe58d5ce7e560543850167002e53f148784072f20834081c0421b34
+  data.tar.gz: 2509467d610325dbaf0c1a20a953e50ecd568b8722d1b2fd7a1bc1acbb1bd6aa
 SHA512:
-  metadata.gz: ac72a228524042ed8748391c92076d3f05707b8f0763485ea7316f4b27e6c2a11c29643e4a6f43fc351bfffeb757dfd633afdcc710b81487f6a8754567a7d308
-  data.tar.gz: c5f4c34dbfc32e4ad8dd0bff57f160568cc98875f9b918c90275aa8abe39aa54dc9a1dddb8ed58eb80c380b45ec3476c78a0afb9de0630e4f65d3d0bfb5a6f66
+  metadata.gz: c68a61320829b1fcd198c627af8ff48de08479f1a725ebb51c14dfcbfc74277c4c0fec8735c4becf2994ebb1abcb36222a102dc9403d1d581406534a0fc11ca6
+  data.tar.gz: 5500b02be72eb9b161c1882ac913fd48ff6a0114e1bb3aa46b38572eb5885e00a4b2b7a10bc4968b3535331ba67916df292eb65dceff6a203e960d0c46eb47bd

data/README.md

@@ -12,6 +12,7 @@ Clapton is a Ruby on Rails gem for building web apps with pure Ruby only (no Jav
 - Action Cable (WebSocket)
 - [Ruby2JS](https://www.ruby2js.com/) (for compiling Ruby to JavaScript)
 - [Morphdom](https://github.com/patrick-steele-idem/morphdom)
+- importmap
 
 ## Installation
 

data/app/helpers/clapton/clapton_helper.rb

@@ -2,7 +2,22 @@ module Clapton
   module ClaptonHelper
 
     def clapton_javascript_tag
-      tag.script(src: "/clapton/index.js", type: "text/javascript")
+      all_components = Dir.glob(Rails.root.join("app", "components", "**", "*.rb"))
+      tags = <<~HTML
+        <script type="importmap">
+          {
+            "imports": {
+              "client": "/clapton/client.js",
+              "components": "/clapton/components.js",
+              #{ all_components.map do
+               |component| "\"#{File.basename(component, ".rb").camelize}\": \"/clapton/#{File.basename(component, ".rb").camelize}.js\""
+              end.join(",\n") }
+            }
+          }
+        </script>
+        <script type="module" src="/clapton/client.js"></script>
+      HTML
+      tags.html_safe
     end
 
     def clapton_tag

data/lib/clapton/engine.rb

@@ -21,6 +21,10 @@ module Clapton
         FileUtils.mkdir_p(components_path) unless components_path.exist?
         FileUtils.touch(components_path.join(".keep"))
 
+        FileUtils.mkdir_p(Rails.root.join("public", "clapton")) unless Rails.root.join("public", "clapton").exist?
+        File.write(Rails.root.join("public", "clapton", "components.js"), File.read(File.join(__dir__, "javascripts", "dist", "components.js")))
+        File.write(Rails.root.join("public", "clapton", "client.js"), File.read(File.join(__dir__, "javascripts", "dist", "client.js")))
+
         compile_components
 
         listener = Listen.to(Rails.root.join("app", "components")) do |modified, added, removed|
@@ -32,20 +36,26 @@ module Clapton
     end
 
     def compile_components
-      js = File.read(File.join(__dir__, "javascripts", "dist", "components.js"))
-      js += "\n"
-      js += File.read(File.join(__dir__, "javascripts", "dist", "client.js"))
-      js += "\n"
-      js += "window.components = [];"
-      js += "\n"
+      puts "Clapton: Compiling components"
+      
+      start_time = Time.now
       Dir.glob(Rails.root.join("app", "components", "**", "*.rb")).each do |file|
-        js += Ruby2JS.convert(File.read(file), preset: true)
+        code = File.read(file)
+        js = ""
+        js += "import { Clapton } from 'components';"
+        js += "\n"
+        code.scan(/(\w+)Component\.new/).each do |match|
+          js += "import { #{match[0]}Component } from '#{match[0]}Component';"
+          js += "\n"
+        end
+        js += Ruby2JS.convert(code, preset: true)
         js += "\n"
-        js += "window.#{File.basename(file, ".rb").camelize} = #{File.basename(file, ".rb").camelize};"
+        js += "export { #{File.basename(file, ".rb").camelize} };"
         js += "\n"
+        File.write(Rails.root.join("public", "clapton", "#{File.basename(file, ".rb").camelize}.js"), js)
       end
-      FileUtils.mkdir_p(Rails.root.join("public", "clapton")) unless Rails.root.join("public", "clapton").exist?
-      File.write(Rails.root.join("public", "clapton", "index.js"), js)
+      end_time = Time.now
+      puts "Clapton: Component compilation took #{end_time - start_time} seconds"
     end
   end
 end

data/lib/clapton/javascripts/dist/client.js

@@ -1285,11 +1285,11 @@ function getConfig(name) {
   }
 }
 
-const updateComponent = (component, state, property, target) => {
+const updateComponent = async (component, state, property, target) => {
     state[property] = target.value;
-    component.setAttribute("data-state", JSON.stringify(state));
-    const componentName = component.getAttribute("data-component");
-    const ComponentClass = window[componentName];
+    const componentName = component.dataset.component;
+    const module = await import(`${componentName}`);
+    const ComponentClass = module[componentName];
     const instance = new ComponentClass(state, component.dataset.id);
     morphdom(component, instance.render);
 };
@@ -1303,8 +1303,8 @@ const initializeInputs = () => {
         if (!attribute || !component)
             return;
         if (element.tagName === "INPUT") {
-            element.addEventListener("input", (event) => {
-                updateComponent(component, state, attribute, event.target);
+            element.addEventListener("input", async (event) => {
+                await updateComponent(component, state, attribute, event.target);
             });
         }
     });
@@ -1313,14 +1313,17 @@ const initializeInputs = () => {
 const consumer = createConsumer();
 
 const claptonChannel = consumer.subscriptions.create("Clapton::ClaptonChannel", {
-  connected() {},
+  connected() {
+    window.actionCableConnected = true;
+  },
 
   disconnected() {},
 
-  received(response) {
+  async received(response) {
     const { data, errors } = response;
     const component = document.querySelector(`[data-id="${data.component.id}"]`);
-    const instance = new window[data.component.name](data.state, data.component.id, errors);
+    const module = await import(`${data.component.name}`);
+    const instance = new module[data.component.name](data.state, data.component.id, errors);
     morphdom(component, instance.render, {
       onBeforeElUpdated: (_fromEl, toEl) => {
         toEl.setAttribute("data-set-event-handler", "true");
@@ -1344,26 +1347,26 @@ const handleAction = async (target, stateName, fn) => {
     if (!targetComponent)
         return;
     const component = target.closest(`[data-component]`);
-    const attribute = target.getAttribute("data-attribute");
+    const attribute = target.dataset.attribute;
     if (attribute) {
-        const state = JSON.parse(component.getAttribute("data-state") || "{}");
+        const state = JSON.parse(component.dataset.state || "{}");
         if (target.tagName === "INPUT") {
             state[attribute] = target.value;
-            component.setAttribute("data-state", JSON.stringify(state));
+            component.dataset.state = JSON.stringify(state);
         }
     }
     claptonChannel.perform("action", {
         data: {
             component: {
                 name: stateName.replace("State", "Component"),
-                id: targetComponent.getAttribute("data-id"),
+                id: targetComponent.dataset.id,
             },
             state: {
                 name: stateName,
                 action: fn,
-                attributes: JSON.parse(targetComponent.getAttribute("data-state") || "{}"),
+                attributes: JSON.parse(targetComponent.dataset.state || "{}"),
             },
-            params: JSON.parse(component.getAttribute("data-state") || "{}")
+            params: JSON.parse(component.dataset.state || "{}")
         }
     });
 };
@@ -1389,9 +1392,12 @@ const initializeActionsForElement = (element) => {
         if (!eventType || !componentName || !fnName)
             return;
         if (eventType === "render") {
-            setTimeout(() => {
-                handleAction(element, stateName, fnName);
-            }, 100);
+            const interval = setInterval(() => {
+                if (window.actionCableConnected === true) {
+                    handleAction(element, stateName, fnName);
+                    clearInterval(interval);
+                }
+            }, 10);
             element.setAttribute("data-render-event-handler", "true");
             return;
         }
@@ -1405,25 +1411,30 @@ const initializeActionsForElement = (element) => {
     });
 };
 
-const initializeComponents = () => {
+const initializeComponents = async () => {
     const components = document.querySelector("#clapton")?.getAttribute("data-clapton") || "[]";
-    JSON.parse(components).forEach((component) => createAndAppendComponent(component, document.querySelector("#clapton")));
-    document.querySelectorAll(".clapton-component").forEach((element) => {
+    const componentArray = JSON.parse(components);
+    for (const component of componentArray) {
+        await createAndAppendComponent(component, document.querySelector("#clapton"));
+    }
+    const elements = document.querySelectorAll(".clapton-component");
+    for (const element of elements) {
         const component = JSON.parse(element.getAttribute("data-clapton") || "{}");
-        createAndAppendComponent(component, element);
-    });
+        await createAndAppendComponent(component, element);
+    }
 };
-const createAndAppendComponent = (component, element) => {
+const createAndAppendComponent = async (component, element) => {
     const componentDom = document.createElement('div');
-    const instance = new window[component.component](component.state);
+    const module = await import(`${component.component}`);
+    const instance = new module[component.component](component.state);
     componentDom.innerHTML = instance.render;
     const firstChild = componentDom.firstChild;
     if (firstChild) {
         element.appendChild(firstChild);
     }
 };
-document.addEventListener("DOMContentLoaded", () => {
-    initializeComponents();
+document.addEventListener("DOMContentLoaded", async () => {
+    await initializeComponents();
     initializeActions();
     initializeInputs();
 });

data/lib/clapton/javascripts/dist/components-for-test.js

@@ -0,0 +1,439 @@
+var Clapton = (function (exports) {
+    'use strict';
+
+    const htmlAttributes = (params) => {
+        const customDataAttributes = params.data || {};
+        const others = Object.keys(params).filter(key => key !== "data");
+        const flattenDataAttributes = (data, prefix = "data") => {
+            return Object.keys(data).reduce((acc, key) => {
+                const value = data[key];
+                if (typeof value === "object" && value !== null) {
+                    acc.push(...flattenDataAttributes(value, `${prefix}-${key}`));
+                }
+                else {
+                    acc.push(`${prefix}-${key}='${escapeHtml(value)}'`);
+                }
+                return acc;
+            }, []);
+        };
+        return [
+            others.map(key => {
+                if (key === "disabled") {
+                    if (params[key] === false) {
+                        return "";
+                    }
+                    else {
+                        return `${key}`;
+                    }
+                }
+                return `${key}='${escapeHtml(params[key])}'`;
+            }).join(" "),
+            flattenDataAttributes(customDataAttributes).join(" ")
+        ].filter(Boolean).join(" ");
+    };
+    const escapeHtml = (unsafe) => {
+        if (typeof unsafe !== "string") {
+            return "";
+        }
+        return unsafe
+            .replace(/&/g, "&")
+            .replace(/</g, "&lt;")
+            .replace(/>/g, "&gt;")
+            .replace(/"/g, "&quot;")
+            .replace(/'/g, "&#039;");
+    };
+
+    class BlockQuote {
+        constructor(attributes = {}) {
+            this.children = [];
+            this.attributes = attributes;
+        }
+        get render() {
+            return `<blockquote ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</blockquote>`;
+        }
+        add(child) {
+            this.children.push(child);
+            return this;
+        }
+    }
+
+    class Box {
+        constructor(attributes = {}) {
+            this.children = [];
+            this.attributes = attributes;
+        }
+        add(child) {
+            this.children.push(child);
+            return this;
+        }
+        get render() {
+            return `<div ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</div>`;
+        }
+        add_action(eventType, stateName, fnName, options = {}) {
+            this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${eventType}->${stateName}#${fnName}@${options.debounce || 0}`;
+            return this;
+        }
+    }
+
+    class Button {
+        constructor(attributes = {}) {
+            this.attributes = attributes;
+            this.children = [];
+        }
+        add(child) {
+            this.children.push(child);
+            return this;
+        }
+        get render() {
+            return `<button ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</button>`;
+        }
+        add_action(event, klass, fn, options = {}) {
+            this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
+            return this;
+        }
+    }
+
+    class Checkbox {
+        constructor(state, attribute, attributes = {}) {
+            this.state = state;
+            this.attributes = attributes;
+            this.attribute = attribute;
+            this.attributes["data-attribute"] = attribute;
+        }
+        get render() {
+            return `<input type='checkbox' ${htmlAttributes(this.attributes)} value='${this.state[this.attribute] || ""}'/>`;
+        }
+        add_action(event, klass, fn, options = {}) {
+            this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
+            return this;
+        }
+    }
+
+    class Code {
+        constructor(attributes = {}) {
+            this.children = [];
+            this.attributes = attributes;
+        }
+        get render() {
+            return `<code ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</code>`;
+        }
+        add(child) {
+            this.children.push(child);
+            return this;
+        }
+    }
+
+    class DateTimeField {
+        constructor(state, attribute, attributes = {}) {
+            this.attributes = {};
+            this.state = state;
+            this.attribute = attribute;
+            this.attributes = attributes;
+            this.attributes["data-attribute"] = attribute;
+        }
+        get render() {
+            const value = this.state[this.attribute] ? this.datetime_local_value(this.state[this.attribute]) : "";
+            return `<input type='datetime-local' ${htmlAttributes(this.attributes)} value='${value}'/>`;
+        }
+        add_action(event, klass, fn, options = {}) {
+            this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
+            return this;
+        }
+        datetime_local_value(value) {
+            if (!value) {
+                return "";
+            }
+            const date = new Date(value);
+            date.setMinutes(date.getMinutes() - date.getTimezoneOffset());
+            let month = date.getMonth() + 1;
+            let day = date.getDate();
+            let hours = date.getHours();
+            let minutes = date.getMinutes();
+            if (month < 10) {
+                month = `0${month}`;
+            }
+            if (day < 10) {
+                day = `0${day}`;
+            }
+            if (hours < 10) {
+                hours = `0${hours}`;
+            }
+            if (minutes < 10) {
+                minutes = `0${minutes}`;
+            }
+            return `${date.getFullYear()}-${month}-${day}T${hours}:${minutes}`;
+        }
+    }
+
+    class Element {
+        constructor(type, attributes = {}) {
+            this.children = [];
+            this.type = type;
+            this.attributes = attributes;
+        }
+        get render() {
+            return `<${this.type} ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</${this.type}>`;
+        }
+        add(child) {
+            this.children.push(child);
+            return this;
+        }
+    }
+
+    class Embed {
+        constructor(html) {
+            this.html = html;
+        }
+        get render() {
+            return this.html;
+        }
+    }
+
+    class Emphasis {
+        constructor(attributes = {}) {
+            this.children = [];
+            this.attributes = attributes;
+        }
+        get render() {
+            return `<em ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</em>`;
+        }
+        add(child) {
+            this.children.push(child);
+            return this;
+        }
+    }
+
+    class Form {
+        constructor(attributes = {}) {
+            this.children = [];
+            this.attributes = attributes;
+        }
+        get render() {
+            return `<form ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</form>`;
+        }
+        add(child) {
+            this.children.push(child);
+            return this;
+        }
+    }
+
+    class Heading {
+        constructor(level, attributes = {}) {
+            this.children = [];
+            this.level = level;
+            this.attributes = attributes;
+        }
+        get render() {
+            return `<h${this.level} ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</h${this.level}>`;
+        }
+        add(child) {
+            this.children.push(child);
+            return this;
+        }
+    }
+
+    class Image {
+        constructor(src, alt, attributes = {}) {
+            this.children = [];
+            this.attributes = attributes;
+            this.src = src;
+            this.alt = alt;
+        }
+        get render() {
+            return `<img src='${this.src}' alt='${this.alt}' ${htmlAttributes(this.attributes)}/>`;
+        }
+    }
+
+    class Link {
+        constructor(href, attributes = {}) {
+            this.children = [];
+            this.attributes = attributes;
+            this.href = href;
+        }
+        get render() {
+            return `<a href='${this.href}' ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</a>`;
+        }
+        add(child) {
+            this.children.push(child);
+            return this;
+        }
+    }
+
+    class ListItem {
+        constructor(attributes = {}) {
+            this.children = [];
+            this.attributes = attributes;
+        }
+        add(child) {
+            this.children.push(child);
+            return this;
+        }
+        get render() {
+            return `<li ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</li>`;
+        }
+    }
+
+    class List {
+        constructor(attributes = {}) {
+            this.children = [];
+            this.attributes = attributes;
+        }
+        add(child) {
+            this.children.push(child);
+            return this;
+        }
+        get render() {
+            return `<ul ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</ul>`;
+        }
+    }
+
+    class OrderedList {
+        constructor(attributes = {}) {
+            this.children = [];
+            this.attributes = attributes;
+        }
+        add(child) {
+            this.children.push(child);
+            return this;
+        }
+        get render() {
+            return `<ol ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</ol>`;
+        }
+    }
+
+    class Paragraph {
+        constructor(attributes = {}) {
+            this.children = [];
+            this.attributes = attributes;
+        }
+        get render() {
+            return `<p ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</p>`;
+        }
+        add(child) {
+            this.children.push(child);
+            return this;
+        }
+    }
+
+    class Quote {
+        constructor(attributes = {}) {
+            this.children = [];
+            this.attributes = attributes;
+        }
+        get render() {
+            return `<q ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</q>`;
+        }
+        add(child) {
+            this.children.push(child);
+            return this;
+        }
+    }
+
+    class RadioButton {
+        constructor(state, attribute, attributes = {}) {
+            this.state = state;
+            this.attributes = attributes;
+            this.attribute = attribute;
+            this.attributes["data-attribute"] = attribute;
+        }
+        get render() {
+            return `<input type='radio' ${htmlAttributes(this.attributes)} value='${this.state[this.attribute] || ""}'/>`;
+        }
+        add_action(event, klass, fn, options = {}) {
+            this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
+            return this;
+        }
+    }
+
+    class Select {
+        constructor(options = [], state, attribute, attributes = {}) {
+            this.children = [];
+            this.options = options;
+            this.state = state;
+            this.attribute = attribute;
+            this.attributes = attributes;
+        }
+        get render() {
+            return `<select ${htmlAttributes(this.attributes)}>${this.options.map(option => `<option value='${option.value}'${option.value === this.state[this.attribute] ? " selected" : ""}>${option.text}</option>`).join("")}${this.children.map(child => child.render).join("")}</select>`;
+        }
+    }
+
+    class Span {
+        constructor(attributes = {}) {
+            this.children = [];
+            this.attributes = attributes;
+        }
+        get render() {
+            return `<span ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</span>`;
+        }
+        add(child) {
+            this.children.push(child);
+            return this;
+        }
+    }
+
+    class Component {
+        constructor(state = {}, id = Math.random().toString(36).substring(2, 10), errors = []) {
+            this._state = state;
+            this.id = id;
+            this._errors = errors;
+            this._root = new Box({ data: { component: this.constructor.name, state: JSON.stringify(this._state), id: this.id, errors: this._errors } });
+        }
+        get render() {
+            return this._root.render;
+        }
+    }
+
+    class TextField {
+        constructor(state, attribute, attributes = {}) {
+            this.state = state;
+            this.attributes = attributes;
+            this.attribute = attribute;
+            this.attributes["data-attribute"] = attribute;
+        }
+        get render() {
+            return `<input type='text' ${htmlAttributes(this.attributes)} value='${this.state[this.attribute] || ""}'/>`;
+        }
+        add_action(event, klass, fn, options = {}) {
+            this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
+            return this;
+        }
+    }
+
+    class Text {
+        constructor(value) {
+            this.value = value;
+        }
+        get render() {
+            return this.value;
+        }
+    }
+
+    exports.BlockQuote = BlockQuote;
+    exports.Box = Box;
+    exports.Button = Button;
+    exports.Checkbox = Checkbox;
+    exports.Code = Code;
+    exports.Component = Component;
+    exports.DateTimeField = DateTimeField;
+    exports.Element = Element;
+    exports.Embed = Embed;
+    exports.Emphasis = Emphasis;
+    exports.Form = Form;
+    exports.Heading = Heading;
+    exports.Image = Image;
+    exports.Link = Link;
+    exports.List = List;
+    exports.ListItem = ListItem;
+    exports.OrderedList = OrderedList;
+    exports.Paragraph = Paragraph;
+    exports.Quote = Quote;
+    exports.RadioButton = RadioButton;
+    exports.Select = Select;
+    exports.Span = Span;
+    exports.Text = Text;
+    exports.TextField = TextField;
+
+    return exports;
+
+})({});