@mittwald/flow-codemods 1.1.26 → 1.1.28

package/dist/migrations/action-prop-to-on-action/transform.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 /**
- * Renames the `action` prop to `onAction` on `Action`.
+ * Renames the `action` prop to `onAction` on `Action`, and wraps a bare
+ * function reference passed to it in an inline call.
  *
  * The scope is deliberately narrow. Only JSX elements that resolve to `Action`
  * — imported (named or as a namespace) from `@mittwald/flow-react-components`
@@ -14,6 +15,44 @@ Object.defineProperty(exports, "__esModule", { value: true });
  * An element that already carries `onAction` keeps it and only loses the stale
  * `action` prop, which mirrors what the runtime fallback does: an explicit
  * `onAction` wins.
+ *
+ * ## Why the wrap is unconditional
+ *
+ * `onAction` is typed `ActionFn` (`(...args: unknown[]) => unknown`), so a
+ * reference to a function declaring a parameter of any narrower type — the
+ * usual case being `controller.close`, typed `(options?: CloseOverlayOptions)
+ * => void` — does not type-check. Whether a given reference declares such a
+ * parameter needs type information and is not decidable from the source, which
+ * is why this transform used to leave every reference alone and `apply` asked
+ * for a manual pass over all of them.
+ *
+ * Deciding _whether_ to wrap needs the type. _Performing_ the wrap does not:
+ * `() => fn()` calls exactly what `fn` would have been called with by `Action`,
+ * minus the arguments — and `onAction` is documented as taking none. So the
+ * wrap fixes the reference that needed it and is a no-op for the rest, which
+ * makes the decision unnecessary.
+ *
+ * Two cases it can still change, neither decidable from the source:
+ *
+ * - A handler that reads the argument `Action` forwards (the trigger's event,
+ *   e.g. a `PressEvent` from the `Button` inside) and declares it optional or
+ *   as a rest parameter, so that it type-checks both before and after. It stops
+ *   receiving that argument, silently. Nothing in Flow documents `onAction` as
+ *   receiving one.
+ * - A possibly-undefined reference, `onAction={props.onAction}`. `undefined` is a
+ *   valid value for the prop, but calling it is not, so the wrap turns
+ *   something TypeScript accepted into something it rejects — loudly, at the
+ *   call site, which is why this is a compile error to fix rather than a
+ *   regression to find.
+ *
+ * `apply` names both.
+ *
+ * Only a bare reference is wrapped: a plain identifier or a member expression.
+ * An arrow function and a function expression already are the handler. A call
+ * (`makeHandler()`, `close.bind(controller)`) _produces_ the handler, so
+ * wrapping it would call the factory on every trigger and throw its result
+ * away. A conditional, a `??` chain or an optional member expression is not a
+ * reference to one function, so wrapping would be a guess.
  */
 const actionPropToOnActionTransform = (fileInfo, { j }) => {
     const flowPackages = [
@@ -22,6 +61,27 @@ const actionPropToOnActionTransform = (fileInfo, { j }) => {
     ];
     const affectedComponents = new Set(["Action"]);
     const isFlowImport = (source) => flowPackages.some((pkg) => source === pkg || source.startsWith(`${pkg}/`));
+    /**
+     * Whether a member expression is rooted in a plain reference —
+     * `controller.close`, `this.handleSave`, `store.modal.controller.close` —
+     * rather than in something evaluated, as `makeController().close` is.
+     *
+     * An optional link disqualifies the chain. `controller?.close` parses as
+     * `OptionalMemberExpression` and never reaches here at all; walking the chain
+     * catches a mixed one like `(a?.b).c`. Declining is deliberate: `() =>
+     * controller?.close()` short-circuits differently from the value it would
+     * replace, and the spelling says the reference may not be there.
+     */
+    const hasPlainObjectChain = (expression) => {
+        const object = expression.object;
+        if (!object || typeof object !== "object" || !("type" in object)) {
+            return false;
+        }
+        const typed = object;
+        return (typed.type === "ThisExpression" ||
+            typed.type === "Identifier" ||
+            (typed.type === "MemberExpression" && hasPlainObjectChain(typed)));
+    };
     const root = j(fileInfo.source, { parser: "tsx" });
     // Local JSX identifier -> canonical component name (resolves `as` aliases).
     const localToComponent = new Map();
@@ -69,12 +129,38 @@ const actionPropToOnActionTransform = (fileInfo, { j }) => {
         const hasOnAction = attributes.some((attribute) => isNamed(attribute, "onAction"));
         if (hasOnAction) {
             path.node.attributes = attributes.filter((attribute) => !isNamed(attribute, "action"));
-            return;
         }
-        for (const attribute of attributes) {
-            if (isNamed(attribute, "action") && attribute.type === "JSXAttribute") {
-                attribute.name.name = "onAction";
+        else {
+            for (const attribute of attributes) {
+                if (isNamed(attribute, "action") && attribute.type === "JSXAttribute") {
+                    attribute.name.name = "onAction";
+                }
+            }
+        }
+        // Whatever the prop was called before, the surviving `onAction` is the one
+        // that needs the wrap — including one the consumer had already renamed by
+        // hand, which carries the same type error.
+        for (const attribute of path.node.attributes ?? []) {
+            if (attribute.type !== "JSXAttribute" ||
+                !isNamed(attribute, "onAction")) {
+                continue;
+            }
+            const container = attribute.value;
+            if (container?.type !== "JSXExpressionContainer") {
+                continue;
+            }
+            // A bare reference is an identifier or a member expression. Everything
+            // else either is the handler already or is a way of producing one.
+            const expression = container.expression;
+            if (expression.type !== "Identifier" &&
+                expression.type !== "MemberExpression") {
+                continue;
+            }
+            if (expression.type === "MemberExpression" &&
+                !hasPlainObjectChain(expression)) {
+                continue;
             }
+            attribute.value = j.jsxExpressionContainer(j.arrowFunctionExpression([], j.callExpression(expression, [])));
         }
     });
     return root.toSource();

package/dist/migrations.generated.js

@@ -208,7 +208,7 @@ export const migrations = [
         kind: "migration",
         action: "codemod",
         remotePackage: true,
-        apply: "Rename the `action` prop on `Action` to `onAction`. Not only a rename: the new prop is typed `ActionFn` (`(...args: unknown[]) => unknown`), so a function *reference* that declares a parameter no longer type-checks and needs wrapping — `onAction={() => controller.close()}` rather than `onAction={controller.close}`. Check every site where you passed a reference rather than an inline arrow; the codemod renames the prop but cannot decide this one from the source.",
+        apply: "Rename the `action` prop on `Action` to `onAction`. Not only a rename: the new prop is typed `ActionFn` (`(...args: unknown[]) => unknown`), so a function *reference* that declares a parameter no longer type-checks and needs wrapping — `onAction={() => controller.close()}` rather than `onAction={controller.close}`. A codemod does both. It wraps every bare reference (`close`, `controller.close`), because the wrap is a no-op for a reference that did not need it. It leaves a value that already is the handler or produces one — an arrow function, a function expression, a call like `makeHandler()` or `close.bind(controller)` — and anything that is not one reference, such as `isOpen ? close : open` or `controller?.close`. Two wraps to look at afterwards: a handler that read the event `Action` forwards stops receiving it, and a possibly-undefined reference (`onAction={props.onAction}`) becomes a call TypeScript rejects — add the guard it asks for.",
     },
     {
         id: "button-props-interfaces",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mittwald/flow-codemods",
-  "version": "1.1.26",
+  "version": "1.1.28",
   "type": "module",
   "description": "Codemods and an upgrade CLI for consumers of Flow, mittwald's design system",
   "homepage": "https://flow.mittwald.de",
@@ -37,5 +37,5 @@
     "vitest": "^4.1.11",
     "yaml": "^2.8.1"
   },
-  "gitHead": "76f0ae2c5750965b7d0d2057dedecae70474c26f"
+  "gitHead": "620d70dc1c876b78cd6a7e693f79ce315088f757"
 }