modality-ts 0.0.4 → 0.0.6

package/dist/extraction/index.js

@@ -2,6 +2,9 @@ import * as ts from "typescript";
 import { effectReads, effectWrites } from "modality-ts/kernel";
 export * from "./pipeline/index.js";
 export * from "./spi/index.js";
+function emptyContextBindings() {
+    return { vars: [], setters: new Map(), hookReturns: new Map() };
+}
 function setterBindingFromDecl(decl) {
     const localMatch = /^local:([^.]+)\.(.+)$/.exec(decl.id);
     const atomMatch = /^atom:(.+)$/.exec(decl.id);
@@ -12,6 +15,183 @@ function setterBindingFromDecl(decl) {
         domain: decl.domain
     };
 }
+function discoverContextBindings(source, fileName, route, typeAliases) {
+    const bindings = emptyContextBindings();
+    const providerValues = new Map();
+    const visitProvider = (node, componentName) => {
+        const component = componentNameFor(node) ?? componentName;
+        const localSetters = new Map();
+        if ((ts.isFunctionDeclaration(node) || ts.isFunctionExpression(node) || ts.isArrowFunction(node)) && component && node.body && ts.isBlock(node.body)) {
+            for (const statement of node.body.statements) {
+                if (!ts.isVariableStatement(statement))
+                    continue;
+                for (const declaration of statement.declarationList.declarations) {
+                    if (!ts.isArrayBindingPattern(declaration.name) || !declaration.initializer || !isUseStateCall(declaration.initializer))
+                        continue;
+                    const stateName = declaration.name.elements[0];
+                    const setterName = declaration.name.elements[1];
+                    if (!setterName || !ts.isBindingElement(stateName) || !ts.isIdentifier(stateName.name) || !ts.isBindingElement(setterName) || !ts.isIdentifier(setterName.name))
+                        continue;
+                    const domain = inferUseStateDomain(declaration.initializer, typeAliases);
+                    const varId = `local:${component}.${stateName.name.text}`;
+                    const setter = { varId, component, stateName: stateName.name.text, domain };
+                    localSetters.set(setterName.name.text, setter);
+                }
+            }
+            for (const statement of node.body.statements) {
+                if (!ts.isVariableStatement(statement))
+                    continue;
+                for (const declaration of statement.declarationList.declarations) {
+                    if (!ts.isIdentifier(declaration.name) || !declaration.initializer)
+                        continue;
+                    const setter = setterAliasBinding(declaration.initializer, localSetters);
+                    if (setter)
+                        localSetters.set(declaration.name.text, setter);
+                }
+            }
+        }
+        if (component && localSetters.size > 0 && node.getText(source).includes(".Provider")) {
+            const fields = providerValueFields(node, localSetters);
+            if (fields.size > 0) {
+                providerValues.set(component, fields);
+                for (const setter of fields.values())
+                    bindings.setters.set(setter.stateName, setter);
+            }
+        }
+        ts.forEachChild(node, (child) => visitProvider(child, component));
+    };
+    visitProvider(source, undefined);
+    const providerFieldMaps = [...providerValues.values()];
+    const visitHook = (node) => {
+        const name = customHookDeclarationName(node);
+        if (name && (ts.isFunctionDeclaration(node) || (ts.isVariableDeclaration(node) && node.initializer && isExtractableHandler(node.initializer)))) {
+            const hook = ts.isFunctionDeclaration(node) ? node : node.initializer;
+            if (hookUsesContext(hook) && providerFieldMaps.length > 0) {
+                const merged = new Map();
+                for (const map of providerFieldMaps)
+                    for (const [field, setter] of map)
+                        merged.set(field, setter);
+                bindings.hookReturns.set(name, merged);
+            }
+        }
+        ts.forEachChild(node, visitHook);
+    };
+    visitHook(source);
+    return bindings;
+}
+function providerValueFields(node, localSetters) {
+    const fields = new Map();
+    const visit = (candidate) => {
+        if (ts.isJsxAttribute(candidate) && ts.isIdentifier(candidate.name) && candidate.name.text === "value" && candidate.initializer && ts.isJsxExpression(candidate.initializer)) {
+            const value = providerValueObject(node, candidate.initializer.expression);
+            if (value) {
+                for (const property of value.properties) {
+                    if (!ts.isShorthandPropertyAssignment(property) && !ts.isPropertyAssignment(property))
+                        continue;
+                    const name = ts.isShorthandPropertyAssignment(property) ? property.name.text : propertyName(property.name);
+                    const expr = ts.isShorthandPropertyAssignment(property) ? property.name : property.initializer;
+                    if (!name || !ts.isIdentifier(expr))
+                        continue;
+                    const setter = localSetters.get(expr.text);
+                    if (setter)
+                        fields.set(name, setter);
+                }
+            }
+        }
+        ts.forEachChild(candidate, visit);
+    };
+    visit(node);
+    return fields;
+}
+function setterAliasBinding(expression, localSetters) {
+    const callback = useCallbackFunction(expression);
+    if (!callback || callback.parameters.length !== 1 || !ts.isIdentifier(callback.parameters[0].name))
+        return undefined;
+    const parameter = callback.parameters[0].name.text;
+    const call = firstCallInFunction(callback);
+    if (!call || !ts.isIdentifier(call.expression) || call.arguments.length !== 1 || !ts.isIdentifier(call.arguments[0]) || call.arguments[0].text !== parameter)
+        return undefined;
+    return localSetters.get(call.expression.text);
+}
+function useCallbackFunction(expression) {
+    if (!ts.isCallExpression(expression) || !ts.isIdentifier(expression.expression) || expression.expression.text !== "useCallback")
+        return undefined;
+    const first = expression.arguments[0];
+    return first && isExtractableHandler(first) ? first : undefined;
+}
+function firstCallInFunction(fn) {
+    if (!ts.isBlock(fn.body))
+        return ts.isCallExpression(fn.body) ? fn.body : undefined;
+    for (const statement of fn.body.statements) {
+        if (ts.isExpressionStatement(statement) && ts.isCallExpression(statement.expression))
+            return statement.expression;
+    }
+    return undefined;
+}
+function providerValueObject(scope, expression) {
+    if (!expression)
+        return undefined;
+    if (ts.isObjectLiteralExpression(expression))
+        return expression;
+    if (!ts.isIdentifier(expression))
+        return undefined;
+    const declaration = variableDeclarationIn(scope, expression.text);
+    if (!declaration?.initializer || !ts.isCallExpression(declaration.initializer))
+        return undefined;
+    if (!ts.isIdentifier(declaration.initializer.expression) || declaration.initializer.expression.text !== "useMemo")
+        return undefined;
+    const callback = declaration.initializer.arguments[0];
+    if (!callback || !isExtractableHandler(callback))
+        return undefined;
+    if (ts.isObjectLiteralExpression(callback.body))
+        return callback.body;
+    if (ts.isParenthesizedExpression(callback.body) && ts.isObjectLiteralExpression(callback.body.expression))
+        return callback.body.expression;
+    return undefined;
+}
+function variableDeclarationIn(scope, name) {
+    let found;
+    const visit = (node) => {
+        if (found)
+            return;
+        if (ts.isVariableDeclaration(node) && ts.isIdentifier(node.name) && node.name.text === name) {
+            found = node;
+            return;
+        }
+        ts.forEachChild(node, visit);
+    };
+    visit(scope);
+    return found;
+}
+function hookUsesContext(hook) {
+    let found = false;
+    const visit = (node) => {
+        if (found)
+            return;
+        if (ts.isCallExpression(node) && ts.isIdentifier(node.expression) && node.expression.text === "useContext") {
+            found = true;
+            return;
+        }
+        ts.forEachChild(node, visit);
+    };
+    visit(hook);
+    return found;
+}
+function bindContextHookObjectDeclaration(node, contextBindings, setters) {
+    if (!ts.isVariableDeclaration(node) || !ts.isObjectBindingPattern(node.name) || !node.initializer || !ts.isCallExpression(node.initializer) || !ts.isIdentifier(node.initializer.expression))
+        return;
+    const hook = contextBindings.hookReturns.get(node.initializer.expression.text);
+    if (!hook)
+        return;
+    for (const element of node.name.elements) {
+        if (!ts.isIdentifier(element.name))
+            continue;
+        const property = element.propertyName && ts.isIdentifier(element.propertyName) ? element.propertyName.text : element.name.text;
+        const setter = hook.get(property);
+        if (setter)
+            setters.set(element.name.text, setter);
+    }
+}
 export function inferDomainFromTypeNode(node, typeAliases = new Map()) {
     if (!node)
         return { kind: "tokens", count: 1 };
@@ -48,12 +228,15 @@ export function extractUseStateSkeleton(sourceText, options = {}) {
     const transitions = [];
     const warnings = [];
     const route = options.route ?? "/";
+    const routePatterns = options.routePatterns ?? [];
     const effectApis = new Set(options.effectApis ?? []);
     const sourcePlugins = options.sourcePlugins ?? [];
     const routerPlugin = options.routerPlugin;
     const setters = new Map();
+    const contextBindings = discoverContextBindings(source, fileName, route, typeAliases);
     const globalTaints = new Set();
     const components = componentDeclarations(source);
+    const providerComponents = providerComponentNames(source);
     const customHooks = customHookDeclarations(source);
     const statefulListComponents = detectStatefulListComponents(source, components);
     const reportedStatefulListComponents = new Set();
@@ -66,6 +249,12 @@ export function extractUseStateSkeleton(sourceText, options = {}) {
             setters.set(channel.symbolName, setterBindingFromDecl(decl));
         }
     }
+    for (const decl of contextBindings.vars) {
+        if (!vars.some((candidate) => candidate.id === decl.id))
+            vars.push(decl);
+    }
+    for (const [symbolName, setter] of contextBindings.setters)
+        setters.set(symbolName, setter);
     const handlers = new Map();
     const visit = (node, componentName) => {
         if (!componentName && isCustomHookDeclaration(node))
@@ -76,16 +265,20 @@ export function extractUseStateSkeleton(sourceText, options = {}) {
             if (handler)
                 handlers.set(node.name.text, handler);
         }
+        if (ts.isFunctionDeclaration(node) && node.name && isExtractableHandler(node)) {
+            handlers.set(node.name.text, node);
+        }
         if (ts.isVariableDeclaration(node) && node.initializer && isUseReducerCall(node.initializer)) {
             warnings.push({ message: `Unsupported useReducer ${nextComponent ?? "Anonymous"}.useReducer`, ...lineAndColumn(source, node) });
         }
+        bindContextHookObjectDeclaration(node, contextBindings, setters);
         if (ts.isVariableDeclaration(node) && nextComponent && inlineCustomHookState(source, fileName, node, customHooks, vars, setters, nextComponent, route)) {
             return;
         }
         const customHook = calledCustomHook(node, new Set(customHooks.keys()));
         if (customHook && nextComponent) {
             const key = `${nextComponent}.${customHook}`;
-            if (!reportedCustomHooks.has(key)) {
+            if (!contextBindings.hookReturns.has(customHook) && !reportedCustomHooks.has(key)) {
                 reportedCustomHooks.add(key);
                 warnings.push({ message: `Unextractable custom hook ${key}`, ...lineAndColumn(source, node) });
             }
@@ -110,7 +303,7 @@ export function extractUseStateSkeleton(sourceText, options = {}) {
                         id: varId,
                         domain,
                         origin: { file: fileName, ...lineAndColumn(source, node) },
-                        scope: { kind: "route-local", route },
+                        scope: providerComponents.has(component) ? { kind: "global" } : { kind: "route-local", route },
                         initial: initialValueForUseState(node.initializer, domain)
                     });
                 }
@@ -123,6 +316,9 @@ export function extractUseStateSkeleton(sourceText, options = {}) {
                 warnings.push({ message: "Unsupported useState binding pattern", ...lineAndColumn(source, node) });
             }
         }
+        const link = linkNavigationTransition(source, fileName, node, nextComponent ?? "Anonymous", routePatterns);
+        if (link)
+            transitions.push(link);
         const refTaint = refSetterTaint(node, setters);
         if (refTaint) {
             const key = `Global taint ${refTaint.varId}`;
@@ -170,7 +366,7 @@ export function extractUseStateSkeleton(sourceText, options = {}) {
                 renderGuardFor(node, setters, warnings, source, nextComponent ?? "Anonymous", guardLocals),
                 disabledGuardFor(node, setters, warnings, source, nextComponent ?? "Anonymous", guardLocals)
             ]);
-            const extracted = transitionsFromJsxAttribute(source, fileName, node, setters, handlers, nextComponent ?? "Anonymous", effectApis, options.asyncOutcomes ?? {}, sourcePlugins, routerPlugin, guard, warnings);
+            const extracted = transitionsFromJsxAttribute(source, fileName, node, setters, handlers, nextComponent ?? "Anonymous", effectApis, options.asyncOutcomes ?? {}, sourcePlugins, routerPlugin, guard, routePatterns, contextBindings, warnings);
             transitions.push(...extracted);
             if (extracted.length === 0 && !forwardsComponentProp(node, handlers, components.get(nextComponent ?? "")) && !handlerSchedulesModeledTimer(node, handlers, setters)) {
                 warnings.push({ message: `Unextractable handler ${nextComponent ?? "Anonymous"}.${node.name.text}`, ...lineAndColumn(source, node) });
@@ -179,7 +375,7 @@ export function extractUseStateSkeleton(sourceText, options = {}) {
         if (ts.isCallExpression(node) && isUseEffectCall(node)) {
             const extracted = transitionsFromUseEffect(source, fileName, node, setters, nextComponent ?? "Anonymous");
             transitions.push(...extracted);
-            if (extracted.length === 0 && useEffectWritesModeledState(node, setters)) {
+            if (extracted.length === 0 && useEffectWritesModeledState(node, setters) && !providerComponents.has(nextComponent ?? "")) {
                 warnings.push({ message: `Unextractable effect ${nextComponent ?? "Anonymous"}.useEffect`, ...lineAndColumn(source, node) });
             }
         }
@@ -394,7 +590,7 @@ function isUseEffectCall(node) {
     return ts.isIdentifier(node.expression) && node.expression.text === "useEffect";
 }
 function isExtractableHandler(node) {
-    return ts.isArrowFunction(node) || ts.isFunctionExpression(node);
+    return ts.isArrowFunction(node) || ts.isFunctionExpression(node) || (ts.isFunctionDeclaration(node) && Boolean(node.body));
 }
 function extractableHandlerInitializer(node) {
     if (isExtractableHandler(node))
@@ -447,7 +643,7 @@ function transitionsFromTimerCall(source, fileName, node, setters, component) {
     if (!summaries || summaries.length === 0)
         return [];
     const effects = summaries.map((summary) => summary.effect);
-    const writes = uniqueStrings(effects.map((effect) => effect.var));
+    const writes = uniqueStrings(effects.flatMap(effectWriteVars));
     const suffix = writes.map((id) => stateNameForVar(id, setters) ?? safeId(id)).join("_") || "callback";
     return [{
             id: `${component}.${name}.${suffix}`,
@@ -504,7 +700,7 @@ function handlerSchedulesModeledTimer(attribute, handlers, setters) {
     visit(handler.body);
     return found;
 }
-function transitionsFromJsxAttribute(source, fileName, node, setters, handlers, component, effectApis, asyncOutcomes, sourcePlugins, routerPlugin, disabledGuard, warnings) {
+function transitionsFromJsxAttribute(source, fileName, node, setters, handlers, component, effectApis, asyncOutcomes, sourcePlugins, routerPlugin, disabledGuard, routePatterns, contextBindings, warnings) {
     if (!node.initializer)
         return [];
     const expression = ts.isJsxExpression(node.initializer) ? node.initializer.expression : undefined;
@@ -515,7 +711,7 @@ function transitionsFromJsxAttribute(source, fileName, node, setters, handlers,
         return [];
     const attr = node.name.text;
     const locator = locatorForEventAttribute(node);
-    return tagStableIdKey(transitionsFromResolvedHandler(source, fileName, node, attr, handler, setters, handlers, component, effectApis, asyncOutcomes, sourcePlugins, routerPlugin, disabledGuard, locator, warnings), handler);
+    return tagStableIdKey(transitionsFromResolvedHandler(source, fileName, node, attr, handler, setters, handlers, component, effectApis, asyncOutcomes, sourcePlugins, routerPlugin, disabledGuard, locator, routePatterns, contextBindings, warnings), handler);
 }
 function transitionsFromComponentPropAttribute(source, fileName, node, setters, handlers, components, component, effectApis, asyncOutcomes, sourcePlugins, routerPlugin, warnings) {
     if (!node.initializer || !ts.isIdentifier(node.name))
@@ -526,7 +722,7 @@ function transitionsFromComponentPropAttribute(source, fileName, node, setters,
     const callee = components.get(tag);
     if (!callee)
         return [];
-    const trigger = componentPropTrigger(source, callee, node.name.text, setters, warnings);
+    const trigger = componentPropTrigger(source, callee, node.name.text, setters, warnings) ?? transparentComponentPropTrigger(callee, node.name.text);
     if (!trigger)
         return [];
     const expression = ts.isJsxExpression(node.initializer) ? node.initializer.expression : undefined;
@@ -538,7 +734,7 @@ function transitionsFromComponentPropAttribute(source, fileName, node, setters,
         renderGuardFor(node, setters, warnings, source, component, guardLocals),
         disabledGuardFor(node, setters, warnings, source, component, guardLocals)
     ]);
-    return tagStableIdKey(transitionsFromResolvedHandler(source, fileName, node, trigger.attr, handler, setters, handlers, component, effectApis, asyncOutcomes, sourcePlugins, routerPlugin, combineParsedGuards([trigger.guard, callerGuard]), trigger.locator, warnings), handler);
+    return tagStableIdKey(transitionsFromResolvedHandler(source, fileName, node, trigger.attr, handler, setters, handlers, component, effectApis, asyncOutcomes, sourcePlugins, routerPlugin, combineParsedGuards([trigger.guard, callerGuard]), trigger.locator, [], emptyContextBindings(), warnings), handler);
 }
 function transitionsFromBoundedListAttribute(source, fileName, node, setters, handlers, component, listInfo) {
     if (!node.initializer || !ts.isIdentifier(node.name))
@@ -598,8 +794,8 @@ function normalizedAstKey(node) {
         .replace(/\/\/.*$/gm, "")
         .replace(/\s+/g, "");
 }
-function transitionsFromResolvedHandler(source, fileName, node, attr, handler, setters, handlers, component, effectApis, asyncOutcomes, sourcePlugins, routerPlugin, disabledGuard, locator, warnings) {
-    const asyncTransitions = transitionsFromAsyncHandler(source, fileName, attr, handler, setters, component, effectApis, asyncOutcomes, locator, warnings);
+function transitionsFromResolvedHandler(source, fileName, node, attr, handler, setters, handlers, component, effectApis, asyncOutcomes, sourcePlugins, routerPlugin, disabledGuard, locator, routePatterns, contextBindings, warnings) {
+    const asyncTransitions = transitionsFromAsyncHandler(source, fileName, attr, handler, setters, component, effectApis, asyncOutcomes, locator, routePatterns, warnings);
     if (asyncTransitions.length > 0)
         return applyParsedGuard(asyncTransitions, disabledGuard);
     const conditionalTransition = conditionalTransitionFromHandler(source, fileName, node, attr, handler, setters, component, locator);
@@ -611,13 +807,13 @@ function transitionsFromResolvedHandler(source, fileName, node, attr, handler, s
     const sequentialTransition = sequentialTransitionFromHandler(source, fileName, node, attr, handler, setters, handlers, component, locator);
     if (sequentialTransition)
         return applyParsedGuard([sequentialTransition], disabledGuard);
-    const summary = callSummaryFromHandler(handler, setters);
+    const summary = callSummaryFromHandler(handler, setters, componentScopeLocalsFor(node, setters, contextBindings));
     if (!summary)
         return [];
     const inlined = inlinedHelperCall(summary.call, handlers, setters);
     const inlinedCall = inlined?.call ?? summary.call;
     const locals = inlined?.locals ?? summary.locals;
-    const navigation = navigationTransition(source, fileName, node, attr, component, inlinedCall, locator, routerPlugin);
+    const navigation = navigationTransition(source, fileName, node, attr, component, inlinedCall, locator, routerPlugin, routePatterns);
     if (navigation)
         return applyParsedGuard([navigation], disabledGuard);
     const pluginWrite = pluginWriteTransition(source, fileName, node, attr, component, inlinedCall, setters, locals, sourcePlugins, locator);
@@ -626,6 +822,9 @@ function transitionsFromResolvedHandler(source, fileName, node, attr, handler, s
     const swrMutate = swrMutateTransition(source, fileName, node, attr, component, inlinedCall, locator);
     if (swrMutate)
         return applyParsedGuard([swrMutate], disabledGuard);
+    const noop = noopCallTransition(source, fileName, node, attr, component, inlinedCall, locator);
+    if (noop)
+        return applyParsedGuard([noop], disabledGuard);
     const setterCall = setterCallFrom(inlinedCall, setters);
     if (!setterCall) {
         const escaped = escapedSetters(inlinedCall, setters, locals);
@@ -674,7 +873,7 @@ function sequentialTransitionFromHandler(source, fileName, node, attr, handler,
     if (summaries.length <= 1)
         return undefined;
     const effects = summaries.map((summary) => summary.effect);
-    const writes = uniqueStrings(effects.map((effect) => effect.var));
+    const writes = uniqueStrings(effects.flatMap(effectWriteVars));
     return {
         id: `${component}.${attr}.${writes.map((id) => stateNameForVar(id, setters) ?? safeId(id)).join("_")}.seq`,
         cls: "user",
@@ -1055,6 +1254,28 @@ function componentGuardLocalsFor(attribute, setters) {
     }
     return locals;
 }
+function componentScopeLocalsFor(attribute, setters, contextBindings) {
+    const body = enclosingFunctionBody(attribute);
+    if (!body)
+        return new Map();
+    const locals = new Map();
+    for (const statement of body.statements) {
+        if (statement.pos > attribute.pos)
+            break;
+        if (ts.isReturnStatement(statement))
+            break;
+        bindConstStatement(statement, setters, locals, true);
+        for (const declaration of variableDeclarations(statement)) {
+            bindContextHookObjectDeclaration(declaration, contextBindings, setters);
+        }
+    }
+    return locals;
+}
+function variableDeclarations(node) {
+    if (!ts.isVariableStatement(node))
+        return [];
+    return [...node.declarationList.declarations];
+}
 function enclosingFunctionBody(node) {
     let current = node;
     while (current) {
@@ -1161,6 +1382,25 @@ function swrMutateTransition(source, fileName, node, attr, component, call, loca
         confidence: "exact"
     };
 }
+function noopCallTransition(source, fileName, node, attr, component, call, locator) {
+    const name = callName(call.expression) ?? call.expression.getText(source);
+    if (!isKnownPureUiCall(name))
+        return undefined;
+    return {
+        id: `${component}.${attr}.${safeId(name)}.noop`,
+        cls: "user",
+        label: labelForEvent(attr, locator),
+        source: [{ file: fileName, ...lineAndColumn(source, node) }],
+        guard: { kind: "lit", value: true },
+        effect: { kind: "seq", effects: [] },
+        reads: [],
+        writes: [],
+        confidence: "exact"
+    };
+}
+function isKnownPureUiCall(name) {
+    return name.endsWith(".click") || name === "confirm" || name === "navigator.clipboard.writeText" || name.endsWith(".writeText");
+}
 function bindConstStatement(statement, setters, locals, partialBoolean = false) {
     if (!ts.isVariableStatement(statement))
         return false;
@@ -1184,8 +1424,8 @@ function inlinedHelperCall(call, handlers, setters) {
     const helper = handlers.get(call.expression.text);
     return helper ? callSummaryFromHandler(helper, setters) : undefined;
 }
-function navigationTransition(source, fileName, node, attr, component, call, locator, routerPlugin) {
-    const navigation = navigationCall(call, routerPlugin);
+function navigationTransition(source, fileName, node, attr, component, call, locator, routerPlugin, routePatterns = []) {
+    const navigation = navigationCall(call, routerPlugin, routePatterns);
     if (!navigation)
         return undefined;
     const routeId = navigation.to ? safeId(navigation.to) : "back";
@@ -1209,7 +1449,7 @@ function navigationTransition(source, fileName, node, attr, component, call, loc
         confidence: "exact"
     };
 }
-function navigationCall(call, routerPlugin) {
+function navigationCall(call, routerPlugin, routePatterns = []) {
     const name = callName(call.expression);
     if (!name)
         return undefined;
@@ -1217,11 +1457,11 @@ function navigationCall(call, routerPlugin) {
     if (pluginNavigation && pluginNavigation !== "unsupported")
         return pluginNavigation;
     if (name === "navigate" && call.arguments.length === 1) {
-        const to = literalValue(call.arguments[0]);
+        const to = routeTargetValue(call.arguments[0], routePatterns);
         return typeof to === "string" ? { mode: "push", to } : undefined;
     }
     if ((name.endsWith(".push") || name.endsWith(".replace")) && call.arguments.length === 1) {
-        const to = literalValue(call.arguments[0]);
+        const to = routeTargetValue(call.arguments[0], routePatterns);
         if (typeof to !== "string")
             return undefined;
         return { mode: name.endsWith(".replace") ? "replace" : "push", to };
@@ -1231,6 +1471,68 @@ function navigationCall(call, routerPlugin) {
     }
     return undefined;
 }
+function linkNavigationTransition(source, fileName, node, component, routePatterns) {
+    if ((!ts.isJsxOpeningElement(node) && !ts.isJsxSelfClosingElement(node)) || node.tagName.getText(source) !== "Link")
+        return undefined;
+    const toAttr = node.attributes.properties.find((property) => ts.isJsxAttribute(property) && ts.isIdentifier(property.name) && property.name.text === "to");
+    if (!toAttr)
+        return undefined;
+    const to = jsxRouteTarget(toAttr, routePatterns);
+    if (!to)
+        return undefined;
+    return {
+        id: `${component}.Link.navigate.${safeId(to)}`,
+        cls: "nav",
+        label: { kind: "navigate", mode: "push", to },
+        source: [{ file: fileName, ...lineAndColumn(source, toAttr) }],
+        guard: { kind: "lit", value: true },
+        effect: { kind: "navigate", mode: "push", to: { kind: "lit", value: to } },
+        reads: ["sys:route", "sys:history"],
+        writes: ["sys:route", "sys:history"],
+        confidence: "exact"
+    };
+}
+function jsxRouteTarget(attribute, routePatterns) {
+    if (!attribute.initializer)
+        return undefined;
+    if (ts.isStringLiteral(attribute.initializer))
+        return normalizeRouteTarget(attribute.initializer.text, routePatterns);
+    if (!ts.isJsxExpression(attribute.initializer) || !attribute.initializer.expression)
+        return undefined;
+    return routeTargetValue(attribute.initializer.expression, routePatterns);
+}
+function routeTargetValue(expression, routePatterns) {
+    if (!expression)
+        return undefined;
+    const literal = literalValue(expression);
+    if (typeof literal === "string")
+        return normalizeRouteTarget(literal, routePatterns);
+    if (ts.isNoSubstitutionTemplateLiteral(expression))
+        return normalizeRouteTarget(expression.text, routePatterns);
+    if (ts.isTemplateExpression(expression)) {
+        const pattern = templateRoutePattern(expression);
+        return pattern ? normalizeRouteTarget(pattern, routePatterns) : undefined;
+    }
+    return undefined;
+}
+function templateRoutePattern(expression) {
+    let value = expression.head.text;
+    for (const span of expression.templateSpans)
+        value += ":param" + span.literal.text;
+    return value;
+}
+function normalizeRouteTarget(target, routePatterns) {
+    const slash = target.startsWith("/") ? target : `/${target}`;
+    const matched = routePatterns.find((pattern) => routePatternMatches(pattern, slash));
+    return matched ?? slash.replace(/\/:param(?=\/|$)/g, "/:id");
+}
+function routePatternMatches(pattern, target) {
+    const left = pattern.replace(/^\/+/, "").split("/");
+    const right = target.replace(/^\/+/, "").split("/");
+    if (left.length !== right.length)
+        return false;
+    return left.every((part, index) => part.startsWith(":") || part === "*" || part === right[index] || right[index] === ":param");
+}
 function escapedSetters(call, setters, locals = new Map()) {
     return call.arguments
         .filter(ts.isIdentifier)
@@ -1562,6 +1864,25 @@ function componentPropTrigger(source, component, propName, setters, warnings) {
     visit(component);
     return trigger;
 }
+function transparentComponentPropTrigger(component, propName) {
+    if (!isForwardablePropName(propName) || !componentSpreadsPropsToElement(component))
+        return undefined;
+    return { attr: propName };
+}
+function componentSpreadsPropsToElement(component) {
+    let found = false;
+    const visit = (node) => {
+        if (found)
+            return;
+        if ((ts.isJsxOpeningElement(node) || ts.isJsxSelfClosingElement(node)) && node.attributes.properties.some(ts.isJsxSpreadAttribute)) {
+            found = true;
+            return;
+        }
+        ts.forEachChild(node, visit);
+    };
+    visit(component);
+    return found;
+}
 function forwardsComponentProp(node, handlers, component) {
     if (!component || !node.initializer)
         return false;
@@ -1709,7 +2030,7 @@ function jsxTagName(attribute) {
         return undefined;
     return ts.isIdentifier(parent.tagName) ? parent.tagName.text : undefined;
 }
-function transitionsFromAsyncHandler(source, fileName, attr, expression, setters, component, effectApis, asyncOutcomes, locator, warnings) {
+function transitionsFromAsyncHandler(source, fileName, attr, expression, setters, component, effectApis, asyncOutcomes, locator, routePatterns, warnings) {
     if (!ts.isBlock(expression.body))
         return [];
     const statements = expression.body.statements;
@@ -1739,14 +2060,16 @@ function transitionsFromAsyncHandler(source, fileName, attr, expression, setters
     const successSummaries = summarizeAsyncSegment(successStatements, setters);
     const catchSummaries = tryStatement?.catchClause ? summarizeAsyncSegment(tryStatement.catchClause.block.statements, setters) : [];
     const preEffects = preSummaries.map((summary) => summary.effect);
-    const successEffects = successSummaries.map((summary) => summary.effect);
-    const catchEffects = catchSummaries.map((summary) => summary.effect);
+    const finallySummaries = tryStatement?.finallyBlock ? summarizeAsyncSegment(tryStatement.finallyBlock.statements, setters) : [];
+    const finallyEffects = finallySummaries.map((summary) => summary.effect);
+    const successEffects = [...successSummaries.map((summary) => summary.effect), ...finallyEffects];
+    const catchEffects = [...catchSummaries.map((summary) => summary.effect), ...finallyEffects];
     const preReads = uniqueStrings([...preSummaries.flatMap((summary) => summary.reads), ...opArgs.reads]);
-    const successReads = uniqueStrings(successSummaries.flatMap((summary) => summary.reads));
-    const catchReads = uniqueStrings(catchSummaries.flatMap((summary) => summary.reads));
+    const successReads = uniqueStrings([...successSummaries.flatMap((summary) => summary.reads), ...finallySummaries.flatMap((summary) => summary.reads)]);
+    const catchReads = uniqueStrings([...catchSummaries.flatMap((summary) => summary.reads), ...finallySummaries.flatMap((summary) => summary.reads)]);
     if (successEffects.length === 0 && catchEffects.length === 0)
         return [];
-    const writes = [...new Set([...preEffects, ...successEffects, ...catchEffects].map((effect) => effect.var))];
+    const writes = uniqueStrings([...preEffects, ...successEffects, ...catchEffects].flatMap(effectWriteVars));
     const baseId = `${component}.${attr}.${op}`;
     for (const read of uniqueStrings([...successReads, ...catchReads])) {
         warnings.push({ message: `Stale-read risk ${baseId}:${read}`, ...lineAndColumn(source, awaitStatement) });
@@ -1760,7 +2083,7 @@ function transitionsFromAsyncHandler(source, fileName, attr, expression, setters
         guard: { kind: "lit", value: true },
         effect: { kind: "seq", effects: [...preEffects, { kind: "enqueue", op, continuation: `${baseId}.cont`, args: opArgs.args }] },
         reads: preReads,
-        writes: [...new Set([...preEffects.map((effect) => effect.var), "sys:pending"])],
+        writes: uniqueStrings([...preEffects.flatMap(effectWriteVars), "sys:pending"]),
         confidence: confidenceForEffects(preEffects)
     };
     const success = {
@@ -1771,12 +2094,13 @@ function transitionsFromAsyncHandler(source, fileName, attr, expression, setters
         guard: pendingIs(op),
         effect: { kind: "seq", effects: [{ kind: "dequeue", index: 0 }, ...successEffects] },
         reads: uniqueStrings(["sys:pending", ...successReads]),
-        writes: ["sys:pending", ...successEffects.map((effect) => effect.var)],
+        writes: [...new Set(["sys:pending", ...successEffects.flatMap(effectWriteVars)])],
         confidence: confidenceForEffects(successEffects)
     };
-    const transitions = [enqueue, success];
+    const successNavigate = firstNavigationInStatements(successStatements, routePatterns);
+    const transitions = [enqueue, successNavigate ? appendEffect(success, navigationEffect(successNavigate)) : success];
     if (catchEffects.length > 0 || asyncOutcomes[op]?.error !== undefined) {
-        transitions.push({
+        const errorTransition = {
             id: `${baseId}.error`,
             cls: "env",
             label: { kind: "resolve", op, outcome: "error" },
@@ -1784,9 +2108,10 @@ function transitionsFromAsyncHandler(source, fileName, attr, expression, setters
             guard: pendingIs(op),
             effect: { kind: "seq", effects: [{ kind: "dequeue", index: 0 }, ...catchEffects] },
             reads: uniqueStrings(["sys:pending", ...catchReads]),
-            writes: ["sys:pending", ...catchEffects.map((effect) => effect.var)],
+            writes: [...new Set(["sys:pending", ...catchEffects.flatMap(effectWriteVars)])],
             confidence: confidenceForEffects(catchEffects)
-        });
+        };
+        transitions.push(errorTransition);
     }
     else {
         warnings.push({ message: `Unhandled rejection ${baseId}`, ...lineAndColumn(source, awaitStatement) });
@@ -1838,7 +2163,7 @@ function transitionsFromSequentialAwait(source, fileName, attr, expression, firs
             guard: promiseAllGuard(promiseAllOps),
             effect: { kind: "seq", effects: [...promiseAllOps.map((_, index) => ({ kind: "dequeue", index })).reverse(), ...tailEffects] },
             reads: uniqueStrings(["sys:pending", ...tailReads]),
-            writes: uniqueStrings(["sys:pending", ...tailEffects.map((effect) => effect.var)]),
+            writes: uniqueStrings(["sys:pending", ...tailEffects.flatMap(effectWriteVars)]),
             confidence: confidenceForEffects(tailEffects)
         }
         : {
@@ -1849,7 +2174,7 @@ function transitionsFromSequentialAwait(source, fileName, attr, expression, firs
             guard: pendingIs(secondOp),
             effect: { kind: "seq", effects: [{ kind: "dequeue", index: 0 }, ...tailEffects] },
             reads: uniqueStrings(["sys:pending", ...tailReads]),
-            writes: uniqueStrings(["sys:pending", ...tailEffects.map((effect) => effect.var)]),
+            writes: uniqueStrings(["sys:pending", ...tailEffects.flatMap(effectWriteVars)]),
             confidence: confidenceForEffects(tailEffects)
         };
     const transitions = [
@@ -1861,7 +2186,7 @@ function transitionsFromSequentialAwait(source, fileName, attr, expression, firs
             guard: { kind: "lit", value: true },
             effect: { kind: "seq", effects: [...preEffects, { kind: "enqueue", op: firstOp, continuation: `${firstBaseId}.cont`, args: {} }] },
             reads: preReads,
-            writes: uniqueStrings([...preEffects.map((effect) => effect.var), "sys:pending"]),
+            writes: uniqueStrings([...preEffects.flatMap(effectWriteVars), "sys:pending"]),
             confidence: confidenceForEffects(preEffects)
         },
         {
@@ -1872,7 +2197,7 @@ function transitionsFromSequentialAwait(source, fileName, attr, expression, firs
             guard: pendingIs(firstOp),
             effect: { kind: "seq", effects: [{ kind: "dequeue", index: 0 }, ...betweenEffects, ...secondEnqueueEffects] },
             reads: uniqueStrings(["sys:pending", ...betweenReads]),
-            writes: uniqueStrings(["sys:pending", ...betweenEffects.map((effect) => effect.var)]),
+            writes: uniqueStrings(["sys:pending", ...betweenEffects.flatMap(effectWriteVars)]),
             confidence: confidenceForEffects(betweenEffects)
         },
         secondSuccess
@@ -1965,14 +2290,14 @@ function transitionsFromUseEffect(source, fileName, node, setters, component) {
         const guards = assignEffects.map((effect) => ({ kind: "neq", args: [{ kind: "read", var: effect.var }, effect.expr] }));
         const guard = guards.length > 0 ? guards.slice(1).reduce((acc, next) => andGuard(acc, next), guards[0]) : { kind: "lit", value: true };
         transitions.push({
-            id: `${component}.useEffect.${effects.map((effect) => effect.var.split(".").at(-1) ?? effect.var).join("_")}`,
+            id: `${component}.useEffect.${effects.flatMap(effectWriteVars).map((varId) => varId.split(".").at(-1) ?? varId).join("_")}`,
             cls: "internal",
             label: { kind: "internal", text: `${component}.useEffect` },
             source: [{ file: fileName, ...lineAndColumn(source, node) }],
             guard,
             effect: effects.length === 1 ? effects[0] : { kind: "seq", effects },
-            reads: uniqueStrings([...deps, ...effectReads, ...effects.map((effect) => effect.var)]),
-            writes: [...new Set(effects.map((effect) => effect.var))],
+            reads: uniqueStrings([...deps, ...effectReads, ...effects.flatMap(effectWriteVars)]),
+            writes: uniqueStrings(effects.flatMap(effectWriteVars)),
             confidence: effects.some((effect) => effect.kind === "havoc") ? "over-approx" : "exact",
             triggeredBy: deps
         });
@@ -1981,14 +2306,14 @@ function transitionsFromUseEffect(source, fileName, node, setters, component) {
         const cleanupEffects = cleanup.map((summary) => summary.effect);
         const cleanupReads = uniqueStrings(cleanup.flatMap((summary) => summary.reads));
         transitions.push({
-            id: `${component}.useEffect.cleanup.${cleanupEffects.map((effect) => effect.var.split(".").at(-1) ?? effect.var).join("_")}`,
+            id: `${component}.useEffect.cleanup.${cleanupEffects.flatMap(effectWriteVars).map((varId) => varId.split(".").at(-1) ?? varId).join("_")}`,
             cls: "internal",
             label: { kind: "internal", text: `${component}.useEffect.cleanup` },
             source: [{ file: fileName, ...lineAndColumn(source, node) }],
             guard: { kind: "lit", value: true },
             effect: cleanupEffects.length === 1 ? cleanupEffects[0] : { kind: "seq", effects: cleanupEffects },
             reads: cleanupReads,
-            writes: [...new Set(cleanupEffects.map((effect) => effect.var))],
+            writes: uniqueStrings(cleanupEffects.flatMap(effectWriteVars)),
             confidence: "over-approx",
             triggeredBy: deps
         });
@@ -2415,7 +2740,7 @@ function containsAwaitedEffect(statements, effectApis) {
             }
             if (insideAwait && ts.isCallExpression(node)) {
                 const name = callName(node.expression);
-                if (name && effectApis.has(name)) {
+                if (name && effectApis.has(effectOpForCall(name, node))) {
                     found = true;
                     return;
                 }
@@ -2430,13 +2755,94 @@ function awaitedOp(statement, effectApis) {
     return awaitedCall(statement, effectApis)?.op;
 }
 function awaitedCall(statement, effectApis) {
-    if (!ts.isExpressionStatement(statement))
+    const awaitExpression = awaitedCallExpressionInStatement(statement);
+    if (!awaitExpression)
         return undefined;
-    const expression = statement.expression;
-    if (!ts.isAwaitExpression(expression) || !ts.isCallExpression(expression.expression))
+    const name = callName(awaitExpression.expression);
+    if (!name)
+        return undefined;
+    const op = effectOpForCall(name, awaitExpression);
+    if (!effectApis.has(op))
         return undefined;
-    const name = callName(expression.expression.expression);
-    return name && effectApis.has(name) ? { op: name, call: expression.expression } : undefined;
+    return { op, call: awaitExpression };
+}
+function awaitedCallExpressionInStatement(statement) {
+    if (ts.isExpressionStatement(statement) && ts.isAwaitExpression(statement.expression) && ts.isCallExpression(statement.expression.expression)) {
+        return statement.expression.expression;
+    }
+    if (ts.isVariableStatement(statement)) {
+        for (const declaration of statement.declarationList.declarations) {
+            if (declaration.initializer &&
+                ts.isAwaitExpression(declaration.initializer) &&
+                ts.isCallExpression(declaration.initializer.expression) &&
+                callName(declaration.initializer.expression.expression) === "fetch") {
+                return declaration.initializer.expression;
+            }
+        }
+    }
+    return undefined;
+}
+function effectOpForCall(name, call) {
+    if (name !== "fetch")
+        return name;
+    const url = fetchUrl(call.arguments[0]);
+    const method = fetchMethod(call.arguments[1]) ?? "GET";
+    return url ? `${method} ${url}` : "fetch";
+}
+function fetchUrl(argument) {
+    if (!argument)
+        return undefined;
+    if (ts.isStringLiteral(argument) || ts.isNoSubstitutionTemplateLiteral(argument))
+        return normalizeFetchUrl(argument.text);
+    if (ts.isTemplateExpression(argument)) {
+        const pattern = templateRoutePattern(argument);
+        return pattern ? normalizeFetchUrl(pattern.replace(/\/:param(?=\/|$)/g, "/:id")) : undefined;
+    }
+    return undefined;
+}
+function normalizeFetchUrl(value) {
+    return value.startsWith("/") ? value : `/${value}`;
+}
+function fetchMethod(argument) {
+    if (!argument || !ts.isObjectLiteralExpression(argument))
+        return undefined;
+    const method = argument.properties.find((property) => ts.isPropertyAssignment(property) && propertyName(property.name) === "method");
+    const value = method ? literalValue(method.initializer) : undefined;
+    return typeof value === "string" ? value.toUpperCase() : undefined;
+}
+function firstNavigationInStatements(statements, routePatterns) {
+    for (const statement of statements) {
+        let found;
+        const visit = (node) => {
+            if (found)
+                return;
+            if (ts.isCallExpression(node))
+                found = navigationCall(node, undefined, routePatterns);
+            ts.forEachChild(node, visit);
+        };
+        visit(statement);
+        if (found)
+            return found;
+    }
+    return undefined;
+}
+function navigationEffect(navigation) {
+    return {
+        kind: "navigate",
+        mode: navigation.mode,
+        ...(navigation.to ? { to: { kind: "lit", value: navigation.to } } : {})
+    };
+}
+function appendEffect(transition, effect) {
+    const current = transition.effect.kind === "seq" ? transition.effect.effects : [transition.effect];
+    const writes = uniqueStrings([...transition.writes, ...effectWriteVars(effect)]);
+    const reads = uniqueStrings([...transition.reads, ...(effect.kind === "navigate" ? ["sys:route", "sys:history"] : [])]);
+    return {
+        ...transition,
+        effect: { kind: "seq", effects: [...current, effect] },
+        reads,
+        writes
+    };
 }
 function effectCallArgs(call, setters, locals) {
     const first = call.arguments[0];
@@ -2485,7 +2891,7 @@ function promiseAllAwaitOps(statement, effectApis) {
 function callName(expression) {
     if (ts.isIdentifier(expression))
         return expression.text;
-    if (ts.isPropertyAccessExpression(expression))
+    if (ts.isPropertyAccessExpression(expression) || ts.isPropertyAccessChain(expression))
         return `${callName(expression.expression) ?? expression.expression.getText()}.${expression.name.text}`;
     return undefined;
 }
@@ -2502,6 +2908,17 @@ function componentNameFor(node) {
         return node.name.text;
     return undefined;
 }
+function providerComponentNames(source) {
+    const names = new Set();
+    const visit = (node) => {
+        const name = componentNameFor(node);
+        if (name && node.getText(source).includes(".Provider"))
+            names.add(name);
+        ts.forEachChild(node, visit);
+    };
+    visit(source);
+    return names;
+}
 function startsUppercase(value) {
     return /^[A-Z]/.test(value);
 }