ripple 0.3.9 → 0.3.10

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 (60) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/package.json +2 -2
  3. package/src/compiler/phases/1-parse/index.js +25 -15
  4. package/src/compiler/phases/2-analyze/index.js +35 -88
  5. package/src/compiler/phases/2-analyze/prune.js +13 -5
  6. package/src/compiler/phases/3-transform/client/index.js +188 -56
  7. package/src/compiler/phases/3-transform/server/index.js +62 -40
  8. package/src/compiler/types/index.d.ts +9 -1
  9. package/src/compiler/types/parse.d.ts +2 -0
  10. package/src/compiler/utils.js +101 -1
  11. package/src/runtime/element.js +39 -0
  12. package/src/runtime/internal/client/composite.js +10 -6
  13. package/src/runtime/internal/client/expression.js +218 -0
  14. package/src/runtime/internal/client/index.js +4 -0
  15. package/src/runtime/internal/client/portal.js +12 -6
  16. package/src/runtime/internal/server/index.js +26 -1
  17. package/tests/client/basic/basic.components.test.ripple +85 -87
  18. package/tests/client/basic/basic.errors.test.ripple +4 -8
  19. package/tests/client/basic/basic.rendering.test.ripple +23 -8
  20. package/tests/client/capture-error.js +12 -0
  21. package/tests/client/compiler/compiler.basic.test.ripple +76 -6
  22. package/tests/client/composite/composite.props.test.ripple +1 -3
  23. package/tests/client/composite/composite.render.test.ripple +45 -13
  24. package/tests/client/css/global-additional-cases.test.ripple +3 -3
  25. package/tests/client/svg.test.ripple +4 -4
  26. package/tests/hydration/basic.test.js +23 -0
  27. package/tests/hydration/compiled/client/basic.js +118 -66
  28. package/tests/hydration/compiled/client/composite.js +90 -37
  29. package/tests/hydration/compiled/client/events.js +18 -18
  30. package/tests/hydration/compiled/client/for.js +62 -62
  31. package/tests/hydration/compiled/client/head.js +10 -10
  32. package/tests/hydration/compiled/client/hmr.js +13 -10
  33. package/tests/hydration/compiled/client/html.js +274 -236
  34. package/tests/hydration/compiled/client/if-children.js +41 -35
  35. package/tests/hydration/compiled/client/if.js +2 -2
  36. package/tests/hydration/compiled/client/mixed-control-flow.js +12 -12
  37. package/tests/hydration/compiled/client/nested-control-flow.js +46 -46
  38. package/tests/hydration/compiled/client/portal.js +8 -8
  39. package/tests/hydration/compiled/client/reactivity.js +14 -14
  40. package/tests/hydration/compiled/client/return.js +2 -2
  41. package/tests/hydration/compiled/client/try.js +4 -4
  42. package/tests/hydration/compiled/server/basic.js +64 -31
  43. package/tests/hydration/compiled/server/composite.js +62 -29
  44. package/tests/hydration/compiled/server/hmr.js +24 -37
  45. package/tests/hydration/compiled/server/html.js +472 -611
  46. package/tests/hydration/compiled/server/if-children.js +77 -103
  47. package/tests/hydration/compiled/server/portal.js +8 -8
  48. package/tests/hydration/components/basic.ripple +15 -5
  49. package/tests/hydration/components/composite.ripple +13 -1
  50. package/tests/hydration/components/hmr.ripple +1 -3
  51. package/tests/hydration/components/html.ripple +13 -35
  52. package/tests/hydration/components/if-children.ripple +4 -8
  53. package/tests/hydration/composite.test.js +11 -0
  54. package/tests/server/basic.attributes.test.ripple +50 -0
  55. package/tests/server/basic.components.test.ripple +22 -28
  56. package/tests/server/basic.test.ripple +12 -0
  57. package/tests/server/compiler.test.ripple +25 -8
  58. package/tests/server/composite.props.test.ripple +1 -3
  59. package/tests/server/style-identifier.test.ripple +2 -4
  60. package/types/index.d.ts +9 -2
package/tests/hydration/compiled/server/basic.js CHANGED
@@ -1,6 +1,8 @@
1
1
  // @ts-nocheck
2
2
  import * as _$_ from 'ripple/internal/server';
3
3
 
4
+ import { track } from 'ripple/server';
5
+
4
6
  export function StaticText(__output) {
5
7
  _$_.push_component();
6
8
  __output.push('<div');
@@ -203,7 +205,7 @@ export function ExpressionContent(__output) {
203
205
  _$_.push_component();
204
206
 
205
207
  const value = 42;
206
- const text = 'computed';
208
+ const label = 'computed';
207
209
 
208
210
  __output.push('<div');
209
211
  __output.push('>');
@@ -217,13 +219,57 @@ export function ExpressionContent(__output) {
217
219
  __output.push('>');
218
220
 
219
221
  {
220
- __output.push(_$_.escape(text.toUpperCase()));
222
+ __output.push(_$_.escape(label.toUpperCase()));
221
223
  }
222
224
 
223
225
  __output.push('</span>');
224
226
  _$_.pop_component();
225
227
  }
226
228
 
229
+ function TextProp(__output, __props) {
230
+ _$_.push_component();
231
+ __output.push('<div');
232
+ __output.push(' class="text-prop"');
233
+ __output.push('>');
234
+
235
+ {
236
+ _$_.render_expression(__output, __props.children);
237
+ }
238
+
239
+ __output.push('</div>');
240
+ _$_.pop_component();
241
+ }
242
+
243
+ export function TextPropWithToggle(__output) {
244
+ _$_.push_component();
245
+
246
+ let lazy = _$_.track(false);
247
+
248
+ {
249
+ const comp = TextProp;
250
+
251
+ const args = [
252
+ __output,
253
+ {
254
+ children: _$_.normalize_children(_$_.get(lazy) ? 'hello' : '')
255
+ }
256
+ ];
257
+
258
+ comp(...args);
259
+ }
260
+
261
+ __output.push('<button');
262
+ __output.push(' class="show-text"');
263
+ __output.push('>');
264
+
265
+ {
266
+ __output.push('Show');
267
+ }
268
+
269
+ __output.push('</button>');
270
+ _$_.pop_component();
271
+ }
272
+
227
273
  function StaticHeader(__output) {
228
274
  _$_.push_component();
229
275
  __output.push('<h1');
@@ -366,39 +412,26 @@ function Actions(__output, { playgroundVisible = false }) {
366
412
  _$_.pop_component();
367
413
  }
368
414
 
369
- async function Layout(__output, { children }) {
370
- return _$_.async(async () => {
371
- _$_.push_component();
372
- __output.push('<main');
415
+ function Layout(__output, { children }) {
416
+ _$_.push_component();
417
+ __output.push('<main');
418
+ __output.push('>');
419
+
420
+ {
421
+ __output.push('<div');
422
+ __output.push(' class="container"');
373
423
  __output.push('>');
374
424
 
375
425
  {
376
- __output.push('<div');
377
- __output.push(' class="container"');
378
- __output.push('>');
379
-
380
- {
381
- {
382
- const comp = children;
383
- const args = [__output, {}];
384
-
385
- if (comp?.async) {
386
- await comp(...args);
387
- } else if (comp) {
388
- comp(...args);
389
- }
390
- }
391
- }
392
-
393
- __output.push('</div>');
426
+ _$_.render_expression(__output, children);
394
427
  }
395
428
 
396
- __output.push('</main>');
397
- _$_.pop_component();
398
- });
399
- }
429
+ __output.push('</div>');
430
+ }
400
431
 
401
- Layout.async = true;
432
+ __output.push('</main>');
433
+ _$_.pop_component();
434
+ }
402
435
 
403
436
  function Content(__output) {
404
437
  _$_.push_component();
@@ -430,7 +463,7 @@ export function WebsiteIndex(__output) {
430
463
  const args = [
431
464
  __output,
432
465
  {
433
- children: function children(__output) {
466
+ children: _$_.ripple_element(function render_children(__output) {
434
467
  _$_.push_component();
435
468
 
436
469
  {
@@ -462,7 +495,7 @@ export function WebsiteIndex(__output) {
462
495
  }
463
496
 
464
497
  _$_.pop_component();
465
- }
498
+ })
466
499
  }
467
500
  ];
468
501
 
package/tests/hydration/compiled/server/composite.js CHANGED
@@ -1,32 +1,35 @@
1
1
  // @ts-nocheck
2
2
  import * as _$_ from 'ripple/internal/server';
3
3
 
4
- export async function Layout(__output, __props) {
5
- return _$_.async(async () => {
6
- _$_.push_component();
7
- __output.push('<div');
8
- __output.push(' class="layout"');
9
- __output.push('>');
10
-
11
- {
12
- {
13
- const comp = __props.children;
14
- const args = [__output, {}];
15
-
16
- if (comp?.async) {
17
- await comp(...args);
18
- } else if (comp) {
19
- comp(...args);
20
- }
21
- }
22
- }
4
+ export function Layout(__output, __props) {
5
+ _$_.push_component();
6
+ __output.push('<div');
7
+ __output.push(' class="layout"');
8
+ __output.push('>');
9
+
10
+ {
11
+ _$_.render_expression(__output, __props.children);
12
+ }
23
13
 
24
- __output.push('</div>');
25
- _$_.pop_component();
26
- });
14
+ __output.push('</div>');
15
+ _$_.pop_component();
27
16
  }
28
17
 
29
- Layout.async = true;
18
+ export function TextWrappedLayout(__output, __props) {
19
+ _$_.push_component();
20
+ __output.push('<div');
21
+ __output.push(' class="layout"');
22
+ __output.push('>');
23
+
24
+ {
25
+ __output.push('before');
26
+ _$_.render_expression(__output, __props.children);
27
+ __output.push('after');
28
+ }
29
+
30
+ __output.push('</div>');
31
+ _$_.pop_component();
32
+ }
30
33
 
31
34
  export function SingleChild(__output) {
32
35
  _$_.push_component();
@@ -85,7 +88,7 @@ export function LayoutWithSingleChild(__output) {
85
88
  const args = [
86
89
  __output,
87
90
  {
88
- children: function children(__output) {
91
+ children: _$_.ripple_element(function render_children(__output) {
89
92
  _$_.push_component();
90
93
 
91
94
  {
@@ -96,7 +99,7 @@ export function LayoutWithSingleChild(__output) {
96
99
  }
97
100
 
98
101
  _$_.pop_component();
99
- }
102
+ })
100
103
  }
101
104
  ];
102
105
 
@@ -115,7 +118,7 @@ export function LayoutWithMultipleChildren(__output) {
115
118
  const args = [
116
119
  __output,
117
120
  {
118
- children: function children(__output) {
121
+ children: _$_.ripple_element(function render_children(__output) {
119
122
  _$_.push_component();
120
123
 
121
124
  {
@@ -135,7 +138,7 @@ export function LayoutWithMultipleChildren(__output) {
135
138
 
136
139
  __output.push('</div>');
137
140
  _$_.pop_component();
138
- }
141
+ })
139
142
  }
140
143
  ];
141
144
 
@@ -154,7 +157,7 @@ export function LayoutWithMultiRootChild(__output) {
154
157
  const args = [
155
158
  __output,
156
159
  {
157
- children: function children(__output) {
160
+ children: _$_.ripple_element(function render_children(__output) {
158
161
  _$_.push_component();
159
162
 
160
163
  {
@@ -165,7 +168,37 @@ export function LayoutWithMultiRootChild(__output) {
165
168
  }
166
169
 
167
170
  _$_.pop_component();
168
- }
171
+ })
172
+ }
173
+ ];
174
+
175
+ comp(...args);
176
+ }
177
+
178
+ _$_.pop_component();
179
+ }
180
+
181
+ export function LayoutWithTextAroundChildren(__output) {
182
+ _$_.push_component();
183
+
184
+ {
185
+ const comp = TextWrappedLayout;
186
+
187
+ const args = [
188
+ __output,
189
+ {
190
+ children: _$_.ripple_element(function render_children(__output) {
191
+ _$_.push_component();
192
+
193
+ {
194
+ const comp = SingleChild;
195
+ const args = [__output, {}];
196
+
197
+ comp(...args);
198
+ }
199
+
200
+ _$_.pop_component();
201
+ })
169
202
  }
170
203
  ];
171
204
 
package/tests/hydration/compiled/server/hmr.js CHANGED
@@ -3,49 +3,36 @@ import * as _$_ from 'ripple/internal/server';
3
3
 
4
4
  import { track } from 'ripple/server';
5
5
 
6
- export async function Layout(__output, { children }) {
7
- return _$_.async(async () => {
8
- _$_.push_component();
9
- __output.push('<div');
10
- __output.push(' class="layout"');
6
+ export function Layout(__output, { children }) {
7
+ _$_.push_component();
8
+ __output.push('<div');
9
+ __output.push(' class="layout"');
10
+ __output.push('>');
11
+
12
+ {
13
+ __output.push('<nav');
14
+ __output.push(' class="nav"');
11
15
  __output.push('>');
12
16
 
13
17
  {
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('>');
26
-
27
- {
28
- {
29
- const comp = children;
30
- const args = [__output, {}];
18
+ __output.push('Navigation');
19
+ }
31
20
 
32
- if (comp?.async) {
33
- await comp(...args);
34
- } else if (comp) {
35
- comp(...args);
36
- }
37
- }
38
- }
21
+ __output.push('</nav>');
22
+ __output.push('<main');
23
+ __output.push(' class="main"');
24
+ __output.push('>');
39
25
 
40
- __output.push('</main>');
26
+ {
27
+ _$_.render_expression(__output, children);
41
28
  }
42
29
 
43
- __output.push('</div>');
44
- _$_.pop_component();
45
- });
46
- }
30
+ __output.push('</main>');
31
+ }
47
32
 
48
- Layout.async = true;
33
+ __output.push('</div>');
34
+ _$_.pop_component();
35
+ }
49
36
 
50
37
  export function Content(__output) {
51
38
  _$_.push_component();
@@ -87,7 +74,7 @@ export function LayoutWithContent(__output) {
87
74
  const args = [
88
75
  __output,
89
76
  {
90
- children: function children(__output) {
77
+ children: _$_.ripple_element(function render_children(__output) {
91
78
  _$_.push_component();
92
79
 
93
80
  {
@@ -98,7 +85,7 @@ export function LayoutWithContent(__output) {
98
85
  }
99
86
 
100
87
  _$_.pop_component();
101
- }
88
+ })
102
89
  }
103
90
  ];
104
91