clapton 0.0.5 → 0.0.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ced6ec2a5091225623d714847395bbbe1a5aa58d8b655b8fd9ba427a3cad253a
-  data.tar.gz: 15d4b56faaa648195800818fae39753ebbf66b18551042397217f9913ffbdb7a
+  metadata.gz: 01e0976bdfdb23e447884dec93ee2f25ceb2d5e0312ca4a54aeed3ba603a69c2
+  data.tar.gz: e950680f7a0928e186eb14ae04d1479e741e55670ec16ee97a6cc4b799edeb0e
 SHA512:
-  metadata.gz: 94e5dd398e4264ef1a8a4429fb34dbb9bfc80abf3e162712cf6fea236f0991209bbfc04e19a550590e0af739ccef393e1325bc19a0c1daa04b697d12b77436cd
-  data.tar.gz: faea93854fc326fa2933df5a191cc079296c751153a88cd5d93432db8cb4d0671d5c8a18a0b13534437f760996dfe1a2200162e3c3ce618389ef7a8c28075992
+  metadata.gz: d3ed3bd257263eb9875acb301c798d18bed14700cbed7352b8ac55187e320f8a49a555a6fbbd90e3db6980c9b4572ed62371a7d3f16af7b60a858a1ab02102de
+  data.tar.gz: d89a048e4c2df53e1fb35c01063c6f59e3eef7f3737907b8523c8c919ad2eb84fc7cce63f138455ecf6d29650df12a387d64e7e348fedfffdc47760cf6b14393

data/README.md

@@ -137,6 +137,12 @@ mount Clapton::Engine => "/clapton"
 
 ![TODO APP DEMO](./docs/todo-app-demo.gif)
 
+### Component rendering
+
+```html
+<%= clapton_component_tag([:TaskListComponent, { tasks: @tasks.map { |task| { id: task.id, title: task.title, due: task.due, done: task.done } }]) %>
+```
+
 ### Generate Component and State
 
 ```bash

data/app/helpers/clapton/clapton_helper.rb

@@ -17,5 +17,15 @@ module Clapton
       end
       tag.div(id: "clapton", data: { clapton: datas })
     end
+
+    def clapton_component_tag(component)
+      state_class = component[0].to_s.gsub("Component", "State")
+      if Object.const_defined?(state_class)
+        data = { component: component[0].to_s, state: Object.const_get(state_class).new(component[1]).to_h }
+      else
+        data = { component: component[0].to_s, state: {} }
+      end
+      tag.div(class: "clapton-component", data: { clapton: data })
+    end
   end
 end

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

@@ -1393,15 +1393,19 @@ const initializeInputs$1 = () => {
 
 const initializeComponents = () => {
     const components = document.querySelector("#clapton")?.getAttribute("data-clapton") || "[]";
-    JSON.parse(components).forEach(createAndAppendComponent);
+    JSON.parse(components).forEach((component) => createAndAppendComponent(component, document.querySelector("#clapton")));
+    document.querySelectorAll(".clapton-component").forEach((element) => {
+        const component = JSON.parse(element.getAttribute("data-clapton") || "{}");
+        createAndAppendComponent(component, element);
+    });
 };
-const createAndAppendComponent = (component) => {
+const createAndAppendComponent = (component, element) => {
     const componentDom = document.createElement('div');
     const instance = new window[component.component](component.state);
     componentDom.innerHTML = instance.render;
     const firstChild = componentDom.firstChild;
     if (firstChild) {
-        document.querySelector("#clapton")?.appendChild(firstChild);
+        element.appendChild(firstChild);
     }
 };
 document.addEventListener("DOMContentLoaded", () => {

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

@@ -43,42 +43,53 @@ var Clapton = (function (exports) {
             .replace(/'/g, "'");
     };
 
-    class Box {
+    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;
         }
-        get render() {
-            return `<div ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</div>`;
-        }
     }
 
-    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 } });
+    class Box {
+        constructor(attributes = {}) {
+            this.children = [];
+            this.attributes = attributes;
+        }
+        add(child) {
+            this.children.push(child);
+            return this;
         }
         get render() {
-            return this._root.render;
+            return `<div ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</div>`;
         }
     }
 
-    class Text {
-        constructor(value) {
-            this.value = value;
+    class Button {
+        constructor(attributes = {}) {
+            this.attributes = attributes;
+            this.children = [];
+        }
+        add(child) {
+            this.children.push(child);
+            return this;
         }
         get render() {
-            return this.value;
+            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 TextField {
+    class Checkbox {
         constructor(state, attribute, attributes = {}) {
             this.state = state;
             this.attributes = attributes;
@@ -86,7 +97,7 @@ var Clapton = (function (exports) {
             this.attributes["data-attribute"] = attribute;
         }
         get render() {
-            return `<input type='text' ${htmlAttributes(this.attributes)} value='${this.state[this.attribute] || ""}'/>`;
+            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}`;
@@ -94,36 +105,18 @@ var Clapton = (function (exports) {
         }
     }
 
-    class Link {
+    class Code {
         constructor(attributes = {}) {
             this.children = [];
             this.attributes = attributes;
         }
         get render() {
-            return `<a ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</a>`;
-        }
-        add(child) {
-            this.children.push(child);
-            return this;
-        }
-    }
-
-    class Button {
-        constructor(attributes = {}) {
-            this.attributes = attributes;
-            this.children = [];
+            return `<code ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</code>`;
         }
         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 DateTimeField {
@@ -168,11 +161,262 @@ var Clapton = (function (exports) {
         }
     }
 
+    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 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.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;
 

data/lib/clapton/javascripts/src/client.ts

@@ -17,16 +17,20 @@ interface ComponentInstance {
 
 const initializeComponents = () => {
   const components = document.querySelector("#clapton")?.getAttribute("data-clapton") || "[]";
-  JSON.parse(components).forEach(createAndAppendComponent);
+  JSON.parse(components).forEach((component: ComponentDefinition) => createAndAppendComponent(component, document.querySelector("#clapton")!));
+  document.querySelectorAll(".clapton-component").forEach((element) => {
+    const component = JSON.parse(element.getAttribute("data-clapton") || "{}");
+    createAndAppendComponent(component, element as HTMLElement);
+  });
 };
 
-const createAndAppendComponent = (component: ComponentDefinition) => {
+const createAndAppendComponent = (component: ComponentDefinition, element: HTMLElement) => {
   const componentDom = document.createElement('div');
   const instance = new (window[component.component as any] as any)(component.state);
   componentDom.innerHTML = instance.render;
   const firstChild = componentDom.firstChild as HTMLElement;
   if (firstChild) {
-    document.querySelector("#clapton")?.appendChild(firstChild);
+    element.appendChild(firstChild);
   }
 };
 

data/lib/clapton/version.rb

@@ -1,3 +1,3 @@
 module Clapton
-  VERSION = '0.0.5'
+  VERSION = '0.0.7'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: clapton
 version: !ruby/object:Gem::Version
-  version: 0.0.5
+  version: 0.0.7
 platform: ruby
 authors:
 - Moeki Kawakami