ripple 0.2.6 → 0.2.7
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/README.md +1 -1
- package/package.json +1 -1
- package/src/compiler/errors.js +20 -22
- package/src/compiler/phases/1-parse/index.js +14 -10
- package/src/compiler/phases/1-parse/style.js +27 -27
- package/src/compiler/phases/2-analyze/index.js +25 -25
- package/src/compiler/phases/2-analyze/prune.js +64 -27
- package/src/compiler/phases/3-transform/index.js +144 -109
- package/src/compiler/phases/3-transform/segments.js +25 -20
- package/src/compiler/phases/3-transform/stylesheet.js +28 -28
- package/src/compiler/scope.js +3 -3
- package/src/compiler/utils.js +7 -9
- package/src/constants.js +1 -2
- package/src/jsx-runtime.d.ts +59 -59
- package/src/jsx-runtime.js +13 -13
- package/src/runtime/array.js +15 -15
- package/src/runtime/internal/client/blocks.js +1 -1
- package/src/runtime/internal/client/constants.js +1 -1
- package/src/runtime/internal/client/events.js +2 -2
- package/src/runtime/internal/client/for.js +5 -5
- package/src/runtime/internal/client/operations.js +1 -1
- package/src/runtime/internal/client/runtime.js +28 -20
- package/src/runtime/internal/client/template.js +1 -1
- package/src/runtime/internal/client/try.js +2 -2
- package/src/utils/ast.js +9 -9
- package/src/utils/builders.js +66 -28
- package/tests/basic.test.ripple +292 -263
- package/tests/composite.test.ripple +125 -0
- package/tests/use.test.ripple +24 -22
- package/types/index.d.ts +1 -1
|
@@ -7,17 +7,17 @@ const BACKWARD = 1;
|
|
|
7
7
|
|
|
8
8
|
// CSS selector constants
|
|
9
9
|
const descendant_combinator = { name: ' ', type: 'Combinator' };
|
|
10
|
-
const nesting_selector = {
|
|
11
|
-
type: 'NestingSelector',
|
|
10
|
+
const nesting_selector = {
|
|
11
|
+
type: 'NestingSelector',
|
|
12
12
|
name: '&',
|
|
13
13
|
selectors: [],
|
|
14
|
-
metadata: { scoped: false }
|
|
14
|
+
metadata: { scoped: false },
|
|
15
15
|
};
|
|
16
16
|
const any_selector = {
|
|
17
17
|
type: 'RelativeSelector',
|
|
18
18
|
selectors: [{ type: 'TypeSelector', name: '*' }],
|
|
19
19
|
combinator: null,
|
|
20
|
-
metadata: { scoped: false }
|
|
20
|
+
metadata: { scoped: false },
|
|
21
21
|
};
|
|
22
22
|
|
|
23
23
|
// Whitelist for attribute selectors on specific elements
|
|
@@ -27,15 +27,48 @@ const whitelist_attribute_selector = new Map([
|
|
|
27
27
|
['form', ['novalidate']],
|
|
28
28
|
['iframe', ['allow', 'allowfullscreen', 'allowpaymentrequest', 'loading', 'referrerpolicy']],
|
|
29
29
|
['img', ['loading']],
|
|
30
|
-
[
|
|
30
|
+
[
|
|
31
|
+
'input',
|
|
32
|
+
[
|
|
33
|
+
'accept',
|
|
34
|
+
'autocomplete',
|
|
35
|
+
'capture',
|
|
36
|
+
'checked',
|
|
37
|
+
'disabled',
|
|
38
|
+
'max',
|
|
39
|
+
'maxlength',
|
|
40
|
+
'min',
|
|
41
|
+
'minlength',
|
|
42
|
+
'multiple',
|
|
43
|
+
'pattern',
|
|
44
|
+
'placeholder',
|
|
45
|
+
'readonly',
|
|
46
|
+
'required',
|
|
47
|
+
'size',
|
|
48
|
+
'step',
|
|
49
|
+
],
|
|
50
|
+
],
|
|
31
51
|
['object', ['typemustmatch']],
|
|
32
52
|
['ol', ['reversed', 'start', 'type']],
|
|
33
53
|
['optgroup', ['disabled']],
|
|
34
54
|
['option', ['disabled', 'selected']],
|
|
35
55
|
['script', ['async', 'defer', 'nomodule', 'type']],
|
|
36
56
|
['select', ['disabled', 'multiple', 'required', 'size']],
|
|
37
|
-
[
|
|
38
|
-
|
|
57
|
+
[
|
|
58
|
+
'textarea',
|
|
59
|
+
[
|
|
60
|
+
'autocomplete',
|
|
61
|
+
'disabled',
|
|
62
|
+
'maxlength',
|
|
63
|
+
'minlength',
|
|
64
|
+
'placeholder',
|
|
65
|
+
'readonly',
|
|
66
|
+
'required',
|
|
67
|
+
'rows',
|
|
68
|
+
'wrap',
|
|
69
|
+
],
|
|
70
|
+
],
|
|
71
|
+
['video', ['autoplay', 'controls', 'loop', 'muted', 'playsinline']],
|
|
39
72
|
]);
|
|
40
73
|
|
|
41
74
|
function get_relative_selectors(node) {
|
|
@@ -50,7 +83,7 @@ function get_relative_selectors(node) {
|
|
|
50
83
|
// @ts-ignore
|
|
51
84
|
NestingSelector() {
|
|
52
85
|
has_explicit_nesting_selector = true;
|
|
53
|
-
}
|
|
86
|
+
},
|
|
54
87
|
});
|
|
55
88
|
|
|
56
89
|
// if we found one we can break from the others
|
|
@@ -61,7 +94,7 @@ function get_relative_selectors(node) {
|
|
|
61
94
|
if (selectors[0].combinator === null) {
|
|
62
95
|
selectors[0] = {
|
|
63
96
|
...selectors[0],
|
|
64
|
-
combinator: descendant_combinator
|
|
97
|
+
combinator: descendant_combinator,
|
|
65
98
|
};
|
|
66
99
|
}
|
|
67
100
|
|
|
@@ -92,7 +125,9 @@ function truncate(node) {
|
|
|
92
125
|
|
|
93
126
|
return {
|
|
94
127
|
...child,
|
|
95
|
-
selectors: child.selectors.filter(
|
|
128
|
+
selectors: child.selectors.filter(
|
|
129
|
+
(s) => s.type === 'PseudoClassSelector' && s.name === 'has',
|
|
130
|
+
),
|
|
96
131
|
};
|
|
97
132
|
});
|
|
98
133
|
}
|
|
@@ -184,7 +219,7 @@ function get_descendant_elements(node, adjacent_only) {
|
|
|
184
219
|
function get_possible_element_siblings(node, direction, adjacent_only) {
|
|
185
220
|
const siblings = new Map();
|
|
186
221
|
const parent = get_element_parent(node);
|
|
187
|
-
|
|
222
|
+
|
|
188
223
|
if (!parent) {
|
|
189
224
|
return siblings;
|
|
190
225
|
}
|
|
@@ -210,7 +245,7 @@ function get_possible_element_siblings(node, direction, adjacent_only) {
|
|
|
210
245
|
// Collect siblings
|
|
211
246
|
for (let i = start; i !== end; i += step) {
|
|
212
247
|
const sibling = container[i];
|
|
213
|
-
|
|
248
|
+
|
|
214
249
|
if (sibling.type === 'Element' || sibling.type === 'Component') {
|
|
215
250
|
siblings.set(sibling, true);
|
|
216
251
|
if (adjacent_only) break; // Only immediate sibling for '+' combinator
|
|
@@ -326,7 +361,7 @@ function is_global(selector, rule) {
|
|
|
326
361
|
|
|
327
362
|
const has_global_selectors = selector_list?.children.some((complex_selector) => {
|
|
328
363
|
return complex_selector.children.every((relative_selector) =>
|
|
329
|
-
is_global(relative_selector, owner)
|
|
364
|
+
is_global(relative_selector, owner),
|
|
330
365
|
);
|
|
331
366
|
});
|
|
332
367
|
|
|
@@ -395,7 +430,7 @@ function is_outer_global(relative_selector) {
|
|
|
395
430
|
// :global(button).x means that the selector is still scoped because of the .x
|
|
396
431
|
relative_selector.selectors.every(
|
|
397
432
|
(selector) =>
|
|
398
|
-
selector.type === 'PseudoClassSelector' || selector.type === 'PseudoElementSelector'
|
|
433
|
+
selector.type === 'PseudoClassSelector' || selector.type === 'PseudoElementSelector',
|
|
399
434
|
))
|
|
400
435
|
);
|
|
401
436
|
}
|
|
@@ -427,9 +462,9 @@ function relative_selector_might_apply_to_node(relative_selector, rule, element,
|
|
|
427
462
|
r.selectors.some(
|
|
428
463
|
(s) =>
|
|
429
464
|
s.type === 'PseudoClassSelector' &&
|
|
430
|
-
(s.name === 'root' || (s.name === 'global' && s.args))
|
|
431
|
-
)
|
|
432
|
-
)
|
|
465
|
+
(s.name === 'root' || (s.name === 'global' && s.args)),
|
|
466
|
+
),
|
|
467
|
+
),
|
|
433
468
|
);
|
|
434
469
|
|
|
435
470
|
// :has(...) is special in that it means "look downwards in the CSS tree". Since our matching algorithm goes
|
|
@@ -452,7 +487,7 @@ function relative_selector_might_apply_to_node(relative_selector, rule, element,
|
|
|
452
487
|
if (include_self) {
|
|
453
488
|
const selector_including_self = [
|
|
454
489
|
first.combinator ? { ...first, combinator: null } : first,
|
|
455
|
-
...rest
|
|
490
|
+
...rest,
|
|
456
491
|
];
|
|
457
492
|
if (apply_selector(selector_including_self, rule, element, FORWARD)) {
|
|
458
493
|
complex_selector.metadata.used = true;
|
|
@@ -463,7 +498,7 @@ function relative_selector_might_apply_to_node(relative_selector, rule, element,
|
|
|
463
498
|
const selector_excluding_self = [
|
|
464
499
|
any_selector,
|
|
465
500
|
first.combinator ? first : { ...first, combinator: descendant_combinator },
|
|
466
|
-
...rest
|
|
501
|
+
...rest,
|
|
467
502
|
];
|
|
468
503
|
if (apply_selector(selector_excluding_self, rule, element, FORWARD)) {
|
|
469
504
|
complex_selector.metadata.used = true;
|
|
@@ -508,7 +543,7 @@ function relative_selector_might_apply_to_node(relative_selector, rule, element,
|
|
|
508
543
|
ComplexSelector(node, context) {
|
|
509
544
|
node.metadata.used = true;
|
|
510
545
|
context.next();
|
|
511
|
-
}
|
|
546
|
+
},
|
|
512
547
|
});
|
|
513
548
|
const relative = truncate(complex_selector);
|
|
514
549
|
|
|
@@ -577,7 +612,7 @@ function relative_selector_might_apply_to_node(relative_selector, rule, element,
|
|
|
577
612
|
selector.name,
|
|
578
613
|
selector.value && unquote(selector.value),
|
|
579
614
|
selector.matcher,
|
|
580
|
-
selector.flags?.includes('i') ?? false
|
|
615
|
+
selector.flags?.includes('i') ?? false,
|
|
581
616
|
)
|
|
582
617
|
) {
|
|
583
618
|
return false;
|
|
@@ -643,8 +678,10 @@ function relative_selector_might_apply_to_node(relative_selector, rule, element,
|
|
|
643
678
|
|
|
644
679
|
// Utility functions for parsing CSS values
|
|
645
680
|
function unquote(str) {
|
|
646
|
-
if (
|
|
647
|
-
(str[0] === "'
|
|
681
|
+
if (
|
|
682
|
+
(str[0] === '"' && str[str.length - 1] === '"') ||
|
|
683
|
+
(str[0] === "'" && str[str.length - 1] === "'")
|
|
684
|
+
) {
|
|
648
685
|
return str.slice(1, -1);
|
|
649
686
|
}
|
|
650
687
|
return str;
|
|
@@ -653,12 +690,12 @@ function unquote(str) {
|
|
|
653
690
|
function get_parent_rules(rule) {
|
|
654
691
|
const rules = [rule];
|
|
655
692
|
let current = rule;
|
|
656
|
-
|
|
693
|
+
|
|
657
694
|
while (current.metadata.parent_rule) {
|
|
658
695
|
current = current.metadata.parent_rule;
|
|
659
696
|
rules.unshift(current);
|
|
660
697
|
}
|
|
661
|
-
|
|
698
|
+
|
|
662
699
|
return rules;
|
|
663
700
|
}
|
|
664
701
|
|
|
@@ -681,7 +718,7 @@ export function prune_css(css, element) {
|
|
|
681
718
|
selectors,
|
|
682
719
|
/** @type {Compiler.AST.CSS.Rule} */ (node.metadata.rule),
|
|
683
720
|
element,
|
|
684
|
-
BACKWARD
|
|
721
|
+
BACKWARD,
|
|
685
722
|
)
|
|
686
723
|
) {
|
|
687
724
|
node.metadata.used = true;
|
|
@@ -690,6 +727,6 @@ export function prune_css(css, element) {
|
|
|
690
727
|
// note: we don't call context.next() here, we only recurse into
|
|
691
728
|
// selectors that don't belong to rules (i.e. inside `:is(...)` etc)
|
|
692
729
|
// when we encounter them below
|
|
693
|
-
}
|
|
730
|
+
},
|
|
694
731
|
});
|
|
695
732
|
}
|