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/for.js CHANGED
@@ -9,16 +9,24 @@ export function StaticForLoop(__output) {
9
9
 
10
10
  __output.push('<ul');
11
11
  __output.push('>');
12
- __output.push('<!--[-->');
13
12
 
14
- for (const item of items) {
15
- __output.push('<li');
16
- __output.push('>');
17
- __output.push(_$_.escape(item));
18
- __output.push('</li>');
13
+ {
14
+ __output.push('<!--[-->');
15
+
16
+ for (const item of items) {
17
+ __output.push('<li');
18
+ __output.push('>');
19
+
20
+ {
21
+ __output.push(_$_.escape(item));
22
+ }
23
+
24
+ __output.push('</li>');
25
+ }
26
+
27
+ __output.push('<!--]-->');
19
28
  }
20
29
 
21
- __output.push('<!--]-->');
22
30
  __output.push('</ul>');
23
31
  _$_.pop_component();
24
32
  }
@@ -30,19 +38,27 @@ export function ForLoopWithIndex(__output) {
30
38
 
31
39
  __output.push('<ul');
32
40
  __output.push('>');
33
- __output.push('<!--[-->');
34
41
 
35
- var i = 0;
42
+ {
43
+ __output.push('<!--[-->');
44
+
45
+ var i = 0;
46
+
47
+ for (const item of items) {
48
+ __output.push('<li');
49
+ __output.push('>');
50
+
51
+ {
52
+ __output.push(_$_.escape(`${i}: ${item}`));
53
+ }
54
+
55
+ __output.push('</li>');
56
+ i++;
57
+ }
36
58
 
37
- for (const item of items) {
38
- __output.push('<li');
39
- __output.push('>');
40
- __output.push(_$_.escape(`${i}: ${item}`));
41
- __output.push('</li>');
42
- i++;
59
+ __output.push('<!--]-->');
43
60
  }
44
61
 
45
- __output.push('<!--]-->');
46
62
  __output.push('</ul>');
47
63
  _$_.pop_component();
48
64
  }
@@ -58,16 +74,24 @@ export function KeyedForLoop(__output) {
58
74
 
59
75
  __output.push('<ul');
60
76
  __output.push('>');
61
- __output.push('<!--[-->');
62
77
 
63
- for (const item of items) {
64
- __output.push('<li');
65
- __output.push('>');
66
- __output.push(_$_.escape(item.name));
67
- __output.push('</li>');
78
+ {
79
+ __output.push('<!--[-->');
80
+
81
+ for (const item of items) {
82
+ __output.push('<li');
83
+ __output.push('>');
84
+
85
+ {
86
+ __output.push(_$_.escape(item.name));
87
+ }
88
+
89
+ __output.push('</li>');
90
+ }
91
+
92
+ __output.push('<!--]-->');
68
93
  }
69
94
 
70
- __output.push('<!--]-->');
71
95
  __output.push('</ul>');
72
96
  _$_.pop_component();
73
97
  }
@@ -80,20 +104,32 @@ export function ReactiveForLoopAdd(__output) {
80
104
  __output.push('<button');
81
105
  __output.push(' class="add"');
82
106
  __output.push('>');
83
- __output.push('Add');
107
+
108
+ {
109
+ __output.push('Add');
110
+ }
111
+
84
112
  __output.push('</button>');
85
113
  __output.push('<ul');
86
114
  __output.push('>');
87
- __output.push('<!--[-->');
88
115
 
89
- for (const item of _$_.get(items)) {
90
- __output.push('<li');
91
- __output.push('>');
92
- __output.push(_$_.escape(item));
93
- __output.push('</li>');
116
+ {
117
+ __output.push('<!--[-->');
118
+
119
+ for (const item of _$_.get(items)) {
120
+ __output.push('<li');
121
+ __output.push('>');
122
+
123
+ {
124
+ __output.push(_$_.escape(item));
125
+ }
126
+
127
+ __output.push('</li>');
128
+ }
129
+
130
+ __output.push('<!--]-->');
94
131
  }
95
132
 
96
- __output.push('<!--]-->');
97
133
  __output.push('</ul>');
98
134
  _$_.pop_component();
99
135
  }
@@ -106,20 +142,32 @@ export function ReactiveForLoopRemove(__output) {
106
142
  __output.push('<button');
107
143
  __output.push(' class="remove"');
108
144
  __output.push('>');
109
- __output.push('Remove');
145
+
146
+ {
147
+ __output.push('Remove');
148
+ }
149
+
110
150
  __output.push('</button>');
111
151
  __output.push('<ul');
112
152
  __output.push('>');
113
- __output.push('<!--[-->');
114
153
 
115
- for (const item of _$_.get(items)) {
116
- __output.push('<li');
117
- __output.push('>');
118
- __output.push(_$_.escape(item));
119
- __output.push('</li>');
154
+ {
155
+ __output.push('<!--[-->');
156
+
157
+ for (const item of _$_.get(items)) {
158
+ __output.push('<li');
159
+ __output.push('>');
160
+
161
+ {
162
+ __output.push(_$_.escape(item));
163
+ }
164
+
165
+ __output.push('</li>');
166
+ }
167
+
168
+ __output.push('<!--]-->');
120
169
  }
121
170
 
122
- __output.push('<!--]-->');
123
171
  __output.push('</ul>');
124
172
  _$_.pop_component();
125
173
  }
@@ -131,29 +179,45 @@ export function ForLoopInteractive(__output) {
131
179
 
132
180
  __output.push('<div');
133
181
  __output.push('>');
134
- __output.push('<!--[-->');
135
-
136
- var i = 0;
137
-
138
- for (const count of _$_.get(counts)) {
139
- __output.push('<div');
140
- __output.push(_$_.attr('class', `item-${i}`));
141
- __output.push('>');
142
- __output.push('<span');
143
- __output.push(' class="value"');
144
- __output.push('>');
145
- __output.push(_$_.escape(count));
146
- __output.push('</span>');
147
- __output.push('<button');
148
- __output.push(' class="increment"');
149
- __output.push('>');
150
- __output.push('+');
151
- __output.push('</button>');
152
- __output.push('</div>');
153
- i++;
182
+
183
+ {
184
+ __output.push('<!--[-->');
185
+
186
+ var i = 0;
187
+
188
+ for (const count of _$_.get(counts)) {
189
+ __output.push('<div');
190
+ __output.push(_$_.attr('class', `item-${i}`));
191
+ __output.push('>');
192
+
193
+ {
194
+ __output.push('<span');
195
+ __output.push(' class="value"');
196
+ __output.push('>');
197
+
198
+ {
199
+ __output.push(_$_.escape(count));
200
+ }
201
+
202
+ __output.push('</span>');
203
+ __output.push('<button');
204
+ __output.push(' class="increment"');
205
+ __output.push('>');
206
+
207
+ {
208
+ __output.push('+');
209
+ }
210
+
211
+ __output.push('</button>');
212
+ }
213
+
214
+ __output.push('</div>');
215
+ i++;
216
+ }
217
+
218
+ __output.push('<!--]-->');
154
219
  }
155
220
 
156
- __output.push('<!--]-->');
157
221
  __output.push('</div>');
158
222
  _$_.pop_component();
159
223
  }
@@ -166,33 +230,45 @@ export function NestedForLoop(__output) {
166
230
  __output.push('<div');
167
231
  __output.push(' class="grid"');
168
232
  __output.push('>');
169
- __output.push('<!--[-->');
170
-
171
- var rowIndex = 0;
172
233
 
173
- for (const row of grid) {
174
- __output.push('<div');
175
- __output.push(_$_.attr('class', `row-${rowIndex}`));
176
- __output.push('>');
234
+ {
177
235
  __output.push('<!--[-->');
178
236
 
179
- var colIndex = 0;
237
+ var rowIndex = 0;
180
238
 
181
- for (const cell of row) {
182
- __output.push('<span');
183
- __output.push(_$_.attr('class', `cell-${rowIndex}-${colIndex}`));
239
+ for (const row of grid) {
240
+ __output.push('<div');
241
+ __output.push(_$_.attr('class', `row-${rowIndex}`));
184
242
  __output.push('>');
185
- __output.push(_$_.escape(cell));
186
- __output.push('</span>');
187
- colIndex++;
243
+
244
+ {
245
+ __output.push('<!--[-->');
246
+
247
+ var colIndex = 0;
248
+
249
+ for (const cell of row) {
250
+ __output.push('<span');
251
+ __output.push(_$_.attr('class', `cell-${rowIndex}-${colIndex}`));
252
+ __output.push('>');
253
+
254
+ {
255
+ __output.push(_$_.escape(cell));
256
+ }
257
+
258
+ __output.push('</span>');
259
+ colIndex++;
260
+ }
261
+
262
+ __output.push('<!--]-->');
263
+ }
264
+
265
+ __output.push('</div>');
266
+ rowIndex++;
188
267
  }
189
268
 
190
269
  __output.push('<!--]-->');
191
- __output.push('</div>');
192
- rowIndex++;
193
270
  }
194
271
 
195
- __output.push('<!--]-->');
196
272
  __output.push('</div>');
197
273
  _$_.pop_component();
198
274
  }
@@ -205,16 +281,24 @@ export function EmptyForLoop(__output) {
205
281
  __output.push('<div');
206
282
  __output.push(' class="container"');
207
283
  __output.push('>');
208
- __output.push('<!--[-->');
209
284
 
210
- for (const item of items) {
211
- __output.push('<span');
212
- __output.push('>');
213
- __output.push(_$_.escape(item));
214
- __output.push('</span>');
285
+ {
286
+ __output.push('<!--[-->');
287
+
288
+ for (const item of items) {
289
+ __output.push('<span');
290
+ __output.push('>');
291
+
292
+ {
293
+ __output.push(_$_.escape(item));
294
+ }
295
+
296
+ __output.push('</span>');
297
+ }
298
+
299
+ __output.push('<!--]-->');
215
300
  }
216
301
 
217
- __output.push('<!--]-->');
218
302
  __output.push('</div>');
219
303
  _$_.pop_component();
220
304
  }
@@ -229,26 +313,42 @@ export function ForLoopComplexObjects(__output) {
229
313
 
230
314
  __output.push('<div');
231
315
  __output.push('>');
232
- __output.push('<!--[-->');
233
-
234
- for (const user of users) {
235
- __output.push('<div');
236
- __output.push(_$_.attr('class', `user-${user.id}`));
237
- __output.push('>');
238
- __output.push('<span');
239
- __output.push(' class="name"');
240
- __output.push('>');
241
- __output.push(_$_.escape(user.name));
242
- __output.push('</span>');
243
- __output.push('<span');
244
- __output.push(' class="role"');
245
- __output.push('>');
246
- __output.push(_$_.escape(user.role));
247
- __output.push('</span>');
248
- __output.push('</div>');
316
+
317
+ {
318
+ __output.push('<!--[-->');
319
+
320
+ for (const user of users) {
321
+ __output.push('<div');
322
+ __output.push(_$_.attr('class', `user-${user.id}`));
323
+ __output.push('>');
324
+
325
+ {
326
+ __output.push('<span');
327
+ __output.push(' class="name"');
328
+ __output.push('>');
329
+
330
+ {
331
+ __output.push(_$_.escape(user.name));
332
+ }
333
+
334
+ __output.push('</span>');
335
+ __output.push('<span');
336
+ __output.push(' class="role"');
337
+ __output.push('>');
338
+
339
+ {
340
+ __output.push(_$_.escape(user.role));
341
+ }
342
+
343
+ __output.push('</span>');
344
+ }
345
+
346
+ __output.push('</div>');
347
+ }
348
+
349
+ __output.push('<!--]-->');
249
350
  }
250
351
 
251
- __output.push('<!--]-->');
252
352
  __output.push('</div>');
253
353
  _$_.pop_component();
254
354
  }
package/tests/hydration/compiled/server/if.js CHANGED
@@ -13,7 +13,11 @@ export function IfTruthy(__output) {
13
13
  __output.push('<div');
14
14
  __output.push(' class="shown"');
15
15
  __output.push('>');
16
- __output.push('Visible');
16
+
17
+ {
18
+ __output.push('Visible');
19
+ }
20
+
17
21
  __output.push('</div>');
18
22
  }
19
23
 
@@ -32,7 +36,11 @@ export function IfFalsy(__output) {
32
36
  __output.push('<div');
33
37
  __output.push(' class="shown"');
34
38
  __output.push('>');
35
- __output.push('Visible');
39
+
40
+ {
41
+ __output.push('Visible');
42
+ }
43
+
36
44
  __output.push('</div>');
37
45
  }
38
46
 
@@ -51,13 +59,21 @@ export function IfElse(__output) {
51
59
  __output.push('<div');
52
60
  __output.push(' class="logged-in"');
53
61
  __output.push('>');
54
- __output.push('Welcome back!');
62
+
63
+ {
64
+ __output.push('Welcome back!');
65
+ }
66
+
55
67
  __output.push('</div>');
56
68
  } else {
57
69
  __output.push('<div');
58
70
  __output.push(' class="logged-out"');
59
71
  __output.push('>');
60
- __output.push('Please log in');
72
+
73
+ {
74
+ __output.push('Please log in');
75
+ }
76
+
61
77
  __output.push('</div>');
62
78
  }
63
79
 
@@ -73,7 +89,11 @@ export function ReactiveIf(__output) {
73
89
  __output.push('<button');
74
90
  __output.push(' class="toggle"');
75
91
  __output.push('>');
76
- __output.push('Toggle');
92
+
93
+ {
94
+ __output.push('Toggle');
95
+ }
96
+
77
97
  __output.push('</button>');
78
98
  __output.push('<!--[-->');
79
99
 
@@ -81,7 +101,11 @@ export function ReactiveIf(__output) {
81
101
  __output.push('<div');
82
102
  __output.push(' class="content"');
83
103
  __output.push('>');
84
- __output.push('Content visible');
104
+
105
+ {
106
+ __output.push('Content visible');
107
+ }
108
+
85
109
  __output.push('</div>');
86
110
  }
87
111
 
@@ -97,7 +121,11 @@ export function ReactiveIfElse(__output) {
97
121
  __output.push('<button');
98
122
  __output.push(' class="toggle"');
99
123
  __output.push('>');
100
- __output.push('Toggle');
124
+
125
+ {
126
+ __output.push('Toggle');
127
+ }
128
+
101
129
  __output.push('</button>');
102
130
  __output.push('<!--[-->');
103
131
 
@@ -105,13 +133,21 @@ export function ReactiveIfElse(__output) {
105
133
  __output.push('<div');
106
134
  __output.push(' class="on"');
107
135
  __output.push('>');
108
- __output.push('ON');
136
+
137
+ {
138
+ __output.push('ON');
139
+ }
140
+
109
141
  __output.push('</div>');
110
142
  } else {
111
143
  __output.push('<div');
112
144
  __output.push(' class="off"');
113
145
  __output.push('>');
114
- __output.push('OFF');
146
+
147
+ {
148
+ __output.push('OFF');
149
+ }
150
+
115
151
  __output.push('</div>');
116
152
  }
117
153
 
@@ -128,12 +164,20 @@ export function NestedIf(__output) {
128
164
  __output.push('<button');
129
165
  __output.push(' class="outer-toggle"');
130
166
  __output.push('>');
131
- __output.push('Outer');
167
+
168
+ {
169
+ __output.push('Outer');
170
+ }
171
+
132
172
  __output.push('</button>');
133
173
  __output.push('<button');
134
174
  __output.push(' class="inner-toggle"');
135
175
  __output.push('>');
136
- __output.push('Inner');
176
+
177
+ {
178
+ __output.push('Inner');
179
+ }
180
+
137
181
  __output.push('</button>');
138
182
  __output.push('<!--[-->');
139
183
 
@@ -141,18 +185,26 @@ export function NestedIf(__output) {
141
185
  __output.push('<div');
142
186
  __output.push(' class="outer-content"');
143
187
  __output.push('>');
144
- __output.push('Outer');
145
- __output.push('<!--[-->');
146
188
 
147
- if (_$_.get(inner)) {
148
- __output.push('<span');
149
- __output.push(' class="inner-content"');
150
- __output.push('>');
151
- __output.push('Inner');
152
- __output.push('</span>');
189
+ {
190
+ __output.push('Outer');
191
+ __output.push('<!--[-->');
192
+
193
+ if (_$_.get(inner)) {
194
+ __output.push('<span');
195
+ __output.push(' class="inner-content"');
196
+ __output.push('>');
197
+
198
+ {
199
+ __output.push('Inner');
200
+ }
201
+
202
+ __output.push('</span>');
203
+ }
204
+
205
+ __output.push('<!--]-->');
153
206
  }
154
207
 
155
- __output.push('<!--]-->');
156
208
  __output.push('</div>');
157
209
  }
158
210
 
@@ -167,50 +219,78 @@ export function IfElseIfChain(__output) {
167
219
 
168
220
  __output.push('<div');
169
221
  __output.push('>');
170
- __output.push('<button');
171
- __output.push(' class="success"');
172
- __output.push('>');
173
- __output.push('Success');
174
- __output.push('</button>');
175
- __output.push('<button');
176
- __output.push(' class="error"');
177
- __output.push('>');
178
- __output.push('Error');
179
- __output.push('</button>');
180
- __output.push('<button');
181
- __output.push(' class="loading"');
182
- __output.push('>');
183
- __output.push('Loading');
184
- __output.push('</button>');
185
- __output.push('<!--[-->');
186
222
 
187
- if (_$_.get(status) === 'loading') {
188
- __output.push('<div');
189
- __output.push(' class="state"');
223
+ {
224
+ __output.push('<button');
225
+ __output.push(' class="success"');
190
226
  __output.push('>');
191
- __output.push('Loading...');
192
- __output.push('</div>');
193
- } else {
227
+
228
+ {
229
+ __output.push('Success');
230
+ }
231
+
232
+ __output.push('</button>');
233
+ __output.push('<button');
234
+ __output.push(' class="error"');
235
+ __output.push('>');
236
+
237
+ {
238
+ __output.push('Error');
239
+ }
240
+
241
+ __output.push('</button>');
242
+ __output.push('<button');
243
+ __output.push(' class="loading"');
244
+ __output.push('>');
245
+
246
+ {
247
+ __output.push('Loading');
248
+ }
249
+
250
+ __output.push('</button>');
194
251
  __output.push('<!--[-->');
195
252
 
196
- if (_$_.get(status) === 'success') {
253
+ if (_$_.get(status) === 'loading') {
197
254
  __output.push('<div');
198
255
  __output.push(' class="state"');
199
256
  __output.push('>');
200
- __output.push('Success!');
257
+
258
+ {
259
+ __output.push('Loading...');
260
+ }
261
+
201
262
  __output.push('</div>');
202
263
  } else {
203
- __output.push('<div');
204
- __output.push(' class="state"');
205
- __output.push('>');
206
- __output.push('Error occurred');
207
- __output.push('</div>');
264
+ __output.push('<!--[-->');
265
+
266
+ if (_$_.get(status) === 'success') {
267
+ __output.push('<div');
268
+ __output.push(' class="state"');
269
+ __output.push('>');
270
+
271
+ {
272
+ __output.push('Success!');
273
+ }
274
+
275
+ __output.push('</div>');
276
+ } else {
277
+ __output.push('<div');
278
+ __output.push(' class="state"');
279
+ __output.push('>');
280
+
281
+ {
282
+ __output.push('Error occurred');
283
+ }
284
+
285
+ __output.push('</div>');
286
+ }
287
+
288
+ __output.push('<!--]-->');
208
289
  }
209
290
 
210
291
  __output.push('<!--]-->');
211
292
  }
212
293
 
213
- __output.push('<!--]-->');
214
294
  __output.push('</div>');
215
295
  _$_.pop_component();
216
296
  }