@ng-native/fabric 0.8.0 → 0.9.0

package/dist/css.d.ts

@@ -30,7 +30,7 @@ export interface Compound {
     readonly not?: readonly Compound[];
     /** `:host`: the node must be the host of the component whose sheet is being evaluated. */
     readonly host?: true;
-    /** `:host-context()`: the host, or one of its ancestors, must match one of these. */
+    /** `:host-context()`, once for each written: the host, or one of its ancestors, must match it. */
     readonly hostContext?: readonly Compound[];
     /**
      * `:is(<compound> *)`: every one of these must match some ancestor, the node itself excluded.
@@ -485,6 +485,18 @@ export interface StyleCache {
     context: object;
     /** The parent's `context` this was computed from. */
     parentContext: object;
+    /**
+     * Identity token standing for what an element under this node could match differently: minted
+     * when the node is styled for a change that can alter that, and kept when it is styled again
+     * for one that cannot, a custom property of its own or an inherited value from above. An
+     * element whose parent's is the one it was last styled under matches the rules it did, so it
+     * is styled from those it kept and they are not found again.
+     */
+    scope: object;
+    /** The parent's `scope` this was computed from. */
+    parentScope: object;
+    /** The rules the node matched, for a styling that finds its parent's `scope` as it was. */
+    rules?: readonly StyleRule[];
     /** The conditions version this was resolved under. */
     generation: number;
     style: Record<string, unknown>;
@@ -570,6 +582,12 @@ export interface StyleTarget {
     styleCache: StyleCache | null;
     /** Set when something that could change what this node matches has changed. */
     styleDirty: boolean;
+    /**
+     * Set when what this node matches, or a custom property it holds, may have changed, and nothing
+     * that an element under it is matched by: the node is matched and styled again, and those under
+     * it are styled from the rules they matched. Absent on a hand-built target.
+     */
+    ownDirty?: boolean;
     /**
      * Set when something beneath this node changed and a sheet uses `:has()`: the node is matched
      * again, and restyled only if the rules it matches came out different. Absent on a hand-built
@@ -733,6 +751,11 @@ export interface Subjects {
     readonly inside: Set<string>;
     /** A rule for anything anywhere: no class, no name, and no such box to be in. */
     any: boolean;
+    /**
+     * In what a class reaches: a rule is for the element that has the class, `.on`, which is then
+     * matched again itself. Unset where the rules are only for elements under it.
+     */
+    own?: boolean;
 }
 /** Whether an inline style sets a property children inherit. Allocates nothing: it runs per set. */
 export declare function setsInherited(style: unknown): boolean;
@@ -865,10 +888,13 @@ export declare class StyleResolver {
      */
     reads(prop: string): boolean;
     private noteReach;
+    /** Whether a class's reach names any element under the one that has it. */
+    reachesUnder(subjects: Subjects): boolean;
     /**
      * What classes coming to an element or going from it can restyle: `true` for it and all
-     * under it and after it, as any change to it does; the elements under it to restyle, by what
-     * rules are for; or null, where no rule names any of them and nothing is styled again.
+     * under it and after it, as any change to it does; the element itself, where `own`, and the
+     * elements under it to match again, by what rules are for; or null, where no rule names any
+     * of them and nothing is styled again.
      */
     reachOf(classes: Iterable<string>): true | Subjects | null;
     /** Whether one of the rules `subjects` stands for could be for a node. */
@@ -889,6 +915,15 @@ export declare class StyleResolver {
      * resolves at most once however many descendants ask for its inherited values.
      */
     resolve(node: StyleTarget, epoch: number): StyleCache;
+    /** A node styled now, from the rules found for it or from those it kept: see `matchesStand`. */
+    private styledAgain;
+    /**
+     * Whether what an element could match is as it was when it was last styled: nothing that can
+     * change it was marked on the element, its parent's `scope` is the one it was styled under,
+     * and no sheet that could match it has come since. It is being styled again all the same, for
+     * a change of its own that alters nothing under it, or for what it inherits.
+     */
+    private matchesStand;
     /**
      * A cache of a node just styled, with a context of its own. It keeps the rules the node
      * matched, for the node to be compared with, once a sheet has a use for them: see `tracksHas`.
@@ -925,6 +960,12 @@ export declare class StyleResolver {
      * without resolving it. What lets a commit step over a clean child in one comparison.
      */
     holds(node: StyleTarget, parentContext: object): boolean;
+    /**
+     * Whether a node was last styled under a box holding the one cache shared by every box with
+     * nothing to style. Such boxes hand the same `context` down, so the node cannot tell one from
+     * another by it: moved under another box, it has to be told.
+     */
+    styledUnderShared(node: StyleTarget): boolean;
     /**
      * Whether a previous result still stands: nothing about the node changed, nothing above it
      * moved, and the conditions have not.
@@ -945,6 +986,8 @@ export declare class StyleResolver {
      * token the device had seeded.
      */
     private unstyled;
+    /** The one cache of every node with nothing to style and nothing to hand down, given to one more. */
+    private sharedEmpty;
     /**
      * The rules worth trying against a node, in cascade order.
      *
@@ -1030,6 +1073,11 @@ export declare class StyleResolver {
      * A declaration with no token and no usable fallback is dropped rather than written as
      * undefined, which is what a browser does with a value it cannot resolve.
      */
+    /**
+     * What declarations that wait for a node's tokens come to on it, where no rule of the node's
+     * carries them: a keyframe's, which is settled against the element that plays it.
+     */
+    settleFor(node: StyleTarget, deferred: readonly DeferredDeclaration[], epoch: number): Record<string, unknown>;
     private applyDeferred;
     /** Note what the node being resolved takes an `inherit` from, and that its parent has an heir. */
     private heir;

package/dist/css.js

@@ -222,10 +222,11 @@ const attributeText = (actual, test) => test.insensitive ? String(actual).toLowe
  *
  * A prop set to `false` or `null` counts as absent, matching the web, where an attribute is either
  * present or not and a `disabled` binding that evaluates false removes it. Everything else is
- * compared as a string, so `[tabIndex="0"]` works against a numeric prop.
+ * compared as a string, so `[tabIndex="0"]` works against a numeric prop. `class` is no prop: it
+ * is the element's class list, as the attribute would spell it.
  */
 function matchesAttribute(node, test) {
-    const actual = node.props[test.name];
+    const actual = test.name === 'class' ? classAttribute(node) : node.props[test.name];
     if (actual === undefined || actual === null || actual === false)
         return false;
     if (test.operator === undefined)
@@ -235,6 +236,8 @@ function matchesAttribute(node, test) {
         return false;
     return matchesValue(attributeText(actual, test), test.operator, test.value);
 }
+/** The classes of a node in the order they were set, one space between each; none is absent. */
+const classAttribute = (node) => node.classes?.size ? [...node.classes].join(' ') : undefined;
 /** The operators an empty value can still match by: `=` and `|=`. */
 const EMPTY_MATCHES = new Set(['equal', 'dash-match']);
 /** Whether an attribute's value, as `attributeText` gives it, passes an operator's test. */
@@ -336,13 +339,15 @@ function matchesCompound(node, compound, sheet) {
         }
     }
     if (compound.hostContext) {
-        // The host itself counts, as it does on the web.
-        let found = false;
-        for (let n = node; n && !found; n = n.parent) {
-            found = compound.hostContext.some((option) => matchesCompound(n, option, sheet));
+        for (const context of compound.hostContext) {
+            // The host itself counts, as it does on the web.
+            let found = false;
+            for (let n = node; n && !found; n = n.parent) {
+                found = matchesCompound(n, context, sheet);
+            }
+            if (!found)
+                return false;
         }
-        if (!found)
-            return false;
     }
     return true;
 }
@@ -1094,6 +1099,13 @@ const DEFAULT_FONT_SIZE = 16;
 const EMPTY = {};
 /** Stands in for the parent of a root node, so the comparison needs no null case. */
 const ROOT_CONTEXT = {};
+/** The `scope` over a node with no parent. */
+const ROOT_SCOPE = {};
+/**
+ * The `scope` of the one cache every node with nothing to style shares. It is no one node's, so
+ * nothing styled under it, or holding it, is taken to match what it did.
+ */
+const SHARED_SCOPE = {};
 /** Shared empty token map, for the overwhelmingly common case of a subtree defining none. */
 const NO_TOKENS = {};
 /**
@@ -1147,17 +1159,29 @@ function classReach(sheet) {
     for (const rule of sheet.rules) {
         const every = new Set();
         collectClasses(rule, every, reads, named);
-        const inside = classesInside(rule);
+        const { own, inside } = classPlaces(rule);
         for (const name of every) {
-            if (!inside.has(name))
+            if (!own.has(name) && !inside.has(name))
                 classes.set(name, true);
-            else
+            if (own.has(name))
+                noteOwn(classes, name);
+            if (inside.has(name))
                 noteInside(classes, name, rule);
         }
     }
     reaches.set(sheet, (found = { classes, reads, named }));
     return found;
 }
+/** Note a rule as one for the element that has a class. */
+function noteOwn(found, name) {
+    const subjects = found.get(name);
+    if (subjects === true)
+        return;
+    if (subjects)
+        subjects.own = true;
+    else
+        found.set(name, { ...noSubjects(), own: true });
+}
 /** Note a rule as one that names a class as what its element is inside. */
 function noteInside(found, name, rule) {
     let subjects = found.get(name);
@@ -1181,6 +1205,8 @@ const noSubjects = () => ({
     inside: new Set(),
     any: false,
 });
+/** The reach of classes that rules are for the element of, and for nothing under it. */
+const OWN_ALONE = { ...noSubjects(), own: true };
 /** Add to `into` what `from` is for. */
 function addSubjects(into, from) {
     for (const name of from.classes)
@@ -1190,30 +1216,67 @@ function addSubjects(into, from) {
     for (const name of from.inside)
         into.inside.add(name);
     into.any ||= from.any;
+    if (from.own)
+        into.own = true;
 }
 /**
- * The classes a rule names only as what its element is inside: on a compound before the last,
- * with nothing but `>` and a space between there and the element, and nowhere else in the rule.
+ * Where a rule names each class it names, for the classes it names in no other place than these:
+ *
+ * - `own`, on the element the rule is for: its own classes, and those in `:is()` and `:not()` of
+ *   it, which are asked of that element;
+ * - `inside`, as what that element is inside: the classes of a compound before the last, with
+ *   nothing but `>` and a space between there and the element, and those of what `:is(.box *)`
+ *   and `:is(.box > *)` put over it.
+ *
+ * A class named anywhere else in the rule is in neither, whatever else names it: beside the
+ * element, inside `:has()` or `:host-context()`, or in `:not()` of a box the element is in.
  */
-function classesInside(rule) {
+function classPlaces(rule) {
+    const own = new Set();
     const inside = new Set();
     const elsewhere = new Set();
     const last = rule.compounds.length - 1;
     let under = true;
     for (let index = last; index >= 0; index--) {
         const compound = rule.compounds[index];
-        if (index < last) {
-            const joined = rule.combinators[index];
-            under &&= joined === 'child' || joined === 'descendant';
+        if (index === last) {
+            placeClasses(compound, own, inside, elsewhere);
+            continue;
         }
+        const joined = rule.combinators[index];
+        under &&= joined === 'child' || joined === 'descendant';
         const { classes, ...rest } = compound;
         collectClasses(rest, elsewhere, []);
         for (const name of classes)
-            (index < last && under ? inside : elsewhere).add(name);
+            (under ? inside : elsewhere).add(name);
     }
-    for (const name of elsewhere)
+    for (const name of elsewhere) {
+        own.delete(name);
         inside.delete(name);
-    return inside;
+    }
+    return { own, inside };
+}
+/**
+ * The classes of a compound asked of the element a rule is for, into `at`, and of the compounds
+ * it puts over that element, into `inside`. What any other part of it names goes `elsewhere`:
+ * a part read here by name is one this knows the reach of, and one added later is not.
+ */
+function placeClasses(compound, at, inside, elsewhere) {
+    const { classes, is, not, ancestors, parents, type: _t, id: _i, root: _r, pseudo: _p, ...rest } = compound;
+    for (const name of classes)
+        at.add(name);
+    for (const alternatives of is ?? []) {
+        for (const option of alternatives)
+            placeClasses(option, at, inside, elsewhere);
+    }
+    for (const excluded of not ?? [])
+        placeClasses(excluded, at, inside, elsewhere);
+    // What is over the element is over it whichever of these said so, and what is over that is too.
+    for (const above of [...(ancestors ?? []), ...(parents ?? [])]) {
+        placeClasses(above, inside, inside, elsewhere);
+    }
+    // `attributes` among them: a test of the `class` attribute is answered through `classTests`.
+    collectClasses(rest, elsewhere, []);
 }
 /** What a rule declares, which names no element. */
 const DECLARED = new Set(['declarations', 'important', 'tokens']);
@@ -1283,12 +1346,22 @@ function writtenFor(of, node) {
     }
     return false;
 }
+/**
+ * Whether a node has its answer for this commit already. Not one marked since it was given the
+ * one cache every box with nothing to style shares, see `unstyled`: another of them resolved in
+ * this commit has set that cache's epoch, and it is not this node's answer.
+ */
+function resolvedIn(epoch, cache, node) {
+    return (cache !== null && cache.epoch === epoch && (!node.styleDirty || cache.context !== ROOT_CONTEXT));
+}
 function emptyCacheFor(epoch, generation) {
     return {
         epoch,
         generation,
         context: ROOT_CONTEXT,
         parentContext: ROOT_CONTEXT,
+        scope: SHARED_SCOPE,
+        parentScope: SHARED_SCOPE,
         style: EMPTY,
         inherited: EMPTY,
         tokens: NO_TOKENS,
@@ -1584,20 +1657,38 @@ export class StyleResolver {
         else
             addSubjects(had ?? this.reach.set(name, noSubjects()).get(name), how);
     }
+    /** Whether a class's reach names any element under the one that has it. */
+    reachesUnder(subjects) {
+        return (subjects.any ||
+            subjects.classes.size > 0 ||
+            subjects.types.size > 0 ||
+            subjects.inside.size > 0);
+    }
     /**
      * What classes coming to an element or going from it can restyle: `true` for it and all
-     * under it and after it, as any change to it does; the elements under it to restyle, by what
-     * rules are for; or null, where no rule names any of them and nothing is styled again.
+     * under it and after it, as any change to it does; the element itself, where `own`, and the
+     * elements under it to match again, by what rules are for; or null, where no rule names any
+     * of them and nothing is styled again.
      */
     reachOf(classes) {
         let under = null;
+        let own = false;
         for (const name of classes) {
             const how = this.reach.get(name);
             if (how === true || this.classTests.some((test) => answers(test, name)))
                 return true;
-            if (how)
+            if (!how)
+                continue;
+            own ||= how.own === true;
+            // Made only for a class that reaches under: most are a rule's own, and this is asked for
+            // every element as it is given its classes.
+            if (this.reachesUnder(how))
                 addSubjects((under ??= noSubjects()), how);
         }
+        if (!under)
+            return own ? OWN_ALONE : null;
+        if (own)
+            under.own = true;
         return under;
     }
     /** Whether one of the rules `subjects` stands for could be for a node. */
@@ -1658,7 +1749,7 @@ export class StyleResolver {
         const cached = node.styleCache;
         // Within one commit a node is asked for its inherited map once per descendant, so this is the
         // hot path and it must not walk anywhere.
-        if (cached !== null && cached.epoch === epoch)
+        if (resolvedIn(epoch, cached, node))
             return cached;
         const parent = node.parent ? this.resolve(node.parent, epoch) : null;
         const parentContext = parent ? parent.context : ROOT_CONTEXT;
@@ -1676,33 +1767,66 @@ export class StyleResolver {
         this.justMatched = null;
         if (kept)
             return kept;
+        return this.styledAgain(node, epoch, parent, found);
+    }
+    /** A node styled now, from the rules found for it or from those it kept: see `matchesStand`. */
+    styledAgain(node, epoch, parent, found) {
+        const cached = node.styleCache;
+        const parentContext = parent ? parent.context : ROOT_CONTEXT;
         const parentInherited = parent ? parent.inherited : EMPTY;
+        const parentScope = parent ? parent.scope : ROOT_SCOPE;
+        const stands = this.matchesStand(cached, node, parentScope);
+        // The scope it keeps, or none: it then has a new one, which its new `context` serves as.
+        const scope = stands ? cached.scope : null;
         // A box the engine made around loose text is in no template, so no rule matches it.
         if (node.anonymous || this.hasNoRules(node)) {
-            return this.unstyled(node, epoch, parent, parentContext, parentInherited);
+            return this.unstyled(node, epoch, parent, parentInherited, scope, parentScope);
         }
         styleStats.nodesResolved++;
-        const matched = found ?? this.matchedBy(node);
+        // Its own rules are found again for a change of its own, and not for one above it.
+        const rules = stands && !node.ownDirty ? cached.rules : undefined;
+        const matched = found ?? rules ?? this.matchedBy(node);
         const parentTokens = parent ? parent.tokens : this.tokensOnRoot;
         this.heir(node, parent, matched);
         const styled = this.styled(node, matched, parentTokens, parentInherited);
-        const cache = this.cached(epoch, parentContext, styled, matched);
+        const cache = this.cached(epoch, parentContext, styled, matched, scope, parentScope);
         node.styleCache = cache;
         node.styleDirty = false;
+        node.ownDirty = false;
         node.hasDirty = false;
         node.stateDirty = false;
         return cache;
     }
+    /**
+     * Whether what an element could match is as it was when it was last styled: nothing that can
+     * change it was marked on the element, its parent's `scope` is the one it was styled under,
+     * and no sheet that could match it has come since. It is being styled again all the same, for
+     * a change of its own that alters nothing under it, or for what it inherits.
+     */
+    matchesStand(cached, node, parentScope) {
+        return (cached !== null &&
+            !node.styleDirty &&
+            !node.hasDirty &&
+            !node.stateDirty &&
+            cached.scope !== SHARED_SCOPE &&
+            parentScope !== SHARED_SCOPE &&
+            cached.parentScope === parentScope &&
+            this.current(cached, node));
+    }
     /**
      * A cache of a node just styled, with a context of its own. It keeps the rules the node
      * matched, for the node to be compared with, once a sheet has a use for them: see `tracksHas`.
      */
-    cached(epoch, parentContext, styled, matched) {
+    cached(epoch, parentContext, styled, matched, scope, parentScope) {
+        const context = {};
         const cache = {
             epoch,
             generation: this.generation,
-            context: {},
+            context,
             parentContext,
+            scope: scope ?? context,
+            parentScope,
+            rules: matched,
             ...styled,
         };
         if (this.tracksHas)
@@ -1725,6 +1849,7 @@ export class StyleResolver {
         const stands = (node.hasDirty === true || node.stateDirty === true) &&
             cached?.matched !== undefined &&
             !node.styleDirty &&
+            !node.ownDirty &&
             cached.parentContext === parentContext &&
             this.current(cached, node);
         if (!stands)
@@ -1764,6 +1889,7 @@ export class StyleResolver {
         const stands = node.stateDirty === true &&
             cached !== null &&
             !node.styleDirty &&
+            !node.ownDirty &&
             !node.hasDirty &&
             cached.parentContext === parentContext &&
             this.current(cached, node) &&
@@ -1781,6 +1907,14 @@ export class StyleResolver {
     holds(node, parentContext) {
         return this.reusable(node.styleCache, node, parentContext);
     }
+    /**
+     * Whether a node was last styled under a box holding the one cache shared by every box with
+     * nothing to style. Such boxes hand the same `context` down, so the node cannot tell one from
+     * another by it: moved under another box, it has to be told.
+     */
+    styledUnderShared(node) {
+        return node.styleCache !== null && node.styleCache.parentContext === ROOT_CONTEXT;
+    }
     /**
      * Whether a previous result still stands: nothing about the node changed, nothing above it
      * moved, and the conditions have not.
@@ -1788,6 +1922,7 @@ export class StyleResolver {
     reusable(cached, node, parentContext) {
         return (cached !== null &&
             !node.styleDirty &&
+            !node.ownDirty &&
             !node.hasDirty &&
             !node.stateDirty &&
             cached.parentContext === parentContext &&
@@ -1815,35 +1950,43 @@ export class StyleResolver {
      * carry: the shared object holds none, and the surface root answering with it dropped every
      * token the device had seeded.
      */
-    unstyled(node, epoch, parent, parentContext, parentInherited) {
+    unstyled(node, epoch, parent, parentInherited, scope, parentScope) {
         const tokens = parent ? parent.tokens : this.tokensOnRoot;
+        const parentContext = parent ? parent.context : ROOT_CONTEXT;
         // What inline style sets is inherited too, with no rule to read it against.
         const inline = node.inlineInherits ? inlineInherited(node.props['style']) : null;
-        if (!inline &&
+        const nothing = !inline &&
             parentInherited === EMPTY &&
             parentContext === ROOT_CONTEXT &&
-            tokens === NO_TOKENS &&
-            !node.styleDirty) {
-            if (this.emptyCache.epoch !== epoch || this.emptyCache.generation !== this.generation) {
-                this.emptyCache = emptyCacheFor(epoch, this.generation);
-            }
-            node.styleCache = this.emptyCache;
-            return this.emptyCache;
-        }
+            tokens === NO_TOKENS;
+        if (nothing && !node.styleDirty && !node.ownDirty)
+            return this.sharedEmpty(node, epoch);
+        const context = {};
         const passthrough = {
             epoch,
             generation: this.generation,
-            context: {},
+            context,
             parentContext,
+            scope: scope ?? context,
+            parentScope,
             style: unstyledStyle(parentInherited, inline),
             inherited: inline ? inheritFrom(parentInherited, inline) : parentInherited,
             tokens,
         };
         node.styleCache = passthrough;
         node.styleDirty = false;
+        node.ownDirty = false;
         node.stateDirty = false;
         return passthrough;
     }
+    /** The one cache of every node with nothing to style and nothing to hand down, given to one more. */
+    sharedEmpty(node, epoch) {
+        if (this.emptyCache.epoch !== epoch || this.emptyCache.generation !== this.generation) {
+            this.emptyCache = emptyCacheFor(epoch, this.generation);
+        }
+        node.styleCache = this.emptyCache;
+        return this.emptyCache;
+    }
     /**
      * The rules worth trying against a node, in cascade order.
      *
@@ -2150,6 +2293,17 @@ export class StyleResolver {
      * A declaration with no token and no usable fallback is dropped rather than written as
      * undefined, which is what a browser does with a value it cannot resolve.
      */
+    /**
+     * What declarations that wait for a node's tokens come to on it, where no rule of the node's
+     * carries them: a keyframe's, which is settled against the element that plays it.
+     */
+    settleFor(node, deferred, epoch) {
+        const { tokens } = this.resolve(node, epoch);
+        const above = node.parent ? this.resolve(node.parent, epoch).inherited : EMPTY;
+        const own = {};
+        this.applyDeferred(deferred, own, tokens, above, null);
+        return own;
+    }
     applyDeferred(deferred, own, tokens, parentInherited, important) {
         for (const declaration of settlingOrder(deferred)) {
             if (declaration.inherit) {