clapton 0.0.14 → 0.0.15

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7def55e21b26dedfd8843c9ace0bf4db854abf18205de4dea7c3a203d06130f6
-  data.tar.gz: 743f8549cd8a901f2f1c76a4807f05ccace77d58e9665ad35c02626df555a08a
+  metadata.gz: 31438028bfe58d5ce7e560543850167002e53f148784072f20834081c0421b34
+  data.tar.gz: 2509467d610325dbaf0c1a20a953e50ecd568b8722d1b2fd7a1bc1acbb1bd6aa
 SHA512:
-  metadata.gz: b05ba6c72f46212b628cee66c18e01644e285e6380862669eb7de55174338b4b9109ebf69505d398227c85f0a19a6e55580e6cf760951fad573bc13d78c73845
-  data.tar.gz: 2359db5b15a7ef59f43dc61d2bcb96609858cc0a19c996e9b18288046fe739a3d68bf5868f221c97c349af8781ff8483c979199e3c1c27914f617e8912555aba
+  metadata.gz: c68a61320829b1fcd198c627af8ff48de08479f1a725ebb51c14dfcbfc74277c4c0fec8735c4becf2994ebb1abcb36222a102dc9403d1d581406534a0fc11ca6
+  data.tar.gz: 5500b02be72eb9b161c1882ac913fd48ff6a0114e1bb3aa46b38572eb5885e00a4b2b7a10bc4968b3535331ba67916df292eb65dceff6a203e960d0c46eb47bd

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,9 +36,9 @@ module Clapton
     end
 
     def compile_components
-      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")))
+      puts "Clapton: Compiling components"
+      
+      start_time = Time.now
       Dir.glob(Rails.root.join("app", "components", "**", "*.rb")).each do |file|
         code = File.read(file)
         js = ""
@@ -50,6 +54,8 @@ module Clapton
         js += "\n"
         File.write(Rails.root.join("public", "clapton", "#{File.basename(file, ".rb").camelize}.js"), js)
       end
+      end_time = Time.now
+      puts "Clapton: Component compilation took #{end_time - start_time} seconds"
     end
   end
 end

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

@@ -1287,8 +1287,7 @@ function getConfig(name) {
 
 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 componentName = component.dataset.component;
     const module = await import(`${componentName}`);
     const ComponentClass = module[componentName];
     const instance = new ComponentClass(state, component.dataset.id);
@@ -1348,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 || "{}")
         }
     });
 };

data/lib/clapton/javascripts/src/actions/handle-action.ts

@@ -9,12 +9,12 @@ export const handleAction = async (target: HTMLElement, stateName: string, fn: s
   }
   if (!targetComponent) return;
   const component = target.closest(`[data-component]`) as HTMLElement;
-  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 as HTMLInputElement).value;
-      component.setAttribute("data-state", JSON.stringify(state));
+      component.dataset.state = JSON.stringify(state);
     }
   };
   claptonChannel.perform(
@@ -23,14 +23,14 @@ export const handleAction = async (target: HTMLElement, stateName: string, fn: s
       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 || "{}")
       }
     }
   );

data/lib/clapton/javascripts/src/dom/update-component.ts

@@ -2,8 +2,7 @@ import morphdom from "morphdom";
 
 export const updateComponent = async (component: HTMLElement, state: any, property: string, target: HTMLInputElement) => {
   state[property] = target.value;
-  component.setAttribute("data-state", JSON.stringify(state));
-  const componentName = component.getAttribute("data-component") as string;
+  const componentName = component.dataset.component as string;
   const module = await import(`${componentName}`);
   const ComponentClass = module[componentName] as any;
   const instance = new ComponentClass(state, component.dataset.id);

data/lib/clapton/version.rb

@@ -1,4 +1,3 @@
 module Clapton
-  VERSION = '0.0.14'
+  VERSION = '0.0.15'
 end
-

metadata

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