clapton 0.0.13 → 0.0.15

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

@@ -2,28 +2,28 @@ import { initializeActions } from "actions/initialize-actions";
 import { initializeInputs } from "inputs/initialize-inputs";
 
 interface ComponentDefinition {
-  component: new (state: any) => ComponentInstance;
+  component: string;
   state: any;
   id: string;
 }
 
-interface ComponentInstance {
-  render: string;
-  [key: string]: any;
-}
-
-const initializeComponents = () => {
+const initializeComponents = async () => {
   const components = document.querySelector("#clapton")?.getAttribute("data-clapton") || "[]";
-  JSON.parse(components).forEach((component: ComponentDefinition) => createAndAppendComponent(component, document.querySelector("#clapton")!));
-  document.querySelectorAll(".clapton-component").forEach((element) => {
+  const componentArray = JSON.parse(components);
+  for (const component of componentArray) {
+    await createAndAppendComponent(component, document.querySelector("#clapton")!);
+  }
+  const elements = document.querySelectorAll(".clapton-component");
+  for (const element of elements) {
     const component = JSON.parse(element.getAttribute("data-clapton") || "{}");
-    createAndAppendComponent(component, element as HTMLElement);
-  });
+    await createAndAppendComponent(component, element as HTMLElement);
+  }
 };
 
-const createAndAppendComponent = (component: ComponentDefinition, element: HTMLElement) => {
+const createAndAppendComponent = async (component: ComponentDefinition, element: HTMLElement) => {
   const componentDom = document.createElement('div');
-  const instance = new (window[component.component as any] as any)(component.state);
+  const module = await import(`${component.component}`);
+  const instance = new (module[component.component] as any)(component.state);
   componentDom.innerHTML = instance.render;
   const firstChild = componentDom.firstChild as HTMLElement;
   if (firstChild) {
@@ -31,8 +31,8 @@ const createAndAppendComponent = (component: ComponentDefinition, element: HTMLE
   }
 };
 
-document.addEventListener("DOMContentLoaded", () => {
-  initializeComponents();
+document.addEventListener("DOMContentLoaded", async () => {
+  await initializeComponents();
   initializeActions();
   initializeInputs();
 });

data/lib/clapton/javascripts/src/components-for-test.ts

@@ -0,0 +1,29 @@
+import { BlockQuote } from "./components/block-quote"
+import { Box } from "./components/box"
+import { Button } from "./components/button"
+import { Checkbox } from "./components/checkbox"
+import { Code } from "./components/code"
+import { DateTimeField } from "./components/datetime-field"
+import { Element } from "./components/element"
+import { Embed } from "./components/embed"
+import { Emphasis } from "./components/emphasis"
+import { Form } from "./components/form"
+import { Heading } from "./components/heading"
+import { Image } from "./components/image"
+import { Link } from "./components/link"
+import { ListItem } from "./components/list-item"
+import { List } from "./components/list"
+import { OrderedList } from "./components/ordered-list"
+import { Paragraph } from "./components/paragraph"
+import { Quote } from "./components/quote"
+import { RadioButton } from "./components/radio-button"
+import { Select } from "./components/select"
+import { Span } from "./components/span"
+import { Component } from "./components/component"
+import { TextField } from "./components/text-field"
+import { Text } from "./components/text"
+
+
+export {
+  Box, Component, Text, TextField, Button, DateTimeField, BlockQuote, Checkbox, Code, Element, Emphasis, Form, Heading, Image, Link, List, ListItem, OrderedList, Paragraph, Quote, RadioButton, Select, Span, Embed
+};

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

@@ -23,4 +23,7 @@ import { Component } from "./components/component"
 import { TextField } from "./components/text-field"
 import { Text } from "./components/text"
 
-export { Box, Component, Text, TextField, Button, DateTimeField, BlockQuote, Checkbox, Code, Element, Emphasis, Form, Heading, Image, Link, List, ListItem, OrderedList, Paragraph, Quote, RadioButton, Select, Span, Embed };
+
+export const Clapton = {
+  Box, Component, Text, TextField, Button, DateTimeField, BlockQuote, Checkbox, Code, Element, Emphasis, Form, Heading, Image, Link, List, ListItem, OrderedList, Paragraph, Quote, RadioButton, Select, Span, Embed
+};

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

@@ -1,10 +1,10 @@
 import morphdom from "morphdom";
 
-export const updateComponent = (component: HTMLElement, state: any, property: string, target: HTMLInputElement) => {
+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 ComponentClass = window[componentName as any] as any;
+  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.render);
 };

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

@@ -8,8 +8,8 @@ export const initializeInputs = () => {
     const state = JSON.parse(component.getAttribute("data-state") || "{}");
     if (!attribute || !component) return;
     if (element.tagName === "INPUT") {
-      element.addEventListener("input", (event: Event) => {
-        updateComponent(component, state, attribute, event.target as HTMLInputElement);
+      element.addEventListener("input", async (event: Event) => {
+        await updateComponent(component, state, attribute, event.target as HTMLInputElement);
       });
     }
   });

data/lib/clapton/test_helper/base.rb

@@ -4,7 +4,7 @@ module Clapton
       require "execjs"
 
       def render_component(component, **kwargs)
-        js = File.read(File.join(__dir__, "..", "javascripts", "dist", "components.js"))
+        js = File.read(File.join(__dir__, "..", "javascripts", "dist", "components-for-test.js"))
         Dir.glob(Rails.root.join("app", "components", "**", "*.rb")).each do |file|
           js += Ruby2JS.convert(File.read(file), preset: true)
           js += "\n"

data/lib/clapton/version.rb

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

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: clapton
 version: !ruby/object:Gem::Version
-  version: 0.0.13
+  version: 0.0.15
 platform: ruby
 authors:
 - Moeki Kawakami
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-10-14 00:00:00.000000000 Z
+date: 2024-10-15 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -131,6 +131,7 @@ files:
 - lib/clapton.rb
 - lib/clapton/engine.rb
 - lib/clapton/javascripts/dist/client.js
+- lib/clapton/javascripts/dist/components-for-test.js
 - lib/clapton/javascripts/dist/components.js
 - lib/clapton/javascripts/node_modules/@adobe/css-tools/LICENSE
 - lib/clapton/javascripts/node_modules/@adobe/css-tools/Readme.md
@@ -2168,6 +2169,51 @@ files:
 - lib/clapton/javascripts/node_modules/dequal/lite/index.mjs
 - lib/clapton/javascripts/node_modules/dequal/package.json
 - lib/clapton/javascripts/node_modules/dequal/readme.md
+- lib/clapton/javascripts/node_modules/diff-dom/LICENSE.txt
+- lib/clapton/javascripts/node_modules/diff-dom/README.md
+- lib/clapton/javascripts/node_modules/diff-dom/browser/diffDOM.js
+- lib/clapton/javascripts/node_modules/diff-dom/browser/diffDOM.js.map
+- lib/clapton/javascripts/node_modules/diff-dom/dist/dts/TraceLogger.d.ts
+- lib/clapton/javascripts/node_modules/diff-dom/dist/dts/diffDOM/dom/apply.d.ts
+- lib/clapton/javascripts/node_modules/diff-dom/dist/dts/diffDOM/dom/fromVirtual.d.ts
+- lib/clapton/javascripts/node_modules/diff-dom/dist/dts/diffDOM/dom/index.d.ts
+- lib/clapton/javascripts/node_modules/diff-dom/dist/dts/diffDOM/dom/undo.d.ts
+- lib/clapton/javascripts/node_modules/diff-dom/dist/dts/diffDOM/helpers.d.ts
+- lib/clapton/javascripts/node_modules/diff-dom/dist/dts/diffDOM/index.d.ts
+- lib/clapton/javascripts/node_modules/diff-dom/dist/dts/diffDOM/types.d.ts
+- lib/clapton/javascripts/node_modules/diff-dom/dist/dts/diffDOM/virtual/apply.d.ts
+- lib/clapton/javascripts/node_modules/diff-dom/dist/dts/diffDOM/virtual/diff.d.ts
+- lib/clapton/javascripts/node_modules/diff-dom/dist/dts/diffDOM/virtual/fromDOM.d.ts
+- lib/clapton/javascripts/node_modules/diff-dom/dist/dts/diffDOM/virtual/fromString.d.ts
+- lib/clapton/javascripts/node_modules/diff-dom/dist/dts/diffDOM/virtual/helpers.d.ts
+- lib/clapton/javascripts/node_modules/diff-dom/dist/dts/diffDOM/virtual/index.d.ts
+- lib/clapton/javascripts/node_modules/diff-dom/dist/dts/index.d.ts
+- lib/clapton/javascripts/node_modules/diff-dom/dist/index.d.ts
+- lib/clapton/javascripts/node_modules/diff-dom/dist/index.js
+- lib/clapton/javascripts/node_modules/diff-dom/dist/index.js.map
+- lib/clapton/javascripts/node_modules/diff-dom/dist/index.min.js
+- lib/clapton/javascripts/node_modules/diff-dom/dist/index.min.js.map
+- lib/clapton/javascripts/node_modules/diff-dom/dist/module.js
+- lib/clapton/javascripts/node_modules/diff-dom/dist/module.js.map
+- lib/clapton/javascripts/node_modules/diff-dom/index.html
+- lib/clapton/javascripts/node_modules/diff-dom/package.json
+- lib/clapton/javascripts/node_modules/diff-dom/rollup.config.mjs
+- lib/clapton/javascripts/node_modules/diff-dom/src/TraceLogger.ts
+- lib/clapton/javascripts/node_modules/diff-dom/src/diffDOM/dom/apply.ts
+- lib/clapton/javascripts/node_modules/diff-dom/src/diffDOM/dom/fromVirtual.ts
+- lib/clapton/javascripts/node_modules/diff-dom/src/diffDOM/dom/index.ts
+- lib/clapton/javascripts/node_modules/diff-dom/src/diffDOM/dom/undo.ts
+- lib/clapton/javascripts/node_modules/diff-dom/src/diffDOM/helpers.ts
+- lib/clapton/javascripts/node_modules/diff-dom/src/diffDOM/index.ts
+- lib/clapton/javascripts/node_modules/diff-dom/src/diffDOM/types.ts
+- lib/clapton/javascripts/node_modules/diff-dom/src/diffDOM/virtual/apply.ts
+- lib/clapton/javascripts/node_modules/diff-dom/src/diffDOM/virtual/diff.ts
+- lib/clapton/javascripts/node_modules/diff-dom/src/diffDOM/virtual/fromDOM.ts
+- lib/clapton/javascripts/node_modules/diff-dom/src/diffDOM/virtual/fromString.ts
+- lib/clapton/javascripts/node_modules/diff-dom/src/diffDOM/virtual/helpers.ts
+- lib/clapton/javascripts/node_modules/diff-dom/src/diffDOM/virtual/index.ts
+- lib/clapton/javascripts/node_modules/diff-dom/src/index.ts
+- lib/clapton/javascripts/node_modules/diff-dom/tsconfig.json
 - lib/clapton/javascripts/node_modules/dom-accessibility-api/LICENSE.md
 - lib/clapton/javascripts/node_modules/dom-accessibility-api/README.md
 - lib/clapton/javascripts/node_modules/dom-accessibility-api/dist/accessible-description.d.ts
@@ -6658,6 +6704,7 @@ files:
 - lib/clapton/javascripts/src/actions/initialize-actions.ts
 - lib/clapton/javascripts/src/channel/clapton-channel.js
 - lib/clapton/javascripts/src/client.ts
+- lib/clapton/javascripts/src/components-for-test.ts
 - lib/clapton/javascripts/src/components.ts
 - lib/clapton/javascripts/src/components/block-quote.spec.ts
 - lib/clapton/javascripts/src/components/block-quote.ts
@@ -6709,7 +6756,6 @@ files:
 - lib/clapton/javascripts/src/components/text-field.ts
 - lib/clapton/javascripts/src/components/text.spec.ts
 - lib/clapton/javascripts/src/components/text.ts
-- lib/clapton/javascripts/src/dom/update-component.spec.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

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

@@ -1,32 +0,0 @@
-import { updateComponent } from "./update-component";
-import { describe, it, expect } from "vitest";
-
-describe("updateComponent", () => {
-  it("updates the component", () => {
-    const component = document.createElement("div");
-    component.innerHTML = `<div data-component="TestComponent" data-state='{"testAttribute": "initial"}'></div>`;
-
-    const input = document.createElement("div");
-    input.innerHTML = `<input value="updated" data-attribute="testAttribute">`;
-
-    class TestComponent {
-      state: any;
-      constructor(state: any) {
-        this.state = state;
-      }
-      get render() {
-        return `<div>${this.state.testAttribute}</div>`;
-      }
-    };
-    (window as any).TestComponent = TestComponent;
-
-    updateComponent(
-      component.firstChild as HTMLElement,
-      JSON.parse(component.getAttribute("data-state") || "{}"),
-      "testAttribute",
-      input.firstChild as HTMLInputElement
-    );
-
-    expect(component.textContent).toBe("updated");
-  });
-});