clapton 0.0.25 → 0.0.26

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 99a804644eba855e4437d0fda777f485e772d6a9d6330509806f1569d5ad09fc
-  data.tar.gz: c2b96b526a162c67a948bc95b2dc3f0fcf06a39e0a0330f8433d75da16df6cf8
+  metadata.gz: d7e101f28b9097e8229c855012c0c2649da46060207845c7d6f41c6a1e6c89b3
+  data.tar.gz: e1d8c859a3e5e675922a6a79a9783b0129c33fa2f30f56cf2819dac7802e85ea
 SHA512:
-  metadata.gz: c4bb2828252d78c4983053cc35820879f27a54192eb5bbb8c87f3a7c1948a0205a8298b40f665987473cfc8e8ac1e9f8f5bd083743b8f6fa643d2b4d9b11b91c
-  data.tar.gz: 396ff4ac17f4d18451f6f165fc00c5f9808c743cb31fd6ab57d8f75bff6a432c2853b3bc093174923bbd5ee514d10332bcb77df9847e575fff8d014570c2e0d8
+  metadata.gz: 2f0a863288caa1f2ff959a14ae745c6043aaece8642ece8428ac91695a036f1601088bc81dc562c9bc3bf140101e8b210f47990b77ba26dbf2b07597225ec1c9
+  data.tar.gz: 75d7c625ce602ff727709bfe217e79e19f6c17a11ddceecbb4d8c5765ea353206a4763f4e182ffcb7081842d9485d13b21127d39536ae3270967d5362467cd0f

data/app/channels/clapton/clapton_channel.rb

@@ -19,6 +19,7 @@ module Clapton
                 id: data["data"]["component"]["id"],
               },
               state: state.to_h,
+              focus: data["data"]["focus"] 
             }
           })
         end
@@ -32,6 +33,7 @@ module Clapton
                 id: data["data"]["component"]["id"],
               },
               state: state.to_h,
+              focus: data["data"]["focus"]
             }
           })
           return
@@ -47,6 +49,7 @@ module Clapton
               id: data["data"]["component"]["id"],
             },
             state: state.to_h,
+            focus: data["data"]["focus"]
           }
         })
       else
@@ -59,6 +62,7 @@ module Clapton
               id: data["data"]["component"]["id"],
             },
             state: state.to_h,
+            focus: data["data"]["focus"]
           }
         })
       end

data/lib/clapton/javascripts/dist/c-for-test.js

@@ -241,9 +241,13 @@ var c = (function () {
             this.attribute = attribute;
             this.state = state;
             this.attributes["data-attribute"] = attribute;
+            this.attributes["data-id"] = Math.random().toString(36).substring(2, 10);
         }
         get renderWrapper() {
             let value = this.state[this.attribute];
+            if (!this.attributes.type) {
+                this.attributes.type = "text";
+            }
             if (this.attributes.type === "datetime-local" && value) {
                 value = this.datetime_local_value(value);
             }
@@ -383,6 +387,10 @@ var c = (function () {
     };
     const c = (name, ...props) => {
         switch (name) {
+            case "bq":
+                return blockquote(...props);
+            case "box":
+                return div(...props);
             case "blockquote":
                 return blockquote(...props);
             case "div":
@@ -401,6 +409,8 @@ var c = (function () {
                 return em(...props);
             case "form":
                 return form(...props);
+            case "h":
+                return h1(...props);
             case "h1":
                 return h1(...props);
             case "h2":
@@ -437,6 +447,15 @@ var c = (function () {
                 return input(...props);
             case "text":
                 return text(...props);
+            case "radio":
+                props[3].type = "radio";
+                return input(...props);
+            case "datetime":
+                props[3].type = "datetime-local";
+                return input(...props);
+            case "check":
+                props[3].type = "checkbox";
+                return input(...props);
             default:
                 return new Clapton.Element(name, ...props);
         }

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

@@ -238,9 +238,13 @@ class Input extends Base {
         this.attribute = attribute;
         this.state = state;
         this.attributes["data-attribute"] = attribute;
+        this.attributes["data-id"] = Math.random().toString(36).substring(2, 10);
     }
     get renderWrapper() {
         let value = this.state[this.attribute];
+        if (!this.attributes.type) {
+            this.attributes.type = "text";
+        }
         if (this.attributes.type === "datetime-local" && value) {
             value = this.datetime_local_value(value);
         }
@@ -380,6 +384,10 @@ const text = (...props) => {
 };
 const c = (name, ...props) => {
     switch (name) {
+        case "bq":
+            return blockquote(...props);
+        case "box":
+            return div(...props);
         case "blockquote":
             return blockquote(...props);
         case "div":
@@ -398,6 +406,8 @@ const c = (name, ...props) => {
             return em(...props);
         case "form":
             return form(...props);
+        case "h":
+            return h1(...props);
         case "h1":
             return h1(...props);
         case "h2":
@@ -434,6 +444,15 @@ const c = (name, ...props) => {
             return input(...props);
         case "text":
             return text(...props);
+        case "radio":
+            props[3].type = "radio";
+            return input(...props);
+        case "datetime":
+            props[3].type = "datetime-local";
+            return input(...props);
+        case "check":
+            props[3].type = "checkbox";
+            return input(...props);
         default:
             return new Clapton.Element(name, ...props);
     }

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

@@ -1285,32 +1285,6 @@ function getConfig(name) {
   }
 }
 
-const updateComponent = async (component, state, property, target) => {
-    state[property] = target.value;
-    const componentName = component.dataset.component;
-    const module = await import(`${componentName}`);
-    const ComponentClass = module[componentName];
-    const instance = new ComponentClass(state, component.dataset.id);
-    morphdom(component, instance.renderWrapper);
-    instance.runEffects();
-};
-
-const initializeInputs = () => {
-    const inputElements = document.querySelectorAll("[data-attribute]");
-    inputElements.forEach((element) => {
-        const attribute = element.getAttribute("data-attribute");
-        const component = element.closest(`[data-component]`);
-        const state = JSON.parse(component.getAttribute("data-state") || "{}");
-        if (!attribute || !component)
-            return;
-        if (element.tagName === "INPUT") {
-            element.addEventListener("input", async (event) => {
-                await updateComponent(component, state, attribute, event.target);
-            });
-        }
-    });
-};
-
 const consumer = createConsumer();
 
 const claptonChannel = consumer.subscriptions.create("Clapton::ClaptonChannel", {
@@ -1327,12 +1301,14 @@ const claptonChannel = consumer.subscriptions.create("Clapton::ClaptonChannel",
     const instance = new module[data.component.name](data.state, data.component.id, errors);
     morphdom(component, instance.renderWrapper, {
       onBeforeElUpdated: (_fromEl, toEl) => {
+        if (_fromEl.dataset.id === data.focus) {
+          return false;
+        }
         toEl.setAttribute("data-set-event-handler", "true");
         return true;
       }
     });
 
-    initializeInputs();
     initializeActions();
     instance.runEffects();
   }
@@ -1352,7 +1328,7 @@ const handleAction = async (target, stateName, fn) => {
     const attribute = target.dataset.attribute;
     if (attribute) {
         const state = JSON.parse(component.dataset.state || "{}");
-        if (target.tagName === "INPUT") {
+        if (target.dataset.attribute) {
             state[attribute] = target.value;
             component.dataset.state = JSON.stringify(state);
         }
@@ -1368,7 +1344,8 @@ const handleAction = async (target, stateName, fn) => {
                 action: fn,
                 attributes: JSON.parse(targetComponent.dataset.state || "{}"),
             },
-            params: JSON.parse(component.dataset.state || "{}")
+            params: JSON.parse(component.dataset.state || "{}"),
+            focus: target.dataset.id,
         }
     });
 };
@@ -1447,14 +1424,12 @@ const createAndAppendComponent = async (component, element) => {
 document.addEventListener("DOMContentLoaded", async () => {
     await initializeComponents();
     initializeActions();
-    initializeInputs();
     const event = new Event('clapton:render');
     document.dispatchEvent(event);
 });
 document.addEventListener("turbo:render", async () => {
     await initializeComponents();
     initializeActions();
-    initializeInputs();
     const event = new Event('clapton:render');
     document.dispatchEvent(event);
 });

data/lib/clapton/javascripts/dist/components-for-test.js

@@ -241,9 +241,13 @@ var Clapton = (function (exports) {
             this.attribute = attribute;
             this.state = state;
             this.attributes["data-attribute"] = attribute;
+            this.attributes["data-id"] = Math.random().toString(36).substring(2, 10);
         }
         get renderWrapper() {
             let value = this.state[this.attribute];
+            if (!this.attributes.type) {
+                this.attributes.type = "text";
+            }
             if (this.attributes.type === "datetime-local" && value) {
                 value = this.datetime_local_value(value);
             }

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

@@ -238,9 +238,13 @@ class Input extends Base {
         this.attribute = attribute;
         this.state = state;
         this.attributes["data-attribute"] = attribute;
+        this.attributes["data-id"] = Math.random().toString(36).substring(2, 10);
     }
     get renderWrapper() {
         let value = this.state[this.attribute];
+        if (!this.attributes.type) {
+            this.attributes.type = "text";
+        }
         if (this.attributes.type === "datetime-local" && value) {
             value = this.datetime_local_value(value);
         }

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

@@ -12,7 +12,7 @@ export const handleAction = async (target: HTMLElement, stateName: string, fn: s
   const attribute = target.dataset.attribute;
   if (attribute) {  
     const state = JSON.parse(component.dataset.state || "{}");
-    if (target.tagName === "INPUT") {
+    if (target.dataset.attribute) {
       state[attribute] = (target as HTMLInputElement).value;
       component.dataset.state = JSON.stringify(state);
     }
@@ -30,7 +30,8 @@ export const handleAction = async (target: HTMLElement, stateName: string, fn: s
           action: fn,
           attributes: JSON.parse(targetComponent.dataset.state || "{}"),
         },
-        params: JSON.parse(component.dataset.state || "{}")
+        params: JSON.parse(component.dataset.state || "{}"),
+        focus: target.dataset.id,
       }
     }
   );

data/lib/clapton/javascripts/src/c-base.ts

@@ -110,6 +110,10 @@ const text = (...props: any[]) => {
 
 const c = (name: string, ...props: any[]) => {
   switch (name) {
+    case "bq":
+      return blockquote(...props)
+    case "box":
+      return div(...props)
     case "blockquote":
       return blockquote(...props)
     case "div":
@@ -128,6 +132,8 @@ const c = (name: string, ...props: any[]) => {
       return em(...props)
     case "form":
       return form(...props)
+    case "h":
+      return h1(...props)
     case "h1":
       return h1(...props)
     case "h2":
@@ -164,6 +170,15 @@ const c = (name: string, ...props: any[]) => {
       return input(...props)
     case "text":
       return text(...props)
+    case "radio":
+      props[3].type = "radio"
+      return input(...props)
+    case "datetime":
+      props[3].type = "datetime-local"
+      return input(...props)
+    case "check":
+      props[3].type = "checkbox"
+      return input(...props)
     default:
       return new Clapton.Element(name, ...props)
   }

data/lib/clapton/javascripts/src/channel/clapton-channel.js

@@ -1,7 +1,6 @@
 import morphdom from "morphdom"
 import { createConsumer } from "@rails/actioncable"
 import { initializeActions } from "../actions/initialize-actions.ts"
-import { initializeInputs } from "../inputs/initialize-inputs.ts"
 const consumer = createConsumer()
 
 export const claptonChannel = consumer.subscriptions.create("Clapton::ClaptonChannel", {
@@ -18,12 +17,14 @@ export const claptonChannel = consumer.subscriptions.create("Clapton::ClaptonCha
     const instance = new module[data.component.name](data.state, data.component.id, errors);
     morphdom(component, instance.renderWrapper, {
       onBeforeElUpdated: (_fromEl, toEl) => {
+        if (_fromEl.dataset.id === data.focus) {
+          return false;
+        }
         toEl.setAttribute("data-set-event-handler", "true");
         return true;
       }
     });
 
-    initializeInputs();
     initializeActions();
     instance.runEffects();
   }

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

@@ -1,5 +1,4 @@
 import { initializeActions } from "actions/initialize-actions";
-import { initializeInputs } from "inputs/initialize-inputs";
 
 interface ComponentDefinition {
   component: string;
@@ -42,7 +41,6 @@ const createAndAppendComponent = async (component: ComponentDefinition, element:
 document.addEventListener("DOMContentLoaded", async () => {
   await initializeComponents();
   initializeActions();
-  initializeInputs();
   const event = new Event('clapton:render');
   document.dispatchEvent(event);
 });
@@ -50,7 +48,6 @@ document.addEventListener("DOMContentLoaded", async () => {
 document.addEventListener("turbo:render", async () => {
   await initializeComponents();
   initializeActions();
-  initializeInputs();
   const event = new Event('clapton:render');
   document.dispatchEvent(event);
 });

data/lib/clapton/javascripts/src/components/input.spec.ts

@@ -3,14 +3,14 @@ import { Input } from "./input"
 
 describe("Input", () => {
   it("returns empty string if no params", () => {
-    expect(new Input({}, "foo", { type: "text" }).renderWrapper).toBe("<input type='text' data-attribute='foo' value=''/>")
+    expect(new Input({}, "foo", { type: "text" }).renderWrapper).toMatch(/<input type='text' data-attribute='foo' data-id='.+' value=''\/>/)
   })
 
   it("returns attributes and data attributes", () => {
-    expect(new Input({ foo: "bar" }, "foo", { type: "text", id: "1", "data-foo": "bar" }).renderWrapper).toBe(`<input type='text' id='1' data-foo='bar' data-attribute='foo' value='bar'/>`)
+    expect(new Input({ foo: "bar" }, "foo", { type: "text", id: "1", "data-foo": "bar" }).renderWrapper).toMatch(/<input type='text' id='1' data-foo='bar' data-attribute='foo' data-id='.+' value='bar'\/>/)
   })
 
   it("returns attributes and data attributes with custom data attributes", () => {
-    expect(new Input({ foo: "bar" }, "foo", { type: "text", id: "1", data: { foo: { baz: "qux", quux: "corge" } } }).renderWrapper).toBe(`<input type='text' id='1' data-attribute='foo' data-foo-baz='qux' data-foo-quux='corge' value='bar'/>`)
+    expect(new Input({ foo: "bar" }, "foo", { type: "text", id: "1", data: { foo: { baz: "qux", quux: "corge" } } }).renderWrapper).toMatch(/<input type='text' id='1' data-attribute='foo' data-id='.+' data-foo-baz='qux' data-foo-quux='corge' value='bar'\/>/)
   })
 })

data/lib/clapton/javascripts/src/components/input.ts

@@ -10,10 +10,14 @@ export class Input extends Base {
     this.attribute = attribute;
     this.state = state
     this.attributes["data-attribute"] = attribute;
+    this.attributes["data-id"] = Math.random().toString(36).substring(2, 10);
   }
 
   get renderWrapper(): string {
     let value = this.state[this.attribute]
+    if (!this.attributes.type) {
+      this.attributes.type = "text"
+    }
     if (this.attributes.type === "datetime-local" && value) {
       value = this.datetime_local_value(value)
     }

data/lib/clapton/version.rb

@@ -1,3 +1,3 @@
 module Clapton
-  VERSION = '0.0.25'
+  VERSION = '0.0.26'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: clapton
 version: !ruby/object:Gem::Version
-  version: 0.0.25
+  version: 0.0.26
 platform: ruby
 authors:
 - Moeki Kawakami
@@ -6757,12 +6757,10 @@ files:
 - lib/clapton/javascripts/src/components/text-area.ts
 - lib/clapton/javascripts/src/components/text.spec.ts
 - lib/clapton/javascripts/src/components/text.ts
-- lib/clapton/javascripts/src/dom/update-component.ts
 - lib/clapton/javascripts/src/html/html-attributes.spec.ts
 - lib/clapton/javascripts/src/html/html-attributes.ts
 - lib/clapton/javascripts/src/html/split-action-attribute.spec.ts
 - lib/clapton/javascripts/src/html/split-action-attribute.ts
-- lib/clapton/javascripts/src/inputs/initialize-inputs.ts
 - lib/clapton/javascripts/src/utils/debounce.ts
 - lib/clapton/javascripts/tsconfig.json
 - lib/clapton/javascripts/vitest.config.js

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

@@ -1,11 +0,0 @@
-import morphdom from "morphdom";
-
-export const updateComponent = async (component: HTMLElement, state: any, property: string, target: HTMLInputElement) => {
-  state[property] = target.value;
-  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);
-  morphdom(component, instance.renderWrapper);
-  instance.runEffects();
-};

data/lib/clapton/javascripts/src/inputs/initialize-inputs.ts

@@ -1,16 +0,0 @@
-import { updateComponent } from "../dom/update-component";
-
-export const initializeInputs = () => {
-  const inputElements = document.querySelectorAll("[data-attribute]");
-  inputElements.forEach((element: any) => {
-    const attribute = element.getAttribute("data-attribute");
-    const component = element.closest(`[data-component]`) as HTMLElement;
-    const state = JSON.parse(component.getAttribute("data-state") || "{}");
-    if (!attribute || !component) return;
-    if (element.tagName === "INPUT") {
-      element.addEventListener("input", async (event: Event) => {
-        await updateComponent(component, state, attribute, event.target as HTMLInputElement);
-      });
-    }
-  });
-};