ripple 0.3.83 → 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 (58) hide show
  1. package/CHANGELOG.md +73 -0
  2. package/package.json +3 -3
  3. package/src/constants.js +4 -0
  4. package/src/runtime/index-client.js +2 -0
  5. package/src/runtime/index-server.js +13 -0
  6. package/src/runtime/internal/client/component.js +3 -3
  7. package/src/runtime/internal/client/constants.js +4 -0
  8. package/src/runtime/internal/client/for.js +22 -1
  9. package/src/runtime/internal/client/if.js +18 -2
  10. package/src/runtime/internal/client/index.js +1 -0
  11. package/src/runtime/internal/client/operations.js +25 -0
  12. package/src/runtime/internal/client/runtime.js +62 -10
  13. package/src/runtime/internal/client/switch.js +16 -2
  14. package/src/runtime/internal/client/template.js +10 -2
  15. package/src/runtime/internal/client/try.js +12 -2
  16. package/src/runtime/internal/client/types.d.ts +4 -0
  17. package/src/runtime/proxy.js +17 -1
  18. package/tests/client/__snapshots__/for.test.tsrx.snap +0 -2
  19. package/tests/client/compiler/compiler.basic.test.tsrx +5 -2
  20. package/tests/client/composite/__snapshots__/composite.render.test.tsrx.snap +0 -4
  21. package/tests/client/object.test.tsrx +47 -1
  22. package/tests/client/scoped-flush.test.tsrx +105 -0
  23. package/tests/hydration/compiled/client/basic.js +198 -214
  24. package/tests/hydration/compiled/client/composite.js +23 -72
  25. package/tests/hydration/compiled/client/for.js +66 -72
  26. package/tests/hydration/compiled/client/hmr.js +2 -13
  27. package/tests/hydration/compiled/client/html.js +619 -479
  28. package/tests/hydration/compiled/client/if-children.js +72 -84
  29. package/tests/hydration/compiled/client/if.js +87 -92
  30. package/tests/hydration/compiled/client/mixed-control-flow.js +120 -160
  31. package/tests/hydration/compiled/client/nested-control-flow.js +288 -360
  32. package/tests/hydration/compiled/client/portal.js +15 -21
  33. package/tests/hydration/compiled/client/reactivity.js +7 -12
  34. package/tests/hydration/compiled/client/switch.js +113 -115
  35. package/tests/hydration/compiled/client/track-async-serialization.js +71 -122
  36. package/tests/hydration/compiled/client/try.js +26 -41
  37. package/tests/hydration/compiled/server/basic.js +268 -556
  38. package/tests/hydration/compiled/server/composite.js +31 -50
  39. package/tests/hydration/compiled/server/events.js +37 -173
  40. package/tests/hydration/compiled/server/for.js +236 -847
  41. package/tests/hydration/compiled/server/head.js +110 -241
  42. package/tests/hydration/compiled/server/hmr.js +14 -41
  43. package/tests/hydration/compiled/server/html-in-template.js +14 -38
  44. package/tests/hydration/compiled/server/html.js +951 -1176
  45. package/tests/hydration/compiled/server/if-children.js +59 -493
  46. package/tests/hydration/compiled/server/if.js +57 -209
  47. package/tests/hydration/compiled/server/mixed-control-flow.js +144 -250
  48. package/tests/hydration/compiled/server/nested-control-flow.js +309 -559
  49. package/tests/hydration/compiled/server/portal.js +94 -156
  50. package/tests/hydration/compiled/server/reactivity.js +23 -65
  51. package/tests/hydration/compiled/server/return.js +6 -16
  52. package/tests/hydration/compiled/server/switch.js +91 -219
  53. package/tests/hydration/compiled/server/track-async-serialization.js +211 -256
  54. package/tests/hydration/compiled/server/try.js +67 -126
  55. package/tests/hydration/components/html.tsrx +75 -0
  56. package/tests/hydration/html.test.js +50 -0
  57. package/tests/server/compiler.test.tsrx +6 -2
  58. package/types/index.d.ts +2 -0
@@ -4,15 +4,18 @@ import * as _$_ from 'ripple/internal/server';
4
4
  export function Layout(__props) {
5
5
  return _$_.tsrx_element(() => {
6
6
  _$_.regular_block(() => {
7
- _$_.output_push('<div');
8
- _$_.output_push(' class="layout"');
9
- _$_.output_push('>');
7
+ let __out = '';
8
+
9
+ __out += '<div class="layout">';
10
10
 
11
11
  {
12
+ _$_.output_push(__out);
13
+ __out = '';
12
14
  _$_.render_expression(__props.children);
13
15
  }
14
16
 
15
- _$_.output_push('</div>');
17
+ __out += '</div>';
18
+ _$_.output_push(__out);
16
19
  });
17
20
  });
18
21
  }
@@ -20,17 +23,14 @@ export function Layout(__props) {
20
23
  export function TextWrappedLayout(__props) {
21
24
  return _$_.tsrx_element(() => {
22
25
  _$_.regular_block(() => {
23
- _$_.output_push('<div');
24
- _$_.output_push(' class="layout"');
25
- _$_.output_push('>');
26
-
27
- {
28
- _$_.output_push('before');
29
- _$_.render_expression(__props.children);
30
- _$_.output_push('after');
31
- }
32
-
33
- _$_.output_push('</div>');
26
+ let __out = '';
27
+
28
+ __out += '<div class="layout">before';
29
+ _$_.output_push(__out);
30
+ __out = '';
31
+ _$_.render_expression(__props.children);
32
+ __out += 'after</div>';
33
+ _$_.output_push(__out);
34
34
  });
35
35
  });
36
36
  }
@@ -38,15 +38,10 @@ export function TextWrappedLayout(__props) {
38
38
  export function SingleChild() {
39
39
  return _$_.tsrx_element(() => {
40
40
  _$_.regular_block(() => {
41
- _$_.output_push('<div');
42
- _$_.output_push(' class="single"');
43
- _$_.output_push('>');
41
+ let __out = '';
44
42
 
45
- {
46
- _$_.output_push('single');
47
- }
48
-
49
- _$_.output_push('</div>');
43
+ __out += '<div class="single">single</div>';
44
+ _$_.output_push(__out);
50
45
  });
51
46
  });
52
47
  }
@@ -54,24 +49,10 @@ export function SingleChild() {
54
49
  export function MultiRootChild() {
55
50
  return _$_.tsrx_element(() => {
56
51
  _$_.regular_block(() => {
57
- {
58
- _$_.output_push('<h1');
59
- _$_.output_push('>');
52
+ let __out = '';
60
53
 
61
- {
62
- _$_.output_push('title');
63
- }
64
-
65
- _$_.output_push('</h1>');
66
- _$_.output_push('<p');
67
- _$_.output_push('>');
68
-
69
- {
70
- _$_.output_push('description');
71
- }
72
-
73
- _$_.output_push('</p>');
74
- }
54
+ __out += '<h1>title</h1><p>description</p>';
55
+ _$_.output_push(__out);
75
56
  });
76
57
  });
77
58
  }
@@ -126,22 +107,19 @@ export function LayoutWithMultipleChildren() {
126
107
  {
127
108
  children: _$_.tsrx_element(() => {
128
109
  return _$_.tsrx_element(() => {
110
+ let __out = '';
111
+
129
112
  {
130
113
  const comp = SingleChild;
131
114
  const args = [{}];
132
115
 
116
+ _$_.output_push(__out);
117
+ __out = '';
133
118
  _$_.render_component(comp, ...args);
134
119
  }
135
120
 
136
- _$_.output_push('<div');
137
- _$_.output_push(' class="extra"');
138
- _$_.output_push('>');
139
-
140
- {
141
- _$_.output_push('extra');
142
- }
143
-
144
- _$_.output_push('</div>');
121
+ __out += '<div class="extra">extra</div>';
122
+ _$_.output_push(__out);
145
123
  });
146
124
  })
147
125
  }
@@ -221,7 +199,10 @@ export function DynamicTagElement() {
221
199
  class: "host",
222
200
  children: _$_.tsrx_element(() => {
223
201
  return _$_.tsrx_element(() => {
224
- _$_.output_push('hello');
202
+ let __out = '';
203
+
204
+ __out += 'hello';
205
+ _$_.output_push(__out);
225
206
  });
226
207
  })
227
208
  }
@@ -8,31 +8,10 @@ export function ClickCounter() {
8
8
  let lazy = _$_.track(0, 'a070e3a7');
9
9
 
10
10
  _$_.regular_block(() => {
11
- _$_.output_push('<div');
12
- _$_.output_push('>');
11
+ let __out = '';
13
12
 
14
- {
15
- _$_.output_push('<button');
16
- _$_.output_push(' class="increment"');
17
- _$_.output_push('>');
18
-
19
- {
20
- _$_.output_push('Increment');
21
- }
22
-
23
- _$_.output_push('</button>');
24
- _$_.output_push('<span');
25
- _$_.output_push(' class="count"');
26
- _$_.output_push('>');
27
-
28
- {
29
- _$_.output_push(_$_.escape(lazy.value));
30
- }
31
-
32
- _$_.output_push('</span>');
33
- }
34
-
35
- _$_.output_push('</div>');
13
+ __out += '<div><button class="increment">Increment</button><span class="count">' + _$_.escape(lazy.value) + '</span></div>';
14
+ _$_.output_push(__out);
36
15
  });
37
16
  });
38
17
  }
@@ -42,40 +21,10 @@ export function IncrementDecrement() {
42
21
  let lazy_1 = _$_.track(0, '87fcabdd');
43
22
 
44
23
  _$_.regular_block(() => {
45
- _$_.output_push('<div');
46
- _$_.output_push('>');
47
-
48
- {
49
- _$_.output_push('<button');
50
- _$_.output_push(' class="decrement"');
51
- _$_.output_push('>');
52
-
53
- {
54
- _$_.output_push('-');
55
- }
56
-
57
- _$_.output_push('</button>');
58
- _$_.output_push('<span');
59
- _$_.output_push(' class="count"');
60
- _$_.output_push('>');
24
+ let __out = '';
61
25
 
62
- {
63
- _$_.output_push(_$_.escape(lazy_1.value));
64
- }
65
-
66
- _$_.output_push('</span>');
67
- _$_.output_push('<button');
68
- _$_.output_push(' class="increment"');
69
- _$_.output_push('>');
70
-
71
- {
72
- _$_.output_push('+');
73
- }
74
-
75
- _$_.output_push('</button>');
76
- }
77
-
78
- _$_.output_push('</div>');
26
+ __out += '<div><button class="decrement">-</button><span class="count">' + _$_.escape(lazy_1.value) + '</span><button class="increment">+</button></div>';
27
+ _$_.output_push(__out);
79
28
  });
80
29
  });
81
30
  }
@@ -86,40 +35,10 @@ export function MultipleEvents() {
86
35
  let lazy_3 = _$_.track(0, '72789f75');
87
36
 
88
37
  _$_.regular_block(() => {
89
- _$_.output_push('<div');
90
- _$_.output_push('>');
91
-
92
- {
93
- _$_.output_push('<button');
94
- _$_.output_push(' class="target"');
95
- _$_.output_push('>');
96
-
97
- {
98
- _$_.output_push('Target');
99
- }
100
-
101
- _$_.output_push('</button>');
102
- _$_.output_push('<span');
103
- _$_.output_push(' class="clicks"');
104
- _$_.output_push('>');
105
-
106
- {
107
- _$_.output_push(_$_.escape(lazy_2.value));
108
- }
109
-
110
- _$_.output_push('</span>');
111
- _$_.output_push('<span');
112
- _$_.output_push(' class="hovers"');
113
- _$_.output_push('>');
38
+ let __out = '';
114
39
 
115
- {
116
- _$_.output_push(_$_.escape(lazy_3.value));
117
- }
118
-
119
- _$_.output_push('</span>');
120
- }
121
-
122
- _$_.output_push('</div>');
40
+ __out += '<div><button class="target">Target</button><span class="clicks">' + _$_.escape(lazy_2.value) + '</span><span class="hovers">' + _$_.escape(lazy_3.value) + '</span></div>';
41
+ _$_.output_push(__out);
123
42
  });
124
43
  });
125
44
  }
@@ -135,40 +54,10 @@ export function MultiStateUpdate() {
135
54
  };
136
55
 
137
56
  _$_.regular_block(() => {
138
- _$_.output_push('<div');
139
- _$_.output_push('>');
140
-
141
- {
142
- _$_.output_push('<button');
143
- _$_.output_push(' class="btn"');
144
- _$_.output_push('>');
145
-
146
- {
147
- _$_.output_push('Click');
148
- }
57
+ let __out = '';
149
58
 
150
- _$_.output_push('</button>');
151
- _$_.output_push('<span');
152
- _$_.output_push(' class="count"');
153
- _$_.output_push('>');
154
-
155
- {
156
- _$_.output_push(_$_.escape(lazy_4.value));
157
- }
158
-
159
- _$_.output_push('</span>');
160
- _$_.output_push('<span');
161
- _$_.output_push(' class="action"');
162
- _$_.output_push('>');
163
-
164
- {
165
- _$_.output_push(_$_.escape(lazy_5.value));
166
- }
167
-
168
- _$_.output_push('</span>');
169
- }
170
-
171
- _$_.output_push('</div>');
59
+ __out += '<div><button class="btn">Click</button><span class="count">' + _$_.escape(lazy_4.value) + '</span><span class="action">' + _$_.escape(lazy_5.value) + '</span></div>';
60
+ _$_.output_push(__out);
172
61
  });
173
62
  });
174
63
  }
@@ -178,22 +67,10 @@ export function ToggleButton() {
178
67
  let lazy_6 = _$_.track(false, 'be823ec7');
179
68
 
180
69
  _$_.regular_block(() => {
181
- _$_.output_push('<div');
182
- _$_.output_push('>');
183
-
184
- {
185
- _$_.output_push('<button');
186
- _$_.output_push(' class="toggle"');
187
- _$_.output_push('>');
188
-
189
- {
190
- _$_.output_push(_$_.escape(lazy_6.value ? 'ON' : 'OFF'));
191
- }
192
-
193
- _$_.output_push('</button>');
194
- }
70
+ let __out = '';
195
71
 
196
- _$_.output_push('</div>');
72
+ __out += '<div><button class="toggle">' + _$_.escape(lazy_6.value ? 'ON' : 'OFF') + '</button></div>';
73
+ _$_.output_push(__out);
197
74
  });
198
75
  });
199
76
  }
@@ -201,15 +78,10 @@ export function ToggleButton() {
201
78
  export function ChildButton(props) {
202
79
  return _$_.tsrx_element(() => {
203
80
  _$_.regular_block(() => {
204
- _$_.output_push('<button');
205
- _$_.output_push(' class="child-btn"');
206
- _$_.output_push('>');
81
+ let __out = '';
207
82
 
208
- {
209
- _$_.output_push(_$_.escape(props.label));
210
- }
211
-
212
- _$_.output_push('</button>');
83
+ __out += '<button class="child-btn">' + _$_.escape(props.label) + '</button>';
84
+ _$_.output_push(__out);
213
85
  });
214
86
  });
215
87
  }
@@ -219,37 +91,29 @@ export function ParentWithChildButton() {
219
91
  let lazy_7 = _$_.track(0, 'dcc2e0f9');
220
92
 
221
93
  _$_.regular_block(() => {
222
- _$_.output_push('<div');
223
- _$_.output_push('>');
94
+ let __out = '';
95
+
96
+ __out += '<div>';
224
97
 
225
98
  {
226
- {
227
- const comp = ChildButton;
228
-
229
- const args = [
230
- {
231
- onClick: () => {
232
- _$_.update(lazy_7);
233
- },
234
- label: "Click me"
235
- }
236
- ];
237
-
238
- _$_.render_component(comp, ...args);
239
- }
240
-
241
- _$_.output_push('<span');
242
- _$_.output_push(' class="count"');
243
- _$_.output_push('>');
244
-
245
- {
246
- _$_.output_push(_$_.escape(lazy_7.value));
247
- }
248
-
249
- _$_.output_push('</span>');
99
+ const comp = ChildButton;
100
+
101
+ const args = [
102
+ {
103
+ onClick: () => {
104
+ _$_.update(lazy_7);
105
+ },
106
+ label: "Click me"
107
+ }
108
+ ];
109
+
110
+ _$_.output_push(__out);
111
+ __out = '';
112
+ _$_.render_component(comp, ...args);
250
113
  }
251
114
 
252
- _$_.output_push('</div>');
115
+ __out += '<span class="count">' + _$_.escape(lazy_7.value) + '</span></div>';
116
+ _$_.output_push(__out);
253
117
  });
254
118
  });
255
119
  }