clapton 0.0.6 → 0.0.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3ce2ec441c0e14b8a234cdb853bc55619bc4dc082f6b9a2fb790afef8348eaf0
-  data.tar.gz: 0c26377b8f1a160a87ce90ee12de22c11a59b49caffc4256765c4c7e79172897
+  metadata.gz: 01e0976bdfdb23e447884dec93ee2f25ceb2d5e0312ca4a54aeed3ba603a69c2
+  data.tar.gz: e950680f7a0928e186eb14ae04d1479e741e55670ec16ee97a6cc4b799edeb0e
 SHA512:
-  metadata.gz: 36664ec11be13ad14254e1fcd0b71181f670f5e6dabcb1a9a2aa58cd9ca06d8edb76a0d63783c5da9c0db56a7dbda8d302438a9db5e3b6b2c57d9b4b633a0bf1
-  data.tar.gz: f6ab3acf8c0dc683ad42088013cd1e6394892a658a86c176e86a0f92eda88aeca8d9d0db3042c37d7e5d8fa2d8296097bc39a7fa5c8bbc0e15cb352e70c493ff
+  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/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.6'
+  VERSION = '0.0.7'
 end

metadata

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