ripple 0.4.1 → 0.4.3

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 (96) hide show
  1. package/CHANGELOG.md +162 -0
  2. package/package.json +9 -3
  3. package/src/constants.js +4 -0
  4. package/src/jsx-runtime.d.ts +2 -1
  5. package/src/runtime/array.js +15 -9
  6. package/src/runtime/index-client.js +25 -7
  7. package/src/runtime/index-server.js +1 -0
  8. package/src/runtime/internal/client/attributes.js +313 -0
  9. package/src/runtime/internal/client/blocks.js +4 -14
  10. package/src/runtime/internal/client/component.js +2 -5
  11. package/src/runtime/internal/client/composite.js +14 -6
  12. package/src/runtime/internal/client/constants.js +12 -6
  13. package/src/runtime/internal/client/context.js +3 -2
  14. package/src/runtime/internal/client/css.js +11 -26
  15. package/src/runtime/internal/client/errors.js +188 -0
  16. package/src/runtime/internal/client/events.js +79 -34
  17. package/src/runtime/internal/client/expression.js +21 -116
  18. package/src/runtime/internal/client/for.js +272 -222
  19. package/src/runtime/internal/client/head.js +4 -3
  20. package/src/runtime/internal/client/html.js +5 -3
  21. package/src/runtime/internal/client/hydrate.js +484 -0
  22. package/src/runtime/internal/client/hydration-enabled.js +7 -0
  23. package/src/runtime/internal/client/hydration.js +16 -97
  24. package/src/runtime/internal/client/if.js +13 -9
  25. package/src/runtime/internal/client/index.js +16 -8
  26. package/src/runtime/internal/client/operations.js +12 -9
  27. package/src/runtime/internal/client/portal.js +3 -2
  28. package/src/runtime/internal/client/render.js +75 -321
  29. package/src/runtime/internal/client/root-boundary-enabled.js +7 -0
  30. package/src/runtime/internal/client/runtime.js +129 -362
  31. package/src/runtime/internal/client/template-ns.js +47 -0
  32. package/src/runtime/internal/client/template.js +63 -140
  33. package/src/runtime/internal/client/track-async.js +356 -0
  34. package/src/runtime/internal/client/try.js +133 -319
  35. package/src/runtime/internal/client/types.d.ts +48 -24
  36. package/src/runtime/internal/server/index.js +38 -33
  37. package/src/runtime/internal/server/prerender.js +27 -0
  38. package/src/server/index.js +1 -0
  39. package/src/utils/class-name.js +28 -0
  40. package/tests/client/basic/basic.errors.test.tsrx +3 -3
  41. package/tests/client/compiler/__snapshots__/compiler.typescript.test.tsrx.snap +0 -2
  42. package/tests/client/compiler/compiler.basic.test.tsrx +4 -4
  43. package/tests/client/compiler/compiler.tracked-access.test.tsrx +3 -3
  44. package/tests/client/composite/composite.props.test.tsrx +10 -10
  45. package/tests/client/derived-release.test.tsrx +3 -3
  46. package/tests/client/for-item.test.tsrx +443 -0
  47. package/tests/client/for-selector.test.tsrx +95 -0
  48. package/tests/hydration/compiled/client/basic.js +97 -123
  49. package/tests/hydration/compiled/client/composite.js +5 -5
  50. package/tests/hydration/compiled/client/events.js +84 -79
  51. package/tests/hydration/compiled/client/for.js +229 -233
  52. package/tests/hydration/compiled/client/fragment-cursor.js +781 -481
  53. package/tests/hydration/compiled/client/head.js +23 -26
  54. package/tests/hydration/compiled/client/hmr.js +4 -4
  55. package/tests/hydration/compiled/client/html-in-template.js +5 -5
  56. package/tests/hydration/compiled/client/html.js +174 -208
  57. package/tests/hydration/compiled/client/if-children.js +71 -70
  58. package/tests/hydration/compiled/client/if-fragment-controlflow.js +46 -46
  59. package/tests/hydration/compiled/client/if.js +26 -26
  60. package/tests/hydration/compiled/client/mixed-control-flow.js +63 -105
  61. package/tests/hydration/compiled/client/nested-control-flow.js +170 -390
  62. package/tests/hydration/compiled/client/portal.js +10 -10
  63. package/tests/hydration/compiled/client/reactivity.js +36 -50
  64. package/tests/hydration/compiled/client/return.js +2 -2
  65. package/tests/hydration/compiled/client/streaming.js +34 -40
  66. package/tests/hydration/compiled/client/switch.js +25 -25
  67. package/tests/hydration/compiled/client/track-async-serialization.js +41 -41
  68. package/tests/hydration/compiled/client/try.js +15 -15
  69. package/tests/hydration/compiled/client/typed-text.js +8 -19
  70. package/tests/hydration/compiled/server/basic.js +6 -6
  71. package/tests/hydration/compiled/server/events.js +13 -61
  72. package/tests/hydration/compiled/server/for.js +23 -31
  73. package/tests/hydration/compiled/server/fragment-cursor.js +214 -366
  74. package/tests/hydration/compiled/server/head.js +6 -6
  75. package/tests/hydration/compiled/server/hmr.js +1 -1
  76. package/tests/hydration/compiled/server/html.js +1 -1
  77. package/tests/hydration/compiled/server/if-children.js +9 -9
  78. package/tests/hydration/compiled/server/if.js +5 -5
  79. package/tests/hydration/compiled/server/mixed-control-flow.js +4 -4
  80. package/tests/hydration/compiled/server/portal.js +1 -1
  81. package/tests/hydration/compiled/server/reactivity.js +9 -9
  82. package/tests/hydration/compiled/server/streaming.js +9 -9
  83. package/tests/hydration/compiled/server/switch.js +4 -4
  84. package/tests/hydration/compiled/server/track-async-serialization.js +16 -16
  85. package/tests/hydration/compiled/server/try.js +4 -4
  86. package/tests/hydration/compiled/server/typed-text.js +1 -1
  87. package/tests/hydration/components/fragment-cursor.tsrx +60 -0
  88. package/tests/hydration/components/track-async-serialization.tsrx +2 -2
  89. package/tests/hydration/fragment-cursor.test.js +34 -1
  90. package/tests/hydration/track-async-serialization.test.js +1 -1
  91. package/tests/server/basic.components.test.tsrx +3 -3
  92. package/tests/server/basic.test.tsrx +23 -0
  93. package/tests/server/track-async-serialization.test.tsrx +6 -6
  94. package/tests/utils/tracked-types.test.js +3 -3
  95. package/types/index.d.ts +8 -8
  96. package/types/server.d.ts +17 -0
package/tests/hydration/compiled/client/head.js CHANGED
@@ -1,7 +1,7 @@
1
1
  // @ts-nocheck
2
2
  import * as _$_ from 'ripple/internal/client';
3
3
 
4
- var root_1 = _$_.template(`<div>Content</div>`, 0);
4
+ var root_1 = _$_.template(`<div>Content`);
5
5
  var root = _$_.template(`<!>`, 1, 1);
6
6
 
7
7
  function StaticTitle_render(__anchor, __block) {
@@ -23,11 +23,11 @@ function StaticTitle_render(__anchor, __block) {
23
23
 
24
24
  StaticTitle[_$_.$r] = StaticTitle_render;
25
25
 
26
- var root_3 = _$_.template(`<div><span> </span></div>`, 0);
26
+ var root_3 = _$_.template(`<div><span> `);
27
27
  var root_2 = _$_.template(`<!>`, 1, 1);
28
28
 
29
29
  function ReactiveTitle_render(__anchor, __block) {
30
- const title = _$_.track('Initial Title', __block, 'cbca63e3');
30
+ const title = _$_.track('Initial Title', __block, '1kjlv4z');
31
31
  var fragment_1 = root_2();
32
32
  var node_1 = _$_.first_child_frag(fragment_1);
33
33
 
@@ -59,8 +59,8 @@ function ReactiveTitle_render(__anchor, __block) {
59
59
 
60
60
  ReactiveTitle[_$_.$r] = ReactiveTitle_render;
61
61
 
62
- var root_6 = _$_.template(`<meta name="description" content="Page description"><link rel="stylesheet" href="/styles.css">`, 1, 2);
63
- var root_5 = _$_.template(`<div>Page content</div>`, 0);
62
+ var root_6 = _$_.template(`<meta name=description content="Page description"><link rel=stylesheet href=/styles.css>`, 1, 2);
63
+ var root_5 = _$_.template(`<div>Page content`);
64
64
  var root_4 = _$_.template(`<!>`, 1, 1);
65
65
 
66
66
  function MultipleHeadElements_render(__anchor, __block) {
@@ -86,12 +86,12 @@ function MultipleHeadElements_render(__anchor, __block) {
86
86
 
87
87
  MultipleHeadElements[_$_.$r] = MultipleHeadElements_render;
88
88
 
89
- var root_9 = _$_.template(`<meta name="description">`, 0);
90
- var root_8 = _$_.template(`<div> </div>`, 0);
89
+ var root_9 = _$_.template(`<meta name=description>`);
90
+ var root_8 = _$_.template(`<div> `);
91
91
  var root_7 = _$_.template(`<!>`, 1, 1);
92
92
 
93
93
  function ReactiveMetaTags_render(__anchor, __block) {
94
- const description = _$_.track('Initial description', __block, '38bfa3b2');
94
+ const description = _$_.track('Initial description', __block, 'fqug8i');
95
95
  var fragment_4 = root_7();
96
96
  var node_3 = _$_.first_child_frag(fragment_4);
97
97
 
@@ -121,11 +121,11 @@ function ReactiveMetaTags_render(__anchor, __block) {
121
121
 
122
122
  ReactiveMetaTags[_$_.$r] = ReactiveMetaTags_render;
123
123
 
124
- var root_11 = _$_.template(`<div> </div>`, 0);
124
+ var root_11 = _$_.template(`<div> `);
125
125
  var root_10 = _$_.template(`<!>`, 1, 1);
126
126
 
127
127
  function TitleWithTemplate_render(__anchor, __block) {
128
- const name = _$_.track('World', __block, 'f3925cd5');
128
+ const name = _$_.track('World', __block, '1vkyx91');
129
129
  var fragment_5 = root_10();
130
130
  var node_4 = _$_.first_child_frag(fragment_5);
131
131
 
@@ -153,7 +153,7 @@ function TitleWithTemplate_render(__anchor, __block) {
153
153
 
154
154
  TitleWithTemplate[_$_.$r] = TitleWithTemplate_render;
155
155
 
156
- var root_13 = _$_.template(`<div>Empty title test</div>`, 0);
156
+ var root_13 = _$_.template(`<div>Empty title test`);
157
157
  var root_12 = _$_.template(`<!>`, 1, 1);
158
158
 
159
159
  function EmptyTitle_render(__anchor, __block) {
@@ -175,12 +175,12 @@ function EmptyTitle_render(__anchor, __block) {
175
175
 
176
176
  EmptyTitle[_$_.$r] = EmptyTitle_render;
177
177
 
178
- var root_15 = _$_.template(`<div> </div>`, 0);
178
+ var root_15 = _$_.template(`<div> `);
179
179
  var root_14 = _$_.template(`<!>`, 1, 1);
180
180
 
181
181
  function ConditionalTitle_render(__anchor, __block) {
182
- const showPrefix = _$_.track(true, __block, 'ff71bf1f');
183
- const title = _$_.track('Main Page', __block, '7cd7d671');
182
+ const showPrefix = _$_.track(true, __block, '1yvk8in');
183
+ const title = _$_.track('Main Page', __block, 'yn0twx');
184
184
  var fragment_7 = root_14();
185
185
  var node_6 = _$_.first_child_frag(fragment_7);
186
186
 
@@ -208,20 +208,21 @@ function ConditionalTitle_render(__anchor, __block) {
208
208
 
209
209
  ConditionalTitle[_$_.$r] = ConditionalTitle_render;
210
210
 
211
- var root_17 = _$_.template(`<div><span> </span></div>`, 0);
211
+ var root_17 = _$_.template(`<div><span>`);
212
212
 
213
213
  function render(__prev) {
214
- var __a = __prev._count.value;
214
+ var __a = __prev._a.value;
215
215
 
216
216
  if (__prev.a !== __a) {
217
- _$_.set_text(__prev._expression_4, __prev.a = __a);
217
+ _$_.set_text_content(__prev._b, __a, __prev.a);
218
+ __prev.a = __a;
218
219
  }
219
220
  }
220
221
 
221
222
  var root_16 = _$_.template(`<!>`, 1, 1);
222
223
 
223
224
  function ComputedTitle_render(__anchor, __block) {
224
- const count = _$_.track(0, __block, 'b6a48610');
225
+ const count = _$_.track(0, __block, '1eod79s');
225
226
  let prefix = 'Count: ';
226
227
  var fragment_8 = root_16();
227
228
  var node_7 = _$_.first_child_frag(fragment_8);
@@ -231,10 +232,6 @@ function ComputedTitle_render(__anchor, __block) {
231
232
 
232
233
  {
233
234
  var span_1 = _$_.hydrating ? _$_.hydrate_child() : div_7.firstChild;
234
-
235
- {
236
- var expression_4 = _$_.hydrating ? _$_.hydrate_text() : span_1.firstChild;
237
- }
238
235
  }
239
236
 
240
237
  _$_.head('60e9fce1', (__anchor) => {
@@ -243,7 +240,7 @@ function ComputedTitle_render(__anchor, __block) {
243
240
  });
244
241
  });
245
242
 
246
- _$_.render(render, { a: ' ', _count: count, _expression_4: expression_4 });
243
+ _$_.render(render, { a: '', _a: count, _b: span_1 });
247
244
  _$_.append(__anchor, div_7);
248
245
  }));
249
246
 
@@ -252,8 +249,8 @@ function ComputedTitle_render(__anchor, __block) {
252
249
 
253
250
  ComputedTitle[_$_.$r] = ComputedTitle_render;
254
251
 
255
- var root_20 = _$_.template(`<meta name="author" content="Test Author">`, 0);
256
- var root_19 = _$_.template(`<div>Content</div>`, 0);
252
+ var root_20 = _$_.template(`<meta name=author content="Test Author">`);
253
+ var root_19 = _$_.template(`<div>Content`);
257
254
  var root_18 = _$_.template(`<!>`, 1, 1);
258
255
 
259
256
  function MultipleHeadBlocks_render(__anchor, __block) {
@@ -281,7 +278,7 @@ function MultipleHeadBlocks_render(__anchor, __block) {
281
278
 
282
279
  MultipleHeadBlocks[_$_.$r] = MultipleHeadBlocks_render;
283
280
 
284
- var root_22 = _$_.template(`<div>Styled content</div>`, 0);
281
+ var root_22 = _$_.template(`<div>Styled content`);
285
282
  var root_21 = _$_.template(`<!>`, 1, 1);
286
283
 
287
284
  function HeadWithStyle_render(__anchor, __block) {
package/tests/hydration/compiled/client/hmr.js CHANGED
@@ -1,7 +1,7 @@
1
1
  // @ts-nocheck
2
2
  import * as _$_ from 'ripple/internal/client';
3
3
 
4
- var root = _$_.template(`<div class="layout"><nav class="nav">Navigation</nav><main class="main"><!></main></div>`, 0);
4
+ var root = _$_.template(`<div class=layout><nav class=nav>Navigation</nav><main class=main><!>`);
5
5
 
6
6
  function Layout_render(__anchor, __block, { children }) {
7
7
  var div = root();
@@ -23,7 +23,7 @@ function Layout_render(__anchor, __block, { children }) {
23
23
 
24
24
  Layout[_$_.$r] = Layout_render;
25
25
 
26
- var root_2 = _$_.template(`<p class="text">Hello world</p>`, 0);
26
+ var root_2 = _$_.template(`<p class=text>Hello world`);
27
27
 
28
28
  function consequent(__anchor, visible) {
29
29
  var p = root_2();
@@ -35,10 +35,10 @@ function if_1(visible) {
35
35
  if (visible.value) return consequent;
36
36
  }
37
37
 
38
- var root_1 = _$_.template(`<div class="content"><!></div>`, 0);
38
+ var root_1 = _$_.template(`<div class=content><!>`);
39
39
 
40
40
  function Content_render(__anchor, __block) {
41
- const visible = _$_.track(true, __block, '0bdb1500');
41
+ const visible = _$_.track(true, __block, '3af9q8');
42
42
  var div_1 = root_1();
43
43
 
44
44
  {
package/tests/hydration/compiled/client/html-in-template.js CHANGED
@@ -1,7 +1,7 @@
1
1
  // @ts-nocheck
2
2
  import * as _$_ from 'ripple/internal/client';
3
3
 
4
- var root = _$_.template(`<template id="data1"></template>`, 0);
4
+ var root = _$_.template(`<template id=data1>`);
5
5
 
6
6
  function SimpleTemplateHtml_render(__anchor, __block) {
7
7
  const data = 'test data';
@@ -13,7 +13,7 @@ function SimpleTemplateHtml_render(__anchor, __block) {
13
13
 
14
14
  SimpleTemplateHtml[_$_.$r] = SimpleTemplateHtml_render;
15
15
 
16
- var root_1 = _$_.template(`<template id="data2"></template>`, 0);
16
+ var root_1 = _$_.template(`<template id=data2>`);
17
17
 
18
18
  function TemplateWithJSON_render(__anchor, __block) {
19
19
  const jsonData = _$_.with_scope(__block, () => JSON.stringify({ message: 'hello', count: 42 }));
@@ -25,7 +25,7 @@ function TemplateWithJSON_render(__anchor, __block) {
25
25
 
26
26
  TemplateWithJSON[_$_.$r] = TemplateWithJSON_render;
27
27
 
28
- var root_3 = _$_.template(`<span class="inside">inside</span>`, 0);
28
+ var root_3 = _$_.template(`<span class=inside>inside`);
29
29
 
30
30
  function consequent(__anchor, show) {
31
31
  var span = root_3();
@@ -37,7 +37,7 @@ function if_1(show) {
37
37
  if (show) return consequent;
38
38
  }
39
39
 
40
- var root_2 = _$_.template(`<div><template id="before"></template><!><template id="after"></template></div>`, 0);
40
+ var root_2 = _$_.template(`<div><template id=before></template><template id=after>`);
41
41
 
42
42
  function TemplateAroundIfBlock_render(__anchor, __block) {
43
43
  const show = true;
@@ -52,7 +52,7 @@ function TemplateAroundIfBlock_render(__anchor, __block) {
52
52
 
53
53
  _$_.if(node, if_1, false, show);
54
54
 
55
- var template_3 = _$_.hydrating ? _$_.hydrate_sibling() : node.nextSibling;
55
+ var template_3 = _$_.hydrating ? _$_.hydrate_sibling() : node;
56
56
 
57
57
  template_3.innerHTML = "after" ?? template_3.innerHTML;
58
58
  _$_.hydrating && _$_.pop(div);