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,49 +6,39 @@ import { Portal, track } from 'ripple/server';
6
6
  export function SimplePortal() {
7
7
  return _$_.tsrx_element(() => {
8
8
  _$_.regular_block(() => {
9
- _$_.output_push('<div');
10
- _$_.output_push(' class="container"');
11
- _$_.output_push('>');
9
+ let __out = '';
12
10
 
13
- {
14
- _$_.output_push('<h1');
15
- _$_.output_push('>');
16
-
17
- {
18
- _$_.output_push('Main Content');
19
- }
20
-
21
- _$_.output_push('</h1>');
11
+ __out += '<div class="container"><h1>Main Content</h1>';
22
12
 
23
- {
24
- const comp = Portal;
25
-
26
- const args = [
27
- {
28
- target: typeof document !== 'undefined' ? document.body : null,
29
- children: _$_.tsrx_element(() => {
30
- return _$_.tsrx_element(() => {
31
- _$_.output_push('<div');
32
- _$_.output_push(' class="portal-content"');
33
- _$_.output_push('>');
34
-
35
- {
36
- _$_.output_push('Portal content');
37
- }
13
+ {
14
+ const comp = Portal;
38
15
 
39
- _$_.output_push('</div>');
40
- });
41
- })
42
- }
43
- ];
16
+ _$_.output_push(__out);
17
+ __out = '';
44
18
 
45
- if (comp) {
46
- _$_.render_component(comp, ...args);
19
+ const args = [
20
+ {
21
+ target: typeof document !== 'undefined' ? document.body : null,
22
+ children: _$_.tsrx_element(() => {
23
+ return _$_.tsrx_element(() => {
24
+ let __out = '';
25
+
26
+ __out += '<div class="portal-content">Portal content</div>';
27
+ _$_.output_push(__out);
28
+ });
29
+ })
47
30
  }
31
+ ];
32
+
33
+ if (comp) {
34
+ _$_.output_push(__out);
35
+ __out = '';
36
+ _$_.render_component(comp, ...args);
48
37
  }
49
38
  }
50
39
 
51
- _$_.output_push('</div>');
40
+ __out += '</div>';
41
+ _$_.output_push(__out);
52
42
  });
53
43
  });
54
44
  }
@@ -58,173 +48,121 @@ export function ConditionalPortal() {
58
48
  let lazy = _$_.track(true, '4f6df174');
59
49
 
60
50
  _$_.regular_block(() => {
61
- _$_.output_push('<div');
62
- _$_.output_push(' class="container"');
63
- _$_.output_push('>');
51
+ let __out = '';
64
52
 
65
- {
66
- _$_.output_push('<button');
67
- _$_.output_push(' class="toggle"');
68
- _$_.output_push('>');
69
-
70
- {
71
- _$_.output_push('Toggle');
72
- }
73
-
74
- _$_.output_push('</button>');
75
- _$_.output_push('<!--[-->');
76
-
77
- if (lazy.value) {
78
- {
79
- const comp = Portal;
80
-
81
- const args = [
82
- {
83
- target: typeof document !== 'undefined' ? document.body : null,
84
- children: _$_.tsrx_element(() => {
85
- return _$_.tsrx_element(() => {
86
- _$_.output_push('<div');
87
- _$_.output_push(' class="portal-content"');
88
- _$_.output_push('>');
89
-
90
- {
91
- _$_.output_push('Portal is visible');
92
- }
93
-
94
- _$_.output_push('</div>');
95
- });
96
- })
97
- }
98
- ];
99
-
100
- if (comp) {
101
- _$_.render_component(comp, ...args);
102
- }
103
- }
104
- }
105
-
106
- _$_.output_push('<!--]-->');
107
- }
108
-
109
- _$_.output_push('</div>');
110
- });
111
- });
112
- }
113
-
114
- export function PortalWithMainContent() {
115
- return _$_.tsrx_element(() => {
116
- _$_.regular_block(() => {
117
- _$_.output_push('<div');
118
- _$_.output_push('>');
119
-
120
- {
121
- _$_.output_push('<div');
122
- _$_.output_push(' class="main-content"');
123
- _$_.output_push('>');
124
-
125
- {
126
- _$_.output_push('Main page content');
127
- }
128
-
129
- _$_.output_push('</div>');
53
+ __out += '<div class="container"><button class="toggle">Toggle</button><!--[-->';
130
54
 
55
+ if (lazy.value) {
131
56
  {
132
57
  const comp = Portal;
133
58
 
59
+ _$_.output_push(__out);
60
+ __out = '';
61
+
134
62
  const args = [
135
63
  {
136
64
  target: typeof document !== 'undefined' ? document.body : null,
137
65
  children: _$_.tsrx_element(() => {
138
66
  return _$_.tsrx_element(() => {
139
- _$_.output_push('<div');
140
- _$_.output_push(' class="portal-content"');
141
- _$_.output_push('>');
142
-
143
- {
144
- _$_.output_push('Modal content');
145
- }
67
+ let __out = '';
146
68
 
147
- _$_.output_push('</div>');
69
+ __out += '<div class="portal-content">Portal is visible</div>';
70
+ _$_.output_push(__out);
148
71
  });
149
72
  })
150
73
  }
151
74
  ];
152
75
 
153
76
  if (comp) {
77
+ _$_.output_push(__out);
78
+ __out = '';
154
79
  _$_.render_component(comp, ...args);
155
80
  }
156
81
  }
157
-
158
- _$_.output_push('<div');
159
- _$_.output_push(' class="footer"');
160
- _$_.output_push('>');
161
-
162
- {
163
- _$_.output_push('Footer');
164
- }
165
-
166
- _$_.output_push('</div>');
167
82
  }
168
83
 
169
- _$_.output_push('</div>');
84
+ __out += '<!--]--></div>';
85
+ _$_.output_push(__out);
170
86
  });
171
87
  });
172
88
  }
173
89
 
174
- export function NestedContentWithPortal() {
90
+ export function PortalWithMainContent() {
175
91
  return _$_.tsrx_element(() => {
176
92
  _$_.regular_block(() => {
177
- _$_.output_push('<div');
178
- _$_.output_push(' class="outer"');
179
- _$_.output_push('>');
93
+ let __out = '';
94
+
95
+ __out += '<div><div class="main-content">Main page content</div>';
180
96
 
181
97
  {
182
- _$_.output_push('<div');
183
- _$_.output_push(' class="inner"');
184
- _$_.output_push('>');
98
+ const comp = Portal;
185
99
 
186
- {
187
- _$_.output_push('<span');
188
- _$_.output_push('>');
100
+ _$_.output_push(__out);
101
+ __out = '';
189
102
 
103
+ const args = [
190
104
  {
191
- _$_.output_push('Nested content');
105
+ target: typeof document !== 'undefined' ? document.body : null,
106
+ children: _$_.tsrx_element(() => {
107
+ return _$_.tsrx_element(() => {
108
+ let __out = '';
109
+
110
+ __out += '<div class="portal-content">Modal content</div>';
111
+ _$_.output_push(__out);
112
+ });
113
+ })
192
114
  }
115
+ ];
193
116
 
194
- _$_.output_push('</span>');
117
+ if (comp) {
118
+ _$_.output_push(__out);
119
+ __out = '';
120
+ _$_.render_component(comp, ...args);
195
121
  }
122
+ }
196
123
 
197
- _$_.output_push('</div>');
124
+ __out += '<div class="footer">Footer</div></div>';
125
+ _$_.output_push(__out);
126
+ });
127
+ });
128
+ }
198
129
 
199
- {
200
- const comp = Portal;
130
+ export function NestedContentWithPortal() {
131
+ return _$_.tsrx_element(() => {
132
+ _$_.regular_block(() => {
133
+ let __out = '';
201
134
 
202
- const args = [
203
- {
204
- target: typeof document !== 'undefined' ? document.body : null,
205
- children: _$_.tsrx_element(() => {
206
- return _$_.tsrx_element(() => {
207
- _$_.output_push('<div');
208
- _$_.output_push(' class="portal-content"');
209
- _$_.output_push('>');
135
+ __out += '<div class="outer"><div class="inner"><span>Nested content</span></div>';
210
136
 
211
- {
212
- _$_.output_push('Portal content');
213
- }
137
+ {
138
+ const comp = Portal;
214
139
 
215
- _$_.output_push('</div>');
216
- });
217
- })
218
- }
219
- ];
140
+ _$_.output_push(__out);
141
+ __out = '';
220
142
 
221
- if (comp) {
222
- _$_.render_component(comp, ...args);
143
+ const args = [
144
+ {
145
+ target: typeof document !== 'undefined' ? document.body : null,
146
+ children: _$_.tsrx_element(() => {
147
+ return _$_.tsrx_element(() => {
148
+ let __out = '';
149
+
150
+ __out += '<div class="portal-content">Portal content</div>';
151
+ _$_.output_push(__out);
152
+ });
153
+ })
223
154
  }
155
+ ];
156
+
157
+ if (comp) {
158
+ _$_.output_push(__out);
159
+ __out = '';
160
+ _$_.render_component(comp, ...args);
224
161
  }
225
162
  }
226
163
 
227
- _$_.output_push('</div>');
164
+ __out += '</div>';
165
+ _$_.output_push(__out);
228
166
  });
229
167
  });
230
168
  }
@@ -8,15 +8,10 @@ export function TrackedState() {
8
8
  let lazy = _$_.track(0, 'c1818584');
9
9
 
10
10
  _$_.regular_block(() => {
11
- _$_.output_push('<div');
12
- _$_.output_push(' class="count"');
13
- _$_.output_push('>');
11
+ let __out = '';
14
12
 
15
- {
16
- _$_.output_push(_$_.escape(lazy.value));
17
- }
18
-
19
- _$_.output_push('</div>');
13
+ __out += '<div class="count">' + _$_.escape(lazy.value) + '</div>';
14
+ _$_.output_push(__out);
20
15
  });
21
16
  });
22
17
  }
@@ -26,22 +21,10 @@ export function CounterWithInitial(props) {
26
21
  let lazy_1 = _$_.track(props.initial, '03ea4348');
27
22
 
28
23
  _$_.regular_block(() => {
29
- _$_.output_push('<div');
30
- _$_.output_push('>');
31
-
32
- {
33
- _$_.output_push('<span');
34
- _$_.output_push(' class="count"');
35
- _$_.output_push('>');
24
+ let __out = '';
36
25
 
37
- {
38
- _$_.output_push(_$_.escape(lazy_1.value));
39
- }
40
-
41
- _$_.output_push('</span>');
42
- }
43
-
44
- _$_.output_push('</div>');
26
+ __out += '<div><span class="count">' + _$_.escape(lazy_1.value) + '</span></div>';
27
+ _$_.output_push(__out);
45
28
  });
46
29
  });
47
30
  }
@@ -66,15 +49,18 @@ export function ComputedValues() {
66
49
  const sum = () => lazy_2.value + lazy_3.value;
67
50
 
68
51
  _$_.regular_block(() => {
69
- _$_.output_push('<div');
70
- _$_.output_push(' class="sum"');
71
- _$_.output_push('>');
52
+ let __out = '';
53
+
54
+ __out += '<div class="sum">';
72
55
 
73
56
  {
57
+ _$_.output_push(__out);
58
+ __out = '';
74
59
  _$_.render_expression(sum());
75
60
  }
76
61
 
77
- _$_.output_push('</div>');
62
+ __out += '</div>';
63
+ _$_.output_push(__out);
78
64
  });
79
65
  });
80
66
  }
@@ -86,41 +72,10 @@ export function MultipleTracked() {
86
72
  let lazy_6 = _$_.track(30, '048c3fd0');
87
73
 
88
74
  _$_.regular_block(() => {
89
- _$_.output_push('<div');
90
- _$_.output_push(' class="multiple-tracked"');
91
- _$_.output_push('>');
75
+ let __out = '';
92
76
 
93
- {
94
- _$_.output_push('<div');
95
- _$_.output_push(' class="x"');
96
- _$_.output_push('>');
97
-
98
- {
99
- _$_.output_push(_$_.escape(lazy_4.value));
100
- }
101
-
102
- _$_.output_push('</div>');
103
- _$_.output_push('<div');
104
- _$_.output_push(' class="y"');
105
- _$_.output_push('>');
106
-
107
- {
108
- _$_.output_push(_$_.escape(lazy_5.value));
109
- }
110
-
111
- _$_.output_push('</div>');
112
- _$_.output_push('<div');
113
- _$_.output_push(' class="z"');
114
- _$_.output_push('>');
115
-
116
- {
117
- _$_.output_push(_$_.escape(lazy_6.value));
118
- }
119
-
120
- _$_.output_push('</div>');
121
- }
122
-
123
- _$_.output_push('</div>');
77
+ __out += '<div class="multiple-tracked"><div class="x">' + _$_.escape(lazy_4.value) + '</div><div class="y">' + _$_.escape(lazy_5.value) + '</div><div class="z">' + _$_.escape(lazy_6.value) + '</div></div>';
78
+ _$_.output_push(__out);
124
79
  });
125
80
  });
126
81
  }
@@ -132,15 +87,18 @@ export function DerivedState() {
132
87
  const fullName = () => `${lazy_7.value} ${lazy_8.value}`;
133
88
 
134
89
  _$_.regular_block(() => {
135
- _$_.output_push('<div');
136
- _$_.output_push(' class="name"');
137
- _$_.output_push('>');
90
+ let __out = '';
91
+
92
+ __out += '<div class="name">';
138
93
 
139
94
  {
95
+ _$_.output_push(__out);
96
+ __out = '';
140
97
  _$_.render_expression(fullName());
141
98
  }
142
99
 
143
- _$_.output_push('</div>');
100
+ __out += '</div>';
101
+ _$_.output_push(__out);
144
102
  });
145
103
  });
146
104
  }
@@ -10,15 +10,10 @@ export function GuardReturnRenders() {
10
10
  }
11
11
 
12
12
  _$_.regular_block(() => {
13
- _$_.output_push('<div');
14
- _$_.output_push(' class="ready"');
15
- _$_.output_push('>');
13
+ let __out = '';
16
14
 
17
- {
18
- _$_.output_push('ready');
19
- }
20
-
21
- _$_.output_push('</div>');
15
+ __out += '<div class="ready">ready</div>';
16
+ _$_.output_push(__out);
22
17
  });
23
18
  });
24
19
  }
@@ -32,15 +27,10 @@ export function GuardReturnNull() {
32
27
  }
33
28
 
34
29
  _$_.regular_block(() => {
35
- _$_.output_push('<div');
36
- _$_.output_push(' class="ready"');
37
- _$_.output_push('>');
38
-
39
- {
40
- _$_.output_push('ready');
41
- }
30
+ let __out = '';
42
31
 
43
- _$_.output_push('</div>');
32
+ __out += '<div class="ready">ready</div>';
33
+ _$_.output_push(__out);
44
34
  });
45
35
  });
46
36
  }