ripple 0.3.68 → 0.3.70

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 (182) hide show
  1. package/CHANGELOG.md +57 -0
  2. package/package.json +3 -3
  3. package/src/jsx-runtime.d.ts +2 -2
  4. package/src/runtime/element.js +1 -1
  5. package/src/runtime/index-client.js +11 -11
  6. package/src/runtime/index-server.js +7 -4
  7. package/src/runtime/internal/client/bindings.js +1 -1
  8. package/src/runtime/internal/client/blocks.js +13 -4
  9. package/src/runtime/internal/client/component.js +55 -0
  10. package/src/runtime/internal/client/composite.js +4 -2
  11. package/src/runtime/internal/client/expression.js +65 -7
  12. package/src/runtime/internal/client/hmr.js +54 -43
  13. package/src/runtime/internal/client/index.js +5 -1
  14. package/src/runtime/internal/client/portal.js +70 -69
  15. package/src/runtime/internal/client/render.js +3 -0
  16. package/src/runtime/internal/server/index.js +92 -8
  17. package/tests/client/__snapshots__/html.test.tsrx.snap +3 -3
  18. package/tests/client/array/array.copy-within.test.tsrx +33 -31
  19. package/tests/client/array/array.derived.test.tsrx +186 -169
  20. package/tests/client/array/array.iteration.test.tsrx +40 -37
  21. package/tests/client/array/array.mutations.test.tsrx +113 -101
  22. package/tests/client/array/array.static.test.tsrx +119 -101
  23. package/tests/client/array/array.to-methods.test.tsrx +24 -21
  24. package/tests/client/async-suspend.test.tsrx +247 -246
  25. package/tests/client/basic/__snapshots__/basic.rendering.test.tsrx.snap +0 -1
  26. package/tests/client/basic/basic.attributes.test.tsrx +428 -423
  27. package/tests/client/basic/basic.collections.test.tsrx +109 -102
  28. package/tests/client/basic/basic.components.test.tsrx +323 -205
  29. package/tests/client/basic/basic.errors.test.tsrx +91 -91
  30. package/tests/client/basic/basic.events.test.tsrx +114 -115
  31. package/tests/client/basic/basic.get-set.test.tsrx +97 -87
  32. package/tests/client/basic/basic.hmr.test.tsrx +19 -16
  33. package/tests/client/basic/basic.reactivity.test.tsrx +199 -191
  34. package/tests/client/basic/basic.rendering.test.tsrx +272 -182
  35. package/tests/client/basic/basic.styling.test.tsrx +23 -22
  36. package/tests/client/basic/basic.utilities.test.tsrx +10 -8
  37. package/tests/client/boundaries.test.tsrx +26 -26
  38. package/tests/client/compiler/__snapshots__/compiler.assignments.test.rsrx.snap +5 -5
  39. package/tests/client/compiler/__snapshots__/compiler.assignments.test.tsrx.snap +5 -5
  40. package/tests/client/compiler/compiler.assignments.test.tsrx +77 -81
  41. package/tests/client/compiler/compiler.attributes.test.tsrx +15 -15
  42. package/tests/client/compiler/compiler.basic.test.tsrx +322 -314
  43. package/tests/client/compiler/compiler.regex.test.tsrx +44 -47
  44. package/tests/client/compiler/compiler.tracked-access.test.tsrx +38 -38
  45. package/tests/client/compiler/compiler.try-in-function.test.tsrx +16 -16
  46. package/tests/client/compiler/compiler.typescript.test.tsrx +2 -2
  47. package/tests/client/composite/composite.dynamic-components.test.tsrx +47 -48
  48. package/tests/client/composite/composite.generics.test.tsrx +168 -192
  49. package/tests/client/composite/composite.props.test.tsrx +97 -81
  50. package/tests/client/composite/composite.reactivity.test.tsrx +177 -147
  51. package/tests/client/composite/composite.render.test.tsrx +122 -105
  52. package/tests/client/computed-properties.test.tsrx +28 -28
  53. package/tests/client/context.test.tsrx +21 -21
  54. package/tests/client/css/global-additional-cases.test.tsrx +58 -58
  55. package/tests/client/css/global-advanced-selectors.test.tsrx +16 -16
  56. package/tests/client/css/global-at-rules.test.tsrx +10 -10
  57. package/tests/client/css/global-basic.test.tsrx +14 -14
  58. package/tests/client/css/global-classes-ids.test.tsrx +14 -14
  59. package/tests/client/css/global-combinators.test.tsrx +10 -10
  60. package/tests/client/css/global-complex-nesting.test.tsrx +14 -14
  61. package/tests/client/css/global-edge-cases.test.tsrx +18 -18
  62. package/tests/client/css/global-keyframes.test.tsrx +12 -12
  63. package/tests/client/css/global-nested.test.tsrx +10 -10
  64. package/tests/client/css/global-pseudo.test.tsrx +12 -12
  65. package/tests/client/css/global-scoping.test.tsrx +20 -20
  66. package/tests/client/css/style-identifier.test.tsrx +126 -259
  67. package/tests/client/date.test.tsrx +146 -133
  68. package/tests/client/dynamic-elements.test.tsrx +398 -365
  69. package/tests/client/events.test.tsrx +292 -290
  70. package/tests/client/for.test.tsrx +156 -153
  71. package/tests/client/head.test.tsrx +105 -96
  72. package/tests/client/html.test.tsrx +122 -26
  73. package/tests/client/input-value.test.tsrx +1361 -1314
  74. package/tests/client/lazy-array.test.tsrx +16 -13
  75. package/tests/client/lazy-destructuring.test.tsrx +257 -213
  76. package/tests/client/map.test.tsrx +65 -60
  77. package/tests/client/media-query.test.tsrx +22 -20
  78. package/tests/client/object.test.tsrx +87 -81
  79. package/tests/client/portal.test.tsrx +57 -51
  80. package/tests/client/ref.test.tsrx +233 -202
  81. package/tests/client/return.test.tsrx +71 -2560
  82. package/tests/client/set.test.tsrx +54 -45
  83. package/tests/client/svg.test.tsrx +216 -186
  84. package/tests/client/switch.test.tsrx +194 -193
  85. package/tests/client/track-async-hydration.test.tsrx +18 -14
  86. package/tests/client/tracked-index-access.test.tsrx +28 -18
  87. package/tests/client/try.test.tsrx +675 -548
  88. package/tests/client/tsx.test.tsrx +373 -311
  89. package/tests/client/typescript-generics.test.tsrx +145 -145
  90. package/tests/client/url/url.derived.test.tsrx +33 -28
  91. package/tests/client/url/url.parsing.test.tsrx +61 -51
  92. package/tests/client/url/url.partial-removal.test.tsrx +56 -48
  93. package/tests/client/url/url.reactivity.test.tsrx +142 -125
  94. package/tests/client/url/url.serialization.test.tsrx +13 -11
  95. package/tests/client/url-search-params/url-search-params.derived.test.tsrx +34 -29
  96. package/tests/client/url-search-params/url-search-params.initialization.test.tsrx +25 -21
  97. package/tests/client/url-search-params/url-search-params.iteration.test.tsrx +50 -45
  98. package/tests/client/url-search-params/url-search-params.mutation.test.tsrx +111 -99
  99. package/tests/client/url-search-params/url-search-params.retrieval.test.tsrx +49 -43
  100. package/tests/client/url-search-params/url-search-params.serialization.test.tsrx +14 -12
  101. package/tests/client/url-search-params/url-search-params.tracked-url.test.tsrx +16 -14
  102. package/tests/hydration/basic.test.js +3 -3
  103. package/tests/hydration/compiled/client/basic.js +586 -651
  104. package/tests/hydration/compiled/client/composite.js +79 -104
  105. package/tests/hydration/compiled/client/events.js +140 -148
  106. package/tests/hydration/compiled/client/for.js +1005 -1018
  107. package/tests/hydration/compiled/client/head.js +124 -134
  108. package/tests/hydration/compiled/client/hmr.js +41 -48
  109. package/tests/hydration/compiled/client/html-in-template.js +38 -41
  110. package/tests/hydration/compiled/client/html.js +970 -1314
  111. package/tests/hydration/compiled/client/if-children.js +234 -249
  112. package/tests/hydration/compiled/client/if.js +182 -189
  113. package/tests/hydration/compiled/client/mixed-control-flow.js +347 -303
  114. package/tests/hydration/compiled/client/nested-control-flow.js +1084 -832
  115. package/tests/hydration/compiled/client/portal.js +65 -85
  116. package/tests/hydration/compiled/client/reactivity.js +84 -90
  117. package/tests/hydration/compiled/client/return.js +38 -1939
  118. package/tests/hydration/compiled/client/switch.js +218 -224
  119. package/tests/hydration/compiled/client/track-async-serialization.js +250 -259
  120. package/tests/hydration/compiled/client/try.js +123 -132
  121. package/tests/hydration/compiled/server/basic.js +773 -831
  122. package/tests/hydration/compiled/server/composite.js +166 -191
  123. package/tests/hydration/compiled/server/events.js +170 -184
  124. package/tests/hydration/compiled/server/for.js +851 -909
  125. package/tests/hydration/compiled/server/head.js +206 -216
  126. package/tests/hydration/compiled/server/hmr.js +64 -72
  127. package/tests/hydration/compiled/server/html-in-template.js +42 -76
  128. package/tests/hydration/compiled/server/html.js +1362 -1667
  129. package/tests/hydration/compiled/server/if-children.js +419 -445
  130. package/tests/hydration/compiled/server/if.js +194 -208
  131. package/tests/hydration/compiled/server/mixed-control-flow.js +249 -257
  132. package/tests/hydration/compiled/server/nested-control-flow.js +491 -515
  133. package/tests/hydration/compiled/server/portal.js +152 -160
  134. package/tests/hydration/compiled/server/reactivity.js +94 -106
  135. package/tests/hydration/compiled/server/return.js +28 -2172
  136. package/tests/hydration/compiled/server/switch.js +274 -286
  137. package/tests/hydration/compiled/server/track-async-serialization.js +340 -358
  138. package/tests/hydration/compiled/server/try.js +167 -185
  139. package/tests/hydration/components/basic.tsrx +320 -272
  140. package/tests/hydration/components/composite.tsrx +44 -32
  141. package/tests/hydration/components/events.tsrx +101 -91
  142. package/tests/hydration/components/for.tsrx +510 -452
  143. package/tests/hydration/components/head.tsrx +87 -80
  144. package/tests/hydration/components/hmr.tsrx +22 -17
  145. package/tests/hydration/components/html-in-template.tsrx +22 -17
  146. package/tests/hydration/components/html.tsrx +525 -443
  147. package/tests/hydration/components/if-children.tsrx +158 -148
  148. package/tests/hydration/components/if.tsrx +109 -95
  149. package/tests/hydration/components/mixed-control-flow.tsrx +100 -96
  150. package/tests/hydration/components/nested-control-flow.tsrx +215 -203
  151. package/tests/hydration/components/portal.tsrx +41 -34
  152. package/tests/hydration/components/reactivity.tsrx +37 -27
  153. package/tests/hydration/components/return.tsrx +12 -556
  154. package/tests/hydration/components/switch.tsrx +120 -114
  155. package/tests/hydration/components/track-async-serialization.tsrx +107 -91
  156. package/tests/hydration/components/try.tsrx +55 -40
  157. package/tests/hydration/html.test.js +4 -4
  158. package/tests/hydration/return.test.js +13 -532
  159. package/tests/server/await.test.tsrx +3 -3
  160. package/tests/server/basic.attributes.test.tsrx +264 -195
  161. package/tests/server/basic.components.test.tsrx +296 -169
  162. package/tests/server/basic.test.tsrx +300 -198
  163. package/tests/server/compiler.test.tsrx +62 -60
  164. package/tests/server/composite.props.test.tsrx +77 -63
  165. package/tests/server/composite.test.tsrx +168 -192
  166. package/tests/server/context.test.tsrx +18 -12
  167. package/tests/server/dynamic-elements.test.tsrx +197 -180
  168. package/tests/server/for.test.tsrx +85 -78
  169. package/tests/server/head.test.tsrx +50 -43
  170. package/tests/server/html-nesting-validation.test.tsrx +8 -8
  171. package/tests/server/if.test.tsrx +57 -51
  172. package/tests/server/lazy-destructuring.test.tsrx +366 -294
  173. package/tests/server/return.test.tsrx +76 -1355
  174. package/tests/server/streaming-ssr.test.tsrx +4 -75
  175. package/tests/server/style-identifier.test.tsrx +169 -131
  176. package/tests/server/switch.test.tsrx +91 -85
  177. package/tests/server/track-async-serialization.test.tsrx +105 -85
  178. package/tests/server/try.test.tsrx +374 -280
  179. package/tests/utils/compiler-compat-config.test.js +2 -2
  180. package/tests/utils/runtime-imports.test.js +10 -0
  181. package/types/index.d.ts +8 -0
  182. package/tests/client/__snapshots__/html.test.rsrx.snap +0 -40
@@ -4,699 +4,673 @@ import * as _$_ from 'ripple/internal/server';
4
4
  import { track } from 'ripple/server';
5
5
 
6
6
  export function IfWithChildren({ children }) {
7
- _$_.push_component();
7
+ return _$_.tsrx_element(() => {
8
+ let lazy = _$_.track(true, 'c64714b1');
8
9
 
9
- let lazy = _$_.track(true, 'c64714b1');
10
-
11
- _$_.regular_block(() => {
12
- _$_.output_push('<div');
13
- _$_.output_push(' class="container"');
14
- _$_.output_push('>');
15
-
16
- {
10
+ _$_.regular_block(() => {
17
11
  _$_.output_push('<div');
18
- _$_.output_push(' role="button"');
19
- _$_.output_push(' class="header"');
12
+ _$_.output_push(' class="container"');
20
13
  _$_.output_push('>');
21
14
 
22
15
  {
23
- _$_.output_push('Toggle');
24
- }
25
-
26
- _$_.output_push('</div>');
27
- _$_.output_push('<!--[-->');
28
-
29
- if (lazy.value) {
30
16
  _$_.output_push('<div');
31
- _$_.output_push(' class="content"');
17
+ _$_.output_push(' role="button"');
18
+ _$_.output_push(' class="header"');
32
19
  _$_.output_push('>');
33
20
 
34
21
  {
35
- _$_.render_expression(children);
22
+ _$_.output_push('Toggle');
36
23
  }
37
24
 
38
25
  _$_.output_push('</div>');
39
- }
26
+ _$_.output_push('<!--[-->');
27
+
28
+ if (lazy.value) {
29
+ _$_.output_push('<div');
30
+ _$_.output_push(' class="content"');
31
+ _$_.output_push('>');
40
32
 
41
- _$_.output_push('<!--]-->');
42
- }
33
+ {
34
+ _$_.render_expression(children);
35
+ }
43
36
 
44
- _$_.output_push('</div>');
45
- });
37
+ _$_.output_push('</div>');
38
+ }
39
+
40
+ _$_.output_push('<!--]-->');
41
+ }
46
42
 
47
- _$_.pop_component();
43
+ _$_.output_push('</div>');
44
+ });
45
+ });
48
46
  }
49
47
 
50
48
  export function ChildItem({ text: label }) {
51
- _$_.push_component();
52
-
53
- _$_.regular_block(() => {
54
- _$_.output_push('<div');
55
- _$_.output_push(' class="item"');
56
- _$_.output_push('>');
49
+ return _$_.tsrx_element(() => {
50
+ _$_.regular_block(() => {
51
+ _$_.output_push('<div');
52
+ _$_.output_push(' class="item"');
53
+ _$_.output_push('>');
57
54
 
58
- {
59
- _$_.output_push(_$_.escape(label));
60
- }
55
+ {
56
+ _$_.output_push(_$_.escape(label));
57
+ }
61
58
 
62
- _$_.output_push('</div>');
59
+ _$_.output_push('</div>');
60
+ });
63
61
  });
64
-
65
- _$_.pop_component();
66
62
  }
67
63
 
68
64
  export function TestIfWithChildren() {
69
- _$_.push_component();
70
-
71
- _$_.regular_block(() => {
72
- {
73
- const comp = IfWithChildren;
74
-
75
- const args = [
76
- {
77
- children: _$_.tsrx_element(function render_children() {
78
- _$_.push_component();
79
-
80
- {
81
- const comp = ChildItem;
82
- const args = [{ text: "Item 1" }];
83
-
84
- comp(...args);
85
- }
86
-
87
- {
88
- const comp = ChildItem;
89
- const args = [{ text: "Item 2" }];
90
-
91
- comp(...args);
92
- }
65
+ return _$_.tsrx_element(() => {
66
+ _$_.regular_block(() => {
67
+ {
68
+ const comp = IfWithChildren;
93
69
 
94
- _$_.pop_component();
95
- })
96
- }
97
- ];
70
+ const args = [
71
+ {
72
+ children: _$_.tsrx_element(() => {
73
+ return _$_.tsrx_element(() => {
74
+ {
75
+ const comp = ChildItem;
76
+ const args = [{ text: "Item 1" }];
77
+
78
+ _$_.render_component(comp, ...args);
79
+ }
80
+
81
+ {
82
+ const comp = ChildItem;
83
+ const args = [{ text: "Item 2" }];
84
+
85
+ _$_.render_component(comp, ...args);
86
+ }
87
+ });
88
+ })
89
+ }
90
+ ];
98
91
 
99
- comp(...args);
100
- }
92
+ _$_.render_component(comp, ...args);
93
+ }
94
+ });
101
95
  });
102
-
103
- _$_.pop_component();
104
96
  }
105
97
 
106
98
  export function IfWithStaticChildren() {
107
- _$_.push_component();
108
-
109
- let lazy_1 = _$_.track(true, '3bba8f77');
99
+ return _$_.tsrx_element(() => {
100
+ let lazy_1 = _$_.track(true, '3bba8f77');
110
101
 
111
- _$_.regular_block(() => {
112
- _$_.output_push('<div');
113
- _$_.output_push(' class="container"');
114
- _$_.output_push('>');
115
-
116
- {
102
+ _$_.regular_block(() => {
117
103
  _$_.output_push('<div');
118
- _$_.output_push(' role="button"');
119
- _$_.output_push(' class="header"');
104
+ _$_.output_push(' class="container"');
120
105
  _$_.output_push('>');
121
106
 
122
107
  {
123
- _$_.output_push('Toggle');
124
- }
125
-
126
- _$_.output_push('</div>');
127
- _$_.output_push('<!--[-->');
128
-
129
- if (lazy_1.value) {
130
108
  _$_.output_push('<div');
131
- _$_.output_push(' class="content"');
109
+ _$_.output_push(' role="button"');
110
+ _$_.output_push(' class="header"');
132
111
  _$_.output_push('>');
133
112
 
134
113
  {
135
- _$_.output_push('<span');
136
- _$_.output_push('>');
114
+ _$_.output_push('Toggle');
115
+ }
137
116
 
138
- {
139
- _$_.output_push('Static child 1');
140
- }
117
+ _$_.output_push('</div>');
118
+ _$_.output_push('<!--[-->');
141
119
 
142
- _$_.output_push('</span>');
143
- _$_.output_push('<span');
120
+ if (lazy_1.value) {
121
+ _$_.output_push('<div');
122
+ _$_.output_push(' class="content"');
144
123
  _$_.output_push('>');
145
124
 
146
125
  {
147
- _$_.output_push('Static child 2');
126
+ _$_.output_push('<span');
127
+ _$_.output_push('>');
128
+
129
+ {
130
+ _$_.output_push('Static child 1');
131
+ }
132
+
133
+ _$_.output_push('</span>');
134
+ _$_.output_push('<span');
135
+ _$_.output_push('>');
136
+
137
+ {
138
+ _$_.output_push('Static child 2');
139
+ }
140
+
141
+ _$_.output_push('</span>');
148
142
  }
149
143
 
150
- _$_.output_push('</span>');
144
+ _$_.output_push('</div>');
151
145
  }
152
146
 
153
- _$_.output_push('</div>');
147
+ _$_.output_push('<!--]-->');
154
148
  }
155
149
 
156
- _$_.output_push('<!--]-->');
157
- }
158
-
159
- _$_.output_push('</div>');
150
+ _$_.output_push('</div>');
151
+ });
160
152
  });
161
-
162
- _$_.pop_component();
163
153
  }
164
154
 
165
155
  export function IfWithSiblingsAndChildren({ children }) {
166
- _$_.push_component();
167
-
168
- let lazy_2 = _$_.track(true, 'a1b8fb4c');
156
+ return _$_.tsrx_element(() => {
157
+ let lazy_2 = _$_.track(true, 'a1b8fb4c');
169
158
 
170
- _$_.regular_block(() => {
171
- _$_.output_push('<section');
172
- _$_.output_push(' class="group"');
173
- _$_.output_push('>');
174
-
175
- {
176
- _$_.output_push('<div');
177
- _$_.output_push(' role="button"');
178
- _$_.output_push(' class="item"');
159
+ _$_.regular_block(() => {
160
+ _$_.output_push('<section');
161
+ _$_.output_push(' class="group"');
179
162
  _$_.output_push('>');
180
163
 
181
164
  {
182
165
  _$_.output_push('<div');
183
- _$_.output_push(' class="indicator"');
184
- _$_.output_push('>');
185
- _$_.output_push('</div>');
186
- _$_.output_push('<h2');
187
- _$_.output_push(' class="text"');
166
+ _$_.output_push(' role="button"');
167
+ _$_.output_push(' class="item"');
188
168
  _$_.output_push('>');
189
169
 
190
170
  {
191
- _$_.output_push('Title');
192
- }
171
+ _$_.output_push('<div');
172
+ _$_.output_push(' class="indicator"');
173
+ _$_.output_push('>');
174
+ _$_.output_push('</div>');
175
+ _$_.output_push('<h2');
176
+ _$_.output_push(' class="text"');
177
+ _$_.output_push('>');
193
178
 
194
- _$_.output_push('</h2>');
195
- _$_.output_push('<div');
196
- _$_.output_push(' class="caret"');
197
- _$_.output_push('>');
179
+ {
180
+ _$_.output_push('Title');
181
+ }
198
182
 
199
- {
200
- _$_.output_push('<svg');
201
- _$_.output_push(' xmlns="http://www.w3.org/2000/svg"');
202
- _$_.output_push(' width="18"');
203
- _$_.output_push(' height="18"');
204
- _$_.output_push(' viewBox="0 0 24 24"');
183
+ _$_.output_push('</h2>');
184
+ _$_.output_push('<div');
185
+ _$_.output_push(' class="caret"');
205
186
  _$_.output_push('>');
206
187
 
207
188
  {
208
- _$_.output_push('<path');
209
- _$_.output_push(' d="m9 18 6-6-6-6"');
189
+ _$_.output_push('<svg');
190
+ _$_.output_push(' xmlns="http://www.w3.org/2000/svg"');
191
+ _$_.output_push(' width="18"');
192
+ _$_.output_push(' height="18"');
193
+ _$_.output_push(' viewBox="0 0 24 24"');
210
194
  _$_.output_push('>');
211
- _$_.output_push('</path>');
195
+
196
+ {
197
+ _$_.output_push('<path');
198
+ _$_.output_push(' d="m9 18 6-6-6-6"');
199
+ _$_.output_push('>');
200
+ _$_.output_push('</path>');
201
+ }
202
+
203
+ _$_.output_push('</svg>');
212
204
  }
213
205
 
214
- _$_.output_push('</svg>');
206
+ _$_.output_push('</div>');
215
207
  }
216
208
 
217
209
  _$_.output_push('</div>');
218
- }
210
+ _$_.output_push('<!--[-->');
219
211
 
220
- _$_.output_push('</div>');
221
- _$_.output_push('<!--[-->');
212
+ if (lazy_2.value) {
213
+ _$_.output_push('<div');
214
+ _$_.output_push(' class="items"');
215
+ _$_.output_push('>');
222
216
 
223
- if (lazy_2.value) {
224
- _$_.output_push('<div');
225
- _$_.output_push(' class="items"');
226
- _$_.output_push('>');
217
+ {
218
+ _$_.render_expression(children);
219
+ }
227
220
 
228
- {
229
- _$_.render_expression(children);
221
+ _$_.output_push('</div>');
230
222
  }
231
223
 
232
- _$_.output_push('</div>');
224
+ _$_.output_push('<!--]-->');
233
225
  }
234
226
 
235
- _$_.output_push('<!--]-->');
236
- }
237
-
238
- _$_.output_push('</section>');
227
+ _$_.output_push('</section>');
228
+ });
239
229
  });
240
-
241
- _$_.pop_component();
242
230
  }
243
231
 
244
232
  export function TestIfWithSiblingsAndChildren() {
245
- _$_.push_component();
246
-
247
- _$_.regular_block(() => {
248
- {
249
- const comp = IfWithSiblingsAndChildren;
250
-
251
- const args = [
252
- {
253
- children: _$_.tsrx_element(function render_children() {
254
- _$_.push_component();
255
-
256
- {
257
- const comp = ChildItem;
258
- const args = [{ text: "Item A" }];
259
-
260
- comp(...args);
261
- }
262
-
263
- {
264
- const comp = ChildItem;
265
- const args = [{ text: "Item B" }];
266
-
267
- comp(...args);
268
- }
233
+ return _$_.tsrx_element(() => {
234
+ _$_.regular_block(() => {
235
+ {
236
+ const comp = IfWithSiblingsAndChildren;
269
237
 
270
- _$_.pop_component();
271
- })
272
- }
273
- ];
238
+ const args = [
239
+ {
240
+ children: _$_.tsrx_element(() => {
241
+ return _$_.tsrx_element(() => {
242
+ {
243
+ const comp = ChildItem;
244
+ const args = [{ text: "Item A" }];
245
+
246
+ _$_.render_component(comp, ...args);
247
+ }
248
+
249
+ {
250
+ const comp = ChildItem;
251
+ const args = [{ text: "Item B" }];
252
+
253
+ _$_.render_component(comp, ...args);
254
+ }
255
+ });
256
+ })
257
+ }
258
+ ];
274
259
 
275
- comp(...args);
276
- }
260
+ _$_.render_component(comp, ...args);
261
+ }
262
+ });
277
263
  });
278
-
279
- _$_.pop_component();
280
264
  }
281
265
 
282
266
  export function ElementWithChildrenThenIf() {
283
- _$_.push_component();
284
-
285
- let lazy_3 = _$_.track(true, '7cd4817b');
267
+ return _$_.tsrx_element(() => {
268
+ let lazy_3 = _$_.track(true, '7cd4817b');
286
269
 
287
- _$_.regular_block(() => {
288
- _$_.output_push('<div');
289
- _$_.output_push(' class="wrapper"');
290
- _$_.output_push('>');
291
-
292
- {
270
+ _$_.regular_block(() => {
293
271
  _$_.output_push('<div');
294
- _$_.output_push(' class="nested-parent"');
272
+ _$_.output_push(' class="wrapper"');
295
273
  _$_.output_push('>');
296
274
 
297
275
  {
298
276
  _$_.output_push('<div');
299
- _$_.output_push(' class="nested-child"');
277
+ _$_.output_push(' class="nested-parent"');
300
278
  _$_.output_push('>');
301
279
 
302
280
  {
303
- _$_.output_push('<span');
304
- _$_.output_push(' class="deep"');
281
+ _$_.output_push('<div');
282
+ _$_.output_push(' class="nested-child"');
305
283
  _$_.output_push('>');
306
284
 
307
285
  {
308
- _$_.output_push('Deep content');
286
+ _$_.output_push('<span');
287
+ _$_.output_push(' class="deep"');
288
+ _$_.output_push('>');
289
+
290
+ {
291
+ _$_.output_push('Deep content');
292
+ }
293
+
294
+ _$_.output_push('</span>');
309
295
  }
310
296
 
311
- _$_.output_push('</span>');
297
+ _$_.output_push('</div>');
312
298
  }
313
299
 
314
300
  _$_.output_push('</div>');
315
- }
301
+ _$_.output_push('<!--[-->');
316
302
 
317
- _$_.output_push('</div>');
318
- _$_.output_push('<!--[-->');
303
+ if (lazy_3.value) {
304
+ _$_.output_push('<div');
305
+ _$_.output_push(' class="conditional"');
306
+ _$_.output_push('>');
319
307
 
320
- if (lazy_3.value) {
321
- _$_.output_push('<div');
322
- _$_.output_push(' class="conditional"');
323
- _$_.output_push('>');
308
+ {
309
+ _$_.output_push('Conditional content');
310
+ }
324
311
 
325
- {
326
- _$_.output_push('Conditional content');
312
+ _$_.output_push('</div>');
327
313
  }
328
314
 
329
- _$_.output_push('</div>');
315
+ _$_.output_push('<!--]-->');
330
316
  }
331
317
 
332
- _$_.output_push('<!--]-->');
333
- }
334
-
335
- _$_.output_push('</div>');
336
- });
318
+ _$_.output_push('</div>');
319
+ });
337
320
 
338
- _$_.regular_block(() => {
339
- _$_.output_push('<button');
340
- _$_.output_push(' class="toggle"');
341
- _$_.output_push('>');
321
+ _$_.regular_block(() => {
322
+ _$_.output_push('<button');
323
+ _$_.output_push(' class="toggle"');
324
+ _$_.output_push('>');
342
325
 
343
- {
344
- _$_.output_push('Toggle');
345
- }
326
+ {
327
+ _$_.output_push('Toggle');
328
+ }
346
329
 
347
- _$_.output_push('</button>');
330
+ _$_.output_push('</button>');
331
+ });
348
332
  });
349
-
350
- _$_.pop_component();
351
333
  }
352
334
 
353
335
  export function DeepNestingThenIf() {
354
- _$_.push_component();
355
-
356
- let lazy_4 = _$_.track(true, '923116be');
336
+ return _$_.tsrx_element(() => {
337
+ let lazy_4 = _$_.track(true, '923116be');
357
338
 
358
- _$_.regular_block(() => {
359
- _$_.output_push('<section');
360
- _$_.output_push(' class="outer"');
361
- _$_.output_push('>');
362
-
363
- {
364
- _$_.output_push('<article');
365
- _$_.output_push(' class="middle"');
339
+ _$_.regular_block(() => {
340
+ _$_.output_push('<section');
341
+ _$_.output_push(' class="outer"');
366
342
  _$_.output_push('>');
367
343
 
368
344
  {
369
- _$_.output_push('<div');
370
- _$_.output_push(' class="inner"');
345
+ _$_.output_push('<article');
346
+ _$_.output_push(' class="middle"');
371
347
  _$_.output_push('>');
372
348
 
373
349
  {
374
- _$_.output_push('<p');
375
- _$_.output_push(' class="leaf"');
350
+ _$_.output_push('<div');
351
+ _$_.output_push(' class="inner"');
376
352
  _$_.output_push('>');
377
353
 
378
354
  {
379
- _$_.output_push('<strong');
355
+ _$_.output_push('<p');
356
+ _$_.output_push(' class="leaf"');
380
357
  _$_.output_push('>');
381
358
 
382
359
  {
383
- _$_.output_push('Bold');
384
- }
360
+ _$_.output_push('<strong');
361
+ _$_.output_push('>');
385
362
 
386
- _$_.output_push('</strong>');
387
- _$_.output_push('<em');
388
- _$_.output_push('>');
363
+ {
364
+ _$_.output_push('Bold');
365
+ }
389
366
 
390
- {
391
- _$_.output_push('Italic');
367
+ _$_.output_push('</strong>');
368
+ _$_.output_push('<em');
369
+ _$_.output_push('>');
370
+
371
+ {
372
+ _$_.output_push('Italic');
373
+ }
374
+
375
+ _$_.output_push('</em>');
392
376
  }
393
377
 
394
- _$_.output_push('</em>');
378
+ _$_.output_push('</p>');
395
379
  }
396
380
 
397
- _$_.output_push('</p>');
381
+ _$_.output_push('</div>');
398
382
  }
399
383
 
400
- _$_.output_push('</div>');
401
- }
384
+ _$_.output_push('</article>');
385
+ _$_.output_push('<!--[-->');
402
386
 
403
- _$_.output_push('</article>');
404
- _$_.output_push('<!--[-->');
387
+ if (lazy_4.value) {
388
+ _$_.output_push('<footer');
389
+ _$_.output_push(' class="footer"');
390
+ _$_.output_push('>');
405
391
 
406
- if (lazy_4.value) {
407
- _$_.output_push('<footer');
408
- _$_.output_push(' class="footer"');
409
- _$_.output_push('>');
392
+ {
393
+ _$_.output_push('Footer');
394
+ }
410
395
 
411
- {
412
- _$_.output_push('Footer');
396
+ _$_.output_push('</footer>');
413
397
  }
414
398
 
415
- _$_.output_push('</footer>');
399
+ _$_.output_push('<!--]-->');
416
400
  }
417
401
 
418
- _$_.output_push('<!--]-->');
419
- }
402
+ _$_.output_push('</section>');
403
+ });
420
404
 
421
- _$_.output_push('</section>');
422
- });
423
-
424
- _$_.regular_block(() => {
425
- _$_.output_push('<button');
426
- _$_.output_push(' class="btn"');
427
- _$_.output_push('>');
405
+ _$_.regular_block(() => {
406
+ _$_.output_push('<button');
407
+ _$_.output_push(' class="btn"');
408
+ _$_.output_push('>');
428
409
 
429
- {
430
- _$_.output_push('Toggle');
431
- }
410
+ {
411
+ _$_.output_push('Toggle');
412
+ }
432
413
 
433
- _$_.output_push('</button>');
414
+ _$_.output_push('</button>');
415
+ });
434
416
  });
435
-
436
- _$_.pop_component();
437
417
  }
438
418
 
439
419
  export function DomElementChildrenThenSibling() {
440
- _$_.push_component();
441
-
442
- let lazy_5 = _$_.track('code', '33a1e97f');
420
+ return _$_.tsrx_element(() => {
421
+ let lazy_5 = _$_.track('code', '33a1e97f');
443
422
 
444
- _$_.regular_block(() => {
445
- _$_.output_push('<div');
446
- _$_.output_push(' class="tabs"');
447
- _$_.output_push('>');
448
-
449
- {
423
+ _$_.regular_block(() => {
450
424
  _$_.output_push('<div');
451
- _$_.output_push(' class="tab-list"');
425
+ _$_.output_push(' class="tabs"');
452
426
  _$_.output_push('>');
453
427
 
454
428
  {
455
- _$_.output_push('<button');
456
- _$_.output_push(_$_.attr('aria-selected', lazy_5.value === 'code' ? 'true' : 'false', false));
457
- _$_.output_push(' class="tab"');
429
+ _$_.output_push('<div');
430
+ _$_.output_push(' class="tab-list"');
458
431
  _$_.output_push('>');
459
432
 
460
433
  {
461
- _$_.output_push('Code');
434
+ _$_.output_push('<button');
435
+ _$_.output_push(_$_.attr('aria-selected', lazy_5.value === 'code' ? 'true' : 'false', false));
436
+ _$_.output_push(' class="tab"');
437
+ _$_.output_push('>');
438
+
439
+ {
440
+ _$_.output_push('Code');
441
+ }
442
+
443
+ _$_.output_push('</button>');
444
+ _$_.output_push('<button');
445
+ _$_.output_push(_$_.attr('aria-selected', lazy_5.value === 'preview' ? 'true' : 'false', false));
446
+ _$_.output_push(' class="tab"');
447
+ _$_.output_push('>');
448
+
449
+ {
450
+ _$_.output_push('Preview');
451
+ }
452
+
453
+ _$_.output_push('</button>');
462
454
  }
463
455
 
464
- _$_.output_push('</button>');
465
- _$_.output_push('<button');
466
- _$_.output_push(_$_.attr('aria-selected', lazy_5.value === 'preview' ? 'true' : 'false', false));
467
- _$_.output_push(' class="tab"');
456
+ _$_.output_push('</div>');
457
+ _$_.output_push('<div');
458
+ _$_.output_push(' class="panel"');
468
459
  _$_.output_push('>');
469
460
 
470
461
  {
471
- _$_.output_push('Preview');
462
+ _$_.output_push('<!--[-->');
463
+
464
+ if (lazy_5.value === 'code') {
465
+ _$_.output_push('<pre');
466
+ _$_.output_push(' class="code"');
467
+ _$_.output_push('>');
468
+
469
+ {
470
+ _$_.output_push('const x = 1;');
471
+ }
472
+
473
+ _$_.output_push('</pre>');
474
+ } else {
475
+ _$_.output_push('<div');
476
+ _$_.output_push(' class="preview"');
477
+ _$_.output_push('>');
478
+
479
+ {
480
+ _$_.output_push('Preview content');
481
+ }
482
+
483
+ _$_.output_push('</div>');
484
+ }
485
+
486
+ _$_.output_push('<!--]-->');
472
487
  }
473
488
 
474
- _$_.output_push('</button>');
489
+ _$_.output_push('</div>');
475
490
  }
476
491
 
477
492
  _$_.output_push('</div>');
493
+ });
494
+ });
495
+ }
496
+
497
+ export function DomChildrenThenStaticSiblings() {
498
+ return _$_.tsrx_element(() => {
499
+ let lazy_6 = _$_.track(0, '0ea64305');
500
+
501
+ _$_.regular_block(() => {
478
502
  _$_.output_push('<div');
479
- _$_.output_push(' class="panel"');
503
+ _$_.output_push(' class="container"');
480
504
  _$_.output_push('>');
481
505
 
482
506
  {
483
- _$_.output_push('<!--[-->');
507
+ _$_.output_push('<ul');
508
+ _$_.output_push(' class="list"');
509
+ _$_.output_push('>');
484
510
 
485
- if (lazy_5.value === 'code') {
486
- _$_.output_push('<pre');
487
- _$_.output_push(' class="code"');
511
+ {
512
+ _$_.output_push('<li');
513
+ _$_.output_push(' class="item"');
488
514
  _$_.output_push('>');
489
515
 
490
516
  {
491
- _$_.output_push('const x = 1;');
517
+ _$_.output_push(_$_.escape('Item count: ' + String(lazy_6.value)));
492
518
  }
493
519
 
494
- _$_.output_push('</pre>');
495
- } else {
496
- _$_.output_push('<div');
497
- _$_.output_push(' class="preview"');
520
+ _$_.output_push('</li>');
521
+ _$_.output_push('<li');
522
+ _$_.output_push(' class="item"');
498
523
  _$_.output_push('>');
499
524
 
500
525
  {
501
- _$_.output_push('Preview content');
526
+ _$_.output_push('Another item');
502
527
  }
503
528
 
504
- _$_.output_push('</div>');
529
+ _$_.output_push('</li>');
505
530
  }
506
531
 
507
- _$_.output_push('<!--]-->');
508
- }
509
-
510
- _$_.output_push('</div>');
511
- }
512
-
513
- _$_.output_push('</div>');
514
- });
515
-
516
- _$_.pop_component();
517
- }
518
-
519
- export function DomChildrenThenStaticSiblings() {
520
- _$_.push_component();
521
-
522
- let lazy_6 = _$_.track(0, '0ea64305');
523
-
524
- _$_.regular_block(() => {
525
- _$_.output_push('<div');
526
- _$_.output_push(' class="container"');
527
- _$_.output_push('>');
528
-
529
- {
530
- _$_.output_push('<ul');
531
- _$_.output_push(' class="list"');
532
- _$_.output_push('>');
533
-
534
- {
535
- _$_.output_push('<li');
536
- _$_.output_push(' class="item"');
532
+ _$_.output_push('</ul>');
533
+ _$_.output_push('<h2');
534
+ _$_.output_push(' class="heading"');
537
535
  _$_.output_push('>');
538
536
 
539
537
  {
540
- _$_.output_push(_$_.escape('Item count: ' + String(lazy_6.value)));
538
+ _$_.output_push('Static Heading');
541
539
  }
542
540
 
543
- _$_.output_push('</li>');
544
- _$_.output_push('<li');
545
- _$_.output_push(' class="item"');
541
+ _$_.output_push('</h2>');
542
+ _$_.output_push('<p');
543
+ _$_.output_push(' class="para"');
546
544
  _$_.output_push('>');
547
545
 
548
546
  {
549
- _$_.output_push('Another item');
547
+ _$_.output_push('Static paragraph');
550
548
  }
551
549
 
552
- _$_.output_push('</li>');
550
+ _$_.output_push('</p>');
553
551
  }
554
552
 
555
- _$_.output_push('</ul>');
556
- _$_.output_push('<h2');
557
- _$_.output_push(' class="heading"');
558
- _$_.output_push('>');
559
-
560
- {
561
- _$_.output_push('Static Heading');
562
- }
553
+ _$_.output_push('</div>');
554
+ });
563
555
 
564
- _$_.output_push('</h2>');
565
- _$_.output_push('<p');
566
- _$_.output_push(' class="para"');
556
+ _$_.regular_block(() => {
557
+ _$_.output_push('<button');
558
+ _$_.output_push(' class="inc"');
567
559
  _$_.output_push('>');
568
560
 
569
561
  {
570
- _$_.output_push('Static paragraph');
562
+ _$_.output_push('Increment');
571
563
  }
572
564
 
573
- _$_.output_push('</p>');
574
- }
575
-
576
- _$_.output_push('</div>');
577
- });
578
-
579
- _$_.regular_block(() => {
580
- _$_.output_push('<button');
581
- _$_.output_push(' class="inc"');
582
- _$_.output_push('>');
583
-
584
- {
585
- _$_.output_push('Increment');
586
- }
587
-
588
- _$_.output_push('</button>');
565
+ _$_.output_push('</button>');
566
+ });
589
567
  });
590
-
591
- _$_.pop_component();
592
568
  }
593
569
 
594
570
  export function StaticListThenStaticSiblings() {
595
- _$_.push_component();
596
-
597
- _$_.regular_block(() => {
598
- _$_.output_push('<div');
599
- _$_.output_push(' class="wrapper"');
600
- _$_.output_push('>');
601
-
602
- {
603
- _$_.output_push('<ul');
604
- _$_.output_push(' class="features"');
571
+ return _$_.tsrx_element(() => {
572
+ _$_.regular_block(() => {
573
+ _$_.output_push('<div');
574
+ _$_.output_push(' class="wrapper"');
605
575
  _$_.output_push('>');
606
576
 
607
577
  {
608
- _$_.output_push('<li');
578
+ _$_.output_push('<ul');
579
+ _$_.output_push(' class="features"');
609
580
  _$_.output_push('>');
610
581
 
611
582
  {
612
- _$_.output_push('<strong');
583
+ _$_.output_push('<li');
613
584
  _$_.output_push('>');
614
585
 
615
586
  {
616
- _$_.output_push('Feature One');
617
- }
587
+ _$_.output_push('<strong');
588
+ _$_.output_push('>');
618
589
 
619
- _$_.output_push('</strong>');
620
- _$_.output_push(': Description of feature one with ');
621
- _$_.output_push('<code');
622
- _$_.output_push('>');
590
+ {
591
+ _$_.output_push('Feature One');
592
+ }
623
593
 
624
- {
625
- _$_.output_push('code');
626
- }
594
+ _$_.output_push('</strong>');
595
+ _$_.output_push(': Description of feature one with ');
596
+ _$_.output_push('<code');
597
+ _$_.output_push('>');
627
598
 
628
- _$_.output_push('</code>');
629
- _$_.output_push(' reference');
630
- }
599
+ {
600
+ _$_.output_push('code');
601
+ }
631
602
 
632
- _$_.output_push('</li>');
633
- _$_.output_push('<li');
634
- _$_.output_push('>');
603
+ _$_.output_push('</code>');
604
+ _$_.output_push(' reference');
605
+ }
635
606
 
636
- {
637
- _$_.output_push('<strong');
607
+ _$_.output_push('</li>');
608
+ _$_.output_push('<li');
638
609
  _$_.output_push('>');
639
610
 
640
611
  {
641
- _$_.output_push('Feature Two');
642
- }
612
+ _$_.output_push('<strong');
613
+ _$_.output_push('>');
643
614
 
644
- _$_.output_push('</strong>');
645
- _$_.output_push(': Another feature description');
646
- }
615
+ {
616
+ _$_.output_push('Feature Two');
617
+ }
647
618
 
648
- _$_.output_push('</li>');
649
- _$_.output_push('<li');
650
- _$_.output_push('>');
619
+ _$_.output_push('</strong>');
620
+ _$_.output_push(': Another feature description');
621
+ }
651
622
 
652
- {
653
- _$_.output_push('<strong');
623
+ _$_.output_push('</li>');
624
+ _$_.output_push('<li');
654
625
  _$_.output_push('>');
655
626
 
656
627
  {
657
- _$_.output_push('Feature Three');
658
- }
628
+ _$_.output_push('<strong');
629
+ _$_.output_push('>');
659
630
 
660
- _$_.output_push('</strong>');
661
- _$_.output_push(': Third feature');
662
- }
631
+ {
632
+ _$_.output_push('Feature Three');
633
+ }
663
634
 
664
- _$_.output_push('</li>');
665
- }
635
+ _$_.output_push('</strong>');
636
+ _$_.output_push(': Third feature');
637
+ }
666
638
 
667
- _$_.output_push('</ul>');
668
- _$_.output_push('<h2');
669
- _$_.output_push(' class="section-heading"');
670
- _$_.output_push('>');
639
+ _$_.output_push('</li>');
640
+ }
671
641
 
672
- {
673
- _$_.output_push('Section Heading');
674
- }
642
+ _$_.output_push('</ul>');
643
+ _$_.output_push('<h2');
644
+ _$_.output_push(' class="section-heading"');
645
+ _$_.output_push('>');
675
646
 
676
- _$_.output_push('</h2>');
677
- _$_.output_push('<p');
678
- _$_.output_push(' class="section-content"');
679
- _$_.output_push('>');
647
+ {
648
+ _$_.output_push('Section Heading');
649
+ }
680
650
 
681
- {
682
- _$_.output_push('Static paragraph with ');
683
- _$_.output_push('<a');
684
- _$_.output_push(' href="/link"');
651
+ _$_.output_push('</h2>');
652
+ _$_.output_push('<p');
653
+ _$_.output_push(' class="section-content"');
685
654
  _$_.output_push('>');
686
655
 
687
656
  {
688
- _$_.output_push('a link');
657
+ _$_.output_push('Static paragraph with ');
658
+ _$_.output_push('<a');
659
+ _$_.output_push(' href="/link"');
660
+ _$_.output_push('>');
661
+
662
+ {
663
+ _$_.output_push('a link');
664
+ }
665
+
666
+ _$_.output_push('</a>');
667
+ _$_.output_push(' and more text.');
689
668
  }
690
669
 
691
- _$_.output_push('</a>');
692
- _$_.output_push(' and more text.');
670
+ _$_.output_push('</p>');
693
671
  }
694
672
 
695
- _$_.output_push('</p>');
696
- }
697
-
698
- _$_.output_push('</div>');
673
+ _$_.output_push('</div>');
674
+ });
699
675
  });
700
-
701
- _$_.pop_component();
702
676
  }