clapton 0.0.23 → 0.0.24

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f5a917233f15421e530f894af3f7fa67b46b79c78d8568cd158566610f6c2db5
-  data.tar.gz: 2935aea66e3fc3e7442606c0fcf55ffcea56b61bb36864c4fc77101680cc29ea
+  metadata.gz: f15ceb3c247b4a620ea3508dc66511a2d7beb4f2e1bc32a24dd8e69bd0d70332
+  data.tar.gz: 329b1b8107968efdcce936a4f71deb904e5a609d846ca245d8c90cc7040ba144
 SHA512:
-  metadata.gz: 458297f32dca2583bfb675fb74bba00b781bef37d825b9a76e9116cea3c3bf0f98b18d1d6867d62b67d47638335c2f99d0ef3885358281f5fad63245e53e6d2f
-  data.tar.gz: 586febac7acaf53ed42c0dadaa696c5e136bee87de707214343cf36104f2b56625f3aef3cfa4dfd71bd34c8108243813b26f8ea8f8fa7d7aea7ac2b686e9c25a
+  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

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();

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/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 () => {

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.23'
+  VERSION = '0.0.24'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: clapton
 version: !ruby/object:Gem::Version
-  version: 0.0.23
+  version: 0.0.24
 platform: ruby
 authors:
 - Moeki Kawakami