clapton 0.0.6 → 0.0.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3ce2ec441c0e14b8a234cdb853bc55619bc4dc082f6b9a2fb790afef8348eaf0
-  data.tar.gz: 0c26377b8f1a160a87ce90ee12de22c11a59b49caffc4256765c4c7e79172897
+  metadata.gz: 046d950b41177907e9ab5aeeecddbed15ba622b5f4af1b68be7931ac5b50ee81
+  data.tar.gz: 673129d40cb46bbdd4b98083d79d256acfc04c6361ae275c71db2cbc0fc22f6d
 SHA512:
-  metadata.gz: 36664ec11be13ad14254e1fcd0b71181f670f5e6dabcb1a9a2aa58cd9ca06d8edb76a0d63783c5da9c0db56a7dbda8d302438a9db5e3b6b2c57d9b4b633a0bf1
-  data.tar.gz: f6ab3acf8c0dc683ad42088013cd1e6394892a658a86c176e86a0f92eda88aeca8d9d0db3042c37d7e5d8fa2d8296097bc39a7fa5c8bbc0e15cb352e70c493ff
+  metadata.gz: 922bfbd2feae17c2ae3a040ce2eb573e7a9a1b951f93775c0f24b44bc90569177eb93e95bfb16f2fe515dcaec5d3526c92d976f29779d3a31d4024eeae4b42aa
+  data.tar.gz: 8157150ab886370b4dbff0cd38fcd064ba9e044422cb45a8d9940b67b77ed3e781679ee38c01604cb000ef59f3e0360c2e785c69d725925e809d2021a4a6aedb

data/README.md

@@ -137,6 +137,17 @@ 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, params)
+      state_class = component.to_s.gsub("Component", "State")
+      if Object.const_defined?(state_class)
+        data = { component: component.to_s, state: Object.const_get(state_class).new(params).to_h }
+      else
+        data = { component: component.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/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,4 @@
 module Clapton
-  VERSION = '0.0.6'
+  VERSION = '0.0.8'
 end
+

metadata

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