feat: add subscribe context method

kt3k · Oct 15, 2024 · 5d08222 · 5d08222
1 parent d7e8d12
commit 5d08222
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 27 deletions.
diff --git a/README.md b/README.md
@@ -6,8 +6,8 @@
 
 ## Features
 
-- Cell encourages **local event handlers**
-- Cell provides **signals** for remote effects
+- Cell encourages **local event handlers** pattern
+- Cell encourages **signals** pattern for remote effects
 - **Lightweight** (**< 1.5 kiB** gzipped)
 - **TypeScript** friendly
 
@@ -131,15 +131,15 @@ The below example shows how you can use `cell` directly in the browsers.
 
 ```html
 <script type="module">
-import { register } from "https://kt3k.github.io/cell/dist.min.js";
+  import { register } from "https://kt3k.github.io/cell/dist.min.js"
 
-function Mirroring({ on, query }) {
-  on("input", () => {
-    query(".dest").textContent = query(".src").value;
-  });
-}
+  function Mirroring({ on, query }) {
+    on("input", () => {
+      query(".dest").textContent = query(".src").value
+    })
+  }
 
-register(Mirroring, "js-mirroring");
+  register(Mirroring, "js-mirroring")
 </script>
 <div class="js-mirroring">
   <input class="src" placeholder="Type something" />
@@ -149,8 +149,8 @@ register(Mirroring, "js-mirroring");
 
 ## Use signals when making remote effect
 
-`cell` generally recommend handling event locally, but in many cases you would
-also need to make effects to remote elements.
+`cell` recommends handling event locally, but in many cases you would also need
+to make effects to remote elements.
 
 If you need to affects the components in remote places (i.e. components not an
 ancestor or decendant of the component), we commend using `signals` for
@@ -160,18 +160,18 @@ communicating with them.
 the values are changed.
 
 ```ts
-import { Signal } from "@kt3k/cell"
+import { Context, Signal } from "@kt3k/cell"
 
 const sig = new Signal(0)
 
-const stop = sig.subscribe((v) => {
-  console.log(`The value is ${v}!`)
-})
+function Component({ el, subscribe }: Context) {
+  subscribe(sig, (v) => {
+    el.textContent = `The value is ${v}`
+  })
+}
 
 sig.update(1)
 sig.update(2)
-
-stop()
 ```
 
 ## Prior art

diff --git a/docs/dist.js b/docs/dist.js
@@ -187,11 +187,12 @@ function register(component, name) {
   const initClass = `${name}-\u{1F48A}`;
   const initializer = (el) => {
     if (!el.classList.contains(initClass)) {
+      const onUnmount = (handler) => {
+        el.addEventListener(`__unmount__:${name}`, handler, { once: true });
+      };
       el.classList.add(name);
       el.classList.add(initClass);
-      el.addEventListener(`__unmount__:${name}`, () => {
-        el.classList.remove(initClass);
-      }, { once: true });
+      onUnmount(() => el.classList.remove(initClass));
       const on = (type, selector, options, handler) => {
         if (typeof selector === "function") {
           handler = selector;
@@ -227,16 +228,19 @@ function register(component, name) {
           }
         };
         document.addEventListener(type, listener);
-        el.addEventListener(`__unmount__:${name}`, () => {
-          document.removeEventListener(type, listener);
-        }, { once: true });
+        onUnmount(() => document.removeEventListener(type, listener));
+      };
+      const subscribe = (signal, handler) => {
+        onUnmount(signal.subscribe(handler));
       };
       const context = {
         el,
         on,
         onOutside,
+        onUnmount,
         query: (s) => el.querySelector(s),
-        queryAll: (s) => el.querySelectorAll(s)
+        queryAll: (s) => el.querySelectorAll(s),
+        subscribe
       };
       const html = component(context);
       if (typeof html === "string") {
@@ -324,4 +328,4 @@ export {
   register,
   unmount
 };
-/*! Cell v0.4.4 | Copyright 2024 Yoshiya Hinosawa and Capsule contributors | MIT license */
+/*! Cell v0.6.0 | Copyright 2024 Yoshiya Hinosawa and Capsule contributors | MIT license */
diff --git a/docs/dist.min.js b/docs/dist.min.js