ripple 0.3.84 → 0.3.85

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 (53) hide show
  1. package/CHANGELOG.md +60 -0
  2. package/package.json +3 -3
  3. package/src/constants.js +4 -0
  4. package/src/runtime/internal/client/component.js +3 -3
  5. package/src/runtime/internal/client/constants.js +4 -0
  6. package/src/runtime/internal/client/for.js +22 -1
  7. package/src/runtime/internal/client/if.js +18 -2
  8. package/src/runtime/internal/client/index.js +1 -0
  9. package/src/runtime/internal/client/operations.js +25 -0
  10. package/src/runtime/internal/client/runtime.js +62 -10
  11. package/src/runtime/internal/client/switch.js +16 -2
  12. package/src/runtime/internal/client/template.js +10 -2
  13. package/src/runtime/internal/client/try.js +12 -2
  14. package/src/runtime/internal/client/types.d.ts +4 -0
  15. package/tests/client/__snapshots__/for.test.tsrx.snap +0 -2
  16. package/tests/client/compiler/compiler.basic.test.tsrx +5 -2
  17. package/tests/client/composite/__snapshots__/composite.render.test.tsrx.snap +0 -4
  18. package/tests/client/scoped-flush.test.tsrx +105 -0
  19. package/tests/hydration/compiled/client/basic.js +198 -214
  20. package/tests/hydration/compiled/client/composite.js +23 -72
  21. package/tests/hydration/compiled/client/for.js +66 -72
  22. package/tests/hydration/compiled/client/hmr.js +2 -13
  23. package/tests/hydration/compiled/client/html.js +619 -479
  24. package/tests/hydration/compiled/client/if-children.js +72 -84
  25. package/tests/hydration/compiled/client/if.js +87 -92
  26. package/tests/hydration/compiled/client/mixed-control-flow.js +120 -160
  27. package/tests/hydration/compiled/client/nested-control-flow.js +288 -360
  28. package/tests/hydration/compiled/client/portal.js +15 -21
  29. package/tests/hydration/compiled/client/reactivity.js +7 -12
  30. package/tests/hydration/compiled/client/switch.js +113 -115
  31. package/tests/hydration/compiled/client/track-async-serialization.js +71 -122
  32. package/tests/hydration/compiled/client/try.js +26 -41
  33. package/tests/hydration/compiled/server/basic.js +268 -556
  34. package/tests/hydration/compiled/server/composite.js +31 -50
  35. package/tests/hydration/compiled/server/events.js +37 -173
  36. package/tests/hydration/compiled/server/for.js +236 -847
  37. package/tests/hydration/compiled/server/head.js +110 -241
  38. package/tests/hydration/compiled/server/hmr.js +14 -41
  39. package/tests/hydration/compiled/server/html-in-template.js +14 -38
  40. package/tests/hydration/compiled/server/html.js +951 -1176
  41. package/tests/hydration/compiled/server/if-children.js +59 -493
  42. package/tests/hydration/compiled/server/if.js +57 -209
  43. package/tests/hydration/compiled/server/mixed-control-flow.js +144 -250
  44. package/tests/hydration/compiled/server/nested-control-flow.js +309 -559
  45. package/tests/hydration/compiled/server/portal.js +94 -156
  46. package/tests/hydration/compiled/server/reactivity.js +23 -65
  47. package/tests/hydration/compiled/server/return.js +6 -16
  48. package/tests/hydration/compiled/server/switch.js +91 -219
  49. package/tests/hydration/compiled/server/track-async-serialization.js +211 -256
  50. package/tests/hydration/compiled/server/try.js +67 -126
  51. package/tests/hydration/components/html.tsrx +75 -0
  52. package/tests/hydration/html.test.js +50 -0
  53. package/tests/server/compiler.test.tsrx +6 -2
package/tests/hydration/compiled/server/if.js CHANGED
@@ -8,21 +8,16 @@ export function IfTruthy() {
8
8
  const show = true;
9
9
 
10
10
  _$_.regular_block(() => {
11
- _$_.output_push('<!--[-->');
11
+ let __out = '';
12
12
 
13
- if (show) {
14
- _$_.output_push('<div');
15
- _$_.output_push(' class="shown"');
16
- _$_.output_push('>');
17
-
18
- {
19
- _$_.output_push('Visible');
20
- }
13
+ __out += '<!--[-->';
21
14
 
22
- _$_.output_push('</div>');
15
+ if (show) {
16
+ __out += '<div class="shown">Visible</div>';
23
17
  }
24
18
 
25
- _$_.output_push('<!--]-->');
19
+ __out += '<!--]-->';
20
+ _$_.output_push(__out);
26
21
  });
27
22
  });
28
23
  }
@@ -32,21 +27,16 @@ export function IfFalsy() {
32
27
  const show = false;
33
28
 
34
29
  _$_.regular_block(() => {
35
- _$_.output_push('<!--[-->');
30
+ let __out = '';
36
31
 
37
- if (show) {
38
- _$_.output_push('<div');
39
- _$_.output_push(' class="shown"');
40
- _$_.output_push('>');
41
-
42
- {
43
- _$_.output_push('Visible');
44
- }
32
+ __out += '<!--[-->';
45
33
 
46
- _$_.output_push('</div>');
34
+ if (show) {
35
+ __out += '<div class="shown">Visible</div>';
47
36
  }
48
37
 
49
- _$_.output_push('<!--]-->');
38
+ __out += '<!--]-->';
39
+ _$_.output_push(__out);
50
40
  });
51
41
  });
52
42
  }
@@ -56,31 +46,18 @@ export function IfElse() {
56
46
  const isLoggedIn = true;
57
47
 
58
48
  _$_.regular_block(() => {
59
- _$_.output_push('<!--[-->');
49
+ let __out = '';
60
50
 
61
- if (isLoggedIn) {
62
- _$_.output_push('<div');
63
- _$_.output_push(' class="logged-in"');
64
- _$_.output_push('>');
65
-
66
- {
67
- _$_.output_push('Welcome back!');
68
- }
51
+ __out += '<!--[-->';
69
52
 
70
- _$_.output_push('</div>');
53
+ if (isLoggedIn) {
54
+ __out += '<div class="logged-in">Welcome back!</div>';
71
55
  } else {
72
- _$_.output_push('<div');
73
- _$_.output_push(' class="logged-out"');
74
- _$_.output_push('>');
75
-
76
- {
77
- _$_.output_push('Please log in');
78
- }
79
-
80
- _$_.output_push('</div>');
56
+ __out += '<div class="logged-out">Please log in</div>';
81
57
  }
82
58
 
83
- _$_.output_push('<!--]-->');
59
+ __out += '<!--]-->';
60
+ _$_.output_push(__out);
84
61
  });
85
62
  });
86
63
  }
@@ -90,32 +67,16 @@ export function ReactiveIf() {
90
67
  let lazy = _$_.track(true, '19a16ff0');
91
68
 
92
69
  _$_.regular_block(() => {
93
- {
94
- _$_.output_push('<button');
95
- _$_.output_push(' class="toggle"');
96
- _$_.output_push('>');
70
+ let __out = '';
97
71
 
98
- {
99
- _$_.output_push('Toggle');
100
- }
72
+ __out += '<button class="toggle">Toggle</button><!--[-->';
101
73
 
102
- _$_.output_push('</button>');
103
- _$_.output_push('<!--[-->');
104
-
105
- if (lazy.value) {
106
- _$_.output_push('<div');
107
- _$_.output_push(' class="content"');
108
- _$_.output_push('>');
109
-
110
- {
111
- _$_.output_push('Content visible');
112
- }
113
-
114
- _$_.output_push('</div>');
115
- }
116
-
117
- _$_.output_push('<!--]-->');
74
+ if (lazy.value) {
75
+ __out += '<div class="content">Content visible</div>';
118
76
  }
77
+
78
+ __out += '<!--]-->';
79
+ _$_.output_push(__out);
119
80
  });
120
81
  });
121
82
  }
@@ -125,42 +86,18 @@ export function ReactiveIfElse() {
125
86
  let lazy_1 = _$_.track(false, '41177f39');
126
87
 
127
88
  _$_.regular_block(() => {
128
- {
129
- _$_.output_push('<button');
130
- _$_.output_push(' class="toggle"');
131
- _$_.output_push('>');
132
-
133
- {
134
- _$_.output_push('Toggle');
135
- }
89
+ let __out = '';
136
90
 
137
- _$_.output_push('</button>');
138
- _$_.output_push('<!--[-->');
139
-
140
- if (lazy_1.value) {
141
- _$_.output_push('<div');
142
- _$_.output_push(' class="on"');
143
- _$_.output_push('>');
144
-
145
- {
146
- _$_.output_push('ON');
147
- }
148
-
149
- _$_.output_push('</div>');
150
- } else {
151
- _$_.output_push('<div');
152
- _$_.output_push(' class="off"');
153
- _$_.output_push('>');
154
-
155
- {
156
- _$_.output_push('OFF');
157
- }
158
-
159
- _$_.output_push('</div>');
160
- }
91
+ __out += '<button class="toggle">Toggle</button><!--[-->';
161
92
 
162
- _$_.output_push('<!--]-->');
93
+ if (lazy_1.value) {
94
+ __out += '<div class="on">ON</div>';
95
+ } else {
96
+ __out += '<div class="off">OFF</div>';
163
97
  }
98
+
99
+ __out += '<!--]-->';
100
+ _$_.output_push(__out);
164
101
  });
165
102
  });
166
103
  }
@@ -171,56 +108,22 @@ export function NestedIf() {
171
108
  let lazy_3 = _$_.track(true, 'f21b8c26');
172
109
 
173
110
  _$_.regular_block(() => {
174
- {
175
- _$_.output_push('<button');
176
- _$_.output_push(' class="outer-toggle"');
177
- _$_.output_push('>');
111
+ let __out = '';
178
112
 
179
- {
180
- _$_.output_push('Outer');
181
- }
113
+ __out += '<button class="outer-toggle">Outer</button><button class="inner-toggle">Inner</button><!--[-->';
182
114
 
183
- _$_.output_push('</button>');
184
- _$_.output_push('<button');
185
- _$_.output_push(' class="inner-toggle"');
186
- _$_.output_push('>');
115
+ if (lazy_2.value) {
116
+ __out += '<div class="outer-content">Outer<!--[-->';
187
117
 
188
- {
189
- _$_.output_push('Inner');
118
+ if (lazy_3.value) {
119
+ __out += '<span class="inner-content">Inner</span>';
190
120
  }
191
121
 
192
- _$_.output_push('</button>');
193
- _$_.output_push('<!--[-->');
194
-
195
- if (lazy_2.value) {
196
- _$_.output_push('<div');
197
- _$_.output_push(' class="outer-content"');
198
- _$_.output_push('>');
199
-
200
- {
201
- _$_.output_push('Outer');
202
- _$_.output_push('<!--[-->');
203
-
204
- if (lazy_3.value) {
205
- _$_.output_push('<span');
206
- _$_.output_push(' class="inner-content"');
207
- _$_.output_push('>');
208
-
209
- {
210
- _$_.output_push('Inner');
211
- }
212
-
213
- _$_.output_push('</span>');
214
- }
215
-
216
- _$_.output_push('<!--]-->');
217
- }
218
-
219
- _$_.output_push('</div>');
220
- }
221
-
222
- _$_.output_push('<!--]-->');
122
+ __out += '<!--]--></div>';
223
123
  }
124
+
125
+ __out += '<!--]-->';
126
+ _$_.output_push(__out);
224
127
  });
225
128
  });
226
129
  }
@@ -230,81 +133,26 @@ export function IfElseIfChain() {
230
133
  let lazy_4 = _$_.track('loading', '4c69c94a');
231
134
 
232
135
  _$_.regular_block(() => {
233
- _$_.output_push('<div');
234
- _$_.output_push('>');
235
-
236
- {
237
- _$_.output_push('<button');
238
- _$_.output_push(' class="success"');
239
- _$_.output_push('>');
240
-
241
- {
242
- _$_.output_push('Success');
243
- }
244
-
245
- _$_.output_push('</button>');
246
- _$_.output_push('<button');
247
- _$_.output_push(' class="error"');
248
- _$_.output_push('>');
249
-
250
- {
251
- _$_.output_push('Error');
252
- }
253
-
254
- _$_.output_push('</button>');
255
- _$_.output_push('<button');
256
- _$_.output_push(' class="loading"');
257
- _$_.output_push('>');
258
-
259
- {
260
- _$_.output_push('Loading');
261
- }
262
-
263
- _$_.output_push('</button>');
264
- _$_.output_push('<!--[-->');
136
+ let __out = '';
265
137
 
266
- if (lazy_4.value === 'loading') {
267
- _$_.output_push('<div');
268
- _$_.output_push(' class="state"');
269
- _$_.output_push('>');
138
+ __out += '<div><button class="success">Success</button><button class="error">Error</button><button class="loading">Loading</button><!--[-->';
270
139
 
271
- {
272
- _$_.output_push('Loading...');
273
- }
140
+ if (lazy_4.value === 'loading') {
141
+ __out += '<div class="state">Loading...</div>';
142
+ } else {
143
+ __out += '<!--[-->';
274
144
 
275
- _$_.output_push('</div>');
145
+ if (lazy_4.value === 'success') {
146
+ __out += '<div class="state">Success!</div>';
276
147
  } else {
277
- _$_.output_push('<!--[-->');
278
-
279
- if (lazy_4.value === 'success') {
280
- _$_.output_push('<div');
281
- _$_.output_push(' class="state"');
282
- _$_.output_push('>');
283
-
284
- {
285
- _$_.output_push('Success!');
286
- }
287
-
288
- _$_.output_push('</div>');
289
- } else {
290
- _$_.output_push('<div');
291
- _$_.output_push(' class="state"');
292
- _$_.output_push('>');
293
-
294
- {
295
- _$_.output_push('Error occurred');
296
- }
297
-
298
- _$_.output_push('</div>');
299
- }
300
-
301
- _$_.output_push('<!--]-->');
148
+ __out += '<div class="state">Error occurred</div>';
302
149
  }
303
150
 
304
- _$_.output_push('<!--]-->');
151
+ __out += '<!--]-->';
305
152
  }
306
153
 
307
- _$_.output_push('</div>');
154
+ __out += '<!--]--></div>';
155
+ _$_.output_push(__out);
308
156
  });
309
157
  });
310
158
  }