@carto/ps-react-ui 5.1.0 → 6.0.0

package/src/migration/v4/transforms/v5-v6.ts

@@ -0,0 +1,161 @@
+/**
+ * MUI v5 → v6 rewrites.
+ *
+ * The smallest jump: in a 900-file codebase this moved one line. It is still
+ * worth running, because two of the three rules here fail silently.
+ */
+import {
+  annotate,
+  attribute,
+  attributeValue,
+  elementsNamed,
+  ensureImport,
+  isUsed,
+  mergeIntoSx,
+  removeAttributes,
+  nameOf,
+  removeImport,
+  stringValue,
+  type RuleContext,
+} from './helpers'
+
+/** The props `ListItem` lost; all of them live on `ListItemButton` now. */
+const LIST_ITEM_BUTTON_PROPS = ['button', 'autoFocus', 'disabled', 'selected']
+
+/**
+ * `<ListItem button>` → `<ListItemButton>`.
+ *
+ * `button` disappears (it is what the new component *is*); the other three
+ * props move across unchanged.
+ */
+export function listItemRemovedProps({ j, root }: RuleContext): number {
+  let changed = 0
+
+  elementsNamed(j, root, ['ListItem']).forEach((path) => {
+    const opening = path.node.openingElement
+    const hasRemoved = LIST_ITEM_BUTTON_PROPS.some((name) =>
+      attribute(opening, name),
+    )
+    if (!hasRemoved) return
+
+    removeAttributes(opening, ['button'])
+    opening.name = j.jsxIdentifier('ListItemButton')
+    if (path.node.closingElement) {
+      path.node.closingElement.name = j.jsxIdentifier('ListItemButton')
+    }
+    changed += 1
+  })
+
+  if (changed > 0) {
+    ensureImport(j, root, '@mui/material', 'ListItemButton')
+    if (!isUsed(j, root, 'ListItem')) {
+      removeImport(j, root, '@mui/material', 'ListItem')
+    }
+  }
+  return changed
+}
+
+/**
+ * `<Typography color={(theme) => …}>` → `sx={{ color: (theme) => … }}`.
+ *
+ * Only the callback spelling breaks here. `color='text.secondary'` still
+ * resolves through v6 and v7 and is handled in the v7 → v9 pass, so leaving
+ * it alone is correct rather than an omission.
+ */
+export function typographyColorCallback({ j, root }: RuleContext): number {
+  let changed = 0
+
+  elementsNamed(j, root, ['Typography']).forEach((path) => {
+    const opening = path.node.openingElement
+    const color = attribute(opening, 'color')
+    if (!color || color.value?.type !== 'JSXExpressionContainer') return
+
+    const expression = color.value.expression
+    if (
+      expression.type !== 'ArrowFunctionExpression' &&
+      expression.type !== 'FunctionExpression'
+    ) {
+      return
+    }
+
+    // `sx` takes a callback per property, so the function moves across as
+    // it is written — no need to unwrap the theme argument.
+    if (!mergeIntoSx(j, opening, [['color', attributeValue(j, color)]])) {
+      if (
+        annotate(
+          j,
+          path,
+          "Typography's `color` callback must move into `sx`, which here is not an object literal.",
+        )
+      ) {
+        changed += 1
+      }
+      return
+    }
+    removeAttributes(opening, ['color'])
+    changed += 1
+  })
+
+  return changed
+}
+
+/** The DOM queries that take a selector as their first argument. */
+const SELECTOR_QUERIES = new Set([
+  'querySelector',
+  'querySelectorAll',
+  'locator',
+  '$',
+  '$$',
+])
+
+/**
+ * `querySelectorAll('hr')` → `querySelectorAll('.MuiDivider-root')`.
+ *
+ * A vertical `Divider` renders a `<div>`. The reason this rule is worth a
+ * rewrite rather than a report is that the broken query returns zero both
+ * before and after the upgrade, so the assertion around it keeps passing
+ * while asserting nothing — there is no failure to lead anyone here.
+ */
+export function dividerHrSelector({ j, root }: RuleContext): number {
+  let changed = 0
+
+  root.find(j.CallExpression).forEach((path) => {
+    const { callee, arguments: args } = path.node
+    if (callee.type !== 'MemberExpression') return
+    if (!SELECTOR_QUERIES.has(nameOf(callee.property))) return
+
+    const first = args[0]
+    const selector = stringValue(first)
+    if (first?.type !== 'StringLiteral' || selector === undefined) return
+    if (!/(^|[\s,>+~])hr(\s|$|,|\.|\[|:)/.test(`${selector} `)) return
+
+    first.value = selector.replace(/(^|[\s,>+~])hr\b/g, '$1.MuiDivider-root')
+    changed += 1
+  })
+
+  // `getElementsByTagName('hr')` has no class-based equivalent to rewrite
+  // it to, so it is flagged instead of changed.
+  root
+    .find(j.CallExpression, {
+      callee: { property: { name: 'getElementsByTagName' } },
+    })
+    .forEach((path) => {
+      if (stringValue(path.node.arguments[0]) !== 'hr') return
+      if (
+        annotate(
+          j,
+          path,
+          'A vertical Divider renders a <div>, not an <hr>. Query `.MuiDivider-root` instead.',
+        )
+      ) {
+        changed += 1
+      }
+    })
+
+  return changed
+}
+
+/** `hr.MuiDivider-root` and bare `hr` rules in a stylesheet. */
+export function dividerHrSelectorText(source: string): string {
+  return source.replace(/\bhr\.MuiDivider-root\b/g, '.MuiDivider-root')
+}

package/src/migration/v4/transforms/v6-v7.ts

@@ -0,0 +1,342 @@
+/**
+ * MUI v6 → v7 rewrites.
+ *
+ * `@mui/codemod`'s own `v7.0.0/all` is a no-op in 9.4.0 — it runs both of
+ * its sub-transforms and then returns the source it was handed — so the
+ * Grid and lab work is done here rather than delegated.
+ */
+import {
+  annotate,
+  attribute,
+  attributeValue,
+  elementsNamed,
+  ensureImport,
+  importKind,
+  nameOf,
+  parentType,
+  removeAttributes,
+  removeImport,
+  type RuleContext,
+} from './helpers'
+
+const BREAKPOINTS = ['xs', 'sm', 'md', 'lg', 'xl'] as const
+
+/**
+ * `<Grid item xs={12} md={8}>` → `<Grid size={{ xs: 12, md: 8 }}>`.
+ *
+ * `item` disappears, a single breakpoint collapses to `size={8}` rather
+ * than an object, and a bare `xs` becomes `size='grow'` — the v7 spelling
+ * of "take the remaining space".
+ */
+export function gridItemProp({ j, root }: RuleContext): number {
+  let changed = 0
+
+  elementsNamed(j, root, ['Grid']).forEach((path) => {
+    const opening = path.node.openingElement
+    const item = attribute(opening, 'item')
+    const breakpoints = BREAKPOINTS.map(
+      (name) => [name, attribute(opening, name)] as const,
+    ).filter((entry) => entry[1] !== undefined)
+
+    if (!item && breakpoints.length === 0) return
+
+    if (breakpoints.length > 0 && !attribute(opening, 'size')) {
+      const entries = breakpoints.map(([name, attr]) => {
+        // A valueless breakpoint (`<Grid item xs>`) meant "fill what is
+        // left", which v7 spells `grow`.
+        const value =
+          attr?.value == null
+            ? j.stringLiteral('grow')
+            : attributeValue(j, attr)
+        return [name, value] as const
+      })
+
+      const only = entries.length === 1 ? entries[0]! : undefined
+      const size =
+        only?.[0] === 'xs'
+          ? only[1]
+          : j.objectExpression(
+              entries.map(([name, value]) =>
+                j.objectProperty(j.identifier(name), value),
+              ),
+            )
+
+      opening.attributes = [
+        ...(opening.attributes ?? []),
+        j.jsxAttribute(j.jsxIdentifier('size'), j.jsxExpressionContainer(size)),
+      ]
+    }
+
+    removeAttributes(opening, ['item', ...BREAKPOINTS])
+    changed += 1
+  })
+
+  return changed
+}
+
+/**
+ * `GridLegacy` → `Grid`.
+ *
+ * It exists so the Grid work can be deferred, and it is removed in v9, so
+ * deferring only moves the cost one jump later. Renaming it here hands the
+ * element to `gridItemProp`, which must run after this.
+ */
+export function gridLegacy({ j, root }: RuleContext): number {
+  let changed = 0
+
+  root
+    .find(j.ImportSpecifier, { imported: { name: 'GridLegacy' } })
+    .forEach((path) => {
+      // `import { GridLegacy as Grid }` already renders as `Grid`; only the
+      // imported name has to change.
+      path.node.imported = j.identifier('Grid')
+      if (path.node.local?.name === 'GridLegacy') {
+        path.node.local = j.identifier('Grid')
+      }
+      changed += 1
+    })
+
+  root.find(j.JSXIdentifier, { name: 'GridLegacy' }).forEach((path) => {
+    path.node.name = 'Grid'
+    changed += 1
+  })
+
+  root
+    .find(j.Identifier, { name: 'GridLegacy' })
+    .filter((path) => parentType(path) !== 'ImportSpecifier')
+    .forEach((path) => {
+      path.node.name = 'Grid'
+      changed += 1
+    })
+
+  return changed
+}
+
+/**
+ * Flags a `Grid container` that does not set its own width.
+ *
+ * No rewrite: whether it needs `width: '100%'` depends on the parent, which
+ * is usually in another file. The v1 container was 100% wide by default and
+ * the v7 one shrinks to its content inside a flex parent, so the column
+ * split silently collapses — the sizes still apply, to a container that is
+ * now too narrow.
+ */
+export function gridContainerWidth({ j, root }: RuleContext): number {
+  let changed = 0
+
+  elementsNamed(j, root, ['Grid']).forEach((path) => {
+    const opening = path.node.openingElement
+    if (!attribute(opening, 'container')) return
+
+    const source = j(opening).toSource()
+    if (/\bwidth\b/.test(source)) return
+
+    if (
+      annotate(
+        j,
+        path,
+        "Grid container: the v1 one was 100% wide by default, the v7 one shrinks to its content inside a flex parent. Add `width: '100%'` if it must fill.",
+      )
+    ) {
+      changed += 1
+    }
+  })
+
+  return changed
+}
+
+/**
+ * `@mui/material/styles/createTypography` → `@mui/material/styles`.
+ *
+ * Where it lands depends on how the file imports it, and getting this wrong
+ * compiles into a different error rather than failing loudly:
+ *
+ * - A DEFAULT import goes to the one-level entry point, which is what has
+ *   the default export: `@mui/material/Box/Box` → `@mui/material/Box`.
+ * - NAMED imports go to the package root. The one-level entry point only
+ *   re-exports part of its own surface —
+ *   `@mui/material/TablePagination/TablePaginationActions` truncated to
+ *   `@mui/material/TablePagination` loses `TablePaginationActionsProps`,
+ *   which lives on the root.
+ */
+export function deepImport({ j, root }: RuleContext): number {
+  let changed = 0
+
+  root.find(j.ImportDeclaration).forEach((path) => {
+    const source = String(path.node.source.value ?? '')
+    const match = /^(@mui\/(?:material|system|icons-material))\/(.+)$/.exec(
+      source,
+    )
+    if (!match) return
+
+    const [, scope, rest] = match
+    const segments = rest!.split('/')
+    if (segments.length < 2) return
+
+    const hasDefault = (path.node.specifiers ?? []).some(
+      (specifier) => specifier.type === 'ImportDefaultSpecifier',
+    )
+    path.node.source = j.stringLiteral(
+      hasDefault ? `${scope}/${segments[0]}` : scope!,
+    )
+    changed += 1
+
+    // The type moved and was renamed in the same release, and the compiler
+    // does not suggest the new name.
+    path.node.specifiers?.forEach((specifier) => {
+      if (
+        specifier.type === 'ImportSpecifier' &&
+        nameOf(specifier.imported) === 'Variant'
+      ) {
+        specifier.imported = j.identifier('TypographyVariant')
+        if (!specifier.local || nameOf(specifier.local) === 'Variant') {
+          root
+            .find(j.Identifier, { name: 'Variant' })
+            .filter((other) => parentType(other) !== 'ImportSpecifier')
+            .forEach((other) => {
+              other.node.name = 'TypographyVariant'
+            })
+          specifier.local = j.identifier('TypographyVariant')
+        }
+      }
+    })
+  })
+
+  return changed
+}
+
+/**
+ * The `@mui/lab` exports that graduated into core in v7. Everything else —
+ * `Timeline` above all — is still lab-only at every major, which is why the
+ * dependency does not go away after this runs.
+ */
+const GRADUATED_FROM_LAB = [
+  'Alert',
+  'AlertTitle',
+  'Autocomplete',
+  'AvatarGroup',
+  'Pagination',
+  'PaginationItem',
+  'Rating',
+  'Skeleton',
+  'SpeedDial',
+  'SpeedDialAction',
+  'SpeedDialIcon',
+  'ToggleButton',
+  'ToggleButtonGroup',
+]
+
+const GRADUATED = new Set([
+  ...GRADUATED_FROM_LAB,
+  ...GRADUATED_FROM_LAB.map((name) => `${name}Props`),
+  ...GRADUATED_FROM_LAB.map((name) => `${name}Classes`),
+])
+
+/** Moves the graduated `@mui/lab` imports to `@mui/material`. */
+export function muiLabImport({ j, root }: RuleContext): number {
+  let changed = 0
+
+  root
+    .find(j.ImportDeclaration)
+    .filter((path) => String(path.node.source.value ?? '') === '@mui/lab')
+    .forEach((path) => {
+      const moving = (path.node.specifiers ?? []).filter(
+        (specifier) =>
+          specifier.type === 'ImportSpecifier' &&
+          GRADUATED.has(nameOf(specifier.imported)),
+      )
+      if (moving.length === 0) return
+
+      // `import type { AlertProps }` has to land as a type import too.
+      const kind = importKind(path.node)
+      moving.forEach((specifier) => {
+        if (specifier.type !== 'ImportSpecifier') return
+        const name = nameOf(specifier.imported)
+        ensureImport(
+          j,
+          root,
+          '@mui/material',
+          name,
+          importKind(specifier) === 'type' ? 'type' : kind,
+        )
+        removeImport(j, root, '@mui/lab', name)
+        changed += 1
+      })
+    })
+
+  // A deep lab import of a graduated component: `@mui/lab/Alert`.
+  root
+    .find(j.ImportDeclaration)
+    .filter((path) => {
+      const source = String(path.node.source.value ?? '')
+      return (
+        source.startsWith('@mui/lab/') &&
+        GRADUATED.has(source.slice('@mui/lab/'.length))
+      )
+    })
+    .forEach((path) => {
+      const name = String(path.node.source.value).slice('@mui/lab/'.length)
+      path.node.source = j.stringLiteral(`@mui/material/${name}`)
+      changed += 1
+    })
+
+  return changed
+}
+
+/**
+ * Removes the dead narrowing around a `Slider` value.
+ *
+ * v7 narrows the value from `number | number[]` to `number`, so the cast is
+ * redundant and the `Array.isArray` guard is unreachable — and the
+ * unreachable branch narrows to `never`, which leaks `any` into the setter.
+ * `tsc` stays silent about both; only ESLint fails, which is why the guide
+ * insists on running it.
+ */
+export function sliderValueNarrowing({ j, root }: RuleContext): number {
+  let changed = 0
+
+  elementsNamed(j, root, ['Slider']).forEach((element) => {
+    for (const name of ['onChange', 'onChangeCommitted']) {
+      const handler = attribute(element.node.openingElement, name)
+      if (!handler) continue
+
+      const scope = j(handler)
+
+      scope
+        .find(j.TSAsExpression)
+        .filter((path) => {
+          const annotation = path.node.typeAnnotation
+          return (
+            annotation.type === 'TSNumberKeyword' ||
+            (annotation.type === 'TSArrayType' &&
+              annotation.elementType.type === 'TSNumberKeyword')
+          )
+        })
+        .forEach((path) => {
+          j(path).replaceWith(path.node.expression)
+          changed += 1
+        })
+
+      scope
+        .find(j.ConditionalExpression)
+        .filter((path) => {
+          const test = path.node.test
+          return (
+            test.type === 'CallExpression' &&
+            test.callee.type === 'MemberExpression' &&
+            test.callee.object.type === 'Identifier' &&
+            test.callee.object.name === 'Array' &&
+            test.callee.property.type === 'Identifier' &&
+            test.callee.property.name === 'isArray'
+          )
+        })
+        .forEach((path) => {
+          // The guard tested the value; the value itself is the alternate.
+          j(path).replaceWith(path.node.alternate)
+          changed += 1
+        })
+    }
+  })
+
+  return changed
+}