ripple 0.2.86 → 0.2.87
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.
- package/package.json +3 -1
- package/src/compiler/scope.js +2 -0
- package/src/compiler/types/index.d.ts +5 -0
- package/src/runtime/array.js +12 -5
- package/src/runtime/index-client.js +0 -1
- package/src/runtime/index-server.js +18 -3
- package/src/runtime/internal/client/blocks.js +209 -205
- package/src/runtime/internal/client/composite.js +9 -0
- package/src/runtime/internal/client/events.js +219 -189
- package/src/runtime/internal/client/for.js +97 -13
- package/src/runtime/internal/client/if.js +11 -0
- package/src/runtime/internal/client/operations.js +7 -2
- package/src/runtime/internal/client/portal.js +15 -4
- package/src/runtime/internal/client/render.js +48 -6
- package/src/runtime/internal/client/runtime.js +98 -83
- package/src/runtime/internal/client/template.js +8 -5
- package/src/runtime/internal/client/try.js +42 -4
- package/src/runtime/internal/client/utils.js +18 -3
- package/src/runtime/internal/server/context.js +2 -0
- package/src/runtime/internal/server/index.js +39 -3
- package/src/runtime/internal/server/types.d.ts +21 -0
- package/src/runtime/map.js +37 -2
- package/src/runtime/set.js +22 -9
- package/src/utils/builders.js +1 -0
- package/tests/client/ref.test.ripple +33 -2
|
@@ -1,27 +1,28 @@
|
|
|
1
1
|
/** @import { Block, Derived } from '#client' */
|
|
2
2
|
|
|
3
3
|
import {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
4
|
+
BLOCK_HAS_RUN,
|
|
5
|
+
BRANCH_BLOCK,
|
|
6
|
+
DERIVED,
|
|
7
|
+
CONTAINS_TEARDOWN,
|
|
8
|
+
DESTROYED,
|
|
9
|
+
EFFECT_BLOCK,
|
|
10
|
+
PAUSED,
|
|
11
|
+
RENDER_BLOCK,
|
|
12
|
+
ROOT_BLOCK,
|
|
13
|
+
TRY_BLOCK,
|
|
14
|
+
HEAD_BLOCK,
|
|
14
15
|
} from './constants.js';
|
|
15
16
|
import { next_sibling } from './operations.js';
|
|
16
17
|
import { apply_element_spread } from './render.js';
|
|
17
18
|
import {
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
19
|
+
active_block,
|
|
20
|
+
active_component,
|
|
21
|
+
active_reaction,
|
|
22
|
+
is_block_dirty,
|
|
23
|
+
run_block,
|
|
24
|
+
run_teardown,
|
|
25
|
+
schedule_update,
|
|
25
26
|
} from './runtime.js';
|
|
26
27
|
import { suspend } from './try.js';
|
|
27
28
|
|
|
@@ -29,32 +30,32 @@ import { suspend } from './try.js';
|
|
|
29
30
|
* @param {Function} fn
|
|
30
31
|
*/
|
|
31
32
|
export function user_effect(fn) {
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
33
|
+
if (active_block === null) {
|
|
34
|
+
throw new Error(
|
|
35
|
+
'effect() must be called within an active context, such as a component or effect',
|
|
36
|
+
);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
var component = active_component;
|
|
40
|
+
if (component !== null && !component.m) {
|
|
41
|
+
var e = (component.e ??= []);
|
|
42
|
+
e.push({
|
|
43
|
+
b: active_block,
|
|
44
|
+
fn,
|
|
45
|
+
r: active_reaction,
|
|
46
|
+
});
|
|
47
|
+
|
|
48
|
+
return;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
return block(EFFECT_BLOCK, fn);
|
|
51
52
|
}
|
|
52
53
|
|
|
53
54
|
/**
|
|
54
55
|
* @param {Function} fn
|
|
55
56
|
*/
|
|
56
57
|
export function effect(fn) {
|
|
57
|
-
|
|
58
|
+
return block(EFFECT_BLOCK, fn);
|
|
58
59
|
}
|
|
59
60
|
|
|
60
61
|
/**
|
|
@@ -62,7 +63,7 @@ export function effect(fn) {
|
|
|
62
63
|
* @param {number} [flags]
|
|
63
64
|
*/
|
|
64
65
|
export function render(fn, flags = 0) {
|
|
65
|
-
|
|
66
|
+
return block(RENDER_BLOCK | flags, fn);
|
|
66
67
|
}
|
|
67
68
|
|
|
68
69
|
/**
|
|
@@ -71,7 +72,7 @@ export function render(fn, flags = 0) {
|
|
|
71
72
|
* @param {number} [flags]
|
|
72
73
|
*/
|
|
73
74
|
export function render_spread(element, fn, flags = 0) {
|
|
74
|
-
|
|
75
|
+
return block(RENDER_BLOCK | flags, apply_element_spread(element, fn));
|
|
75
76
|
}
|
|
76
77
|
|
|
77
78
|
/**
|
|
@@ -79,18 +80,18 @@ export function render_spread(element, fn, flags = 0) {
|
|
|
79
80
|
* @param {number} [flags]
|
|
80
81
|
*/
|
|
81
82
|
export function branch(fn, flags = 0) {
|
|
82
|
-
|
|
83
|
+
return block(BRANCH_BLOCK | flags, fn);
|
|
83
84
|
}
|
|
84
85
|
|
|
85
86
|
/**
|
|
86
87
|
* @param {() => any} fn
|
|
87
88
|
*/
|
|
88
89
|
export function async(fn) {
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
90
|
+
return block(BRANCH_BLOCK, async () => {
|
|
91
|
+
const unsuspend = suspend();
|
|
92
|
+
await fn();
|
|
93
|
+
unsuspend();
|
|
94
|
+
});
|
|
94
95
|
}
|
|
95
96
|
|
|
96
97
|
/**
|
|
@@ -99,27 +100,27 @@ export function async(fn) {
|
|
|
99
100
|
* @returns {Block}
|
|
100
101
|
*/
|
|
101
102
|
export function ref(element, get_fn) {
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
103
|
+
/** @type {(element: Element) => (void | (() => void) | undefined)} */
|
|
104
|
+
var ref_fn;
|
|
105
|
+
/** @type {Block | null} */
|
|
106
|
+
var e;
|
|
107
|
+
|
|
108
|
+
return block(RENDER_BLOCK, () => {
|
|
109
|
+
if (ref_fn !== (ref_fn = get_fn())) {
|
|
110
|
+
if (e) {
|
|
111
|
+
destroy_block(e);
|
|
112
|
+
e = null;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
if (ref_fn) {
|
|
116
|
+
e = branch(() => {
|
|
117
|
+
effect(() => {
|
|
118
|
+
return ref_fn(element);
|
|
119
|
+
});
|
|
120
|
+
});
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
});
|
|
123
124
|
}
|
|
124
125
|
|
|
125
126
|
/**
|
|
@@ -127,7 +128,7 @@ export function ref(element, get_fn) {
|
|
|
127
128
|
* @returns {Block}
|
|
128
129
|
*/
|
|
129
130
|
export function root(fn) {
|
|
130
|
-
|
|
131
|
+
return block(ROOT_BLOCK, fn);
|
|
131
132
|
}
|
|
132
133
|
|
|
133
134
|
/**
|
|
@@ -136,7 +137,7 @@ export function root(fn) {
|
|
|
136
137
|
* @returns {Block}
|
|
137
138
|
*/
|
|
138
139
|
export function create_try_block(fn, state) {
|
|
139
|
-
|
|
140
|
+
return block(TRY_BLOCK, fn, state);
|
|
140
141
|
}
|
|
141
142
|
|
|
142
143
|
/**
|
|
@@ -144,14 +145,14 @@ export function create_try_block(fn, state) {
|
|
|
144
145
|
* @param {Block} parent_block
|
|
145
146
|
*/
|
|
146
147
|
function push_block(block, parent_block) {
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
148
|
+
var parent_last = parent_block.last;
|
|
149
|
+
if (parent_last === null) {
|
|
150
|
+
parent_block.last = parent_block.first = block;
|
|
151
|
+
} else {
|
|
152
|
+
parent_last.next = block;
|
|
153
|
+
block.prev = parent_last;
|
|
154
|
+
parent_block.last = block;
|
|
155
|
+
}
|
|
155
156
|
}
|
|
156
157
|
|
|
157
158
|
/**
|
|
@@ -161,37 +162,38 @@ function push_block(block, parent_block) {
|
|
|
161
162
|
* @returns {Block}
|
|
162
163
|
*/
|
|
163
164
|
export function block(flags, fn, state = null) {
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
165
|
+
/** @type {Block} */
|
|
166
|
+
var block = {
|
|
167
|
+
co: active_component,
|
|
168
|
+
d: null,
|
|
169
|
+
first: null,
|
|
170
|
+
f: flags,
|
|
171
|
+
fn,
|
|
172
|
+
last: null,
|
|
173
|
+
next: null,
|
|
174
|
+
p: active_block,
|
|
175
|
+
prev: null,
|
|
176
|
+
s: state,
|
|
177
|
+
t: null,
|
|
178
|
+
};
|
|
179
|
+
|
|
180
|
+
if (active_reaction !== null && (active_reaction.f & DERIVED) !== 0) {
|
|
181
|
+
/* prettier-ignore */
|
|
182
|
+
(/** @type {Derived} */ (active_reaction).blocks ??= []).push(block);
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
if (active_block !== null) {
|
|
186
|
+
push_block(block, active_block);
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
if ((flags & EFFECT_BLOCK) !== 0) {
|
|
190
|
+
schedule_update(block);
|
|
191
|
+
} else {
|
|
192
|
+
run_block(block);
|
|
193
|
+
block.f ^= BLOCK_HAS_RUN;
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
return block;
|
|
195
197
|
}
|
|
196
198
|
|
|
197
199
|
/**
|
|
@@ -199,16 +201,16 @@ export function block(flags, fn, state = null) {
|
|
|
199
201
|
* @param {boolean} [remove_dom]
|
|
200
202
|
*/
|
|
201
203
|
export function destroy_block_children(parent, remove_dom = false) {
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
204
|
+
var block = parent.first;
|
|
205
|
+
parent.first = parent.last = null;
|
|
206
|
+
|
|
207
|
+
if ((parent.f & CONTAINS_TEARDOWN) !== 0) {
|
|
208
|
+
while (block !== null) {
|
|
209
|
+
var next = block.next;
|
|
210
|
+
destroy_block(block, remove_dom);
|
|
211
|
+
block = next;
|
|
212
|
+
}
|
|
213
|
+
}
|
|
212
214
|
}
|
|
213
215
|
|
|
214
216
|
/**
|
|
@@ -216,82 +218,82 @@ export function destroy_block_children(parent, remove_dom = false) {
|
|
|
216
218
|
* @param {boolean} [remove_dom]
|
|
217
219
|
*/
|
|
218
220
|
export function destroy_non_branch_children(parent, remove_dom = false) {
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
221
|
+
var block = parent.first;
|
|
222
|
+
|
|
223
|
+
if (
|
|
224
|
+
(parent.f & CONTAINS_TEARDOWN) === 0 &&
|
|
225
|
+
parent.first !== null &&
|
|
226
|
+
(parent.first.f & BRANCH_BLOCK) === 0
|
|
227
|
+
) {
|
|
228
|
+
parent.first = parent.last = null;
|
|
229
|
+
} else {
|
|
230
|
+
while (block !== null) {
|
|
231
|
+
var next = block.next;
|
|
232
|
+
if ((block.f & BRANCH_BLOCK) === 0) {
|
|
233
|
+
destroy_block(block, remove_dom);
|
|
234
|
+
}
|
|
235
|
+
block = next;
|
|
236
|
+
}
|
|
237
|
+
}
|
|
236
238
|
}
|
|
237
239
|
|
|
238
240
|
/**
|
|
239
241
|
* @param {Block} block
|
|
240
242
|
*/
|
|
241
243
|
export function unlink_block(block) {
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
244
|
+
var parent = block.p;
|
|
245
|
+
var prev = block.prev;
|
|
246
|
+
var next = block.next;
|
|
245
247
|
|
|
246
|
-
|
|
247
|
-
|
|
248
|
+
if (prev !== null) prev.next = next;
|
|
249
|
+
if (next !== null) next.prev = prev;
|
|
248
250
|
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
251
|
+
if (parent !== null) {
|
|
252
|
+
if (parent.first === block) parent.first = next;
|
|
253
|
+
if (parent.last === block) parent.last = prev;
|
|
254
|
+
}
|
|
253
255
|
}
|
|
254
256
|
|
|
255
257
|
/**
|
|
256
258
|
* @param {Block} block
|
|
257
259
|
*/
|
|
258
260
|
export function pause_block(block) {
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
261
|
+
if ((block.f & PAUSED) !== 0) {
|
|
262
|
+
return;
|
|
263
|
+
}
|
|
264
|
+
block.f ^= PAUSED;
|
|
263
265
|
|
|
264
|
-
|
|
266
|
+
var child = block.first;
|
|
265
267
|
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
268
|
+
while (child !== null) {
|
|
269
|
+
var next = child.next;
|
|
270
|
+
pause_block(child);
|
|
271
|
+
child = next;
|
|
272
|
+
}
|
|
271
273
|
|
|
272
|
-
|
|
274
|
+
run_teardown(block);
|
|
273
275
|
}
|
|
274
276
|
|
|
275
277
|
/**
|
|
276
278
|
* @param {Block} block
|
|
277
279
|
*/
|
|
278
280
|
export function resume_block(block) {
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
281
|
+
if ((block.f & PAUSED) === 0) {
|
|
282
|
+
return;
|
|
283
|
+
}
|
|
284
|
+
block.f ^= PAUSED;
|
|
285
|
+
|
|
286
|
+
if (is_block_dirty(block)) {
|
|
287
|
+
schedule_update(block);
|
|
288
|
+
}
|
|
289
|
+
|
|
290
|
+
var child = block.first;
|
|
291
|
+
|
|
292
|
+
while (child !== null) {
|
|
293
|
+
var next = child.next;
|
|
294
|
+
resume_block(child);
|
|
295
|
+
child = next;
|
|
296
|
+
}
|
|
295
297
|
}
|
|
296
298
|
|
|
297
299
|
/**
|
|
@@ -299,21 +301,21 @@ export function resume_block(block) {
|
|
|
299
301
|
* @returns {boolean}
|
|
300
302
|
*/
|
|
301
303
|
export function is_destroyed(target_block) {
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
304
|
+
/** @type {Block | null} */
|
|
305
|
+
var block = target_block;
|
|
306
|
+
|
|
307
|
+
while (block !== null) {
|
|
308
|
+
var flags = block.f;
|
|
309
|
+
|
|
310
|
+
if ((flags & DESTROYED) !== 0) {
|
|
311
|
+
return true;
|
|
312
|
+
}
|
|
313
|
+
if ((flags & ROOT_BLOCK) !== 0) {
|
|
314
|
+
return false;
|
|
315
|
+
}
|
|
316
|
+
block = block.p;
|
|
317
|
+
}
|
|
318
|
+
return true;
|
|
317
319
|
}
|
|
318
320
|
|
|
319
321
|
/**
|
|
@@ -321,34 +323,36 @@ export function is_destroyed(target_block) {
|
|
|
321
323
|
* @param {boolean} [remove_dom]
|
|
322
324
|
*/
|
|
323
325
|
export function destroy_block(block, remove_dom = true) {
|
|
324
|
-
|
|
326
|
+
block.f ^= DESTROYED;
|
|
325
327
|
|
|
326
|
-
|
|
328
|
+
var removed = false;
|
|
329
|
+
var f = block.f;
|
|
327
330
|
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
+
if ((remove_dom && (f & (BRANCH_BLOCK | ROOT_BLOCK)) !== 0) || (f & HEAD_BLOCK) !== 0) {
|
|
332
|
+
var s = block.s;
|
|
333
|
+
var node = s.start;
|
|
334
|
+
var end = s.end;
|
|
331
335
|
|
|
332
|
-
|
|
333
|
-
|
|
336
|
+
while (node !== null) {
|
|
337
|
+
var next = node === end ? null : next_sibling(node);
|
|
334
338
|
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
339
|
+
node.remove();
|
|
340
|
+
node = next;
|
|
341
|
+
}
|
|
338
342
|
|
|
339
|
-
|
|
340
|
-
|
|
343
|
+
removed = true;
|
|
344
|
+
}
|
|
341
345
|
|
|
342
|
-
|
|
346
|
+
destroy_block_children(block, remove_dom && !removed);
|
|
343
347
|
|
|
344
|
-
|
|
348
|
+
run_teardown(block);
|
|
345
349
|
|
|
346
|
-
|
|
350
|
+
var parent = block.p;
|
|
347
351
|
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
+
// If the parent doesn't have any children, then skip this work altogether
|
|
353
|
+
if (parent !== null && parent.first !== null) {
|
|
354
|
+
unlink_block(block);
|
|
355
|
+
}
|
|
352
356
|
|
|
353
|
-
|
|
357
|
+
block.fn = block.s = block.d = block.p = block.d = block.co = block.t = null;
|
|
354
358
|
}
|
|
@@ -1,9 +1,18 @@
|
|
|
1
|
+
/** @import { Block, Component } from '#client' */
|
|
2
|
+
|
|
1
3
|
import { branch, destroy_block, render } from './blocks.js';
|
|
2
4
|
import { COMPOSITE_BLOCK } from './constants.js';
|
|
3
5
|
import { active_block } from './runtime.js';
|
|
4
6
|
|
|
7
|
+
/**
|
|
8
|
+
* @param {() => (anchor: Node, props: Record<string, any>, block: Block | null) => void} get_component
|
|
9
|
+
* @param {Node} node
|
|
10
|
+
* @param {Record<string, any>} props
|
|
11
|
+
* @returns {void}
|
|
12
|
+
*/
|
|
5
13
|
export function composite(get_component, node, props) {
|
|
6
14
|
var anchor = node;
|
|
15
|
+
/** @type {Block | null} */
|
|
7
16
|
var b = null;
|
|
8
17
|
|
|
9
18
|
render(() => {
|