Vue Codemod Scripts

Common errors

• Error: transformation <name> not found.

  cause The specified transformation name does not exist among the built-in codemods, or the path to a custom transformation module is incorrect.
  fix Verify the transformation name against the list of included transformations in the `vue-codemod` documentation, or ensure the path to your custom transformation is accurate and accessible.

• Error: Path <path> does not exist.

  cause The file or directory path provided to the `vue-codemod` CLI does not correspond to an existing location on the filesystem.
  fix Double-check the provided `<path>` for typos, incorrect relative/absolute paths, or ensure that the target files/directory are accessible from where the command is executed.

• SyntaxError: Cannot use import statement outside a module

  cause You are attempting to use an ES module syntax (`import`) in a CommonJS (`require`) environment, or vice-versa, when using the programmatic API or developing custom transformation scripts.
  fix For ES modules, ensure your `package.json` includes `"type": "module"` or use `.mjs` file extensions. For CommonJS, use `require()` statements and `.cjs` file extensions if explicitly needed, or configure your bundler/runtime accordingly.

Warnings

• breaking Node.js versions below 10 are no longer supported since `v0.0.5`. Ensure your development environment uses Node.js 10 or higher.
  Fix: Upgrade your Node.js installation to version 10 or newer. Tools like `nvm` (Node Version Manager) can facilitate this.
• gotcha The package is currently in an experimental state (version 0.0.5). While officially maintained, developers should anticipate potential edge cases, subtle differences in migration, or incomplete transformations.
  Fix: Always use a version control system and conduct thorough testing of your application after applying codemods. Review the generated code carefully before deploying to production environments.
• gotcha The codemods are designed as part of a comprehensive Vue 3 migration strategy. Some issues may require manual fixes or reliance on ESLint rules (e.g., `eslint-plugin-vue@7`) rather than automated codemods.
  Fix: Adhere to the complete migration path outlined in the official Vue 3 migration guide, which includes leveraging ESLint, manual review, and the compatibility build alongside codemods.

Install

• npm install vue-codemod npm
• yarn add vue-codemod yarn
• pnpm add vue-codemod pnpm

Imports

• runTransformation
  wrong:

  const { runTransformation } = require('vue-codemod')

  correct:

  import { runTransformation } from 'vue-codemod'

  Primarily a CLI tool, but exposes a programmatic API. Ensure your project is configured for ESM if importing directly into modern Node.js environments.
• CLI Usage (npx)

  npx vue-codemod <path> -t <transformation> --params [transformation params]

  The most common usage pattern is via the command line using `npx` or a globally installed package. No direct import is required for CLI execution.
• Specific Codemod (e.g., remove-vue-set-and-delete)

  npx vue-codemod ./src -t remove-vue-set-and-delete

  To apply a specific built-in codemod, use the `-t` flag with its name. Replace `./src` with your target files or directory.

Quickstart

Demonstrates the programmatic usage of `vue-codemod` by applying a simple, custom transformation to a temporary file. This illustrates how to interface with `runTransformation` directly, though CLI usage is more common.

import { runTransformation } from 'vue-codemod';
import path from 'path';
import fs from 'fs';
import os from 'os';

// Create a temporary directory and file for the quickstart to operate on
const tempDir = fs.mkdtempSync(path.join(os.tmpdir(), 'vue-codemod-quickstart-'));
const filePath = path.join(tempDir, 'main.js');
const originalCode = 'import Vue from "vue";\nnew Vue().mount("#app");\nconsole.log("Hello Vue");';
fs.writeFileSync(filePath, originalCode, 'utf8');

const fileInfo = {
  path: filePath,
  source: fs.readFileSync(filePath, 'utf8')
};

// This dummy transformation replaces 'Vue' with 'App' for demonstration.
// In a real scenario, the 'transformation' argument for 'runTransformation'
// would typically be a loaded module from 'vue-codemod/dist/transformations/<name>'.
// The 'api' object passed to the transformation function contains 'jscodeshift'.
const dummyTransformation = (file: { path: string; source: string }, api: { jscodeshift: any }) => {
  const j = api.jscodeshift;
  const root = j(file.source);
  return root.find(j.Identifier, { name: 'Vue' })
    .replaceWith(j.identifier('App'))
    .toSource();
};

async function applyCodemod() {
  console.log(`Created temporary file at: ${filePath}`);
  console.log(`Applying codemod to ${filePath}...`);
  try {
    const transformedCode = await runTransformation(
      fileInfo,
      dummyTransformation, // Pass the transformation function
      {} // Optional parameters for the transformation
    );
    console.log('Transformation complete.');
    console.log('Original code (first 50 chars):\n' + fileInfo.source.substring(0, 50) + '...');
    console.log('Transformed code (first 50 chars):\n' + transformedCode.substring(0, 50) + '...');
    // In a real application, you'd write `transformedCode` back to the file
    // fs.writeFileSync(filePath, transformedCode, 'utf8');
  } catch (error) {
    console.error('Error during transformation:', error);
  } finally {
    // Clean up the temporary directory and file
    fs.rmSync(tempDir, { recursive: true, force: true });
    console.log(`Cleaned up temporary directory: ${tempDir}`);
  }
}

applyCodemod();