ripple 0.2.199 → 0.2.201

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 (55) hide show
  1. package/package.json +5 -4
  2. package/src/compiler/index.d.ts +1 -5
  3. package/src/compiler/phases/1-parse/index.js +145 -11
  4. package/src/compiler/phases/2-analyze/index.js +24 -8
  5. package/src/compiler/phases/2-analyze/prune.js +5 -3
  6. package/src/compiler/phases/3-transform/client/index.js +312 -165
  7. package/src/compiler/phases/3-transform/segments.js +220 -70
  8. package/src/compiler/phases/3-transform/server/index.js +227 -77
  9. package/src/compiler/source-map-utils.js +74 -10
  10. package/src/compiler/types/index.d.ts +63 -21
  11. package/src/compiler/types/parse.d.ts +3 -1
  12. package/src/compiler/utils.js +34 -0
  13. package/src/helpers.d.ts +5 -0
  14. package/src/runtime/index-server.js +27 -47
  15. package/src/runtime/internal/client/composite.js +5 -0
  16. package/src/runtime/internal/client/events.js +1 -9
  17. package/src/runtime/internal/client/for.js +6 -4
  18. package/src/runtime/internal/client/hydration.js +2 -2
  19. package/src/runtime/internal/client/index.js +1 -1
  20. package/src/runtime/internal/client/operations.js +4 -4
  21. package/src/runtime/internal/client/render.js +0 -2
  22. package/src/runtime/internal/client/template.js +9 -1
  23. package/src/runtime/internal/client/types.d.ts +18 -0
  24. package/src/runtime/internal/client/utils.js +1 -1
  25. package/src/runtime/internal/server/index.js +106 -3
  26. package/src/utils/builders.js +25 -5
  27. package/tests/client/basic/basic.attributes.test.ripple +1 -1
  28. package/tests/client/basic/basic.components.test.ripple +47 -0
  29. package/tests/client/basic/basic.rendering.test.ripple +1 -1
  30. package/tests/client/composite/composite.props.test.ripple +49 -4
  31. package/tests/client/dynamic-elements.test.ripple +44 -0
  32. package/tests/client/switch.test.ripple +40 -0
  33. package/tests/client/tsconfig.json +11 -0
  34. package/tests/client.d.ts +5 -22
  35. package/tests/common.d.ts +24 -0
  36. package/tests/hydration/compiled/server/basic.js +109 -24
  37. package/tests/hydration/compiled/server/events.js +161 -72
  38. package/tests/hydration/compiled/server/for.js +202 -102
  39. package/tests/hydration/compiled/server/if.js +130 -50
  40. package/tests/hydration/compiled/server/reactivity.js +51 -12
  41. package/tests/server/__snapshots__/compiler.test.ripple.snap +11 -4
  42. package/tests/server/basic.attributes.test.ripple +459 -0
  43. package/tests/server/basic.components.test.ripple +237 -0
  44. package/tests/server/basic.test.ripple +25 -0
  45. package/tests/server/compiler.test.ripple +2 -3
  46. package/tests/server/composite.props.test.ripple +161 -0
  47. package/tests/server/dynamic-elements.test.ripple +438 -0
  48. package/tests/server/head.test.ripple +102 -0
  49. package/tests/server/switch.test.ripple +40 -0
  50. package/tests/server/tsconfig.json +11 -0
  51. package/tests/server.d.ts +7 -0
  52. package/tests/setup-client.js +6 -2
  53. package/tests/setup-server.js +16 -0
  54. package/types/index.d.ts +2 -2
  55. package/types/server.d.ts +4 -3
package/tests/hydration/compiled/server/basic.js CHANGED
@@ -4,7 +4,11 @@ export function StaticText(__output) {
4
4
  _$_.push_component();
5
5
  __output.push('<div');
6
6
  __output.push('>');
7
- __output.push('Hello World');
7
+
8
+ {
9
+ __output.push('Hello World');
10
+ }
11
+
8
12
  __output.push('</div>');
9
13
  _$_.pop_component();
10
14
  }
@@ -13,15 +17,27 @@ export function MultipleElements(__output) {
13
17
  _$_.push_component();
14
18
  __output.push('<h1');
15
19
  __output.push('>');
16
- __output.push('Title');
20
+
21
+ {
22
+ __output.push('Title');
23
+ }
24
+
17
25
  __output.push('</h1>');
18
26
  __output.push('<p');
19
27
  __output.push('>');
20
- __output.push('Paragraph text');
28
+
29
+ {
30
+ __output.push('Paragraph text');
31
+ }
32
+
21
33
  __output.push('</p>');
22
34
  __output.push('<span');
23
35
  __output.push('>');
24
- __output.push('Span text');
36
+
37
+ {
38
+ __output.push('Span text');
39
+ }
40
+
25
41
  __output.push('</span>');
26
42
  _$_.pop_component();
27
43
  }
@@ -31,14 +47,26 @@ export function NestedElements(__output) {
31
47
  __output.push('<div');
32
48
  __output.push(' class="outer"');
33
49
  __output.push('>');
34
- __output.push('<div');
35
- __output.push(' class="inner"');
36
- __output.push('>');
37
- __output.push('<span');
38
- __output.push('>');
39
- __output.push('Nested content');
40
- __output.push('</span>');
41
- __output.push('</div>');
50
+
51
+ {
52
+ __output.push('<div');
53
+ __output.push(' class="inner"');
54
+ __output.push('>');
55
+
56
+ {
57
+ __output.push('<span');
58
+ __output.push('>');
59
+
60
+ {
61
+ __output.push('Nested content');
62
+ }
63
+
64
+ __output.push('</span>');
65
+ }
66
+
67
+ __output.push('</div>');
68
+ }
69
+
42
70
  __output.push('</div>');
43
71
  _$_.pop_component();
44
72
  }
@@ -49,12 +77,16 @@ export function WithAttributes(__output) {
49
77
  __output.push(' type="text"');
50
78
  __output.push(' placeholder="Enter text"');
51
79
  __output.push(' disabled');
52
- __output.push('>');
80
+ __output.push(' />');
53
81
  __output.push('<a');
54
82
  __output.push(' href="/link"');
55
83
  __output.push(' target="_blank"');
56
84
  __output.push('>');
57
- __output.push('Link');
85
+
86
+ {
87
+ __output.push('Link');
88
+ }
89
+
58
90
  __output.push('</a>');
59
91
  _$_.pop_component();
60
92
  }
@@ -64,7 +96,11 @@ export function ChildComponent(__output) {
64
96
  __output.push('<span');
65
97
  __output.push(' class="child"');
66
98
  __output.push('>');
67
- __output.push('Child content');
99
+
100
+ {
101
+ __output.push('Child content');
102
+ }
103
+
68
104
  __output.push('</span>');
69
105
  _$_.pop_component();
70
106
  }
@@ -74,7 +110,16 @@ export function ParentWithChild(__output) {
74
110
  __output.push('<div');
75
111
  __output.push(' class="parent"');
76
112
  __output.push('>');
77
- ChildComponent(__output, {});
113
+
114
+ {
115
+ {
116
+ const comp = ChildComponent;
117
+ const args = [__output, {}];
118
+
119
+ comp(...args);
120
+ }
121
+ }
122
+
78
123
  __output.push('</div>');
79
124
  _$_.pop_component();
80
125
  }
@@ -84,7 +129,11 @@ export function FirstSibling(__output) {
84
129
  __output.push('<div');
85
130
  __output.push(' class="first"');
86
131
  __output.push('>');
87
- __output.push('First');
132
+
133
+ {
134
+ __output.push('First');
135
+ }
136
+
88
137
  __output.push('</div>');
89
138
  _$_.pop_component();
90
139
  }
@@ -94,15 +143,32 @@ export function SecondSibling(__output) {
94
143
  __output.push('<div');
95
144
  __output.push(' class="second"');
96
145
  __output.push('>');
97
- __output.push('Second');
146
+
147
+ {
148
+ __output.push('Second');
149
+ }
150
+
98
151
  __output.push('</div>');
99
152
  _$_.pop_component();
100
153
  }
101
154
 
102
155
  export function SiblingComponents(__output) {
103
156
  _$_.push_component();
104
- FirstSibling(__output, {});
105
- SecondSibling(__output, {});
157
+
158
+ {
159
+ const comp = FirstSibling;
160
+ const args = [__output, {}];
161
+
162
+ comp(...args);
163
+ }
164
+
165
+ {
166
+ const comp = SecondSibling;
167
+ const args = [__output, {}];
168
+
169
+ comp(...args);
170
+ }
171
+
106
172
  _$_.pop_component();
107
173
  }
108
174
 
@@ -110,14 +176,25 @@ export function Greeting(__output, props) {
110
176
  _$_.push_component();
111
177
  __output.push('<div');
112
178
  __output.push('>');
113
- __output.push(_$_.escape('Hello ' + String(props.name)));
179
+
180
+ {
181
+ __output.push(_$_.escape('Hello ' + String(props.name)));
182
+ }
183
+
114
184
  __output.push('</div>');
115
185
  _$_.pop_component();
116
186
  }
117
187
 
118
188
  export function WithGreeting(__output) {
119
189
  _$_.push_component();
120
- Greeting(__output, { name: "World" });
190
+
191
+ {
192
+ const comp = Greeting;
193
+ const args = [__output, { name: "World" }];
194
+
195
+ comp(...args);
196
+ }
197
+
121
198
  _$_.pop_component();
122
199
  }
123
200
 
@@ -129,11 +206,19 @@ export function ExpressionContent(__output) {
129
206
 
130
207
  __output.push('<div');
131
208
  __output.push('>');
132
- __output.push(_$_.escape(value));
209
+
210
+ {
211
+ __output.push(_$_.escape(value));
212
+ }
213
+
133
214
  __output.push('</div>');
134
215
  __output.push('<span');
135
216
  __output.push('>');
136
- __output.push(_$_.escape(text.toUpperCase()));
217
+
218
+ {
219
+ __output.push(_$_.escape(text.toUpperCase()));
220
+ }
221
+
137
222
  __output.push('</span>');
138
223
  _$_.pop_component();
139
224
  }
package/tests/hydration/compiled/server/events.js CHANGED
@@ -9,16 +9,28 @@ export function ClickCounter(__output) {
9
9
 
10
10
  __output.push('<div');
11
11
  __output.push('>');
12
- __output.push('<button');
13
- __output.push(' class="increment"');
14
- __output.push('>');
15
- __output.push('Increment');
16
- __output.push('</button>');
17
- __output.push('<span');
18
- __output.push(' class="count"');
19
- __output.push('>');
20
- __output.push(_$_.escape(_$_.get(count)));
21
- __output.push('</span>');
12
+
13
+ {
14
+ __output.push('<button');
15
+ __output.push(' class="increment"');
16
+ __output.push('>');
17
+
18
+ {
19
+ __output.push('Increment');
20
+ }
21
+
22
+ __output.push('</button>');
23
+ __output.push('<span');
24
+ __output.push(' class="count"');
25
+ __output.push('>');
26
+
27
+ {
28
+ __output.push(_$_.escape(_$_.get(count)));
29
+ }
30
+
31
+ __output.push('</span>');
32
+ }
33
+
22
34
  __output.push('</div>');
23
35
  _$_.pop_component();
24
36
  }
@@ -30,21 +42,37 @@ export function IncrementDecrement(__output) {
30
42
 
31
43
  __output.push('<div');
32
44
  __output.push('>');
33
- __output.push('<button');
34
- __output.push(' class="decrement"');
35
- __output.push('>');
36
- __output.push('-');
37
- __output.push('</button>');
38
- __output.push('<span');
39
- __output.push(' class="count"');
40
- __output.push('>');
41
- __output.push(_$_.escape(_$_.get(count)));
42
- __output.push('</span>');
43
- __output.push('<button');
44
- __output.push(' class="increment"');
45
- __output.push('>');
46
- __output.push('+');
47
- __output.push('</button>');
45
+
46
+ {
47
+ __output.push('<button');
48
+ __output.push(' class="decrement"');
49
+ __output.push('>');
50
+
51
+ {
52
+ __output.push('-');
53
+ }
54
+
55
+ __output.push('</button>');
56
+ __output.push('<span');
57
+ __output.push(' class="count"');
58
+ __output.push('>');
59
+
60
+ {
61
+ __output.push(_$_.escape(_$_.get(count)));
62
+ }
63
+
64
+ __output.push('</span>');
65
+ __output.push('<button');
66
+ __output.push(' class="increment"');
67
+ __output.push('>');
68
+
69
+ {
70
+ __output.push('+');
71
+ }
72
+
73
+ __output.push('</button>');
74
+ }
75
+
48
76
  __output.push('</div>');
49
77
  _$_.pop_component();
50
78
  }
@@ -57,21 +85,37 @@ export function MultipleEvents(__output) {
57
85
 
58
86
  __output.push('<div');
59
87
  __output.push('>');
60
- __output.push('<button');
61
- __output.push(' class="target"');
62
- __output.push('>');
63
- __output.push('Target');
64
- __output.push('</button>');
65
- __output.push('<span');
66
- __output.push(' class="clicks"');
67
- __output.push('>');
68
- __output.push(_$_.escape(_$_.get(clicks)));
69
- __output.push('</span>');
70
- __output.push('<span');
71
- __output.push(' class="hovers"');
72
- __output.push('>');
73
- __output.push(_$_.escape(_$_.get(hovers)));
74
- __output.push('</span>');
88
+
89
+ {
90
+ __output.push('<button');
91
+ __output.push(' class="target"');
92
+ __output.push('>');
93
+
94
+ {
95
+ __output.push('Target');
96
+ }
97
+
98
+ __output.push('</button>');
99
+ __output.push('<span');
100
+ __output.push(' class="clicks"');
101
+ __output.push('>');
102
+
103
+ {
104
+ __output.push(_$_.escape(_$_.get(clicks)));
105
+ }
106
+
107
+ __output.push('</span>');
108
+ __output.push('<span');
109
+ __output.push(' class="hovers"');
110
+ __output.push('>');
111
+
112
+ {
113
+ __output.push(_$_.escape(_$_.get(hovers)));
114
+ }
115
+
116
+ __output.push('</span>');
117
+ }
118
+
75
119
  __output.push('</div>');
76
120
  _$_.pop_component();
77
121
  }
@@ -89,21 +133,37 @@ export function MultiStateUpdate(__output) {
89
133
 
90
134
  __output.push('<div');
91
135
  __output.push('>');
92
- __output.push('<button');
93
- __output.push(' class="btn"');
94
- __output.push('>');
95
- __output.push('Click');
96
- __output.push('</button>');
97
- __output.push('<span');
98
- __output.push(' class="count"');
99
- __output.push('>');
100
- __output.push(_$_.escape(_$_.get(count)));
101
- __output.push('</span>');
102
- __output.push('<span');
103
- __output.push(' class="action"');
104
- __output.push('>');
105
- __output.push(_$_.escape(_$_.get(lastAction)));
106
- __output.push('</span>');
136
+
137
+ {
138
+ __output.push('<button');
139
+ __output.push(' class="btn"');
140
+ __output.push('>');
141
+
142
+ {
143
+ __output.push('Click');
144
+ }
145
+
146
+ __output.push('</button>');
147
+ __output.push('<span');
148
+ __output.push(' class="count"');
149
+ __output.push('>');
150
+
151
+ {
152
+ __output.push(_$_.escape(_$_.get(count)));
153
+ }
154
+
155
+ __output.push('</span>');
156
+ __output.push('<span');
157
+ __output.push(' class="action"');
158
+ __output.push('>');
159
+
160
+ {
161
+ __output.push(_$_.escape(_$_.get(lastAction)));
162
+ }
163
+
164
+ __output.push('</span>');
165
+ }
166
+
107
167
  __output.push('</div>');
108
168
  _$_.pop_component();
109
169
  }
@@ -115,11 +175,19 @@ export function ToggleButton(__output) {
115
175
 
116
176
  __output.push('<div');
117
177
  __output.push('>');
118
- __output.push('<button');
119
- __output.push(' class="toggle"');
120
- __output.push('>');
121
- __output.push(_$_.escape(_$_.get(isOn) ? 'ON' : 'OFF'));
122
- __output.push('</button>');
178
+
179
+ {
180
+ __output.push('<button');
181
+ __output.push(' class="toggle"');
182
+ __output.push('>');
183
+
184
+ {
185
+ __output.push(_$_.escape(_$_.get(isOn) ? 'ON' : 'OFF'));
186
+ }
187
+
188
+ __output.push('</button>');
189
+ }
190
+
123
191
  __output.push('</div>');
124
192
  _$_.pop_component();
125
193
  }
@@ -129,7 +197,11 @@ export function ChildButton(__output, props) {
129
197
  __output.push('<button');
130
198
  __output.push(' class="child-btn"');
131
199
  __output.push('>');
132
- __output.push(_$_.escape(props.label));
200
+
201
+ {
202
+ __output.push(_$_.escape(props.label));
203
+ }
204
+
133
205
  __output.push('</button>');
134
206
  _$_.pop_component();
135
207
  }
@@ -142,19 +214,36 @@ export function ParentWithChildButton(__output) {
142
214
  __output.push('<div');
143
215
  __output.push('>');
144
216
 
145
- ChildButton(__output, {
146
- onClick: () => {
147
- _$_.update(count);
148
- },
217
+ {
218
+ {
219
+ const comp = ChildButton;
149
220
 
150
- label: "Click me"
151
- });
221
+ const args = [
222
+ __output,
223
+
224
+ {
225
+ onClick: () => {
226
+ _$_.update(count);
227
+ },
228
+
229
+ label: "Click me"
230
+ }
231
+ ];
232
+
233
+ comp(...args);
234
+ }
235
+
236
+ __output.push('<span');
237
+ __output.push(' class="count"');
238
+ __output.push('>');
239
+
240
+ {
241
+ __output.push(_$_.escape(_$_.get(count)));
242
+ }
243
+
244
+ __output.push('</span>');
245
+ }
152
246
 
153
- __output.push('<span');
154
- __output.push(' class="count"');
155
- __output.push('>');
156
- __output.push(_$_.escape(_$_.get(count)));
157
- __output.push('</span>');
158
247
  __output.push('</div>');
159
248
  _$_.pop_component();
160
249
  }