vuetify-codemods 1.0.0 → 1.0.1

package/README.md

@@ -15,3 +15,13 @@ npx vuetify-codemods@latest
 #### `--files <glob>`
 
 Default: `**/src/**/*`
+
+## Included rules
+
+- [Combobox item slot](https://vuetifyjs.com/en/getting-started/upgrade-guide/#vselect-vcombobox-vautocomplete)
+- [Elevation](https://vuetifyjs.com/en/getting-started/upgrade-guide/#elevation)
+- [Form slot refs](https://vuetifyjs.com/en/getting-started/upgrade-guide/#vform)
+- [Grid](https://vuetifyjs.com/en/getting-started/upgrade-guide/#grid-system-vrow-and-vcol)
+- [Snackbar multi-line](https://vuetifyjs.com/en/getting-started/upgrade-guide/#vsnackbar)
+- [SnackbarQueue default slot](https://vuetifyjs.com/en/getting-started/upgrade-guide/#vsnackbarqueue)
+- [Typography](https://vuetifyjs.com/en/getting-started/upgrade-guide/#typography)

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vuetify-codemods",
   "type": "module",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "bin": {
     "vuetify-codemods": "dist/main.js"
   },
@@ -16,6 +16,9 @@
     "type": "git",
     "url": "git+https://github.com/vuetifyjs/vuetify-codemods.git"
   },
+  "files": [
+    "dist"
+  ],
   "dependencies": {
     "@inquirer/prompts": "^8.3.0",
     "esprima": "^4.0.1",
@@ -25,6 +28,8 @@
   "devDependencies": {
     "@types/node": "^24.10.13",
     "ast-types-x": "^1.18.0",
+    "conventional-changelog-cli": "^5.0.0",
+    "conventional-changelog-vuetify": "^2.0.2",
     "eslint": "^9.39.2",
     "eslint-config-vuetify": "4.3.5-beta.1",
     "typescript": "^5.9.3",

package/.nvmrc

@@ -1 +0,0 @@
-24.12.0

package/eslint.config.js

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

package/patches/vue-metamorph.patch

@@ -1,38 +0,0 @@
-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

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

package/src/helpers.ts

@@ -1,259 +0,0 @@
-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

@@ -1,83 +0,0 @@
-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

@@ -1,103 +0,0 @@
-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

@@ -1,100 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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>
-    "
-  `)
-})