ripple 1.0.0 → 1.0.1

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.
Files changed (49) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/package.json +4 -4
  3. package/src/runtime/index-client.js +4 -0
  4. package/src/runtime/internal/client/hmr.js +1 -1
  5. package/src/runtime/internal/client/hydration.js +14 -0
  6. package/src/runtime/internal/client/runtime.js +127 -31
  7. package/src/runtime/internal/client/types.d.ts +3 -33
  8. package/src/runtime/internal/server/blocks.js +21 -1
  9. package/src/runtime/internal/server/index.js +299 -34
  10. package/src/runtime/internal/server/types.d.ts +3 -31
  11. package/src/runtime/reactive-value.js +1 -0
  12. package/src/utils/escaping.js +11 -0
  13. package/src/utils/track-async-serialization.js +9 -0
  14. package/tests/client/async-suspend.test.tsrx +11 -1
  15. package/tests/client/compiler/compiler.basic.test.tsrx +3 -3
  16. package/tests/client/track-async-hydration.test.tsrx +54 -0
  17. package/tests/hydration/compiled/client/basic.js +1 -1
  18. package/tests/hydration/compiled/client/events.js +8 -8
  19. package/tests/hydration/compiled/client/for.js +22 -24
  20. package/tests/hydration/compiled/client/head.js +6 -6
  21. package/tests/hydration/compiled/client/hmr.js +1 -1
  22. package/tests/hydration/compiled/client/html.js +1 -1
  23. package/tests/hydration/compiled/client/if-children.js +7 -7
  24. package/tests/hydration/compiled/client/if.js +5 -5
  25. package/tests/hydration/compiled/client/mixed-control-flow.js +4 -4
  26. package/tests/hydration/compiled/client/portal.js +1 -1
  27. package/tests/hydration/compiled/client/reactivity.js +9 -9
  28. package/tests/hydration/compiled/client/return.js +23 -23
  29. package/tests/hydration/compiled/client/switch.js +4 -4
  30. package/tests/hydration/compiled/client/track-async-serialization.js +390 -0
  31. package/tests/hydration/compiled/client/try.js +2 -2
  32. package/tests/hydration/compiled/server/basic.js +1 -1
  33. package/tests/hydration/compiled/server/events.js +8 -8
  34. package/tests/hydration/compiled/server/for.js +34 -28
  35. package/tests/hydration/compiled/server/head.js +6 -6
  36. package/tests/hydration/compiled/server/hmr.js +1 -1
  37. package/tests/hydration/compiled/server/html.js +1 -1
  38. package/tests/hydration/compiled/server/if-children.js +7 -7
  39. package/tests/hydration/compiled/server/if.js +5 -5
  40. package/tests/hydration/compiled/server/mixed-control-flow.js +4 -4
  41. package/tests/hydration/compiled/server/portal.js +1 -1
  42. package/tests/hydration/compiled/server/reactivity.js +9 -9
  43. package/tests/hydration/compiled/server/return.js +11 -11
  44. package/tests/hydration/compiled/server/switch.js +4 -4
  45. package/tests/hydration/compiled/server/track-async-serialization.js +502 -0
  46. package/tests/hydration/compiled/server/try.js +2 -2
  47. package/tests/hydration/components/track-async-serialization.tsrx +116 -0
  48. package/tests/hydration/track-async-serialization.test.js +127 -0
  49. package/tests/server/track-async-serialization.test.tsrx +185 -0
@@ -34,7 +34,7 @@ export function StaticTitle() {
34
34
  export function ReactiveTitle() {
35
35
  _$_.push_component();
36
36
 
37
- let lazy = _$_.track('Initial Title');
37
+ let lazy = _$_.track('Initial Title', 'cbca63e3');
38
38
 
39
39
  _$_.regular_block(() => {
40
40
  _$_.output_push('<div');
@@ -107,7 +107,7 @@ export function MultipleHeadElements() {
107
107
  export function ReactiveMetaTags() {
108
108
  _$_.push_component();
109
109
 
110
- let lazy_1 = _$_.track('Initial description');
110
+ let lazy_1 = _$_.track('Initial description', '38bfa3b2');
111
111
 
112
112
  _$_.regular_block(() => {
113
113
  _$_.output_push('<div');
@@ -141,7 +141,7 @@ export function ReactiveMetaTags() {
141
141
  export function TitleWithTemplate() {
142
142
  _$_.push_component();
143
143
 
144
- let lazy_2 = _$_.track('World');
144
+ let lazy_2 = _$_.track('World', 'f3925cd5');
145
145
 
146
146
  _$_.regular_block(() => {
147
147
  _$_.output_push('<div');
@@ -199,8 +199,8 @@ export function EmptyTitle() {
199
199
  export function ConditionalTitle() {
200
200
  _$_.push_component();
201
201
 
202
- let lazy_3 = _$_.track(true);
203
- let lazy_4 = _$_.track('Main Page');
202
+ let lazy_3 = _$_.track(true, 'ff71bf1f');
203
+ let lazy_4 = _$_.track('Main Page', '7cd7d671');
204
204
 
205
205
  _$_.regular_block(() => {
206
206
  _$_.output_push('<div');
@@ -230,7 +230,7 @@ export function ConditionalTitle() {
230
230
  export function ComputedTitle() {
231
231
  _$_.push_component();
232
232
 
233
- let lazy_5 = _$_.track(0);
233
+ let lazy_5 = _$_.track(0, 'b6a48610');
234
234
  let prefix = 'Count: ';
235
235
 
236
236
  _$_.regular_block(() => {
@@ -41,7 +41,7 @@ export function Layout({ children }) {
41
41
  export function Content() {
42
42
  _$_.push_component();
43
43
 
44
- let lazy = _$_.track(true);
44
+ let lazy = _$_.track(true, '0bdb1500');
45
45
 
46
46
  _$_.regular_block(() => {
47
47
  _$_.output_push('<div');
@@ -907,7 +907,7 @@ function NavItem({ href, text: label, active = false }) {
907
907
  function SidebarSection({ title, children }) {
908
908
  _$_.push_component();
909
909
 
910
- let lazy = _$_.track(true);
910
+ let lazy = _$_.track(true, '6ac6906f');
911
911
 
912
912
  _$_.regular_block(() => {
913
913
  _$_.output_push('<section');
@@ -6,7 +6,7 @@ import { track } from 'ripple/server';
6
6
  export function IfWithChildren({ children }) {
7
7
  _$_.push_component();
8
8
 
9
- let lazy = _$_.track(true);
9
+ let lazy = _$_.track(true, 'c64714b1');
10
10
 
11
11
  _$_.regular_block(() => {
12
12
  _$_.output_push('<div');
@@ -106,7 +106,7 @@ export function TestIfWithChildren() {
106
106
  export function IfWithStaticChildren() {
107
107
  _$_.push_component();
108
108
 
109
- let lazy_1 = _$_.track(true);
109
+ let lazy_1 = _$_.track(true, '3bba8f77');
110
110
 
111
111
  _$_.regular_block(() => {
112
112
  _$_.output_push('<div');
@@ -165,7 +165,7 @@ export function IfWithStaticChildren() {
165
165
  export function IfWithSiblingsAndChildren({ children }) {
166
166
  _$_.push_component();
167
167
 
168
- let lazy_2 = _$_.track(true);
168
+ let lazy_2 = _$_.track(true, 'a1b8fb4c');
169
169
 
170
170
  _$_.regular_block(() => {
171
171
  _$_.output_push('<section');
@@ -282,7 +282,7 @@ export function TestIfWithSiblingsAndChildren() {
282
282
  export function ElementWithChildrenThenIf() {
283
283
  _$_.push_component();
284
284
 
285
- let lazy_3 = _$_.track(true);
285
+ let lazy_3 = _$_.track(true, '7cd4817b');
286
286
 
287
287
  _$_.regular_block(() => {
288
288
  _$_.output_push('<div');
@@ -353,7 +353,7 @@ export function ElementWithChildrenThenIf() {
353
353
  export function DeepNestingThenIf() {
354
354
  _$_.push_component();
355
355
 
356
- let lazy_4 = _$_.track(true);
356
+ let lazy_4 = _$_.track(true, '923116be');
357
357
 
358
358
  _$_.regular_block(() => {
359
359
  _$_.output_push('<section');
@@ -439,7 +439,7 @@ export function DeepNestingThenIf() {
439
439
  export function DomElementChildrenThenSibling() {
440
440
  _$_.push_component();
441
441
 
442
- let lazy_5 = _$_.track('code');
442
+ let lazy_5 = _$_.track('code', '33a1e97f');
443
443
 
444
444
  _$_.regular_block(() => {
445
445
  _$_.output_push('<div');
@@ -519,7 +519,7 @@ export function DomElementChildrenThenSibling() {
519
519
  export function DomChildrenThenStaticSiblings() {
520
520
  _$_.push_component();
521
521
 
522
- let lazy_6 = _$_.track(0);
522
+ let lazy_6 = _$_.track(0, '0ea64305');
523
523
 
524
524
  _$_.regular_block(() => {
525
525
  _$_.output_push('<div');
@@ -94,7 +94,7 @@ export function IfElse() {
94
94
  export function ReactiveIf() {
95
95
  _$_.push_component();
96
96
 
97
- let lazy = _$_.track(true);
97
+ let lazy = _$_.track(true, '19a16ff0');
98
98
 
99
99
  _$_.regular_block(() => {
100
100
  _$_.output_push('<button');
@@ -132,7 +132,7 @@ export function ReactiveIf() {
132
132
  export function ReactiveIfElse() {
133
133
  _$_.push_component();
134
134
 
135
- let lazy_1 = _$_.track(false);
135
+ let lazy_1 = _$_.track(false, '41177f39');
136
136
 
137
137
  _$_.regular_block(() => {
138
138
  _$_.output_push('<button');
@@ -180,8 +180,8 @@ export function ReactiveIfElse() {
180
180
  export function NestedIf() {
181
181
  _$_.push_component();
182
182
 
183
- let lazy_2 = _$_.track(true);
184
- let lazy_3 = _$_.track(true);
183
+ let lazy_2 = _$_.track(true, '7894e1df');
184
+ let lazy_3 = _$_.track(true, 'f21b8c26');
185
185
 
186
186
  _$_.regular_block(() => {
187
187
  _$_.output_push('<button');
@@ -246,7 +246,7 @@ export function NestedIf() {
246
246
  export function IfElseIfChain() {
247
247
  _$_.push_component();
248
248
 
249
- let lazy_4 = _$_.track('loading');
249
+ let lazy_4 = _$_.track('loading', '4c69c94a');
250
250
 
251
251
  _$_.regular_block(() => {
252
252
  _$_.output_push('<div');
@@ -109,9 +109,9 @@ export function MixedControlFlowStatic() {
109
109
  export function MixedControlFlowReactive() {
110
110
  _$_.push_component();
111
111
 
112
- let lazy = _$_.track(true);
113
- let lazy_1 = _$_.track('a');
114
- let lazy_2 = _$_.track([{ id: 1, label: 'One' }, { id: 2, label: 'Two' }]);
112
+ let lazy = _$_.track(true, '5ae53d26');
113
+ let lazy_1 = _$_.track('a', '5b53eda2');
114
+ let lazy_2 = _$_.track([{ id: 1, label: 'One' }, { id: 2, label: 'Two' }], '7890dad6');
115
115
 
116
116
  _$_.regular_block(() => {
117
117
  _$_.output_push('<button');
@@ -327,7 +327,7 @@ export function MixedControlFlowAsyncPending() {
327
327
  function AsyncRow({ label }) {
328
328
  _$_.push_component();
329
329
 
330
- let lazy_3 = _$_.track_async(() => Promise.resolve(label));
330
+ let lazy_3 = _$_.track_async(() => Promise.resolve(label), '10cc79a0');
331
331
 
332
332
  _$_.regular_block(() => {
333
333
  _$_.output_push('<div');
@@ -58,7 +58,7 @@ export function SimplePortal() {
58
58
  export function ConditionalPortal() {
59
59
  _$_.push_component();
60
60
 
61
- let lazy = _$_.track(true);
61
+ let lazy = _$_.track(true, '4f6df174');
62
62
 
63
63
  _$_.regular_block(() => {
64
64
  _$_.output_push('<div');
@@ -6,7 +6,7 @@ import { track } from 'ripple/server';
6
6
  export function TrackedState() {
7
7
  _$_.push_component();
8
8
 
9
- let lazy = _$_.track(0);
9
+ let lazy = _$_.track(0, 'c1818584');
10
10
 
11
11
  _$_.regular_block(() => {
12
12
  _$_.output_push('<div');
@@ -26,7 +26,7 @@ export function TrackedState() {
26
26
  export function CounterWithInitial(props) {
27
27
  _$_.push_component();
28
28
 
29
- let lazy_1 = _$_.track(props.initial);
29
+ let lazy_1 = _$_.track(props.initial, '03ea4348');
30
30
 
31
31
  _$_.regular_block(() => {
32
32
  _$_.output_push('<div');
@@ -68,8 +68,8 @@ export function CounterWrapper() {
68
68
  export function ComputedValues() {
69
69
  _$_.push_component();
70
70
 
71
- let lazy_2 = _$_.track(2);
72
- let lazy_3 = _$_.track(3);
71
+ let lazy_2 = _$_.track(2, 'b78281db');
72
+ let lazy_3 = _$_.track(3, 'a0cf6c6d');
73
73
  const sum = () => _$_.get(lazy_2) + _$_.get(lazy_3);
74
74
 
75
75
  _$_.regular_block(() => {
@@ -90,9 +90,9 @@ export function ComputedValues() {
90
90
  export function MultipleTracked() {
91
91
  _$_.push_component();
92
92
 
93
- let lazy_4 = _$_.track(10);
94
- let lazy_5 = _$_.track(20);
95
- let lazy_6 = _$_.track(30);
93
+ let lazy_4 = _$_.track(10, '843522de');
94
+ let lazy_5 = _$_.track(20, '1308996d');
95
+ let lazy_6 = _$_.track(30, '048c3fd0');
96
96
 
97
97
  _$_.regular_block(() => {
98
98
  _$_.output_push('<div');
@@ -136,8 +136,8 @@ export function MultipleTracked() {
136
136
  export function DerivedState() {
137
137
  _$_.push_component();
138
138
 
139
- let lazy_7 = _$_.track('John');
140
- let lazy_8 = _$_.track('Doe');
139
+ let lazy_7 = _$_.track('John', '6015eeca');
140
+ let lazy_8 = _$_.track('Doe', '4fa9a20e');
141
141
  const fullName = () => `${_$_.get(lazy_7)} ${_$_.get(lazy_8)}`;
142
142
 
143
143
  _$_.regular_block(() => {
@@ -1155,7 +1155,7 @@ export function ReactiveReturnTrueToFalse() {
1155
1155
  _$_.push_component();
1156
1156
 
1157
1157
  var __r_28 = false;
1158
- let lazy = _$_.track(true);
1158
+ let lazy = _$_.track(true, '58730cee');
1159
1159
 
1160
1160
  _$_.regular_block(() => {
1161
1161
  _$_.output_push('<button');
@@ -1213,7 +1213,7 @@ export function ReactiveReturnFalseToTrue() {
1213
1213
  _$_.push_component();
1214
1214
 
1215
1215
  var __r_29 = false;
1216
- let lazy_1 = _$_.track(false);
1216
+ let lazy_1 = _$_.track(false, '7fc6e96b');
1217
1217
 
1218
1218
  _$_.regular_block(() => {
1219
1219
  _$_.output_push('<button');
@@ -1272,7 +1272,7 @@ export function ReactiveNestedReturn() {
1272
1272
 
1273
1273
  var __r_30 = false;
1274
1274
  let a = true;
1275
- let lazy_2 = _$_.track(true);
1275
+ let lazy_2 = _$_.track(true, '385f771e');
1276
1276
 
1277
1277
  _$_.regular_block(() => {
1278
1278
  _$_.output_push('<button');
@@ -1700,7 +1700,7 @@ export function ReactiveSiblingReturns() {
1700
1700
 
1701
1701
  var __r_38 = false;
1702
1702
  var __r_39 = false;
1703
- let lazy_3 = _$_.track('first');
1703
+ let lazy_3 = _$_.track('first', '5aea90b8');
1704
1704
 
1705
1705
  _$_.regular_block(() => {
1706
1706
  _$_.output_push('<button');
@@ -1783,8 +1783,8 @@ export function ReactiveOuterInnerReturns() {
1783
1783
  _$_.push_component();
1784
1784
 
1785
1785
  var __r_40 = false;
1786
- let lazy_4 = _$_.track(true);
1787
- let lazy_5 = _$_.track(true);
1786
+ let lazy_4 = _$_.track(true, '60b3ed78');
1787
+ let lazy_5 = _$_.track(true, '76f23362');
1788
1788
 
1789
1789
  _$_.regular_block(() => {
1790
1790
  _$_.output_push('<button');
@@ -1870,7 +1870,7 @@ export function ReactiveElseIfReturns() {
1870
1870
 
1871
1871
  var __r_41 = false;
1872
1872
  var __r_42 = false;
1873
- let lazy_6 = _$_.track(0);
1873
+ let lazy_6 = _$_.track(0, '820ab671');
1874
1874
 
1875
1875
  _$_.regular_block(() => {
1876
1876
  _$_.output_push('<button');
@@ -1957,10 +1957,10 @@ export function ReactiveDeepNestedIndependentReturns() {
1957
1957
  var __r_44 = false;
1958
1958
  var __r_45 = false;
1959
1959
  var __r_46 = false;
1960
- let lazy_7 = _$_.track(false);
1961
- let lazy_8 = _$_.track(false);
1962
- let lazy_9 = _$_.track(false);
1963
- let lazy_10 = _$_.track(false);
1960
+ let lazy_7 = _$_.track(false, '0222c312');
1961
+ let lazy_8 = _$_.track(false, '7b13a4fb');
1962
+ let lazy_9 = _$_.track(false, '405b5bb5');
1963
+ let lazy_10 = _$_.track(false, 'f8de97e9');
1964
1964
 
1965
1965
  _$_.regular_block(() => {
1966
1966
  _$_.output_push('<button');
@@ -51,7 +51,7 @@ export function SwitchStatic() {
51
51
  export function SwitchReactive() {
52
52
  _$_.push_component();
53
53
 
54
- let lazy = _$_.track('a');
54
+ let lazy = _$_.track('a', '9b34d955');
55
55
 
56
56
  _$_.regular_block(() => {
57
57
  _$_.output_push('<button');
@@ -145,7 +145,7 @@ export function SwitchFallthrough() {
145
145
  export function SwitchNumericLevels() {
146
146
  _$_.push_component();
147
147
 
148
- let lazy_1 = _$_.track(1);
148
+ let lazy_1 = _$_.track(1, '7581a7ab');
149
149
 
150
150
  _$_.regular_block(() => {
151
151
  _$_.output_push('<button');
@@ -203,7 +203,7 @@ export function SwitchNumericLevels() {
203
203
  export function SwitchBlockScoped() {
204
204
  _$_.push_component();
205
205
 
206
- let lazy_2 = _$_.track(1);
206
+ let lazy_2 = _$_.track(1, 'ca9f9852');
207
207
 
208
208
  _$_.regular_block(() => {
209
209
  _$_.output_push('<button');
@@ -261,7 +261,7 @@ export function SwitchBlockScoped() {
261
261
  export function SwitchNoBreak() {
262
262
  _$_.push_component();
263
263
 
264
- let lazy_3 = _$_.track(1);
264
+ let lazy_3 = _$_.track(1, '6b7cb0ea');
265
265
 
266
266
  _$_.regular_block(() => {
267
267
  _$_.output_push('<button');