Feature/vuetify plugins

README.md

@@ -29,7 +29,7 @@ npx vue-upgrade-tool --files 'src/**/*' > vue_upgrade_output
 To run only some transformations, lookup their IDs in the table below or find them using `npx vue-upgrade-tool --list-plugins`, then pass them via the `--plugins` flag using a [micromatch pattern](https://github.com/micromatch/micromatch). To use multiple micromatch patterns, pass `--plugins` multiple times:
 
 ```sh
-npx vue-upgrade-tool --files 'src/**/*' --plugins 'vue-*' --plugins 'test-utils-*' > vue_upgrade_output
+npx vue-upgrade-tool --files 'src/**/*' --plugins 'vue-*' --plugins 'vuetify-*' --plugins 'test-utils-*' > vue_upgrade_output
 ```
 
 ## Vue
@@ -83,6 +83,25 @@ npx vue-upgrade-tool --files 'src/**/*' --plugins 'vue-*' --plugins 'test-utils-
 | - | - | - | - |
 | [Store instantiation changed](./src/plugins/vuex/instantiation.spec.ts) | `vuex-instantiation` | automatic | [Link](https://vuex.vuejs.org/guide/migrating-to-4-0-from-3-x.html#installation-process) |
 
+## Vuetify
+
+| Plugin | Plugin Name |Migration Type | Migration Guide |
+| - | - | - | - |
+| [vuetify-instantiation](src/plugins/vuetify/instantiation.ts) | `vuetify-instantiation` | Automatic | [Link](https://vuetifyjs.com/en/getting-started/upgrade-guide/#setup) |
+| [vuetify-text-colors](src/plugins/vuetify/text-colors.ts) | `vuetify-text-colors` | Automatic | [Link](https://vuetifyjs.com/en/getting-started/upgrade-guide/#features) |
+| [vuetify-v-alert](src/plugins/vuetify/v-alert.ts) | `vuetify-v-alert` | Automatic | [Link](https://vuetifyjs.com/en/getting-started/upgrade-guide/#components) |
+| [vuetify-v-chip](src/plugins/vuetify/v-chip.ts) | `vuetify-v-chip` | Automatic | [Link](https://vuetifyjs.com/en/getting-started/upgrade-guide/#components) |
+| [vuetify-v-dialog-v-menu](src/plugins/vuetify/v-dialog-v-menu.ts) | `vuetify-v-dialog-v-menu` | Automatic | [Link](https://vuetifyjs.com/en/getting-started/upgrade-guide/#components) |
+| [vuetify-v-list-item-content](src/plugins/vuetify/v-list-item-content.ts) | `vuetify-v-list-item-content` | Automatic | [Link](https://vuetifyjs.com/en/getting-started/upgrade-guide/#components) |
+| [vuetify-v-list-item-group-value](src/plugins/vuetify/v-list-item-group-value.ts) | `vuetify-v-list-item-group-value` | Automatic | [Link](https://vuetifyjs.com/en/getting-started/upgrade-guide/#components) |
+| [vuetify-v-select-change](src/plugins/vuetify/v-select-change.ts) | `vuetify-v-select-change` | Automatic | [Link](https://vuetifyjs.com/en/getting-started/upgrade-guide/#components) |
+| [vuetify-v-select-v-autocomplete](src/plugins/vuetify/v-select-v-autocomplete.ts) | `vuetify-v-select-v-autocomplete` | Automatic | [Link](https://vuetifyjs.com/en/getting-started/upgrade-guide/#components) |
+| [vuetify-v-simple-table](src/plugins/vuetify/v-simple-table.ts) | `vuetify-v-simple-table` | Automatic | [Link](https://vuetifyjs.com/en/getting-started/upgrade-guide/#components) |
+| [vuetify-v-tabs](src/plugins/vuetify/v-tabs.ts) | `vuetify-v-tabs` | Automatic | [Link](https://vuetifyjs.com/en/getting-started/upgrade-guide/#components) |
+| [vuetify-v-text-field](src/plugins/vuetify/v-text-field.ts) | `vuetify-v-text-field` | Automatic | [Link](https://vuetifyjs.com/en/getting-started/upgrade-guide/#components) |
+| [vuetify-v-tooltip-activators](src/plugins/vuetify/v-tooltip-activators.ts) | `vuetify-v-tooltip-activators` | Automatic | [Link](https://vuetifyjs.com/en/getting-started/upgrade-guide/#components) |
+| [vuetify-v-virtual-scroll](src/plugins/vuetify/v-virtual-scroll.ts) | `vuetify-v-virtual-scroll` | Automatic | [Link](https://vuetifyjs.com/en/getting-started/upgrade-guide/#components) |
+
 ## Vue Test Utils
 
 | Plugin | Plugin Name |Migration Type | Migration Guide |

package.json

@@ -2,7 +2,7 @@
   "name": "vue-upgrade-tool",
   "description": "Tool to aid in Vue 2 -> Vue 3 migration",
   "type": "module",
-  "version": "1.0.37",
+  "version": "1.0.38",
   "bin": {
     "vue-upgrade-tool": "dist/cli.js"
   },

src/main.ts

@@ -3,13 +3,15 @@ import process from 'process';
 
 import { vue } from './plugins/vue/index.js';
 import { vuex } from './plugins/vuex/index.js';
+import { vuetify } from './plugins/vuetify/index.js';
 import { vueTestUtils } from './plugins/vue-test-utils/index.js';
 import { vueRouter } from './plugins/vue-router/index.js';
 
 const cli = createVueMetamorphCli({
   plugins: [
     vue(),
     vuex(),
+    vuetify(),
     vueTestUtils(),
     vueRouter(),
   ],

src/plugins/vuetify/index.ts

@@ -0,0 +1,30 @@
+import { Plugin } from 'vue-metamorph';
+import { vListItemGroupValuePlugin } from './v-list-item-group-value';
+import { textColorPlugin } from './text-colors';
+import { vListItemContentPlugin } from './v-list-item-content';
+import { vChipPlugin } from './v-chip';
+import { vSelectChangePlugin } from './v-select-change';
+import { vSelectVAutocompletePlugin } from './v-select-v-autocomplete';
+import { vTabsPlugin } from './v-tabs';
+import { vSimpleTablePlugin } from './v-simple-table';
+import { vVirtualScrollPlugin } from './v-virtual-scroll';
+import { vTextFieldPlugin } from './v-text-field';
+import { vTooltipActivatorsPlugin } from './v-tooltip-activators';
+import { vDialogVMenuPlugin } from './v-dialog-v-menu';
+import { vAlertPlugin } from './v-alert';
+
+export const vuetify = (): Plugin[] => ([
+  vListItemGroupValuePlugin,
+  textColorPlugin,
+  vListItemContentPlugin,
+  vChipPlugin,
+  vSelectChangePlugin,
+  vSelectVAutocompletePlugin,
+  vTabsPlugin,
+  vSimpleTablePlugin,
+  vVirtualScrollPlugin,
+  vTextFieldPlugin,
+  vTooltipActivatorsPlugin,
+  vDialogVMenuPlugin,
+  vAlertPlugin,
+]);

src/plugins/vuetify/text-colors.ts

@@ -0,0 +1,113 @@
+//@ts-nocheck
+import { CodemodPlugin } from 'vue-metamorph';
+import * as changeCase from 'change-case';
+
+export const textColorPlugin: CodemodPlugin = {
+  type: 'codemod',
+  name: 'vuetify-text-colors',
+  transform({ sfcAST, utils: { traverseTemplateAST } }) {
+    let count = 0;
+
+    if (sfcAST) {
+      traverseTemplateAST(sfcAST, {
+        leaveNode(node) {
+          if (node.type === 'VAttribute' && node.key?.name === 'class') {
+            const value = node.value?.value;
+            if (value) {
+              const replacements = [
+                { from: '--text', to: '-' },
+                { from: '--background', to: '-bg' },
+                { from: '--border', to: '-border' },
+                { from: '--icon', to: '-icon' },
+                { from: '--disabled', to: '-disabled' },
+                { from: '--hover', to: '-hover' },
+                { from: '--focus', to: '-focus' },
+                { from: '--active', to: '-active' },
+                { from: '--selected', to: '-selected' },
+                { from: '--error', to: '-error' },
+                { from: '--success', to: '-success' },
+                { from: '--warning', to: '-warning' },
+                { from: '--info', to: '-info' },
+                { from: '--primary', to: '-primary' },
+                { from: '--secondary', to: '-secondary' },
+                { from: '--tertiary', to: '-tertiary' },
+                { from: '--quaternary', to: '-quaternary' },
+                { from: '--accent', to: '-accent' },
+                { from: '--dark', to: '-dark' },
+                { from: '--light', to: '-light' },
+                { from: '--transparent', to: '-transparent' },
+                { from: '--elevation', to: '-elevation' },
+                { from: '--rounded', to: '-rounded' },
+                { from: '--square', to: '-square' },
+                { from: '--circle', to: '-circle' },
+                { from: '--small', to: '-small' },
+                { from: '--medium', to: '-medium' },
+                { from: '--large', to: '-large' },
+                { from: '--extra-large', to: '-extra-large' },
+                { from: '--full-width', to: '-full-width' },
+                { from: '--full-height', to: '-full-height' },
+                { from: '--flex', to: '-flex' },
+                { from: '--inline-block', to: '-inline-block' },
+                { from: '--block', to: '-block' },
+                { from: '--inline', to: '-inline' },
+                { from: '--hidden', to: '-hidden' },
+                { from: '--visible', to: '-visible' },
+                { from: '--scrollable', to: '-scrollable' },
+                { from: '--overflow-hidden', to: '-overflow-hidden' },
+                { from: '--overflow-visible', to: '-overflow-visible' },
+                { from: '--overflow-auto', to: '-overflow-auto' },
+                { from: '--overflow-scroll', to: '-overflow-scroll' },
+                { from: '--overflow-x-hidden', to: '-overflow-x-hidden' },
+                { from: '--overflow-y-hidden', to: '-overflow-y-hidden' },
+                { from: '--overflow-x-visible', to: '-overflow-x-visible' },
+                { from: '--overflow-y-visible', to: '-overflow-y-visible' },
+                { from: '--overflow-x-auto', to: '-overflow-x-auto' },
+                { from: '--overflow-y-auto', to: '-overflow-y-auto' },
+                { from: '--overflow-x-scroll', to: '-overflow-x-scroll' },
+                { from: '--overflow-y-scroll', to: '-overflow-y-scroll' },
+                { from: '--position-relative', to: '-position-relative' },
+                { from: '--position-absolute', to: '-position-absolute' },
+                { from: '--position-fixed', to: '-position-fixed' },
+                { from: '--position-sticky', to: '-position-sticky' },
+                { from: '--position-static', to: '-position-static' },
+                { from: '--position-initial', to: '-position-initial' },
+                { from: '--position-final', to: '-position-final' },
+                { from: '--position-center', to: '-position-center' },
+                { from: '--position-top', to: '-position-top' },
+                { from: '--position-bottom', to: '-position-bottom' },
+                { from: '--position-left', to: '-position-left' },
+                { from: '--position-right', to: '-position-right' },
+                { from: '--position-top-left', to: '-position-top-left' },
+                { from: '--position-top-right', to: '-position-top-right' },
+                { from: '--position-bottom-left', to: '-position-bottom-left' },
+                { from: '--position-bottom-right', to: '-position-bottom-right' },
+                { from: '--position-center-left', to: '-position-center-left' },
+                { from: '--position-center-right', to: '-position-center-right' },
+                { from: '--position-center-top', to: '-position-center-top' },
+                { from: '--position-center-bottom', to: '-position-center-bottom' },
+                { from: '--position-center-horizontal', to: '-position-center-horizontal' },
+                { from: '--position-center-vertical', to: '-position-center-vertical' },
+                { from: '--position-center-all', to: '-position-center-all' },
+                { from: '--position-center-middle', to: '-position-center-middle' },
+                { from: '--position-center-middle-horizontal', to: '-position-center-middle-horizontal' },
+                { from: '--position-center-middle-vertical', to: '-position-center-middle-vertical' },
+                { from: '--position-center-middle-horizontal-vertical', to: '-position-center-middle-horizontal-vertical' },
+                { from: '--position-center-middle-horizontal-vertical-all', to: '-position-center-middle-horizontal-vertical-all' },
+              ];
+
+              let updatedValue = value;
+              replacements.forEach(({ from, to }) => {
+                updatedValue = updatedValue.replace(new RegExp(`\\b${changeCase.camelCase(changeCase.pascalCase(from))}\\b`, 'g'), to);
+                count++;
+              });
+
+              node.value.value = updatedValue;
+            }
+          }
+        },
+      });
+    }
+
+    return count;
+  },
+};

src/plugins/vuetify/v-alert.ts

@@ -0,0 +1,22 @@
+import { CodemodPlugin } from 'vue-metamorph';
+
+export const vAlertPlugin: CodemodPlugin = {
+  type: 'codemod',
+  name: 'vuetify-v-alert',
+  transform({ sfcAST, utils: { traverseTemplateAST } }) {
+    let count = 0;
+
+    if (sfcAST) {
+      traverseTemplateAST(sfcAST, {
+        leaveNode(node) {
+          if (node.type === 'VAttribute' && node.key?.name === 'type') {
+            node.key.name = 'variant';
+            count++;
+          }
+        },
+      });
+    }
+
+    return count;
+  },
+};

src/plugins/vuetify/v-chip.ts

@@ -0,0 +1,59 @@
+//@ts-nocheck
+import { CodemodPlugin } from 'vue-metamorph';
+
+export const vChipPlugin: CodemodPlugin = {
+  type: 'codemod',
+  name: 'vuetify-v-chip',
+  transform({ sfcAST, utils: { traverseTemplateAST } }) {
+    let count = 0;
+
+    if (sfcAST) {
+      traverseTemplateAST(sfcAST, {
+        leaveNode(node) {
+          if (node.type === 'VElement' && node.rawName === 'v-chip') {
+            for (const attr of node.startTag.attributes) {
+              if (['small', 'large'].includes(attr.key?.name)) {
+                attr.key.name = 'size';
+                count++;
+              }
+
+              if (attr.key?.name === 'class') {
+                const value = attr.value?.value;
+                if (value) {
+                  const colorMap = {
+                    'primary': 'primary',
+                    'secondary': 'secondary',
+                    'success': 'success',
+                    'warning': 'warning',
+                    'error': 'error',
+                  };
+
+                  Object.entries(colorMap).forEach(([from, to]) => {
+                    if (value.includes(from)) {
+                      node.startTag.attributes.push({
+                        key: { name: 'color' },
+                        value: { type: 'VLiteral', value: `"${to}"` },
+                      });
+                      attr.value.value = value.replace(from, '');
+                      count++;
+                    }
+                  });
+                }
+              }
+
+              if (!node.startTag.attributes.some((a) => a.key?.name === 'variant')) {
+                node.startTag.attributes.push({
+                  key: { name: 'variant' },
+                  value: { type: 'VLiteral', value: '"flat"' },
+                });
+                count++;
+              }
+            }
+          }
+        },
+      });
+    }
+
+    return count;
+  },
+};

src/plugins/vuetify/v-dialog-v-menu.ts

@@ -0,0 +1,22 @@
+import { CodemodPlugin } from 'vue-metamorph';
+
+export const vDialogVMenuPlugin: CodemodPlugin = {
+  type: 'codemod',
+  name: 'vuetify-v-dialog-v-menu',
+  transform({ sfcAST, utils: { traverseTemplateAST } }) {
+    let count = 0;
+
+    if (sfcAST) {
+      traverseTemplateAST(sfcAST, {
+        leaveNode(node) {
+          if (node.type === 'VAttribute' && node.key?.name === 'value') {
+            node.key.name = 'modelValue';
+            count++;
+          }
+        },
+      });
+    }
+
+    return count;
+  },
+};

src/plugins/vuetify/v-list-item-content.ts

@@ -0,0 +1,28 @@
+import { CodemodPlugin } from 'vue-metamorph';
+
+export const vListItemContentPlugin: CodemodPlugin = {
+  type: 'codemod',
+  name: 'vuetify-v-list-item-content',
+  transform({ sfcAST, utils: { traverseTemplateAST } }) {
+    let count = 0;
+
+    if (sfcAST) {
+      traverseTemplateAST(sfcAST, {
+        leaveNode(node) {
+          if (node.type === 'VElement' && node.rawName === 'v-list-item-content') {
+            if (node.children.length > 0) {
+              node.parent.children.splice(
+                node.parent.children.indexOf(node),
+                1,
+                ...node.children
+              );
+              count++;
+            }
+          }
+        },
+      });
+    }
+
+    return count;
+  },
+};

src/plugins/vuetify/v-list-item-group-value.ts

@@ -0,0 +1,26 @@
+import { CodemodPlugin } from 'vue-metamorph';
+
+export const vListItemGroupValuePlugin: CodemodPlugin = {
+  type: 'codemod',
+  name: 'vuetify-v-list-item-group-value',
+  transform({ sfcAST, utils: { traverseTemplateAST } }) {
+    let count = 0;
+
+    if (sfcAST) {
+      traverseTemplateAST(sfcAST, {
+        leaveNode(node) {
+          if (node.type === 'VElement' && node.rawName === 'v-list-item-group') {
+            for (const attr of node.startTag.attributes) {
+              if (attr.key?.name === 'value') {
+                attr.key.name = 'modelValue';
+                count++;
+              }
+            }
+          }
+        },
+      });
+    }
+
+    return count;
+  },
+};