vuetify-codemods 1.0.0

package/eslint.config.js

@@ -0,0 +1,9 @@
+import vuetify from 'eslint-config-vuetify'
+
+export default vuetify({
+  rules: {
+    'curly': ['error', 'multi-line', 'consistent'],
+    'complexity': 'off',
+    'unicorn/no-process-exit': 'off',
+  },
+})

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "vuetify-codemods",
+  "type": "module",
+  "version": "1.0.0",
+  "bin": {
+    "vuetify-codemods": "dist/main.js"
+  },
+  "scripts": {
+    "build": "tsc && vite build && chmod +x dist/main.js",
+    "lint": "eslint . --ext .ts",
+    "test": "vitest"
+  },
+  "license": "SSPL",
+  "homepage": "https://github.com/vuetifyjs/vuetify-codemods",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vuetifyjs/vuetify-codemods.git"
+  },
+  "dependencies": {
+    "@inquirer/prompts": "^8.3.0",
+    "esprima": "^4.0.1",
+    "lodash-es": "^4.17.23",
+    "vue-eslint-parser": "^10.4.0"
+  },
+  "devDependencies": {
+    "@types/node": "^24.10.13",
+    "ast-types-x": "^1.18.0",
+    "eslint": "^9.39.2",
+    "eslint-config-vuetify": "4.3.5-beta.1",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1",
+    "vitest": "^4.0.18",
+    "vue-metamorph": "^3.2.0"
+  },
+  "packageManager": "pnpm@10.30.0"
+}

package/patches/vue-metamorph.patch

@@ -0,0 +1,38 @@
+diff --git a/dist/main.js b/dist/main.js
+index 0c1f4080b23e8ab8f7f152ed29e8fe2254652883..d1f0d9403b904fb25b1c93b6fbcea0988e668c07 100644
+--- a/dist/main.js
++++ b/dist/main.js
+@@ -103,14 +103,18 @@ function stringifyVDirectiveKey(node) {
+   return str;
+ }
+ function stringifyVLiteral(node) {
+-  return node.value;
++  return `"${node.value}"`
+ }
+ function stringifyVAttribute(node) {
+-  let str = node.directive ? stringifyVDirectiveKey(node.key) : node.key.rawName;
++  let str = node.directive ? stringifyVDirectiveKey(node.key) : node.key.rawName
+   if (node.value) {
+-    str += `="${stringify(node.value)}"`;
++    if (node.value.type === 'VLiteral') {
++      str += `="${node.value.value}"`
++    } else {
++      str += `="${stringify(node.value)}"`
++    }
+   }
+-  return str;
++  return str
+ }
+ function stringifyVStartTag(node, isVoidElement = false) {
+   let str = "";
+@@ -935,10 +939,6 @@ function transformVueFile(code, filename, codemods, opts) {
+         if (path.at(-2) === "key") {
+           path.pop();
+         }
+-        if (path.at(-1) === "expression") {
+-          path.pop();
+-          path.pop();
+-        }
+         if (path.at(-1) === "body") {
+           path.pop();
+         }

package/pnpm-workspace.yaml

@@ -0,0 +1,5 @@
+ignoredBuiltDependencies:
+  - esbuild
+
+patchedDependencies:
+  vue-metamorph: patches/vue-metamorph.patch

package/src/helpers.ts

@@ -0,0 +1,259 @@
+import type { namedTypes } from 'ast-types-x'
+import type { AST as VueAST } from 'vue-eslint-parser'
+import type { AST, CodemodPluginContext } from 'vue-metamorph'
+import { astHelpers } from 'vue-metamorph'
+
+const camelizeRE = /-(\w)/g
+export function camelize (str: string): string {
+  return str.replace(camelizeRE, (_, c) => (c ? c.toUpperCase() : ''))
+}
+
+const classifyRE = /(?:^|[-_])(\w)/g
+export function classify (str: string): string {
+  return str
+    .replace(classifyRE, c => c.toUpperCase())
+    .replace(/[-_]/g, '')
+}
+
+export function findSlotNodes (
+  ast: AST.VDocumentFragment,
+  components: string[] | null,
+  slots: string[] | null,
+) {
+  return astHelpers.findAll(ast, {
+    type: 'VAttribute',
+    directive: true,
+    key: {
+      type: 'VDirectiveKey',
+      name: {
+        type: 'VIdentifier',
+        name: 'slot',
+      },
+    },
+  }).filter(node => {
+    if (components && !(
+      node.parent.type === 'VStartTag'
+      && (
+        (
+          node.parent.parent.name === 'template'
+          && node.parent.parent.parent.type === 'VElement'
+          && components.includes(classify(node.parent.parent.parent.rawName))
+        )
+        || components.includes(classify(node.parent.parent.rawName))
+      )
+    )) return false
+    if (slots && !(
+      node.key.type === 'VDirectiveKey'
+      && (
+        (!node.key.argument && slots.includes('default'))
+        || (
+          node.key.argument?.type === 'VIdentifier'
+          && slots.includes(node.key.argument.name)
+        )
+      )
+    )) return false
+    return true
+  })
+}
+
+export type Ref = { prop: namedTypes.Property | null, reference: VueAST.ESLintIdentifier }
+export function findSlotPropReferences (
+  slot: AST.VAttribute | AST.VDirective,
+  props: string[] | null,
+) {
+  const results: Ref[] = []
+  if (
+    !slot.value
+    || slot.value.type !== 'VExpressionContainer'
+    || slot.value.expression?.type !== 'VSlotScopeExpression'
+  ) return results
+  const slotExpression = slot.value.expression
+  // vue-metamorph has its own incomplete AST types for some
+  // reason instead of re-exporting them from vue-eslint-parser
+  const templateElement = slot.parent.parent as unknown as VueAST.VElement
+
+  const searchProps = new Set(props)
+
+  if (slotExpression.params.length === 1 && slotExpression.params[0]!.type === 'ObjectPattern') {
+    // Destructured props (v-slot="{ prop }")
+    for (const prop of slotExpression.params[0].properties) {
+      if (
+        prop.type === 'Property'
+        && prop.key.type === 'Identifier'
+        && searchProps.has(prop.key.name)
+      ) {
+        const variable = templateElement.variables.find(v =>
+          prop.value.type === 'Identifier'
+          && v.id.name === prop.value.name,
+        )
+        if (!variable) continue
+        for (const reference of variable.references) {
+          results.push({
+            prop,
+            reference: reference.id,
+          })
+        }
+      }
+    }
+  } else if (slotExpression.params.length === 1 && slotExpression.params[0]!.type === 'Identifier') {
+    // Non-destructured (v-slot="data")
+    const paramName = slotExpression.params[0].name
+    const paramVariable = templateElement.variables.find(v => v.id.name === paramName)
+    if (paramVariable) {
+      for (const reference of paramVariable.references) {
+        const memberExpr = reference.id.parent
+        if (
+          memberExpr?.type === 'MemberExpression'
+          && memberExpr.property.type === 'Identifier'
+          && searchProps.has(memberExpr.property.name)
+        ) {
+          results.push({
+            prop: null,
+            reference: memberExpr.property,
+          })
+        }
+      }
+    }
+  }
+  return results
+}
+
+// A map of components and props that should be treated the same as class
+const classProps = new Map<string, string | string[]>([
+  ['VAppBarNavIcon', 'selectedClass'],
+  ['VBottomNavigation', 'selectedClass'],
+  ['VBottomSheet', 'contentClass'],
+  ['VBreadcrumbs', 'activeClass'],
+  ['VBreadcrumbsItem', 'activeClass'],
+  ['VBtn', 'selectedClass'],
+  ['VBtnToggle', 'selectedClass'],
+  ['VCarousel', 'selectedClass'],
+  ['VCarouselItem', ['selectedClass', 'contentClass']],
+  ['VChip', ['activeClass', 'selectedClass']],
+  ['VChipGroup', ['contentClass', 'selectedClass']],
+  ['VDialog', 'contentClass'],
+  ['VExpansionPanel', 'selectedClass'],
+  ['VExpansionPanels', 'selectedClass'],
+  ['VFab', 'selectedClass'],
+  ['VFileUploadItem', 'activeClass'],
+  ['VImg', 'contentClass'],
+  ['VItem', 'selectedClass'],
+  ['VItemGroup', 'selectedClass'],
+  ['VList', 'activeClass'],
+  ['VListItem', 'activeClass'],
+  ['VMenu', 'contentClass'],
+  ['VOverlay', 'contentClass'],
+  ['VResponsive', 'contentClass'],
+  ['VSlideGroup', ['contentClass', 'selectedClass']],
+  ['VSlideGroupItem', 'selectedClass'],
+  ['VSnackbar', 'contentClass'],
+  ['VSnackbarQueue', 'contentClass'],
+  ['VSpeedDial', 'contentClass'],
+  ['VStepper', 'selectedClass'],
+  ['VStepperItem', 'selectedClass'],
+  ['VStepperVertical', 'selectedClass'],
+  ['VStepperVerticalItem', 'selectedClass'],
+  ['VStepperWindow', 'selectedClass'],
+  ['VStepperWindowItem', 'selectedClass'],
+  ['VTab', 'selectedClass'],
+  ['VTabs', ['selectedClass', 'contentClass']],
+  ['VTabsWindow', 'selectedClass'],
+  ['VTabsWindowItem', 'selectedClass'],
+  ['VTooltip', 'contentClass'],
+  ['VTreeview', 'activeClass'],
+  ['VTreeviewItem', 'activeClass'],
+  ['VWindow', 'selectedClass'],
+  ['VWindowItem', 'selectedClass'],
+])
+
+export function findClassNodes (ast: AST.VDocumentFragment, utils: CodemodPluginContext['utils'], match: string[]) {
+  const matchingRegexp = new RegExp(String.raw`(^|\s)(?:${match.join('|')})(?=$|\s)`)
+
+  const results: (AST.VLiteral | namedTypes.Literal | namedTypes.Identifier)[] = []
+
+  const attrs = astHelpers.findAll(ast, { type: 'VAttribute' })
+  for (const node of attrs) {
+    let attributeName: string
+    if (node.key.type === 'VIdentifier') {
+      attributeName = camelize(node.key.name)
+    } else if (
+      node.key.type === 'VDirectiveKey'
+      && node.key.name.name === 'bind'
+      && node.key.argument?.type === 'VIdentifier'
+    ) {
+      attributeName = camelize(node.key.argument.name)
+    } else {
+      continue
+    }
+
+    const elementName = classify(node.parent.parent.rawName)
+
+    const allowed = new Set<string>(['class'])
+    if (elementName && classProps.has(elementName)) {
+      const prop = classProps.get(elementName)
+      if (Array.isArray(prop)) for (const p of prop) allowed.add(camelize(p))
+      else if (prop) allowed.add(camelize(prop))
+    }
+
+    if (!allowed.has(attributeName)) continue
+
+    if (!node.value) continue
+
+    utils.traverseTemplateAST(node.value, {
+      enterNode (node) {
+        if (
+          (node.type === 'VLiteral' || node.type === 'Literal')
+          && typeof node.value === 'string'
+          && matchingRegexp.test(node.value)
+        ) {
+          results.push(node)
+        } else if (
+          node.type === 'Property'
+          && (node.key.type === 'Literal'
+            || (node.key.type === 'Identifier' && !node.computed)
+          )
+        ) {
+          results.push(node.key)
+        }
+      },
+    })
+  }
+
+  return results
+}
+
+export function removeDotMember (ref: VueAST.ESLintIdentifier, name: string) {
+  let current: VueAST.Node = ref
+  let count = 0
+
+  while (current?.parent) {
+    const parent: VueAST.Node = current.parent
+    if (parent.type !== 'MemberExpression') break
+
+    if (
+      parent.property.type === 'Identifier'
+      && parent.property.name === name
+      && !parent.computed
+      && parent.parent
+    ) {
+      if (replaceChildNode(parent.parent, parent, current)) {
+        count++
+      }
+      break
+    }
+
+    current = parent
+  }
+
+  return count
+}
+
+function replaceChildNode (parent: VueAST.Node, oldChild: VueAST.Node, newChild: VueAST.Node) {
+  for (const key of Object.keys(parent)) {
+    if ((parent as any)[key] === oldChild) {
+      (parent as any)[key] = newChild
+      return true
+    }
+  }
+  return false
+}

package/src/main.ts

@@ -0,0 +1,83 @@
+import { execSync } from 'node:child_process'
+import process from 'node:process'
+import { checkbox, confirm } from '@inquirer/prompts'
+import { createVueMetamorphCli } from 'vue-metamorph'
+import { vuetify4 } from './plugins/v4'
+
+try {
+  try {
+    execSync('git diff --quiet', { stdio: 'ignore' })
+  } catch {
+    const cont = await confirm({
+      message: 'Unstaged changes detected, do you want to continue?',
+    })
+    if (!cont) process.exit()
+  }
+
+  const choices = await checkbox({
+    message: 'Select codemods to apply',
+    required: true,
+    choices: [
+      {
+        value: 'vuetify-4-combobox-item-slot',
+        name: 'Combobox item slot',
+        description: 'https://vuetifyjs.com/en/getting-started/upgrade-guide/#vselect-vcombobox-vautocomplete',
+        checked: true,
+      },
+      {
+        value: 'vuetify-4-elevation',
+        name: 'Elevation',
+        description: 'https://vuetifyjs.com/en/getting-started/upgrade-guide/#elevation',
+        checked: true,
+      },
+      {
+        value: 'vuetify-4-form-slot-refs',
+        name: 'Form slot refs',
+        description: 'https://vuetifyjs.com/en/getting-started/upgrade-guide/#vform',
+        checked: true,
+      },
+      {
+        value: 'vuetify-4-grid',
+        name: 'Grid',
+        description: 'https://vuetifyjs.com/en/getting-started/upgrade-guide/#grid-system-vrow-and-vcol',
+        checked: true,
+      },
+      {
+        value: 'vuetify-4-snackbar-multiline',
+        name: 'Snackbar multi-line',
+        description: 'https://vuetifyjs.com/en/getting-started/upgrade-guide/#vsnackbar',
+        checked: true,
+      },
+      {
+        value: 'vuetify-4-snackbar-queue-slot',
+        name: 'SnackbarQueue default slot',
+        description: 'https://vuetifyjs.com/en/getting-started/upgrade-guide/#vsnackbarqueue',
+        checked: true,
+      },
+      {
+        value: 'vuetify-4-typography',
+        name: 'Typography',
+        description: 'https://vuetifyjs.com/en/getting-started/upgrade-guide/#typography',
+        checked: true,
+      },
+    ],
+  })
+
+  const cli = createVueMetamorphCli({
+    plugins: [
+      vuetify4(),
+    ].flat().filter(plugin => {
+      return choices.includes(plugin.name)
+    }),
+  })
+
+  process.on('SIGQUIT', cli.abort)
+  process.on('SIGTERM', cli.abort)
+  process.on('SIGINT', cli.abort)
+
+  await cli.run()
+} catch (error) {
+  if (!(error instanceof Error && error.name === 'ExitPromptError')) {
+    throw error
+  }
+}

package/src/plugins/v4/combobox-item-slot.spec.ts

@@ -0,0 +1,103 @@
+import { expect, it } from 'vitest'
+import { transform } from 'vue-metamorph'
+import { v4ComboboxItemSlotPlugin } from './combobox-item-slot'
+
+it('removes .raw if all usages are raw', () => {
+  const input = `
+  <template>
+    <VSelect item-title="name">
+      <template #item="{ item, props }">
+        <VListItem v-bind="props" :title="item.raw.name" />
+      </template>
+    </VSelect>
+  </template>
+`
+
+  expect(transform(input, 'file.vue', [v4ComboboxItemSlotPlugin]).code).toMatchInlineSnapshot(`
+    "
+      <template>
+        <VSelect item-title="name">
+          <template #item="{ item, props }">
+            <VListItem v-bind="props" :title="item.name" />
+          </template>
+        </VSelect>
+      </template>
+    "
+  `)
+})
+
+it('aliases item to internalItem', () => {
+  const input = `
+  <template>
+    <VSelect item-title="name">
+      <template #item="{ item, props }">
+        <VListItem v-bind="props" :title="item.title" />
+        <VListItem v-bind="props" :title="item.raw.name" />
+      </template>
+    </VSelect>
+  </template>
+`
+
+  expect(transform(input, 'file.vue', [v4ComboboxItemSlotPlugin]).code).toMatchInlineSnapshot(`
+    "
+      <template>
+        <VSelect item-title="name">
+          <template #item="{ internalItem: item, props }">
+            <VListItem v-bind="props" :title="item.title" />
+            <VListItem v-bind="props" :title="item.raw.name" />
+          </template>
+        </VSelect>
+      </template>
+    "
+  `)
+})
+
+it('handles already aliased values', () => {
+  const input = `
+  <template>
+    <VSelect item-title="name">
+      <template #item="{ item: selectItem, props }">
+        <VListItem v-bind="props" :title="selectItem.title" />
+      </template>
+    </VSelect>
+  </template>
+`
+
+  expect(transform(input, 'file.vue', [v4ComboboxItemSlotPlugin]).code).toMatchInlineSnapshot(`
+    "
+      <template>
+        <VSelect item-title="name">
+          <template #item="{ internalItem: selectItem, props }">
+            <VListItem v-bind="props" :title="selectItem.title" />
+          </template>
+        </VSelect>
+      </template>
+    "
+  `)
+})
+
+it('handles non-destructured values', () => {
+  const input = `
+  <template>
+    <VSelect item-title="name">
+      <template #item="data">
+        <VListItem v-bind="data.props" :title="data.item.title" />
+        <VListItem v-bind="data.props" :title="data.item.raw.name" />
+      </template>
+    </VSelect>
+  </template>
+`
+
+  expect(transform(input, 'file.vue', [v4ComboboxItemSlotPlugin]).code).toMatchInlineSnapshot(`
+    "
+      <template>
+        <VSelect item-title="name">
+          <template #item="data">
+            <VListItem v-bind="data.props" :title="data.internalItem.title" />
+            <VListItem v-bind="data.props" :title="data.item.name" />
+          </template>
+        </VSelect>
+      </template>
+    "
+  `)
+})

package/src/plugins/v4/combobox-item-slot.ts

@@ -0,0 +1,100 @@
+import type { CodemodPlugin } from 'vue-metamorph'
+import type { Ref } from '../../helpers'
+import { findSlotNodes, findSlotPropReferences, removeDotMember } from '../../helpers'
+
+export const v4ComboboxItemSlotPlugin: CodemodPlugin = {
+  type: 'codemod',
+  name: 'vuetify-4-combobox-item-slot',
+  transform ({ sfcAST }) {
+    if (!sfcAST) return 0
+    let count = 0
+
+    const slotNodes = findSlotNodes(
+      sfcAST,
+      ['VSelect', 'VAutocomplete', 'VCombobox'],
+      ['item', 'chip', 'selection'],
+    )
+
+    for (const node of slotNodes) {
+      const refs = findSlotPropReferences(node, ['item'])
+
+      const destructuredRefs = new Map<string, Ref[]>()
+      const variableRefs: Ref[] = []
+
+      for (const ref of refs) {
+        if (ref.prop) {
+          if (ref.prop.key.type !== 'Identifier') continue
+          const arr = destructuredRefs.get(ref.prop.key.name) ?? []
+          arr.push(ref)
+          destructuredRefs.set(ref.prop.key.name, arr)
+        } else {
+          variableRefs.push(ref)
+        }
+      }
+
+      // Process destructured refs (e.g. v-slot="{ item }")
+      const destructuredItemRefs = destructuredRefs.get('item') ?? []
+      if (destructuredItemRefs.length > 0) {
+        let hasRaw = false
+        let hasNonRaw = false
+        for (const ref of destructuredItemRefs) {
+          const parent = ref.reference.parent
+          if (parent?.type === 'MemberExpression' && parent.property.type === 'Identifier') {
+            if (parent.property.name === 'raw') hasRaw = true
+            else hasNonRaw = true
+          }
+        }
+
+        if (hasNonRaw) {
+          // Alias item -> internalItem in the object pattern
+          if (
+            node.value?.type === 'VExpressionContainer'
+            && node.value.expression?.type === 'VSlotScopeExpression'
+          ) {
+            const obj = node.value.expression.params?.[0]
+            if (obj?.type === 'ObjectPattern') {
+              for (const prop of obj.properties) {
+                if (
+                  prop.type === 'Property'
+                  && prop.key.type === 'Identifier'
+                  && prop.key.name === 'item'
+                ) {
+                  prop.key.name = 'internalItem'
+                  prop.shorthand = false
+                  count++
+                  break
+                }
+              }
+            }
+          }
+        } else if (hasRaw) {
+          // Remove .raw: item.raw.x -> item.x
+          for (const ref of destructuredItemRefs) {
+            count += removeDotMember(ref.reference, 'raw')
+          }
+        }
+      }
+
+      // Process variable refs (e.g. v-slot="data")
+      for (const ref of variableRefs) {
+        // ref.reference.parent is the `data.item` MemberExpression
+        const itemMember = ref.reference.parent
+        if (
+          itemMember?.type === 'MemberExpression'
+          && itemMember.parent?.type === 'MemberExpression'
+          && itemMember.parent.property.type === 'Identifier'
+          && itemMember.parent.property.name === 'raw'
+        ) {
+          // Remove .raw: data.item.raw.x -> data.item.x
+          count += removeDotMember(ref.reference, 'raw')
+        } else {
+          // Rename data.item -> data.internalItem
+          ref.reference.name = 'internalItem'
+          count++
+        }
+      }
+    }
+
+    return count
+  },
+}

package/src/plugins/v4/elevation.spec.ts

@@ -0,0 +1,23 @@
+import { expect, it } from 'vitest'
+import { transform } from 'vue-metamorph'
+import { v4ElevationPlugin } from './elevation'
+
+it('updates elevation values', () => {
+  const input = `
+<template>
+  <VAlert elevation="5" />
+  <div class="elevation-23" />
+  <VMenu content-class="bg-surface elevation-16" />
+</template>
+`
+
+  expect(transform(input, 'file.vue', [v4ElevationPlugin]).code).toMatchInlineSnapshot(`
+    "
+    <template>
+      <VAlert elevation="2" />
+      <div class="elevation-5" />
+      <VMenu content-class="bg-surface elevation-4" />
+    </template>
+    "
+  `)
+})