chizu 0.2.16 → 0.2.17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +46 -14
- package/dist/chizu.js +96 -91
- package/dist/chizu.umd.cjs +1 -1
- package/dist/controller/types.d.ts +2 -2
- package/dist/index.d.ts +2 -1
- package/dist/module/renderer/utils.d.ts +5 -0
- package/dist/types/index.d.ts +3 -3
- package/dist/utils/index.d.ts +1 -1
- package/package.json +9 -2
package/README.md
CHANGED
|
@@ -8,7 +8,9 @@ Strongly typed React framework using generators and efficiently updated views al
|
|
|
8
8
|
|
|
9
9
|
1. [Benefits](#benefits)
|
|
10
10
|
1. [Getting started](#getting-started)
|
|
11
|
-
1. [
|
|
11
|
+
1. [Error handling](#error-handling)
|
|
12
|
+
1. [Distributed events](#distributed-events)
|
|
13
|
+
1. [Module context](#module-context)
|
|
12
14
|
|
|
13
15
|
## Benefits
|
|
14
16
|
|
|
@@ -28,15 +30,15 @@ Strongly typed React framework using generators and efficiently updated views al
|
|
|
28
30
|
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.
|
|
29
31
|
|
|
30
32
|
```tsx
|
|
31
|
-
export default
|
|
33
|
+
export default <Actions<Module>>function Actions(module) {
|
|
32
34
|
return {
|
|
33
|
-
|
|
35
|
+
[Events.Name](name) {
|
|
34
36
|
return module.actions.produce((draft) => {
|
|
35
37
|
draft.name = name;
|
|
36
38
|
});
|
|
37
39
|
},
|
|
38
40
|
};
|
|
39
|
-
}
|
|
41
|
+
};
|
|
40
42
|
```
|
|
41
43
|
|
|
42
44
|
```tsx
|
|
@@ -62,7 +64,7 @@ export default function Profile(props: Props): React.ReactElement {
|
|
|
62
64
|
You can perform asynchronous operations in the action which will cause the associated view to render a second time:
|
|
63
65
|
|
|
64
66
|
```tsx
|
|
65
|
-
export default
|
|
67
|
+
export default <Actions<Module>>function Actions(module) {
|
|
66
68
|
return {
|
|
67
69
|
async *[Events.Name]() {
|
|
68
70
|
yield module.actions.produce((draft) => {
|
|
@@ -76,7 +78,7 @@ export default (function Actions(module) {
|
|
|
76
78
|
});
|
|
77
79
|
},
|
|
78
80
|
};
|
|
79
|
-
}
|
|
81
|
+
};
|
|
80
82
|
```
|
|
81
83
|
|
|
82
84
|
```tsx
|
|
@@ -100,11 +102,11 @@ export default function Profile(props: Props): React.ReactElement {
|
|
|
100
102
|
However in the above example where the name is fetched asynchronously, there is no feedback to the user – we can improve that significantly by using the `module.actions.annotate` and `module.validate` helpers:
|
|
101
103
|
|
|
102
104
|
```tsx
|
|
103
|
-
export default
|
|
105
|
+
export default <Actions<Module>>function Actions(module) {
|
|
104
106
|
return {
|
|
105
107
|
async *[Events.Name]() {
|
|
106
108
|
yield module.actions.produce((draft) => {
|
|
107
|
-
draft.name = module.actions.annotate(null
|
|
109
|
+
draft.name = module.actions.annotate(null);
|
|
108
110
|
});
|
|
109
111
|
|
|
110
112
|
const name = await fetch(/* ... */);
|
|
@@ -113,7 +115,7 @@ export default (function Actions(module) {
|
|
|
113
115
|
});
|
|
114
116
|
},
|
|
115
117
|
};
|
|
116
|
-
}
|
|
118
|
+
};
|
|
117
119
|
```
|
|
118
120
|
|
|
119
121
|
```tsx
|
|
@@ -139,7 +141,7 @@ export default function ProfileView(props: Props): React.ReactElement {
|
|
|
139
141
|
}
|
|
140
142
|
```
|
|
141
143
|
|
|
142
|
-
##
|
|
144
|
+
## Error handling
|
|
143
145
|
|
|
144
146
|
Actions can throw errors directly or in any of their associated `yield` actions – all unhandled errors are automatically caught and broadcast using the `Lifecycle.Error` action – you can render these [in a toast](https://github.com/fkhadra/react-toastify#readme) or similar UI.
|
|
145
147
|
|
|
@@ -155,7 +157,7 @@ export const enum Errors {
|
|
|
155
157
|
```
|
|
156
158
|
|
|
157
159
|
```tsx
|
|
158
|
-
export default
|
|
160
|
+
export default <Actions<Module>>function Actions(module) {
|
|
159
161
|
return {
|
|
160
162
|
*[Events.Name]() {
|
|
161
163
|
yield module.actions.produce((draft) => {
|
|
@@ -171,13 +173,13 @@ export default (function Actions(module) {
|
|
|
171
173
|
});
|
|
172
174
|
},
|
|
173
175
|
};
|
|
174
|
-
}
|
|
176
|
+
};
|
|
175
177
|
```
|
|
176
178
|
|
|
177
179
|
However showing a toast message is not always relevant, you may want a more detailed error message such as a user not found message – 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:
|
|
178
180
|
|
|
179
181
|
```tsx
|
|
180
|
-
export default
|
|
182
|
+
export default <Actions<Module>>function Actions(module) {
|
|
181
183
|
return {
|
|
182
184
|
async *[Events.Name]() {
|
|
183
185
|
yield module.actions.produce((draft) => {
|
|
@@ -197,5 +199,35 @@ export default (function Actions(module) {
|
|
|
197
199
|
});
|
|
198
200
|
},
|
|
199
201
|
};
|
|
200
|
-
}
|
|
202
|
+
};
|
|
203
|
+
```
|
|
204
|
+
|
|
205
|
+
## Distributed events
|
|
206
|
+
|
|
207
|
+
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:
|
|
208
|
+
|
|
209
|
+
```ts
|
|
210
|
+
export enum DistributedEvents {
|
|
211
|
+
SignedOut = "distributed/signed-out",
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
export type DistributedActions = [DistributedEvents.SignedOut];
|
|
215
|
+
```
|
|
216
|
+
|
|
217
|
+
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:
|
|
218
|
+
|
|
219
|
+
```ts
|
|
220
|
+
export type Actions = DistributedActions | [Events.Task, string]; // etc...
|
|
221
|
+
```
|
|
222
|
+
|
|
223
|
+
## Module context
|
|
224
|
+
|
|
225
|
+
In the eventuality that you have a component but don't want associated actions, models, etc… but want to still fire events either the closest module or a distributed event, you can use the `useModule` hook:
|
|
226
|
+
|
|
227
|
+
```ts
|
|
228
|
+
const module = useModule<Module>();
|
|
229
|
+
|
|
230
|
+
// ...
|
|
231
|
+
|
|
232
|
+
module.actions.dispatch([Event.Task, "My task that needs to be done."]);
|
|
201
233
|
```
|
package/dist/chizu.js
CHANGED
|
@@ -1,27 +1,27 @@
|
|
|
1
|
-
var
|
|
1
|
+
var $ = Object.defineProperty;
|
|
2
2
|
var D = (t) => {
|
|
3
3
|
throw TypeError(t);
|
|
4
4
|
};
|
|
5
|
-
var
|
|
6
|
-
var
|
|
7
|
-
var
|
|
8
|
-
import { jsx as
|
|
9
|
-
import * as
|
|
5
|
+
var z = (t, e, n) => e in t ? $(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
|
|
6
|
+
var w = (t, e, n) => z(t, typeof e != "symbol" ? e + "" : e, n), C = (t, e, n) => e.has(t) || D("Cannot " + n);
|
|
7
|
+
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);
|
|
8
|
+
import { jsx as N } from "react/jsx-runtime";
|
|
9
|
+
import * as c from "react";
|
|
10
10
|
import P from "eventemitter3";
|
|
11
11
|
import { Immer as q } from "immer";
|
|
12
12
|
import p from "lodash/get";
|
|
13
|
-
import
|
|
14
|
-
class
|
|
13
|
+
import M from "traverse";
|
|
14
|
+
class U {
|
|
15
15
|
constructor(e) {
|
|
16
16
|
this.value = e;
|
|
17
17
|
}
|
|
18
18
|
}
|
|
19
19
|
class I {
|
|
20
20
|
static Draft(e) {
|
|
21
|
-
return new
|
|
21
|
+
return new U(e);
|
|
22
22
|
}
|
|
23
23
|
}
|
|
24
|
-
|
|
24
|
+
w(I, "Op", {
|
|
25
25
|
Add: 1,
|
|
26
26
|
Remove: 2,
|
|
27
27
|
Update: 4,
|
|
@@ -30,8 +30,8 @@ E(I, "Op", {
|
|
|
30
30
|
});
|
|
31
31
|
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 || {});
|
|
32
32
|
function d(t, e) {
|
|
33
|
-
const n =
|
|
34
|
-
return
|
|
33
|
+
const n = c.useRef(null), r = c.useRef(null);
|
|
34
|
+
return c.useMemo(() => {
|
|
35
35
|
const s = m(e);
|
|
36
36
|
if (r.current !== s) {
|
|
37
37
|
r.current = s;
|
|
@@ -41,37 +41,37 @@ function d(t, e) {
|
|
|
41
41
|
return n.current;
|
|
42
42
|
}, e);
|
|
43
43
|
}
|
|
44
|
-
function
|
|
45
|
-
const n =
|
|
46
|
-
|
|
44
|
+
function O(t, e) {
|
|
45
|
+
const n = c.useRef(null);
|
|
46
|
+
c.useEffect(() => {
|
|
47
47
|
const r = m(e);
|
|
48
48
|
if (n.current !== r)
|
|
49
49
|
return n.current = r, t();
|
|
50
50
|
}, e);
|
|
51
51
|
}
|
|
52
|
-
const
|
|
52
|
+
const _ = c.createContext({
|
|
53
53
|
appEmitter: new P()
|
|
54
54
|
});
|
|
55
55
|
function j() {
|
|
56
|
-
return
|
|
56
|
+
return c.useContext(_);
|
|
57
57
|
}
|
|
58
|
-
function
|
|
58
|
+
function ht({ children: t }) {
|
|
59
59
|
const e = d(
|
|
60
60
|
() => ({
|
|
61
61
|
appEmitter: new P()
|
|
62
62
|
}),
|
|
63
63
|
[]
|
|
64
64
|
);
|
|
65
|
-
return /* @__PURE__ */
|
|
65
|
+
return /* @__PURE__ */ N(_.Provider, { value: e, children: t });
|
|
66
66
|
}
|
|
67
|
-
const
|
|
67
|
+
const l = {
|
|
68
68
|
immer: new q(),
|
|
69
69
|
annotations: Symbol("annotations")
|
|
70
70
|
};
|
|
71
|
-
|
|
72
|
-
class
|
|
71
|
+
l.immer.setAutoFreeze(!1);
|
|
72
|
+
class S {
|
|
73
73
|
constructor(e, n, r = null) {
|
|
74
|
-
|
|
74
|
+
w(this, "process");
|
|
75
75
|
this.value = e, this.operations = n, this.field = r, this.process = null;
|
|
76
76
|
}
|
|
77
77
|
attach(e) {
|
|
@@ -79,98 +79,98 @@ class M {
|
|
|
79
79
|
}
|
|
80
80
|
}
|
|
81
81
|
function F(t, e = []) {
|
|
82
|
-
return new
|
|
82
|
+
return new S(t, e);
|
|
83
83
|
}
|
|
84
84
|
class k {
|
|
85
85
|
constructor(e, n = e) {
|
|
86
86
|
this.stateless = e, this.stateful = n;
|
|
87
87
|
}
|
|
88
88
|
get validatable() {
|
|
89
|
-
return
|
|
89
|
+
return A(this.stateful);
|
|
90
90
|
}
|
|
91
91
|
}
|
|
92
|
-
function
|
|
92
|
+
function A(t, e = []) {
|
|
93
93
|
return new Proxy(t, {
|
|
94
94
|
get(n, r) {
|
|
95
95
|
switch (r) {
|
|
96
96
|
case "is":
|
|
97
97
|
return (s) => {
|
|
98
|
-
const o =
|
|
98
|
+
const o = x(t, e);
|
|
99
99
|
if (!o) return !1;
|
|
100
100
|
const u = new Set(
|
|
101
|
-
o.flatMap((
|
|
101
|
+
o.flatMap((a) => a.operations)
|
|
102
102
|
);
|
|
103
103
|
return !!(Array.from(u).reduce(
|
|
104
|
-
(
|
|
104
|
+
(a, f) => a | (f ?? 0),
|
|
105
105
|
0
|
|
106
106
|
) & s);
|
|
107
107
|
};
|
|
108
108
|
case "pending":
|
|
109
|
-
return () => !!
|
|
109
|
+
return () => !!x(t, e);
|
|
110
110
|
case "draft":
|
|
111
111
|
return () => {
|
|
112
|
-
const s =
|
|
112
|
+
const s = x(t, e);
|
|
113
113
|
if (!s) return p(t, e);
|
|
114
|
-
const o = s.flatMap((u) => u.operations).find((u) => u instanceof
|
|
114
|
+
const o = s.flatMap((u) => u.operations).find((u) => u instanceof U);
|
|
115
115
|
return o ? o.value : p(t, e);
|
|
116
116
|
};
|
|
117
117
|
}
|
|
118
|
-
return
|
|
118
|
+
return A(t, [...e, String(r)]);
|
|
119
119
|
}
|
|
120
120
|
});
|
|
121
121
|
}
|
|
122
|
-
function
|
|
123
|
-
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[
|
|
122
|
+
function x(t, e) {
|
|
123
|
+
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[l.annotations]) ?? [];
|
|
124
124
|
return o.length > 0 ? o : null;
|
|
125
125
|
}
|
|
126
126
|
function J(t, e, n) {
|
|
127
127
|
function r(o) {
|
|
128
|
-
return
|
|
129
|
-
if (this.key ===
|
|
128
|
+
return M(o).forEach(function() {
|
|
129
|
+
if (this.key === l.annotations) {
|
|
130
130
|
this.block();
|
|
131
131
|
return;
|
|
132
132
|
}
|
|
133
|
-
this.node instanceof
|
|
133
|
+
this.node instanceof S && this.update(this.node.value);
|
|
134
134
|
});
|
|
135
135
|
}
|
|
136
136
|
function s(o) {
|
|
137
|
-
return
|
|
138
|
-
if (this.key ===
|
|
137
|
+
return M(o).forEach(function() {
|
|
138
|
+
if (this.key === l.annotations) {
|
|
139
139
|
this.block();
|
|
140
140
|
return;
|
|
141
141
|
}
|
|
142
|
-
if (this.node instanceof
|
|
143
|
-
const u = typeof this.node.value == "object",
|
|
142
|
+
if (this.node instanceof S) {
|
|
143
|
+
const u = typeof this.node.value == "object", i = [
|
|
144
144
|
...u ? this.path : this.path.slice(0, -1),
|
|
145
|
-
|
|
146
|
-
],
|
|
145
|
+
l.annotations
|
|
146
|
+
], a = p(t.stateful, i) ?? [], f = this.node.attach(e);
|
|
147
147
|
u ? this.update(
|
|
148
148
|
{
|
|
149
149
|
...this.node.value,
|
|
150
|
-
[
|
|
150
|
+
[l.annotations]: [f, ...a]
|
|
151
151
|
},
|
|
152
152
|
!0
|
|
153
|
-
) : (this.parent && (this.parent.node[
|
|
153
|
+
) : (this.parent && (this.parent.node[l.annotations] = [f, ...a]), this.update(this.node.value, !0));
|
|
154
154
|
}
|
|
155
155
|
});
|
|
156
156
|
}
|
|
157
157
|
return new k(
|
|
158
|
-
r(
|
|
159
|
-
s(
|
|
158
|
+
r(l.immer.produce(t.stateless, n)),
|
|
159
|
+
s(l.immer.produce(t.stateful, n))
|
|
160
160
|
);
|
|
161
161
|
}
|
|
162
|
-
function
|
|
163
|
-
const n =
|
|
164
|
-
if (this.key ===
|
|
162
|
+
function R(t, e) {
|
|
163
|
+
const n = M(t.stateful).forEach(function() {
|
|
164
|
+
if (this.key === l.annotations) {
|
|
165
165
|
this.block();
|
|
166
166
|
return;
|
|
167
167
|
}
|
|
168
|
-
if (this.node && this.node[
|
|
169
|
-
const r = this.node[
|
|
168
|
+
if (this.node && this.node[l.annotations]) {
|
|
169
|
+
const r = this.node[l.annotations];
|
|
170
170
|
this.update(
|
|
171
171
|
{
|
|
172
172
|
...this.node,
|
|
173
|
-
[
|
|
173
|
+
[l.annotations]: r.filter(
|
|
174
174
|
(s) => s.process !== e
|
|
175
175
|
)
|
|
176
176
|
},
|
|
@@ -184,48 +184,48 @@ function Q(t) {
|
|
|
184
184
|
const e = j();
|
|
185
185
|
return (n, r) => async (s = Promise.withResolvers(), o) => {
|
|
186
186
|
if (typeof r != "function") return;
|
|
187
|
-
const u = Symbol("process"),
|
|
187
|
+
const u = Symbol("process"), i = r(...o);
|
|
188
188
|
try {
|
|
189
|
-
if (
|
|
190
|
-
if (typeof
|
|
191
|
-
const
|
|
192
|
-
t.model.current =
|
|
189
|
+
if (i == null) return;
|
|
190
|
+
if (typeof i == "function") {
|
|
191
|
+
const a = i(t.model.current, u);
|
|
192
|
+
t.model.current = R(a, u), t.update.rerender(), s.resolve();
|
|
193
193
|
return;
|
|
194
194
|
}
|
|
195
195
|
for (; ; ) {
|
|
196
|
-
const { value:
|
|
196
|
+
const { value: a, done: f } = await i.next();
|
|
197
197
|
if (f) {
|
|
198
|
-
const T =
|
|
199
|
-
t.model.current =
|
|
198
|
+
const T = a(t.model.current, u);
|
|
199
|
+
t.model.current = R(T, u), t.update.rerender();
|
|
200
200
|
break;
|
|
201
201
|
}
|
|
202
|
-
const H =
|
|
202
|
+
const H = a;
|
|
203
203
|
t.model.current = H(t.model.current, u), t.update.rerender(), s.resolve();
|
|
204
204
|
}
|
|
205
|
-
} catch (
|
|
206
|
-
|
|
205
|
+
} catch (a) {
|
|
206
|
+
R(t.model.current, u), t.update.rerender(), e.appEmitter.emit(h.Error, s, [a]);
|
|
207
207
|
}
|
|
208
208
|
};
|
|
209
209
|
}
|
|
210
|
-
function
|
|
210
|
+
function B(t) {
|
|
211
211
|
return t.startsWith("distributed");
|
|
212
212
|
}
|
|
213
|
-
var v,
|
|
213
|
+
var v, E;
|
|
214
214
|
class W extends Error {
|
|
215
215
|
constructor(n, r = null) {
|
|
216
216
|
super(String(r));
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
217
|
+
g(this, v);
|
|
218
|
+
g(this, E);
|
|
219
|
+
b(this, v, n), b(this, E, r);
|
|
220
220
|
}
|
|
221
221
|
get type() {
|
|
222
|
-
return
|
|
222
|
+
return y(this, v);
|
|
223
223
|
}
|
|
224
224
|
get message() {
|
|
225
|
-
return
|
|
225
|
+
return y(this, E) || "";
|
|
226
226
|
}
|
|
227
227
|
}
|
|
228
|
-
v = new WeakMap(),
|
|
228
|
+
v = new WeakMap(), E = new WeakMap();
|
|
229
229
|
function G(t) {
|
|
230
230
|
return new Promise((e) => setTimeout(e, t));
|
|
231
231
|
}
|
|
@@ -238,7 +238,7 @@ function V(t) {
|
|
|
238
238
|
function m(t) {
|
|
239
239
|
return JSON.stringify(t);
|
|
240
240
|
}
|
|
241
|
-
const
|
|
241
|
+
const mt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
242
242
|
__proto__: null,
|
|
243
243
|
hash: m,
|
|
244
244
|
isEventError: V,
|
|
@@ -299,35 +299,35 @@ function Z(t) {
|
|
|
299
299
|
return {
|
|
300
300
|
attach(s, o) {
|
|
301
301
|
const u = String(s);
|
|
302
|
-
|
|
302
|
+
B(u) ? e.appEmitter.on(u, n(s, o)) : r.on(u, n(s, o));
|
|
303
303
|
},
|
|
304
304
|
dispatch(s, o, u) {
|
|
305
|
-
const
|
|
306
|
-
|
|
305
|
+
const i = String(s);
|
|
306
|
+
B(i) ? e.appEmitter.emit(i, u, o) : r.emit(i, u, o);
|
|
307
307
|
}
|
|
308
308
|
};
|
|
309
309
|
}, []);
|
|
310
310
|
}
|
|
311
311
|
function L() {
|
|
312
|
-
const t =
|
|
312
|
+
const t = c.useRef(null);
|
|
313
313
|
return d(() => ({ customElement: t }), []);
|
|
314
314
|
}
|
|
315
315
|
function tt(t) {
|
|
316
|
-
|
|
316
|
+
O(() => {
|
|
317
317
|
t.dispatchers.dispatch(h.Derive, []);
|
|
318
|
-
}, [t.options.using.props]),
|
|
318
|
+
}, [t.options.using.props]), O(() => (t.dispatchers.dispatch(h.Mount, []), t.dispatchers.dispatch(h.Node, [
|
|
319
319
|
t.elements.customElement.current
|
|
320
320
|
]), () => t.dispatchers.dispatch(h.Unmount, [])), []);
|
|
321
321
|
}
|
|
322
322
|
function et(t) {
|
|
323
323
|
const e = d(() => t.options.using.model ?? {}, []);
|
|
324
|
-
return
|
|
324
|
+
return c.useRef(new k(e, e));
|
|
325
325
|
}
|
|
326
326
|
function nt() {
|
|
327
|
-
return
|
|
327
|
+
return c.useRef(/* @__PURE__ */ new Set());
|
|
328
328
|
}
|
|
329
329
|
function rt() {
|
|
330
|
-
const [t, e] =
|
|
330
|
+
const [t, e] = c.useReducer((n) => n + 1, 0);
|
|
331
331
|
return d(() => ({ hash: t, rerender: e }), [t]);
|
|
332
332
|
}
|
|
333
333
|
function st({
|
|
@@ -339,23 +339,28 @@ function st({
|
|
|
339
339
|
update: e,
|
|
340
340
|
model: o,
|
|
341
341
|
queue: n
|
|
342
|
-
}),
|
|
343
|
-
return Y({ options: t, dispatchers: u, actions:
|
|
342
|
+
}), i = X({ model: o, dispatchers: u });
|
|
343
|
+
return Y({ options: t, dispatchers: u, actions: i }), tt({ options: t, dispatchers: u, elements: r }), d(() => c.createElement("x-chizu", {
|
|
344
344
|
ref: r.customElement,
|
|
345
345
|
style: { display: "contents" },
|
|
346
|
-
children: t.children(
|
|
346
|
+
children: t.children(i.view)
|
|
347
347
|
}), [e.hash, m(t.using.props)]);
|
|
348
348
|
}
|
|
349
349
|
function ot(t) {
|
|
350
350
|
return st({ options: t });
|
|
351
351
|
}
|
|
352
|
-
const
|
|
352
|
+
const pt = c.memo(ot, (t, e) => m(t) === m(e)), ut = c.createContext(null);
|
|
353
|
+
function vt() {
|
|
354
|
+
const t = c.useContext(ut);
|
|
355
|
+
if (!t) throw new Error("useModule must be used within a module.");
|
|
356
|
+
return t;
|
|
357
|
+
}
|
|
353
358
|
export {
|
|
354
|
-
|
|
359
|
+
ht as BroadcastProvider,
|
|
355
360
|
W as EventError,
|
|
356
361
|
h as Lifecycle,
|
|
357
362
|
I as State,
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
363
|
+
pt as Tree,
|
|
364
|
+
vt as useModule,
|
|
365
|
+
mt as utils
|
|
361
366
|
};
|
package/dist/chizu.umd.cjs
CHANGED
|
@@ -1 +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,
|
|
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,$,w,j){"use strict";var fe=Object.defineProperty;var H=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),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 E,g;function I(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=I(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 F({children:e}){const t=m(()=>({appEmitter:new p}),[]);return u.jsx(B.Provider,{value:t,children:e})}const f={immer:new $.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 J(e,t=[]){return new M(e,t)}class R{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=x(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()=>!!x(e,t);case"draft":return()=>{const o=x(e,t);if(!o)return w(e,t);const i=o.flatMap(c=>c.operations).find(c=>c instanceof _);return i?i.value:w(e,t)}}return U(e,[...t,String(n)])}})}function x(e,t){const n=typeof w(e,t)=="object"?t:t.slice(0,-1),o=n.length===0?e:w(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 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=w(e.stateful,d)??[],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 R(n(f.immer.produce(e.stateless,s)),o(f.immer.produce(e.stateful,s)))}function P(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 R(e.stateless,s)}function W(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=P(h,c),e.update.rerender(),o.resolve();return}for(;;){const{value:h,done:b}=await d.next();if(b){const de=h(e.model.current,c);e.model.current=P(de,c),e.update.rerender();break}const le=h;e.model.current=le(e.model.current,c),e.update.rerender(),o.resolve()}}catch(h){P(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 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 A}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=S(),s=W(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 ee(){const e=l.useRef(null);return m(()=>({customElement:e}),[])}function te(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 ne(e){const t=m(()=>e.options.using.model??{},[]);return l.useRef(new R(t,t))}function re(){return l.useRef(new Set)}function se(){const[e,t]=l.useReducer(s=>s+1,0);return m(()=>({hash:e,rerender:t}),[e])}function oe({options:e}){const t=se(),s=re(),n=ee(),o=S(),i=ne({options:e}),c=L({broadcast:o,options:e,update:t,model:i,queue:s}),d=Y({model:i,dispatchers:c});return Z({options:e,dispatchers:c,actions:d}),te({options:e,dispatchers:c,elements:n}),m(()=>l.createElement("x-chizu",{ref:n.customElement,style:{display:"contents"},children:e.children(d.view)}),[t.hash,y(e.using.props)])}function ue(e){return oe({options:e})}const ie=l.memo(ue,(e,t)=>y(e)===y(t)),ce=l.createContext(null);function ae(){const e=l.useContext(ce);if(!e)throw new Error("useModule must be used within a module.");return e}r.BroadcastProvider=F,r.EventError=A,r.Lifecycle=v,r.State=q,r.Tree=ie,r.useModule=ae,r.utils=X,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})});
|
|
@@ -4,7 +4,7 @@ import { Head } from '../module/renderer/types.ts';
|
|
|
4
4
|
import { Actions, Draft, Lifecycle, ModuleDefinition, Op, Queue } from '../types/index.ts';
|
|
5
5
|
export type ControllerActions<M extends ModuleDefinition> = {
|
|
6
6
|
annotate<T>(value: T, operations?: (Op | Draft<T>)[]): T;
|
|
7
|
-
produce(ƒ: (model: M["Model"]) => void): (models: Models<M["Model"]>, process:
|
|
7
|
+
produce(ƒ: (model: M["Model"]) => void): (models: Models<M["Model"]>, process: symbol) => Models<M["Model"]>;
|
|
8
8
|
dispatch(action: M["Actions"]): Promise<void>;
|
|
9
9
|
};
|
|
10
10
|
export type ControllerArgs<M extends ModuleDefinition> = Readonly<{
|
|
@@ -16,7 +16,7 @@ export type ActionEvent<M extends ModuleDefinition> = (...args: M["Actions"][num
|
|
|
16
16
|
type ActionEvents<M extends ModuleDefinition> = {
|
|
17
17
|
[K in Head<M["Actions"]>]: (payload: Payload<M["Actions"], K>) => ActionGenerator<M>;
|
|
18
18
|
};
|
|
19
|
-
export type ActionGenerator<M extends ModuleDefinition> = void | ((models: Models<M["Model"]>, process:
|
|
19
|
+
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>;
|
|
20
20
|
export type ControllerDefinition<M extends ModuleDefinition> = (controller: ControllerArgs<M>) => ControllerInstance<M>;
|
|
21
21
|
export type ControllerInstance<M extends ModuleDefinition> = {
|
|
22
22
|
[Lifecycle.Mount]?(): ActionGenerator<M>;
|
package/dist/index.d.ts
CHANGED
|
@@ -4,7 +4,8 @@ export { Lifecycle, State } from './types/index.ts';
|
|
|
4
4
|
export * as utils from './utils/index.ts';
|
|
5
5
|
export { EventError } from './module/renderer/dispatchers/utils.ts';
|
|
6
6
|
export { default as Tree } from './module/index.tsx';
|
|
7
|
-
export { BroadcastProvider
|
|
7
|
+
export { BroadcastProvider } from './broadcast/index.tsx';
|
|
8
|
+
export { useModule } from './module/renderer/utils.ts';
|
|
8
9
|
export type * as Typed from './types/index.ts';
|
|
9
10
|
export type { Pk } from './types/index.ts';
|
|
10
11
|
export type { ViewDefinition as View };
|
package/dist/types/index.d.ts
CHANGED
|
@@ -30,7 +30,7 @@ export declare enum Lifecycle {
|
|
|
30
30
|
export type Model = Record<string, any>;
|
|
31
31
|
export type Actions = [] | [ActionName] | [ActionName, ...ActionPayload];
|
|
32
32
|
export type Props = Record<string, unknown>;
|
|
33
|
-
export type Module<M extends Model, A extends Actions = [], P extends Props =
|
|
33
|
+
export type Module<M extends Model, A extends Actions = [], P extends Props = Record<string, never>> = {
|
|
34
34
|
Model: M;
|
|
35
35
|
Actions: A;
|
|
36
36
|
Props: P;
|
|
@@ -40,7 +40,7 @@ export type ModuleDefinition = {
|
|
|
40
40
|
Actions: Actions;
|
|
41
41
|
Props: Props;
|
|
42
42
|
};
|
|
43
|
-
export type Pk<T> = undefined |
|
|
43
|
+
export type Pk<T> = undefined | symbol | T;
|
|
44
44
|
export type Queue<A extends ModuleDefinition["Actions"]> = {
|
|
45
45
|
name: Head<A>;
|
|
46
46
|
actions: {
|
|
@@ -48,6 +48,6 @@ export type Queue<A extends ModuleDefinition["Actions"]> = {
|
|
|
48
48
|
};
|
|
49
49
|
}[];
|
|
50
50
|
export type Task = PromiseWithResolvers<void>;
|
|
51
|
-
export type Process =
|
|
51
|
+
export type Process = symbol;
|
|
52
52
|
export type Op = number;
|
|
53
53
|
export {};
|
package/dist/utils/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { EventError } from '../module/renderer/dispatchers/utils.ts';
|
|
2
2
|
import { Pk } from '../types/index.ts';
|
|
3
3
|
export { default as sleep } from './sleep/index.ts';
|
|
4
|
-
export declare function pk
|
|
4
|
+
export declare function pk(): symbol;
|
|
5
5
|
export declare function pk<T>(id: Pk<T>): boolean;
|
|
6
6
|
export declare function isEventError(error: Error | EventError): error is EventError;
|
|
7
7
|
export declare function hash<T>(x: T): string;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "chizu",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.17",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./dist/chizu.js",
|
|
6
6
|
"types": "./dist/index.d.ts",
|
|
@@ -21,16 +21,19 @@
|
|
|
21
21
|
"files": [
|
|
22
22
|
"dist"
|
|
23
23
|
],
|
|
24
|
+
"scripts": {
|
|
25
|
+
"release": "make checks"
|
|
26
|
+
},
|
|
24
27
|
"devDependencies": {
|
|
25
28
|
"@babel/preset-env": "^7.27.2",
|
|
26
29
|
"@babel/preset-react": "^7.27.1",
|
|
27
30
|
"@babel/preset-typescript": "^7.27.1",
|
|
28
31
|
"@emotion/css": "^11.13.5",
|
|
32
|
+
"@eslint/js": "^9.27.0",
|
|
29
33
|
"@jest/globals": "^30.0.0-beta.3",
|
|
30
34
|
"@testing-library/dom": "^10.4.0",
|
|
31
35
|
"@testing-library/jest-dom": "^6.6.3",
|
|
32
36
|
"@testing-library/react": "^16.3.0",
|
|
33
|
-
"@trivago/prettier-plugin-sort-imports": "^5.2.2",
|
|
34
37
|
"@types/lodash": "^4.17.17",
|
|
35
38
|
"@types/react": "^19.1.6",
|
|
36
39
|
"@types/react-dom": "^19.1.5",
|
|
@@ -38,7 +41,10 @@
|
|
|
38
41
|
"commit-and-tag-version": "^12.5.1",
|
|
39
42
|
"dayjs": "^1.11.13",
|
|
40
43
|
"dexie": "^4.0.11",
|
|
44
|
+
"eslint": "^9.27.0",
|
|
45
|
+
"eslint-plugin-react": "^7.37.5",
|
|
41
46
|
"get-port-cli": "^3.0.0",
|
|
47
|
+
"globals": "^16.2.0",
|
|
42
48
|
"jest": "^29.7.0",
|
|
43
49
|
"jest-environment-jsdom": "^30.0.0-beta.3",
|
|
44
50
|
"lucide-react": "^0.511.0",
|
|
@@ -50,6 +56,7 @@
|
|
|
50
56
|
"ts-jest": "^29.3.4",
|
|
51
57
|
"ts-node": "^10.9.2",
|
|
52
58
|
"typescript": "^5.8.3",
|
|
59
|
+
"typescript-eslint": "^8.33.0",
|
|
53
60
|
"vite": "^6.3.5",
|
|
54
61
|
"vite-plugin-dts": "^4.5.4",
|
|
55
62
|
"wait-on": "^8.0.3"
|