vuetify-codemods 1.0.0

package/src/plugins/v4/elevation.ts

@@ -0,0 +1,97 @@
+import type { CodemodPlugin } from 'vue-metamorph'
+import { camelize, classify, findClassNodes } from '../../helpers'
+
+const elevationComponents = new Set([
+  'VAlert',
+  'VAppBar',
+  'VAppBarNavIcon',
+  'VBanner',
+  'VBottomNavigation',
+  'VBtn',
+  'VBtnGroup',
+  'VBtnToggle',
+  'VCard',
+  'VChip',
+  'VColorInput',
+  'VColorPicker',
+  'VDateInput',
+  'VDatePicker',
+  'VExpansionPanel',
+  'VExpansionPanels',
+  'VFab',
+  'VFileUpload',
+  'VFileUploadItem',
+  'VFooter',
+  'VHotkey',
+  'VIconBtn',
+  'VKbd',
+  'VList',
+  'VListItem',
+  'VNavigationDrawer',
+  'VPagination',
+  'VPicker',
+  'VRangeSlider',
+  'VSheet',
+  'VSkeletonLoader',
+  'VSlider',
+  'VStepper',
+  'VStepperVertical',
+  'VStepperVerticalItem',
+  'VSystemBar',
+  'VTab',
+  'VTimePicker',
+  'VTimelineItem',
+  'VToolbar',
+  'VTreeview',
+  'VTreeviewItem',
+  'VVideo',
+  'VVideoControls',
+])
+
+const mapping = [0, 1, 1, 1, 2, 2, 2, 3, 3, 3, 3, 3, 4, 4, 4, 4, 4, 5, 5, 5, 5, 5, 5, 5, 5]
+
+const elevationMatch = String.raw`elevation-(\d{1,2})`
+const elevationRegexp = new RegExp(String.raw`(^|\s)${elevationMatch}(?=$|\s)`, 'g')
+
+export const v4ElevationPlugin: CodemodPlugin = {
+  type: 'codemod',
+  name: 'vuetify-4-elevation',
+  transform ({ sfcAST, utils }) {
+    if (!sfcAST) return 0
+    let count = 0
+
+    // Match classes
+    const found = findClassNodes(sfcAST, utils, [elevationMatch])
+    for (const node of found) {
+      if (node.type === 'Identifier') {
+        node.name = node.name.replaceAll(elevationRegexp, (_, s, n) => `${s}elevation-${mapping[Number(n)]}`)
+        count++
+      } else if (typeof node.value === 'string') {
+        node.value = node.value.replaceAll(elevationRegexp, (_, s, n) => `${s}elevation-${mapping[Number(n)]}`)
+        count++
+      }
+    }
+
+    // Match elevation props
+    utils.traverseTemplateAST(sfcAST, {
+      enterNode (node) {
+        if (node.type === 'VElement') {
+          const elementName = classify(node.rawName)
+          for (const attribute of node.startTag.attributes) {
+            if (attribute.key.type !== 'VIdentifier') continue
+            const attributeName = camelize(attribute.key.name)
+            if (
+              elevationComponents.has(elementName)
+              && attributeName === 'elevation'
+              && attribute.value?.type === 'VLiteral'
+            ) {
+              attribute.value.value = String(mapping[Number(attribute.value.value)])
+              count++
+            }
+          }
+        }
+      },
+    })
+    return count
+  },
+}

package/src/plugins/v4/form-slot-refs.spec.ts

@@ -0,0 +1,51 @@
+import { expect, it } from 'vitest'
+import { transform } from 'vue-metamorph'
+import { v4FormSlotRefsPlugin } from './form-slot-refs'
+
+it('destructured', () => {
+  const input = `
+<template>
+  <VForm>
+    <template #default="{ isValid }">
+      {{ isValid.value }}
+    </template>
+  </VForm>
+</template>
+`
+
+  expect(transform(input, 'file.vue', [v4FormSlotRefsPlugin]).code).toMatchInlineSnapshot(`
+    "
+    <template>
+      <VForm>
+        <template #default="{ isValid }">
+          {{ isValid }}
+        </template>
+      </VForm>
+    </template>
+    "
+  `)
+})
+
+it('variable', () => {
+  const input = `
+<template>
+  <VForm>
+    <template #default="data">
+      {{ data.isValid.value }}
+    </template>
+  </VForm>
+</template>
+`
+
+  expect(transform(input, 'file.vue', [v4FormSlotRefsPlugin]).code).toMatchInlineSnapshot(`
+    "
+    <template>
+      <VForm>
+        <template #default="data">
+          {{ data.isValid }}
+        </template>
+      </VForm>
+    </template>
+    "
+  `)
+})

package/src/plugins/v4/form-slot-refs.ts

@@ -0,0 +1,22 @@
+import type { CodemodPlugin } from 'vue-metamorph'
+import { findSlotNodes, findSlotPropReferences, removeDotMember } from '../../helpers'
+
+export const v4FormSlotRefsPlugin: CodemodPlugin = {
+  type: 'codemod',
+  name: 'vuetify-4-form-slot-refs',
+  transform ({ sfcAST }) {
+    if (!sfcAST) return 0
+    let count = 0
+    const slotNodes = findSlotNodes(sfcAST, ['VForm'], ['default'])
+    for (const node of slotNodes) {
+      const refs = findSlotPropReferences(
+        node,
+        ['errors', 'isDisabled', 'isReadonly', 'isValidating', 'isValid', 'items'],
+      )
+      for (const ref of refs) {
+        count += removeDotMember(ref.reference, 'value')
+      }
+    }
+    return count
+  },
+}

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

@@ -0,0 +1,282 @@
+import { describe, expect, it } from 'vitest'
+import { transform } from 'vue-metamorph'
+import { v4GridPlugin } from './grid'
+
+describe('VRow', () => {
+  describe('dense', () => {
+    it('converts dense to density="compact"', () => {
+      const input = `
+<template>
+  <v-row dense />
+  <v-row dense><v-col /></v-row>
+</template>
+`
+      expect(transform(input, 'file.vue', [v4GridPlugin]).code).toMatchInlineSnapshot(`
+      "
+      <template>
+        <v-row density="compact" />
+        <v-row density="compact"><v-col /></v-row>
+      </template>
+      "
+    `)
+    })
+
+    it('leaves :dense binding untouched', () => {
+      const input = `
+<template>
+  <v-row :dense="condition" />
+</template>
+`
+      expect(transform(input, 'file.vue', [v4GridPlugin]).code).toMatchInlineSnapshot(`
+      "
+      <template>
+        <v-row :dense="condition" />
+      </template>
+      "
+    `)
+    })
+  })
+
+  describe('alignment props', () => {
+    it('converts align, justify, align-content to utility classes', () => {
+      const input = `
+<template>
+  <v-row align="center" justify="space-between" />
+  <v-row align-content="start" />
+</template>
+`
+      expect(transform(input, 'file.vue', [v4GridPlugin]).code).toMatchInlineSnapshot(`
+      "
+      <template>
+        <v-row class="align-center justify-space-between" />
+        <v-row class="align-content-start" />
+      </template>
+      "
+    `)
+    })
+
+    it('converts responsive breakpoint variants', () => {
+      const input = `
+<template>
+  <v-row align-sm="start" align-md="center" justify-lg="end" />
+</template>
+`
+      expect(transform(input, 'file.vue', [v4GridPlugin]).code).toMatchInlineSnapshot(`
+      "
+      <template>
+        <v-row class="align-sm-start align-md-center justify-lg-end" />
+      </template>
+      "
+    `)
+    })
+
+    it('appends to an existing class attribute', () => {
+      const input = `
+<template>
+  <v-row class="ma-4" align="center" justify="end" />
+</template>
+`
+      expect(transform(input, 'file.vue', [v4GridPlugin]).code).toMatchInlineSnapshot(`
+      "
+      <template>
+        <v-row class="ma-4 align-center justify-end" />
+      </template>
+      "
+    `)
+    })
+
+    it('leaves dynamic align/justify bindings untouched', () => {
+      const input = `
+<template>
+  <v-row :align="direction" :justify="condition ? 'start' : 'end'" />
+</template>
+`
+      expect(transform(input, 'file.vue', [v4GridPlugin]).code).toMatchInlineSnapshot(`
+      "
+      <template>
+        <v-row :align="direction" :justify="condition ? 'start' : 'end'" />
+      </template>
+      "
+    `)
+    })
+
+    it('does not transform align/justify on non-VRow elements', () => {
+      const input = `
+<template>
+  <v-container align="center" />
+  <div justify="end" />
+</template>
+`
+      expect(transform(input, 'file.vue', [v4GridPlugin]).code).toMatchInlineSnapshot(`
+      "
+      <template>
+        <v-container align="center" />
+        <div justify="end" />
+      </template>
+      "
+    `)
+    })
+  })
+
+  describe('combined', () => {
+    it('handles dense + alignment props together', () => {
+      const input = `
+<template>
+  <v-row dense align="center" justify-md="end" />
+</template>
+`
+      expect(transform(input, 'file.vue', [v4GridPlugin]).code).toMatchInlineSnapshot(`
+      "
+      <template>
+        <v-row class="align-center justify-md-end" density="compact" />
+      </template>
+      "
+    `)
+    })
+
+    it('leaves unrelated props untouched', () => {
+      const input = `
+<template>
+  <v-row no-gutters tag="section" />
+</template>
+`
+      expect(transform(input, 'file.vue', [v4GridPlugin]).code).toMatchInlineSnapshot(`
+      "
+      <template>
+        <v-row no-gutters tag="section" />
+      </template>
+      "
+    `)
+    })
+  })
+})
+
+describe('VCol', () => {
+  describe('order', () => {
+    it('converts order prop to utility class', () => {
+      const input = `
+<template>
+  <v-col order="2" />
+</template>
+`
+      expect(transform(input, 'file.vue', [v4GridPlugin]).code).toMatchInlineSnapshot(`
+      "
+      <template>
+        <v-col class="order-2" />
+      </template>
+      "
+    `)
+    })
+
+    it('converts responsive order props', () => {
+      const input = `
+<template>
+  <v-col order="2" order-md="1" order-lg="3" />
+</template>
+`
+      expect(transform(input, 'file.vue', [v4GridPlugin]).code).toMatchInlineSnapshot(`
+      "
+      <template>
+        <v-col class="order-2 order-md-1 order-lg-3" />
+      </template>
+      "
+    `)
+    })
+
+    it('leaves dynamic order binding untouched', () => {
+      const input = `
+<template>
+  <v-col :order="condition ? 1 : 2" />
+</template>
+`
+      expect(transform(input, 'file.vue', [v4GridPlugin]).code).toMatchInlineSnapshot(`
+      "
+      <template>
+        <v-col :order="condition ? 1 : 2" />
+      </template>
+      "
+    `)
+    })
+  })
+
+  describe('align-self', () => {
+    it('converts align-self prop to utility class', () => {
+      const input = `
+<template>
+  <v-col align-self="center" />
+  <v-col align-self="start" />
+</template>
+`
+      expect(transform(input, 'file.vue', [v4GridPlugin]).code).toMatchInlineSnapshot(`
+      "
+      <template>
+        <v-col class="align-self-center" />
+        <v-col class="align-self-start" />
+      </template>
+      "
+    `)
+    })
+
+    it('leaves dynamic align-self binding untouched', () => {
+      const input = `
+<template>
+  <v-col :align-self="alignment" />
+</template>
+`
+      expect(transform(input, 'file.vue', [v4GridPlugin]).code).toMatchInlineSnapshot(`
+      "
+      <template>
+        <v-col :align-self="alignment" />
+      </template>
+      "
+    `)
+    })
+  })
+
+  describe('combined', () => {
+    it('combines order and align-self into a single class attribute', () => {
+      const input = `
+<template>
+  <v-col order="3" align-self="end" />
+</template>
+`
+      expect(transform(input, 'file.vue', [v4GridPlugin]).code).toMatchInlineSnapshot(`
+      "
+      <template>
+        <v-col class="order-3 align-self-end" />
+      </template>
+      "
+    `)
+    })
+
+    it('appends to an existing class attribute', () => {
+      const input = `
+<template>
+  <v-col class="pa-2" order="1" align-self="center" />
+</template>
+`
+      expect(transform(input, 'file.vue', [v4GridPlugin]).code).toMatchInlineSnapshot(`
+      "
+      <template>
+        <v-col class="pa-2 order-1 align-self-center" />
+      </template>
+      "
+    `)
+    })
+
+    it('leaves span/offset props untouched', () => {
+      const input = `
+<template>
+  <v-col cols="6" sm="4" offset="2" offset-md="1" />
+</template>
+`
+      expect(transform(input, 'file.vue', [v4GridPlugin]).code).toMatchInlineSnapshot(`
+      "
+      <template>
+        <v-col cols="6" sm="4" offset="2" offset-md="1" />
+      </template>
+      "
+    `)
+    })
+  })
+})

package/src/plugins/v4/grid.ts

@@ -0,0 +1,103 @@
+import type { AST, CodemodPlugin, CodemodPluginContext } from 'vue-metamorph'
+import { astHelpers } from 'vue-metamorph'
+import { classify } from '../../helpers'
+
+type Builders = CodemodPluginContext['utils']['builders']
+
+const breakpoints = ['sm', 'md', 'lg', 'xl', 'xxl'] as const
+
+export const v4GridPlugin: CodemodPlugin = {
+  type: 'codemod',
+  name: 'vuetify-4-grid',
+  transform ({ sfcAST, utils }) {
+    if (!sfcAST) return 0
+    let count = 0
+    const { builders } = utils
+
+    const elements = astHelpers.findAll(sfcAST, { type: 'VElement' })
+
+    for (const el of elements) {
+      const tag = el.rawName
+
+      // VRow
+      if (classify(tag) === 'VRow') {
+        // dense -> density="compact"
+        const denseAttr = getStaticAttr(el, 'dense')
+        if (denseAttr) {
+          const idx = el.startTag.attributes.indexOf(denseAttr)
+          el.startTag.attributes.splice(idx, 1,
+            builders.vAttribute(
+              builders.vIdentifier('density'),
+              builders.vLiteral('compact'),
+            ))
+          count++
+        }
+
+        // align, justify, align-content (+ breakpoint variants) -> utility classes
+        for (const prop of ['align', 'justify', 'align-content'] as const) {
+          if (propToClass(el, prop, prop, builders)) count++
+          for (const bp of breakpoints) {
+            if (propToClass(el, `${prop}-${bp}`, `${prop}-${bp}`, builders)) count++
+          }
+        }
+      }
+
+      // VCol
+      if (classify(tag) === 'VCol') {
+        // order (+ breakpoint variants) -> utility classes
+        if (propToClass(el, 'order', 'order', builders)) count++
+        for (const bp of breakpoints) {
+          if (propToClass(el, `order-${bp}`, `order-${bp}`, builders)) count++
+        }
+
+        // align-self -> utility class
+        if (propToClass(el, 'align-self', 'align-self', builders)) count++
+      }
+    }
+
+    return count
+  },
+}
+
+function getStaticAttr (el: AST.VElement, name: string) {
+  return el.startTag.attributes.find(
+    a => !a.directive && a.key.name === name,
+  )
+}
+
+function removeAttr (el: AST.VElement, name: string) {
+  const idx = el.startTag.attributes.findIndex(
+    a => !a.directive && a.key.name === name,
+  )
+  if (~idx) el.startTag.attributes.splice(idx, 1)
+}
+
+function appendStaticClass (el: AST.VElement, cls: string, builders: Builders) {
+  const attr = getStaticAttr(el, 'class')
+  if (attr?.value) {
+    if (attr.value.type === 'VLiteral') {
+      attr.value.value = attr.value.value ? `${attr.value.value} ${cls}` : cls
+    }
+  } else {
+    el.startTag.attributes.unshift(
+      builders.vAttribute(
+        builders.vIdentifier('class'),
+        builders.vLiteral(cls),
+      ),
+    )
+  }
+}
+
+function propToClass (
+  el: AST.VElement,
+  propName: string,
+  classPrefix: string,
+  builders: Builders,
+): boolean {
+  const attr = getStaticAttr(el, propName)
+  if (attr?.value?.type !== 'VLiteral' || !attr.value.value) return false
+
+  appendStaticClass(el, `${classPrefix}-${attr.value.value}`, builders)
+  removeAttr(el, propName)
+  return true
+}

package/src/plugins/v4/index.ts

@@ -0,0 +1,16 @@
+import type { Plugin } from 'vue-metamorph'
+import { v4ComboboxItemSlotPlugin } from './combobox-item-slot'
+import { v4ElevationPlugin } from './elevation'
+import { v4SnackbarMultilinePlugin } from './snackbar-multiline'
+import { v4SnackbarQueueSlotPlugin } from './snackbar-queue-slot'
+import { v4TypographyPlugin } from './typography'
+
+export function vuetify4 (): Plugin[] {
+  return [
+    v4ComboboxItemSlotPlugin,
+    v4ElevationPlugin,
+    v4SnackbarMultilinePlugin,
+    v4SnackbarQueueSlotPlugin,
+    v4TypographyPlugin,
+  ]
+}

package/src/plugins/v4/snackbar-multiline.spec.ts

@@ -0,0 +1,19 @@
+import { expect, it } from 'vitest'
+import { transform } from 'vue-metamorph'
+import { v4SnackbarMultilinePlugin } from './snackbar-multiline'
+
+it('replaces multi-line with min-height', () => {
+  const input = `
+  <template>
+    <VSnackbar multi-line />
+  </template>
+`
+
+  expect(transform(input, 'file.vue', [v4SnackbarMultilinePlugin]).code).toMatchInlineSnapshot(`
+    "
+      <template>
+        <VSnackbar min-height="68" />
+      </template>
+    "
+  `)
+})

package/src/plugins/v4/snackbar-multiline.ts

@@ -0,0 +1,40 @@
+import type { CodemodPlugin } from 'vue-metamorph'
+import { camelize, classify } from '../../helpers'
+
+export const v4SnackbarMultilinePlugin: CodemodPlugin = {
+  type: 'codemod',
+  name: 'vuetify-4-snackbar-multiline',
+  transform ({ sfcAST, utils: { builders, traverseTemplateAST } }) {
+    if (!sfcAST) return 0
+    let count = 0
+    traverseTemplateAST(sfcAST, {
+      enterNode (node) {
+        if (
+          node.type !== 'VElement'
+          || classify(node.rawName) !== 'VSnackbar'
+        ) return
+        for (const attribute of node.startTag.attributes) {
+          if (attribute.key.type !== 'VIdentifier') continue
+          if (camelize(attribute.key.name) === 'multiLine') {
+            node.startTag.attributes = node.startTag.attributes.filter(attr => attr !== attribute)
+
+            const hasMinHeight = node.startTag.attributes.some(attr =>
+              attr.key.type === 'VIdentifier'
+              && camelize(attr.key.name) === 'minHeight',
+            )
+
+            if (!hasMinHeight) {
+              node.startTag.attributes.push(
+                builders.vAttribute(builders.vIdentifier('min-height'), builders.vLiteral('68')),
+              )
+            }
+
+            count++
+            break
+          }
+        }
+      },
+    })
+    return count
+  },
+}

package/src/plugins/v4/snackbar-queue-slot.spec.ts

@@ -0,0 +1,53 @@
+import { expect, it } from 'vitest'
+import { transform } from 'vue-metamorph'
+import { v4SnackbarQueueSlotPlugin } from './snackbar-queue-slot'
+
+it('renames default slot to item', () => {
+  const input = `
+<template>
+  <VSnackbarQueue>
+    <template #default="{ item }">
+      <v-snackbar v-bind="item" />
+    </template>
+  </VSnackbarQueue>
+</template>
+`
+
+  expect(transform(input, 'file.vue', [v4SnackbarQueueSlotPlugin]).code).toMatchInlineSnapshot(`
+    "
+    <template>
+      <VSnackbarQueue>
+        <template #item="{ item }">
+          <v-snackbar v-bind="item" />
+        </template>
+      </VSnackbarQueue>
+    </template>
+    "
+  `)
+})
+
+it('works without template', () => {
+  const input = `
+<template>
+  <VSnackbarQueue v-slot="{ item }">
+    <v-snackbar v-bind="item" />
+  </VSnackbarQueue>
+  <VSnackbarQueue #default="{ item }">
+    <v-snackbar v-bind="item" />
+  </VSnackbarQueue>
+</template>
+`
+
+  expect(transform(input, 'file.vue', [v4SnackbarQueueSlotPlugin]).code).toMatchInlineSnapshot(`
+    "
+    <template>
+      <VSnackbarQueue #item="{ item }">
+        <v-snackbar v-bind="item" />
+      </VSnackbarQueue>
+      <VSnackbarQueue #item="{ item }">
+        <v-snackbar v-bind="item" />
+      </VSnackbarQueue>
+    </template>
+    "
+  `)
+})