rask-ui 0.28.4 → 0.29.0
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 +1 -1
- package/dist/component.d.ts +4 -3
- package/dist/component.d.ts.map +1 -1
- package/dist/component.js +37 -57
- package/dist/index.d.ts +0 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +0 -1
- package/dist/render.js +2 -2
- package/dist/scheduler.d.ts +2 -3
- package/dist/scheduler.d.ts.map +1 -1
- package/dist/scheduler.js +31 -104
- package/dist/useAsync.d.ts.map +1 -1
- package/dist/useAsync.js +12 -11
- package/dist/useDerived.d.ts +1 -1
- package/dist/useDerived.d.ts.map +1 -1
- package/dist/useDerived.js +9 -63
- package/dist/useEffect.d.ts.map +1 -1
- package/dist/useEffect.js +4 -19
- package/dist/useLookup.d.ts.map +1 -1
- package/dist/useLookup.js +9 -14
- package/dist/useRef.d.ts.map +1 -1
- package/dist/useRef.js +4 -8
- package/dist/useRouter.d.ts.map +1 -1
- package/dist/useRouter.js +4 -8
- package/dist/useState.d.ts +0 -1
- package/dist/useState.d.ts.map +1 -1
- package/dist/useState.js +2 -102
- package/dist/useSuspend.d.ts.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
<img src="https://raw.githubusercontent.com/christianalfoni/rask-ui/main/logo.png" alt="Logo" width="200">
|
|
5
5
|
</p>
|
|
6
6
|
|
|
7
|
-
A lightweight reactive component library
|
|
7
|
+
A lightweight reactive component library built on battle-tested technologies: **Inferno's** highly optimized reconciler and **MobX's** proven reactive state management.
|
|
8
8
|
|
|
9
9
|
**[Visit rask-ui.io for full documentation](https://rask-ui.io)**
|
|
10
10
|
|
package/dist/component.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { VNode, Component, Props, InfernoNode } from "inferno";
|
|
2
|
-
import {
|
|
2
|
+
import { IObservableValue } from "mobx";
|
|
3
3
|
export declare function getCurrentComponent(): RaskComponent<any> | undefined;
|
|
4
4
|
export declare function useMountEffect(cb: () => void): void;
|
|
5
5
|
export declare function useCleanup(cb: () => void): void;
|
|
@@ -7,12 +7,13 @@ export type RaskStatelessFunctionComponent<P extends Props<any>> = (() => VNode)
|
|
|
7
7
|
export type RaskStatefulFunctionComponent<P extends Props<any>> = (() => () => VNode) | ((props: P) => () => VNode);
|
|
8
8
|
export declare class RaskComponent<P extends Props<any>> extends Component<P> {
|
|
9
9
|
renderFn: RaskStatelessFunctionComponent<P>;
|
|
10
|
-
propsSignals: Record<string,
|
|
10
|
+
propsSignals: Record<string, IObservableValue<any>>;
|
|
11
11
|
private reactiveProps;
|
|
12
12
|
private isNotified;
|
|
13
13
|
private isReconciling;
|
|
14
14
|
private hasChangedComponent;
|
|
15
|
-
|
|
15
|
+
private createReaction;
|
|
16
|
+
private reaction;
|
|
16
17
|
isRendering: boolean;
|
|
17
18
|
effects: Array<{
|
|
18
19
|
isDirty: boolean;
|
package/dist/component.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../src/component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../src/component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE/D,OAAO,EAAE,gBAAgB,EAAwB,MAAM,MAAM,CAAC;AAM9D,wBAAgB,mBAAmB,mCAElC;AAED,wBAAgB,cAAc,CAAC,EAAE,EAAE,MAAM,IAAI,QAM5C;AAED,wBAAgB,UAAU,CAAC,EAAE,EAAE,MAAM,IAAI,QAMxC;AAED,MAAM,MAAM,8BAA8B,CAAC,CAAC,SAAS,KAAK,CAAC,GAAG,CAAC,IAC3D,CAAC,MAAM,KAAK,CAAC,GACb,CAAC,CAAC,KAAK,EAAE,CAAC,KAAK,KAAK,CAAC,CAAC;AAE1B,MAAM,MAAM,6BAA6B,CAAC,CAAC,SAAS,KAAK,CAAC,GAAG,CAAC,IAC1D,CAAC,MAAM,MAAM,KAAK,CAAC,GACnB,CAAC,CAAC,KAAK,EAAE,CAAC,KAAK,MAAM,KAAK,CAAC,CAAC;AAEhC,qBAAa,aAAa,CAAC,CAAC,SAAS,KAAK,CAAC,GAAG,CAAC,CAAE,SAAQ,SAAS,CAAC,CAAC,CAAC;IAC3D,QAAQ,EAAE,8BAA8B,CAAC,CAAC,CAAC,CAAC;IACpD,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAM;IACzD,OAAO,CAAC,aAAa,CAAc;IAwBnC,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,aAAa,CAAS;IAC9B,OAAO,CAAC,mBAAmB,CAAQ;IACnC,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,QAAQ,CAAmC;IAEnD,WAAW,UAAS;IACpB,OAAO,EAAE,KAAK,CAAC;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,GAAG,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC,CAAM;IAC3D,QAAQ,gBAAa;IACrB,UAAU,CAAC,OAAO,EAAE,OAAO;IAS3B,eAAe;IAMf,QAAQ,EAAE,KAAK,CAAC,MAAM,IAAI,CAAC,CAAM;IACjC,UAAU,EAAE,KAAK,CAAC,MAAM,IAAI,CAAC,CAAM;IAEnC,iBAAiB,IAAI,IAAI;IAGzB,oBAAoB,IAAI,IAAI;IAI5B,yBAAyB,CACvB,SAAS,EAAE,QAAQ,CAAC;QAAE,QAAQ,CAAC,EAAE,WAAW,CAAA;KAAE,GAAG,CAAC,CAAC,GAClD,IAAI;IAQP,qBAAqB,IAAI,OAAO;IAMhC,MAAM;CAoEP"}
|
package/dist/component.js
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { Component } from "inferno";
|
|
2
|
-
import { getCurrentObserver, Observer, Signal } from "./observation";
|
|
3
|
-
import { syncBatch } from "./batch";
|
|
4
2
|
import { CatchErrorContext } from "./useCatchError";
|
|
3
|
+
import { Reaction, observable } from "mobx";
|
|
4
|
+
import { transaction } from "./scheduler";
|
|
5
|
+
import { assignState } from "./useState";
|
|
5
6
|
let currentComponent;
|
|
6
7
|
export function getCurrentComponent() {
|
|
7
8
|
return currentComponent;
|
|
@@ -46,13 +47,16 @@ export class RaskComponent extends Component {
|
|
|
46
47
|
isNotified = false;
|
|
47
48
|
isReconciling = false;
|
|
48
49
|
hasChangedComponent = true;
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
this.
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
50
|
+
createReaction() {
|
|
51
|
+
return new Reaction("ComponentRender", () => {
|
|
52
|
+
if (this.isReconciling) {
|
|
53
|
+
this.isNotified = true;
|
|
54
|
+
return;
|
|
55
|
+
}
|
|
56
|
+
this.forceUpdate();
|
|
57
|
+
});
|
|
58
|
+
}
|
|
59
|
+
reaction = this.createReaction();
|
|
56
60
|
// Flag to prevent props from tracking in render scope (We use props reconciliation)
|
|
57
61
|
isRendering = false;
|
|
58
62
|
effects = [];
|
|
@@ -80,17 +84,10 @@ export class RaskComponent extends Component {
|
|
|
80
84
|
}
|
|
81
85
|
componentWillReceiveProps(nextProps) {
|
|
82
86
|
this.isReconciling = true;
|
|
83
|
-
const prevProps = this.props;
|
|
84
|
-
this.props = nextProps;
|
|
85
87
|
this.hasChangedComponent =
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
if (prevProps[prop] === nextProps[prop]) {
|
|
90
|
-
continue;
|
|
91
|
-
}
|
|
92
|
-
this.propsSignals[prop].notify();
|
|
93
|
-
}
|
|
88
|
+
nextProps.__component !== this.props.__component;
|
|
89
|
+
transaction(() => {
|
|
90
|
+
assignState(this.reactiveProps, nextProps);
|
|
94
91
|
});
|
|
95
92
|
}
|
|
96
93
|
shouldComponentUpdate() {
|
|
@@ -101,17 +98,17 @@ export class RaskComponent extends Component {
|
|
|
101
98
|
}
|
|
102
99
|
render() {
|
|
103
100
|
currentComponent = this;
|
|
104
|
-
const stopObserving = this.observer.observe();
|
|
105
101
|
try {
|
|
106
102
|
if (this.hasChangedComponent) {
|
|
107
103
|
this.hasChangedComponent = false;
|
|
108
104
|
this.componentWillUnmount();
|
|
109
|
-
this.reactiveProps =
|
|
105
|
+
this.reactiveProps = observable(this.props);
|
|
110
106
|
const component = this.props.__component;
|
|
111
107
|
const renderFn = component(this.reactiveProps);
|
|
112
108
|
if (typeof renderFn === "function") {
|
|
113
109
|
// Since we ran a setup function we need to clear any signals accessed
|
|
114
|
-
this.
|
|
110
|
+
this.reaction.dispose();
|
|
111
|
+
this.reaction = this.createReaction();
|
|
115
112
|
this.renderFn = renderFn;
|
|
116
113
|
}
|
|
117
114
|
else {
|
|
@@ -121,7 +118,24 @@ export class RaskComponent extends Component {
|
|
|
121
118
|
}
|
|
122
119
|
let result = null;
|
|
123
120
|
this.isRendering = true;
|
|
124
|
-
|
|
121
|
+
this.reaction.track(() => {
|
|
122
|
+
try {
|
|
123
|
+
result = this.renderFn(this.reactiveProps);
|
|
124
|
+
}
|
|
125
|
+
catch (error) {
|
|
126
|
+
try {
|
|
127
|
+
const notifyError = CatchErrorContext.use();
|
|
128
|
+
if (typeof notifyError !== "function") {
|
|
129
|
+
throw error;
|
|
130
|
+
}
|
|
131
|
+
notifyError(error);
|
|
132
|
+
return null;
|
|
133
|
+
}
|
|
134
|
+
catch {
|
|
135
|
+
throw error;
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
});
|
|
125
139
|
this.isRendering = false;
|
|
126
140
|
return result;
|
|
127
141
|
}
|
|
@@ -139,41 +153,7 @@ export class RaskComponent extends Component {
|
|
|
139
153
|
}
|
|
140
154
|
}
|
|
141
155
|
finally {
|
|
142
|
-
stopObserving();
|
|
143
156
|
currentComponent = undefined;
|
|
144
157
|
}
|
|
145
158
|
}
|
|
146
159
|
}
|
|
147
|
-
function createReactiveProps(comp) {
|
|
148
|
-
const props = new Proxy({}, {
|
|
149
|
-
ownKeys() {
|
|
150
|
-
return Object.getOwnPropertyNames(comp.props);
|
|
151
|
-
},
|
|
152
|
-
getOwnPropertyDescriptor(_, prop) {
|
|
153
|
-
return {
|
|
154
|
-
configurable: true,
|
|
155
|
-
enumerable: true,
|
|
156
|
-
value: comp.props[prop],
|
|
157
|
-
writable: false,
|
|
158
|
-
};
|
|
159
|
-
},
|
|
160
|
-
get(_, prop) {
|
|
161
|
-
// Skip known non-reactive props
|
|
162
|
-
if (prop === "key" || prop === "ref") {
|
|
163
|
-
return;
|
|
164
|
-
}
|
|
165
|
-
const observer = getCurrentObserver();
|
|
166
|
-
if (observer) {
|
|
167
|
-
// Lazy create signal only when accessed in reactive context
|
|
168
|
-
let signal = comp.propsSignals[prop];
|
|
169
|
-
if (!signal) {
|
|
170
|
-
signal = new Signal();
|
|
171
|
-
comp.propsSignals[prop] = signal;
|
|
172
|
-
}
|
|
173
|
-
observer.subscribeSignal(signal);
|
|
174
|
-
}
|
|
175
|
-
return comp.props[prop];
|
|
176
|
-
},
|
|
177
|
-
});
|
|
178
|
-
return props;
|
|
179
|
-
}
|
package/dist/index.d.ts
CHANGED
|
@@ -11,7 +11,6 @@ export { useRef, assignRef, Ref } from "./useRef";
|
|
|
11
11
|
export { useView } from "./useView";
|
|
12
12
|
export { useEffect } from "./useEffect";
|
|
13
13
|
export { useDerived, Derived } from "./useDerived";
|
|
14
|
-
export { syncBatch } from "./batch";
|
|
15
14
|
export { inspect } from "./inspect";
|
|
16
15
|
export { Router, useRouter } from "./useRouter";
|
|
17
16
|
export { useLookup } from "./useLookup";
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,SAAS,CAAC;AAEjB,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,SAAS,CAAC;AAEjB,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -12,7 +12,6 @@ export { useRef, assignRef } from "./useRef";
|
|
|
12
12
|
export { useView } from "./useView";
|
|
13
13
|
export { useEffect } from "./useEffect";
|
|
14
14
|
export { useDerived } from "./useDerived";
|
|
15
|
-
export { syncBatch } from "./batch";
|
|
16
15
|
export { inspect } from "./inspect";
|
|
17
16
|
export { useRouter } from "./useRouter";
|
|
18
17
|
export { useLookup } from "./useLookup";
|
package/dist/render.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { render as infernoRender } from "inferno";
|
|
2
|
-
import {
|
|
2
|
+
import { transaction } from "./scheduler";
|
|
3
3
|
/**
|
|
4
4
|
* Renders a component with automatic event batching.
|
|
5
5
|
* Temporarily patches document.addEventListener to wrap
|
|
@@ -42,7 +42,7 @@ export function render(...params) {
|
|
|
42
42
|
!patchedEvents.has(type)) {
|
|
43
43
|
patchedEvents.add(type);
|
|
44
44
|
const wrappedListener = function (event) {
|
|
45
|
-
|
|
45
|
+
transaction(() => {
|
|
46
46
|
listener.call(this, event);
|
|
47
47
|
});
|
|
48
48
|
};
|
package/dist/scheduler.d.ts
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
export declare function
|
|
2
|
-
export declare function
|
|
3
|
-
export declare function installGlobalBatching(target?: EventTarget): () => void;
|
|
1
|
+
export declare function transaction(cb: () => void): void;
|
|
2
|
+
export declare function autorun(cb: () => void): import("mobx").IReactionDisposer;
|
|
4
3
|
//# sourceMappingURL=scheduler.d.ts.map
|
package/dist/scheduler.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"scheduler.d.ts","sourceRoot":"","sources":["../src/scheduler.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"scheduler.d.ts","sourceRoot":"","sources":["../src/scheduler.ts"],"names":[],"mappings":"AAQA,wBAAgB,WAAW,CAAC,EAAE,EAAE,MAAM,IAAI,QAKzC;AAED,wBAAgB,OAAO,CAAC,EAAE,EAAE,MAAM,IAAI,oCAOrC"}
|
package/dist/scheduler.js
CHANGED
|
@@ -1,107 +1,34 @@
|
|
|
1
|
-
|
|
2
|
-
let
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
// TODO: call your Inferno render/commit once.
|
|
9
|
-
// infernoRender(vnode, container);
|
|
10
|
-
}
|
|
11
|
-
function flushNow() {
|
|
12
|
-
scheduled = false;
|
|
13
|
-
if (!dirty)
|
|
14
|
-
return;
|
|
15
|
-
dirty = false;
|
|
16
|
-
performWork();
|
|
17
|
-
}
|
|
18
|
-
// Called by setters after enqueueing their state change
|
|
19
|
-
export function enqueueUpdateFromSetter() {
|
|
20
|
-
dirty = true;
|
|
21
|
-
if (depth > 0) {
|
|
22
|
-
// We're inside a batched input event; we'll flush on exit (same frame).
|
|
23
|
-
return;
|
|
24
|
-
}
|
|
25
|
-
if (!scheduled) {
|
|
26
|
-
scheduled = true;
|
|
27
|
-
queueMicrotask(flushNow); // one flush per task
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
// Batch-scope control used by the global capture listeners
|
|
31
|
-
function enter() {
|
|
32
|
-
depth++;
|
|
33
|
-
}
|
|
34
|
-
function exit() {
|
|
35
|
-
if (--depth === 0) {
|
|
36
|
-
// End of the event propagation; commit now (before next paint).
|
|
37
|
-
flushNow();
|
|
38
|
-
}
|
|
1
|
+
import { configure, transaction as mobxTransaction, autorun as mobxAutorun, } from "mobx";
|
|
2
|
+
let isSync = false;
|
|
3
|
+
export function transaction(cb) {
|
|
4
|
+
isSync = true;
|
|
5
|
+
mobxTransaction(() => {
|
|
6
|
+
cb();
|
|
7
|
+
});
|
|
39
8
|
}
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
"dblclick",
|
|
45
|
-
"contextmenu",
|
|
46
|
-
"mousedown",
|
|
47
|
-
"mouseup",
|
|
48
|
-
"mousemove",
|
|
49
|
-
"pointerdown",
|
|
50
|
-
"pointerup",
|
|
51
|
-
"pointermove",
|
|
52
|
-
"touchstart",
|
|
53
|
-
"touchmove",
|
|
54
|
-
"touchend",
|
|
55
|
-
"touchcancel",
|
|
56
|
-
"dragstart",
|
|
57
|
-
"drag",
|
|
58
|
-
"dragend",
|
|
59
|
-
"dragenter",
|
|
60
|
-
"dragleave",
|
|
61
|
-
"dragover",
|
|
62
|
-
"drop",
|
|
63
|
-
"wheel",
|
|
64
|
-
// Keyboard
|
|
65
|
-
"keydown",
|
|
66
|
-
"keypress",
|
|
67
|
-
"keyup",
|
|
68
|
-
// Focus & input
|
|
69
|
-
"focus",
|
|
70
|
-
"blur",
|
|
71
|
-
"focusin",
|
|
72
|
-
"focusout",
|
|
73
|
-
"input",
|
|
74
|
-
"beforeinput",
|
|
75
|
-
"change",
|
|
76
|
-
"compositionstart",
|
|
77
|
-
"compositionupdate",
|
|
78
|
-
"compositionend",
|
|
79
|
-
// Forms
|
|
80
|
-
"submit",
|
|
81
|
-
"reset",
|
|
82
|
-
// Selection / clipboard
|
|
83
|
-
"select",
|
|
84
|
-
"selectionchange",
|
|
85
|
-
"copy",
|
|
86
|
-
"cut",
|
|
87
|
-
"paste",
|
|
88
|
-
];
|
|
89
|
-
export function installGlobalBatching(target = window) {
|
|
90
|
-
const handlers = [];
|
|
91
|
-
INTERACTIVE_EVENTS.forEach((type) => {
|
|
92
|
-
const onCapture = () => {
|
|
93
|
-
enter();
|
|
94
|
-
// Close the scope after all handlers (capture→target→bubble) have run.
|
|
95
|
-
queueMicrotask(exit);
|
|
96
|
-
};
|
|
97
|
-
target.addEventListener(type, onCapture, { capture: true });
|
|
98
|
-
handlers.push([onCapture, { capture: true }]);
|
|
9
|
+
export function autorun(cb) {
|
|
10
|
+
isSync = true;
|
|
11
|
+
const disposer = mobxAutorun(() => {
|
|
12
|
+
cb();
|
|
99
13
|
});
|
|
100
|
-
|
|
101
|
-
return () => {
|
|
102
|
-
INTERACTIVE_EVENTS.forEach((type, i) => {
|
|
103
|
-
const [fn, opts] = handlers[i];
|
|
104
|
-
target.removeEventListener(type, fn, opts);
|
|
105
|
-
});
|
|
106
|
-
};
|
|
14
|
+
return disposer;
|
|
107
15
|
}
|
|
16
|
+
let hasQueuedFlush = false;
|
|
17
|
+
configure({
|
|
18
|
+
enforceActions: "never",
|
|
19
|
+
reactionScheduler: (f) => {
|
|
20
|
+
if (isSync) {
|
|
21
|
+
f(); // Flush immediately at the end the transaction
|
|
22
|
+
hasQueuedFlush = false;
|
|
23
|
+
isSync = false;
|
|
24
|
+
}
|
|
25
|
+
else if (!hasQueuedFlush) {
|
|
26
|
+
hasQueuedFlush = true;
|
|
27
|
+
queueMicrotask(() => {
|
|
28
|
+
isSync = true;
|
|
29
|
+
f();
|
|
30
|
+
hasQueuedFlush = false;
|
|
31
|
+
}); // Defer "loose" user changes
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
|
+
});
|
package/dist/useAsync.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useAsync.d.ts","sourceRoot":"","sources":["../src/useAsync.ts"],"names":[],"mappings":"AAKA,MAAM,MAAM,UAAU,CAAC,CAAC,IACpB;IACE,KAAK,EAAE,KAAK,CAAC;IACb,SAAS,EAAE,IAAI,CAAC;IAChB,YAAY,EAAE,KAAK,CAAC;IACpB,KAAK,EAAE,IAAI,CAAC;CACb,GACD;IACE,KAAK,EAAE,KAAK,CAAC;IACb,SAAS,EAAE,KAAK,CAAC;IACjB,YAAY,EAAE,IAAI,CAAC;IACnB,KAAK,EAAE,CAAC,CAAC;CACV,GACD;IACE,KAAK,EAAE,IAAI,CAAC;IACZ,SAAS,EAAE,IAAI,CAAC;IAChB,YAAY,EAAE,KAAK,CAAC;IACpB,KAAK,EAAE,IAAI,CAAC;CACb,GACD;IACE,KAAK,EAAE,IAAI,CAAC;IACZ,SAAS,EAAE,KAAK,CAAC;IACjB,YAAY,EAAE,IAAI,CAAC;IACnB,KAAK,EAAE,CAAC,CAAC;CACV,GACD;IACE,KAAK,EAAE,IAAI,CAAC;IACZ,SAAS,EAAE,KAAK,CAAC;IACjB,YAAY,EAAE,KAAK,CAAC;IACpB,KAAK,EAAE,CAAC,CAAC;CACV,CAAC;AAEN,MAAM,MAAM,KAAK,CAAC,CAAC,SAAS,WAAW,CAAC,GAAG,CAAC,IAAI;IAC9C,UAAU,CAAC,CAAC,CAAC;IACb,MAAM,OAAO,CAAC,IAAI,CAAC;CACpB,CAAC;AAEF,wBAAgB,OAAO,CAAC,KAAK,EAAE,OAAO,WAWrC;AAED,wBAAgB,QAAQ,CAAC,CAAC,SAAS,WAAW,CAAC,GAAG,CAAC,EACjD,EAAE,EAAE,CAAC,MAAM,CAAC,EAAE,WAAW,KAAK,OAAO,CAAC,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"useAsync.d.ts","sourceRoot":"","sources":["../src/useAsync.ts"],"names":[],"mappings":"AAKA,MAAM,MAAM,UAAU,CAAC,CAAC,IACpB;IACE,KAAK,EAAE,KAAK,CAAC;IACb,SAAS,EAAE,IAAI,CAAC;IAChB,YAAY,EAAE,KAAK,CAAC;IACpB,KAAK,EAAE,IAAI,CAAC;CACb,GACD;IACE,KAAK,EAAE,KAAK,CAAC;IACb,SAAS,EAAE,KAAK,CAAC;IACjB,YAAY,EAAE,IAAI,CAAC;IACnB,KAAK,EAAE,CAAC,CAAC;CACV,GACD;IACE,KAAK,EAAE,IAAI,CAAC;IACZ,SAAS,EAAE,IAAI,CAAC;IAChB,YAAY,EAAE,KAAK,CAAC;IACpB,KAAK,EAAE,IAAI,CAAC;CACb,GACD;IACE,KAAK,EAAE,IAAI,CAAC;IACZ,SAAS,EAAE,KAAK,CAAC;IACjB,YAAY,EAAE,IAAI,CAAC;IACnB,KAAK,EAAE,CAAC,CAAC;CACV,GACD;IACE,KAAK,EAAE,IAAI,CAAC;IACZ,SAAS,EAAE,KAAK,CAAC;IACjB,YAAY,EAAE,KAAK,CAAC;IACpB,KAAK,EAAE,CAAC,CAAC;CACV,CAAC;AAEN,MAAM,MAAM,KAAK,CAAC,CAAC,SAAS,WAAW,CAAC,GAAG,CAAC,IAAI;IAC9C,UAAU,CAAC,CAAC,CAAC;IACb,MAAM,OAAO,CAAC,IAAI,CAAC;CACpB,CAAC;AAEF,wBAAgB,OAAO,CAAC,KAAK,EAAE,OAAO,WAWrC;AAED,wBAAgB,QAAQ,CAAC,CAAC,SAAS,WAAW,CAAC,GAAG,CAAC,EACjD,EAAE,EAAE,CAAC,MAAM,CAAC,EAAE,WAAW,KAAK,OAAO,CAAC,CAAC,CAAC,GA4InC,KAAK,CAAC,CAAC,CAAC,CACd"}
|
package/dist/useAsync.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { syncBatch } from "./batch";
|
|
2
1
|
import { useCleanup, getCurrentComponent } from "./component";
|
|
3
|
-
import {
|
|
2
|
+
import { transaction } from "./scheduler";
|
|
4
3
|
import { assignState, useState } from "./useState";
|
|
4
|
+
import { Reaction } from "mobx";
|
|
5
5
|
export function isAsync(value) {
|
|
6
6
|
if (value === null || typeof value !== "object") {
|
|
7
7
|
return false;
|
|
@@ -27,15 +27,16 @@ export function useAsync(fn) {
|
|
|
27
27
|
const refresh = () => {
|
|
28
28
|
currentAbortController?.abort();
|
|
29
29
|
const abortController = (currentAbortController = new AbortController());
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
30
|
+
let promise;
|
|
31
|
+
reaction.track(() => {
|
|
32
|
+
promise = fn(abortController.signal);
|
|
33
|
+
});
|
|
33
34
|
promise
|
|
34
35
|
.then((result) => {
|
|
35
36
|
if (abortController.signal.aborted) {
|
|
36
37
|
return;
|
|
37
38
|
}
|
|
38
|
-
|
|
39
|
+
transaction(() => {
|
|
39
40
|
assignState(state, {
|
|
40
41
|
isLoading: false,
|
|
41
42
|
isRefreshing: false,
|
|
@@ -50,7 +51,7 @@ export function useAsync(fn) {
|
|
|
50
51
|
if (abortController.signal.aborted) {
|
|
51
52
|
return;
|
|
52
53
|
}
|
|
53
|
-
|
|
54
|
+
transaction(() => {
|
|
54
55
|
assignState(state, {
|
|
55
56
|
isLoading: state.isLoading,
|
|
56
57
|
isRefreshing: state.isRefreshing,
|
|
@@ -63,8 +64,8 @@ export function useAsync(fn) {
|
|
|
63
64
|
});
|
|
64
65
|
return promise;
|
|
65
66
|
};
|
|
66
|
-
const
|
|
67
|
-
|
|
67
|
+
const reaction = new Reaction("AsyncReaction", () => {
|
|
68
|
+
transaction(() => {
|
|
68
69
|
if (state.isLoading) {
|
|
69
70
|
refresh();
|
|
70
71
|
}
|
|
@@ -90,7 +91,7 @@ export function useAsync(fn) {
|
|
|
90
91
|
});
|
|
91
92
|
useCleanup(() => {
|
|
92
93
|
currentAbortController?.abort();
|
|
93
|
-
|
|
94
|
+
reaction.dispose();
|
|
94
95
|
});
|
|
95
96
|
refresh();
|
|
96
97
|
return [
|
|
@@ -99,7 +100,7 @@ export function useAsync(fn) {
|
|
|
99
100
|
if (state.isLoading && !state.error) {
|
|
100
101
|
return;
|
|
101
102
|
}
|
|
102
|
-
|
|
103
|
+
transaction(() => {
|
|
103
104
|
if (state.error && state.value === null) {
|
|
104
105
|
assignState(state, {
|
|
105
106
|
isLoading: true,
|
package/dist/useDerived.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export type Derived<T extends Record<string, () => any>> = {
|
|
2
2
|
[K in keyof T]: ReturnType<T[K]>;
|
|
3
3
|
};
|
|
4
|
-
export declare function useDerived<T extends Record<string, () => any>>(
|
|
4
|
+
export declare function useDerived<T extends Record<string, () => any>>(computedDefs: T): Derived<T>;
|
|
5
5
|
//# sourceMappingURL=useDerived.d.ts.map
|
package/dist/useDerived.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useDerived.d.ts","sourceRoot":"","sources":["../src/useDerived.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useDerived.d.ts","sourceRoot":"","sources":["../src/useDerived.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,OAAO,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,CAAC,IAAI;KACxD,CAAC,IAAI,MAAM,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CACjC,CAAC;AAEF,wBAAgB,UAAU,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,CAAC,EAC5D,YAAY,EAAE,CAAC,GACd,OAAO,CAAC,CAAC,CAAC,CAmBZ"}
|
package/dist/useDerived.js
CHANGED
|
@@ -1,72 +1,18 @@
|
|
|
1
|
-
import { getCurrentComponent
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
export function useDerived(computed) {
|
|
1
|
+
import { getCurrentComponent } from "./component";
|
|
2
|
+
import { computed } from "mobx";
|
|
3
|
+
export function useDerived(computedDefs) {
|
|
5
4
|
const currentComponent = getCurrentComponent();
|
|
6
5
|
if (!currentComponent || currentComponent.isRendering) {
|
|
7
6
|
throw new Error("Only use useDerived in component setup");
|
|
8
7
|
}
|
|
9
|
-
const
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
let value;
|
|
14
|
-
const signal = new Signal();
|
|
15
|
-
const computedObserver = new Observer(() => {
|
|
16
|
-
isDirty = true;
|
|
17
|
-
signal.notify();
|
|
18
|
-
if (INSPECTOR_ENABLED) {
|
|
19
|
-
notifyInspectorRef.current?.notify({
|
|
20
|
-
type: "computed",
|
|
21
|
-
path: notifyInspectorRef.current.path.concat(prop),
|
|
22
|
-
isDirty: true,
|
|
23
|
-
value,
|
|
24
|
-
});
|
|
25
|
-
}
|
|
26
|
-
}, false);
|
|
27
|
-
useCleanup(() => computedObserver.dispose());
|
|
28
|
-
Object.defineProperty(proxy, prop, {
|
|
29
|
-
enumerable: true,
|
|
30
|
-
configurable: true,
|
|
8
|
+
const derived = {};
|
|
9
|
+
for (const key in computedDefs) {
|
|
10
|
+
const computedValue = computed(computedDefs[key]);
|
|
11
|
+
Object.defineProperty(derived, key, {
|
|
31
12
|
get() {
|
|
32
|
-
|
|
33
|
-
if (currentObserver) {
|
|
34
|
-
currentObserver.subscribeSignal(signal);
|
|
35
|
-
}
|
|
36
|
-
if (isDirty) {
|
|
37
|
-
const stopObserving = computedObserver.observe();
|
|
38
|
-
value = computed[prop]();
|
|
39
|
-
stopObserving();
|
|
40
|
-
isDirty = false;
|
|
41
|
-
if (INSPECTOR_ENABLED) {
|
|
42
|
-
notifyInspectorRef.current?.notify({
|
|
43
|
-
type: "computed",
|
|
44
|
-
path: notifyInspectorRef.current.path.concat(prop),
|
|
45
|
-
isDirty: false,
|
|
46
|
-
value,
|
|
47
|
-
});
|
|
48
|
-
}
|
|
49
|
-
return value;
|
|
50
|
-
}
|
|
51
|
-
return value;
|
|
13
|
+
return computedValue.get();
|
|
52
14
|
},
|
|
53
15
|
});
|
|
54
16
|
}
|
|
55
|
-
|
|
56
|
-
Object.defineProperty(proxy, INSPECT_MARKER, {
|
|
57
|
-
enumerable: false,
|
|
58
|
-
configurable: false,
|
|
59
|
-
get() {
|
|
60
|
-
return !notifyInspectorRef.current;
|
|
61
|
-
},
|
|
62
|
-
set: (value) => {
|
|
63
|
-
Object.defineProperty(notifyInspectorRef, "current", {
|
|
64
|
-
get() {
|
|
65
|
-
return value.current;
|
|
66
|
-
},
|
|
67
|
-
});
|
|
68
|
-
},
|
|
69
|
-
});
|
|
70
|
-
}
|
|
71
|
-
return proxy;
|
|
17
|
+
return derived;
|
|
72
18
|
}
|
package/dist/useEffect.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useEffect.d.ts","sourceRoot":"","sources":["../src/useEffect.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useEffect.d.ts","sourceRoot":"","sources":["../src/useEffect.ts"],"names":[],"mappings":"AAGA,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,IAAI,GAAG,CAAC,MAAM,IAAI,CAAC,QActD"}
|
package/dist/useEffect.js
CHANGED
|
@@ -1,29 +1,14 @@
|
|
|
1
|
-
import { syncBatch } from "./batch";
|
|
2
1
|
import { useCleanup, getCurrentComponent } from "./component";
|
|
3
|
-
import {
|
|
2
|
+
import { autorun } from "./scheduler";
|
|
4
3
|
export function useEffect(cb) {
|
|
5
4
|
const component = getCurrentComponent();
|
|
6
5
|
if (!component || component.isRendering) {
|
|
7
6
|
throw new Error("Only use useEffect in component setup");
|
|
8
7
|
}
|
|
9
8
|
let disposer;
|
|
10
|
-
const
|
|
11
|
-
syncBatch(runEffect);
|
|
12
|
-
});
|
|
13
|
-
const runEffect = () => {
|
|
14
|
-
try {
|
|
15
|
-
disposer?.();
|
|
16
|
-
}
|
|
17
|
-
catch (error) {
|
|
18
|
-
console.error("Error in effect dispose function:", error);
|
|
19
|
-
}
|
|
20
|
-
const stopObserving = observer.observe();
|
|
21
|
-
disposer = cb();
|
|
22
|
-
stopObserving();
|
|
23
|
-
};
|
|
24
|
-
useCleanup(() => {
|
|
25
|
-
observer.dispose();
|
|
9
|
+
const autorunDisposer = autorun(() => {
|
|
26
10
|
disposer?.();
|
|
11
|
+
disposer = cb();
|
|
27
12
|
});
|
|
28
|
-
|
|
13
|
+
useCleanup(autorunDisposer);
|
|
29
14
|
}
|
package/dist/useLookup.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useLookup.d.ts","sourceRoot":"","sources":["../src/useLookup.ts"],"names":[],"mappings":"AAIA,wBAAgB,SAAS,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,MAAM,CAAC,EAC3D,QAAQ,EAAE,MAAM,CAAC,EAAE,EACnB,GAAG,EAAE,CAAC,
|
|
1
|
+
{"version":3,"file":"useLookup.d.ts","sourceRoot":"","sources":["../src/useLookup.ts"],"names":[],"mappings":"AAIA,wBAAgB,SAAS,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,MAAM,CAAC,EAC3D,QAAQ,EAAE,MAAM,CAAC,EAAE,EACnB,GAAG,EAAE,CAAC,IAeE,KAAK,CAAC,CAAC,CAAC,CAAC,KAAG,CAAC,GAAG,SAAS,CAGlC"}
|
package/dist/useLookup.js
CHANGED
|
@@ -1,22 +1,17 @@
|
|
|
1
1
|
import { useCleanup } from "./component";
|
|
2
|
-
import {
|
|
2
|
+
import { autorun } from "./scheduler";
|
|
3
3
|
import { useState } from "./useState";
|
|
4
4
|
export function useLookup(getArray, key) {
|
|
5
|
-
const state = useState(
|
|
6
|
-
lookup: {},
|
|
7
|
-
});
|
|
5
|
+
const state = useState(new Map());
|
|
8
6
|
function updateMap() {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
}, {});
|
|
14
|
-
disposeObserve();
|
|
7
|
+
state.clear();
|
|
8
|
+
getArray().forEach((item) => {
|
|
9
|
+
state.set(item[key], item);
|
|
10
|
+
});
|
|
15
11
|
}
|
|
16
|
-
const
|
|
17
|
-
|
|
18
|
-
useCleanup(() => observer.dispose());
|
|
12
|
+
const dispose = autorun(updateMap);
|
|
13
|
+
useCleanup(dispose);
|
|
19
14
|
return (key) => {
|
|
20
|
-
return state.
|
|
15
|
+
return state.get(key);
|
|
21
16
|
};
|
|
22
17
|
}
|
package/dist/useRef.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useRef.d.ts","sourceRoot":"","sources":["../src/useRef.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAIpC,MAAM,MAAM,GAAG,CAAC,CAAC,IAAI,SAAS,CAAC,CAAC,CAAC,CAAC;AAElC,wBAAgB,SAAS,CAAC,CAAC,EAAE,GAAG,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,QAE1D;AAED,wBAAgB,MAAM,CAAC,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"useRef.d.ts","sourceRoot":"","sources":["../src/useRef.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAIpC,MAAM,MAAM,GAAG,CAAC,CAAC,IAAI,SAAS,CAAC,CAAC,CAAC,CAAC;AAElC,wBAAgB,SAAS,CAAC,CAAC,EAAE,GAAG,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,QAE1D;AAED,wBAAgB,MAAM,CAAC,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,CAiBxC"}
|
package/dist/useRef.js
CHANGED
|
@@ -1,24 +1,20 @@
|
|
|
1
|
-
import { getCurrentObserver, Signal } from "./observation";
|
|
2
1
|
import { getCurrentComponent } from "./component";
|
|
2
|
+
import { observable } from "mobx";
|
|
3
3
|
export function assignRef(ref, refValue) {
|
|
4
4
|
ref.current = refValue;
|
|
5
5
|
}
|
|
6
6
|
export function useRef() {
|
|
7
|
-
let value = null;
|
|
8
7
|
const currentComponent = getCurrentComponent();
|
|
9
8
|
if (!currentComponent || currentComponent.isRendering) {
|
|
10
9
|
throw new Error("Only use useRef in component setup");
|
|
11
10
|
}
|
|
12
|
-
const
|
|
11
|
+
const observableValue = observable.box(null);
|
|
13
12
|
return {
|
|
14
13
|
get current() {
|
|
15
|
-
|
|
16
|
-
currentObserver?.subscribeSignal(signal);
|
|
17
|
-
return value;
|
|
14
|
+
return observableValue.get();
|
|
18
15
|
},
|
|
19
16
|
set current(newValue) {
|
|
20
|
-
|
|
21
|
-
value = newValue;
|
|
17
|
+
observableValue.set(newValue);
|
|
22
18
|
},
|
|
23
19
|
};
|
|
24
20
|
}
|
package/dist/useRouter.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useRouter.d.ts","sourceRoot":"","sources":["../src/useRouter.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,YAAY,EACZ,OAAO,EACP,OAAO,EACR,MAAM,qBAAqB,CAAC;AAI7B,MAAM,MAAM,MAAM,CAAC,CAAC,SAAS,YAAY,IAAI,IAAI,CAC/C,OAAO,CAAC,CAAC,CAAC,EACV,SAAS,GAAG,QAAQ,GAAG,UAAU,CAClC,GAAG;IACF,KAAK,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;CACpB,CAAC;AAEF,wBAAgB,SAAS,CAAC,KAAK,CAAC,CAAC,SAAS,YAAY,EACpD,MAAM,EAAE,CAAC,EACT,OAAO,CAAC,EAAE;IACR,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,GACA,MAAM,CAAC,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"useRouter.d.ts","sourceRoot":"","sources":["../src/useRouter.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,YAAY,EACZ,OAAO,EACP,OAAO,EACR,MAAM,qBAAqB,CAAC;AAI7B,MAAM,MAAM,MAAM,CAAC,CAAC,SAAS,YAAY,IAAI,IAAI,CAC/C,OAAO,CAAC,CAAC,CAAC,EACV,SAAS,GAAG,QAAQ,GAAG,UAAU,CAClC,GAAG;IACF,KAAK,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;CACpB,CAAC;AAEF,wBAAgB,SAAS,CAAC,KAAK,CAAC,CAAC,SAAS,YAAY,EACpD,MAAM,EAAE,CAAC,EACT,OAAO,CAAC,EAAE;IACR,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,GACA,MAAM,CAAC,CAAC,CAAC,CAsBX"}
|
package/dist/useRouter.js
CHANGED
|
@@ -1,20 +1,16 @@
|
|
|
1
1
|
import { createRouter as internalCreateRouter, } from "typed-client-router";
|
|
2
|
-
import { getCurrentObserver, Signal } from "./observation";
|
|
3
2
|
import { useCleanup, getCurrentComponent } from "./component";
|
|
3
|
+
import { observable } from "mobx";
|
|
4
4
|
export function useRouter(config, options) {
|
|
5
5
|
if (!getCurrentComponent()) {
|
|
6
6
|
throw new Error("Only use useRouter in component setup");
|
|
7
7
|
}
|
|
8
8
|
const router = internalCreateRouter(config, options);
|
|
9
|
-
const
|
|
10
|
-
useCleanup(router.listen(() =>
|
|
9
|
+
const route = observable.box(router.current);
|
|
10
|
+
useCleanup(router.listen((newRoute) => route.set(newRoute)));
|
|
11
11
|
return {
|
|
12
12
|
get route() {
|
|
13
|
-
|
|
14
|
-
if (observer) {
|
|
15
|
-
observer.subscribeSignal(signal);
|
|
16
|
-
}
|
|
17
|
-
return router.current;
|
|
13
|
+
return route.get();
|
|
18
14
|
},
|
|
19
15
|
get queries() {
|
|
20
16
|
return router.queries;
|
package/dist/useState.d.ts
CHANGED
|
@@ -24,5 +24,4 @@ export declare function assignState<T extends object>(state: T, newState: T): T;
|
|
|
24
24
|
* @returns A reactive proxy of the state object
|
|
25
25
|
*/
|
|
26
26
|
export declare function useState<T extends object>(state: T): T;
|
|
27
|
-
export declare const PROXY_MARKER: unique symbol;
|
|
28
27
|
//# sourceMappingURL=useState.d.ts.map
|
package/dist/useState.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useState.d.ts","sourceRoot":"","sources":["../src/useState.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useState.d.ts","sourceRoot":"","sources":["../src/useState.ts"],"names":[],"mappings":"AAEA,wBAAgB,WAAW,CAAC,CAAC,SAAS,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,KAElE;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,MAAM,EAAE,KAAK,EAAE,CAAC,GAAG,CAAC,CAEtD"}
|
package/dist/useState.js
CHANGED
|
@@ -1,6 +1,4 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { INSPECT_MARKER, INSPECTOR_ENABLED } from "./inspect";
|
|
3
|
-
import { getCurrentObserver, Signal } from "./observation";
|
|
1
|
+
import { observable } from "mobx";
|
|
4
2
|
export function assignState(state, newState) {
|
|
5
3
|
return Object.assign(state, newState);
|
|
6
4
|
}
|
|
@@ -29,103 +27,5 @@ export function assignState(state, newState) {
|
|
|
29
27
|
* @returns A reactive proxy of the state object
|
|
30
28
|
*/
|
|
31
29
|
export function useState(state) {
|
|
32
|
-
|
|
33
|
-
throw new Error("useState cannot be called during render. Call it in component setup or globally.");
|
|
34
|
-
}
|
|
35
|
-
return getProxy(state, {});
|
|
36
|
-
}
|
|
37
|
-
const proxyCache = new WeakMap();
|
|
38
|
-
export const PROXY_MARKER = Symbol("isProxy");
|
|
39
|
-
function getProxy(value, notifyInspectorRef) {
|
|
40
|
-
// Check if already a proxy to avoid double-wrapping
|
|
41
|
-
if (PROXY_MARKER in value) {
|
|
42
|
-
return value;
|
|
43
|
-
}
|
|
44
|
-
if (proxyCache.has(value)) {
|
|
45
|
-
return proxyCache.get(value);
|
|
46
|
-
}
|
|
47
|
-
const signals = {};
|
|
48
|
-
const proxy = new Proxy(value, {
|
|
49
|
-
has(target, key) {
|
|
50
|
-
// Support the "in" operator check for PROXY_MARKER
|
|
51
|
-
if (key === PROXY_MARKER) {
|
|
52
|
-
return true;
|
|
53
|
-
}
|
|
54
|
-
if (INSPECTOR_ENABLED && key === INSPECT_MARKER) {
|
|
55
|
-
return true;
|
|
56
|
-
}
|
|
57
|
-
return Reflect.has(target, key);
|
|
58
|
-
},
|
|
59
|
-
get(target, key) {
|
|
60
|
-
// Mark this as a proxy to prevent double-wrapping
|
|
61
|
-
if (key === PROXY_MARKER) {
|
|
62
|
-
return true;
|
|
63
|
-
}
|
|
64
|
-
if (INSPECTOR_ENABLED && key === INSPECT_MARKER) {
|
|
65
|
-
return !notifyInspectorRef.current;
|
|
66
|
-
}
|
|
67
|
-
const value = Reflect.get(target, key);
|
|
68
|
-
if (typeof key === "symbol" || typeof value === "function") {
|
|
69
|
-
return value;
|
|
70
|
-
}
|
|
71
|
-
const observer = getCurrentObserver();
|
|
72
|
-
if (observer) {
|
|
73
|
-
const signal = (signals[key] = signals[key] || new Signal());
|
|
74
|
-
observer.subscribeSignal(signal);
|
|
75
|
-
}
|
|
76
|
-
if (value instanceof Date || value === null) {
|
|
77
|
-
return value;
|
|
78
|
-
}
|
|
79
|
-
if (Array.isArray(value) || typeof value === "object") {
|
|
80
|
-
return getProxy(value, INSPECTOR_ENABLED && notifyInspectorRef.current
|
|
81
|
-
? {
|
|
82
|
-
current: {
|
|
83
|
-
notify: notifyInspectorRef.current.notify,
|
|
84
|
-
path: notifyInspectorRef.current.path.concat(key),
|
|
85
|
-
},
|
|
86
|
-
}
|
|
87
|
-
: notifyInspectorRef);
|
|
88
|
-
}
|
|
89
|
-
return value;
|
|
90
|
-
},
|
|
91
|
-
set(target, key, newValue) {
|
|
92
|
-
if (INSPECTOR_ENABLED && key === INSPECT_MARKER) {
|
|
93
|
-
Object.defineProperty(notifyInspectorRef, "current", {
|
|
94
|
-
get() {
|
|
95
|
-
return newValue.current;
|
|
96
|
-
},
|
|
97
|
-
});
|
|
98
|
-
return Reflect.set(target, key, newValue);
|
|
99
|
-
}
|
|
100
|
-
if (typeof key === "symbol") {
|
|
101
|
-
return Reflect.set(target, key, newValue);
|
|
102
|
-
}
|
|
103
|
-
const oldValue = Reflect.get(target, key);
|
|
104
|
-
const setResult = Reflect.set(target, key, newValue);
|
|
105
|
-
// We only notify if actual change, though array length actually updates under the hood
|
|
106
|
-
if (newValue !== oldValue || (Array.isArray(value) && key === "length")) {
|
|
107
|
-
const signal = signals[key];
|
|
108
|
-
signal?.notify();
|
|
109
|
-
}
|
|
110
|
-
if (INSPECTOR_ENABLED) {
|
|
111
|
-
notifyInspectorRef.current?.notify({
|
|
112
|
-
type: "mutation",
|
|
113
|
-
path: notifyInspectorRef.current.path,
|
|
114
|
-
value: newValue,
|
|
115
|
-
});
|
|
116
|
-
}
|
|
117
|
-
return setResult;
|
|
118
|
-
},
|
|
119
|
-
deleteProperty(target, key) {
|
|
120
|
-
if (typeof key === "symbol") {
|
|
121
|
-
return Reflect.deleteProperty(target, key);
|
|
122
|
-
}
|
|
123
|
-
const signal = signals[key];
|
|
124
|
-
signal?.notify();
|
|
125
|
-
delete signals[key];
|
|
126
|
-
return Reflect.deleteProperty(target, key);
|
|
127
|
-
},
|
|
128
|
-
});
|
|
129
|
-
proxyCache.set(value, proxy);
|
|
130
|
-
return proxy;
|
|
30
|
+
return observable(state);
|
|
131
31
|
}
|
package/dist/useSuspend.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSuspend.d.ts","sourceRoot":"","sources":["../src/useSuspend.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,
|
|
1
|
+
{"version":3,"file":"useSuspend.d.ts","sourceRoot":"","sources":["../src/useSuspend.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAW,MAAM,YAAY,CAAC;AAIjD,KAAK,YAAY,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,CAAC,IACjD,CAAC;IACC,KAAK,EAAE,KAAK,CAAC;IACb,SAAS,EAAE,IAAI,CAAC;IAChB,YAAY,EAAE,KAAK,CAAC;CACrB,GAAG;KACD,CAAC,IAAI,MAAM,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,UAAU,CAAC,GAAG,CAAC,GACpD,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,GACzB,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CACrB,CAAC,GACF,CAAC;IACC,KAAK,EAAE,KAAK,CAAC;IACb,SAAS,EAAE,KAAK,CAAC;IACjB,YAAY,EAAE,IAAI,CAAC;CACpB,GAAG;KACD,CAAC,IAAI,MAAM,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,UAAU,CAAC,GAAG,CAAC,GACpD,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GACtC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CACrB,CAAC,GACF,CAAC;IACC,KAAK,EAAE,IAAI,CAAC;IACZ,SAAS,EAAE,IAAI,CAAC;IAChB,YAAY,EAAE,KAAK,CAAC;CACrB,GAAG;KACD,CAAC,IAAI,MAAM,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,UAAU,CAAC,GAAG,CAAC,GACpD,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,GACzB,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CACrB,CAAC,GACF,CAAC;IACC,KAAK,EAAE,IAAI,CAAC;IACZ,SAAS,EAAE,KAAK,CAAC;IACjB,YAAY,EAAE,IAAI,CAAC;CACpB,GAAG;KACD,CAAC,IAAI,MAAM,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,UAAU,CAAC,GAAG,CAAC,GACpD,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GACtC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CACrB,CAAC,GACF,CAAC;IACC,KAAK,EAAE,IAAI,CAAC;IACZ,SAAS,EAAE,KAAK,CAAC;IACjB,YAAY,EAAE,KAAK,CAAC;CACrB,GAAG;KACD,CAAC,IAAI,MAAM,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,UAAU,CAAC,GAAG,CAAC,GACpD,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GACtC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CACrB,CAAC,CAAC;AAEP,wBAAgB,UAAU,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,MAAM,EAAE,CAAC,mBA0DlE"}
|