ripple 0.3.8 → 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 (79) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/package.json +2 -2
  3. package/src/compiler/phases/1-parse/index.js +38 -172
  4. package/src/compiler/phases/2-analyze/index.js +308 -115
  5. package/src/compiler/phases/2-analyze/prune.js +13 -5
  6. package/src/compiler/phases/3-transform/client/index.js +197 -213
  7. package/src/compiler/phases/3-transform/segments.js +0 -7
  8. package/src/compiler/phases/3-transform/server/index.js +77 -170
  9. package/src/compiler/types/acorn.d.ts +1 -1
  10. package/src/compiler/types/estree.d.ts +1 -1
  11. package/src/compiler/types/import.d.ts +0 -2
  12. package/src/compiler/types/index.d.ts +14 -18
  13. package/src/compiler/types/parse.d.ts +3 -9
  14. package/src/compiler/utils.js +154 -21
  15. package/src/runtime/element.js +39 -0
  16. package/src/runtime/index-client.js +2 -13
  17. package/src/runtime/index-server.js +2 -2
  18. package/src/runtime/internal/client/bindings.js +3 -1
  19. package/src/runtime/internal/client/composite.js +11 -6
  20. package/src/runtime/internal/client/events.js +1 -1
  21. package/src/runtime/internal/client/expression.js +218 -0
  22. package/src/runtime/internal/client/head.js +3 -4
  23. package/src/runtime/internal/client/index.js +4 -1
  24. package/src/runtime/internal/client/portal.js +12 -6
  25. package/src/runtime/internal/client/runtime.js +0 -52
  26. package/src/runtime/internal/server/index.js +57 -56
  27. package/tests/client/basic/basic.components.test.ripple +85 -87
  28. package/tests/client/basic/basic.errors.test.ripple +28 -4
  29. package/tests/client/basic/basic.reactivity.test.ripple +10 -155
  30. package/tests/client/basic/basic.rendering.test.ripple +23 -8
  31. package/tests/client/capture-error.js +12 -0
  32. package/tests/client/compiler/compiler.basic.test.ripple +107 -18
  33. package/tests/client/composite/composite.props.test.ripple +5 -9
  34. package/tests/client/composite/composite.reactivity.test.ripple +35 -36
  35. package/tests/client/composite/composite.render.test.ripple +45 -13
  36. package/tests/client/css/global-additional-cases.test.ripple +3 -3
  37. package/tests/client/dynamic-elements.test.ripple +3 -4
  38. package/tests/client/lazy-destructuring.test.ripple +69 -12
  39. package/tests/client/svg.test.ripple +4 -4
  40. package/tests/hydration/basic.test.js +23 -0
  41. package/tests/hydration/compiled/client/basic.js +118 -66
  42. package/tests/hydration/compiled/client/composite.js +90 -37
  43. package/tests/hydration/compiled/client/events.js +18 -18
  44. package/tests/hydration/compiled/client/for.js +62 -62
  45. package/tests/hydration/compiled/client/head.js +10 -10
  46. package/tests/hydration/compiled/client/hmr.js +13 -10
  47. package/tests/hydration/compiled/client/html.js +274 -236
  48. package/tests/hydration/compiled/client/if-children.js +41 -35
  49. package/tests/hydration/compiled/client/if.js +2 -2
  50. package/tests/hydration/compiled/client/mixed-control-flow.js +12 -12
  51. package/tests/hydration/compiled/client/nested-control-flow.js +46 -46
  52. package/tests/hydration/compiled/client/portal.js +8 -8
  53. package/tests/hydration/compiled/client/reactivity.js +14 -14
  54. package/tests/hydration/compiled/client/return.js +2 -2
  55. package/tests/hydration/compiled/client/try.js +4 -4
  56. package/tests/hydration/compiled/server/basic.js +64 -31
  57. package/tests/hydration/compiled/server/composite.js +62 -29
  58. package/tests/hydration/compiled/server/hmr.js +24 -37
  59. package/tests/hydration/compiled/server/html.js +472 -611
  60. package/tests/hydration/compiled/server/if-children.js +77 -103
  61. package/tests/hydration/compiled/server/portal.js +8 -8
  62. package/tests/hydration/components/basic.ripple +15 -5
  63. package/tests/hydration/components/composite.ripple +13 -1
  64. package/tests/hydration/components/hmr.ripple +1 -3
  65. package/tests/hydration/components/html.ripple +13 -35
  66. package/tests/hydration/components/if-children.ripple +4 -8
  67. package/tests/hydration/composite.test.js +11 -0
  68. package/tests/server/basic.attributes.test.ripple +50 -0
  69. package/tests/server/basic.components.test.ripple +22 -28
  70. package/tests/server/basic.test.ripple +12 -0
  71. package/tests/server/compiler.test.ripple +43 -4
  72. package/tests/server/composite.props.test.ripple +5 -9
  73. package/tests/server/dynamic-elements.test.ripple +3 -4
  74. package/tests/server/lazy-destructuring.test.ripple +68 -12
  75. package/tests/server/style-identifier.test.ripple +2 -4
  76. package/tsconfig.typecheck.json +4 -0
  77. package/types/index.d.ts +9 -21
  78. package/tests/client/__snapshots__/tracked-expression.test.ripple.snap +0 -34
  79. package/tests/client/tracked-expression.test.ripple +0 -26
@@ -42,12 +42,15 @@ export function IfWithChildren(__anchor, { children }, __block) {
42
42
  var div_3 = root_1();
43
43
 
44
44
  {
45
- var node_1 = _$_.child(div_3);
45
+ var expression = _$_.child(div_3);
46
46
 
47
- children(node_1, {}, _$_.active_block);
48
47
  _$_.pop(div_3);
49
48
  }
50
49
 
50
+ _$_.render(() => {
51
+ _$_.expression(expression, () => children);
52
+ });
53
+
51
54
  _$_.append(__anchor, div_3);
52
55
  };
53
56
 
@@ -63,15 +66,15 @@ export function IfWithChildren(__anchor, { children }, __block) {
63
66
  _$_.pop_component();
64
67
  }
65
68
 
66
- export function ChildItem(__anchor, { text }, __block) {
69
+ export function ChildItem(__anchor, { text: label }, __block) {
67
70
  _$_.push_component();
68
71
 
69
72
  var div_4 = root_2();
70
73
 
71
74
  {
72
- var text_1 = _$_.child(div_4, true);
75
+ var expression_1 = _$_.child(div_4, true);
73
76
 
74
- text_1.nodeValue = text;
77
+ expression_1.nodeValue = label;
75
78
  _$_.pop(div_4);
76
79
  }
77
80
 
@@ -83,25 +86,25 @@ export function TestIfWithChildren(__anchor, _, __block) {
83
86
  _$_.push_component();
84
87
 
85
88
  var fragment = root_3();
86
- var node_2 = _$_.first_child_frag(fragment);
89
+ var node_1 = _$_.first_child_frag(fragment);
87
90
 
88
91
  IfWithChildren(
89
- node_2,
92
+ node_1,
90
93
  {
91
- children(__anchor, _, __block) {
94
+ children: _$_.ripple_element(function render_children(__anchor, _, __block) {
92
95
  _$_.push_component();
93
96
 
94
97
  var fragment_1 = root_4();
95
- var node_3 = _$_.first_child_frag(fragment_1);
98
+ var node_2 = _$_.first_child_frag(fragment_1);
96
99
 
97
- ChildItem(node_3, { text: "Item 1" }, _$_.active_block);
100
+ ChildItem(node_2, { text: "Item 1" }, _$_.active_block);
98
101
 
99
- var node_4 = _$_.sibling(node_3);
102
+ var node_3 = _$_.sibling(node_2);
100
103
 
101
- ChildItem(node_4, { text: "Item 2" }, _$_.active_block);
104
+ ChildItem(node_3, { text: "Item 2" }, _$_.active_block);
102
105
  _$_.append(__anchor, fragment_1);
103
106
  _$_.pop_component();
104
- }
107
+ })
105
108
  },
106
109
  _$_.active_block
107
110
  );
@@ -121,7 +124,7 @@ export function IfWithStaticChildren(__anchor, _, __block) {
121
124
 
122
125
  div_6.__click = () => _$_.set(lazy_1, !_$_.get(lazy_1));
123
126
 
124
- var node_5 = _$_.sibling(div_6);
127
+ var node_4 = _$_.sibling(div_6);
125
128
 
126
129
  {
127
130
  var consequent_1 = (__anchor) => {
@@ -130,7 +133,7 @@ export function IfWithStaticChildren(__anchor, _, __block) {
130
133
  _$_.append(__anchor, div_7);
131
134
  };
132
135
 
133
- _$_.if(node_5, (__render) => {
136
+ _$_.if(node_4, (__render) => {
134
137
  if (_$_.get(lazy_1)) __render(consequent_1);
135
138
  });
136
139
  }
@@ -154,23 +157,26 @@ export function IfWithSiblingsAndChildren(__anchor, { children }, __block) {
154
157
  div_8.__click = () => _$_.set(lazy_2, !_$_.get(lazy_2));
155
158
  _$_.pop(div_8);
156
159
 
157
- var node_6 = _$_.sibling(div_8);
160
+ var node_5 = _$_.sibling(div_8);
158
161
 
159
162
  {
160
163
  var consequent_2 = (__anchor) => {
161
164
  var div_9 = root_8();
162
165
 
163
166
  {
164
- var node_7 = _$_.child(div_9);
167
+ var expression_2 = _$_.child(div_9);
165
168
 
166
- children(node_7, {}, _$_.active_block);
167
169
  _$_.pop(div_9);
168
170
  }
169
171
 
172
+ _$_.render(() => {
173
+ _$_.expression(expression_2, () => children);
174
+ });
175
+
170
176
  _$_.append(__anchor, div_9);
171
177
  };
172
178
 
173
- _$_.if(node_6, (__render) => {
179
+ _$_.if(node_5, (__render) => {
174
180
  if (_$_.get(lazy_2)) __render(consequent_2);
175
181
  });
176
182
  }
@@ -186,25 +192,25 @@ export function TestIfWithSiblingsAndChildren(__anchor, _, __block) {
186
192
  _$_.push_component();
187
193
 
188
194
  var fragment_2 = root_9();
189
- var node_8 = _$_.first_child_frag(fragment_2);
195
+ var node_6 = _$_.first_child_frag(fragment_2);
190
196
 
191
197
  IfWithSiblingsAndChildren(
192
- node_8,
198
+ node_6,
193
199
  {
194
- children(__anchor, _, __block) {
200
+ children: _$_.ripple_element(function render_children(__anchor, _, __block) {
195
201
  _$_.push_component();
196
202
 
197
203
  var fragment_3 = root_10();
198
- var node_9 = _$_.first_child_frag(fragment_3);
204
+ var node_7 = _$_.first_child_frag(fragment_3);
199
205
 
200
- ChildItem(node_9, { text: "Item A" }, _$_.active_block);
206
+ ChildItem(node_7, { text: "Item A" }, _$_.active_block);
201
207
 
202
- var node_10 = _$_.sibling(node_9);
208
+ var node_8 = _$_.sibling(node_7);
203
209
 
204
- ChildItem(node_10, { text: "Item B" }, _$_.active_block);
210
+ ChildItem(node_8, { text: "Item B" }, _$_.active_block);
205
211
  _$_.append(__anchor, fragment_3);
206
212
  _$_.pop_component();
207
- }
213
+ })
208
214
  },
209
215
  _$_.active_block
210
216
  );
@@ -225,7 +231,7 @@ export function ElementWithChildrenThenIf(__anchor, _, __block) {
225
231
 
226
232
  _$_.pop(div_10);
227
233
 
228
- var node_11 = _$_.sibling(div_10);
234
+ var node_9 = _$_.sibling(div_10);
229
235
 
230
236
  {
231
237
  var consequent_3 = (__anchor) => {
@@ -234,7 +240,7 @@ export function ElementWithChildrenThenIf(__anchor, _, __block) {
234
240
  _$_.append(__anchor, div_12);
235
241
  };
236
242
 
237
- _$_.if(node_11, (__render) => {
243
+ _$_.if(node_9, (__render) => {
238
244
  if (_$_.get(lazy_3)) __render(consequent_3);
239
245
  });
240
246
  }
@@ -262,7 +268,7 @@ export function DeepNestingThenIf(__anchor, _, __block) {
262
268
 
263
269
  _$_.pop(article_1);
264
270
 
265
- var node_12 = _$_.sibling(article_1);
271
+ var node_10 = _$_.sibling(article_1);
266
272
 
267
273
  {
268
274
  var consequent_4 = (__anchor) => {
@@ -271,7 +277,7 @@ export function DeepNestingThenIf(__anchor, _, __block) {
271
277
  _$_.append(__anchor, footer_1);
272
278
  };
273
279
 
274
- _$_.if(node_12, (__render) => {
280
+ _$_.if(node_10, (__render) => {
275
281
  if (_$_.get(lazy_4)) __render(consequent_4);
276
282
  });
277
283
  }
@@ -311,7 +317,7 @@ export function DomElementChildrenThenSibling(__anchor, _, __block) {
311
317
  var div_15 = _$_.sibling(div_14);
312
318
 
313
319
  {
314
- var node_13 = _$_.child(div_15);
320
+ var node_11 = _$_.child(div_15);
315
321
 
316
322
  {
317
323
  var consequent_5 = (__anchor) => {
@@ -326,7 +332,7 @@ export function DomElementChildrenThenSibling(__anchor, _, __block) {
326
332
  _$_.append(__anchor, div_16);
327
333
  };
328
334
 
329
- _$_.if(node_13, (__render) => {
335
+ _$_.if(node_11, (__render) => {
330
336
  if (_$_.get(lazy_5) === 'code') __render(consequent_5); else __render(alternate, false);
331
337
  });
332
338
  }
@@ -370,7 +376,7 @@ export function DomChildrenThenStaticSiblings(__anchor, _, __block) {
370
376
  var li_1 = _$_.child(ul_1);
371
377
 
372
378
  {
373
- var text_2 = _$_.child(li_1, true);
379
+ var expression_3 = _$_.child(li_1, true);
374
380
 
375
381
  _$_.pop(li_1);
376
382
  }
@@ -385,7 +391,7 @@ export function DomChildrenThenStaticSiblings(__anchor, _, __block) {
385
391
  _$_.next();
386
392
 
387
393
  _$_.render(() => {
388
- _$_.set_text(text_2, 'Item count: ' + _$_.with_scope(__block, () => String(_$_.get(lazy_6))));
394
+ _$_.set_text(expression_3, 'Item count: ' + _$_.with_scope(__block, () => String(_$_.get(lazy_6))));
389
395
  });
390
396
 
391
397
  _$_.append(__anchor, fragment_6, true);
@@ -188,8 +188,8 @@ export function NestedIf(__anchor, _, __block) {
188
188
  var div_8 = root_13();
189
189
 
190
190
  {
191
- var text = _$_.child(div_8);
192
- var node_6 = _$_.sibling(text);
191
+ var expression = _$_.child(div_8);
192
+ var node_6 = _$_.sibling(expression);
193
193
 
194
194
  {
195
195
  var consequent_5 = (__anchor) => {
@@ -66,7 +66,7 @@ export function MixedControlFlowStatic(__anchor, _, __block) {
66
66
  var div_1 = root_4();
67
67
 
68
68
  {
69
- var text = _$_.child(div_1, true);
69
+ var expression = _$_.child(div_1, true);
70
70
 
71
71
  _$_.pop(div_1);
72
72
  }
@@ -76,7 +76,7 @@ export function MixedControlFlowStatic(__anchor, _, __block) {
76
76
  var __a = `A-${_$_.get(pattern).id}`;
77
77
 
78
78
  if (__prev.a !== __a) {
79
- _$_.set_text(text, __prev.a = __a);
79
+ _$_.set_text(expression, __prev.a = __a);
80
80
  }
81
81
 
82
82
  var __b = `row row-${_$_.get(pattern).id} kind-a`;
@@ -117,7 +117,7 @@ export function MixedControlFlowStatic(__anchor, _, __block) {
117
117
  var div_3 = root_7();
118
118
 
119
119
  {
120
- var text_1 = _$_.child(div_3, true);
120
+ var expression_1 = _$_.child(div_3, true);
121
121
 
122
122
  _$_.pop(div_3);
123
123
  }
@@ -127,7 +127,7 @@ export function MixedControlFlowStatic(__anchor, _, __block) {
127
127
  var __a = `B-${_$_.get(pattern).id}`;
128
128
 
129
129
  if (__prev.a !== __a) {
130
- _$_.set_text(text_1, __prev.a = __a);
130
+ _$_.set_text(expression_1, __prev.a = __a);
131
131
  }
132
132
 
133
133
  var __b = `row row-${_$_.get(pattern).id} kind-b`;
@@ -244,7 +244,7 @@ export function MixedControlFlowReactive(__anchor, _, __block) {
244
244
  var p_1 = root_13();
245
245
 
246
246
  {
247
- var text_2 = _$_.child(p_1, true);
247
+ var expression_2 = _$_.child(p_1, true);
248
248
 
249
249
  _$_.pop(p_1);
250
250
  }
@@ -254,7 +254,7 @@ export function MixedControlFlowReactive(__anchor, _, __block) {
254
254
  var __a = `A:${_$_.get(pattern_1).label}`;
255
255
 
256
256
  if (__prev.a !== __a) {
257
- _$_.set_text(text_2, __prev.a = __a);
257
+ _$_.set_text(expression_2, __prev.a = __a);
258
258
  }
259
259
 
260
260
  var __b = `item item-${_$_.get(pattern_1).id}`;
@@ -291,7 +291,7 @@ export function MixedControlFlowReactive(__anchor, _, __block) {
291
291
  var p_3 = root_16();
292
292
 
293
293
  {
294
- var text_3 = _$_.child(p_3, true);
294
+ var expression_3 = _$_.child(p_3, true);
295
295
 
296
296
  _$_.pop(p_3);
297
297
  }
@@ -301,7 +301,7 @@ export function MixedControlFlowReactive(__anchor, _, __block) {
301
301
  var __a = `B:${_$_.get(pattern_1).label}`;
302
302
 
303
303
  if (__prev.a !== __a) {
304
- _$_.set_text(text_3, __prev.a = __a);
304
+ _$_.set_text(expression_3, __prev.a = __a);
305
305
  }
306
306
 
307
307
  var __b = `item item-${_$_.get(pattern_1).id}`;
@@ -407,9 +407,9 @@ export function MixedControlFlowAsyncPending(__anchor, _, __block) {
407
407
  _$_.set_class(div_7, `pending-row pending-row-${row}`, void 0, true);
408
408
 
409
409
  {
410
- var text_4 = _$_.child(div_7, true);
410
+ var expression_4 = _$_.child(div_7, true);
411
411
 
412
- text_4.nodeValue = `pending ${row}`;
412
+ expression_4.nodeValue = `pending ${row}`;
413
413
  _$_.pop(div_7);
414
414
  }
415
415
 
@@ -469,9 +469,9 @@ function AsyncRow(__anchor, { label }, __block) {
469
469
  var div_9 = root_25();
470
470
 
471
471
  {
472
- var text_5 = _$_.child(div_9, true);
472
+ var expression_5 = _$_.child(div_9, true);
473
473
 
474
- text_5.nodeValue = value;
474
+ expression_5.nodeValue = value;
475
475
  _$_.pop(div_9);
476
476
  }
477
477