@velarscript/web 0.29.1 → 0.30.0

package/dist/analyzer.js

@@ -6,14 +6,15 @@ import { LOOK_ABSENT_MEDIA_SUBJECTS, LOOK_ARITHMETIC_HINT, LOOK_ANIMATION_DIRECT
 import { collectLookStaticValues, evaluateLookStaticExpression, isLookStaticValue, lookStaticCss } from "./look-static.js";
 import { keyframeCssValue } from "./keyframes.js";
 import { componentCallRefusal, componentRefHandleRefusal, componentSectionCountDiagnostics, watchedResourceSurfaceRefusal } from "./analysis/component-guidance.js";
-import { foldedLengthPercentage, isLookNumericType, lookAdditiveType } from "./analysis/look-values.js";
+import { foldedLengthPercentage, isLookNumericType, lookAdditiveType, teachLookLengthSlot, teachLookPercentageSlot } from "./analysis/look-values.js";
 import { collectPublicConfigNames, declaredPublicConfig, publicConfigDiagnostic } from "./analysis/public-config.js";
+import { collectDerivedReactiveNames, collectReactiveDerivations, collectReactiveStateNames, isRetiredAccessorName } from "./analysis/reactive-names.js";
 import { byCodeUnit } from "./stable-order.js";
 import { dynamicChildLeaves, JSX_SCALAR_TEXT_HINT } from "./emitter.js";
 import { isWebCustomElementName, WEB_ARIA_ATTRIBUTES, WEB_ARIA_ENUMERATED_VALUES, WEB_ARIA_ROLES, WEB_ARIA_ROLE_SYNONYMS, WEB_BOOL_PRESENCE_HTML_ATTRIBUTES, WEB_HTML_ELEMENTS, WEB_MISSPELLED_ATTRIBUTES, WEB_NATIVE_ELEMENTS, } from "./elements.js";
 import { isWebExpression, isWebJsx, isWebKeyframes, isWebLook, isWebStatement, isWebUnit, } from "./ast.js";
 import { isWebComponentConstructor, isWebComponentType, isWebComputedExport, isWebNodeType, normalizeWebComponentType, webComponentConstructor, webComponentHandle, webComponentIntrinsic, webComponentName, webNodeType, WEB_EVENT_TYPE_NAMES, WEB_OWNED_TYPE_NAMES, } from "./types.js";
-import { collectionMutators, collectReactiveWriters, finallySelfWrite, reactivePathOf, reactivePathRoot, statementBindsName, topLevelCall, watchSelfWrite, writerWritesPath, } from "./analysis/watch-cycles.js";
+import { collectionMutators, collectReactiveWriters, finallySelfWrite, reactivePathOf, reactivePathRoot, watchDerivedSourceWrite, statementBindsName, topLevelCall, watchSelfWrite, writerWritesPath, } from "./analysis/watch-cycles.js";
 // The canonical nominal identity of the Web RouteContext record. Route checks
 // probe with this identity so they succeed in modules that use route() without
 // importing RouteContext by name.
@@ -842,38 +843,6 @@ function lookConditionTerms(expression, negated, staticValues) {
     const atom = lookConditionAtom(expression, negated, staticValues);
     return [[atom ?? `rt:${negated ? "!" : ""}${lookRuntimeSignature(expression)}`]];
 }
-/**
- * Every name in a module or component body whose read is reactive but whose
- * binding is not itself a state/prop reference: a computed accessor, a resource
- * handle, an action handle. A Look literal that reads one of these freezes it
- * exactly as it freezes a state read (LOK-D1).
- *
- * The retired `computed(...)` accessor stays in the callee test even though it
- * is not a global any more (D71 replaced it with the declaration): analysis
- * after a migration diagnostic still has to stay coherent, so the name a
- * retired declaration binds is treated as derived exactly as it was before.
- */
-function collectDerivedReactiveNames(program) {
-    const names = new Set();
-    const record = (statements) => {
-        for (const statement of statements) {
-            if (statement.kind === "VariableDeclaration" && statement.pattern.kind === "NameBindingPattern"
-                && statement.initializer.kind === "CallExpression" && statement.initializer.callee.kind === "IdentifierExpression"
-                && isRetiredAccessorName(statement.initializer.callee.name)) {
-                names.add(statement.pattern.name);
-                continue;
-            }
-            if (!isWebStatement(statement))
-                continue;
-            if (statement.kind === "ExtensionStatement:web:resource" || statement.kind === "ExtensionStatement:web:action")
-                names.add(statement.name);
-            if (statement.kind === "ExtensionStatement:web:component")
-                record(statement.body);
-        }
-    };
-    record(program.body);
-    return names;
-}
 /**
  * Every `const name = look:` in the module, wherever it is written. A name
  * declared twice maps to null: two different Look literals under one name make
@@ -1140,10 +1109,6 @@ const RETIRED_ACCESSOR_TYPE = Object.freeze({
     requiredParameters: 1,
     result: retiredAccessorReaderType,
 });
-/** The function spelling of a derived value; `computed` the declaration is what it becomes. */
-function isRetiredAccessorName(name) {
-    return name === "computed";
-}
 /**
  * D90 R15(a): a watch subject names a place in the reactive graph — the name of
  * a `state` or a `computed`, or a read path out of one — and never computes a
@@ -1782,6 +1747,10 @@ export class VelarWebAnalyzer extends Analyzer {
     resourceBindingSpans = new Set();
     /** D114 W A2(b): this module's `action` and `async def` bodies by name. */
     reactiveWriters = new Map();
+    /** D114 P6 item 6 (ST-U2): each same-module `computed` and the names it reads on every evaluation. */
+    reactiveDerivations = new Map();
+    /** Each `state` this module declares, false where the name is declared twice. */
+    reactiveStateNames = new Map();
     /** Local names bound to an imported `export computed`, from the Web interface. */
     importedComputedNames;
     /** The resolved spans of those imports, so a local shadow of the name is not one. */
@@ -1828,6 +1797,8 @@ export class VelarWebAnalyzer extends Analyzer {
         this.keyedListRebuilds.length = 0;
         this.moduleFunctions = collectModuleFunctions(program);
         this.reactiveWriters = collectReactiveWriters(program);
+        this.reactiveDerivations = collectReactiveDerivations(program);
+        this.reactiveStateNames = collectReactiveStateNames(program);
         super.analyze(program);
         this.reportStaticJsxKeys();
         this.reportRetiredComputedFunction();
@@ -2543,6 +2514,11 @@ export class VelarWebAnalyzer extends Analyzer {
                 this.diagnostics.push(diagnostic("VEL5077", inFinally.message, inFinally.span));
                 return;
             }
+            const hop = watchDerivedSourceWrite(subject, statement, this.reactiveDerivations, this.reactiveStateNames, (name) => this.reactiveBindingKind(name) === "state");
+            if (hop !== null) {
+                this.diagnostics.push(diagnostic("VEL5077", hop, statement.span));
+                return;
+            }
             const call = topLevelCall(statement);
             if (call === null)
                 continue;
@@ -3394,6 +3370,7 @@ export class VelarWebAnalyzer extends Analyzer {
         // was refused.
         const parameters = LOOK_BUILDER_SIGNATURES.get(builder)?.parameters;
         const before = this.diagnostics.length;
+        let taught = false;
         for (const [index, argument] of expression.arguments.entries()) {
             const named = expression.argumentNames?.[index] ?? null;
             const position = named === null ? index : parameters?.indexOf(named) ?? -1;
@@ -3405,20 +3382,32 @@ export class VelarWebAnalyzer extends Analyzer {
             // charter names does not exist.
             const folded = evaluateLookStaticExpression(argument, this.lookStaticValues);
             const literal = folded?.kind === "number" ? folded.value : null;
-            if (range && literal !== null && (literal < range[1] || literal > range[2])) {
-                this.diagnostics.push(diagnostic("VEL5042", `${range[0]} must be from ${range[1]} through ${range[2]}; ${builder} received ${literal}`, argument.span));
+            // D114 P6 item 2 (LK-I3): a slot whose domain carries a unit states its
+            // bound in that unit and reads the value out of the unit's own number, so
+            // `hsl(200, 120%, 50%)` is refused in the same VEL5042 wording that
+            // refused `hsl(200, 120, 50)` before the slot became a `Percentage`.
+            const rangeUnit = range?.[3];
+            const ranged = rangeUnit === undefined ? literal
+                : folded?.kind === "unit" && folded.unit === rangeUnit ? folded.value : null;
+            if (range && ranged !== null && (ranged < range[1] || ranged > range[2])) {
+                const unit = rangeUnit ?? "";
+                this.diagnostics.push(diagnostic("VEL5042", `${range[0]} must be from ${range[1]}${unit} through ${range[2]}${unit}; ${builder} received ${ranged}${unit}`, argument.span));
             }
+            if (rangeUnit === "%" && literal !== null && teachLookPercentageSlot(this.diagnostics, range[0], argument, literal))
+                taught = true;
             const nonNegativeBlur = (builder === "blur" && position === 0) || (builder === "dropShadow" && position === 2);
             if (nonNegativeBlur && folded?.kind === "unit" && folded.value < 0) {
                 this.diagnostics.push(diagnostic("VEL5042", `${builder} blur cannot be negative`, argument.span));
             }
             // LOK-D3, builder half: a unitless number in a length position is dead
-            // CSS exactly as it is on a property. Zero is the one unitless length.
-            if (LOOK_LENGTH_BUILDERS.has(builder) && literal !== null && literal !== 0
+            // CSS exactly as it is on a property — except in a slot whose own type
+            // takes only a length or a percentage, where core's refusal is already
+            // the report and gains the remedy rather than a neighbour.
+            if (LOOK_LENGTH_BUILDERS.has(builder) && literal !== null
                 && !(builder === "border" && position !== 0) && !(builder === "shadow" && position === 5)
-                && !(builder === "dropShadow" && position === 3)) {
-                this.diagnostics.push(diagnostic("VEL5042", `${builder} composes CSS lengths, so ${literal} requires a unit; write a unit value such as ${literal}px or ${literal}rem (only 0 is unitless)`, argument.span));
-            }
+                && !(builder === "dropShadow" && position === 3)
+                && teachLookLengthSlot(this.diagnostics, builder, position, argument, literal))
+                taught = true;
             if (builder === "border" && position === 2 && argument.kind === "LiteralExpression" && typeof argument.value === "string"
                 && !LOOK_BORDER_STYLE_NAMES.has(argument.value)) {
                 this.diagnostics.push(diagnostic("VEL5042", `Border style '${argument.value}' is not a CSS border style; use one of ${[...LOOK_BORDER_STYLE_NAMES].join(", ")}`, argument.span));
@@ -3444,8 +3433,8 @@ export class VelarWebAnalyzer extends Analyzer {
         if (builder === "filters" && expression.arguments.length > 64) {
             this.diagnostics.push(diagnostic("VEL5042", "filters cannot compose more than 64 values", expression.span));
         }
-        // D114 0.29.0 LK-I2: a call its own argument check refused is recorded so a `keyframes:` stop can drop the consequence. The record is the call rather than the code, because a bad token name and a stop's one-declaration rule are two facts about one value (D103-2) and both are still reported.
-        if (this.diagnostics.length > before)
+        // D114 0.29.0 LK-I2: a call its own argument check refused is recorded so a `keyframes:` stop can drop the consequence. The record is the call rather than the code, because a bad token name and a stop's one-declaration rule are two facts about one value (D103-2) and both are still reported. A slot lesson written *into* core's refusal grows no diagnostic, so it says so itself.
+        if (taught || this.diagnostics.length > before)
             this.refusedBuilderCalls.push(expression.span);
     }
     /**