@mittwald/flow-codemods 1.1.27 → 1.1.29

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/renamed-css-export/transform.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const oldPath = "@mittwald/flow-react-components/styles";
+const newPath = "@mittwald/flow-react-components/all.css";
+/**
+ * Rewrites the module specifier `@mittwald/flow-react-components/styles` to
+ * `@mittwald/flow-react-components/all.css` (alpha.292).
+ *
+ * The same shape as `password-tools-subpath-renamed`: one exact specifier, in
+ * every form that names a module — `import`, `import type`, `export … from`, a
+ * side-effect import, `import()` and `require()`. In practice it is nearly
+ * always the side-effect form (`import "…/styles"`), which is why that case is
+ * the one the fixtures lead with.
+ *
+ * Exact match, not a prefix: `./styles` was a single export with nothing
+ * underneath it, so there is no deeper path to rewrite and no risk of touching
+ * an unrelated `styles` of someone else's.
+ *
+ * What this cannot reach is an `@import` in a `.css` or `.scss` file —
+ * jscodeshift only walks the JavaScript and TypeScript extensions. `apply` says
+ * so.
+ */
+const renamedCssExportTransform = (fileInfo, { j }) => {
+    const root = j(fileInfo.source, { parser: "tsx" });
+    let changed = false;
+    const rewrite = (node) => {
+        if (node.value === oldPath) {
+            node.value = newPath;
+            changed = true;
+        }
+    };
+    // import … from "…", import "…"
+    root.find(j.ImportDeclaration).forEach((path) => rewrite(path.node.source));
+    // export … from "…", export * from "…"
+    root
+        .find(j.ExportNamedDeclaration)
+        .forEach((path) => path.node.source && rewrite(path.node.source));
+    root
+        .find(j.ExportAllDeclaration)
+        .forEach((path) => rewrite(path.node.source));
+    // import("…") and require("…")
+    root
+        .find(j.CallExpression)
+        .filter((path) => {
+        const callee = path.node.callee;
+        return (callee.type === "Import" ||
+            (callee.type === "Identifier" && callee.name === "require"));
+    })
+        .forEach((path) => {
+        const [argument] = path.node.arguments;
+        if (argument &&
+            (argument.type === "StringLiteral" || argument.type === "Literal")) {
+            rewrite(argument);
+        }
+    });
+    // Returning the source untouched keeps this file out of the "changed" count.
+    return changed ? root.toSource() : fileInfo.source;
+};
+exports.default = renamedCssExportTransform;

package/dist/migrations/table-column-width-props/transform.js

@@ -0,0 +1,131 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Drops `maxWidth` from `TableColumn`, and drops `width`/`minWidth` where they
+ * were `null` (alpha.956).
+ *
+ * Two changes with different decidability, which is why the transform covers
+ * both but not equally:
+ *
+ * - **`maxWidth` always goes.** The prop was removed from the type, so an
+ *   explicit `maxWidth` attribute is wrong whatever its value is —
+ *   `maxWidth={400}` and `maxWidth={computed}` alike. Removing it does change
+ *   the rendered column (there is no maximum any more); that is the migration,
+ *   not a side effect.
+ * - **`width` and `minWidth` only go when the source says `null`.** The type
+ *   dropped `null`, and `null` meant "no explicit width", which is what
+ *   omitting the prop means now. Only the literal is decidable:
+ *   `width={maybeNull}` could be anything at runtime and is left alone, the way
+ *   `accent-box-color-to-background-color` leaves `color={expression}`.
+ *
+ * The scope is the same as its neighbours': only JSX elements that resolve to
+ * `TableColumn` — imported named, aliased, or through a namespace, from
+ * `@mittwald/flow-react-components` or
+ * `@mittwald/flow-remote-react-components`, including their subpath entries.
+ *
+ * A spread (`<TableColumn {...props} />`) carrying `maxWidth` is invisible
+ * here. The explicit attributes beside it are still handled; `apply` names the
+ * gap.
+ */
+const tableColumnWidthPropsTransform = (fileInfo, { j }) => {
+    const flowPackages = [
+        "@mittwald/flow-react-components",
+        "@mittwald/flow-remote-react-components",
+    ];
+    const affectedComponents = new Set(["TableColumn"]);
+    /** Removed from the type — an explicit attribute is wrong at any value. */
+    const removedProps = new Set(["maxWidth"]);
+    /** Retyped without `null` — remove only where the source literally says so. */
+    const nullableProps = new Set(["width", "minWidth"]);
+    const isFlowImport = (source) => flowPackages.some((pkg) => source === pkg || source.startsWith(`${pkg}/`));
+    /**
+     * Whether this JSX attribute value is the literal `null`.
+     *
+     * Both spellings, because which one appears depends on the parser: babel
+     * emits `NullLiteral`, esprima-style parsers a `Literal` whose `value` is
+     * `null`. Anything else — an identifier, a call, a ternary — is not decidable
+     * from the source and stays.
+     */
+    const isNullLiteral = (value) => {
+        if (!value || typeof value !== "object" || !("type" in value)) {
+            return false;
+        }
+        const container = value;
+        if (container.type !== "JSXExpressionContainer") {
+            return false;
+        }
+        const expression = container.expression;
+        if (!expression ||
+            typeof expression !== "object" ||
+            !("type" in expression)) {
+            return false;
+        }
+        const typed = expression;
+        return (typed.type === "NullLiteral" ||
+            (typed.type === "Literal" && typed.value === null));
+    };
+    const root = j(fileInfo.source, { parser: "tsx" });
+    // Local JSX identifier -> canonical component name (resolves `as` aliases).
+    const localToComponent = new Map();
+    // Local names of `import * as Flow` namespace imports from a Flow package.
+    const flowNamespaces = new Set();
+    root
+        .find(j.ImportDeclaration)
+        .filter((path) => isFlowImport(String(path.node.source.value)))
+        .forEach((path) => {
+        for (const specifier of path.node.specifiers ?? []) {
+            if (specifier.type === "ImportSpecifier" &&
+                specifier.imported.type === "Identifier" &&
+                affectedComponents.has(specifier.imported.name)) {
+                localToComponent.set(String(specifier.local?.name ?? specifier.imported.name), String(specifier.imported.name));
+            }
+            else if (specifier.type === "ImportNamespaceSpecifier" &&
+                specifier.local) {
+                flowNamespaces.add(String(specifier.local.name));
+            }
+        }
+    });
+    if (localToComponent.size === 0 && flowNamespaces.size === 0) {
+        return fileInfo.source;
+    }
+    let changed = false;
+    root.find(j.JSXOpeningElement).forEach((path) => {
+        const name = path.node.name;
+        let isAffected = false;
+        if (name.type === "JSXIdentifier") {
+            isAffected = localToComponent.has(name.name);
+        }
+        else if (name.type === "JSXMemberExpression" &&
+            name.object.type === "JSXIdentifier" &&
+            name.property.type === "JSXIdentifier") {
+            isAffected =
+                flowNamespaces.has(name.object.name) &&
+                    affectedComponents.has(name.property.name);
+        }
+        if (!isAffected) {
+            return;
+        }
+        const attributes = path.node.attributes ?? [];
+        const kept = attributes.filter((attribute) => {
+            if (attribute.type !== "JSXAttribute" ||
+                attribute.name.type !== "JSXIdentifier") {
+                return true;
+            }
+            const attributeName = attribute.name.name;
+            if (removedProps.has(attributeName)) {
+                return false;
+            }
+            if (nullableProps.has(attributeName) && isNullLiteral(attribute.value)) {
+                return false;
+            }
+            return true;
+        });
+        if (kept.length !== attributes.length) {
+            path.node.attributes = kept;
+            changed = true;
+        }
+    });
+    // Returning the source untouched keeps this file out of the "changed" count.
+    return changed ? root.toSource() : fileInfo.source;
+};
+exports.default = tableColumnWidthPropsTransform;

package/dist/migrations.generated.js

@@ -98,9 +98,9 @@ export const migrations = [
         since: "0.2.0-alpha.956",
         title: "TableColumn: `maxWidth` removed, `width` and `minWidth` retyped",
         kind: "migration",
-        action: "manual",
+        action: "codemod",
         remotePackage: true,
-        apply: "Remove `maxWidth` from every `TableColumn`. Where `width` or `minWidth` was `null`, omit the prop instead — the type no longer accepts `null`, only `number | string`.",
+        apply: "Remove `maxWidth` from every `TableColumn`. Where `width` or `minWidth` was `null`, omit the prop instead — the type no longer accepts `null`, only `number | string`. A codemod does both for the cases it can decide from the source. Two it declines: a `width`/`minWidth` whose value is an expression (`width={maybeNull}`), and a spread that might carry `maxWidth` (`<TableColumn {...props} />`). Check those by hand.",
     },
     {
         id: "table-render-prop-removed",
@@ -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",
@@ -233,8 +233,8 @@ export const migrations = [
         since: "0.1.0-alpha.292",
         title: "Renamed CSS export",
         kind: "migration",
-        action: "manual",
+        action: "codemod",
         remotePackage: false,
-        apply: "Replace the import `@mittwald/flow-react-components/styles` with `@mittwald/flow-react-components/all.css`.",
+        apply: "Replace the import `@mittwald/flow-react-components/styles` with `@mittwald/flow-react-components/all.css`. A codemod does this for JavaScript and TypeScript files. An `@import` of the old path inside a `.css` or `.scss` file is not covered — search for it by hand.",
     },
 ];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mittwald/flow-codemods",
-  "version": "1.1.27",
+  "version": "1.1.29",
   "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": "01e06e07e3cb13f82b42649e31a95bac11bfd9b2"
+  "gitHead": "9c65be4254837ed7a23e6ef79e07ca6717938d19"
 }