clapton 0.0.12 → 0.0.14

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5a69f6b50e12d2656c4e56ea26907b860f49f74c386b33899cb56f987ab63161
-  data.tar.gz: c4aa0019acf0fb2573d8bede7112f371c446df08e82d3e88f67889c7a28d3e03
+  metadata.gz: 7def55e21b26dedfd8843c9ace0bf4db854abf18205de4dea7c3a203d06130f6
+  data.tar.gz: 743f8549cd8a901f2f1c76a4807f05ccace77d58e9665ad35c02626df555a08a
 SHA512:
-  metadata.gz: 4f714e419f33f1ee5a3a1c9e0a3eadc682d219bb3ba89347dcbee75bb2b70d7b8c123a9abc7d3f6053e7daf874d2a361a4acc7b36b4eab4c857782eb14095106
-  data.tar.gz: 59ae4e4669c37a77bfd1c4287af8ecea6704009f7145a35568451c0634efb81de0c5a509b11472ccf159835f063b032cf6d0be2d6711a42bf1b1eaa421f4b981
+  metadata.gz: b05ba6c72f46212b628cee66c18e01644e285e6380862669eb7de55174338b4b9109ebf69505d398227c85f0a19a6e55580e6cf760951fad573bc13d78c73845
+  data.tar.gz: 2359db5b15a7ef59f43dc61d2bcb96609858cc0a19c996e9b18288046fe739a3d68bf5868f221c97c349af8781ff8483c979199e3c1c27914f617e8912555aba

data/README.md

@@ -12,6 +12,7 @@ Clapton is a Ruby on Rails gem for building web apps with pure Ruby only (no Jav
 - Action Cable (WebSocket)
 - [Ruby2JS](https://www.ruby2js.com/) (for compiling Ruby to JavaScript)
 - [Morphdom](https://github.com/patrick-steele-idem/morphdom)
+- importmap
 
 ## Installation
 
@@ -159,6 +160,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 +201,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 +330,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/app/helpers/clapton/clapton_helper.rb

@@ -2,7 +2,22 @@ module Clapton
   module ClaptonHelper
 
     def clapton_javascript_tag
-      tag.script(src: "/clapton/index.js", type: "text/javascript")
+      all_components = Dir.glob(Rails.root.join("app", "components", "**", "*.rb"))
+      tags = <<~HTML
+        <script type="importmap">
+          {
+            "imports": {
+              "client": "/clapton/client.js",
+              "components": "/clapton/components.js",
+              #{ all_components.map do
+               |component| "\"#{File.basename(component, ".rb").camelize}\": \"/clapton/#{File.basename(component, ".rb").camelize}.js\""
+              end.join(",\n") }
+            }
+          }
+        </script>
+        <script type="module" src="/clapton/client.js"></script>
+      HTML
+      tags.html_safe
     end
 
     def clapton_tag

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
@@ -30,20 +32,24 @@ module Clapton
     end
 
     def compile_components
-      js = File.read(File.join(__dir__, "javascripts", "dist", "components.js"))
-      js += "\n"
-      js += File.read(File.join(__dir__, "javascripts", "dist", "client.js"))
-      js += "\n"
-      js += "window.components = [];"
-      js += "\n"
+      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")))
       Dir.glob(Rails.root.join("app", "components", "**", "*.rb")).each do |file|
-        js += Ruby2JS.convert(File.read(file), preset: true)
+        code = File.read(file)
+        js = ""
+        js += "import { Clapton } from 'components';"
         js += "\n"
-        js += "window.#{File.basename(file, ".rb").camelize} = #{File.basename(file, ".rb").camelize};"
+        code.scan(/(\w+)Component\.new/).each do |match|
+          js += "import { #{match[0]}Component } from '#{match[0]}Component';"
+          js += "\n"
+        end
+        js += Ruby2JS.convert(code, preset: true)
         js += "\n"
+        js += "export { #{File.basename(file, ".rb").camelize} };"
+        js += "\n"
+        File.write(Rails.root.join("public", "clapton", "#{File.basename(file, ".rb").camelize}.js"), js)
       end
-      FileUtils.mkdir_p(Rails.root.join("public", "clapton")) unless Rails.root.join("public", "clapton").exist?
-      File.write(Rails.root.join("public", "clapton", "index.js"), js)
     end
   end
 end

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

@@ -1285,30 +1285,66 @@ 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 module = await import(`${componentName}`);
+    const ComponentClass = module[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", async (event) => {
+                await updateComponent(component, state, attribute, event.target);
+            });
+        }
+    });
+};
+
 const consumer = createConsumer();
 
 const claptonChannel = consumer.subscriptions.create("Clapton::ClaptonChannel", {
-  connected() {},
+  connected() {
+    window.actionCableConnected = true;
+  },
 
   disconnected() {},
 
-  received(response) {
+  async received(response) {
     const { data, errors } = response;
     const component = document.querySelector(`[data-id="${data.component.id}"]`);
-    const instance = new window[data.component.name](data.state, data.component.id, errors);
+    const module = await import(`${data.component.name}`);
+    const instance = new module[data.component.name](data.state, data.component.id, errors);
     morphdom(component, instance.render, {
       onBeforeElUpdated: (_fromEl, toEl) => {
         toEl.setAttribute("data-set-event-handler", "true");
         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 +1392,16 @@ const initializeActionsForElement = (element) => {
         const { eventType, componentName, stateName, fnName, bounceTime } = splitActionAttribute(action);
         if (!eventType || !componentName || !fnName)
             return;
+        if (eventType === "render") {
+            const interval = setInterval(() => {
+                if (window.actionCableConnected === true) {
+                    handleAction(element, stateName, fnName);
+                    clearInterval(interval);
+                }
+            }, 10);
+            element.setAttribute("data-render-event-handler", "true");
+            return;
+        }
         if (bounceTime > 0) {
             element.addEventListener(eventType, debounce((event) => handleAction(event.target, stateName, fnName), bounceTime));
         }
@@ -1366,50 +1412,30 @@ 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 initializeComponents = async () => {
     const components = document.querySelector("#clapton")?.getAttribute("data-clapton") || "[]";
-    JSON.parse(components).forEach((component) => 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);
-    });
+        await createAndAppendComponent(component, element);
+    }
 };
-const createAndAppendComponent = (component, element) => {
+const createAndAppendComponent = async (component, element) => {
     const componentDom = document.createElement('div');
-    const instance = new window[component.component](component.state);
+    const module = await import(`${component.component}`);
+    const instance = new module[component.component](component.state);
     componentDom.innerHTML = instance.render;
     const firstChild = componentDom.firstChild;
     if (firstChild) {
         element.appendChild(firstChild);
     }
 };
-document.addEventListener("DOMContentLoaded", () => {
-    initializeComponents();
+document.addEventListener("DOMContentLoaded", async () => {
+    await initializeComponents();
     initializeActions();
-    initializeInputs$1();
+    initializeInputs();
 });