ripple 0.3.83 → 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 (58) hide show
  1. package/CHANGELOG.md +73 -0
  2. package/package.json +3 -3
  3. package/src/constants.js +4 -0
  4. package/src/runtime/index-client.js +2 -0
  5. package/src/runtime/index-server.js +13 -0
  6. package/src/runtime/internal/client/component.js +3 -3
  7. package/src/runtime/internal/client/constants.js +4 -0
  8. package/src/runtime/internal/client/for.js +22 -1
  9. package/src/runtime/internal/client/if.js +18 -2
  10. package/src/runtime/internal/client/index.js +1 -0
  11. package/src/runtime/internal/client/operations.js +25 -0
  12. package/src/runtime/internal/client/runtime.js +62 -10
  13. package/src/runtime/internal/client/switch.js +16 -2
  14. package/src/runtime/internal/client/template.js +10 -2
  15. package/src/runtime/internal/client/try.js +12 -2
  16. package/src/runtime/internal/client/types.d.ts +4 -0
  17. package/src/runtime/proxy.js +17 -1
  18. package/tests/client/__snapshots__/for.test.tsrx.snap +0 -2
  19. package/tests/client/compiler/compiler.basic.test.tsrx +5 -2
  20. package/tests/client/composite/__snapshots__/composite.render.test.tsrx.snap +0 -4
  21. package/tests/client/object.test.tsrx +47 -1
  22. package/tests/client/scoped-flush.test.tsrx +105 -0
  23. package/tests/hydration/compiled/client/basic.js +198 -214
  24. package/tests/hydration/compiled/client/composite.js +23 -72
  25. package/tests/hydration/compiled/client/for.js +66 -72
  26. package/tests/hydration/compiled/client/hmr.js +2 -13
  27. package/tests/hydration/compiled/client/html.js +619 -479
  28. package/tests/hydration/compiled/client/if-children.js +72 -84
  29. package/tests/hydration/compiled/client/if.js +87 -92
  30. package/tests/hydration/compiled/client/mixed-control-flow.js +120 -160
  31. package/tests/hydration/compiled/client/nested-control-flow.js +288 -360
  32. package/tests/hydration/compiled/client/portal.js +15 -21
  33. package/tests/hydration/compiled/client/reactivity.js +7 -12
  34. package/tests/hydration/compiled/client/switch.js +113 -115
  35. package/tests/hydration/compiled/client/track-async-serialization.js +71 -122
  36. package/tests/hydration/compiled/client/try.js +26 -41
  37. package/tests/hydration/compiled/server/basic.js +268 -556
  38. package/tests/hydration/compiled/server/composite.js +31 -50
  39. package/tests/hydration/compiled/server/events.js +37 -173
  40. package/tests/hydration/compiled/server/for.js +236 -847
  41. package/tests/hydration/compiled/server/head.js +110 -241
  42. package/tests/hydration/compiled/server/hmr.js +14 -41
  43. package/tests/hydration/compiled/server/html-in-template.js +14 -38
  44. package/tests/hydration/compiled/server/html.js +951 -1176
  45. package/tests/hydration/compiled/server/if-children.js +59 -493
  46. package/tests/hydration/compiled/server/if.js +57 -209
  47. package/tests/hydration/compiled/server/mixed-control-flow.js +144 -250
  48. package/tests/hydration/compiled/server/nested-control-flow.js +309 -559
  49. package/tests/hydration/compiled/server/portal.js +94 -156
  50. package/tests/hydration/compiled/server/reactivity.js +23 -65
  51. package/tests/hydration/compiled/server/return.js +6 -16
  52. package/tests/hydration/compiled/server/switch.js +91 -219
  53. package/tests/hydration/compiled/server/track-async-serialization.js +211 -256
  54. package/tests/hydration/compiled/server/try.js +67 -126
  55. package/tests/hydration/components/html.tsrx +75 -0
  56. package/tests/hydration/html.test.js +50 -0
  57. package/tests/server/compiler.test.tsrx +6 -2
  58. package/types/index.d.ts +2 -0
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
  }