reactronic 0.92.25006 → 0.92.25008
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 +24 -18
- package/build/dist/source/Clock.js +3 -3
- package/build/dist/source/Reaction.js +2 -2
- package/build/dist/source/ReactiveSystem.d.ts +8 -10
- package/build/dist/source/ReactiveSystem.js +22 -40
- package/build/dist/source/Ref.js +3 -3
- package/build/dist/source/api.d.ts +2 -1
- package/build/dist/source/api.js +2 -1
- package/build/dist/source/core/ReactiveNode.js +9 -9
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -13,23 +13,28 @@ Reactronic is an experimental JavaScript library that provides
|
|
|
13
13
|
[transactional reactive](https://blog.nezaboodka.com/post/2019/593-modern-database-should-natively-support-transactionally-reactive-programming)
|
|
14
14
|
state management in a Web application.
|
|
15
15
|
|
|
16
|
-
Transactional reactivity means that state changes are
|
|
17
|
-
isolated data snapshot and then, once
|
|
18
|
-
**consistently propagated** to
|
|
19
|
-
(re)rendering. All
|
|
16
|
+
Transactional reactivity means that state changes are
|
|
17
|
+
being made in an isolated data snapshot and then, once
|
|
18
|
+
atomically applied, are **consistently propagated** to
|
|
19
|
+
corresponding visual components for (re)rendering. All
|
|
20
|
+
that is done in automatic, seamless, and fine-grained
|
|
20
21
|
way. Reactronic **takes full care of tracking dependencies**
|
|
21
|
-
between visual components (observers) and state
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
- **
|
|
28
|
-
|
|
29
|
-
- **
|
|
30
|
-
|
|
31
|
-
- **
|
|
32
|
-
|
|
22
|
+
between visual components (observers) and state
|
|
23
|
+
(observable objects).
|
|
24
|
+
|
|
25
|
+
Transactional reactivity is based on four fundamental
|
|
26
|
+
concepts:
|
|
27
|
+
|
|
28
|
+
- **Observable Objects** - a set of objects that store
|
|
29
|
+
data of an application (state);
|
|
30
|
+
- **Atomic Action** - a function that makes changes in
|
|
31
|
+
observable objects in atomic way ("all or nothing");
|
|
32
|
+
- **Reactive Process** - recurrent and automatic
|
|
33
|
+
(re-)execution of a function in response to changes
|
|
34
|
+
made by atomic actions;
|
|
35
|
+
- **Cached Result** - result value of a function that
|
|
36
|
+
is remembered and, if the becomes obsolete, causes
|
|
37
|
+
its function to re-execute on-demand.
|
|
33
38
|
|
|
34
39
|
Demo application built with Reactronic: https://nevod.io/#/playground.
|
|
35
40
|
Source code of the demo: https://gitlab.com/nezaboodka/nevod.web.public/-/blob/master/README.md.
|
|
@@ -215,7 +220,8 @@ class Component<P> extends React.Component<P> {
|
|
|
215
220
|
} // EnsureUpToDate is subscribed to render
|
|
216
221
|
|
|
217
222
|
shouldComponentUpdate(): boolean {
|
|
218
|
-
|
|
223
|
+
const r = ReactiveSystem.getController(this.render)
|
|
224
|
+
return !r.isUpToDate
|
|
219
225
|
}
|
|
220
226
|
|
|
221
227
|
componentDidMount(): void {
|
|
@@ -224,7 +230,7 @@ class Component<P> extends React.Component<P> {
|
|
|
224
230
|
}
|
|
225
231
|
|
|
226
232
|
componentWillUnmount(): void {
|
|
227
|
-
atomicAction(
|
|
233
|
+
atomicAction(ReactiveSystem.dispose, this)
|
|
228
234
|
}
|
|
229
235
|
}
|
|
230
236
|
```
|
|
@@ -8,7 +8,7 @@ var __metadata = (this && this.__metadata) || function (k, v) {
|
|
|
8
8
|
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
|
|
9
9
|
};
|
|
10
10
|
import { ObservableObject } from "./core/Mvcc.js";
|
|
11
|
-
import {
|
|
11
|
+
import { atomic } from "./ReactiveSystem.js";
|
|
12
12
|
export class Clock extends ObservableObject {
|
|
13
13
|
constructor(interval = 1000) {
|
|
14
14
|
super();
|
|
@@ -40,13 +40,13 @@ export class Clock extends ObservableObject {
|
|
|
40
40
|
}
|
|
41
41
|
}
|
|
42
42
|
__decorate([
|
|
43
|
-
|
|
43
|
+
atomic,
|
|
44
44
|
__metadata("design:type", Function),
|
|
45
45
|
__metadata("design:paramtypes", [Boolean]),
|
|
46
46
|
__metadata("design:returntype", void 0)
|
|
47
47
|
], Clock.prototype, "pause", null);
|
|
48
48
|
__decorate([
|
|
49
|
-
|
|
49
|
+
atomic,
|
|
50
50
|
__metadata("design:type", Function),
|
|
51
51
|
__metadata("design:paramtypes", []),
|
|
52
52
|
__metadata("design:returntype", void 0)
|
|
@@ -8,7 +8,7 @@ var __metadata = (this && this.__metadata) || function (k, v) {
|
|
|
8
8
|
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
|
|
9
9
|
};
|
|
10
10
|
import { ObservableObject } from "./core/Mvcc.js";
|
|
11
|
-
import {
|
|
11
|
+
import { reactive } from "./ReactiveSystem.js";
|
|
12
12
|
export class ReactiveProcess extends ObservableObject {
|
|
13
13
|
constructor(action) {
|
|
14
14
|
super();
|
|
@@ -19,7 +19,7 @@ export class ReactiveProcess extends ObservableObject {
|
|
|
19
19
|
}
|
|
20
20
|
}
|
|
21
21
|
__decorate([
|
|
22
|
-
|
|
22
|
+
reactive,
|
|
23
23
|
__metadata("design:type", Function),
|
|
24
24
|
__metadata("design:paramtypes", []),
|
|
25
25
|
__metadata("design:returntype", Object)
|
|
@@ -17,16 +17,14 @@ export declare class ReactiveSystem {
|
|
|
17
17
|
static getLoggingHint<T extends object>(obj: T, full?: boolean): string | undefined;
|
|
18
18
|
static setProfilingMode(isOn: boolean, options?: Partial<ProfilingOptions>): void;
|
|
19
19
|
}
|
|
20
|
-
export declare function
|
|
21
|
-
export declare function
|
|
22
|
-
export declare function
|
|
23
|
-
export declare function
|
|
24
|
-
export declare function
|
|
25
|
-
export declare function atomicAction<T>(func: F<T>, ...args: any[]): T;
|
|
26
|
-
export declare function atomicAction<T>(options: SnapshotOptions, func: F<T>, ...args: any[]): T;
|
|
27
|
-
export declare function atomicAction(proto: object, prop: PropertyKey, pd: PropertyDescriptor): any;
|
|
20
|
+
export declare function atomicRun<T>(func: F<T>, ...args: any[]): T;
|
|
21
|
+
export declare function atomicRun<T>(options: SnapshotOptions, func: F<T>, ...args: any[]): T;
|
|
22
|
+
export declare function nonReactiveRun<T>(func: F<T>, ...args: any[]): T;
|
|
23
|
+
export declare function sensitiveRun<T>(sensitivity: boolean, func: F<T>, ...args: any[]): T;
|
|
24
|
+
export declare function contextualRun<T>(p: Promise<T>): Promise<T>;
|
|
28
25
|
export declare function unobservable(proto: object, prop: PropertyKey): any;
|
|
29
26
|
export declare function observable(proto: object, prop: PropertyKey): any;
|
|
30
|
-
export declare function
|
|
31
|
-
export declare function
|
|
27
|
+
export declare function atomic(proto: object, prop: PropertyKey, pd: PropertyDescriptor): any;
|
|
28
|
+
export declare function reactive(proto: object, prop: PropertyKey, pd: PropertyDescriptor): any;
|
|
29
|
+
export declare function cached(proto: object, prop: PropertyKey, pd: PropertyDescriptor): any;
|
|
32
30
|
export declare function options(value: Partial<MemberOptions>): F<any>;
|
|
@@ -22,53 +22,28 @@ export class ReactiveSystem {
|
|
|
22
22
|
static getLoggingHint(obj, full = false) { return ObjectHandle.getHint(obj, full); }
|
|
23
23
|
static setProfilingMode(isOn, options) { Mvcc.setProfilingMode(isOn, options); }
|
|
24
24
|
}
|
|
25
|
-
export function
|
|
26
|
-
return OperationImpl.proceedWithinGivenLaunch(undefined, func, ...args);
|
|
27
|
-
}
|
|
28
|
-
export function nonreactive2(p1, p2, p3) {
|
|
29
|
-
if (p1 instanceof Function) {
|
|
30
|
-
return OperationImpl.proceedWithinGivenLaunch(undefined, () => {
|
|
31
|
-
if (p2 !== undefined)
|
|
32
|
-
return Transaction.run(null, p1, ...p2);
|
|
33
|
-
else
|
|
34
|
-
return Transaction.run(null, p1);
|
|
35
|
-
});
|
|
36
|
-
}
|
|
37
|
-
else {
|
|
38
|
-
return OperationImpl.proceedWithinGivenLaunch(undefined, () => {
|
|
39
|
-
if (p3 !== undefined)
|
|
40
|
-
return Transaction.run(p1, p2, ...p3);
|
|
41
|
-
else
|
|
42
|
-
return Transaction.run(p1, p2);
|
|
43
|
-
});
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
export function sensitive(sensitivity, func, ...args) {
|
|
47
|
-
return Mvcc.sensitive(sensitivity, func, ...args);
|
|
48
|
-
}
|
|
49
|
-
export function contextually(p) {
|
|
50
|
-
throw new Error("not implemented yet");
|
|
51
|
-
}
|
|
52
|
-
export function atomicAction(p1, p2, p3) {
|
|
25
|
+
export function atomicRun(p1, p2, p3) {
|
|
53
26
|
if (p1 instanceof Function) {
|
|
54
27
|
if (p2 !== undefined)
|
|
55
28
|
return Transaction.run(null, p1, ...p2);
|
|
56
29
|
else
|
|
57
30
|
return Transaction.run(null, p1);
|
|
58
31
|
}
|
|
59
|
-
else
|
|
32
|
+
else {
|
|
60
33
|
if (p3 !== undefined)
|
|
61
34
|
return Transaction.run(p1, p2, ...p3);
|
|
62
35
|
else
|
|
63
36
|
return Transaction.run(p1, p2);
|
|
64
37
|
}
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
38
|
+
}
|
|
39
|
+
export function nonReactiveRun(func, ...args) {
|
|
40
|
+
return OperationImpl.proceedWithinGivenLaunch(undefined, func, ...args);
|
|
41
|
+
}
|
|
42
|
+
export function sensitiveRun(sensitivity, func, ...args) {
|
|
43
|
+
return Mvcc.sensitive(sensitivity, func, ...args);
|
|
44
|
+
}
|
|
45
|
+
export function contextualRun(p) {
|
|
46
|
+
throw new Error("not implemented yet");
|
|
72
47
|
}
|
|
73
48
|
export function unobservable(proto, prop) {
|
|
74
49
|
return Mvcc.decorateData(false, proto, prop);
|
|
@@ -76,21 +51,28 @@ export function unobservable(proto, prop) {
|
|
|
76
51
|
export function observable(proto, prop) {
|
|
77
52
|
return Mvcc.decorateData(true, proto, prop);
|
|
78
53
|
}
|
|
79
|
-
export function
|
|
54
|
+
export function atomic(proto, prop, pd) {
|
|
55
|
+
const opts = {
|
|
56
|
+
kind: Kind.atomicAction,
|
|
57
|
+
isolation: Isolation.joinToCurrentTransaction,
|
|
58
|
+
};
|
|
59
|
+
return Mvcc.decorateOperation(true, atomic, opts, proto, prop, pd);
|
|
60
|
+
}
|
|
61
|
+
export function reactive(proto, prop, pd) {
|
|
80
62
|
const opts = {
|
|
81
63
|
kind: Kind.reactiveProcess,
|
|
82
64
|
isolation: Isolation.joinAsNestedTransaction,
|
|
83
65
|
throttling: -1,
|
|
84
66
|
};
|
|
85
|
-
return Mvcc.decorateOperation(true,
|
|
67
|
+
return Mvcc.decorateOperation(true, reactive, opts, proto, prop, pd);
|
|
86
68
|
}
|
|
87
|
-
export function
|
|
69
|
+
export function cached(proto, prop, pd) {
|
|
88
70
|
const opts = {
|
|
89
71
|
kind: Kind.cachedResult,
|
|
90
72
|
isolation: Isolation.joinToCurrentTransaction,
|
|
91
73
|
noSideEffects: true,
|
|
92
74
|
};
|
|
93
|
-
return Mvcc.decorateOperation(true,
|
|
75
|
+
return Mvcc.decorateOperation(true, cached, opts, proto, prop, pd);
|
|
94
76
|
}
|
|
95
77
|
export function options(value) {
|
|
96
78
|
return Mvcc.decorateOperationParametrized(options, value);
|
package/build/dist/source/Ref.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { atomicRun, nonReactiveRun } from "./ReactiveSystem.js";
|
|
2
2
|
export function refs(owner) {
|
|
3
3
|
return new Proxy(owner, RefGettingProxy);
|
|
4
4
|
}
|
|
@@ -28,7 +28,7 @@ export class Ref {
|
|
|
28
28
|
this.owner[this.name][this.index] = value;
|
|
29
29
|
}
|
|
30
30
|
unobs() {
|
|
31
|
-
return
|
|
31
|
+
return nonReactiveRun(() => this.variable);
|
|
32
32
|
}
|
|
33
33
|
observe() {
|
|
34
34
|
return this.variable;
|
|
@@ -52,7 +52,7 @@ export class ToggleRef extends Ref {
|
|
|
52
52
|
toggle() {
|
|
53
53
|
const o = this.owner;
|
|
54
54
|
const p = this.name;
|
|
55
|
-
|
|
55
|
+
atomicRun({ hint: `toggle ${o.constructor.name}.${p}` }, () => {
|
|
56
56
|
const v = o[p];
|
|
57
57
|
const isOn = v === this.valueOn || (v instanceof Ref && this.valueOn instanceof Ref &&
|
|
58
58
|
Ref.sameRefs(v, this.valueOn));
|
|
@@ -16,7 +16,8 @@ export { Changeset } from "./core/Changeset.js";
|
|
|
16
16
|
export { Transaction } from "./core/Transaction.js";
|
|
17
17
|
export { Indicator } from "./core/Indicator.js";
|
|
18
18
|
export { Journal } from "./core/Journal.js";
|
|
19
|
-
export {
|
|
19
|
+
export { atomicRun, nonReactiveRun, sensitiveRun, contextualRun } from "./ReactiveSystem.js";
|
|
20
|
+
export { ReactiveSystem, observable, unobservable, atomic, reactive, cached, options } from "./ReactiveSystem.js";
|
|
20
21
|
export { ReactiveProcess } from "./Reaction.js";
|
|
21
22
|
export { ReactiveNode, Mode, Priority, BaseDriver, ReactiveNodeVariable } from "./core/ReactiveNode.js";
|
|
22
23
|
export type { Script, ScriptAsync, Handler, ReactiveNodeDecl, ReactiveNodeDriver, ReactiveNodeContext } from "./core/ReactiveNode.js";
|
package/build/dist/source/api.js
CHANGED
|
@@ -12,7 +12,8 @@ export { Changeset } from "./core/Changeset.js";
|
|
|
12
12
|
export { Transaction } from "./core/Transaction.js";
|
|
13
13
|
export { Indicator } from "./core/Indicator.js";
|
|
14
14
|
export { Journal } from "./core/Journal.js";
|
|
15
|
-
export {
|
|
15
|
+
export { atomicRun, nonReactiveRun, sensitiveRun, contextualRun } from "./ReactiveSystem.js";
|
|
16
|
+
export { ReactiveSystem, observable, unobservable, atomic, reactive, cached, options } from "./ReactiveSystem.js";
|
|
16
17
|
export { ReactiveProcess } from "./Reaction.js";
|
|
17
18
|
export { ReactiveNode, Mode, Priority, BaseDriver, ReactiveNodeVariable } from "./core/ReactiveNode.js";
|
|
18
19
|
export { Clock } from "./Clock.js";
|
|
@@ -22,7 +22,7 @@ import { emitLetters, getCallerInfo, proceedSyncOrAsync } from "../util/Utils.js
|
|
|
22
22
|
import { Isolation, Reentrance } from "../Options.js";
|
|
23
23
|
import { ObservableObject } from "../core/Mvcc.js";
|
|
24
24
|
import { Transaction } from "../core/Transaction.js";
|
|
25
|
-
import { ReactiveSystem, options, unobservable,
|
|
25
|
+
import { ReactiveSystem, options, unobservable, reactive, atomicRun, nonReactiveRun } from "../ReactiveSystem.js";
|
|
26
26
|
export var Mode;
|
|
27
27
|
(function (Mode) {
|
|
28
28
|
Mode[Mode["default"] = 0] = "default";
|
|
@@ -333,13 +333,13 @@ class ReactiveNodeImpl extends ReactiveNode {
|
|
|
333
333
|
static setNodeVariableValue(variable, value) {
|
|
334
334
|
const node = ReactiveNodeImpl.ownSlot.instance;
|
|
335
335
|
const owner = node.owner;
|
|
336
|
-
const hostCtx =
|
|
336
|
+
const hostCtx = nonReactiveRun(() => { var _a; return (_a = owner.context) === null || _a === void 0 ? void 0 : _a.value; });
|
|
337
337
|
if (value && value !== hostCtx) {
|
|
338
338
|
if (hostCtx)
|
|
339
339
|
node.outer = owner;
|
|
340
340
|
else
|
|
341
341
|
node.outer = owner.outer;
|
|
342
|
-
|
|
342
|
+
atomicRun({ isolation: Isolation.joinAsNestedTransaction }, () => {
|
|
343
343
|
const ctx = node.context;
|
|
344
344
|
if (ctx) {
|
|
345
345
|
ctx.variable = variable;
|
|
@@ -359,7 +359,7 @@ ReactiveNodeImpl.logging = undefined;
|
|
|
359
359
|
ReactiveNodeImpl.grandNodeCount = 0;
|
|
360
360
|
ReactiveNodeImpl.disposableNodeCount = 0;
|
|
361
361
|
__decorate([
|
|
362
|
-
|
|
362
|
+
reactive,
|
|
363
363
|
options({
|
|
364
364
|
reentrance: Reentrance.cancelAndWaitPrevious,
|
|
365
365
|
allowObsoleteToFinish: true,
|
|
@@ -484,7 +484,7 @@ function triggerUpdateViaSlot(slot) {
|
|
|
484
484
|
});
|
|
485
485
|
});
|
|
486
486
|
}
|
|
487
|
-
|
|
487
|
+
nonReactiveRun(node.update, node.declaration.triggers);
|
|
488
488
|
}
|
|
489
489
|
else
|
|
490
490
|
updateNow(slot);
|
|
@@ -493,7 +493,7 @@ function triggerUpdateViaSlot(slot) {
|
|
|
493
493
|
function mountOrRemountIfNecessary(node) {
|
|
494
494
|
const driver = node.driver;
|
|
495
495
|
if (node.stamp === Number.MAX_SAFE_INTEGER) {
|
|
496
|
-
|
|
496
|
+
nonReactiveRun(() => {
|
|
497
497
|
node.stamp = Number.MAX_SAFE_INTEGER - 1;
|
|
498
498
|
driver.runPreparation(node);
|
|
499
499
|
if (!node.has(Mode.manualMount)) {
|
|
@@ -504,7 +504,7 @@ function mountOrRemountIfNecessary(node) {
|
|
|
504
504
|
});
|
|
505
505
|
}
|
|
506
506
|
else if (node.isMoved && !node.has(Mode.manualMount) && node.host !== node)
|
|
507
|
-
|
|
507
|
+
nonReactiveRun(() => driver.runMount(node));
|
|
508
508
|
}
|
|
509
509
|
function updateNow(slot) {
|
|
510
510
|
const node = slot.instance;
|
|
@@ -537,7 +537,7 @@ function triggerFinalization(slot, isLeader, individual) {
|
|
|
537
537
|
if (individual && node.key !== node.declaration.key && !driver.isPartition)
|
|
538
538
|
console.log(`WARNING: it is recommended to assign explicit key for conditional element in order to avoid unexpected side effects: ${node.key}`);
|
|
539
539
|
node.stamp = ~node.stamp;
|
|
540
|
-
const childrenAreLeaders =
|
|
540
|
+
const childrenAreLeaders = nonReactiveRun(() => driver.runFinalization(node, isLeader));
|
|
541
541
|
if (node.has(Mode.autonomous)) {
|
|
542
542
|
slot.aux = undefined;
|
|
543
543
|
const last = gLastToDispose;
|
|
@@ -546,7 +546,7 @@ function triggerFinalization(slot, isLeader, individual) {
|
|
|
546
546
|
else
|
|
547
547
|
gFirstToDispose = gLastToDispose = slot;
|
|
548
548
|
if (gFirstToDispose === slot)
|
|
549
|
-
|
|
549
|
+
atomicRun({ isolation: Isolation.disjoinForInternalDisposal, hint: `runDisposalLoop(initiator=${slot.instance.key})` }, () => {
|
|
550
550
|
void runDisposalLoop().then(NOP, error => console.log(error));
|
|
551
551
|
});
|
|
552
552
|
}
|