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
@@ -6,27 +6,17 @@ import { track } from 'ripple/server';
6
6
  export function StaticTitle() {
7
7
  return _$_.tsrx_element(() => {
8
8
  _$_.regular_block(() => {
9
- {
10
- _$_.output_push('<div');
11
- _$_.output_push('>');
12
-
13
- {
14
- _$_.output_push('Content');
15
- }
16
-
17
- _$_.output_push('</div>');
18
- _$_.set_output_target('head');
19
- _$_.output_push('<!--6e1f1b90-->');
20
- _$_.output_push('<title');
21
- _$_.output_push('>');
22
-
23
- {
24
- _$_.output_push('Static Test Title');
25
- }
26
-
27
- _$_.output_push('</title>');
28
- _$_.set_output_target(null);
29
- }
9
+ let __out = '';
10
+
11
+ __out += '<div>Content</div>';
12
+ _$_.output_push(__out);
13
+ __out = '';
14
+ _$_.set_output_target('head');
15
+ __out += '<!--6e1f1b90--><title>Static Test Title</title>';
16
+ _$_.output_push(__out);
17
+ __out = '';
18
+ _$_.set_output_target(null);
19
+ _$_.output_push(__out);
30
20
  });
31
21
  });
32
22
  }
@@ -36,34 +26,17 @@ export function ReactiveTitle() {
36
26
  let lazy = _$_.track('Initial Title', 'cbca63e3');
37
27
 
38
28
  _$_.regular_block(() => {
39
- {
40
- _$_.output_push('<div');
41
- _$_.output_push('>');
42
-
43
- {
44
- _$_.output_push('<span');
45
- _$_.output_push('>');
46
-
47
- {
48
- _$_.output_push(_$_.escape(lazy.value));
49
- }
50
-
51
- _$_.output_push('</span>');
52
- }
53
-
54
- _$_.output_push('</div>');
55
- _$_.set_output_target('head');
56
- _$_.output_push('<!--91435bee-->');
57
- _$_.output_push('<title');
58
- _$_.output_push('>');
59
-
60
- {
61
- _$_.output_push(_$_.escape(lazy.value));
62
- }
63
-
64
- _$_.output_push('</title>');
65
- _$_.set_output_target(null);
66
- }
29
+ let __out = '';
30
+
31
+ __out += '<div><span>' + _$_.escape(lazy.value) + '</span></div>';
32
+ _$_.output_push(__out);
33
+ __out = '';
34
+ _$_.set_output_target('head');
35
+ __out += '<!--91435bee--><title>' + _$_.escape(lazy.value) + '</title>';
36
+ _$_.output_push(__out);
37
+ __out = '';
38
+ _$_.set_output_target(null);
39
+ _$_.output_push(__out);
67
40
  });
68
41
  });
69
42
  }
@@ -71,35 +44,17 @@ export function ReactiveTitle() {
71
44
  export function MultipleHeadElements() {
72
45
  return _$_.tsrx_element(() => {
73
46
  _$_.regular_block(() => {
74
- {
75
- _$_.output_push('<div');
76
- _$_.output_push('>');
77
-
78
- {
79
- _$_.output_push('Page content');
80
- }
81
-
82
- _$_.output_push('</div>');
83
- _$_.set_output_target('head');
84
- _$_.output_push('<!--07a54928-->');
85
- _$_.output_push('<title');
86
- _$_.output_push('>');
87
-
88
- {
89
- _$_.output_push('Page Title');
90
- }
91
-
92
- _$_.output_push('</title>');
93
- _$_.output_push('<meta');
94
- _$_.output_push(' name="description"');
95
- _$_.output_push(' content="Page description"');
96
- _$_.output_push(' />');
97
- _$_.output_push('<link');
98
- _$_.output_push(' rel="stylesheet"');
99
- _$_.output_push(' href="/styles.css"');
100
- _$_.output_push(' />');
101
- _$_.set_output_target(null);
102
- }
47
+ let __out = '';
48
+
49
+ __out += '<div>Page content</div>';
50
+ _$_.output_push(__out);
51
+ __out = '';
52
+ _$_.set_output_target('head');
53
+ __out += '<!--07a54928--><title>Page Title</title><meta name="description" content="Page description" /><link rel="stylesheet" href="/styles.css" />';
54
+ _$_.output_push(__out);
55
+ __out = '';
56
+ _$_.set_output_target(null);
57
+ _$_.output_push(__out);
103
58
  });
104
59
  });
105
60
  }
@@ -109,31 +64,17 @@ export function ReactiveMetaTags() {
109
64
  let lazy_1 = _$_.track('Initial description', '38bfa3b2');
110
65
 
111
66
  _$_.regular_block(() => {
112
- {
113
- _$_.output_push('<div');
114
- _$_.output_push('>');
115
-
116
- {
117
- _$_.output_push(_$_.escape(lazy_1.value));
118
- }
119
-
120
- _$_.output_push('</div>');
121
- _$_.set_output_target('head');
122
- _$_.output_push('<!--4ca6a546-->');
123
- _$_.output_push('<title');
124
- _$_.output_push('>');
125
-
126
- {
127
- _$_.output_push('My Page');
128
- }
129
-
130
- _$_.output_push('</title>');
131
- _$_.output_push('<meta');
132
- _$_.output_push(' name="description"');
133
- _$_.output_push(_$_.attr('content', lazy_1.value, false));
134
- _$_.output_push(' />');
135
- _$_.set_output_target(null);
136
- }
67
+ let __out = '';
68
+
69
+ __out += '<div>' + _$_.escape(lazy_1.value) + '</div>';
70
+ _$_.output_push(__out);
71
+ __out = '';
72
+ _$_.set_output_target('head');
73
+ __out += '<!--4ca6a546--><title>My Page</title><meta name="description"' + _$_.attr('content', lazy_1.value, false) + ' />';
74
+ _$_.output_push(__out);
75
+ __out = '';
76
+ _$_.set_output_target(null);
77
+ _$_.output_push(__out);
137
78
  });
138
79
  });
139
80
  }
@@ -143,27 +84,17 @@ export function TitleWithTemplate() {
143
84
  let lazy_2 = _$_.track('World', 'f3925cd5');
144
85
 
145
86
  _$_.regular_block(() => {
146
- {
147
- _$_.output_push('<div');
148
- _$_.output_push('>');
149
-
150
- {
151
- _$_.output_push(_$_.escape(lazy_2.value));
152
- }
153
-
154
- _$_.output_push('</div>');
155
- _$_.set_output_target('head');
156
- _$_.output_push('<!--10dc944d-->');
157
- _$_.output_push('<title');
158
- _$_.output_push('>');
159
-
160
- {
161
- _$_.output_push(_$_.escape(`Hello ${lazy_2.value}!`));
162
- }
163
-
164
- _$_.output_push('</title>');
165
- _$_.set_output_target(null);
166
- }
87
+ let __out = '';
88
+
89
+ __out += '<div>' + _$_.escape(lazy_2.value) + '</div>';
90
+ _$_.output_push(__out);
91
+ __out = '';
92
+ _$_.set_output_target('head');
93
+ __out += '<!--10dc944d--><title>' + _$_.escape(`Hello ${lazy_2.value}!`) + '</title>';
94
+ _$_.output_push(__out);
95
+ __out = '';
96
+ _$_.set_output_target(null);
97
+ _$_.output_push(__out);
167
98
  });
168
99
  });
169
100
  }
@@ -171,27 +102,17 @@ export function TitleWithTemplate() {
171
102
  export function EmptyTitle() {
172
103
  return _$_.tsrx_element(() => {
173
104
  _$_.regular_block(() => {
174
- {
175
- _$_.output_push('<div');
176
- _$_.output_push('>');
177
-
178
- {
179
- _$_.output_push('Empty title test');
180
- }
181
-
182
- _$_.output_push('</div>');
183
- _$_.set_output_target('head');
184
- _$_.output_push('<!--13ba9873-->');
185
- _$_.output_push('<title');
186
- _$_.output_push('>');
187
-
188
- {
189
- _$_.output_push('');
190
- }
191
-
192
- _$_.output_push('</title>');
193
- _$_.set_output_target(null);
194
- }
105
+ let __out = '';
106
+
107
+ __out += '<div>Empty title test</div>';
108
+ _$_.output_push(__out);
109
+ __out = '';
110
+ _$_.set_output_target('head');
111
+ __out += '<!--13ba9873--><title></title>';
112
+ _$_.output_push(__out);
113
+ __out = '';
114
+ _$_.set_output_target(null);
115
+ _$_.output_push(__out);
195
116
  });
196
117
  });
197
118
  }
@@ -202,27 +123,17 @@ export function ConditionalTitle() {
202
123
  let lazy_4 = _$_.track('Main Page', '7cd7d671');
203
124
 
204
125
  _$_.regular_block(() => {
205
- {
206
- _$_.output_push('<div');
207
- _$_.output_push('>');
208
-
209
- {
210
- _$_.output_push(_$_.escape(lazy_4.value));
211
- }
212
-
213
- _$_.output_push('</div>');
214
- _$_.set_output_target('head');
215
- _$_.output_push('<!--4b39c36b-->');
216
- _$_.output_push('<title');
217
- _$_.output_push('>');
218
-
219
- {
220
- _$_.output_push(_$_.escape(lazy_3.value ? 'App - ' + lazy_4.value : lazy_4.value));
221
- }
222
-
223
- _$_.output_push('</title>');
224
- _$_.set_output_target(null);
225
- }
126
+ let __out = '';
127
+
128
+ __out += '<div>' + _$_.escape(lazy_4.value) + '</div>';
129
+ _$_.output_push(__out);
130
+ __out = '';
131
+ _$_.set_output_target('head');
132
+ __out += '<!--4b39c36b--><title>' + _$_.escape(lazy_3.value ? 'App - ' + lazy_4.value : lazy_4.value) + '</title>';
133
+ _$_.output_push(__out);
134
+ __out = '';
135
+ _$_.set_output_target(null);
136
+ _$_.output_push(__out);
226
137
  });
227
138
  });
228
139
  }
@@ -233,34 +144,17 @@ export function ComputedTitle() {
233
144
  let prefix = 'Count: ';
234
145
 
235
146
  _$_.regular_block(() => {
236
- {
237
- _$_.output_push('<div');
238
- _$_.output_push('>');
239
-
240
- {
241
- _$_.output_push('<span');
242
- _$_.output_push('>');
243
-
244
- {
245
- _$_.output_push(_$_.escape(lazy_5.value));
246
- }
247
-
248
- _$_.output_push('</span>');
249
- }
250
-
251
- _$_.output_push('</div>');
252
- _$_.set_output_target('head');
253
- _$_.output_push('<!--92c79d98-->');
254
- _$_.output_push('<title');
255
- _$_.output_push('>');
256
-
257
- {
258
- _$_.output_push(_$_.escape(prefix + lazy_5.value));
259
- }
260
-
261
- _$_.output_push('</title>');
262
- _$_.set_output_target(null);
263
- }
147
+ let __out = '';
148
+
149
+ __out += '<div><span>' + _$_.escape(lazy_5.value) + '</span></div>';
150
+ _$_.output_push(__out);
151
+ __out = '';
152
+ _$_.set_output_target('head');
153
+ __out += '<!--92c79d98--><title>' + _$_.escape(prefix + lazy_5.value) + '</title>';
154
+ _$_.output_push(__out);
155
+ __out = '';
156
+ _$_.set_output_target(null);
157
+ _$_.output_push(__out);
264
158
  });
265
159
  });
266
160
  }
@@ -268,32 +162,17 @@ export function ComputedTitle() {
268
162
  export function MultipleHeadBlocks() {
269
163
  return _$_.tsrx_element(() => {
270
164
  _$_.regular_block(() => {
271
- {
272
- _$_.output_push('<div');
273
- _$_.output_push('>');
274
-
275
- {
276
- _$_.output_push('Content');
277
- }
278
-
279
- _$_.output_push('</div>');
280
- _$_.set_output_target('head');
281
- _$_.output_push('<!--9a44f25d-->');
282
- _$_.output_push('<title');
283
- _$_.output_push('>');
284
-
285
- {
286
- _$_.output_push('First Head');
287
- }
288
-
289
- _$_.output_push('</title>');
290
- _$_.output_push('<!--0873e476-->');
291
- _$_.output_push('<meta');
292
- _$_.output_push(' name="author"');
293
- _$_.output_push(' content="Test Author"');
294
- _$_.output_push(' />');
295
- _$_.set_output_target(null);
296
- }
165
+ let __out = '';
166
+
167
+ __out += '<div>Content</div>';
168
+ _$_.output_push(__out);
169
+ __out = '';
170
+ _$_.set_output_target('head');
171
+ __out += '<!--9a44f25d--><title>First Head</title><!--0873e476--><meta name="author" content="Test Author" />';
172
+ _$_.output_push(__out);
173
+ __out = '';
174
+ _$_.set_output_target(null);
175
+ _$_.output_push(__out);
297
176
  });
298
177
  });
299
178
  }
@@ -301,27 +180,17 @@ export function MultipleHeadBlocks() {
301
180
  export function HeadWithStyle() {
302
181
  return _$_.tsrx_element(() => {
303
182
  _$_.regular_block(() => {
304
- {
305
- _$_.output_push('<div');
306
- _$_.output_push('>');
307
-
308
- {
309
- _$_.output_push('Styled content');
310
- }
311
-
312
- _$_.output_push('</div>');
313
- _$_.set_output_target('head');
314
- _$_.output_push('<!--d75c5358-->');
315
- _$_.output_push('<title');
316
- _$_.output_push('>');
317
-
318
- {
319
- _$_.output_push('Styled Page');
320
- }
321
-
322
- _$_.output_push('</title>');
323
- _$_.set_output_target(null);
324
- }
183
+ let __out = '';
184
+
185
+ __out += '<div>Styled content</div>';
186
+ _$_.output_push(__out);
187
+ __out = '';
188
+ _$_.set_output_target('head');
189
+ __out += '<!--d75c5358--><title>Styled Page</title>';
190
+ _$_.output_push(__out);
191
+ __out = '';
192
+ _$_.set_output_target(null);
193
+ _$_.output_push(__out);
325
194
  });
326
195
  });
327
196
  }
@@ -6,32 +6,18 @@ import { track } from 'ripple/server';
6
6
  export function Layout({ children }) {
7
7
  return _$_.tsrx_element(() => {
8
8
  _$_.regular_block(() => {
9
- _$_.output_push('<div');
10
- _$_.output_push(' class="layout"');
11
- _$_.output_push('>');
9
+ let __out = '';
12
10
 
13
- {
14
- _$_.output_push('<nav');
15
- _$_.output_push(' class="nav"');
16
- _$_.output_push('>');
17
-
18
- {
19
- _$_.output_push('Navigation');
20
- }
21
-
22
- _$_.output_push('</nav>');
23
- _$_.output_push('<main');
24
- _$_.output_push(' class="main"');
25
- _$_.output_push('>');
11
+ __out += '<div class="layout"><nav class="nav">Navigation</nav><main class="main">';
26
12
 
27
- {
28
- _$_.render_expression(children);
29
- }
30
-
31
- _$_.output_push('</main>');
13
+ {
14
+ _$_.output_push(__out);
15
+ __out = '';
16
+ _$_.render_expression(children);
32
17
  }
33
18
 
34
- _$_.output_push('</div>');
19
+ __out += '</main></div>';
20
+ _$_.output_push(__out);
35
21
  });
36
22
  });
37
23
  }
@@ -41,29 +27,16 @@ export function Content() {
41
27
  let lazy = _$_.track(true, '0bdb1500');
42
28
 
43
29
  _$_.regular_block(() => {
44
- _$_.output_push('<div');
45
- _$_.output_push(' class="content"');
46
- _$_.output_push('>');
47
-
48
- {
49
- _$_.output_push('<!--[-->');
50
-
51
- if (lazy.value) {
52
- _$_.output_push('<p');
53
- _$_.output_push(' class="text"');
54
- _$_.output_push('>');
55
-
56
- {
57
- _$_.output_push('Hello world');
58
- }
30
+ let __out = '';
59
31
 
60
- _$_.output_push('</p>');
61
- }
32
+ __out += '<div class="content"><!--[-->';
62
33
 
63
- _$_.output_push('<!--]-->');
34
+ if (lazy.value) {
35
+ __out += '<p class="text">Hello world</p>';
64
36
  }
65
37
 
66
- _$_.output_push('</div>');
38
+ __out += '<!--]--></div>';
39
+ _$_.output_push(__out);
67
40
  });
68
41
  });
69
42
  }
@@ -6,11 +6,10 @@ export function SimpleTemplateHtml() {
6
6
  const data = 'test data';
7
7
 
8
8
  _$_.regular_block(() => {
9
- _$_.output_push('<template');
10
- _$_.output_push(' id="data1"');
11
- _$_.output_push('>');
12
- _$_.output_push(String(data ?? ''));
13
- _$_.output_push('</template>');
9
+ let __out = '';
10
+
11
+ __out += '<template id="data1">' + String(data ?? '') + '</template>';
12
+ _$_.output_push(__out);
14
13
  });
15
14
  });
16
15
  }
@@ -20,11 +19,10 @@ export function TemplateWithJSON() {
20
19
  const jsonData = JSON.stringify({ message: 'hello', count: 42 });
21
20
 
22
21
  _$_.regular_block(() => {
23
- _$_.output_push('<template');
24
- _$_.output_push(' id="data2"');
25
- _$_.output_push('>');
26
- _$_.output_push(String(jsonData ?? ''));
27
- _$_.output_push('</template>');
22
+ let __out = '';
23
+
24
+ __out += '<template id="data2">' + String(jsonData ?? '') + '</template>';
25
+ _$_.output_push(__out);
28
26
  });
29
27
  });
30
28
  }
@@ -34,38 +32,16 @@ export function TemplateAroundIfBlock() {
34
32
  const show = true;
35
33
 
36
34
  _$_.regular_block(() => {
37
- _$_.output_push('<div');
38
- _$_.output_push('>');
39
-
40
- {
41
- _$_.output_push('<template');
42
- _$_.output_push(' id="before"');
43
- _$_.output_push('>');
44
- _$_.output_push('before');
45
- _$_.output_push('</template>');
46
- _$_.output_push('<!--[-->');
47
-
48
- if (show) {
49
- _$_.output_push('<span');
50
- _$_.output_push(' class="inside"');
51
- _$_.output_push('>');
52
-
53
- {
54
- _$_.output_push('inside');
55
- }
35
+ let __out = '';
56
36
 
57
- _$_.output_push('</span>');
58
- }
37
+ __out += '<div><template id="before">before</template><!--[-->';
59
38
 
60
- _$_.output_push('<!--]-->');
61
- _$_.output_push('<template');
62
- _$_.output_push(' id="after"');
63
- _$_.output_push('>');
64
- _$_.output_push('after');
65
- _$_.output_push('</template>');
39
+ if (show) {
40
+ __out += '<span class="inside">inside</span>';
66
41
  }
67
42
 
68
- _$_.output_push('</div>');
43
+ __out += '<!--]--><template id="after">after</template></div>';
44
+ _$_.output_push(__out);
69
45
  });
70
46
  });
71
47
  }