chizu 0.2.16 → 0.2.18

package/README.md

@@ -8,7 +8,9 @@ Strongly typed React framework using generators and efficiently updated views al
 
 1. [Benefits](#benefits)
 1. [Getting started](#getting-started)
-1. [Handling errors](#handling-errors)
+1. [Error handling](#error-handling)
+1. [Distributed events](#distributed-events)
+1. [Module context](#module-context)
 
 ## Benefits
 
@@ -28,15 +30,15 @@ Strongly typed React framework using generators and efficiently updated views al
 Actions are responsible for mutating the state of the view. In the below example the `name` is dispatched from the view to the actions, the state is updated and the view is rendered with the updated value.
 
 ```tsx
-export default (function Actions(module) {
+export default <Actions<Module>>function Actions(module) {
   return {
-    async *[Events.Name](name) {
+    [Events.Name](name) {
       return module.actions.produce((draft) => {
         draft.name = name;
       });
     },
   };
-} as Actions<Module>);
+};
 ```
 
 ```tsx
@@ -62,7 +64,7 @@ export default function Profile(props: Props): React.ReactElement {
 You can perform asynchronous operations in the action which will cause the associated view to render a second time:
 
 ```tsx
-export default (function Actions(module) {
+export default <Actions<Module>>function Actions(module) {
   return {
     async *[Events.Name]() {
       yield module.actions.produce((draft) => {
@@ -76,7 +78,7 @@ export default (function Actions(module) {
       });
     },
   };
-} as Actions<Module>);
+};
 ```
 
 ```tsx
@@ -100,11 +102,11 @@ export default function Profile(props: Props): React.ReactElement {
 However in the above example where the name is fetched asynchronously, there is no feedback to the user &ndash; we can improve that significantly by using the `module.actions.annotate` and `module.validate` helpers:
 
 ```tsx
-export default (function Actions(module) {
+export default <Actions<Module>>function Actions(module) {
   return {
     async *[Events.Name]() {
       yield module.actions.produce((draft) => {
-        draft.name = module.actions.annotate(null, [State.Op.Update]);
+        draft.name = module.actions.annotate(null);
       });
 
       const name = await fetch(/* ... */);
@@ -113,7 +115,7 @@ export default (function Actions(module) {
       });
     },
   };
-} as Actions<Module>);
+};
 ```
 
 ```tsx
@@ -139,7 +141,7 @@ export default function ProfileView(props: Props): React.ReactElement {
 }
 ```
 
-## Handling Errors
+## Error handling
 
 Actions can throw errors directly or in any of their associated `yield` actions &ndash; all unhandled errors are automatically caught and broadcast using the `Lifecycle.Error` action &ndash; you can render these [in a toast](https://github.com/fkhadra/react-toastify#readme) or similar UI.
 
@@ -155,7 +157,7 @@ export const enum Errors {
 ```
 
 ```tsx
-export default (function Actions(module) {
+export default <Actions<Module>>function Actions(module) {
   return {
     *[Events.Name]() {
       yield module.actions.produce((draft) => {
@@ -171,13 +173,13 @@ export default (function Actions(module) {
       });
     },
   };
-}) as Actions<Module>;
+};
 ```
 
 However showing a toast message is not always relevant, you may want a more detailed error message such as a user not found message &ndash; although you could introduce another property for such errors in your model, you could mark the property as fallible by giving it a `Maybe` type because it then keeps everything nicely associated with the `name` property rather than creating another property:
 
 ```tsx
-export default (function Actions(module) {
+export default <Actions<Module>>function Actions(module) {
   return {
     async *[Events.Name]() {
       yield module.actions.produce((draft) => {
@@ -197,5 +199,35 @@ export default (function Actions(module) {
       });
     },
   };
-} as Actions<Module>);
+};
+```
+
+## Distributed events
+
+Actions can communicate with other mounted actions using the `DistributedActions` approach. You can configure the enum and union type in the root of your application:
+
+```ts
+export enum DistributedEvents {
+  SignedOut = "distributed/signed-out",
+}
+
+export type DistributedActions = [DistributedEvents.SignedOut];
+```
+
+Note that you must prefix the enum name with `distributed` for it to behave as a distributed event, otherwise it'll be considered a module event only. Once you have the distributed events you simply need to augment the module actions union with the `DistributedActions` and use it as you do other actions:
+
+```ts
+export type Actions = DistributedActions | [Events.Task, string]; // etc...
+```
+
+## Module context
+
+In the eventuality that you have a component but don't want associated actions, models, etc&hellip; but want to still fire events either the closest module or a distributed event, you can use the `useModule` hook:
+
+```ts
+const module = useModule<Module>();
+
+// ...
+
+module.actions.dispatch([Event.Task, "My task that needs to be done."]);
 ```

package/dist/chizu.js

@@ -3,25 +3,25 @@ var D = (t) => {
   throw TypeError(t);
 };
 var N = (t, e, n) => e in t ? z(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
-var E = (t, e, n) => N(t, typeof e != "symbol" ? e + "" : e, n), O = (t, e, n) => e.has(t) || D("Cannot " + n);
-var g = (t, e, n) => (O(t, e, "read from private field"), n ? n.call(t) : e.get(t)), b = (t, e, n) => e.has(t) ? D("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, n), w = (t, e, n, r) => (O(t, e, "write to private field"), r ? r.call(t, n) : e.set(t, n), n);
-import { jsx as $ } from "react/jsx-runtime";
-import * as l from "react";
+var w = (t, e, n) => N(t, typeof e != "symbol" ? e + "" : e, n), C = (t, e, n) => e.has(t) || D("Cannot " + n);
+var y = (t, e, n) => (C(t, e, "read from private field"), n ? n.call(t) : e.get(t)), g = (t, e, n) => e.has(t) ? D("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, n), b = (t, e, n, r) => (C(t, e, "write to private field"), r ? r.call(t, n) : e.set(t, n), n);
+import { jsx as q } from "react/jsx-runtime";
+import * as c from "react";
 import P from "eventemitter3";
-import { Immer as q } from "immer";
-import p from "lodash/get";
-import S from "traverse";
-class _ {
+import { Immer as I } from "immer";
+import v from "lodash/get";
+import M from "traverse";
+class U {
   constructor(e) {
     this.value = e;
   }
 }
-class I {
+class F {
   static Draft(e) {
-    return new _(e);
+    return new U(e);
   }
 }
-E(I, "Op", {
+w(F, "Op", {
   Add: 1,
   Remove: 2,
   Update: 4,
@@ -30,8 +30,8 @@ E(I, "Op", {
 });
 var h = /* @__PURE__ */ ((t) => (t.Mount = "lifecycle/mount", t.Node = "lifecycle/node", t.Derive = "lifecycle/derive", t.Error = "distributed/lifecycle/error", t.Unmount = "lifecycle/unmount", t))(h || {});
 function d(t, e) {
-  const n = l.useRef(null), r = l.useRef(null);
-  return l.useMemo(() => {
+  const n = c.useRef(null), r = c.useRef(null);
+  return c.useMemo(() => {
     const s = m(e);
     if (r.current !== s) {
       r.current = s;
@@ -41,136 +41,136 @@ function d(t, e) {
     return n.current;
   }, e);
 }
-function B(t, e) {
-  const n = l.useRef(null);
-  l.useEffect(() => {
+function O(t, e) {
+  const n = c.useRef(null);
+  c.useEffect(() => {
     const r = m(e);
     if (n.current !== r)
       return n.current = r, t();
   }, e);
 }
-const A = l.createContext({
+const _ = c.createContext({
   appEmitter: new P()
 });
 function j() {
-  return l.useContext(A);
+  return c.useContext(_);
 }
-function ft({ children: t }) {
+function ht({ children: t }) {
   const e = d(
     () => ({
       appEmitter: new P()
     }),
     []
   );
-  return /* @__PURE__ */ $(A.Provider, { value: e, children: t });
+  return /* @__PURE__ */ q(_.Provider, { value: e, children: t });
 }
-const a = {
-  immer: new q(),
+const l = {
+  immer: new I(),
   annotations: Symbol("annotations")
 };
-a.immer.setAutoFreeze(!1);
-class M {
+l.immer.setAutoFreeze(!1);
+class S {
   constructor(e, n, r = null) {
-    E(this, "process");
+    w(this, "process");
     this.value = e, this.operations = n, this.field = r, this.process = null;
   }
   attach(e) {
     return this.process = e, this;
   }
 }
-function F(t, e = []) {
-  return new M(t, e);
+function J(t, e = []) {
+  return new S(t, e);
 }
 class k {
   constructor(e, n = e) {
     this.stateless = e, this.stateful = n;
   }
   get validatable() {
-    return C(this.stateful);
+    return A(this.stateful);
   }
 }
-function C(t, e = []) {
+function A(t, e = []) {
   return new Proxy(t, {
     get(n, r) {
       switch (r) {
         case "is":
           return (s) => {
-            const o = R(t, e);
+            const o = x(t, e);
             if (!o) return !1;
             const u = new Set(
-              o.flatMap((i) => i.operations)
+              o.flatMap((a) => a.operations)
             );
             return !!(Array.from(u).reduce(
-              (i, f) => i | (f ?? 0),
+              (a, f) => a | (f ?? 0),
               0
             ) & s);
           };
         case "pending":
-          return () => !!R(t, e);
+          return () => !!x(t, e);
         case "draft":
           return () => {
-            const s = R(t, e);
-            if (!s) return p(t, e);
-            const o = s.flatMap((u) => u.operations).find((u) => u instanceof _);
-            return o ? o.value : p(t, e);
+            const s = x(t, e);
+            if (!s) return v(t, e);
+            const o = s.flatMap((u) => u.operations).find((u) => u instanceof U);
+            return o ? o.value : v(t, e);
           };
       }
-      return C(t, [...e, String(r)]);
+      return A(t, [...e, String(r)]);
     }
   });
 }
-function R(t, e) {
-  const r = typeof p(t, e) == "object" ? e : e.slice(0, -1), s = r.length === 0 ? t : p(t, r), o = (s == null ? void 0 : s[a.annotations]) ?? [];
+function x(t, e) {
+  const r = typeof v(t, e) == "object" ? e : e.slice(0, -1), s = r.length === 0 ? t : v(t, r), o = (s == null ? void 0 : s[l.annotations]) ?? [];
   return o.length > 0 ? o : null;
 }
-function J(t, e, n) {
+function Q(t, e, n) {
   function r(o) {
-    return S(o).forEach(function() {
-      if (this.key === a.annotations) {
+    return M(o).forEach(function() {
+      if (this.key === l.annotations) {
         this.block();
         return;
       }
-      this.node instanceof M && this.update(this.node.value);
+      this.node instanceof S && this.update(this.node.value);
     });
   }
   function s(o) {
-    return S(o).forEach(function() {
-      if (this.key === a.annotations) {
+    return M(o).forEach(function() {
+      if (this.key === l.annotations) {
         this.block();
         return;
       }
-      if (this.node instanceof M) {
-        const u = typeof this.node.value == "object", c = [
+      if (this.node instanceof S) {
+        const u = typeof this.node.value == "object", i = [
           ...u ? this.path : this.path.slice(0, -1),
-          a.annotations
-        ], i = p(t.stateful, c) ?? [], f = this.node.attach(e);
+          l.annotations
+        ], a = v(t.stateful, i) ?? [], f = this.node.attach(e);
         u ? this.update(
           {
             ...this.node.value,
-            [a.annotations]: [f, ...i]
+            [l.annotations]: [f, ...a]
           },
           !0
-        ) : (this.parent && (this.parent.node[a.annotations] = [f, ...i]), this.update(this.node.value, !0));
+        ) : (this.parent && (this.parent.node[l.annotations] = [f, ...a]), this.update(this.node.value, !0));
       }
     });
   }
   return new k(
-    r(a.immer.produce(t.stateless, n)),
-    s(a.immer.produce(t.stateful, n))
+    r(l.immer.produce(t.stateless, n)),
+    s(l.immer.produce(t.stateful, n))
   );
 }
-function x(t, e) {
-  const n = S(t.stateful).forEach(function() {
-    if (this.key === a.annotations) {
+function R(t, e) {
+  const n = M(t.stateful).forEach(function() {
+    if (this.key === l.annotations) {
       this.block();
       return;
     }
-    if (this.node && this.node[a.annotations]) {
-      const r = this.node[a.annotations];
+    if (this.node && this.node[l.annotations]) {
+      const r = this.node[l.annotations];
       this.update(
         {
           ...this.node,
-          [a.annotations]: r.filter(
+          [l.annotations]: r.filter(
             (s) => s.process !== e
           )
         },
@@ -180,72 +180,72 @@ function x(t, e) {
   });
   return new k(t.stateless, n);
 }
-function Q(t) {
+function W(t) {
   const e = j();
   return (n, r) => async (s = Promise.withResolvers(), o) => {
     if (typeof r != "function") return;
-    const u = Symbol("process"), c = r(...o);
+    const u = Symbol("process"), i = r(...o);
     try {
-      if (c == null) return;
-      if (typeof c == "function") {
-        const i = c(t.model.current, u);
-        t.model.current = x(i, u), t.update.rerender(), s.resolve();
+      if (i == null) return;
+      if (typeof i == "function") {
+        const a = i(t.model.current, u);
+        t.model.current = R(a, u), t.update.rerender(), s.resolve();
         return;
       }
       for (; ; ) {
-        const { value: i, done: f } = await c.next();
+        const { value: a, done: f } = await i.next();
         if (f) {
-          const T = i(t.model.current, u);
-          t.model.current = x(T, u), t.update.rerender();
+          const $ = a(t.model.current, u);
+          t.model.current = R($, u), t.update.rerender();
           break;
         }
-        const H = i;
-        t.model.current = H(t.model.current, u), t.update.rerender(), s.resolve();
+        const T = a;
+        t.model.current = T(t.model.current, u), t.update.rerender(), s.resolve();
       }
-    } catch (i) {
-      x(t.model.current, u), t.update.rerender(), e.appEmitter.emit(h.Error, s, [i]);
+    } catch (a) {
+      R(t.model.current, u), t.update.rerender(), e.appEmitter.emit(h.Error, s, [a]);
     }
   };
 }
-function U(t) {
+function B(t) {
   return t.startsWith("distributed");
 }
-var v, y;
-class W extends Error {
+var p, E;
+class G extends Error {
   constructor(n, r = null) {
     super(String(r));
-    b(this, v);
-    b(this, y);
-    w(this, v, n), w(this, y, r);
+    g(this, p);
+    g(this, E);
+    b(this, p, n), b(this, E, r);
   }
   get type() {
-    return g(this, v);
+    return y(this, p);
   }
   get message() {
-    return g(this, y) || "";
+    return y(this, E) || "";
   }
 }
-v = new WeakMap(), y = new WeakMap();
-function G(t) {
+p = new WeakMap(), E = new WeakMap();
+function K(t) {
   return new Promise((e) => setTimeout(e, t));
 }
-function K(t) {
+function V(t) {
   return t ? !!(t && typeof t != "symbol") : Symbol(`pk.${Date.now()}.${crypto.randomUUID()}`);
 }
-function V(t) {
-  return t instanceof W;
+function X(t) {
+  return t instanceof G;
 }
 function m(t) {
   return JSON.stringify(t);
 }
-const ht = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const mt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   hash: m,
-  isEventError: V,
-  pk: K,
-  sleep: G
+  isEventError: X,
+  pk: V,
+  sleep: K
 }, Symbol.toStringTag, { value: "Module" }));
-function X(t) {
+function Y(t) {
   return d(
     () => ({
       controller: {
@@ -255,10 +255,10 @@ function X(t) {
         queue: [],
         actions: {
           annotate(e, n) {
-            return F(e, n);
+            return J(e, n);
           },
           produce(e) {
-            return (n, r) => J(n, r, e);
+            return (n, r) => Q(n, r, e);
           },
           dispatch([e, ...n]) {
             if (e == null) return Promise.reject();
@@ -286,76 +286,88 @@ function X(t) {
     []
   );
 }
-function Y(t) {
+function Z(t) {
   return d(() => {
     const e = t.options.using.actions(t.actions.controller);
     return Object.entries(e).forEach(([r, s]) => t.dispatchers.attach(r, s)), e;
   }, []);
 }
-function Z(t) {
-  const e = j(), n = Q(t);
+function L(t) {
+  const e = j(), n = W(t);
   return d(() => {
     const r = new P();
     return {
       attach(s, o) {
         const u = String(s);
-        U(u) ? e.appEmitter.on(u, n(s, o)) : r.on(u, n(s, o));
+        B(u) ? e.appEmitter.on(u, n(s, o)) : r.on(u, n(s, o));
       },
       dispatch(s, o, u) {
-        const c = String(s);
-        U(c) ? e.appEmitter.emit(c, u, o) : r.emit(c, u, o);
+        const i = String(s);
+        B(i) ? e.appEmitter.emit(i, u, o) : r.emit(i, u, o);
       }
     };
   }, []);
 }
-function L() {
-  const t = l.useRef(null);
+function tt() {
+  const t = c.useRef(null);
   return d(() => ({ customElement: t }), []);
 }
-function tt(t) {
-  B(() => {
+function et(t) {
+  O(() => {
     t.dispatchers.dispatch(h.Derive, []);
-  }, [t.options.using.props]), B(() => (t.dispatchers.dispatch(h.Mount, []), t.dispatchers.dispatch(h.Node, [
+  }, [t.options.using.props]), O(() => (t.dispatchers.dispatch(h.Mount, []), t.dispatchers.dispatch(h.Node, [
     t.elements.customElement.current
   ]), () => t.dispatchers.dispatch(h.Unmount, [])), []);
 }
-function et(t) {
+function nt(t) {
   const e = d(() => t.options.using.model ?? {}, []);
-  return l.useRef(new k(e, e));
-}
-function nt() {
-  return l.useRef(/* @__PURE__ */ new Set());
+  return c.useRef(new k(e, e));
 }
 function rt() {
-  const [t, e] = l.useReducer((n) => n + 1, 0);
+  return c.useRef(/* @__PURE__ */ new Set());
+}
+function st() {
+  const [t, e] = c.useReducer((n) => n + 1, 0);
   return d(() => ({ hash: t, rerender: e }), [t]);
 }
-function st({
+const H = c.createContext(
+  null
+);
+function vt() {
+  const t = c.useContext(H);
+  if (!t) throw new Error("useModule must be used within a module.");
+  return t;
+}
+function ot({
   options: t
 }) {
-  const e = rt(), n = nt(), r = L(), s = j(), o = et({ options: t }), u = Z({
+  const e = st(), n = rt(), r = tt(), s = j(), o = nt({ options: t }), u = L({
     broadcast: s,
     options: t,
     update: e,
     model: o,
     queue: n
-  }), c = X({ model: o, dispatchers: u });
-  return Y({ options: t, dispatchers: u, actions: c }), tt({ options: t, dispatchers: u, elements: r }), d(() => l.createElement("x-chizu", {
-    ref: r.customElement,
-    style: { display: "contents" },
-    children: t.children(c.view)
+  }), i = Y({ model: o, dispatchers: u });
+  return Z({ options: t, dispatchers: u, actions: i }), et({ options: t, dispatchers: u, elements: r }), d(() => c.createElement(H.Provider, {
+    value: i.view,
+    // eslint-disable-next-line react/no-children-prop
+    children: c.createElement("x-chizu", {
+      ref: r.customElement,
+      style: { display: "contents" },
+      children: t.children(i.view)
+    })
   }), [e.hash, m(t.using.props)]);
 }
-function ot(t) {
-  return st({ options: t });
+function ut(t) {
+  return ot({ options: t });
 }
-const mt = l.memo(ot, (t, e) => m(t) === m(e));
+const pt = c.memo(ut, (t, e) => m(t) === m(e));
 export {
-  ft as BroadcastProvider,
-  W as EventError,
+  ht as BroadcastProvider,
+  G as EventError,
   h as Lifecycle,
-  I as State,
-  mt as Tree,
-  j as useBroadcast,
-  ht as utils
+  F as State,
+  pt as Tree,
+  vt as useModule,
+  mt as utils
 };

package/dist/chizu.umd.cjs

@@ -1 +1 @@
-(function(r,u){typeof exports=="object"&&typeof module<"u"?u(exports,require("react/jsx-runtime"),require("react"),require("eventemitter3"),require("immer"),require("lodash/get"),require("traverse")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","eventemitter3","immer","lodash/get","traverse"],u):(r=typeof globalThis<"u"?globalThis:r||self,u(r.Chizu={},r.jsxRuntime,r.React,r.EventEmitter3,r.Immer,r.get,r.Traverse))})(this,function(r,u,a,p,I,g,S){"use strict";var le=Object.defineProperty;var H=r=>{throw TypeError(r)};var de=(r,u,a)=>u in r?le(r,u,{enumerable:!0,configurable:!0,writable:!0,value:a}):r[u]=a;var x=(r,u,a)=>de(r,typeof u!="symbol"?u+"":u,a),N=(r,u,a)=>u.has(r)||H("Cannot "+a);var D=(r,u,a)=>(N(r,u,"read from private field"),a?a.call(r):u.get(r)),k=(r,u,a)=>u.has(r)?H("Cannot add the same private member more than once"):u instanceof WeakSet?u.add(r):u.set(r,a),T=(r,u,a,p)=>(N(r,u,"write to private field"),p?p.call(r,a):u.set(r,a),a);var w,E;function $(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const s in e)if(s!=="default"){const n=Object.getOwnPropertyDescriptor(e,s);Object.defineProperty(t,s,n.get?n:{enumerable:!0,get:()=>e[s]})}}return t.default=e,Object.freeze(t)}const d=$(a);class _{constructor(t){this.value=t}}class q{static Draft(t){return new _(t)}}x(q,"Op",{Add:1,Remove:2,Update:4,Move:8,Replace:16});var v=(e=>(e.Mount="lifecycle/mount",e.Node="lifecycle/node",e.Derive="lifecycle/derive",e.Error="distributed/lifecycle/error",e.Unmount="lifecycle/unmount",e))(v||{});function m(e,t){const s=d.useRef(null),n=d.useRef(null);return d.useMemo(()=>{const o=y(t);if(n.current!==o){n.current=o;const i=e();return s.current=i,i}return s.current},t)}function B(e,t){const s=d.useRef(null);d.useEffect(()=>{const n=y(t);if(s.current!==n)return s.current=n,e()},t)}const U=d.createContext({appEmitter:new p});function j(){return d.useContext(U)}function F({children:e}){const t=m(()=>({appEmitter:new p}),[]);return u.jsx(U.Provider,{value:t,children:e})}const f={immer:new I.Immer,annotations:Symbol("annotations")};f.immer.setAutoFreeze(!1);class R{constructor(t,s,n=null){x(this,"process");this.value=t,this.operations=s,this.field=n,this.process=null}attach(t){return this.process=t,this}}function J(e,t=[]){return new R(e,t)}class P{constructor(t,s=t){this.stateless=t,this.stateful=s}get validatable(){return z(this.stateful)}}function z(e,t=[]){return new Proxy(e,{get(s,n){switch(n){case"is":return o=>{const i=O(e,t);if(!i)return!1;const c=new Set(i.flatMap(h=>h.operations));return!!(Array.from(c).reduce((h,b)=>h|(b??0),0)&o)};case"pending":return()=>!!O(e,t);case"draft":return()=>{const o=O(e,t);if(!o)return g(e,t);const i=o.flatMap(c=>c.operations).find(c=>c instanceof _);return i?i.value:g(e,t)}}return z(e,[...t,String(n)])}})}function O(e,t){const n=typeof g(e,t)=="object"?t:t.slice(0,-1),o=n.length===0?e:g(e,n),i=(o==null?void 0:o[f.annotations])??[];return i.length>0?i:null}function Q(e,t,s){function n(i){return S(i).forEach(function(){if(this.key===f.annotations){this.block();return}this.node instanceof R&&this.update(this.node.value)})}function o(i){return S(i).forEach(function(){if(this.key===f.annotations){this.block();return}if(this.node instanceof R){const c=typeof this.node.value=="object",l=[...c?this.path:this.path.slice(0,-1),f.annotations],h=g(e.stateful,l)??[],b=this.node.attach(t);c?this.update({...this.node.value,[f.annotations]:[b,...h]},!0):(this.parent&&(this.parent.node[f.annotations]=[b,...h]),this.update(this.node.value,!0))}})}return new P(n(f.immer.produce(e.stateless,s)),o(f.immer.produce(e.stateful,s)))}function M(e,t){const s=S(e.stateful).forEach(function(){if(this.key===f.annotations){this.block();return}if(this.node&&this.node[f.annotations]){const n=this.node[f.annotations];this.update({...this.node,[f.annotations]:n.filter(o=>o.process!==t)},!0)}});return new P(e.stateless,s)}function W(e){const t=j();return(s,n)=>async(o=Promise.withResolvers(),i)=>{if(typeof n!="function")return;const c=Symbol("process"),l=n(...i);try{if(l==null)return;if(typeof l=="function"){const h=l(e.model.current,c);e.model.current=M(h,c),e.update.rerender(),o.resolve();return}for(;;){const{value:h,done:b}=await l.next();if(b){const ae=h(e.model.current,c);e.model.current=M(ae,c),e.update.rerender();break}const ce=h;e.model.current=ce(e.model.current,c),e.update.rerender(),o.resolve()}}catch(h){M(e.model.current,c),e.update.rerender(),t.appEmitter.emit(v.Error,o,[h])}}}function A(e){return e.startsWith("distributed")}class C extends Error{constructor(s,n=null){super(String(n));k(this,w);k(this,E);T(this,w,s),T(this,E,n)}get type(){return D(this,w)}get message(){return D(this,E)||""}}w=new WeakMap,E=new WeakMap;function G(e){return new Promise(t=>setTimeout(t,e))}function K(e){return e?!!(e&&typeof e!="symbol"):Symbol(`pk.${Date.now()}.${crypto.randomUUID()}`)}function V(e){return e instanceof C}function y(e){return JSON.stringify(e)}const X=Object.freeze(Object.defineProperty({__proto__:null,hash:y,isEventError:V,pk:K,sleep:G},Symbol.toStringTag,{value:"Module"}));function Y(e){return m(()=>({controller:{get model(){return e.model.current.stateful},queue:[],actions:{annotate(t,s){return J(t,s)},produce(t){return(s,n)=>Q(s,n,t)},dispatch([t,...s]){if(t==null)return Promise.reject();const n=Promise.withResolvers();return e.dispatchers.dispatch(t,s,n),n.promise}}},view:{get model(){return e.model.current.stateless},get validate(){return e.model.current.validatable},actions:{dispatch([t,...s]){if(t==null)return Promise.reject();const n=Promise.withResolvers();return e.dispatchers.dispatch(t,s,n),n.promise}}}}),[])}function Z(e){return m(()=>{const t=e.options.using.actions(e.actions.controller);return Object.entries(t).forEach(([n,o])=>e.dispatchers.attach(n,o)),t},[])}function L(e){const t=j(),s=W(e);return m(()=>{const n=new p;return{attach(o,i){const c=String(o);A(c)?t.appEmitter.on(c,s(o,i)):n.on(c,s(o,i))},dispatch(o,i,c){const l=String(o);A(l)?t.appEmitter.emit(l,c,i):n.emit(l,c,i)}}},[])}function ee(){const e=d.useRef(null);return m(()=>({customElement:e}),[])}function te(e){B(()=>{e.dispatchers.dispatch(v.Derive,[])},[e.options.using.props]),B(()=>(e.dispatchers.dispatch(v.Mount,[]),e.dispatchers.dispatch(v.Node,[e.elements.customElement.current]),()=>e.dispatchers.dispatch(v.Unmount,[])),[])}function ne(e){const t=m(()=>e.options.using.model??{},[]);return d.useRef(new P(t,t))}function re(){return d.useRef(new Set)}function se(){const[e,t]=d.useReducer(s=>s+1,0);return m(()=>({hash:e,rerender:t}),[e])}function oe({options:e}){const t=se(),s=re(),n=ee(),o=j(),i=ne({options:e}),c=L({broadcast:o,options:e,update:t,model:i,queue:s}),l=Y({model:i,dispatchers:c});return Z({options:e,dispatchers:c,actions:l}),te({options:e,dispatchers:c,elements:n}),m(()=>d.createElement("x-chizu",{ref:n.customElement,style:{display:"contents"},children:e.children(l.view)}),[t.hash,y(e.using.props)])}function ue(e){return oe({options:e})}const ie=d.memo(ue,(e,t)=>y(e)===y(t));r.BroadcastProvider=F,r.EventError=C,r.Lifecycle=v,r.State=q,r.Tree=ie,r.useBroadcast=j,r.utils=X,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})});
+(function(r,u){typeof exports=="object"&&typeof module<"u"?u(exports,require("react/jsx-runtime"),require("react"),require("eventemitter3"),require("immer"),require("lodash/get"),require("traverse")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","eventemitter3","immer","lodash/get","traverse"],u):(r=typeof globalThis<"u"?globalThis:r||self,u(r.Chizu={},r.jsxRuntime,r.React,r.EventEmitter3,r.Immer,r.get,r.Traverse))})(this,function(r,u,a,p,I,b,j){"use strict";var fe=Object.defineProperty;var N=r=>{throw TypeError(r)};var he=(r,u,a)=>u in r?fe(r,u,{enumerable:!0,configurable:!0,writable:!0,value:a}):r[u]=a;var O=(r,u,a)=>he(r,typeof u!="symbol"?u+"":u,a),$=(r,u,a)=>u.has(r)||N("Cannot "+a);var D=(r,u,a)=>($(r,u,"read from private field"),a?a.call(r):u.get(r)),k=(r,u,a)=>u.has(r)?N("Cannot add the same private member more than once"):u instanceof WeakSet?u.add(r):u.set(r,a),T=(r,u,a,p)=>($(r,u,"write to private field"),p?p.call(r,a):u.set(r,a),a);var E,g;function F(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const s in e)if(s!=="default"){const n=Object.getOwnPropertyDescriptor(e,s);Object.defineProperty(t,s,n.get?n:{enumerable:!0,get:()=>e[s]})}}return t.default=e,Object.freeze(t)}const l=F(a);class _{constructor(t){this.value=t}}class q{static Draft(t){return new _(t)}}O(q,"Op",{Add:1,Remove:2,Update:4,Move:8,Replace:16});var v=(e=>(e.Mount="lifecycle/mount",e.Node="lifecycle/node",e.Derive="lifecycle/derive",e.Error="distributed/lifecycle/error",e.Unmount="lifecycle/unmount",e))(v||{});function m(e,t){const s=l.useRef(null),n=l.useRef(null);return l.useMemo(()=>{const o=y(t);if(n.current!==o){n.current=o;const i=e();return s.current=i,i}return s.current},t)}function C(e,t){const s=l.useRef(null);l.useEffect(()=>{const n=y(t);if(s.current!==n)return s.current=n,e()},t)}const B=l.createContext({appEmitter:new p});function S(){return l.useContext(B)}function J({children:e}){const t=m(()=>({appEmitter:new p}),[]);return u.jsx(B.Provider,{value:t,children:e})}const f={immer:new I.Immer,annotations:Symbol("annotations")};f.immer.setAutoFreeze(!1);class M{constructor(t,s,n=null){O(this,"process");this.value=t,this.operations=s,this.field=n,this.process=null}attach(t){return this.process=t,this}}function Q(e,t=[]){return new M(e,t)}class P{constructor(t,s=t){this.stateless=t,this.stateful=s}get validatable(){return U(this.stateful)}}function U(e,t=[]){return new Proxy(e,{get(s,n){switch(n){case"is":return o=>{const i=R(e,t);if(!i)return!1;const c=new Set(i.flatMap(h=>h.operations));return!!(Array.from(c).reduce((h,w)=>h|(w??0),0)&o)};case"pending":return()=>!!R(e,t);case"draft":return()=>{const o=R(e,t);if(!o)return b(e,t);const i=o.flatMap(c=>c.operations).find(c=>c instanceof _);return i?i.value:b(e,t)}}return U(e,[...t,String(n)])}})}function R(e,t){const n=typeof b(e,t)=="object"?t:t.slice(0,-1),o=n.length===0?e:b(e,n),i=(o==null?void 0:o[f.annotations])??[];return i.length>0?i:null}function W(e,t,s){function n(i){return j(i).forEach(function(){if(this.key===f.annotations){this.block();return}this.node instanceof M&&this.update(this.node.value)})}function o(i){return j(i).forEach(function(){if(this.key===f.annotations){this.block();return}if(this.node instanceof M){const c=typeof this.node.value=="object",d=[...c?this.path:this.path.slice(0,-1),f.annotations],h=b(e.stateful,d)??[],w=this.node.attach(t);c?this.update({...this.node.value,[f.annotations]:[w,...h]},!0):(this.parent&&(this.parent.node[f.annotations]=[w,...h]),this.update(this.node.value,!0))}})}return new P(n(f.immer.produce(e.stateless,s)),o(f.immer.produce(e.stateful,s)))}function x(e,t){const s=j(e.stateful).forEach(function(){if(this.key===f.annotations){this.block();return}if(this.node&&this.node[f.annotations]){const n=this.node[f.annotations];this.update({...this.node,[f.annotations]:n.filter(o=>o.process!==t)},!0)}});return new P(e.stateless,s)}function G(e){const t=S();return(s,n)=>async(o=Promise.withResolvers(),i)=>{if(typeof n!="function")return;const c=Symbol("process"),d=n(...i);try{if(d==null)return;if(typeof d=="function"){const h=d(e.model.current,c);e.model.current=x(h,c),e.update.rerender(),o.resolve();return}for(;;){const{value:h,done:w}=await d.next();if(w){const de=h(e.model.current,c);e.model.current=x(de,c),e.update.rerender();break}const le=h;e.model.current=le(e.model.current,c),e.update.rerender(),o.resolve()}}catch(h){x(e.model.current,c),e.update.rerender(),t.appEmitter.emit(v.Error,o,[h])}}}function z(e){return e.startsWith("distributed")}class A extends Error{constructor(s,n=null){super(String(n));k(this,E);k(this,g);T(this,E,s),T(this,g,n)}get type(){return D(this,E)}get message(){return D(this,g)||""}}E=new WeakMap,g=new WeakMap;function K(e){return new Promise(t=>setTimeout(t,e))}function V(e){return e?!!(e&&typeof e!="symbol"):Symbol(`pk.${Date.now()}.${crypto.randomUUID()}`)}function X(e){return e instanceof A}function y(e){return JSON.stringify(e)}const Y=Object.freeze(Object.defineProperty({__proto__:null,hash:y,isEventError:X,pk:V,sleep:K},Symbol.toStringTag,{value:"Module"}));function Z(e){return m(()=>({controller:{get model(){return e.model.current.stateful},queue:[],actions:{annotate(t,s){return Q(t,s)},produce(t){return(s,n)=>W(s,n,t)},dispatch([t,...s]){if(t==null)return Promise.reject();const n=Promise.withResolvers();return e.dispatchers.dispatch(t,s,n),n.promise}}},view:{get model(){return e.model.current.stateless},get validate(){return e.model.current.validatable},actions:{dispatch([t,...s]){if(t==null)return Promise.reject();const n=Promise.withResolvers();return e.dispatchers.dispatch(t,s,n),n.promise}}}}),[])}function L(e){return m(()=>{const t=e.options.using.actions(e.actions.controller);return Object.entries(t).forEach(([n,o])=>e.dispatchers.attach(n,o)),t},[])}function ee(e){const t=S(),s=G(e);return m(()=>{const n=new p;return{attach(o,i){const c=String(o);z(c)?t.appEmitter.on(c,s(o,i)):n.on(c,s(o,i))},dispatch(o,i,c){const d=String(o);z(d)?t.appEmitter.emit(d,c,i):n.emit(d,c,i)}}},[])}function te(){const e=l.useRef(null);return m(()=>({customElement:e}),[])}function ne(e){C(()=>{e.dispatchers.dispatch(v.Derive,[])},[e.options.using.props]),C(()=>(e.dispatchers.dispatch(v.Mount,[]),e.dispatchers.dispatch(v.Node,[e.elements.customElement.current]),()=>e.dispatchers.dispatch(v.Unmount,[])),[])}function re(e){const t=m(()=>e.options.using.model??{},[]);return l.useRef(new P(t,t))}function se(){return l.useRef(new Set)}function oe(){const[e,t]=l.useReducer(s=>s+1,0);return m(()=>({hash:e,rerender:t}),[e])}const H=l.createContext(null);function ue(){const e=l.useContext(H);if(!e)throw new Error("useModule must be used within a module.");return e}function ie({options:e}){const t=oe(),s=se(),n=te(),o=S(),i=re({options:e}),c=ee({broadcast:o,options:e,update:t,model:i,queue:s}),d=Z({model:i,dispatchers:c});return L({options:e,dispatchers:c,actions:d}),ne({options:e,dispatchers:c,elements:n}),m(()=>l.createElement(H.Provider,{value:d.view,children:l.createElement("x-chizu",{ref:n.customElement,style:{display:"contents"},children:e.children(d.view)})}),[t.hash,y(e.using.props)])}function ce(e){return ie({options:e})}const ae=l.memo(ce,(e,t)=>y(e)===y(t));r.BroadcastProvider=J,r.EventError=A,r.Lifecycle=v,r.State=q,r.Tree=ae,r.useModule=ue,r.utils=Y,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})});

package/dist/controller/types.d.ts

@@ -4,7 +4,7 @@ import { Head } from '../module/renderer/types.ts';
 import { Actions, Draft, Lifecycle, ModuleDefinition, Op, Queue } from '../types/index.ts';
 export type ControllerActions<M extends ModuleDefinition> = {
     annotate<T>(value: T, operations?: (Op | Draft<T>)[]): T;
-    produce(ƒ: (model: M["Model"]) => void): (models: Models<M["Model"]>, process: Symbol) => Models<M["Model"]>;
+    produce(ƒ: (model: M["Model"]) => void): (models: Models<M["Model"]>, process: symbol) => Models<M["Model"]>;
     dispatch(action: M["Actions"]): Promise<void>;
 };
 export type ControllerArgs<M extends ModuleDefinition> = Readonly<{
@@ -16,7 +16,7 @@ export type ActionEvent<M extends ModuleDefinition> = (...args: M["Actions"][num
 type ActionEvents<M extends ModuleDefinition> = {
     [K in Head<M["Actions"]>]: (payload: Payload<M["Actions"], K>) => ActionGenerator<M>;
 };
-export type ActionGenerator<M extends ModuleDefinition> = void | ((models: Models<M["Model"]>, process: Symbol) => Models<M["Model"]>) | AsyncGenerator<(models: Models<M["Model"]>, process: Symbol) => Models<M["Model"]>, (models: Models<M["Model"]>, process: Symbol) => Models<M["Model"]>, unknown>;
+export type ActionGenerator<M extends ModuleDefinition> = void | ((models: Models<M["Model"]>, process: symbol) => Models<M["Model"]>) | AsyncGenerator<(models: Models<M["Model"]>, process: symbol) => Models<M["Model"]>, (models: Models<M["Model"]>, process: symbol) => Models<M["Model"]>, unknown>;
 export type ControllerDefinition<M extends ModuleDefinition> = (controller: ControllerArgs<M>) => ControllerInstance<M>;
 export type ControllerInstance<M extends ModuleDefinition> = {
     [Lifecycle.Mount]?(): ActionGenerator<M>;

package/dist/index.d.ts

@@ -4,7 +4,8 @@ export { Lifecycle, State } from './types/index.ts';
 export * as utils from './utils/index.ts';
 export { EventError } from './module/renderer/dispatchers/utils.ts';
 export { default as Tree } from './module/index.tsx';
-export { BroadcastProvider, useBroadcast } from './broadcast/index.tsx';
+export { BroadcastProvider } from './broadcast/index.tsx';
+export { useModule } from './module/renderer/utils.ts';
 export type * as Typed from './types/index.ts';
 export type { Pk } from './types/index.ts';
 export type { ViewDefinition as View };

package/dist/module/renderer/index.d.ts

@@ -1,4 +1,4 @@
 import { ModuleDefinition } from '../../types/index.ts';
 import { Props } from './types.ts';
-import { ReactElement } from 'react';
-export default function renderer<M extends ModuleDefinition>({ options, }: Props<M>): ReactElement;
+import * as React from "react";
+export default function renderer<M extends ModuleDefinition>({ options, }: Props<M>): React.ReactNode;

package/dist/module/renderer/utils.d.ts

@@ -0,0 +1,5 @@
+import { ModuleDefinition } from '../../types';
+import { ViewArgs } from '../../view/types';
+import * as React from "react";
+export declare const Context: React.Context<ViewArgs<ModuleDefinition> | null>;
+export declare function useModule<M extends ModuleDefinition>(): ViewArgs<M>;

package/dist/types/index.d.ts

@@ -30,7 +30,7 @@ export declare enum Lifecycle {
 export type Model = Record<string, any>;
 export type Actions = [] | [ActionName] | [ActionName, ...ActionPayload];
 export type Props = Record<string, unknown>;
-export type Module<M extends Model, A extends Actions = [], P extends Props = {}> = {
+export type Module<M extends Model, A extends Actions = [], P extends Props = Record<string, never>> = {
     Model: M;
     Actions: A;
     Props: P;
@@ -40,7 +40,7 @@ export type ModuleDefinition = {
     Actions: Actions;
     Props: Props;
 };
-export type Pk<T> = undefined | Symbol | T;
+export type Pk<T> = undefined | symbol | T;
 export type Queue<A extends ModuleDefinition["Actions"]> = {
     name: Head<A>;
     actions: {
@@ -48,6 +48,6 @@ export type Queue<A extends ModuleDefinition["Actions"]> = {
     };
 }[];
 export type Task = PromiseWithResolvers<void>;
-export type Process = Symbol;
+export type Process = symbol;
 export type Op = number;
 export {};

package/dist/utils/index.d.ts

@@ -1,7 +1,7 @@
 import { EventError } from '../module/renderer/dispatchers/utils.ts';
 import { Pk } from '../types/index.ts';
 export { default as sleep } from './sleep/index.ts';
-export declare function pk<T>(): Symbol;
+export declare function pk(): symbol;
 export declare function pk<T>(id: Pk<T>): boolean;
 export declare function isEventError(error: Error | EventError): error is EventError;
 export declare function hash<T>(x: T): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chizu",
-  "version": "0.2.16",
+  "version": "0.2.18",
   "type": "module",
   "main": "./dist/chizu.js",
   "types": "./dist/index.d.ts",
@@ -21,16 +21,19 @@
   "files": [
     "dist"
   ],
+  "scripts": {
+    "release": "make checks"
+  },
   "devDependencies": {
     "@babel/preset-env": "^7.27.2",
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
     "@emotion/css": "^11.13.5",
+    "@eslint/js": "^9.27.0",
     "@jest/globals": "^30.0.0-beta.3",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
-    "@trivago/prettier-plugin-sort-imports": "^5.2.2",
     "@types/lodash": "^4.17.17",
     "@types/react": "^19.1.6",
     "@types/react-dom": "^19.1.5",
@@ -38,7 +41,10 @@
     "commit-and-tag-version": "^12.5.1",
     "dayjs": "^1.11.13",
     "dexie": "^4.0.11",
+    "eslint": "^9.27.0",
+    "eslint-plugin-react": "^7.37.5",
     "get-port-cli": "^3.0.0",
+    "globals": "^16.2.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^30.0.0-beta.3",
     "lucide-react": "^0.511.0",
@@ -50,6 +56,7 @@
     "ts-jest": "^29.3.4",
     "ts-node": "^10.9.2",
     "typescript": "^5.8.3",
+    "typescript-eslint": "^8.33.0",
     "vite": "^6.3.5",
     "vite-plugin-dts": "^4.5.4",
     "wait-on": "^8.0.3"