vuetify-codemods 1.0.0

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

@@ -0,0 +1,25 @@
+import type { CodemodPlugin } from 'vue-metamorph'
+import { findSlotNodes } from '../../helpers'
+
+export const v4SnackbarQueueSlotPlugin: CodemodPlugin = {
+  type: 'codemod',
+  name: 'vuetify-4-snackbar-queue-slot',
+  transform ({ sfcAST, utils: { builders } }) {
+    if (!sfcAST) return 0
+    let count = 0
+    const slotNodes = findSlotNodes(sfcAST, ['VSnackbarQueue'], ['default'])
+    for (const node of slotNodes) {
+      if (node.key.type === 'VDirectiveKey') {
+        if (!node.key.argument) {
+          node.key.name.rawName = '#'
+          node.key.argument = builders.vIdentifier('item')
+          count++
+        } else if (node.key.argument.type === 'VIdentifier') {
+          node.key.argument.rawName = 'item'
+          count++
+        }
+      }
+    }
+    return count
+  },
+}

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

@@ -0,0 +1,31 @@
+import { expect, it } from 'vitest'
+import { transform } from 'vue-metamorph'
+import { v4TypographyPlugin } from './typography'
+
+it('replaces classes', () => {
+  const input = `
+<template>
+  <div class="text-h1" />
+  <div :class="'text-h1'" />
+  <div :class="a ? 'text-h1' : 'bar'" />
+  <div :class="a && 'text-h1'" />
+  <div :class="['text-h1']" />
+  <div :class="{ ['text-h1']: true }" />
+  <div :class="{ 'text-h1': true }" />
+</template>
+`
+
+  expect(transform(input, 'file.vue', [v4TypographyPlugin]).code).toMatchInlineSnapshot(`
+    "
+    <template>
+      <div class="text-display-large" />
+      <div :class="'text-display-large'" />
+      <div :class="a ? 'text-display-large' : 'bar'" />
+      <div :class="a && 'text-display-large'" />
+      <div :class="['text-display-large']" />
+      <div :class="{ ['text-display-large']: true }" />
+      <div :class="{ 'text-display-large': true }" />
+    </template>
+    "
+  `)
+})

package/src/plugins/v4/typography.ts

@@ -0,0 +1,40 @@
+import type { CodemodPlugin } from 'vue-metamorph'
+import { findClassNodes } from '../../helpers'
+
+const replacements: Record<string, string> = {
+  'text-h1': 'text-display-large',
+  'text-h2': 'text-display-medium',
+  'text-h3': 'text-display-small',
+  'text-h4': 'text-headline-large',
+  'text-h5': 'text-headline-medium',
+  'text-h6': 'text-headline-small',
+  'text-subtitle-1': 'text-body-large',
+  'text-subtitle-2': 'text-label-large',
+  'text-body-1': 'text-body-large',
+  'text-body-2': 'text-body-medium',
+  'text-caption': 'text-body-small',
+  'text-button': 'text-label-large',
+  'text-overline': 'text-label-small',
+}
+
+const matchingRegexp = new RegExp(String.raw`(^|\s)(${Object.keys(replacements).join('|')})(?=$|\s)`, 'g')
+
+export const v4TypographyPlugin: CodemodPlugin = {
+  type: 'codemod',
+  name: 'vuetify-4-typography',
+  transform ({ sfcAST, utils }) {
+    if (!sfcAST) return 0
+    let count = 0
+    const found = findClassNodes(sfcAST, utils, Object.keys(replacements))
+    for (const node of found) {
+      if (node.type === 'Identifier') {
+        node.name = node.name.replaceAll(matchingRegexp, (_, s, m) => `${s}${replacements[m]}`)
+        count++
+      } else if (typeof node.value === 'string') {
+        node.value = node.value.replaceAll(matchingRegexp, (_, s, m) => `${s}${replacements[m]}`)
+        count++
+      }
+    }
+    return count
+  },
+}

package/tsconfig.eslint.json

@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.json",
+  "include": [
+    "src",
+    "vite.config.ts",
+    ".eslintrc.cjs"
+  ]
+}

package/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "isolatedModules": true,
+    "lib": [
+      "ESNext",
+    ],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "noEmit": true,
+    "noImplicitReturns": true,
+    "noUncheckedIndexedAccess": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "types": ["node"]
+  },
+  "include": ["src"]
+}

package/vite.config.ts

@@ -0,0 +1,25 @@
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  build: {
+    ssr: true,
+    target: 'node22',
+    minify: false,
+
+    lib: {
+      entry: 'src/main.ts',
+      formats: ['es'],
+    },
+
+    rollupOptions: {
+      output: {
+        banner: '#!/usr/bin/env node',
+      },
+    },
+  },
+  ssr: {
+    noExternal: [
+      'vue-metamorph',
+    ],
+  },
+})