clapton 0.0.19 → 0.0.21

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: eef5820604c561e4e740eb50620f88cfc0b9466517ad9e3f5da364a1d923356d
-  data.tar.gz: a1ce6f1bbc737affe77cdf3cb8370722c6fb169c6b4b386bb17fa53ed3799f47
+  metadata.gz: 27fa8b6f3ac907d41af32dc550fa4556dc127895ace2e296969b49b8dc8f887a
+  data.tar.gz: 8b5099fd20fc5f804d792c48da12b694755b18e8d51a9f65442ad61e1b2a7f6d
 SHA512:
-  metadata.gz: b36f22c1f26313d9aabe6e67844df736302c92b4f42805b09be40dca60b3ddab9c8a7b40a70dbab3c55ee7baa9ec508820342d4f4e296b16ca053721cff598ad
-  data.tar.gz: dd95168998ca12d46b7eb164698f918b6a8f0575e7a8be435a2943054a4a0407209758a834514719c11f496424ec29a1bcb4701a0d05ceb625e35b07d468789b
+  metadata.gz: be4dabb30c708af3c0ce9b1cb0a20eb1b58d79924e2303c880b2d4b0a563eb304d906d456b105b24999baaaebb05053d618136de336c0b5b579581f07817a9b6
+  data.tar.gz: ddd55a8d86a0c9f5666c7fb686ed137c442e8d377341279856eb140d39a2eb08fe5538f05aa3be29ae9448ce1aee6e64eb0d93187c6bf8a1f45b1f4bdf44f12b

data/README.md

@@ -34,12 +34,12 @@ To use a Clapton component in your view:
 # app/components/task_list_component.rb
 class TaskListComponent < Clapton::Component
   def render
-    box = c.box
+    box = c(:box)
     @state.tasks.each do |task|
       box.add(TaskItemComponent.new(id: task[:id], title: task[:title], due: task[:due], done: task[:done]))
     end
-    btn = c.button
-    btn.add(c.text("Add Task"))
+    btn = c(:button)
+    btn.add(c(:text, "Add Task"))
     btn.add_action(:click, :TaskListState, :add_task)
     box.add(btn)
   end
@@ -51,15 +51,15 @@ end
 # app/components/task_item_component.rb
 class TaskItemComponent < Clapton::Component
   def render
-    box = c.box
-    btn = c.button
-    btn.add(c.text(@state.done ? "✅" : "🟩"))
+    box = c(:box)
+    btn = c(:button)
+    btn.add(c(:text, @state.done ? "✅" : "🟩"))
     btn.add_action(:click, :TaskListState, :toggle_done)
 
-    tf = c.input(@state, :title)
+    tf = c(:input, @state, :title)
     tf.add_action(:input, :TaskListState, :update_title)
 
-    dt = c.datetime(@state, :due)
+    dt = c(:datetime, @state, :due)
     dt.add_action(:input, :TaskListState, :update_due)
 
     box.add(btn).add(tf).add(dt)
@@ -171,7 +171,7 @@ The `render` event is a special event that is triggered when the component is re
 class TaskListComponent < Clapton::Component
   def render
     # ...
-    box = c.box
+    box = c(:box)
     box.add_action(:render, :TaskListState, :add_empty_task, debounce: 500)
   end
 end
@@ -256,31 +256,31 @@ text = Clapton::Text.new("Hello")`
 ### Preset Component Methods
 
 ```javascript
-c.bq(...props)
-c.box(...props)
-c.b(...props)
-c.button(...props)
-c.check(...props)
-c.code(...props)
-c.datetime(...props)
-c.el(...props)
-c.embed(...props)
-c.em(...props)
-c.form(...props)
-c.h(...props)
-c.img(...props)
-c.a(...props)
-c.li(...props)
-c.ul(...props)
-c.ol(...props)
-c.p(...props)
-c.q(...props)
-c.radio(...props)
-c.select(...props)
-c.span(...props)
-c.textarea(...props)
-c.input(...props)
-c.text(...props)
+c(:bq, ...props)
+c(:box, ...props)
+c(:b, ...props)
+c(:button, ...props)
+c(:check, ...props)
+c(:code, ...props)
+c(:datetime, ...props)
+c(:el, ...props)
+c(:embed, ...props)
+c(:em, ...props)
+c(:form, ...props)
+c(:h, ...props)
+c(:img, ...props)
+c(:a, ...props)
+c(:li, ...props)
+c(:ul, ...props)
+c(:ol, ...props)
+c(:p, ...props)
+c(:q, ...props)
+c(:radio, ...props)
+c(:select, ...props)
+c(:span, ...props)
+c(:textarea, ...props)
+c(:input, ...props)
+c(:text, ...props)
 ```
 
 ### Streaming

data/app/helpers/clapton/clapton_helper.rb

@@ -9,6 +9,7 @@ module Clapton
             "imports": {
               "client": "/clapton/client.js",
               "components": "/clapton/components.js",
+              "c": "/clapton/c.js",
               #{ all_components.map do
                |component| "\"#{File.basename(component, ".rb").camelize}\": \"/clapton/#{File.basename(component, ".rb").camelize}.js\""
               end.join(",\n") }

data/lib/clapton/engine.rb

@@ -24,6 +24,7 @@ module Clapton
         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")))
+        File.write(Rails.root.join("public", "clapton", "c.js"), File.read(File.join(__dir__, "javascripts", "dist", "c.js")))
 
         compile_components
 
@@ -44,6 +45,8 @@ module Clapton
         js = ""
         js += "import { Clapton } from 'components';"
         js += "\n"
+        js += "import { c } from 'c';"
+        js += "\n"
         code.scan(/(\w+)Component\.new/).each do |match|
           js += "import { #{match[0]}Component } from '#{match[0]}Component';"
           js += "\n"

data/lib/clapton/javascripts/dist/c

@@ -0,0 +1,559 @@
+var c = (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 renderWrapper() {
+            return `<blockquote ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).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 renderWrapper() {
+            return `<div ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).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 renderWrapper() {
+            return `<button ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).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 Bold {
+        constructor(attributes = {}) {
+            this.children = [];
+            this.attributes = attributes;
+        }
+        get renderWrapper() {
+            return `<strong ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</strong>`;
+        }
+        add(child) {
+            this.children.push(child);
+            return this;
+        }
+    }
+
+    class Checkbox {
+        constructor(state, attribute, attributes = {}) {
+            this.state = state;
+            this.attributes = attributes;
+            this.attribute = attribute;
+            this.attributes["data-attribute"] = attribute;
+        }
+        get renderWrapper() {
+            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 renderWrapper() {
+            return `<code ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).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 renderWrapper() {
+            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 renderWrapper() {
+            return `<${this.type} ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</${this.type}>`;
+        }
+        add(child) {
+            this.children.push(child);
+            return this;
+        }
+    }
+
+    class Embed {
+        constructor(html) {
+            this.html = html;
+        }
+        get renderWrapper() {
+            return this.html;
+        }
+    }
+
+    class Emphasis {
+        constructor(attributes = {}) {
+            this.children = [];
+            this.attributes = attributes;
+        }
+        get renderWrapper() {
+            return `<em ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</em>`;
+        }
+        add(child) {
+            this.children.push(child);
+            return this;
+        }
+    }
+
+    class Form {
+        constructor(attributes = {}) {
+            this.children = [];
+            this.attributes = attributes;
+        }
+        get renderWrapper() {
+            return `<form ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</form>`;
+        }
+        add(child) {
+            this.children.push(child);
+            return this;
+        }
+    }
+
+    class Heading {
+        constructor(level, attributes = {}) {
+            this.children = [];
+            this.level = level;
+            this.attributes = attributes;
+        }
+        get renderWrapper() {
+            return `<h${this.level} ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).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 renderWrapper() {
+            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 renderWrapper() {
+            return `<a href='${this.href}' ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).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 renderWrapper() {
+            return `<li ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</li>`;
+        }
+    }
+
+    class List {
+        constructor(attributes = {}) {
+            this.children = [];
+            this.attributes = attributes;
+        }
+        add(child) {
+            this.children.push(child);
+            return this;
+        }
+        get renderWrapper() {
+            return `<ul ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</ul>`;
+        }
+    }
+
+    class OrderedList {
+        constructor(attributes = {}) {
+            this.children = [];
+            this.attributes = attributes;
+        }
+        add(child) {
+            this.children.push(child);
+            return this;
+        }
+        get renderWrapper() {
+            return `<ol ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</ol>`;
+        }
+    }
+
+    class Paragraph {
+        constructor(attributes = {}) {
+            this.children = [];
+            this.attributes = attributes;
+        }
+        get renderWrapper() {
+            return `<p ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</p>`;
+        }
+        add(child) {
+            this.children.push(child);
+            return this;
+        }
+    }
+
+    class Quote {
+        constructor(attributes = {}) {
+            this.children = [];
+            this.attributes = attributes;
+        }
+        get renderWrapper() {
+            return `<q ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).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 renderWrapper() {
+            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 renderWrapper() {
+            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.renderWrapper).join("")}</select>`;
+        }
+    }
+
+    class Span {
+        constructor(attributes = {}) {
+            this.children = [];
+            this.attributes = attributes;
+        }
+        get renderWrapper() {
+            return `<span ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).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;
+        }
+        get render() {
+            return new Box({});
+        }
+        get renderWrapper() {
+            const root = this.render;
+            if (root.attributes) {
+                root.attributes = { ...root.attributes, data: { ...root.attributes.data, component: this.constructor.name, state: JSON.stringify(this._state), id: this.id, errors: this._errors } };
+            }
+            else {
+                root.attributes = { data: { component: this.constructor.name, state: JSON.stringify(this._state), id: this.id, errors: this._errors } };
+            }
+            return root.renderWrapper;
+        }
+    }
+
+    class TextField {
+        constructor(state, attribute, attributes = {}) {
+            this.state = state;
+            this.attributes = attributes;
+            this.attribute = attribute;
+            this.attributes["data-attribute"] = attribute;
+        }
+        get renderWrapper() {
+            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 renderWrapper() {
+            return this.value;
+        }
+    }
+
+    class TextArea {
+        constructor(state, attribute, attributes = {}) {
+            this.state = state;
+            this.attributes = attributes;
+            this.attribute = attribute;
+            this.attributes["data-attribute"] = attribute;
+        }
+        get renderWrapper() {
+            return `<textarea ${htmlAttributes(this.attributes)}>${this.state[this.attribute] || ""}</textarea>`;
+        }
+        add_action(event, klass, fn, options = {}) {
+            this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
+            return this;
+        }
+    }
+
+    const Clapton = {
+        Box, Component, Text, TextField, Button, DateTimeField, BlockQuote, Checkbox, Code, Element, Emphasis, Form, Heading, Image, Link, List, ListItem, OrderedList, Paragraph, Quote, RadioButton, Select, Span, Embed, Bold, TextArea
+    };
+
+    const bq = (...props) => {
+        return new Clapton.BlockQuote(...props);
+    };
+    const box = (...props) => {
+        return new Clapton.Box(...props);
+    };
+    const b = (...props) => {
+        return new Clapton.Bold(...props);
+    };
+    const button = (...props) => {
+        return new Clapton.Button(...props);
+    };
+    const check = (...props) => {
+        return new Clapton.Checkbox(props[0], props[1], props[2]);
+    };
+    const code = (...props) => {
+        return new Clapton.Code(...props);
+    };
+    const datetime = (...props) => {
+        return new Clapton.DateTimeField(props[0], props[1], props[2]);
+    };
+    const el = (...props) => {
+        return new Clapton.Element(props[0], props[1]);
+    };
+    const embed = (...props) => {
+        return new Clapton.Embed(props[0]);
+    };
+    const em = (...props) => {
+        return new Clapton.Emphasis(...props);
+    };
+    const form = (...props) => {
+        return new Clapton.Form(...props);
+    };
+    const h = (...props) => {
+        return new Clapton.Heading(props[0], props[1]);
+    };
+    const img = (...props) => {
+        return new Clapton.Image(props[0], props[1], props[2]);
+    };
+    const a = (...props) => {
+        return new Clapton.Link(props[0], props[1]);
+    };
+    const li = (...props) => {
+        return new Clapton.ListItem(...props);
+    };
+    const ul = (...props) => {
+        return new Clapton.List(...props);
+    };
+    const ol = (...props) => {
+        return new Clapton.OrderedList(...props);
+    };
+    const p = (...props) => {
+        return new Clapton.Paragraph(...props);
+    };
+    const q = (...props) => {
+        return new Clapton.Quote(...props);
+    };
+    const radio = (...props) => {
+        return new Clapton.RadioButton(props[0], props[1], props[2]);
+    };
+    const select = (...props) => {
+        return new Clapton.Select(props[0], props[1], props[2]);
+    };
+    const span = (...props) => {
+        return new Clapton.Span(...props);
+    };
+    const textarea = (...props) => {
+        return new Clapton.TextArea(props[0], props[1], props[2]);
+    };
+    const input = (...props) => {
+        return new Clapton.TextField(props[0], props[1], props[2]);
+    };
+    const text = (...props) => {
+        return new Clapton.Text(props[0]);
+    };
+
+    exports.a = a;
+    exports.b = b;
+    exports.box = box;
+    exports.bq = bq;
+    exports.button = button;
+    exports.check = check;
+    exports.code = code;
+    exports.datetime = datetime;
+    exports.el = el;
+    exports.em = em;
+    exports.embed = embed;
+    exports.form = form;
+    exports.h = h;
+    exports.img = img;
+    exports.input = input;
+    exports.li = li;
+    exports.ol = ol;
+    exports.p = p;
+    exports.q = q;
+    exports.radio = radio;
+    exports.select = select;
+    exports.span = span;
+    exports.text = text;
+    exports.textarea = textarea;
+    exports.ul = ul;
+
+    return exports;
+
+})({});