clapton 0.0.12 → 0.0.13

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5a69f6b50e12d2656c4e56ea26907b860f49f74c386b33899cb56f987ab63161
-  data.tar.gz: c4aa0019acf0fb2573d8bede7112f371c446df08e82d3e88f67889c7a28d3e03
+  metadata.gz: e238016cc8650d4f218c6a542329d5fcbbe844dd68124f2464063df016f25c1f
+  data.tar.gz: 36ae66989cf010520398499d54f007dbebb7deb6f91d37a578677eb8555bb53c
 SHA512:
-  metadata.gz: 4f714e419f33f1ee5a3a1c9e0a3eadc682d219bb3ba89347dcbee75bb2b70d7b8c123a9abc7d3f6053e7daf874d2a361a4acc7b36b4eab4c857782eb14095106
-  data.tar.gz: 59ae4e4669c37a77bfd1c4287af8ecea6704009f7145a35568451c0634efb81de0c5a509b11472ccf159835f063b032cf6d0be2d6711a42bf1b1eaa421f4b981
+  metadata.gz: ac72a228524042ed8748391c92076d3f05707b8f0763485ea7316f4b27e6c2a11c29643e4a6f43fc351bfffeb757dfd633afdcc710b81487f6a8754567a7d308
+  data.tar.gz: c5f4c34dbfc32e4ad8dd0bff57f160568cc98875f9b918c90275aa8abe39aa54dc9a1dddb8ed58eb80c380b45ec3476c78a0afb9de0630e4f65d3d0bfb5a6f66

data/README.md

@@ -159,6 +159,23 @@ After running the generator, you will see the following files:
 - `app/components/task_list_component.rb`
 - `app/states/task_list_state.rb`
 
+### Special Event
+
+#### render
+
+The `render` event is a special event that is triggered when the component is rendered.
+
+```ruby
+# app/components/task_list_component.rb
+class TaskListComponent < Clapton::Component
+  def render
+    # ...
+    @root.add_action(:render, :TaskListState, :add_empty_task, debounce: 500)
+    @root.render
+  end
+end
+```
+
 ### Preset Components
 
 ```ruby
@@ -183,6 +200,8 @@ datetime_field = Clapton::DateTimeField.new(:ExampleState, :example_attribute, {
 element = Clapton::Element.new("div", { id: "example-element" })
 element.add(Clapton::Text.new("Hello"))
 
+embed = Clapton::Embed.new("<blockquote>This is a test</blockquote>")
+
 emphasis = Clapton::Emphasis.new
 emphasis.add(Clapton::Text.new("Hello"))
 
@@ -310,6 +329,19 @@ class TaskListComponentTest < ActiveSupport::TestCase
 end
 ```
 
+## Deployment
+
+Run `bundle exec rake clapton:compile` to compile the components.
+
+`app/components` is codes that are compiled to JavaScript.
+So, you need to ignore the directory from autoloading.
+
+```ruby
+# config/application.rb
+
+Rails.autoloaders.main.ignore(Rails.root.join("app/components"))
+```
+
 ## Development
 
 After checking out the repo, run `bin/setup` to install dependencies. Then, run `bin/dev` to start the development server.

data/lib/clapton/engine.rb

@@ -21,6 +21,8 @@ module Clapton
         FileUtils.mkdir_p(components_path) unless components_path.exist?
         FileUtils.touch(components_path.join(".keep"))
 
+        compile_components
+
         listener = Listen.to(Rails.root.join("app", "components")) do |modified, added, removed|
           compile_components
         end

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

@@ -1285,6 +1285,31 @@ function getConfig(name) {
   }
 }
 
+const updateComponent = (component, state, property, target) => {
+    state[property] = target.value;
+    component.setAttribute("data-state", JSON.stringify(state));
+    const componentName = component.getAttribute("data-component");
+    const ComponentClass = window[componentName];
+    const instance = new ComponentClass(state, component.dataset.id);
+    morphdom(component, instance.render);
+};
+
+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", (event) => {
+                updateComponent(component, state, attribute, event.target);
+            });
+        }
+    });
+};
+
 const consumer = createConsumer();
 
 const claptonChannel = consumer.subscriptions.create("Clapton::ClaptonChannel", {
@@ -1302,13 +1327,20 @@ const claptonChannel = consumer.subscriptions.create("Clapton::ClaptonChannel",
         return true;
       }
     });
+
     initializeInputs();
     initializeActions();
   }
 });
 
 const handleAction = async (target, stateName, fn) => {
-    const targetComponent = target.closest(`[data-component="${stateName.replace("State", "Component")}"]`);
+    let targetComponent = target;
+    if (target.dataset.component === stateName.replace("State", "Component")) {
+        targetComponent = target;
+    }
+    else {
+        targetComponent = target.closest(`[data-component="${stateName.replace("State", "Component")}"]`);
+    }
     if (!targetComponent)
         return;
     const component = target.closest(`[data-component]`);
@@ -1356,6 +1388,13 @@ const initializeActionsForElement = (element) => {
         const { eventType, componentName, stateName, fnName, bounceTime } = splitActionAttribute(action);
         if (!eventType || !componentName || !fnName)
             return;
+        if (eventType === "render") {
+            setTimeout(() => {
+                handleAction(element, stateName, fnName);
+            }, 100);
+            element.setAttribute("data-render-event-handler", "true");
+            return;
+        }
         if (bounceTime > 0) {
             element.addEventListener(eventType, debounce((event) => handleAction(event.target, stateName, fnName), bounceTime));
         }
@@ -1366,31 +1405,6 @@ const initializeActionsForElement = (element) => {
     });
 };
 
-const updateComponent = (component, state, property, target) => {
-    state[property] = target.value;
-    component.setAttribute("data-state", JSON.stringify(state));
-    const componentName = component.getAttribute("data-component");
-    const ComponentClass = window[componentName];
-    const instance = new ComponentClass(state, component.dataset.id);
-    morphdom(component, instance.render);
-};
-
-const initializeInputs$1 = () => {
-    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", (event) => {
-                updateComponent(component, state, attribute, event.target);
-            });
-        }
-    });
-};
-
 const initializeComponents = () => {
     const components = document.querySelector("#clapton")?.getAttribute("data-clapton") || "[]";
     JSON.parse(components).forEach((component) => createAndAppendComponent(component, document.querySelector("#clapton")));
@@ -1411,5 +1425,5 @@ const createAndAppendComponent = (component, element) => {
 document.addEventListener("DOMContentLoaded", () => {
     initializeComponents();
     initializeActions();
-    initializeInputs$1();
+    initializeInputs();
 });

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

@@ -69,6 +69,10 @@ var Clapton = (function (exports) {
         get render() {
             return `<div ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</div>`;
         }
+        add_action(eventType, stateName, fnName, options = {}) {
+            this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${eventType}->${stateName}#${fnName}@${options.debounce || 0}`;
+            return this;
+        }
     }
 
     class Button {
@@ -176,6 +180,15 @@ var Clapton = (function (exports) {
         }
     }
 
+    class Embed {
+        constructor(html) {
+            this.html = html;
+        }
+        get render() {
+            return this.html;
+        }
+    }
+
     class Emphasis {
         constructor(attributes = {}) {
             this.children = [];
@@ -404,6 +417,7 @@ var Clapton = (function (exports) {
     exports.Component = Component;
     exports.DateTimeField = DateTimeField;
     exports.Element = Element;
+    exports.Embed = Embed;
     exports.Emphasis = Emphasis;
     exports.Form = Form;
     exports.Heading = Heading;

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

@@ -1,7 +1,12 @@
 import { claptonChannel } from "../channel/clapton-channel";
 
 export const handleAction = async (target: HTMLElement, stateName: string, fn: string) => {
-  const targetComponent = target.closest(`[data-component="${stateName.replace("State", "Component")}"]`) as HTMLElement;
+  let targetComponent = target;
+  if (target.dataset.component === stateName.replace("State", "Component")) {
+    targetComponent = target
+  } else {
+    targetComponent = target.closest(`[data-component="${stateName.replace("State", "Component")}"]`) as HTMLElement;
+  }
   if (!targetComponent) return;
   const component = target.closest(`[data-component]`) as HTMLElement;
   const attribute = target.getAttribute("data-attribute");

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

@@ -14,6 +14,14 @@ const initializeActionsForElement = (element: HTMLElement) => {
     const { eventType, componentName, stateName, fnName, bounceTime } = splitActionAttribute(action);
     if (!eventType || !componentName || !fnName) return;
 
+    if (eventType === "render") {
+      setTimeout(() => {
+        handleAction(element, stateName, fnName)
+      }, 100);
+      element.setAttribute("data-render-event-handler", "true");
+      return;
+    }
+
     if (bounceTime > 0) {
       element.addEventListener(eventType, debounce((event) => 
         handleAction(event.target as HTMLElement, stateName, fnName), bounceTime)

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

@@ -1,7 +1,7 @@
 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", {
@@ -19,6 +19,7 @@ export const claptonChannel = consumer.subscriptions.create("Clapton::ClaptonCha
         return true;
       }
     });
+
     initializeInputs();
     initializeActions();
   }

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

@@ -1,6 +1,3 @@
-import { splitActionAttribute } from "./html/split-action-attribute"
-import { updateComponent } from "./dom/update-component"
-import { handleAction } from "./actions/handle-action"
 import { initializeActions } from "actions/initialize-actions";
 import { initializeInputs } from "inputs/initialize-inputs";
 

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

@@ -17,4 +17,9 @@ export class Box {
   get render(): string {
     return `<div ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</div>`;
   }
+
+  add_action(eventType: string, stateName: string, fnName: string, options: Record<string, any> = {}): this {
+    this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${eventType}->${stateName}#${fnName}@${options.debounce || 0}`;
+    return this;
+  }
 }

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

@@ -0,0 +1,8 @@
+import { describe, it, expect } from "vitest"
+import { Embed } from "./embed"
+
+describe("Embed", () => {
+  it("returns empty string if no params", () => {
+    expect(new Embed("<blockquote></blockquote>").render).toBe("<blockquote></blockquote>")
+  })
+})

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

@@ -0,0 +1,11 @@
+export class Embed {
+  html: string;
+
+  constructor(html: string) {
+    this.html = html;
+  }
+
+  get render(): string {
+    return this.html;
+  }
+}

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

@@ -5,6 +5,7 @@ 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"
@@ -22,4 +23,4 @@ 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 };
+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/inputs/initialize-inputs.ts

@@ -1,4 +1,4 @@
-import { updateComponent } from "dom/update-component";
+import { updateComponent } from "../dom/update-component";
 
 export const initializeInputs = () => {
   const inputElements = document.querySelectorAll("[data-attribute]");

data/lib/clapton/version.rb

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

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: clapton
 version: !ruby/object:Gem::Version
-  version: 0.0.12
+  version: 0.0.13
 platform: ruby
 authors:
 - Moeki Kawakami
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-10-13 00:00:00.000000000 Z
+date: 2024-10-14 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -6675,6 +6675,8 @@ files:
 - lib/clapton/javascripts/src/components/datetime-field.ts
 - lib/clapton/javascripts/src/components/element.spec.ts
 - lib/clapton/javascripts/src/components/element.ts
+- lib/clapton/javascripts/src/components/embed.spec.ts
+- lib/clapton/javascripts/src/components/embed.ts
 - lib/clapton/javascripts/src/components/emphasis.spec.ts
 - lib/clapton/javascripts/src/components/emphasis.ts
 - lib/clapton/javascripts/src/components/form.spec.ts