xote 4.16.1 → 6.0.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 +19 -11
- package/dist/xote.cjs +9 -9
- package/dist/xote.mjs +1282 -1199
- package/dist/xote.umd.js +10 -10
- package/package.json +3 -3
- package/rescript.json +18 -3
- package/src/Computed.res +1 -0
- package/src/Computed.res.mjs +13 -0
- package/src/Effect.res +1 -0
- package/src/Effect.res.mjs +13 -0
- package/src/Html.res +28 -0
- package/src/Html.res.mjs +62 -0
- package/src/{Xote__Hydration.res → Hydration.res} +52 -50
- package/src/{Xote__Hydration.res.mjs → Hydration.res.mjs} +66 -68
- package/src/{Xote__Component.res → Node.res} +8 -31
- package/src/{Xote__Component.res.mjs → Node.res.mjs} +26 -88
- package/src/{Xote__ReactiveProp.res → ReactiveProp.res} +0 -1
- package/src/{Xote__ReactiveProp.res.mjs → ReactiveProp.res.mjs} +2 -2
- package/src/{Xote__Router.res → Router.res} +38 -32
- package/src/{Xote__Router.res.mjs → Router.res.mjs} +28 -28
- package/src/{Xote__SSR.res → SSR.res} +16 -18
- package/src/{Xote__SSR.res.mjs → SSR.res.mjs} +5 -8
- package/src/{Xote__SSRState.res → SSRState.res} +7 -6
- package/src/{Xote__SSRState.res.mjs → SSRState.res.mjs} +12 -12
- package/src/Signal.res +1 -0
- package/src/Signal.res.mjs +31 -0
- package/src/{Xote__JSX.res → XoteJSX.res} +22 -23
- package/src/{Xote__JSX.res.mjs → XoteJSX.res.mjs} +22 -24
- package/src/Xote.res +0 -43
- package/src/Xote.res.mjs +0 -114
- /package/src/{Xote__Route.res → Route.res} +0 -0
- /package/src/{Xote__Route.res.mjs → Route.res.mjs} +0 -0
- /package/src/{Xote__SSRContext.res → SSRContext.res} +0 -0
- /package/src/{Xote__SSRContext.res.mjs → SSRContext.res.mjs} +0 -0
|
@@ -1,8 +1,6 @@
|
|
|
1
|
-
open Signals
|
|
2
1
|
|
|
3
|
-
module
|
|
4
|
-
module
|
|
5
|
-
module Reactivity = Xote__Component.Reactivity
|
|
2
|
+
module DOM = Node.DOM
|
|
3
|
+
module Reactivity = Node.Reactivity
|
|
6
4
|
|
|
7
5
|
/* ============================================================================
|
|
8
6
|
* Hydration Options
|
|
@@ -31,6 +29,7 @@ module DOMWalker = {
|
|
|
31
29
|
|
|
32
30
|
/* Get child nodes as array */
|
|
33
31
|
let getChildNodes = (el: Dom.element): array<Dom.element> => {
|
|
32
|
+
ignore(el)
|
|
34
33
|
%raw(`Array.from(el.childNodes || [])`)
|
|
35
34
|
}
|
|
36
35
|
|
|
@@ -157,12 +156,12 @@ let logHydrationWarning = (msg: string): unit => {
|
|
|
157
156
|
* ============================================================================ */
|
|
158
157
|
|
|
159
158
|
/* Hydrate a single node, attaching reactivity to existing DOM */
|
|
160
|
-
let rec hydrateNode = (node:
|
|
159
|
+
let rec hydrateNode = (node: Node.node, domNode: Dom.element): unit => {
|
|
161
160
|
switch node {
|
|
162
|
-
|
|
|
161
|
+
| Node.Text(_content) => /* Static text - nothing to hydrate, DOM already has the content */
|
|
163
162
|
()
|
|
164
163
|
|
|
165
|
-
|
|
|
164
|
+
| Node.SignalText(signal) => {
|
|
166
165
|
/*
|
|
167
166
|
* Server rendered: <!--$-->text<!--/$-->
|
|
168
167
|
* We need to find the text node between markers and attach an effect
|
|
@@ -171,7 +170,7 @@ let rec hydrateNode = (node: Component.node, domNode: Dom.element): unit => {
|
|
|
171
170
|
Reactivity.setOwner(domNode, owner)
|
|
172
171
|
|
|
173
172
|
Reactivity.runWithOwner(owner, () => {
|
|
174
|
-
let disposer = Effect.
|
|
173
|
+
let disposer = Effect.runWithDisposer(() => {
|
|
175
174
|
DOM.setTextContent(domNode, Signal.get(signal))
|
|
176
175
|
None
|
|
177
176
|
})
|
|
@@ -179,7 +178,7 @@ let rec hydrateNode = (node: Component.node, domNode: Dom.element): unit => {
|
|
|
179
178
|
})
|
|
180
179
|
}
|
|
181
180
|
|
|
182
|
-
|
|
|
181
|
+
| Node.Fragment(children) => {
|
|
183
182
|
/* Fragment children are directly in the parent - hydrate each */
|
|
184
183
|
let walker = DOMWalker.make(domNode)
|
|
185
184
|
children->Array.forEach(child => {
|
|
@@ -187,7 +186,7 @@ let rec hydrateNode = (node: Component.node, domNode: Dom.element): unit => {
|
|
|
187
186
|
})
|
|
188
187
|
}
|
|
189
188
|
|
|
190
|
-
|
|
|
189
|
+
| Node.SignalFragment(signal) => {
|
|
191
190
|
/*
|
|
192
191
|
* Server rendered: <!--#-->...children...<!--/#-->
|
|
193
192
|
* We need to replace the content when the signal changes
|
|
@@ -196,7 +195,7 @@ let rec hydrateNode = (node: Component.node, domNode: Dom.element): unit => {
|
|
|
196
195
|
Reactivity.setOwner(domNode, owner)
|
|
197
196
|
|
|
198
197
|
Reactivity.runWithOwner(owner, () => {
|
|
199
|
-
let disposer = Effect.
|
|
198
|
+
let disposer = Effect.runWithDisposer(() => {
|
|
200
199
|
let children = Signal.get(signal)
|
|
201
200
|
|
|
202
201
|
/* Clear existing children */
|
|
@@ -213,7 +212,7 @@ let rec hydrateNode = (node: Component.node, domNode: Dom.element): unit => {
|
|
|
213
212
|
/* Render and append new children */
|
|
214
213
|
children->Array.forEach(
|
|
215
214
|
child => {
|
|
216
|
-
let childEl =
|
|
215
|
+
let childEl = Node.Render.render(child)
|
|
217
216
|
domNode->DOM.appendChild(childEl)
|
|
218
217
|
},
|
|
219
218
|
)
|
|
@@ -224,7 +223,7 @@ let rec hydrateNode = (node: Component.node, domNode: Dom.element): unit => {
|
|
|
224
223
|
})
|
|
225
224
|
}
|
|
226
225
|
|
|
227
|
-
|
|
|
226
|
+
| Node.Element({attrs, events, children}) => {
|
|
228
227
|
let owner = Reactivity.createOwner()
|
|
229
228
|
Reactivity.setOwner(domNode, owner)
|
|
230
229
|
|
|
@@ -232,9 +231,9 @@ let rec hydrateNode = (node: Component.node, domNode: Dom.element): unit => {
|
|
|
232
231
|
/* Hydrate reactive attributes */
|
|
233
232
|
attrs->Array.forEach(((key, value)) => {
|
|
234
233
|
switch value {
|
|
235
|
-
|
|
|
236
|
-
|
|
|
237
|
-
let disposer = Effect.
|
|
234
|
+
| Node.Static(_) => () /* Already rendered, nothing to do */
|
|
235
|
+
| Node.SignalValue(signal) => {
|
|
236
|
+
let disposer = Effect.runWithDisposer(
|
|
238
237
|
() => {
|
|
239
238
|
DOM.setAttrOrProp(domNode, key, Signal.get(signal))
|
|
240
239
|
None
|
|
@@ -242,8 +241,8 @@ let rec hydrateNode = (node: Component.node, domNode: Dom.element): unit => {
|
|
|
242
241
|
)
|
|
243
242
|
Reactivity.addDisposer(owner, disposer)
|
|
244
243
|
}
|
|
245
|
-
|
|
|
246
|
-
let disposer = Effect.
|
|
244
|
+
| Node.Compute(compute) => {
|
|
245
|
+
let disposer = Effect.runWithDisposer(
|
|
247
246
|
() => {
|
|
248
247
|
DOM.setAttrOrProp(domNode, key, compute())
|
|
249
248
|
None
|
|
@@ -267,7 +266,7 @@ let rec hydrateNode = (node: Component.node, domNode: Dom.element): unit => {
|
|
|
267
266
|
})
|
|
268
267
|
}
|
|
269
268
|
|
|
270
|
-
|
|
|
269
|
+
| Node.LazyComponent(fn) => {
|
|
271
270
|
/* Execute lazy component and hydrate its result */
|
|
272
271
|
let owner = Reactivity.createOwner()
|
|
273
272
|
let childNode = Reactivity.runWithOwner(owner, fn)
|
|
@@ -275,7 +274,7 @@ let rec hydrateNode = (node: Component.node, domNode: Dom.element): unit => {
|
|
|
275
274
|
hydrateNode(childNode, domNode)
|
|
276
275
|
}
|
|
277
276
|
|
|
278
|
-
|
|
|
277
|
+
| Node.KeyedList({signal, keyFn, renderItem}) => {
|
|
279
278
|
/*
|
|
280
279
|
* Server rendered: <!--kl--><!--k:key1-->item1<!--/k--><!--k:key2-->item2<!--/k--><!--/kl-->
|
|
281
280
|
* We need to set up the reconciliation effect
|
|
@@ -284,7 +283,7 @@ let rec hydrateNode = (node: Component.node, domNode: Dom.element): unit => {
|
|
|
284
283
|
Reactivity.setOwner(domNode, owner)
|
|
285
284
|
|
|
286
285
|
/* Build initial key -> element map from existing DOM */
|
|
287
|
-
let keyedItems: Dict.t<
|
|
286
|
+
let keyedItems: Dict.t<Node.Render.keyedItem<Obj.t>> = Dict.make()
|
|
288
287
|
let walker = DOMWalker.make(domNode)
|
|
289
288
|
|
|
290
289
|
/* Skip to list start marker */
|
|
@@ -355,7 +354,7 @@ let rec hydrateNode = (node: Component.node, domNode: Dom.element): unit => {
|
|
|
355
354
|
keysToRemove->Array.forEach(key => {
|
|
356
355
|
switch keyedItems->Dict.get(key) {
|
|
357
356
|
| Some(keyedItem) => {
|
|
358
|
-
|
|
357
|
+
Node.Render.disposeElement(keyedItem.element)
|
|
359
358
|
let _ = (%raw(`keyedItem.element.remove()`): unit)
|
|
360
359
|
keyedItems->Dict.delete(key)->ignore
|
|
361
360
|
}
|
|
@@ -364,7 +363,7 @@ let rec hydrateNode = (node: Component.node, domNode: Dom.element): unit => {
|
|
|
364
363
|
})
|
|
365
364
|
|
|
366
365
|
/* Build new order */
|
|
367
|
-
let newOrder: array<
|
|
366
|
+
let newOrder: array<Node.Render.keyedItem<Obj.t>> = []
|
|
368
367
|
let elementsToReplace: Dict.t<bool> = Dict.make()
|
|
369
368
|
|
|
370
369
|
newItems->Array.forEach(item => {
|
|
@@ -375,8 +374,8 @@ let rec hydrateNode = (node: Component.node, domNode: Dom.element): unit => {
|
|
|
375
374
|
if existing.item !== item {
|
|
376
375
|
elementsToReplace->Dict.set(key, true)
|
|
377
376
|
let node = renderItem(item)
|
|
378
|
-
let element =
|
|
379
|
-
let keyedItem:
|
|
377
|
+
let element = Node.Render.render(node)
|
|
378
|
+
let keyedItem: Node.Render.keyedItem<Obj.t> = {key, item, element}
|
|
380
379
|
newOrder->Array.push(keyedItem)->ignore
|
|
381
380
|
keyedItems->Dict.set(key, keyedItem)
|
|
382
381
|
} else {
|
|
@@ -384,8 +383,8 @@ let rec hydrateNode = (node: Component.node, domNode: Dom.element): unit => {
|
|
|
384
383
|
}
|
|
385
384
|
| None => {
|
|
386
385
|
let node = renderItem(item)
|
|
387
|
-
let element =
|
|
388
|
-
let keyedItem:
|
|
386
|
+
let element = Node.Render.render(node)
|
|
387
|
+
let keyedItem: Node.Render.keyedItem<Obj.t> = {key, item, element}
|
|
389
388
|
newOrder->Array.push(keyedItem)->ignore
|
|
390
389
|
keyedItems->Dict.set(key, keyedItem)
|
|
391
390
|
}
|
|
@@ -407,7 +406,7 @@ let rec hydrateNode = (node: Component.node, domNode: Dom.element): unit => {
|
|
|
407
406
|
elementsToReplace->Dict.get(keyedItem.key)->Option.getOr(false)
|
|
408
407
|
|
|
409
408
|
if needsReplacement {
|
|
410
|
-
|
|
409
|
+
Node.Render.disposeElement(elem)
|
|
411
410
|
DOM.replaceChild(domNode, keyedItem.element, elem)
|
|
412
411
|
marker := DOM.getNextSibling(keyedItem.element)
|
|
413
412
|
} else {
|
|
@@ -420,7 +419,7 @@ let rec hydrateNode = (node: Component.node, domNode: Dom.element): unit => {
|
|
|
420
419
|
})
|
|
421
420
|
}
|
|
422
421
|
|
|
423
|
-
let disposer = Effect.
|
|
422
|
+
let disposer = Effect.runWithDisposer(() => {
|
|
424
423
|
reconcile()
|
|
425
424
|
None
|
|
426
425
|
})
|
|
@@ -431,14 +430,14 @@ let rec hydrateNode = (node: Component.node, domNode: Dom.element): unit => {
|
|
|
431
430
|
}
|
|
432
431
|
|
|
433
432
|
/* Hydrate using a walker (for traversing children) */
|
|
434
|
-
and hydrateNodeWithWalker = (node:
|
|
433
|
+
and hydrateNodeWithWalker = (node: Node.node, walker: DOMWalker.t): unit => {
|
|
435
434
|
switch node {
|
|
436
|
-
|
|
|
435
|
+
| Node.Text(_) => {
|
|
437
436
|
/* Skip text node in DOM */
|
|
438
437
|
let _ = DOMWalker.next(walker)
|
|
439
438
|
}
|
|
440
439
|
|
|
441
|
-
|
|
|
440
|
+
| Node.SignalText(signal) => {
|
|
442
441
|
/* Find the marker, then hydrate the text node */
|
|
443
442
|
let _ = DOMWalker.skipUntilMarker(walker, "$")
|
|
444
443
|
|
|
@@ -449,7 +448,7 @@ and hydrateNodeWithWalker = (node: Component.node, walker: DOMWalker.t): unit =>
|
|
|
449
448
|
Reactivity.setOwner(textNode, owner)
|
|
450
449
|
|
|
451
450
|
Reactivity.runWithOwner(owner, () => {
|
|
452
|
-
let disposer = Effect.
|
|
451
|
+
let disposer = Effect.runWithDisposer(() => {
|
|
453
452
|
DOM.setTextContent(textNode, Signal.get(signal))
|
|
454
453
|
None
|
|
455
454
|
})
|
|
@@ -463,13 +462,13 @@ and hydrateNodeWithWalker = (node: Component.node, walker: DOMWalker.t): unit =>
|
|
|
463
462
|
}
|
|
464
463
|
}
|
|
465
464
|
|
|
466
|
-
|
|
|
465
|
+
| Node.Fragment(children) =>
|
|
467
466
|
/* Fragment children are inline - hydrate each */
|
|
468
467
|
children->Array.forEach(child => {
|
|
469
468
|
hydrateNodeWithWalker(child, walker)
|
|
470
469
|
})
|
|
471
470
|
|
|
472
|
-
|
|
|
471
|
+
| Node.SignalFragment(signal) => {
|
|
473
472
|
/* Find the container (div with display:contents in SSR, markers in comments) */
|
|
474
473
|
let _ = DOMWalker.skipUntilMarker(walker, "#")
|
|
475
474
|
|
|
@@ -482,7 +481,10 @@ and hydrateNodeWithWalker = (node: Component.node, walker: DOMWalker.t): unit =>
|
|
|
482
481
|
|
|
483
482
|
/* Get parent before moving nodes (we need it for insertion) */
|
|
484
483
|
let parent: option<Dom.element> = switch contentNodes->Array.get(0) {
|
|
485
|
-
| Some(firstNode) =>
|
|
484
|
+
| Some(firstNode) => {
|
|
485
|
+
ignore(firstNode)
|
|
486
|
+
%raw(`firstNode.parentNode`)
|
|
487
|
+
}
|
|
486
488
|
| None => None
|
|
487
489
|
}
|
|
488
490
|
|
|
@@ -503,17 +505,17 @@ and hydrateNodeWithWalker = (node: Component.node, walker: DOMWalker.t): unit =>
|
|
|
503
505
|
Reactivity.setOwner(container, owner)
|
|
504
506
|
|
|
505
507
|
Reactivity.runWithOwner(owner, () => {
|
|
506
|
-
let disposer = Effect.
|
|
508
|
+
let disposer = Effect.runWithDisposer(() => {
|
|
507
509
|
let children = Signal.get(signal)
|
|
508
510
|
|
|
509
511
|
/* Clear and re-render */
|
|
510
512
|
let childNodes: array<Dom.element> = %raw(`Array.from(container.childNodes || [])`)
|
|
511
|
-
childNodes->Array.forEach(
|
|
513
|
+
childNodes->Array.forEach(Node.Render.disposeElement)
|
|
512
514
|
let _ = (%raw(`container.innerHTML = ''`): unit)
|
|
513
515
|
|
|
514
516
|
children->Array.forEach(
|
|
515
517
|
child => {
|
|
516
|
-
let childEl =
|
|
518
|
+
let childEl = Node.Render.render(child)
|
|
517
519
|
container->DOM.appendChild(childEl)
|
|
518
520
|
},
|
|
519
521
|
)
|
|
@@ -524,7 +526,7 @@ and hydrateNodeWithWalker = (node: Component.node, walker: DOMWalker.t): unit =>
|
|
|
524
526
|
})
|
|
525
527
|
}
|
|
526
528
|
|
|
527
|
-
|
|
|
529
|
+
| Node.Element({attrs, events, children}) =>
|
|
528
530
|
switch DOMWalker.next(walker) {
|
|
529
531
|
| Some(domNode) => {
|
|
530
532
|
let owner = Reactivity.createOwner()
|
|
@@ -534,9 +536,9 @@ and hydrateNodeWithWalker = (node: Component.node, walker: DOMWalker.t): unit =>
|
|
|
534
536
|
/* Hydrate reactive attributes */
|
|
535
537
|
attrs->Array.forEach(((key, value)) => {
|
|
536
538
|
switch value {
|
|
537
|
-
|
|
|
538
|
-
|
|
|
539
|
-
let disposer = Effect.
|
|
539
|
+
| Node.Static(_) => ()
|
|
540
|
+
| Node.SignalValue(signal) => {
|
|
541
|
+
let disposer = Effect.runWithDisposer(
|
|
540
542
|
() => {
|
|
541
543
|
DOM.setAttrOrProp(domNode, key, Signal.get(signal))
|
|
542
544
|
None
|
|
@@ -544,8 +546,8 @@ and hydrateNodeWithWalker = (node: Component.node, walker: DOMWalker.t): unit =>
|
|
|
544
546
|
)
|
|
545
547
|
Reactivity.addDisposer(owner, disposer)
|
|
546
548
|
}
|
|
547
|
-
|
|
|
548
|
-
let disposer = Effect.
|
|
549
|
+
| Node.Compute(compute) => {
|
|
550
|
+
let disposer = Effect.runWithDisposer(
|
|
549
551
|
() => {
|
|
550
552
|
DOM.setAttrOrProp(domNode, key, compute())
|
|
551
553
|
None
|
|
@@ -571,7 +573,7 @@ and hydrateNodeWithWalker = (node: Component.node, walker: DOMWalker.t): unit =>
|
|
|
571
573
|
| None => logHydrationWarning("Missing DOM element for Element node")
|
|
572
574
|
}
|
|
573
575
|
|
|
574
|
-
|
|
|
576
|
+
| Node.LazyComponent(fn) => {
|
|
575
577
|
/* Skip the lazy component markers and hydrate the content */
|
|
576
578
|
let _ = DOMWalker.skipUntilMarker(walker, "lc")
|
|
577
579
|
|
|
@@ -581,12 +583,12 @@ and hydrateNodeWithWalker = (node: Component.node, walker: DOMWalker.t): unit =>
|
|
|
581
583
|
let _ = DOMWalker.skipUntilMarker(walker, "/lc")
|
|
582
584
|
}
|
|
583
585
|
|
|
584
|
-
|
|
|
586
|
+
| Node.KeyedList({signal, keyFn, renderItem: _}) => {
|
|
585
587
|
/* Find the keyed list in the DOM */
|
|
586
588
|
let _ = DOMWalker.skipUntilMarker(walker, "kl")
|
|
587
589
|
|
|
588
590
|
/* Parse existing keyed items from DOM */
|
|
589
|
-
let keyedItems: Dict.t<
|
|
591
|
+
let keyedItems: Dict.t<Node.Render.keyedItem<Obj.t>> = Dict.make()
|
|
590
592
|
|
|
591
593
|
let rec parseKeyedItems = () => {
|
|
592
594
|
switch DOMWalker.peek(walker) {
|
|
@@ -628,7 +630,7 @@ and hydrateNodeWithWalker = (node: Component.node, walker: DOMWalker.t): unit =>
|
|
|
628
630
|
|
|
629
631
|
/* Hydrate a server-rendered component */
|
|
630
632
|
let hydrate = (
|
|
631
|
-
component: unit =>
|
|
633
|
+
component: unit => Node.node,
|
|
632
634
|
container: Dom.element,
|
|
633
635
|
~options: hydrateOptions={},
|
|
634
636
|
): unit => {
|
|
@@ -663,7 +665,7 @@ let hydrate = (
|
|
|
663
665
|
|
|
664
666
|
/* Hydrate by element ID */
|
|
665
667
|
let hydrateById = (
|
|
666
|
-
component: unit =>
|
|
668
|
+
component: unit => Node.node,
|
|
667
669
|
containerId: string,
|
|
668
670
|
~options: hydrateOptions={},
|
|
669
671
|
): unit => {
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
// Generated by ReScript, PLEASE EDIT WITH CARE
|
|
2
2
|
|
|
3
|
-
import * as
|
|
3
|
+
import * as Node$Xote from "./Node.res.mjs";
|
|
4
|
+
import * as Effect$Xote from "./Effect.res.mjs";
|
|
5
|
+
import * as Signal$Xote from "./Signal.res.mjs";
|
|
4
6
|
import * as Stdlib_Dict from "@rescript/runtime/lib/es6/Stdlib_Dict.js";
|
|
5
7
|
import * as Stdlib_Option from "@rescript/runtime/lib/es6/Stdlib_Option.js";
|
|
6
|
-
import * as Xote__Component from "./Xote__Component.res.mjs";
|
|
7
8
|
import * as Primitive_option from "@rescript/runtime/lib/es6/Primitive_option.js";
|
|
8
9
|
import * as Primitive_exceptions from "@rescript/runtime/lib/es6/Primitive_exceptions.js";
|
|
9
10
|
|
|
@@ -120,7 +121,7 @@ let DOMWalker = {
|
|
|
120
121
|
collectUntilMarker: collectUntilMarker
|
|
121
122
|
};
|
|
122
123
|
|
|
123
|
-
let HydrationMismatch = /* @__PURE__ */Primitive_exceptions.create("
|
|
124
|
+
let HydrationMismatch = /* @__PURE__ */Primitive_exceptions.create("Hydration-Xote.HydrationMismatch");
|
|
124
125
|
|
|
125
126
|
function logHydrationWarning(msg) {
|
|
126
127
|
console.warn(`[Xote Hydration] ` + msg);
|
|
@@ -134,9 +135,9 @@ function hydrateNode(_node, domNode) {
|
|
|
134
135
|
let children = node.children;
|
|
135
136
|
let events = node.events;
|
|
136
137
|
let attrs = node.attrs;
|
|
137
|
-
let owner =
|
|
138
|
-
|
|
139
|
-
return
|
|
138
|
+
let owner = Node$Xote.Reactivity.createOwner();
|
|
139
|
+
Node$Xote.Reactivity.setOwner(domNode, owner);
|
|
140
|
+
return Node$Xote.Reactivity.runWithOwner(owner, () => {
|
|
140
141
|
attrs.forEach(param => {
|
|
141
142
|
let value = param[1];
|
|
142
143
|
let key = param[0];
|
|
@@ -145,16 +146,16 @@ function hydrateNode(_node, domNode) {
|
|
|
145
146
|
return;
|
|
146
147
|
case "SignalValue" :
|
|
147
148
|
let signal = value._0;
|
|
148
|
-
let disposer =
|
|
149
|
-
|
|
149
|
+
let disposer = Effect$Xote.runWithDisposer(() => {
|
|
150
|
+
Node$Xote.DOM.setAttrOrProp(domNode, key, Signal$Xote.get(signal));
|
|
150
151
|
}, undefined);
|
|
151
|
-
return
|
|
152
|
+
return Node$Xote.Reactivity.addDisposer(owner, disposer);
|
|
152
153
|
case "Compute" :
|
|
153
154
|
let compute = value._0;
|
|
154
|
-
let disposer$1 =
|
|
155
|
-
|
|
155
|
+
let disposer$1 = Effect$Xote.runWithDisposer(() => {
|
|
156
|
+
Node$Xote.DOM.setAttrOrProp(domNode, key, compute());
|
|
156
157
|
}, undefined);
|
|
157
|
-
return
|
|
158
|
+
return Node$Xote.Reactivity.addDisposer(owner, disposer$1);
|
|
158
159
|
}
|
|
159
160
|
});
|
|
160
161
|
events.forEach(param => {
|
|
@@ -167,13 +168,13 @@ function hydrateNode(_node, domNode) {
|
|
|
167
168
|
return;
|
|
168
169
|
case "SignalText" :
|
|
169
170
|
let signal = node._0;
|
|
170
|
-
let owner$1 =
|
|
171
|
-
|
|
172
|
-
return
|
|
173
|
-
let disposer =
|
|
174
|
-
domNode.textContent =
|
|
171
|
+
let owner$1 = Node$Xote.Reactivity.createOwner();
|
|
172
|
+
Node$Xote.Reactivity.setOwner(domNode, owner$1);
|
|
173
|
+
return Node$Xote.Reactivity.runWithOwner(owner$1, () => {
|
|
174
|
+
let disposer = Effect$Xote.runWithDisposer(() => {
|
|
175
|
+
domNode.textContent = Signal$Xote.get(signal);
|
|
175
176
|
}, undefined);
|
|
176
|
-
|
|
177
|
+
Node$Xote.Reactivity.addDisposer(owner$1, disposer);
|
|
177
178
|
});
|
|
178
179
|
case "Fragment" :
|
|
179
180
|
let walker = make(domNode);
|
|
@@ -181,33 +182,33 @@ function hydrateNode(_node, domNode) {
|
|
|
181
182
|
return;
|
|
182
183
|
case "SignalFragment" :
|
|
183
184
|
let signal$1 = node._0;
|
|
184
|
-
let owner$2 =
|
|
185
|
-
|
|
186
|
-
return
|
|
187
|
-
let disposer =
|
|
188
|
-
let children =
|
|
185
|
+
let owner$2 = Node$Xote.Reactivity.createOwner();
|
|
186
|
+
Node$Xote.Reactivity.setOwner(domNode, owner$2);
|
|
187
|
+
return Node$Xote.Reactivity.runWithOwner(owner$2, () => {
|
|
188
|
+
let disposer = Effect$Xote.runWithDisposer(() => {
|
|
189
|
+
let children = Signal$Xote.get(signal$1);
|
|
189
190
|
let childNodes = (Array.from(domNode.childNodes || []));
|
|
190
|
-
childNodes.forEach(child =>
|
|
191
|
+
childNodes.forEach(child => Node$Xote.Reactivity.disposeOwner(Stdlib_Option.getOr(Node$Xote.Reactivity.getOwner(child), Node$Xote.Reactivity.createOwner())));
|
|
191
192
|
((domNode.innerHTML = ''));
|
|
192
193
|
children.forEach(child => {
|
|
193
|
-
let childEl =
|
|
194
|
+
let childEl = Node$Xote.Render.render(child);
|
|
194
195
|
domNode.appendChild(childEl);
|
|
195
196
|
});
|
|
196
197
|
}, undefined);
|
|
197
|
-
|
|
198
|
+
Node$Xote.Reactivity.addDisposer(owner$2, disposer);
|
|
198
199
|
});
|
|
199
200
|
case "LazyComponent" :
|
|
200
|
-
let owner$3 =
|
|
201
|
-
let childNode =
|
|
202
|
-
|
|
201
|
+
let owner$3 = Node$Xote.Reactivity.createOwner();
|
|
202
|
+
let childNode = Node$Xote.Reactivity.runWithOwner(owner$3, node._0);
|
|
203
|
+
Node$Xote.Reactivity.setOwner(domNode, owner$3);
|
|
203
204
|
_node = childNode;
|
|
204
205
|
continue;
|
|
205
206
|
case "KeyedList" :
|
|
206
207
|
let renderItem = node.renderItem;
|
|
207
208
|
let keyFn = node.keyFn;
|
|
208
209
|
let signal$2 = node.signal;
|
|
209
|
-
let owner$4 =
|
|
210
|
-
|
|
210
|
+
let owner$4 = Node$Xote.Reactivity.createOwner();
|
|
211
|
+
Node$Xote.Reactivity.setOwner(domNode, owner$4);
|
|
211
212
|
let keyedItems = {};
|
|
212
213
|
let walker$1 = make(domNode);
|
|
213
214
|
skipUntilMarker(walker$1, "kl");
|
|
@@ -231,7 +232,7 @@ function hydrateNode(_node, domNode) {
|
|
|
231
232
|
let itemElements = collectUntilMarker(walker$1, "/k");
|
|
232
233
|
let element = itemElements.find(el => el.nodeType === 1);
|
|
233
234
|
if (element !== undefined) {
|
|
234
|
-
let items =
|
|
235
|
+
let items = Signal$Xote.peek(signal$2);
|
|
235
236
|
let item = Stdlib_Option.getOr(items.find(i => keyFn(i) === key), {});
|
|
236
237
|
keyedItems[key] = {
|
|
237
238
|
key: key,
|
|
@@ -243,7 +244,7 @@ function hydrateNode(_node, domNode) {
|
|
|
243
244
|
};
|
|
244
245
|
};
|
|
245
246
|
parseKeyedItems();
|
|
246
|
-
return
|
|
247
|
+
return Node$Xote.Reactivity.runWithOwner(owner$4, () => {
|
|
247
248
|
let startAnchor = document.createComment(" keyed-list-start ");
|
|
248
249
|
let endAnchor = document.createComment(" keyed-list-end ");
|
|
249
250
|
let firstChild = domNode.firstChild;
|
|
@@ -254,7 +255,7 @@ function hydrateNode(_node, domNode) {
|
|
|
254
255
|
}
|
|
255
256
|
domNode.appendChild(endAnchor);
|
|
256
257
|
let reconcile = () => {
|
|
257
|
-
let newItems =
|
|
258
|
+
let newItems = Signal$Xote.get(signal$2);
|
|
258
259
|
let newKeyMap = {};
|
|
259
260
|
newItems.forEach(item => {
|
|
260
261
|
newKeyMap[keyFn(item)] = item;
|
|
@@ -272,7 +273,7 @@ function hydrateNode(_node, domNode) {
|
|
|
272
273
|
keysToRemove.forEach(key => {
|
|
273
274
|
let keyedItem = keyedItems[key];
|
|
274
275
|
if (keyedItem !== undefined) {
|
|
275
|
-
|
|
276
|
+
Node$Xote.Render.disposeElement(keyedItem.element);
|
|
276
277
|
((keyedItem.element.remove()));
|
|
277
278
|
Stdlib_Dict.$$delete(keyedItems, key);
|
|
278
279
|
return;
|
|
@@ -287,7 +288,7 @@ function hydrateNode(_node, domNode) {
|
|
|
287
288
|
if (existing.item !== item) {
|
|
288
289
|
elementsToReplace[key] = true;
|
|
289
290
|
let node = renderItem(item);
|
|
290
|
-
let element =
|
|
291
|
+
let element = Node$Xote.Render.render(node);
|
|
291
292
|
let keyedItem = {
|
|
292
293
|
key: key,
|
|
293
294
|
item: item,
|
|
@@ -301,7 +302,7 @@ function hydrateNode(_node, domNode) {
|
|
|
301
302
|
return;
|
|
302
303
|
}
|
|
303
304
|
let node$1 = renderItem(item);
|
|
304
|
-
let element$1 =
|
|
305
|
+
let element$1 = Node$Xote.Render.render(node$1);
|
|
305
306
|
let keyedItem$1 = {
|
|
306
307
|
key: key,
|
|
307
308
|
item: item,
|
|
@@ -329,7 +330,7 @@ function hydrateNode(_node, domNode) {
|
|
|
329
330
|
}
|
|
330
331
|
let needsReplacement = Stdlib_Option.getOr(elementsToReplace[keyedItem.key], false);
|
|
331
332
|
if (needsReplacement) {
|
|
332
|
-
|
|
333
|
+
Node$Xote.Render.disposeElement(currentElement);
|
|
333
334
|
domNode.replaceChild(keyedItem.element, currentElement);
|
|
334
335
|
marker.contents = keyedItem.element.nextSibling;
|
|
335
336
|
} else {
|
|
@@ -338,10 +339,10 @@ function hydrateNode(_node, domNode) {
|
|
|
338
339
|
}
|
|
339
340
|
});
|
|
340
341
|
};
|
|
341
|
-
let disposer =
|
|
342
|
+
let disposer = Effect$Xote.runWithDisposer(() => {
|
|
342
343
|
reconcile();
|
|
343
344
|
}, undefined);
|
|
344
|
-
|
|
345
|
+
Node$Xote.Reactivity.addDisposer(owner$4, disposer);
|
|
345
346
|
});
|
|
346
347
|
}
|
|
347
348
|
};
|
|
@@ -358,9 +359,9 @@ function hydrateNodeWithWalker(node, walker) {
|
|
|
358
359
|
return logHydrationWarning("Missing DOM element for Element node");
|
|
359
360
|
}
|
|
360
361
|
let domNode$1 = Primitive_option.valFromOption(domNode);
|
|
361
|
-
let owner =
|
|
362
|
-
|
|
363
|
-
return
|
|
362
|
+
let owner = Node$Xote.Reactivity.createOwner();
|
|
363
|
+
Node$Xote.Reactivity.setOwner(domNode$1, owner);
|
|
364
|
+
return Node$Xote.Reactivity.runWithOwner(owner, () => {
|
|
364
365
|
attrs.forEach(param => {
|
|
365
366
|
let value = param[1];
|
|
366
367
|
let key = param[0];
|
|
@@ -369,16 +370,16 @@ function hydrateNodeWithWalker(node, walker) {
|
|
|
369
370
|
return;
|
|
370
371
|
case "SignalValue" :
|
|
371
372
|
let signal = value._0;
|
|
372
|
-
let disposer =
|
|
373
|
-
|
|
373
|
+
let disposer = Effect$Xote.runWithDisposer(() => {
|
|
374
|
+
Node$Xote.DOM.setAttrOrProp(domNode$1, key, Signal$Xote.get(signal));
|
|
374
375
|
}, undefined);
|
|
375
|
-
return
|
|
376
|
+
return Node$Xote.Reactivity.addDisposer(owner, disposer);
|
|
376
377
|
case "Compute" :
|
|
377
378
|
let compute = value._0;
|
|
378
|
-
let disposer$1 =
|
|
379
|
-
|
|
379
|
+
let disposer$1 = Effect$Xote.runWithDisposer(() => {
|
|
380
|
+
Node$Xote.DOM.setAttrOrProp(domNode$1, key, compute());
|
|
380
381
|
}, undefined);
|
|
381
|
-
return
|
|
382
|
+
return Node$Xote.Reactivity.addDisposer(owner, disposer$1);
|
|
382
383
|
}
|
|
383
384
|
});
|
|
384
385
|
events.forEach(param => {
|
|
@@ -398,13 +399,13 @@ function hydrateNodeWithWalker(node, walker) {
|
|
|
398
399
|
return logHydrationWarning("Missing text node for SignalText");
|
|
399
400
|
}
|
|
400
401
|
let textNode$1 = Primitive_option.valFromOption(textNode);
|
|
401
|
-
let owner$1 =
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
let disposer =
|
|
405
|
-
textNode$1.textContent =
|
|
402
|
+
let owner$1 = Node$Xote.Reactivity.createOwner();
|
|
403
|
+
Node$Xote.Reactivity.setOwner(textNode$1, owner$1);
|
|
404
|
+
Node$Xote.Reactivity.runWithOwner(owner$1, () => {
|
|
405
|
+
let disposer = Effect$Xote.runWithDisposer(() => {
|
|
406
|
+
textNode$1.textContent = Signal$Xote.get(signal);
|
|
406
407
|
}, undefined);
|
|
407
|
-
|
|
408
|
+
Node$Xote.Reactivity.addDisposer(owner$1, disposer);
|
|
408
409
|
});
|
|
409
410
|
skipUntilMarker(walker, "/$");
|
|
410
411
|
return;
|
|
@@ -431,20 +432,20 @@ function hydrateNodeWithWalker(node, walker) {
|
|
|
431
432
|
p.appendChild(container);
|
|
432
433
|
}
|
|
433
434
|
}
|
|
434
|
-
let owner$2 =
|
|
435
|
-
|
|
436
|
-
return
|
|
437
|
-
let disposer =
|
|
438
|
-
let children =
|
|
435
|
+
let owner$2 = Node$Xote.Reactivity.createOwner();
|
|
436
|
+
Node$Xote.Reactivity.setOwner(container, owner$2);
|
|
437
|
+
return Node$Xote.Reactivity.runWithOwner(owner$2, () => {
|
|
438
|
+
let disposer = Effect$Xote.runWithDisposer(() => {
|
|
439
|
+
let children = Signal$Xote.get(signal$1);
|
|
439
440
|
let childNodes = (Array.from(container.childNodes || []));
|
|
440
|
-
childNodes.forEach(
|
|
441
|
+
childNodes.forEach(Node$Xote.Render.disposeElement);
|
|
441
442
|
((container.innerHTML = ''));
|
|
442
443
|
children.forEach(child => {
|
|
443
|
-
let childEl =
|
|
444
|
+
let childEl = Node$Xote.Render.render(child);
|
|
444
445
|
container.appendChild(childEl);
|
|
445
446
|
});
|
|
446
447
|
}, undefined);
|
|
447
|
-
|
|
448
|
+
Node$Xote.Reactivity.addDisposer(owner$2, disposer);
|
|
448
449
|
});
|
|
449
450
|
case "LazyComponent" :
|
|
450
451
|
skipUntilMarker(walker, "lc");
|
|
@@ -477,7 +478,7 @@ function hydrateNodeWithWalker(node, walker) {
|
|
|
477
478
|
let itemElements = collectUntilMarker(walker, "/k");
|
|
478
479
|
let element = itemElements.find(el => el.nodeType === 1);
|
|
479
480
|
if (element !== undefined) {
|
|
480
|
-
let items =
|
|
481
|
+
let items = Signal$Xote.peek(signal$2);
|
|
481
482
|
let item = Stdlib_Option.getOr(items.find(i => keyFn(i) === key), {});
|
|
482
483
|
keyedItems[key] = {
|
|
483
484
|
key: key,
|
|
@@ -521,14 +522,11 @@ function hydrateById(component, containerId, optionsOpt) {
|
|
|
521
522
|
}
|
|
522
523
|
}
|
|
523
524
|
|
|
524
|
-
let Component;
|
|
525
|
-
|
|
526
525
|
let DOM;
|
|
527
526
|
|
|
528
527
|
let Reactivity;
|
|
529
528
|
|
|
530
529
|
export {
|
|
531
|
-
Component,
|
|
532
530
|
DOM,
|
|
533
531
|
Reactivity,
|
|
534
532
|
DOMWalker,
|
|
@@ -539,4 +537,4 @@ export {
|
|
|
539
537
|
hydrate,
|
|
540
538
|
hydrateById,
|
|
541
539
|
}
|
|
542
|
-
/*
|
|
540
|
+
/* Node-Xote Not a pure module */
|