ripple 0.4.3 → 0.4.5

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 (42) hide show
  1. package/CHANGELOG.md +81 -0
  2. package/package.json +3 -3
  3. package/src/constants.js +6 -0
  4. package/src/runtime/internal/client/attributes.js +259 -126
  5. package/src/runtime/internal/client/blocks.js +16 -6
  6. package/src/runtime/internal/client/composite.js +292 -100
  7. package/src/runtime/internal/client/constants.js +8 -0
  8. package/src/runtime/internal/client/events.js +15 -1
  9. package/src/runtime/internal/client/expression.js +4 -4
  10. package/src/runtime/internal/client/for.js +13 -38
  11. package/src/runtime/internal/client/if.js +56 -1
  12. package/src/runtime/internal/client/index.js +8 -6
  13. package/src/runtime/internal/client/operations.js +9 -4
  14. package/src/runtime/internal/client/render.js +37 -0
  15. package/src/runtime/internal/client/runtime.js +94 -20
  16. package/src/runtime/internal/client/template-ns.js +45 -4
  17. package/src/runtime/internal/client/template.js +103 -0
  18. package/tests/client/composite/composite.dynamic-components.test.tsrx +40 -0
  19. package/tests/client/css/scoped-styles.test.tsrx +3 -1
  20. package/tests/client/svg.test.tsrx +273 -1
  21. package/tests/hydration/compiled/client/basic.js +79 -51
  22. package/tests/hydration/compiled/client/composite.js +13 -4
  23. package/tests/hydration/compiled/client/events.js +22 -7
  24. package/tests/hydration/compiled/client/for.js +110 -71
  25. package/tests/hydration/compiled/client/fragment-cursor.js +342 -156
  26. package/tests/hydration/compiled/client/head.js +13 -13
  27. package/tests/hydration/compiled/client/hmr.js +16 -4
  28. package/tests/hydration/compiled/client/html-in-template.js +1 -1
  29. package/tests/hydration/compiled/client/html.js +144 -87
  30. package/tests/hydration/compiled/client/if-children.js +118 -33
  31. package/tests/hydration/compiled/client/if-fragment-controlflow.js +41 -21
  32. package/tests/hydration/compiled/client/if.js +70 -18
  33. package/tests/hydration/compiled/client/mixed-control-flow.js +50 -20
  34. package/tests/hydration/compiled/client/nested-control-flow.js +191 -100
  35. package/tests/hydration/compiled/client/portal.js +29 -9
  36. package/tests/hydration/compiled/client/reactivity.js +9 -5
  37. package/tests/hydration/compiled/client/streaming.js +21 -18
  38. package/tests/hydration/compiled/client/switch.js +17 -17
  39. package/tests/hydration/compiled/client/track-async-serialization.js +29 -21
  40. package/tests/hydration/compiled/client/try.js +13 -10
  41. package/tests/hydration/compiled/client/typed-text.js +3 -2
  42. package/tests/utils/inline-drift.test.js +83 -0
@@ -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`);
4
+ var root_1 = _$_.template_el('div', null, 'Content');
5
5
  var root = _$_.template(`<!>`, 1, 1);
6
6
 
7
7
  function StaticTitle_render(__anchor, __block) {
@@ -23,7 +23,7 @@ function StaticTitle_render(__anchor, __block) {
23
23
 
24
24
  StaticTitle[_$_.$r] = StaticTitle_render;
25
25
 
26
- var root_3 = _$_.template(`<div><span> `);
26
+ var root_3 = _$_.template_el('div', null, [['span', null, ' ']]);
27
27
  var root_2 = _$_.template(`<!>`, 1, 1);
28
28
 
29
29
  function ReactiveTitle_render(__anchor, __block) {
@@ -60,7 +60,7 @@ function ReactiveTitle_render(__anchor, __block) {
60
60
  ReactiveTitle[_$_.$r] = ReactiveTitle_render;
61
61
 
62
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`);
63
+ var root_5 = _$_.template_el('div', null, 'Page content');
64
64
  var root_4 = _$_.template(`<!>`, 1, 1);
65
65
 
66
66
  function MultipleHeadElements_render(__anchor, __block) {
@@ -86,8 +86,8 @@ function MultipleHeadElements_render(__anchor, __block) {
86
86
 
87
87
  MultipleHeadElements[_$_.$r] = MultipleHeadElements_render;
88
88
 
89
- var root_9 = _$_.template(`<meta name=description>`);
90
- var root_8 = _$_.template(`<div> `);
89
+ var root_9 = _$_.template_el('meta', ['name', 'description']);
90
+ var root_8 = _$_.template_el('div', null, ' ');
91
91
  var root_7 = _$_.template(`<!>`, 1, 1);
92
92
 
93
93
  function ReactiveMetaTags_render(__anchor, __block) {
@@ -109,7 +109,7 @@ function ReactiveMetaTags_render(__anchor, __block) {
109
109
  var meta = root_9();
110
110
 
111
111
  _$_.document.title = 'My Page';
112
- _$_.set_attribute(meta, 'content');
112
+ _$_.set_property_value(meta, 'content');
113
113
  _$_.append(__anchor, meta);
114
114
  });
115
115
 
@@ -121,7 +121,7 @@ function ReactiveMetaTags_render(__anchor, __block) {
121
121
 
122
122
  ReactiveMetaTags[_$_.$r] = ReactiveMetaTags_render;
123
123
 
124
- var root_11 = _$_.template(`<div> `);
124
+ var root_11 = _$_.template_el('div', null, ' ');
125
125
  var root_10 = _$_.template(`<!>`, 1, 1);
126
126
 
127
127
  function TitleWithTemplate_render(__anchor, __block) {
@@ -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`);
156
+ var root_13 = _$_.template_el('div', null, 'Empty title test');
157
157
  var root_12 = _$_.template(`<!>`, 1, 1);
158
158
 
159
159
  function EmptyTitle_render(__anchor, __block) {
@@ -175,7 +175,7 @@ function EmptyTitle_render(__anchor, __block) {
175
175
 
176
176
  EmptyTitle[_$_.$r] = EmptyTitle_render;
177
177
 
178
- var root_15 = _$_.template(`<div> `);
178
+ var root_15 = _$_.template_el('div', null, ' ');
179
179
  var root_14 = _$_.template(`<!>`, 1, 1);
180
180
 
181
181
  function ConditionalTitle_render(__anchor, __block) {
@@ -208,7 +208,7 @@ function ConditionalTitle_render(__anchor, __block) {
208
208
 
209
209
  ConditionalTitle[_$_.$r] = ConditionalTitle_render;
210
210
 
211
- var root_17 = _$_.template(`<div><span>`);
211
+ var root_17 = _$_.template_el('div', null, [['span']]);
212
212
 
213
213
  function render(__prev) {
214
214
  var __a = __prev._a.value;
@@ -249,8 +249,8 @@ function ComputedTitle_render(__anchor, __block) {
249
249
 
250
250
  ComputedTitle[_$_.$r] = ComputedTitle_render;
251
251
 
252
- var root_20 = _$_.template(`<meta name=author content="Test Author">`);
253
- var root_19 = _$_.template(`<div>Content`);
252
+ var root_20 = _$_.template_el('meta', ['name', 'author', 'content', 'Test Author']);
253
+ var root_19 = _$_.template_el('div', null, 'Content');
254
254
  var root_18 = _$_.template(`<!>`, 1, 1);
255
255
 
256
256
  function MultipleHeadBlocks_render(__anchor, __block) {
@@ -278,7 +278,7 @@ function MultipleHeadBlocks_render(__anchor, __block) {
278
278
 
279
279
  MultipleHeadBlocks[_$_.$r] = MultipleHeadBlocks_render;
280
280
 
281
- var root_22 = _$_.template(`<div>Styled content`);
281
+ var root_22 = _$_.template_el('div', null, 'Styled content');
282
282
  var root_21 = _$_.template(`<!>`, 1, 1);
283
283
 
284
284
  function HeadWithStyle_render(__anchor, __block) {
@@ -1,7 +1,10 @@
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><!>`);
4
+ var root = _$_.template_el('div', ['class', 'layout'], [
5
+ ['nav', ['class', 'nav'], 'Navigation'],
6
+ ['main', ['class', 'main'], [null]]
7
+ ]);
5
8
 
6
9
  function Layout_render(__anchor, __block, { children }) {
7
10
  var div = root();
@@ -23,7 +26,7 @@ function Layout_render(__anchor, __block, { children }) {
23
26
 
24
27
  Layout[_$_.$r] = Layout_render;
25
28
 
26
- var root_2 = _$_.template(`<p class=text>Hello world`);
29
+ var root_2 = _$_.template_el('p', ['class', 'text'], 'Hello world');
27
30
 
28
31
  function consequent(__anchor, visible) {
29
32
  var p = root_2();
@@ -35,7 +38,15 @@ function if_1(visible) {
35
38
  if (visible.value) return consequent;
36
39
  }
37
40
 
38
- var root_1 = _$_.template(`<div class=content><!>`);
41
+ var root_1 = _$_.template_el('div', ['class', 'content'], [null]);
42
+
43
+ function render(__prev) {
44
+ var __a = if_1(__prev._a);
45
+
46
+ if (__prev.a !== __a) {
47
+ _$_.if_update(__prev._b, __prev.a = __a);
48
+ }
49
+ }
39
50
 
40
51
  function Content_render(__anchor, __block) {
41
52
  const visible = _$_.track(true, __block, '3af9q8');
@@ -43,11 +54,12 @@ function Content_render(__anchor, __block) {
43
54
 
44
55
  {
45
56
  var node = _$_.hydrating ? _$_.hydrate_child() : div_1.firstChild;
57
+ var ifs = _$_.if_static(node, if_1, 0, visible);
46
58
 
47
- _$_.if(node, if_1, false, visible);
48
59
  _$_.hydrating && _$_.pop(div_1);
49
60
  }
50
61
 
62
+ _$_.render(render, { a: _$_.UNINITIALIZED, _a: visible, _b: ifs });
51
63
  _$_.append(__anchor, div_1);
52
64
  }
53
65
 
@@ -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`);
28
+ var root_3 = _$_.template_el('span', ['class', 'inside'], 'inside');
29
29
 
30
30
  function consequent(__anchor, show) {
31
31
  var span = root_3();