rask-ui 0.18.0 → 0.18.2
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/dist/batch.d.ts.map +1 -1
- package/dist/batch.js +20 -3
- package/dist/component.d.ts +1 -0
- package/dist/component.d.ts.map +1 -1
- package/dist/component.js +26 -4
- package/package.json +1 -1
package/dist/batch.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"batch.d.ts","sourceRoot":"","sources":["../src/batch.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,cAAc,GAAG,CAAC,MAAM,IAAI,CAAC,GAAG;IAAE,QAAQ,EAAE,OAAO,CAAA;CAAE,CAAC;AA+BlE,wBAAgB,KAAK,CAAC,EAAE,EAAE,cAAc,QAgBvC;AAED,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,IAAI,
|
|
1
|
+
{"version":3,"file":"batch.d.ts","sourceRoot":"","sources":["../src/batch.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,cAAc,GAAG,CAAC,MAAM,IAAI,CAAC,GAAG;IAAE,QAAQ,EAAE,OAAO,CAAA;CAAE,CAAC;AA+BlE,wBAAgB,KAAK,CAAC,EAAE,EAAE,cAAc,QAgBvC;AAED,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,IAAI,QA6CvC"}
|
package/dist/batch.js
CHANGED
|
@@ -50,9 +50,26 @@ export function syncBatch(cb) {
|
|
|
50
50
|
syncQueueStack.pop();
|
|
51
51
|
throw e;
|
|
52
52
|
}
|
|
53
|
-
//
|
|
54
|
-
//
|
|
55
|
-
//
|
|
53
|
+
// CASCADING SYNCHRONOUS UPDATES
|
|
54
|
+
// ------------------------------
|
|
55
|
+
// Keep flushing the queue in a loop while it has work. This is critical for handling
|
|
56
|
+
// cascading reactive updates where one observer's notification triggers another.
|
|
57
|
+
//
|
|
58
|
+
// Example cascade: state → derived → component
|
|
59
|
+
// 1. User updates state in a syncBatch
|
|
60
|
+
// 2. Derived observer is notified and queued
|
|
61
|
+
// 3. Derived observer runs, marks derived as dirty
|
|
62
|
+
// 4. Derived's signal notifies component observers
|
|
63
|
+
// 5. Component observers are added to the SAME queue (because it's still on the stack)
|
|
64
|
+
// 6. Loop continues, flushing component observers
|
|
65
|
+
//
|
|
66
|
+
// By keeping the queue on the stack during the flush loop, all synchronous cascades
|
|
67
|
+
// are captured in the same batch. This ensures:
|
|
68
|
+
// - No updates escape to the async queue
|
|
69
|
+
// - Components render with fully updated derived values
|
|
70
|
+
// - Deduplication works across the entire cascade (same observer can't be queued twice)
|
|
71
|
+
//
|
|
72
|
+
// The loop terminates when all cascades have settled (queue is empty).
|
|
56
73
|
while (queue.length > 0) {
|
|
57
74
|
for (let i = 0; i < queue.length; i++) {
|
|
58
75
|
const cb = queue[i];
|
package/dist/component.d.ts
CHANGED
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,EAEL,KAAK,EACL,SAAS,EACT,KAAK,EACL,WAAW,EACZ,MAAM,SAAS,CAAC;AAEjB,OAAO,EAAsB,QAAQ,EAAU,MAAM,eAAe,CAAC;AAIrE,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,qBAAa,sBAAuB,SAAQ,SAAS;IAC3C,QAAQ,EAAE,8BAA8B,CAAC,GAAG,CAAC,CAAC;IACtD,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,aAAa,CAAS;IAC9B,QAAQ,WAML;IACH,OAAO,CAAC,aAAa,CAAc;IAEnC,qBAAqB,IAAI,OAAO;IAMhC,yBAAyB,CAAC,SAAS,EAAE,GAAG,GAAG,IAAI;
|
|
1
|
+
{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../src/component.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,EACL,SAAS,EACT,KAAK,EACL,WAAW,EACZ,MAAM,SAAS,CAAC;AAEjB,OAAO,EAAsB,QAAQ,EAAU,MAAM,eAAe,CAAC;AAIrE,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,qBAAa,sBAAuB,SAAQ,SAAS;IAC3C,QAAQ,EAAE,8BAA8B,CAAC,GAAG,CAAC,CAAC;IACtD,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,aAAa,CAAS;IAC9B,QAAQ,WAML;IACH,OAAO,CAAC,aAAa,CAAc;IAEnC,qBAAqB,IAAI,OAAO;IAMhC,kBAAkB,IAAI,IAAI;IAG1B,yBAAyB,CAAC,SAAS,EAAE,GAAG,GAAG,IAAI;IAe/C,MAAM;CAOP;AAID,wBAAgB,mBAAmB,2CAElC;AAED,wBAAgB,cAAc,CAAC,EAAE,EAAE,MAAM,IAAI,QAM5C;AAED,wBAAgB,UAAU,CAAC,EAAE,EAAE,MAAM,IAAI,QAMxC;AAED,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,qBAAqB,CAAC,CAAC,SAAS,KAAK,CAAC,GAAG,CAAC,CAAE,SAAQ,SAAS,CAAC,CAAC,CAAC;IACnE,KAAK,EAAE,6BAA6B,CAAC,CAAC,CAAC,CAAC;IAChD,OAAO,CAAC,QAAQ,CAAC,CAAc;IAC/B,OAAO,CAAC,aAAa,CAAC,CAAa;IAwBnC,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,aAAa,CAAS;IAE9B,QAAQ,WAOL;IAEH,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,eAAe;IAUf,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;IAcP,qBAAqB,IAAI,OAAO;IAMhC,MAAM;CAyCP;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,EAAE,MAAM,SAO9D"}
|
package/dist/component.js
CHANGED
|
@@ -19,6 +19,9 @@ export class RaskStatelessComponent extends Component {
|
|
|
19
19
|
this.isReconciling = false;
|
|
20
20
|
return shouldRender;
|
|
21
21
|
}
|
|
22
|
+
componentWillMount() {
|
|
23
|
+
this.reactiveProps = createReactiveProps(this);
|
|
24
|
+
}
|
|
22
25
|
componentWillReceiveProps(nextProps) {
|
|
23
26
|
this.isReconciling = true;
|
|
24
27
|
syncBatch(() => {
|
|
@@ -33,11 +36,8 @@ export class RaskStatelessComponent extends Component {
|
|
|
33
36
|
this.props = nextProps;
|
|
34
37
|
}
|
|
35
38
|
render() {
|
|
36
|
-
if (!this.reactiveProps) {
|
|
37
|
-
this.reactiveProps = createReactiveProps(this);
|
|
38
|
-
}
|
|
39
39
|
const stopObserving = this.observer.observe();
|
|
40
|
-
const result = this.renderFn(this.
|
|
40
|
+
const result = this.renderFn(this.reactiveProps);
|
|
41
41
|
stopObserving();
|
|
42
42
|
return result;
|
|
43
43
|
}
|
|
@@ -61,6 +61,28 @@ export function useCleanup(cb) {
|
|
|
61
61
|
export class RaskStatefulComponent extends Component {
|
|
62
62
|
renderFn;
|
|
63
63
|
reactiveProps;
|
|
64
|
+
// RECONCILIATION FLAGS
|
|
65
|
+
// --------------------
|
|
66
|
+
// These flags coordinate observer notifications with Inferno's reconciliation lifecycle
|
|
67
|
+
// to prevent double-rendering while ensuring effects can update state synchronously.
|
|
68
|
+
//
|
|
69
|
+
// isReconciling: Set to true during componentWillReceiveProps. When true, the observer
|
|
70
|
+
// will NOT call forceUpdate() immediately, avoiding a render while Inferno is already
|
|
71
|
+
// in the middle of updating this component (which would cause a double-render).
|
|
72
|
+
//
|
|
73
|
+
// isNotified: Tracks whether the observer was notified during reconciliation. If true,
|
|
74
|
+
// it means reactive prop updates or effects have modified state, and the component
|
|
75
|
+
// should render to reflect those changes.
|
|
76
|
+
//
|
|
77
|
+
// Flow example (props change triggers effect that updates state):
|
|
78
|
+
// 1. componentWillReceiveProps → isReconciling = true
|
|
79
|
+
// 2. Prop updates in syncBatch → reactive prop signals notify
|
|
80
|
+
// 3. Observer fires → sees isReconciling → sets isNotified = true, skips forceUpdate()
|
|
81
|
+
// 4. shouldComponentUpdate → checks isNotified → returns true
|
|
82
|
+
// 5. Component renders once with all updates (props + effect state changes)
|
|
83
|
+
//
|
|
84
|
+
// This ensures components render synchronously with fully updated state, without
|
|
85
|
+
// calling forceUpdate() at the wrong time during Inferno's reconciliation.
|
|
64
86
|
isNotified = false;
|
|
65
87
|
isReconciling = false;
|
|
66
88
|
observer = new Observer(() => {
|