@mittwald/flow-codemods 1.1.0-next.10

package/src/migrations/align-to-combine/transform.ts

@@ -0,0 +1,212 @@
+import type { Transform } from "jscodeshift";
+
+/**
+ * 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: Transform = (fileInfo, { j }) => {
+  const flowPackages = [
+    "@mittwald/flow-react-components",
+    "@mittwald/flow-remote-react-components",
+  ];
+  const renames = new Map([
+    ["Align", "Combine"],
+    ["AlignProps", "CombineProps"],
+  ]);
+
+  const isFlowImport = (source: string): boolean =>
+    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: object): boolean =>
+    (specifier as { importKind?: string }).importKind === "type";
+  const makeValueImport = (specifier: object): void => {
+    (specifier as { importKind?: string }).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<string, string>();
+  /**
+   * 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<string>();
+
+  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<string>();
+
+  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: typeof specifiers = [];
+
+    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();
+};
+
+export default alignToCombineTransform;

package/src/migrations/button-color-accent-to-success/transform.ts

@@ -0,0 +1,164 @@
+import type { ConditionalExpression, Transform } from "jscodeshift";
+
+/**
+ * An expression that can be a prop's value. Deliberately not
+ * `JSXExpressionContainer["expression"]`: that also admits `JSXEmptyExpression`
+ * (`color={/* a comment *\/}`), which cannot be written back into a ternary
+ * branch. The call site filters it out instead.
+ */
+type ValueNode = ConditionalExpression["consequent"];
+
+/**
+ * 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: Transform = (fileInfo, { j }) => {
+  const flowPackages = [
+    "@mittwald/flow-react-components",
+    "@mittwald/flow-remote-react-components",
+  ];
+  const affectedComponents = new Set(["Button", "SubmitButton"]);
+
+  const isFlowImport = (source: string): boolean =>
+    flowPackages.some((pkg) => source === pkg || source.startsWith(`${pkg}/`));
+
+  const isAccentLiteral = (node: unknown): boolean => {
+    if (!node || typeof node !== "object" || !("type" in node)) {
+      return false;
+    }
+    const { type } = node as { type: string };
+    return (
+      (type === "StringLiteral" || type === "Literal") &&
+      (node as { value?: unknown }).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: ValueNode): ValueNode => {
+    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<string, string>();
+  // Local names of `import * as Flow` namespace imports from a Flow package.
+  const flowNamespaces = new Set<string>();
+
+  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();
+};
+
+export default buttonColorAccentToSuccessTransform;

package/src/migrations/button-props-interfaces/transform.ts

@@ -0,0 +1,229 @@
+import type { Transform } from "jscodeshift";
+
+/**
+ * Replaces the removed `Button` props interfaces with `ButtonProps`
+ * (alpha.646).
+ *
+ * `RemoteButtonElementProps`, `ResetButtonProps` and `SubmitButtonProps` were
+ * removed; all three are `ButtonProps`. There is no alias for the old names, so
+ * a codebase still using them does not compile.
+ *
+ * This is more than a rename, because the names do not share an entry.
+ * `SubmitButtonProps` and `ResetButtonProps` came from the `react-hook-form`
+ * entry, which does not export `ButtonProps` — renaming them in place would
+ * swap one import error for another. The specifier therefore moves to the
+ * package root of whichever Flow package it came from, joining an existing
+ * import from that root or getting a new one.
+ *
+ * The scope is `@mittwald/flow-react-components` and its subpath entries only.
+ * The remote package re-exports the `flr-universal` surface, so it does carry
+ * some prop types — `ActionProps`, `ModalProps` and the like — but
+ * `ButtonProps` is not among them. There is nothing to move a remote import
+ * onto, so a remote codebase has to pick its own source for the type.
+ * `RemoteButtonElementProps` is left alone for the same reason, and because
+ * `@mittwald/flow-remote-elements` still exports that name today.
+ *
+ * A same-named import from another package is left alone. A name imported under
+ * a local alias (`import { SubmitButtonProps as P }`) keeps its alias — it
+ * becomes `ButtonProps as P`. Namespace usages (`Flow.SubmitButtonProps`) are
+ * rewritten as well.
+ *
+ * All three collapse onto `ButtonProps`, so a file importing more than one of
+ * them — or one of them next to `ButtonProps` itself — ends up with a single
+ * specifier instead of a duplicate declaration, which would not parse.
+ */
+const buttonPropsInterfacesTransform: Transform = (fileInfo, { j }) => {
+  const flowPackages = ["@mittwald/flow-react-components"];
+  const removed = new Set(["ResetButtonProps", "SubmitButtonProps"]);
+  const newName = "ButtonProps";
+
+  /** The Flow package a module specifier belongs to, or `undefined`. */
+  const rootPackageOf = (source: string): string | undefined =>
+    flowPackages.find((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 = (node: object): boolean =>
+    (node as { importKind?: string }).importKind === "type";
+
+  const root = j(fileInfo.source, { parser: "tsx" });
+
+  /** Local identifiers that have to be renamed (no alias in play). */
+  const localRenames = new Set<string>();
+  /** Local names of `import * as Flow` namespace imports from a Flow package. */
+  const flowNamespaces = new Set<string>();
+  /** `package:local` pairs that already import `ButtonProps` from a root. */
+  const bound = new Set<string>();
+  /** `package:local` pairs that still need importing, and whether type-only. */
+  const wanted = new Map<
+    string,
+    { pkg: string; local: string; type: boolean }
+  >();
+
+  const flowImports = root
+    .find(j.ImportDeclaration)
+    .filter((path) => !!rootPackageOf(String(path.node.source.value)));
+
+  flowImports.forEach((path) => {
+    const source = String(path.node.source.value);
+    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" &&
+        specifier.imported.name === newName &&
+        source === rootPackageOf(source)
+      ) {
+        bound.add(`${source}:${String(specifier.local?.name ?? newName)}`);
+      }
+    }
+  });
+
+  flowImports.forEach((path) => {
+    const source = String(path.node.source.value);
+    const pkg = rootPackageOf(source) ?? source;
+    const declarationIsType = isTypeOnly(path.node);
+    const specifiers = path.node.specifiers ?? [];
+    const survivors: typeof specifiers = [];
+
+    for (const specifier of specifiers) {
+      if (
+        specifier.type !== "ImportSpecifier" ||
+        specifier.imported.type !== "Identifier" ||
+        !removed.has(specifier.imported.name)
+      ) {
+        survivors.push(specifier);
+        continue;
+      }
+
+      const imported = specifier.imported.name;
+      const local = String(specifier.local?.name ?? imported);
+      const isAlias = local !== imported;
+      const newLocal = isAlias ? local : newName;
+      const key = `${pkg}:${newLocal}`;
+
+      if (!isAlias) {
+        localRenames.add(local);
+      }
+
+      if (!bound.has(key)) {
+        const existing = wanted.get(key);
+        const type = declarationIsType || isTypeOnly(specifier);
+        wanted.set(key, {
+          pkg,
+          local: newLocal,
+          // A value import must not lose out to a type-only one.
+          type: existing ? existing.type && type : type,
+        });
+      }
+    }
+
+    if (survivors.length === specifiers.length) {
+      return;
+    }
+
+    // Leaving an emptied 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 (
+    wanted.size === 0 &&
+    localRenames.size === 0 &&
+    flowNamespaces.size === 0
+  ) {
+    return fileInfo.source;
+  }
+
+  for (const { pkg, local, type } of wanted.values()) {
+    const specifier = j.importSpecifier(
+      j.identifier(newName),
+      j.identifier(local),
+    );
+
+    // Join an import from the package root when the file already has one and
+    // it can carry the specifier; otherwise add a declaration of its own.
+    const host = root
+      .find(j.ImportDeclaration)
+      .filter(
+        (path) =>
+          String(path.node.source.value) === pkg &&
+          isTypeOnly(path.node) === type,
+      )
+      .paths()[0];
+
+    if (host) {
+      host.node.specifiers = [...(host.node.specifiers ?? []), specifier];
+      continue;
+    }
+
+    const declaration = j.importDeclaration([specifier], j.literal(pkg));
+    if (type) {
+      declaration.importKind = "type";
+    }
+
+    const firstImport = root.find(j.ImportDeclaration).paths()[0];
+    if (firstImport) {
+      j(firstImport).insertBefore(declaration);
+    } else {
+      root.get().node.program.body.unshift(declaration);
+    }
+  }
+
+  /**
+   * `JSXIdentifier` extends `Identifier`, so this one pass covers 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") &&
+        removed.has(path.node.name) &&
+        flowNamespaces.has(String(object.name))
+      ) {
+        path.node.name = newName;
+      }
+      return;
+    }
+
+    if (
+      parent.type === "ImportSpecifier" ||
+      parent.type === "JSXAttribute" ||
+      ((parent.type === "ObjectProperty" || parent.type === "Property") &&
+        parent.key === path.node &&
+        !parent.computed)
+    ) {
+      return;
+    }
+
+    if (localRenames.has(path.node.name)) {
+      path.node.name = newName;
+    }
+  });
+
+  return root.toSource();
+};
+
+export default buttonPropsInterfacesTransform;