clapton 0.0.22 → 0.0.24

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ba556f54f55566ad5502aff210ab368c040d332a62313411377314b99a507ab0
-  data.tar.gz: f8a71c1947ea6eb6544f637f53641ce87fc904543efadac7e30c244b6d1e8c85
+  metadata.gz: f15ceb3c247b4a620ea3508dc66511a2d7beb4f2e1bc32a24dd8e69bd0d70332
+  data.tar.gz: 329b1b8107968efdcce936a4f71deb904e5a609d846ca245d8c90cc7040ba144
 SHA512:
-  metadata.gz: a8b32c159a66aa00df226c792f99e3d8a2ca96706a6189f3f442fec764eefe9f4a90e66f7f4c050a6a3c84212f46469e5f232c219b10999ebe543affb659a3f2
-  data.tar.gz: eb01a40f84c3e8437be75b05d716f9702c0ed15666041015d06f74449f317f144558bd4c798ac94710008e63bf4c7a062556c14dcfbb9b3ee693217e905c86e0
+  metadata.gz: 24846c65443543d58f3e8f6f6018b5ace3af64166be9b9e2bde2bd0aa5056c7bd2f148ba43b7171a7e43756d0eb485bebaad9fca5ad57a913b038bead70baf8e
+  data.tar.gz: 60aaeaae14b6277cd5323f5cf1e36201e94f2887e4c1655838ce37a13a58282de3b05c729e2a8212b2e1705f7e4e538f0b2f2b78e57b872f089d9956acc58b57

data/README.md

@@ -177,6 +177,30 @@ class TaskListComponent < Clapton::Component
 end
 ```
 
+### Effect
+
+The `effect` method is a method that is triggered when the state is changed.
+
+```ruby
+# app/components/task_list_component.rb
+class TaskListComponent < Clapton::Component
+  effect [:tasks] do |state|
+    puts state[:tasks]
+  end
+end
+```
+
+If dependencies are not specified, the effect will be triggered on the first render.
+
+```ruby
+# app/components/video_player_component.rb
+class VideoPlayerComponent < Clapton::Component
+  effect [] do
+    puts "First render"
+  end
+end
+```
+
 ### Preset Components Classes
 
 ```ruby
@@ -349,6 +373,15 @@ module ApplicationCable
 end
 ```
 
+### Using with importmap-rails
+
+Use `clapton_javascript_tag` instead of `javascript_importmap_tags`.
+
+```diff
+- <%= javascript_importmap_tags %>
++ <%= clapton_javascript_tag %>
+```
+
 ### Events
 
 #### clapton:render

data/app/helpers/clapton/clapton_helper.rb

@@ -1,11 +1,10 @@
 module Clapton
   module ClaptonHelper
 
-    def clapton_javascript_tag
+    def clapton_javascript_tag(entry_point = "application", importmap: nil)
       all_components = Dir.glob(Rails.root.join("app", "components", "**", "*.rb"))
-      tags = <<~HTML
-        <script type="importmap">
-          {
+      clapton_json = JSON.parse <<~JSON
+      {
             "imports": {
               "client": "/clapton/client.js",
               "components": "/clapton/components.js",
@@ -15,10 +14,25 @@ module Clapton
               end.join(",\n") }
             }
           }
-        </script>
-        <script type="module" src="/clapton/client.js"></script>
-      HTML
-      tags.html_safe
+      JSON
+      if defined?(javascript_importmap_tags)
+        importmap ||= Rails.application.importmap
+        json = { imports: JSON.parse(importmap.to_json(resolver: self))["imports"].merge(clapton_json["imports"]) }
+        safe_join [
+          javascript_inline_importmap_tag(json.to_json),
+          javascript_importmap_module_preload_tags(importmap, entry_point:),
+          javascript_import_module_tag(entry_point),
+          tag.script(type: "module", src: "/clapton/client.js"),
+        ], "\n"
+      else
+        html = <<~HTML
+          <script type="importmap">
+            #{clapton_json.to_json}
+          </script>
+          <script type="module" src="/clapton/client.js"></script>
+        HTML
+        html.html_safe
+      end
     end
 
     def clapton_tag

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

@@ -405,7 +405,28 @@ var c = (function () {
             }
             return root.renderWrapper;
         }
+        static effect(dependencies, callback) {
+            this._effects.push({ dependencies, callback });
+        }
+        get effects() {
+            return this.constructor._effects;
+        }
+        runEffects() {
+            this.effects.forEach((effect) => {
+                if (effect.dependencies.some((dependency) => this._state[dependency] !== undefined)) {
+                    effect.callback(this._state);
+                }
+            });
+        }
+        runEffectOnFirstRender() {
+            this.effects.forEach((effect) => {
+                if (effect.dependencies.length === 0) {
+                    effect.callback(this._state);
+                }
+            });
+        }
     }
+    Component._effects = [];
 
     class TextField {
         constructor(state, attribute, attributes = {}) {

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

@@ -402,7 +402,28 @@ class Component {
         }
         return root.renderWrapper;
     }
+    static effect(dependencies, callback) {
+        this._effects.push({ dependencies, callback });
+    }
+    get effects() {
+        return this.constructor._effects;
+    }
+    runEffects() {
+        this.effects.forEach((effect) => {
+            if (effect.dependencies.some((dependency) => this._state[dependency] !== undefined)) {
+                effect.callback(this._state);
+            }
+        });
+    }
+    runEffectOnFirstRender() {
+        this.effects.forEach((effect) => {
+            if (effect.dependencies.length === 0) {
+                effect.callback(this._state);
+            }
+        });
+    }
 }
+Component._effects = [];
 
 class TextField {
     constructor(state, attribute, attributes = {}) {

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

@@ -1292,6 +1292,7 @@ const updateComponent = async (component, state, property, target) => {
     const ComponentClass = module[componentName];
     const instance = new ComponentClass(state, component.dataset.id);
     morphdom(component, instance.renderWrapper);
+    instance.runEffects();
 };
 
 const initializeInputs = () => {
@@ -1333,6 +1334,7 @@ const claptonChannel = consumer.subscriptions.create("Clapton::ClaptonChannel",
 
     initializeInputs();
     initializeActions();
+    instance.runEffects();
   }
 });
 
@@ -1440,6 +1442,7 @@ const createAndAppendComponent = async (component, element) => {
             element.outerHTML = firstChild.outerHTML;
         }
     }
+    instance.runEffects();
 };
 document.addEventListener("DOMContentLoaded", async () => {
     await initializeComponents();
@@ -1448,6 +1451,13 @@ document.addEventListener("DOMContentLoaded", async () => {
     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);
+});
 window.addEventListener('beforeunload', () => {
     sessionStorage.setItem('scrollPosition', window.scrollY.toString());
 });

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

@@ -405,7 +405,28 @@ var Clapton = (function (exports) {
             }
             return root.renderWrapper;
         }
+        static effect(dependencies, callback) {
+            this._effects.push({ dependencies, callback });
+        }
+        get effects() {
+            return this.constructor._effects;
+        }
+        runEffects() {
+            this.effects.forEach((effect) => {
+                if (effect.dependencies.some((dependency) => this._state[dependency] !== undefined)) {
+                    effect.callback(this._state);
+                }
+            });
+        }
+        runEffectOnFirstRender() {
+            this.effects.forEach((effect) => {
+                if (effect.dependencies.length === 0) {
+                    effect.callback(this._state);
+                }
+            });
+        }
     }
+    Component._effects = [];
 
     class TextField {
         constructor(state, attribute, attributes = {}) {

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

@@ -402,7 +402,28 @@ class Component {
         }
         return root.renderWrapper;
     }
+    static effect(dependencies, callback) {
+        this._effects.push({ dependencies, callback });
+    }
+    get effects() {
+        return this.constructor._effects;
+    }
+    runEffects() {
+        this.effects.forEach((effect) => {
+            if (effect.dependencies.some((dependency) => this._state[dependency] !== undefined)) {
+                effect.callback(this._state);
+            }
+        });
+    }
+    runEffectOnFirstRender() {
+        this.effects.forEach((effect) => {
+            if (effect.dependencies.length === 0) {
+                effect.callback(this._state);
+            }
+        });
+    }
 }
+Component._effects = [];
 
 class TextField {
     constructor(state, attribute, attributes = {}) {

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

@@ -0,0 +1,160 @@
+import { Clapton } from "components"
+
+const bq = (...props: any[]) => {
+  return new Clapton.BlockQuote(...props)
+}
+
+const box = (...props: any[]) => {
+  return new Clapton.Box(...props)
+}
+
+const b = (...props: any[]) => {
+  return new Clapton.Bold(...props)
+}
+
+const button = (...props: any[]) => {
+  return new Clapton.Button(...props)
+}
+
+const check = (...props: any[]) => {
+  return new Clapton.Checkbox(props[0], props[1], props[2])
+}
+
+const code = (...props: any[]) => {
+  return new Clapton.Code(...props)
+}
+
+const datetime = (...props: any[]) => {
+  return new Clapton.DateTimeField(props[0], props[1], props[2])
+}
+
+const el = (...props: any[]) => {
+  return new Clapton.Element(props[0], props[1])
+}
+
+const embed = (...props: any[]) => {
+  return new Clapton.Embed(props[0])
+}
+
+const em = (...props: any[]) => {
+  return new Clapton.Emphasis(...props)
+}
+
+const form = (...props: any[]) => {
+  return new Clapton.Form(...props)
+}
+
+const h = (...props: any[]) => {
+  return new Clapton.Heading(props[0], props[1])
+}
+
+const img = (...props: any[]) => {
+  return new Clapton.Image(props[0], props[1], props[2])
+}
+
+const a = (...props: any[]) => {
+  return new Clapton.Link(props[0], props[1])
+}
+
+const li = (...props: any[]) => {
+  return new Clapton.ListItem(...props)
+}
+
+const ul = (...props: any[]) => {
+  return new Clapton.List(...props)
+}
+
+const ol = (...props: any[]) => {
+  return new Clapton.OrderedList(...props)
+}
+
+const p = (...props: any[]) => {
+  return new Clapton.Paragraph(...props)
+}
+
+const q = (...props: any[]) => {
+  return new Clapton.Quote(...props)
+}
+
+const radio = (...props: any[]) => {
+  return new Clapton.RadioButton(props[0], props[1], props[2])
+}
+
+const select = (...props: any[]) => {
+  return new Clapton.Select(props[0], props[1], props[2])
+}
+
+const span = (...props: any[]) => {
+  return new Clapton.Span(...props)
+}
+
+const textarea = (...props: any[]) => {
+  return new Clapton.TextArea(props[0], props[1], props[2])
+}
+
+const input = (...props: any[]) => {
+  return new Clapton.TextField(props[0], props[1], props[2])
+}
+
+const text = (...props: any[]) => {
+  return new Clapton.Text(props[0])
+}
+
+const c = (name: string, ...props: any[]) => {
+  switch (name) {
+    case "bq":
+      return bq(...props)
+    case "box":
+      return box(...props)
+    case "b":
+      return b(...props)
+    case "button":
+      return button(...props)
+    case "check":
+      return check(...props)
+    case "code":
+      return code(...props)
+    case "datetime":
+      return datetime(...props)
+    case "el":
+      return el(...props)
+    case "embed":
+      return embed(...props)
+    case "em":
+      return em(...props)
+    case "form":
+      return form(...props)
+    case "h":
+      return h(...props)
+    case "img":
+      return img(...props)
+    case "a":
+      return a(...props)
+    case "li":
+      return li(...props)
+    case "ul":
+      return ul(...props)
+    case "ol":
+      return ol(...props)
+    case "p":
+      return p(...props)
+    case "q":
+      return q(...props)
+    case "radio":
+      return radio(...props)
+    case "select":
+      return select(...props)
+    case "span":
+      return span(...props)
+    case "textarea":
+      return textarea(...props)
+    case "input":
+      return input(...props)
+    case "text":
+      return text(...props)
+    default:
+      return new Clapton.Component(...props)
+  }
+}
+
+export { c }

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

@@ -1,160 +1,3 @@
-import { Clapton } from "components"
-
-const bq = (...props: any[]) => {
-  return new Clapton.BlockQuote(...props)
-}
-
-const box = (...props: any[]) => {
-  return new Clapton.Box(...props)
-}
-
-const b = (...props: any[]) => {
-  return new Clapton.Bold(...props)
-}
-
-const button = (...props: any[]) => {
-  return new Clapton.Button(...props)
-}
-
-const check = (...props: any[]) => {
-  return new Clapton.Checkbox(props[0], props[1], props[2])
-}
-
-const code = (...props: any[]) => {
-  return new Clapton.Code(...props)
-}
-
-const datetime = (...props: any[]) => {
-  return new Clapton.DateTimeField(props[0], props[1], props[2])
-}
-
-const el = (...props: any[]) => {
-  return new Clapton.Element(props[0], props[1])
-}
-
-const embed = (...props: any[]) => {
-  return new Clapton.Embed(props[0])
-}
-
-const em = (...props: any[]) => {
-  return new Clapton.Emphasis(...props)
-}
-
-const form = (...props: any[]) => {
-  return new Clapton.Form(...props)
-}
-
-const h = (...props: any[]) => {
-  return new Clapton.Heading(props[0], props[1])
-}
-
-const img = (...props: any[]) => {
-  return new Clapton.Image(props[0], props[1], props[2])
-}
-
-const a = (...props: any[]) => {
-  return new Clapton.Link(props[0], props[1])
-}
-
-const li = (...props: any[]) => {
-  return new Clapton.ListItem(...props)
-}
-
-const ul = (...props: any[]) => {
-  return new Clapton.List(...props)
-}
-
-const ol = (...props: any[]) => {
-  return new Clapton.OrderedList(...props)
-}
-
-const p = (...props: any[]) => {
-  return new Clapton.Paragraph(...props)
-}
-
-const q = (...props: any[]) => {
-  return new Clapton.Quote(...props)
-}
-
-const radio = (...props: any[]) => {
-  return new Clapton.RadioButton(props[0], props[1], props[2])
-}
-
-const select = (...props: any[]) => {
-  return new Clapton.Select(props[0], props[1], props[2])
-}
-
-const span = (...props: any[]) => {
-  return new Clapton.Span(...props)
-}
-
-const textarea = (...props: any[]) => {
-  return new Clapton.TextArea(props[0], props[1], props[2])
-}
-
-const input = (...props: any[]) => {
-  return new Clapton.TextField(props[0], props[1], props[2])
-}
-
-const text = (...props: any[]) => {
-  return new Clapton.Text(props[0])
-}
-
-const c = (name: string, ...props: any[]) => {
-  switch (name) {
-    case "bq":
-      return bq(...props)
-    case "box":
-      return box(...props)
-    case "b":
-      return b(...props)
-    case "button":
-      return button(...props)
-    case "check":
-      return check(...props)
-    case "code":
-      return code(...props)
-    case "datetime":
-      return datetime(...props)
-    case "el":
-      return el(...props)
-    case "embed":
-      return embed(...props)
-    case "em":
-      return em(...props)
-    case "form":
-      return form(...props)
-    case "h":
-      return h(...props)
-    case "img":
-      return img(...props)
-    case "a":
-      return a(...props)
-    case "li":
-      return li(...props)
-    case "ul":
-      return ul(...props)
-    case "ol":
-      return ol(...props)
-    case "p":
-      return p(...props)
-    case "q":
-      return q(...props)
-    case "radio":
-      return radio(...props)
-    case "select":
-      return select(...props)
-    case "span":
-      return span(...props)
-    case "textarea":
-      return textarea(...props)
-    case "input":
-      return input(...props)
-    case "text":
-      return text(...props)
-    default:
-      return new Clapton.Component(...props)
-  }
-}
+import { c } from "./c-base"
 
 export default c

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

@@ -1,160 +1,3 @@
-import { Clapton } from "components"
-
-const bq = (...props: any[]) => {
-  return new Clapton.BlockQuote(...props)
-}
-
-const box = (...props: any[]) => {
-  return new Clapton.Box(...props)
-}
-
-const b = (...props: any[]) => {
-  return new Clapton.Bold(...props)
-}
-
-const button = (...props: any[]) => {
-  return new Clapton.Button(...props)
-}
-
-const check = (...props: any[]) => {
-  return new Clapton.Checkbox(props[0], props[1], props[2])
-}
-
-const code = (...props: any[]) => {
-  return new Clapton.Code(...props)
-}
-
-const datetime = (...props: any[]) => {
-  return new Clapton.DateTimeField(props[0], props[1], props[2])
-}
-
-const el = (...props: any[]) => {
-  return new Clapton.Element(props[0], props[1])
-}
-
-const embed = (...props: any[]) => {
-  return new Clapton.Embed(props[0])
-}
-
-const em = (...props: any[]) => {
-  return new Clapton.Emphasis(...props)
-}
-
-const form = (...props: any[]) => {
-  return new Clapton.Form(...props)
-}
-
-const h = (...props: any[]) => {
-  return new Clapton.Heading(props[0], props[1])
-}
-
-const img = (...props: any[]) => {
-  return new Clapton.Image(props[0], props[1], props[2])
-}
-
-const a = (...props: any[]) => {
-  return new Clapton.Link(props[0], props[1])
-}
-
-const li = (...props: any[]) => {
-  return new Clapton.ListItem(...props)
-}
-
-const ul = (...props: any[]) => {
-  return new Clapton.List(...props)
-}
-
-const ol = (...props: any[]) => {
-  return new Clapton.OrderedList(...props)
-}
-
-const p = (...props: any[]) => {
-  return new Clapton.Paragraph(...props)
-}
-
-const q = (...props: any[]) => {
-  return new Clapton.Quote(...props)
-}
-
-const radio = (...props: any[]) => {
-  return new Clapton.RadioButton(props[0], props[1], props[2])
-}
-
-const select = (...props: any[]) => {
-  return new Clapton.Select(props[0], props[1], props[2])
-}
-
-const span = (...props: any[]) => {
-  return new Clapton.Span(...props)
-}
-
-const textarea = (...props: any[]) => {
-  return new Clapton.TextArea(props[0], props[1], props[2])
-}
-
-const input = (...props: any[]) => {
-  return new Clapton.TextField(props[0], props[1], props[2])
-}
-
-const text = (...props: any[]) => {
-  return new Clapton.Text(props[0])
-}
-
-const c = (name: string, ...props: any[]) => {
-  switch (name) {
-    case "bq":
-      return bq(...props)
-    case "box":
-      return box(...props)
-    case "b":
-      return b(...props)
-    case "button":
-      return button(...props)
-    case "check":
-      return check(...props)
-    case "code":
-      return code(...props)
-    case "datetime":
-      return datetime(...props)
-    case "el":
-      return el(...props)
-    case "embed":
-      return embed(...props)
-    case "em":
-      return em(...props)
-    case "form":
-      return form(...props)
-    case "h":
-      return h(...props)
-    case "img":
-      return img(...props)
-    case "a":
-      return a(...props)
-    case "li":
-      return li(...props)
-    case "ul":
-      return ul(...props)
-    case "ol":
-      return ol(...props)
-    case "p":
-      return p(...props)
-    case "q":
-      return q(...props)
-    case "radio":
-      return radio(...props)
-    case "select":
-      return select(...props)
-    case "span":
-      return span(...props)
-    case "textarea":
-      return textarea(...props)
-    case "input":
-      return input(...props)
-    case "text":
-      return text(...props)
-    default:
-      return new Clapton.Component(...props)
-  }
-}
+import { c } from "./c-base"
 
 export { c }

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

@@ -25,5 +25,6 @@ export const claptonChannel = consumer.subscriptions.create("Clapton::ClaptonCha
 
     initializeInputs();
     initializeActions();
+    instance.runEffects();
   }
 })

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

@@ -36,6 +36,7 @@ const createAndAppendComponent = async (component: ComponentDefinition, element:
       element.outerHTML = firstChild.outerHTML;
     }
   }
+  instance.runEffects();
 };
 
 document.addEventListener("DOMContentLoaded", async () => {
@@ -46,6 +47,14 @@ document.addEventListener("DOMContentLoaded", async () => {
   document.dispatchEvent(event);
 });
 
+document.addEventListener("turbo:render", async () => {
+  await initializeComponents();
+  initializeActions();
+  initializeInputs();
+  const event = new Event('clapton:render');
+  document.dispatchEvent(event);
+});
+
 window.addEventListener('beforeunload', () => {
   sessionStorage.setItem('scrollPosition', window.scrollY.toString());
 });

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

@@ -5,6 +5,8 @@ export class Component {
   _state: any;
   _errors: any[];
 
+  static _effects: any[] = [];
+
   constructor(state: any = {}, id: string = Math.random().toString(36).substring(2, 10), errors: any[] = []) {
     this._state = state;
     this.id = id;
@@ -24,4 +26,28 @@ export class Component {
     }
     return root.renderWrapper;
   }
+
+  static effect(dependencies: any[], callback: () => void) {
+    this._effects.push({ dependencies, callback });
+  }
+
+  get effects(): any[] {
+    return (this.constructor as typeof Component)._effects;
+  }
+
+  runEffects() {
+    this.effects.forEach((effect) => {
+      if (effect.dependencies.some((dependency: any) => this._state[dependency] !== undefined)) {
+        effect.callback(this._state);
+      }
+    });
+  }
+
+  runEffectOnFirstRender() {
+    this.effects.forEach((effect) => {
+      if (effect.dependencies.length === 0) {
+        effect.callback(this._state);
+      }
+    });
+  }
 }

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

@@ -7,4 +7,5 @@ export const updateComponent = async (component: HTMLElement, state: any, proper
   const ComponentClass = module[componentName] as any;
   const instance = new ComponentClass(state, component.dataset.id);
   morphdom(component, instance.renderWrapper);
+  instance.runEffects();
 };

data/lib/clapton/version.rb

@@ -1,3 +1,3 @@
 module Clapton
-  VERSION = '0.0.22'
+  VERSION = '0.0.24'
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: clapton
 version: !ruby/object:Gem::Version
-  version: 0.0.22
+  version: 0.0.24
 platform: ruby
 authors:
 - Moeki Kawakami
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-10-16 00:00:00.000000000 Z
+date: 2024-10-17 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -6706,6 +6706,7 @@ files:
 - lib/clapton/javascripts/src/actions/handle-action.spec.ts
 - lib/clapton/javascripts/src/actions/handle-action.ts
 - lib/clapton/javascripts/src/actions/initialize-actions.ts
+- lib/clapton/javascripts/src/c-base.ts
 - lib/clapton/javascripts/src/c-for-test.ts
 - lib/clapton/javascripts/src/c.ts
 - lib/clapton/javascripts/src/channel/clapton-channel.js