@mittwald/flow-codemods 1.1.0 → 1.1.2

package/dist/migrations/accent-box-color-to-background-color/transform.js

@@ -0,0 +1,175 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Moves the background value of `AccentBox` from `color` to `backgroundColor`
+ * (alpha.786).
+ *
+ * `color` did not go away, it changed meaning: it used to set the background
+ * (`"blue" | "green" | "gradient" | "neutral"`) and now sets the content color
+ * (`"default" | "dark" | "light" | "dark-static" | "light-static"`). A blanket
+ * rename would therefore break every element that already uses the new meaning.
+ * The transform decides per value instead: a value from the new content-color
+ * union stays on `color`, every other literal moves to `backgroundColor`.
+ *
+ * The scope is deliberately narrow. Only JSX elements that resolve to
+ * `AccentBox` — imported (named or as a namespace) from
+ * `@mittwald/flow-react-components` or
+ * `@mittwald/flow-remote-react-components`, including their subpath entries —
+ * are touched.
+ *
+ * Two cases are left alone, because both are undecidable without knowing the
+ * value:
+ *
+ * - Values it cannot read (`color={expression}`), and expressions that mix both
+ *   meanings (`color={flag ? "blue" : "dark"}`). The same expression means the
+ *   background in old code and the content color in new code, and a mix has no
+ *   single correct answer. An expression whose every value position is a
+ *   literal on the same side of the split _is_ decidable and gets renamed:
+ *   `color={flag ? "blue" : "green"}`.
+ * - An element that already carries `backgroundColor`. Moving `color` there would
+ *   silently overwrite the explicit value.
+ *
+ * Both keep their `color` prop and need a look by hand.
+ */
+const accentBoxColorToBackgroundColorTransform = (fileInfo, { j }) => {
+    const flowPackages = [
+        "@mittwald/flow-react-components",
+        "@mittwald/flow-remote-react-components",
+    ];
+    const affectedComponents = new Set(["AccentBox"]);
+    /** Values `color` still accepts — everything else was a background color. */
+    const contentColors = new Set([
+        "default",
+        "dark",
+        "light",
+        "dark-static",
+        "light-static",
+    ]);
+    const isFlowImport = (source) => flowPackages.some((pkg) => source === pkg || source.startsWith(`${pkg}/`));
+    /** The value of a string literal, or `undefined` for anything dynamic. */
+    const literalValue = (node) => {
+        if (!node || typeof node !== "object" || !("type" in node)) {
+            return undefined;
+        }
+        const { type } = node;
+        if (type !== "StringLiteral" && type !== "Literal") {
+            return undefined;
+        }
+        const { value } = node;
+        return typeof value === "string" ? value : undefined;
+    };
+    /**
+     * Every literal that could become this attribute's value, or `undefined` when
+     * any of those positions is something we cannot read. The positions are the
+     * expression itself, both ternary branches, and the operands of `??`/`||` —
+     * plus only the right operand of `&&`, since `&&` yields its left operand
+     * only when that operand is falsy and a non-empty string never is.
+     *
+     * A list, not a single value, because this transform decides per attribute,
+     * not per literal: `color={flag ? "blue" : "dark"}` mixes a background with a
+     * content colour, and no single rename is right for both.
+     */
+    const valueLiterals = (node) => {
+        const literal = literalValue(node);
+        if (literal !== undefined) {
+            return [literal];
+        }
+        if (!node || typeof node !== "object" || !("type" in node)) {
+            return undefined;
+        }
+        const typed = node;
+        if (typed.type === "ConditionalExpression") {
+            const consequent = valueLiterals(typed.consequent);
+            const alternate = valueLiterals(typed.alternate);
+            return consequent && alternate
+                ? [...consequent, ...alternate]
+                : undefined;
+        }
+        if (typed.type === "LogicalExpression") {
+            const right = valueLiterals(typed.right);
+            if (right === undefined) {
+                return undefined;
+            }
+            if (typed.operator === "&&") {
+                return right;
+            }
+            const left = valueLiterals(typed.left);
+            return left ? [...left, ...right] : undefined;
+        }
+        return undefined;
+    };
+    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;
+    }
+    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 isNamed = (attribute, key) => !!attribute &&
+            typeof attribute === "object" &&
+            attribute.type === "JSXAttribute" &&
+            attribute.name?.type ===
+                "JSXIdentifier" &&
+            attribute.name?.name === key;
+        // An explicit `backgroundColor` is the new API already — never overwrite it.
+        if (attributes.some((attribute) => isNamed(attribute, "backgroundColor"))) {
+            return;
+        }
+        for (const attribute of attributes) {
+            if (!isNamed(attribute, "color") || attribute.type !== "JSXAttribute") {
+                continue;
+            }
+            const value = attribute.value;
+            const literals = value?.type === "JSXExpressionContainer"
+                ? valueLiterals(value.expression)
+                : valueLiterals(value);
+            if (literals === undefined || literals.length === 0) {
+                continue;
+            }
+            // All-or-nothing. Every value has to be a background colour for the
+            // rename to be right; all content colours means the element already uses
+            // the new meaning, and a mix has no single correct answer.
+            const backgrounds = literals.filter((literal) => !contentColors.has(literal));
+            if (backgrounds.length !== literals.length) {
+                continue;
+            }
+            attribute.name = j.jsxIdentifier("backgroundColor");
+        }
+    });
+    return root.toSource();
+};
+exports.default = accentBoxColorToBackgroundColorTransform;

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

@@ -0,0 +1,82 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Renames the `action` prop to `onAction` on `Action`.
+ *
+ * The scope is deliberately narrow. Only JSX elements that resolve to `Action`
+ * — imported (named or as a namespace) from `@mittwald/flow-react-components`
+ * or `@mittwald/flow-remote-react-components`, including their subpath entries
+ * — are touched. `Action` is not one of the generated remote components, but
+ * the remote package re-exports the `flr-universal` surface, which carries it.
+ * Same-named components from other packages are left untouched, and so is the
+ * `action` attribute of a plain `<form>`.
+ *
+ * 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.
+ */
+const actionPropToOnActionTransform = (fileInfo, { j }) => {
+    const flowPackages = [
+        "@mittwald/flow-react-components",
+        "@mittwald/flow-remote-react-components",
+    ];
+    const affectedComponents = new Set(["Action"]);
+    const isFlowImport = (source) => flowPackages.some((pkg) => source === pkg || source.startsWith(`${pkg}/`));
+    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;
+    }
+    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 isNamed = (attribute, key) => attribute.type === "JSXAttribute" &&
+            attribute.name.type === "JSXIdentifier" &&
+            attribute.name.name === key;
+        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";
+            }
+        }
+    });
+    return root.toSource();
+};
+exports.default = actionPropToOnActionTransform;

package/dist/migrations/align-to-combine/transform.js

@@ -0,0 +1,166 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Renames the `Align` component to `Combine`, and `AlignProps` to
+ * `CombineProps`.
+ *
+ * Only names imported from `@mittwald/flow-react-components` or
+ * `@mittwald/flow-remote-react-components` (including their subpath entries)
+ * are touched, so a same-named import from another package is left alone. An
+ * `Align` imported under a local alias (`import { Align as Row }`) keeps its
+ * alias — only the imported name changes. Namespace usages (`<Flow.Align />`,
+ * `Flow.AlignProps`) are rewritten as well.
+ */
+const alignToCombineTransform = (fileInfo, { j }) => {
+    const flowPackages = [
+        "@mittwald/flow-react-components",
+        "@mittwald/flow-remote-react-components",
+    ];
+    const renames = new Map([
+        ["Align", "Combine"],
+        ["AlignProps", "CombineProps"],
+    ]);
+    const isFlowImport = (source) => flowPackages.some((pkg) => source === pkg || source.startsWith(`${pkg}/`));
+    // ast-types models `importKind` on the declaration only, while babel also
+    // puts it on the specifier — which is where a per-specifier `type X` lives.
+    const isTypeOnly = (specifier) => specifier.importKind === "type";
+    const makeValueImport = (specifier) => {
+        specifier.importKind = "value";
+    };
+    const root = j(fileInfo.source, { parser: "tsx" });
+    /** Local identifiers that refer to a renamed export, mapped to the new name. */
+    const localRenames = new Map();
+    /**
+     * Whether any import specifier was rewritten. An aliased `Align as Row` adds
+     * nothing to `localRenames` — its local name stays `Row` — so counting those
+     * alone would treat an alias-only file as untouched and discard the rewrite.
+     */
+    let renamedAnImport = false;
+    /** Local names of `import * as Flow` namespace imports from a Flow package. */
+    const flowNamespaces = new Set();
+    const flowImports = root
+        .find(j.ImportDeclaration)
+        .filter((path) => isFlowImport(String(path.node.source.value)));
+    /**
+     * `imported:local` pairs the file already binds without a rename. A rename
+     * that lands on one of these must not add a second specifier for it — the
+     * name is available from the import that already carries it, which is also
+     * the entry that really exports it.
+     */
+    const claimed = new Set();
+    flowImports.forEach((path) => {
+        for (const specifier of path.node.specifiers ?? []) {
+            if (specifier.type === "ImportNamespaceSpecifier" &&
+                specifier.local?.name) {
+                flowNamespaces.add(String(specifier.local.name));
+                continue;
+            }
+            if (specifier.type !== "ImportSpecifier" ||
+                specifier.imported.type !== "Identifier" ||
+                renames.has(specifier.imported.name)) {
+                continue;
+            }
+            claimed.add(`${specifier.imported.name}:${String(specifier.local?.name ?? specifier.imported.name)}`);
+        }
+    });
+    flowImports.forEach((path) => {
+        const specifiers = path.node.specifiers ?? [];
+        const survivors = [];
+        for (const specifier of specifiers) {
+            if (specifier.type !== "ImportSpecifier" ||
+                specifier.imported.type !== "Identifier") {
+                survivors.push(specifier);
+                continue;
+            }
+            const imported = specifier.imported.name;
+            const renamed = renames.get(imported);
+            if (!renamed) {
+                survivors.push(specifier);
+                continue;
+            }
+            const local = String(specifier.local?.name ?? imported);
+            const isAlias = local !== imported;
+            const newLocal = isAlias ? local : renamed;
+            const key = `${renamed}:${newLocal}`;
+            renamedAnImport = true;
+            if (!isAlias) {
+                // An aliased import keeps its local name and needs no further change.
+                localRenames.set(local, renamed);
+            }
+            // Renaming can collide with a name the file already binds — directly, or
+            // because a second old name maps onto the same new one. Either way the
+            // binding already exists, so this specifier goes away instead of
+            // producing a duplicate declaration, which would not parse.
+            const collision = claimed.has(key);
+            claimed.add(key);
+            if (collision) {
+                // A value import must not lose out to a type-only one.
+                if (!isTypeOnly(specifier)) {
+                    for (const kept of survivors) {
+                        if (kept.type === "ImportSpecifier" &&
+                            kept.imported.type === "Identifier" &&
+                            `${kept.imported.name}:${String(kept.local?.name ?? kept.imported.name)}` === key) {
+                            makeValueImport(kept);
+                        }
+                    }
+                }
+                continue;
+            }
+            // Mutate in place so an `import type` / `type X` modifier survives.
+            specifier.imported.name = renamed;
+            if (!isAlias && specifier.local) {
+                specifier.local.name = renamed;
+            }
+            survivors.push(specifier);
+        }
+        if (survivors.length === specifiers.length) {
+            return;
+        }
+        // Every specifier moved to an import that already binds the name. Leaving
+        // the declaration behind would turn it into a side-effect import of an
+        // entry the file no longer uses.
+        if (survivors.length === 0) {
+            j(path).remove();
+            return;
+        }
+        path.node.specifiers = survivors;
+    });
+    if (!renamedAnImport && flowNamespaces.size === 0) {
+        return fileInfo.source;
+    }
+    /**
+     * `JSXIdentifier` extends `Identifier`, so this one pass covers JSX tags,
+     * value references and type references alike. Positions where the name is not
+     * a reference to the import — an object key, a member's property, a JSX
+     * attribute name — are skipped.
+     */
+    root.find(j.Identifier).forEach((path) => {
+        const parent = path.parent.node;
+        const isNamespaceMember = (parent.type === "MemberExpression" ||
+            parent.type === "JSXMemberExpression") &&
+            parent.property === path.node;
+        if (isNamespaceMember) {
+            const object = parent.object;
+            if (object.type === "Identifier" || object.type === "JSXIdentifier") {
+                const renamed = renames.get(path.node.name);
+                if (renamed && flowNamespaces.has(String(object.name))) {
+                    path.node.name = renamed;
+                }
+            }
+            return;
+        }
+        if (parent.type === "ImportSpecifier" ||
+            parent.type === "JSXAttribute" ||
+            ((parent.type === "ObjectProperty" || parent.type === "Property") &&
+                parent.key === path.node &&
+                !parent.computed)) {
+            return;
+        }
+        const renamed = localRenames.get(path.node.name);
+        if (renamed) {
+            path.node.name = renamed;
+        }
+    });
+    return root.toSource();
+};
+exports.default = alignToCombineTransform;

package/dist/migrations/button-color-accent-to-success/transform.js

@@ -0,0 +1,126 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Renames the `color="accent"` prop value to `color="success"` on `Button` and
+ * `SubmitButton`.
+ *
+ * The scope is deliberately narrow. Only JSX elements that resolve to one of
+ * those components — imported (named or as a namespace) from
+ * `@mittwald/flow-react-components` or
+ * `@mittwald/flow-remote-react-components`, including their subpath entries —
+ * are touched. Same-named components from other packages are left untouched.
+ *
+ * Only literal `"accent"` values are rewritten — either as the whole value
+ * (`color="accent"`, `color={"accent"}`) or in a value position inside a
+ * dynamic one (`color={cond ? "secondary" : "accent"}`, `color={override ??
+ * "accent"}`). A value the transform cannot see into (`color={someVariable}`)
+ * is left alone.
+ */
+const buttonColorAccentToSuccessTransform = (fileInfo, { j }) => {
+    const flowPackages = [
+        "@mittwald/flow-react-components",
+        "@mittwald/flow-remote-react-components",
+    ];
+    const affectedComponents = new Set(["Button", "SubmitButton"]);
+    const isFlowImport = (source) => flowPackages.some((pkg) => source === pkg || source.startsWith(`${pkg}/`));
+    const isAccentLiteral = (node) => {
+        if (!node || typeof node !== "object" || !("type" in node)) {
+            return false;
+        }
+        const { type } = node;
+        return ((type === "StringLiteral" || type === "Literal") &&
+            node.value === "accent");
+    };
+    /**
+     * Rewrites every `"accent"` sitting in a position whose value can reach the
+     * prop: the expression itself, both branches of a ternary, and the operands
+     * of `??`/`||` — plus the right operand of `&&`, since `&&` yields its left
+     * operand only when that operand is falsy and a non-empty string never is. A
+     * `"accent"` anywhere else is not a value that reaches the prop (an object
+     * key, an index into a lookup table) and stays as it is.
+     *
+     * This cannot move into a shared module: the CLI loads this file straight out
+     * of the published package, which ships only
+     * `src/migrations/**\/transform.ts` — see this package's AGENTS.md.
+     */
+    const rewriteValuePositions = (node) => {
+        if (isAccentLiteral(node)) {
+            return j.stringLiteral("success");
+        }
+        if (node?.type === "ConditionalExpression") {
+            node.consequent = rewriteValuePositions(node.consequent);
+            node.alternate = rewriteValuePositions(node.alternate);
+            return node;
+        }
+        if (node?.type === "LogicalExpression") {
+            if (node.operator !== "&&") {
+                node.left = rewriteValuePositions(node.left);
+            }
+            node.right = rewriteValuePositions(node.right);
+            return node;
+        }
+        return node;
+    };
+    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;
+    }
+    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;
+        }
+        for (const attribute of path.node.attributes ?? []) {
+            if (attribute.type !== "JSXAttribute" ||
+                attribute.name.type !== "JSXIdentifier" ||
+                attribute.name.name !== "color") {
+                continue;
+            }
+            const value = attribute.value;
+            // color="accent"
+            if (isAccentLiteral(value)) {
+                attribute.value = j.stringLiteral("success");
+                continue;
+            }
+            // color={"accent"}, and every value position inside a dynamic value:
+            // color={cond ? "accent" : "x"}, color={fallback ?? "accent"}.
+            if (value?.type === "JSXExpressionContainer" &&
+                value.expression.type !== "JSXEmptyExpression") {
+                value.expression = rewriteValuePositions(value.expression);
+            }
+        }
+    });
+    return root.toSource();
+};
+exports.default = buttonColorAccentToSuccessTransform;