@rancher/create-extension 1.0.0-rc.1 → 1.0.0

package/init

@@ -9,20 +9,34 @@ const creatorPkg = require('./package.json');
 const args = process.argv.slice(2);
 let extensionName = '';
 let appName = '';
+let migrate = false;
 let updateOnly = false;
 let skeletonOnly = false;
-let ignoreShellDepCheck = false;
+let ignoreShellDepCheck = false; // Ignore the check for @rancher/shell dependency (Only used for testing)
 let tagUsed = ''; // To store the inferred tag
 
 args.forEach((arg, index) => {
   switch (arg) {
+  case '--help':
+  case '-h':
+    console.log(`Usage: ${ creatorPkg.name } [options] [extension-name]`);
+    console.log('\nOptions:');
+    console.log('  --help, -h          Show help');
+    console.log('  --migrate           Migrate an existing extension to Vue 3');
+    console.log('  --update, -u        Update applications');
+    console.log('  --app-name, -a      Specify the name of the application');
+    console.log('  --skeleton-only, -s Create only the skeleton application');
+    process.exit(0);
+  case '--migrate':
+    migrate = true;
+    break;
   case '--update':
   case '-u':
     updateOnly = true;
     break;
   case '--app-name':
   case '-a':
-    if ( args[index + 1] && !args[index + 1].startsWith('-') ) {
+    if (args[index + 1] && !args[index + 1].startsWith('-')) {
       appName = args[index + 1];
     } else {
       console.error('Error: Missing value for --app-name or -a option.');
@@ -37,14 +51,14 @@ args.forEach((arg, index) => {
     ignoreShellDepCheck = true;
     break;
   default:
-    if ( !arg.startsWith('-') && extensionName === '' ) {
+    if (!arg.startsWith('-') && extensionName === '') {
       extensionName = arg;
       appName = appName || extensionName;
     }
   }
 });
 
-if ( !extensionName && !updateOnly && !skeletonOnly ) {
+if (!extensionName && !updateOnly && !skeletonOnly && !migrate) {
   console.error('Please provide an extension name.');
   process.exit(1);
 }
@@ -55,7 +69,7 @@ try {
   const currentVersion = creatorPkg.version;
 
   // Fetch the dist-tags from npm
-  const distTags = JSON.parse(execSync(`npm view ${ packageName } dist-tags --json`).toString());
+  const distTags = JSON.parse(execSync(`npm view ${ packageName } dist-tags --json`, { stdio: 'pipe' }).toString());
 
   // Find the tag matching the current version
   tagUsed = Object.keys(distTags).find((tag) => distTags[tag] === currentVersion) || 'latest';
@@ -72,12 +86,12 @@ const shellPackageName = '@rancher/shell';
 
 try {
   // Fetch the version of the `@rancher/shell` package that corresponds to the inferred tag
-  const tagVersion = execSync(`npm view ${ shellPackageName } dist-tags.${ tagUsed }`).toString().trim();
+  const tagVersion = execSync(`npm view ${ shellPackageName } dist-tags.${ tagUsed }`, { stdio: 'pipe' }).toString().trim();
 
   if (tagVersion) {
     shellVersion = tagVersion;
   } else {
-    const latestVersion = execSync(`npm view ${ shellPackageName } version`).toString().trim();
+    const latestVersion = execSync(`npm view ${ shellPackageName } version`, { stdio: 'pipe' }).toString().trim();
 
     shellVersion = latestVersion;
   }
@@ -86,7 +100,9 @@ try {
   process.exit(1);
 }
 
-console.log(`  Using version ${ shellVersion } for ${ shellPackageName }`);
+if (!migrate) {
+  console.log(`  Using version ${ shellVersion } for ${ shellPackageName }`);
+}
 
 const basePath = process.cwd();
 let skeletonPath;
@@ -94,12 +110,12 @@ let isInsideSkeleton = false;
 let directoryExists = false;
 
 // Check if we are inside a skeleton application by looking for package.json
-if ( fs.existsSync(path.join(basePath, 'package.json')) ) {
+if (fs.existsSync(path.join(basePath, 'package.json'))) {
   // Check for @rancher/shell dependency
   const packageJsonPath = path.join(basePath, 'package.json');
   const packageJson = require(packageJsonPath);
 
-  if ( !ignoreShellDepCheck && (!packageJson.dependencies || !packageJson.dependencies['@rancher/shell']) ) {
+  if (!ignoreShellDepCheck && (!packageJson.dependencies || !packageJson.dependencies['@rancher/shell'])) {
     throw new Error('@rancher/shell dependency is missing in package.json.');
   } else {
     isInsideSkeleton = true;
@@ -109,7 +125,7 @@ if ( fs.existsSync(path.join(basePath, 'package.json')) ) {
   // If not inside a skeleton, check if a directory with the appName already exists
   skeletonPath = path.join(basePath, appName);
 
-  if ( fs.existsSync(skeletonPath) ) {
+  if (fs.existsSync(skeletonPath)) {
     directoryExists = true;
   }
 }
@@ -121,7 +137,19 @@ const skeletonExists = fs.existsSync(skeletonPath);
 const pkgExists = fs.existsSync(pkgPath);
 
 try {
-  if ( updateOnly ) {
+  if (migrate) {
+    if (!isInsideSkeleton) {
+      throw new Error('Migrate option can only be used inside a skeleton application.');
+    }
+
+    console.log(`Migrating extension to Vue 3...`);
+    execSync(`node ${ path.join(__dirname, 'migrate', 'init') } ${ args.join(' ') }`, { stdio: 'inherit' });
+
+    console.log('Migration completed successfully.');
+    process.exit(0);
+  }
+
+  if (updateOnly) {
     // Run the update script directly
     console.log('Updating applications...');
     execSync(`node ${ path.join(updatePath, 'init') }`, { stdio: 'inherit' });
@@ -131,44 +159,44 @@ try {
   }
 
   // If the directory exists but we're not inside a skeleton, we should exit to prevent overwriting
-  if ( directoryExists && !isInsideSkeleton ) {
+  if (directoryExists && !isInsideSkeleton) {
     throw new Error(`A directory named "${ appName }" already exists. Aborting.`);
   }
 
   // Create skeleton application if it doesn't exist
-  if ( !isInsideSkeleton && !skeletonExists ) {
+  if (!isInsideSkeleton && !skeletonExists) {
     console.log(`Creating skeleton application: ${ appName }...`);
     // Pass all arguments to the app/init script
     execSync(`node ${ path.join(__dirname, 'app', 'init') } ${ appName }  ${ shellVersion } ${ args.join(' ') }`, { stdio: 'inherit' });
 
     // Ensure the skeleton path directory is created before attempting to change directory
-    if ( !fs.existsSync(skeletonPath) ) {
+    if (!fs.existsSync(skeletonPath)) {
       throw new Error(`Failed to create skeleton application directory: ${ skeletonPath }`);
     }
 
     // Change working directory to the newly created skeleton app
     process.chdir(skeletonPath);
-  } else if ( isInsideSkeleton ) {
+  } else if (isInsideSkeleton) {
     // If skeleton exists, ensure the working directory is set correctly
     process.chdir(skeletonPath);
   }
 
-  if ( skeletonOnly ) {
+  if (skeletonOnly) {
     console.log('Skeleton application created successfully. No additional packages will be installed.');
     process.exit(0);
   }
 
-  if ( pkgExists ) {
+  if (pkgExists) {
     throw new Error(`A package directory for "${ extensionName }" already exists.`);
   }
 
   // Check for package existence and create it if necessary
-  if ( !pkgExists ) {
+  if (!pkgExists) {
     console.log(`Creating package: ${ extensionName }...`);
     execSync(`node ${ path.join(__dirname, 'pkg', 'init') } ${ extensionName } ${ shellVersion } ${ args.join(' ') }`, { stdio: 'inherit' });
   }
 
-  if ( args.includes('--update') || args.includes('-u') ) {
+  if (args.includes('--update') || args.includes('-u')) {
     // Run the update script
     console.log('Updating applications...');
     execSync(`node ${ path.join(updatePath, 'init') } ${ extensionName }`, { stdio: 'inherit' });
@@ -176,7 +204,7 @@ try {
 
   console.log('Extension created successfully.');
 
-  if ( skeletonOnly || !isInsideSkeleton ) {
+  if (skeletonOnly || !isInsideSkeleton) {
     console.log(`To begin, run: \n\n\tcd ${ appName } && yarn install\n`);
   }
 } catch (error) {

package/migrate/config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  nodeRequirement:   '20.0.0',
+  isDry:             process.argv.includes('--dry'),
+  isVerbose:         process.argv.includes('--verbose'),
+  isSuggest:         process.argv.includes('--suggest'),
+  removePlaceholder: 'REMOVE',
+};

package/migrate/ignore.js

@@ -0,0 +1,14 @@
+module.exports = [
+  '**/node_modules/**',
+  '**/dist/**',
+  '**/dist-pkg/**',
+  '**/.vscode/**',
+  '**/assets/**',
+  '**/charts/**',
+  '**/extensions/**',
+  '**/scripts/vue-migrate.js',
+  'docusaurus/**',
+  'storybook-static/**',
+  'storybook/**',
+  'migration/**',
+];

package/migrate/init

@@ -0,0 +1,35 @@
+#!/usr/bin/env node
+
+const { setParams, printLog, printUsage } = require('./utils/content');
+const {
+  packageUpdates,
+  nvmUpdates,
+  vueConfigUpdates,
+  vueSyntaxUpdates,
+  routerUpdates,
+  eslintUpdates,
+  tsUpdates,
+  stylesUpdates,
+} = require('./tasks');
+const params = require('./params');
+
+(function main() {
+  if (process.argv.includes('--help') || process.argv.includes('-h')) {
+    printUsage();
+
+    return;
+  }
+
+  setParams(params);
+
+  packageUpdates(params);
+  nvmUpdates(params);
+  vueConfigUpdates(params);
+  vueSyntaxUpdates(params);
+  routerUpdates(params);
+  eslintUpdates(params);
+  tsUpdates(params);
+  stylesUpdates(params);
+
+  printLog();
+})();

package/migrate/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@rancher/create-migration",
+  "description": "Rancher UI Vue3 migration helper",
+  "version": "0.0.0",
+  "license": "Apache-2.0",
+  "author": "SUSE",
+  "private": false,
+  "bin": "./init",
+  "files": [
+    "**/*.*",
+    "init"
+  ],
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "dependencies": {
+    "diff": "^7.0.0",
+    "fs-extra": "^10.0.0",
+    "glob": "^11.0.0",
+    "path": "^0.12.7",
+    "semver": "^7.6.3"
+  }
+}

package/migrate/params.js

@@ -0,0 +1,7 @@
+const ignore = require('./ignore');
+
+module.exports = {
+  paths:          null,
+  ignorePatterns: [],
+  ignore,
+};

package/migrate/stats.js

@@ -0,0 +1,13 @@
+// stats.js
+module.exports = {
+  libraries:  [],
+  node:       [],
+  nvmrc:      [],
+  webpack:    [],
+  router:     [],
+  resolution: [],
+  eslint:     [],
+  vueSyntax:  [],
+  style:      [],
+  total:      [],
+};

package/migrate/tasks/eslintUpdates.js

@@ -0,0 +1,70 @@
+const glob = require('glob');
+const fs = require('fs');
+const path = require('path');
+const stats = require('../stats');
+const { writeContent, printContent } = require('../utils/content');
+
+/**
+ * ESLint Updates
+ * Files: .eslintrc.js, .eslintrc.json, .eslintrc.yml
+ */
+const eslintUpdates = (params) => {
+  const files = glob.sync(params.paths || '**/.eslintrc.*{js,json,yml}', { ignore: params.ignore });
+  const replacePlugins = [
+    ['plugin:vue/essential', 'plugin:vue/vue3-essential'],
+    ['plugin:vue/strongly-recommended', 'plugin:vue/vue3-strongly-recommended'],
+    ['plugin:vue/recommended', 'plugin:vue/vue3-recommended']
+  ];
+  const newRules = {
+    'vue/one-component-per-file':       'off',
+    'vue/no-deprecated-slot-attribute': 'off',
+    'vue/require-explicit-emits':       'off',
+    'vue/v-on-event-hyphenation':       'off',
+  };
+
+  files.forEach((file) => {
+    const originalContent = fs.readFileSync(file, 'utf8');
+    let content = originalContent;
+    const matchedCases = [];
+
+    replacePlugins.forEach(([text, replacement]) => {
+      if (content.includes(text)) {
+        content = content.replaceAll(text, replacement);
+        matchedCases.push([text, replacement]);
+
+        writeContent(file, content, originalContent);
+      }
+    });
+
+    const eslintConfigPath = path.join(process.cwd(), `${ file }`);
+    let eslintConfig;
+
+    try {
+      eslintConfig = require(eslintConfigPath);
+    } catch (error) {
+      eslintConfig = {};
+    }
+
+    if (!eslintConfig.rules) {
+      eslintConfig.rules = {};
+    }
+
+    Object.keys(newRules).forEach((rule) => {
+      if (!eslintConfig.rules[rule]) {
+        eslintConfig.rules[rule] = newRules[rule];
+        matchedCases.push(rule);
+      }
+    });
+
+    if (matchedCases.length) {
+      const updatedConfig = `module.exports = ${ JSON.stringify(eslintConfig, null, 2) }`;
+
+      writeContent(file, updatedConfig, originalContent);
+      printContent(file, `Updating ESLint`, matchedCases);
+      stats.eslint.push(file);
+      stats.total.push(file);
+    }
+  });
+};
+
+module.exports = eslintUpdates;

package/migrate/tasks/index.js

@@ -0,0 +1,19 @@
+const packageUpdates = require('./packageUpdates');
+const nvmUpdates = require('./nvmUpdates');
+const vueConfigUpdates = require('./vueConfigUpdates');
+const vueSyntaxUpdates = require('./vueSyntaxUpdates');
+const routerUpdates = require('./routerUpdates');
+const eslintUpdates = require('./eslintUpdates');
+const tsUpdates = require('./tsUpdates');
+const stylesUpdates = require('./stylesUpdates');
+
+module.exports = {
+  packageUpdates,
+  nvmUpdates,
+  vueConfigUpdates,
+  vueSyntaxUpdates,
+  routerUpdates,
+  eslintUpdates,
+  tsUpdates,
+  stylesUpdates,
+};

package/migrate/tasks/nvmUpdates.js

@@ -0,0 +1,51 @@
+const fs = require('fs');
+const glob = require('glob');
+const semver = require('semver');
+const stats = require('../stats');
+const { printContent, writeContent } = require('../utils/content');
+const { nodeRequirement, isDry, isSuggest } = require('../config');
+
+/**
+ * NVM updates
+ * Files: .nvmrc
+ *
+ * Verify presence of .nvmrc, create one if none, update if any
+ */
+const nvmUpdates = (params) => {
+  const files = glob.sync(params.paths || '**/.nvmrc', { ignore: params.ignore });
+  const nvmRequirement = 20;
+
+  if (files.length === 0) {
+    // If no .nvmrc files found, create one
+    const newFilePath = '.nvmrc';
+
+    if (!isDry && !isSuggest) {
+      fs.writeFileSync(newFilePath, nvmRequirement.toString());
+      printContent(newFilePath, `Created ${ newFilePath } with Node version ${ nvmRequirement }`, '');
+    }
+
+    writeContent(newFilePath, nvmRequirement.toString(), '');
+    stats.nvmrc.push(newFilePath);
+    stats.total.push(newFilePath);
+  }
+
+  files.forEach((file) => {
+    if (file) {
+      const originalContent = fs.readFileSync(file, 'utf8');
+      let content = originalContent;
+      const nodeVersionMatch = content.match(/([0-9.x]+)/g);
+      const nodeVersion = semver.coerce(nodeVersionMatch[0]);
+
+      // Ensure node version is up to date
+      if (nodeVersion && semver.lt(nodeVersion, semver.coerce(nodeRequirement))) {
+        printContent(file, `Updating node ${ [nodeVersionMatch[0], nvmRequirement] }`);
+        content = content.replaceAll(nodeVersionMatch[0], nvmRequirement);
+        writeContent(file, content, originalContent);
+        stats.nvmrc.push(file);
+        stats.total.push(file);
+      }
+    }
+  });
+};
+
+module.exports = nvmUpdates;

package/migrate/tasks/packageUpdates.js

@@ -0,0 +1,242 @@
+const fs = require('fs');
+const path = require('path');
+const glob = require('glob');
+const semver = require('semver');
+const stats = require('../stats');
+const { nodeRequirement, removePlaceholder } = require('../config');
+const { writeContent, printContent } = require('../utils/content');
+
+function packageUpdates(params) {
+  const files = glob.sync(params.paths || '**/package.json', { ignore: params.ignore });
+
+  files.forEach((file) => {
+    const originalContent = fs.readFileSync(file, 'utf8');
+    let content = originalContent;
+
+    const [librariesContent, replaceLibraries] = packageUpdatesLibraries(file, content);
+
+    if (replaceLibraries.length) {
+      content = librariesContent;
+      printContent(file, `Updating libraries`, replaceLibraries);
+      stats.libraries.push(file);
+    }
+
+    const [nodeContent, replaceNode] = packageUpdatesEngine(file, content);
+
+    if (replaceNode.length) {
+      content = nodeContent;
+      printContent(file, `Updating node engine`, replaceNode);
+      stats.node.push(file);
+    }
+
+    const [resolutionContent, replaceResolution] = packageUpdatesResolution(file, content);
+
+    if (replaceResolution.length) {
+      content = resolutionContent;
+      printContent(file, `Updating resolutions`, replaceResolution);
+      stats.libraries.push(file);
+    }
+
+    const [annotationsContent, annotationsChanges] = packageUpdatesAnnotations(file, content);
+
+    if (annotationsChanges.length) {
+      content = annotationsContent;
+      printContent(file, `Updating annotations`, annotationsChanges);
+      stats.annotations = stats.annotations || [];
+      stats.annotations.push(file);
+    }
+
+    if (
+      replaceLibraries.length ||
+      replaceNode.length ||
+      replaceResolution.length ||
+      annotationsChanges.length
+    ) {
+      writeContent(file, content, originalContent);
+      stats.total.push(file);
+    }
+  });
+}
+
+function packageUpdatesLibraries(file, oldContent) {
+  let content = oldContent;
+  let parsedJson = JSON.parse(content);
+  const replaceLibraries = [];
+  const types = ['dependencies', 'devDependencies', 'peerDependencies'];
+
+  // [Library name, new version or new library, new library version]
+  const librariesUpdates = [
+    ['@rancher/shell', '^3.0.0'],
+    ['@rancher/components', '^0.3.0-alpha.1'],
+    ['@nuxt/babel-preset-app', removePlaceholder],
+    ['@types/jest', '^29.5.2'],
+    ['@typescript-eslint/eslint-plugin', '~5.4.0'],
+    ['@typescript-eslint/parser', '~5.4.0'],
+    ['@vue/cli-plugin-babel', '~5.0.0'],
+    ['@vue/cli-plugin-e2e-cypress', '~5.0.0'],
+    ['@vue/cli-plugin-eslint', '~5.0.0'],
+    ['@vue/cli-plugin-router', '~5.0.0'],
+    ['@vue/cli-plugin-typescript', '~5.0.0'],
+    ['@vue/cli-plugin-unit-jest', '~5.0.0'],
+    ['@vue/cli-plugin-vuex', '~5.0.0'],
+    ['@vue/cli-service', '~5.0.0'],
+    ['@vue/eslint-config-typescript', '~9.1.0'],
+    ['@vue/vue2-jest', '@vue/vue3-jest', '^27.0.0-alpha.1'],
+    ['@vue/test-utils', '~2.0.0-0'],
+    ['core-js', '3.25.3'],
+    ['cache-loader', '^4.1.0'],
+    ['node-polyfill-webpack-plugin', '^3.0.0'],
+    ['portal-vue', '~3.0.0'],
+    ['require-extension-hooks-babel', '1.0.0'],
+    ['require-extension-hooks-vue', '3.0.0'],
+    ['require-extension-hooks', '0.3.3'],
+    ['sass-loader', '~12.0.0'],
+    ['typescript', '~4.5.5'],
+    ['vue-router', '~4.0.3'],
+    ['vue-virtual-scroll-list', 'vue3-virtual-scroll-list', '0.2.1'],
+    ['vue', '~3.2.13'],
+    ['vuex', '~4.0.0'],
+    ['xterm', '5.2.1'],
+  ];
+
+  types.forEach((type) => {
+    if (parsedJson[type]) {
+      librariesUpdates.forEach(([library, newVersion, newLibraryVersion]) => {
+        if (parsedJson[type][library]) {
+          const version = semver.coerce(parsedJson[type][library]);
+
+          if (newVersion === removePlaceholder) {
+            // Remove library
+            replaceLibraries.push([library, [parsedJson[type][library], removePlaceholder]]);
+            delete parsedJson[type][library];
+            content = JSON.stringify(parsedJson, null, 2);
+          } else if (newLibraryVersion) {
+            // Replace with a new library
+            replaceLibraries.push([library, [parsedJson[type][library], newVersion, newLibraryVersion]]);
+            content = content.replace(
+              `"${ library }": "${ parsedJson[type][library] }"`,
+              `"${ newVersion }": "${ newLibraryVersion }"`
+            );
+            parsedJson = JSON.parse(content);
+          } else if (version && semver.lt(version, semver.coerce(newVersion))) {
+            // Update library version if outdated
+            replaceLibraries.push([library, [parsedJson[type][library], newVersion]]);
+            content = content.replace(
+              `"${ library }": "${ parsedJson[type][library] }"`,
+              `"${ library }": "${ newVersion }"`
+            );
+            parsedJson = JSON.parse(content);
+          }
+        } else if (newLibraryVersion && library === newVersion) {
+          // Add new library if it doesn't exist
+          parsedJson[type][library] = newLibraryVersion;
+          replaceLibraries.push([library, [null, newLibraryVersion]]);
+          content = JSON.stringify(parsedJson, null, 2);
+        }
+      });
+    }
+  });
+
+  return [content, replaceLibraries];
+}
+
+function packageUpdatesEngine(file, oldContent) {
+  let content = oldContent;
+  let parsedJson = JSON.parse(content);
+  const replaceNode = [];
+
+  if (parsedJson.engines) {
+    const outdated = semver.lt(semver.coerce(parsedJson.engines.node), semver.coerce(nodeRequirement));
+
+    if (outdated) {
+      replaceNode.push([parsedJson.engines.node, nodeRequirement]);
+      content = content.replace(
+        `"node": "${ parsedJson.engines.node }"`,
+        `"node": ">=${ nodeRequirement }"`
+      );
+      parsedJson = JSON.parse(content);
+    }
+  }
+
+  return [content, replaceNode];
+}
+
+function packageUpdatesResolution(file, oldContent) {
+  let content = oldContent;
+  let parsedJson = JSON.parse(content);
+  const replaceResolution = [];
+  const resolutions = [
+    ['@vue/cli-service/html-webpack-plugin', '^5.0.0'],
+    ['**/webpack', removePlaceholder],
+  ];
+
+  if (parsedJson.resolutions) {
+    resolutions.forEach(([library, newVersion]) => {
+      if (newVersion === removePlaceholder) {
+        delete parsedJson.resolutions[library];
+        content = JSON.stringify(parsedJson, null, 2);
+        parsedJson = JSON.parse(content);
+      } else if (!parsedJson.resolutions[library]) {
+        parsedJson.resolutions[library] = newVersion;
+        content = JSON.stringify(parsedJson, null, 2);
+        parsedJson = JSON.parse(content);
+      } else {
+        const outdated = semver.lt(
+          semver.coerce(parsedJson.resolutions[library]),
+          semver.coerce(newVersion)
+        );
+
+        if (outdated) {
+          replaceResolution.push([parsedJson.engines.node, nodeRequirement]);
+          content = content.replace(
+            `"${ library }": "${ parsedJson.resolutions[library] }"`,
+            `"${ library }": "${ newVersion }"`
+          );
+          parsedJson = JSON.parse(content);
+        }
+      }
+    });
+  }
+
+  return [content, replaceResolution];
+}
+
+function packageUpdatesAnnotations(file, oldContent) {
+  let content = oldContent;
+  const parsedJson = JSON.parse(content);
+  const changesMade = [];
+
+  // Check if the file is in pkg/*/package.json
+  const dirName = path.dirname(file); // e.g., 'pkg/extension-name'
+  const parentDirName = path.basename(path.dirname(dirName)); // Should be 'pkg'
+
+  if (parentDirName === 'pkg') {
+    // The file is in pkg/<extension-name>/package.json
+    const annotations = {
+      'catalog.cattle.io/rancher-version':      '>= 2.10.0-0',
+      'catalog.cattle.io/ui-extension-version': '>= 3.0.0',
+    };
+
+    if (!parsedJson.rancher) {
+      parsedJson.rancher = { annotations };
+      changesMade.push('Added rancher annotations');
+    } else if (!parsedJson.rancher.annotations) {
+      parsedJson.rancher.annotations = annotations;
+      changesMade.push('Added rancher annotations');
+    } else {
+      // Merge existing annotations with the new ones
+      parsedJson.rancher.annotations = {
+        ...parsedJson.rancher.annotations,
+        ...annotations,
+      };
+      changesMade.push('Updated rancher annotations');
+    }
+
+    // Update content
+    content = JSON.stringify(parsedJson, null, 2);
+  }
+
+  return [content, changesMade];
+}
+
+module.exports = packageUpdates;

package/migrate/tasks/routerUpdates.js

@@ -0,0 +1,23 @@
+const glob = require('glob');
+const { replaceCases } = require('../utils/content');
+
+/**
+ * Vue Router
+ * Files: .vue, .js, .ts
+ */
+const routerUpdates = (params) => {
+  const files = glob.sync(params.paths || '**/*.{vue,js,ts}', { ignore: params.ignore });
+  const replacementCases = [
+    [`import Router from 'vue-router'`, `import { createRouter } from 'vue-router'`, 'Ensure correct import of createRouter'],
+    [`vueApp.use(Router)`, `const router = createRouter({})`, 'Update router initialization'],
+    [`Vue.use(Router)`, `const router = createRouter({})`, 'Update router initialization'],
+
+    [/import\s*\{([^}]*)\s* RouteConfig\s*([^}]*)\}\s*from\s*'vue-router'/g, (match, before, after) => `import {${ before.trim() } RouteRecordRaw ${ after.trim() }} from 'vue-router'`, 'Update RouteConfig to RouteRecordRaw'],
+    [/import\s*\{([^}]*)\s* Location\s*([^}]*)\}\s*from\s*'vue-router'/g, (match, before, after) => `import {${ before.trim() } RouteLocation ${ after.trim() }} from 'vue-router'`, 'Update Location to RouteLocation'],
+    ['mode: \'history\'', 'history: createWebHistory()', 'Update router mode to history'],
+  ];
+
+  replaceCases('router', files, replacementCases, `Updating Vue Router`);
+};
+
+module.exports = routerUpdates;

package/migrate/tasks/stylesUpdates.js

@@ -0,0 +1,19 @@
+const glob = require('glob');
+const { replaceCases } = require('../utils/content');
+
+/**
+ * Update styles (e.g., replace ::v-deep with :deep)
+ */
+const stylesUpdates = (params) => {
+  const files = glob.sync(params.paths || '**/*.{vue,scss,css}', { ignore: params.ignore });
+  const cases = [
+    // Replace '::v-deep' without parentheses with ':deep()'
+    [/::v-deep(?!\()/g, ':deep()', 'Replace ::v-deep with :deep()'],
+    // Replace '::v-deep(' with ':deep('
+    [/::v-deep\(/g, ':deep(', 'Replace ::v-deep( with :deep('],
+  ];
+
+  replaceCases('style', files, cases, `Updating styles`);
+};
+
+module.exports = stylesUpdates;

package/migrate/tasks/tsUpdates.js

@@ -0,0 +1,19 @@
+const { isSuggest } = require('../config');
+
+/* eslint-disable no-console */
+/**
+ * TS Updates
+ * Files: tsconfig*.json
+ *
+ * Add information about TS issues, recommend @ts-nocheck as temporary solution
+ */
+const tsUpdates = (params) => {
+  if (!isSuggest) {
+    console.warn('TS checks are stricter and may require to be fixed manually.',
+      'Use @ts-nocheck to give you time to fix them.',
+      'Add exception to your ESLint config to avoid linting errors.');
+  }
+  // TODO: Add case
+};
+
+module.exports = tsUpdates;

package/migrate/tasks/vueConfigUpdates.js

@@ -0,0 +1,30 @@
+const fs = require('fs');
+const glob = require('glob');
+const stats = require('../stats');
+const { writeContent } = require('../utils/content');
+
+/**
+ * Vue config update
+ * Files: vue.config.js
+ *
+ * Verify vue.config presence of deprecated Webpack5 options
+ * - devServer.public: 'path' -> client: { webSocketURL: 'path' }
+ */
+const vueConfigUpdates = (params) => {
+  const files = glob.sync(params.paths || 'vue.config**.js', { ignore: params.ignore });
+
+  files.forEach((file) => {
+    const originalContent = fs.readFileSync(file, 'utf8');
+    const content = originalContent;
+
+    // Verify vue.config presence of deprecated Webpack5 options
+    if (content.includes('devServer.public: \'path\'')) {
+      writeContent(file, content, originalContent);
+      stats.webpack.push(file);
+      stats.total.push(file);
+      // TODO: Add replacement
+    }
+  });
+};
+
+module.exports = vueConfigUpdates;

package/migrate/tasks/vueSyntaxUpdates.js

@@ -0,0 +1,148 @@
+const glob = require('glob');
+const { replaceCases } = require('../utils/content');
+const {
+  vueSetReplacement, vueDeleteReplacement, vueKeyReplacement, vueTemplateKeyReplacement, vueTemplateKeyRemoval
+} = require('../utils/vueSyntax');
+
+function vueSyntaxUpdates(params) {
+  const files = glob.sync(
+    params.paths || '**/*.{vue,js,ts}',
+    {
+      ignore: [
+        ...params.ignore,
+        '**/*.spec.ts',
+        '**/*.spec.js',
+        '**/__tests__/**',
+        '**/*.test.ts',
+        'jest.setup.js',
+        '**/*.d.ts',
+        '**/vue-shim.ts',
+      ],
+    }
+  );
+
+  const replacementCases = [
+    // Handle Vue.set and this.$set
+    [/\bVue\.set\(([^,]+),\s*([^,]+),\s*([^)]+)\)/g, (match, obj, prop, val) => vueSetReplacement(match, obj, prop, val), 'Replace Vue.set with direct assignment - https://vuejs.org/guide/extras/reactivity-in-depth.html'],
+    [/\bthis\.\$set\(([^,]+),\s*([^,]+),\s*([^)]+)\)/g, (match, obj, prop, val) => vueSetReplacement(match, obj, prop, val), 'Replace this.$set with direct assignment - https://vuejs.org/guide/extras/reactivity-in-depth.html'],
+
+    // Handle Vue.delete and this.$delete
+    [/\bVue\.delete\(([^,]+),\s*([^)]+)\)/g, (match, obj, prop) => vueDeleteReplacement(match, obj, prop), 'Replace Vue.delete with delete operator - https://vuejs.org/guide/extras/reactivity-in-depth.html'],
+    [/\bthis\.\$delete\(([^,]+),\s*([^)]+)\)/g, (match, obj, prop) => vueDeleteReplacement(match, obj, prop), 'Replace this.$delete with delete operator - https://vuejs.org/guide/extras/reactivity-in-depth.html'],
+
+    // Replace Vue import with createApp and initialize vueApp
+    [/import Vue from 'vue';?/g, `import { createApp } from 'vue';\nconst vueApp = createApp({});`, 'Replace Vue import with createApp - https://v3-migration.vuejs.org/breaking-changes/global-api.html#a-new-global-api-createapp'],
+
+    // Replace new Vue({}) with createApp({})
+    [/new Vue\(/g, 'createApp(', 'Replace new Vue with createApp - https://v3-migration.vuejs.org/breaking-changes/global-api.html#a-new-global-api-createapp'],
+
+    // Replace Vue global methods with vueApp methods
+    [/\bVue\.(config|directive|filter|mixin|component|use|prototype)\b/g, (match, method) => `vueApp.${ method }`, 'Replace Vue global methods with vueApp methods - https://v3-migration.vuejs.org/breaking-changes/global-api.html#a-new-global-api-createapp'],
+
+    // Update Vue.prototype to vueApp.config.globalProperties
+    [/Vue\.prototype/g, 'vueApp.config.globalProperties', 'Update Vue.prototype to vueApp.config.globalProperties - https://v3-migration.vuejs.org/breaking-changes/global-api.html#a-new-global-api-createapp'],
+
+    // Remove Vue.util as it's no longer available
+    [/Vue\.util/g, '', 'Vue.util is private and no longer available - https://v3-migration.vuejs.org/migration-build.html#partially-compatible-with-caveats'],
+
+    // Replace vue-virtual-scroll-list with vue3-virtual-scroll-list
+    [`vue-virtual-scroll-list`, `vue3-virtual-scroll-list`, 'library update'],
+
+    // Update Vue.nextTick
+    [/\bVue\.nextTick\b/g, 'nextTick', 'Update Vue.nextTick to nextTick - https://v3-migration.vuejs.org/breaking-changes/global-api-treeshaking.html#global-api-treeshaking'],
+    [/\bthis\.nextTick\b/g, 'nextTick', 'Update this.nextTick to nextTick - https://v3-migration.vuejs.org/breaking-changes/global-api-treeshaking.html#global-api-treeshaking'],
+    // Note: You may need to import nextTick from 'vue' where used.
+
+    // Update props default function context
+    [/(default)\(\)\s*\{([\s\S]*?)return\s+([\s\S]*?)\}/g, (match, def, middle, retVal) => `${ def }(props) {${ middle }return ${ retVal }}`, 'Update props default function context - https://v3-migration.vuejs.org/breaking-changes/props-default-this.html'],
+
+    // Replace @input with @update:value (excluding plainInputEvent)
+    [/@input="((?!.*plainInputEvent).+?)"/g, (_, handler) => `@update:value="${ handler }"`, 'Update @input to @update:value'],
+
+    // Update v-model syntax
+    [/v-model=/g, 'v-model:value=', 'Update v-model to v-model:value'],
+
+    // Replace .sync modifier with v-model
+    [/:([a-zA-Z0-9_-]+)\.sync=/g, 'v-model:$1=', 'Update .sync modifier to v-model'],
+
+    // Replace click.native with click
+    [/(\b@click)\.native/g, '$1', 'Remove .native modifier from @click'],
+
+    // Remove v-on="$listeners"
+    [/v-on="\$listeners"/g, '', 'Remove v-on="$listeners" as it is no longer needed - https://v3-migration.vuejs.org/breaking-changes/listeners-removed.html'],
+
+    // Update :listeners="$listeners" to v-bind="$attrs"
+    [/:listeners="\$listeners"/g, 'v-bind="$attrs"', 'Update :listeners="$listeners" to v-bind="$attrs" - https://v3-migration.vuejs.org/breaking-changes/listeners-removed.html'],
+
+    // Update $scopedSlots to $slots
+    [/\$scopedSlots/g, '$slots', 'Update $scopedSlots to $slots - https://v3-migration.vuejs.org/breaking-changes/slots-unification.html'],
+
+    // Update slot-scope to v-slot
+    [/slot-scope="([^"]+)"/g, 'v-slot="$1"', 'Update slot-scope to v-slot - https://vuejs.org/guide/components/slots.html#scoped-slots'],
+
+    // Update this.$slots['name'] to this.$slots.name()
+    [/this\.\$slots\['([^']+)'\]/g, `this.$slots[\'$1\']()`, `Update this.$slots['name'] to this.$slots.name() - https://vuejs.org/guide/components/slots.html#scoped-slots`],
+
+    // Remove portal-vue components (now use Teleport)
+    [/<\/?portal(-target)?\b[^>]*>/g, '', 'Remove portal components (use Teleport instead) - https://v3.vuejs.org/guide/teleport.html'],
+
+    // Add :key to <template v-for> elements if missing
+    [
+      /(<template\b[^>]*v-for="([^"]*)"[^>]*)(>)/g,
+      (match, beforeTagEnd, vForContent, tagClose) => vueKeyReplacement(match, beforeTagEnd, vForContent, tagClose),
+      'Add :key to <template v-for> elements if missing, using existing variables',
+    ],
+
+    // Move :key from child elements to <template v-for>
+    [
+      /(<template\b[^>]*v-for="[^"]*"[^>]*>)([\s\S]*?)(<\/template>)/g,
+      (match, templateStart, templateContent, templateEnd) => vueTemplateKeyReplacement(match, templateStart, templateContent, templateEnd),
+      'Move :key from child elements to <template v-for>',
+    ],
+
+    // Remove any remaining :key from child elements within <template v-for>
+    [
+      /(<template\b[^>]*v-for="[^"]*"[^>]*>)([\s\S]*?)(<\/template>)/g,
+      (match, templateStart, templateContent, templateEnd) => vueTemplateKeyRemoval(match, templateStart, templateContent, templateEnd),
+      'Remove any remaining :key from child elements within <template v-for>',
+    ],
+
+    // For other elements with v-for (excluding <template>), ensure :key is present
+    [
+      /(<(?!template\b)\w+[^>]*v-for="([^"]*)"[^>]*)(>)/g,
+      (match, beforeTagEnd, vForContent, tagClose) => vueKeyReplacement(match, beforeTagEnd, vForContent, tagClose),
+      'Add :key to elements with v-for that lack it, using existing variables (excluding <template>)',
+    ],
+
+    // Update custom directives hooks
+    [/\binserted\s*\(/g, 'mounted(', 'Update inserted hook to mounted - https://v3-migration.vuejs.org/breaking-changes/custom-directives.html'],
+    [/\bcomponentUpdated\s*\(/g, 'updated(', 'Update componentUpdated hook to updated - https://v3-migration.vuejs.org/breaking-changes/custom-directives.html'],
+    [/\bunbind\b/g, 'unmounted', 'Update unbind hook to unmounted - https://v3-migration.vuejs.org/breaking-changes/custom-directives.html'],
+
+    // Update hook events
+    [/@hook:/g, '@vue:', 'Update @hook: events to @vue: - https://v3-migration.vuejs.org/breaking-changes/vnode-lifecycle-events.html'],
+
+    // Remove events API ($on, $off, $once)
+    [/\$on\(/g, '', 'Remove $on as the events API has been removed - https://v3-migration.vuejs.org/breaking-changes/events-api.html'],
+    [/\$off\(/g, '', 'Remove $off as the events API has been removed - https://v3-migration.vuejs.org/breaking-changes/events-api.html'],
+    [/\$once\(/g, '', 'Remove $once as the events API has been removed - https://v3-migration.vuejs.org/breaking-changes/events-api.html'],
+
+    // Update Vuex store creation
+    [/new Vuex\.Store\(/g, 'createStore(', 'Update Vuex store creation - https://vuex.vuejs.org/guide/migrating-to-4-0-from-3-x.html#installation-process'],
+    [/import Vuex from 'vuex'/g, `import { createStore } from 'vuex'`, 'Update Vuex import - https://vuex.vuejs.org/guide/migrating-to-4-0-from-3-x.html#installation-process'],
+
+    // Replace n-link with router-link
+    [/<\/?n-link(\s|>)/g, (match) => match.replace('n-link', 'router-link'), 'Replace n-link with router-link'],
+
+    // Replace v-popover with VDropdown
+    [/\bv-popover\b/g, 'VDropdown', 'Replace v-popover with VDropdown'],
+    [/<template\s+#popover>/g, '<template #popper>', 'Update slot name from #popover to #popper'],
+
+    // Extra cases TBD (it seems like we already use the suggested way for arrays)
+    // watch option used on arrays not triggered by mutations - https://v3-migration.vuejs.org/breaking-changes/watch.html
+  ];
+
+  replaceCases('vueSyntax', files, replacementCases, 'Updating Vue syntax', params);
+}
+
+module.exports = vueSyntaxUpdates;

package/migrate/utils/content.js

@@ -0,0 +1,165 @@
+/* eslint-disable no-console */
+const fs = require('fs');
+const { createPatch } = require('diff');
+const stats = require('../stats');
+const {
+  isDry, isSuggest, isVerbose, removePlaceholder
+} = require('../config');
+
+const diffOutput = [];
+
+function printUsage() {
+  console.log(`
+Usage: node index.js [options]
+
+Options:
+
+  --dry                 Dry Run Mode: Run the script without making any changes to your files.
+  --verbose             Verbose Output: Enable detailed logging.
+  --suggest             Suggest Mode: Generate a 'suggested_changes.diff' file with proposed changes.
+  --paths=<path>        Specify Paths: Limit migration to specific paths or files (accepts glob patterns).
+  --ignore=<patterns>   Ignore Patterns: Exclude specific files or directories (accepts comma-separated glob patterns).
+  --files               Output Modified Files: List all files modified during the migration.
+  --log                 Generate Log File: Write detailed migration statistics to 'stats.json'.
+  --help, -h            Display this help message and exit.
+  `);
+}
+
+function writeContent(file, content, originalContent) {
+  if (!isDry && !isSuggest) {
+    fs.writeFileSync(file, content);
+  } else if (isSuggest) {
+    if (typeof originalContent === 'undefined') {
+      originalContent = fs.readFileSync(file, 'utf8');
+    }
+    const diff = createPatch(file, originalContent, content, '', '', { context: 3 });
+
+    if (diff.trim()) {
+      diffOutput.push({ file, diff });
+    }
+  }
+}
+
+function printContent(...args) {
+  if (isVerbose) {
+    console.log(...args);
+  }
+}
+
+function escapeRegExp(string) {
+  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+function setParams(params) {
+  const args = process.argv.slice(2);
+  const paramKeys = ['paths', 'ignore'];
+
+  args.forEach((val) => {
+    paramKeys.forEach((key) => {
+      if (val.startsWith(`--${ key }=`)) {
+        const value = val.split('=')[1];
+
+        if (key === 'ignore') {
+          params.ignorePatterns = value.split(',').map((pattern) => pattern.trim());
+        } else {
+          params[key] = value;
+        }
+      }
+    });
+  });
+
+  // Add user-specified ignore patterns
+  if (params.ignorePatterns.length > 0) {
+    params.ignore = params.ignore.concat(params.ignorePatterns);
+  }
+}
+
+function printLog() {
+  if (process.argv.includes('--files')) {
+    console.dir(stats, { compact: true });
+  }
+
+  const statsCount = Object.entries(stats).reduce(
+    (acc, [key, value]) => ({
+      ...acc,
+      [key]: value.length,
+    }),
+    {}
+  );
+
+  console.table(statsCount);
+
+  if (isSuggest && diffOutput.length > 0) {
+    const diffFile = 'suggested_changes.diff';
+    let diffContent = '';
+
+    diffOutput.forEach(({ file, diff }) => {
+      diffContent += `--- ${ file }\n+++ ${ file }\n${ diff }\n`;
+    });
+
+    fs.writeFileSync(diffFile, diffContent);
+    console.log(`\nSuggested changes have been written to ${ diffFile }`);
+  }
+
+  if (process.argv.includes('--log')) {
+    fs.writeFileSync('stats.json', JSON.stringify(stats, null, 2));
+  }
+}
+
+function replaceCases(fileType, files, replacementCases, printText, params) {
+  files.forEach((file) => {
+    const originalContent = fs.readFileSync(file, 'utf8');
+    let content = originalContent;
+    const matchedCases = [];
+
+    replacementCases.forEach(([pattern, replacement, notes]) => {
+      let matches = false;
+
+      if (typeof pattern === 'string') {
+        const regex = new RegExp(escapeRegExp(pattern), 'g');
+
+        if (regex.test(content)) {
+          matches = true;
+
+          // Exclude cases without replacement
+          if (replacement) {
+            // Remove discontinued functionalities which do not break
+            content = content.replace(regex, replacement === removePlaceholder ? '' : replacement);
+          }
+        }
+      } else if (pattern.test(content)) {
+        matches = true;
+
+        // Exclude cases without replacement
+        if (replacement) {
+          content = content.replace(pattern, replacement === removePlaceholder ? '' : replacement);
+        }
+      }
+
+      if (matches) {
+        matchedCases.push({
+          pattern: pattern.toString(),
+          replacement,
+          notes,
+        });
+      }
+    });
+
+    if (matchedCases.length) {
+      writeContent(file, content, originalContent);
+      printContent(file, printText, matchedCases);
+      stats[fileType].push(file);
+      stats.total.push(file);
+    }
+  });
+}
+
+module.exports = {
+  printUsage,
+  writeContent,
+  printContent,
+  escapeRegExp,
+  setParams,
+  printLog,
+  replaceCases
+};

package/migrate/utils/index.js

@@ -0,0 +1,4 @@
+const vueSyntax = require('./vueSyntax');
+const utils = require('./content');
+
+module.exports = { vueSyntax, utils };

package/migrate/utils/vueSyntax.js

@@ -0,0 +1,126 @@
+/*
+* Vue syntax specific utilities
+*/
+const isSimpleIdentifier = (str) => /^[a-zA-Z_$][0-9a-zA-Z_$]*$/.test(str.trim());
+const isBracketedExpression = (str) => str.trim().startsWith('[') && str.trim().endsWith(']');
+const isStringLiteral = (str) => /^['"].*['"]$/.test(str.trim());
+// Extracts the key expression from a v-for directive.
+const extractKeyExpression = (vForContent) => {
+  const vForMatch = vForContent.match(/^\s*\(([^,]+),\s*([^)]+)\)\s+in\s+(.*)$/);
+  let keyExpression = null;
+
+  if (vForMatch) {
+    // v-for="(item, key) in items"
+    keyExpression = vForMatch[2].trim();
+  } else {
+    const simpleVForMatch = vForContent.match(/^\s*([^\s]+)\s+in\s+(.*)$/);
+
+    if (simpleVForMatch) {
+      // v-for="item in items"
+      // Use 'item' as key if it's a simple identifier
+      keyExpression = isSimpleIdentifier(simpleVForMatch[1].trim()) ? simpleVForMatch[1].trim() : null;
+    }
+  }
+
+  return keyExpression;
+};
+// Adds the :key attribute to a tag if it doesn't already have one.
+const addKeyAttribute = (tag, keyExpression) => {
+  // Add space if necessary
+  const space = tag.endsWith(' ') ? '' : ' ';
+
+  return `${ tag }${ space }:key="${ keyExpression }"`;
+};
+const vueSetReplacement = (match, obj, prop, val) => {
+  prop = prop.trim();
+  obj = obj.trim();
+  val = val.trim();
+
+  if (isBracketedExpression(prop)) {
+    return `${ obj }${ prop } = ${ val }`;
+  } else if (isStringLiteral(prop)) {
+    return `${ obj }[${ prop }] = ${ val }`;
+  } else if (isSimpleIdentifier(prop)) {
+    return `${ obj }.${ prop } = ${ val }`;
+  } else {
+    return `${ obj }[${ prop }] = ${ val }`;
+  }
+};
+const vueDeleteReplacement = (match, obj, prop) => {
+  prop = prop.trim();
+  obj = obj.trim();
+
+  if (isBracketedExpression(prop)) {
+    return `delete ${ obj }${ prop }`;
+  } else if (isStringLiteral(prop)) {
+    return `delete ${ obj }[${ prop }]`;
+  } else if (isSimpleIdentifier(prop)) {
+    return `delete ${ obj }.${ prop }`;
+  } else {
+    return `delete ${ obj }[${ prop }]`;
+  }
+};
+const vueKeyReplacement = (match, beforeTagEnd, vForContent, tagClose) => {
+  // Check if :key exists in the tag
+  if (beforeTagEnd.includes(':key=')) {
+    return match; // :key already exists, do not modify
+  }
+
+  const keyExpression = extractKeyExpression(vForContent);
+
+  if (keyExpression) {
+    const updatedTag = addKeyAttribute(beforeTagEnd, keyExpression);
+
+    return `${ updatedTag }${ tagClose }`;
+  } else {
+  // Cannot safely determine a key, so do not add one
+    return match;
+  }
+};
+const vueTemplateKeyReplacement = (match, templateStart, templateContent, templateEnd) => {
+  // Check if :key is on the <template> tag
+  const hasKeyOnTemplate = /:key=/.test(templateStart);
+
+  // Find any :key on direct child elements
+  const childWithKeyRegex = /(<\w+[^>]*)(\s+:key="([^"]+)")([^>]*>)/g;
+  let updatedContent = templateContent;
+  let movedKey = null;
+
+  updatedContent = updatedContent.replace(childWithKeyRegex, (childMatch, beforeKey, keyAttr, keyValue, afterKey) => {
+    if (!hasKeyOnTemplate && !movedKey) {
+    // Move the first encountered :key to the template
+      movedKey = keyValue;
+    }
+
+    // Remove :key from child element
+    return `${ beforeKey }${ afterKey }`;
+  });
+
+  if (!hasKeyOnTemplate && movedKey) {
+  // Add :key to the <template> tag
+    const updatedTemplateStart = `${ addKeyAttribute(templateStart.replace(/>$/, ''), movedKey) }>`;
+
+    return `${ updatedTemplateStart }${ updatedContent }${ templateEnd }`;
+  }
+
+  return `${ templateStart }${ updatedContent }${ templateEnd }`;
+};
+const vueTemplateKeyRemoval = (match, templateStart, templateContent, templateEnd) => {
+  const childWithKeyRegex = /(<\w+[^>]*)(\s+:key="[^"]+")([^>]*>)/g;
+  const updatedContent = templateContent.replace(childWithKeyRegex, '$1$3');
+
+  return `${ templateStart }${ updatedContent }${ templateEnd }`;
+};
+
+module.exports = {
+  isSimpleIdentifier,
+  isBracketedExpression,
+  isStringLiteral,
+  extractKeyExpression,
+  addKeyAttribute,
+  vueSetReplacement,
+  vueDeleteReplacement,
+  vueKeyReplacement,
+  vueTemplateKeyReplacement,
+  vueTemplateKeyRemoval
+};

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@rancher/create-extension",
   "description": "Rancher UI Extension generator",
-  "version": "1.0.0-rc.1",
+  "version": "1.0.0",
   "license": "Apache-2.0",
   "author": "SUSE",
-  "packageManager": "yarn@4.4.1",
+  "packageManager": "yarn@4.5.0",
   "bin": {
     "create-extension": "./init"
   },
@@ -16,7 +16,11 @@
     "node": ">=20"
   },
   "dependencies": {
-    "fs-extra": "^10.0.0"
+    "diff": "^7.0.0",
+    "fs-extra": "^10.0.0",
+    "glob": "^11.0.0",
+    "path": "^0.12.7",
+    "semver": "^7.6.3"
   },
   "_pkgs": {
     "core-js": "3.25.3",