Registry / web-framework / vue-jscodeshift-adapter

vue-jscodeshift-adapter

library3.0.0jsnpmunverified

vue-jscodeshift-adapter is a utility library designed to bridge jscodeshift, Facebook's JavaScript codemod toolkit, with Vue.js Single File Components (SFCs). It enables developers to apply programmatic code transformations specifically to the `<script>` sections within `.vue` files, which jscodeshift does not natively support. The current stable version is 3.0.0. This package was an early solution in the Vue codemod space, heavily inspiring the 'jscodeshift-adapters' project. While jscodeshift itself receives regular updates, vue-jscodeshift-adapter appears to be in a maintenance-only state with its last release over two years ago. Its primary differentiator is its targeted extraction and re-insertion of Vue SFC script content, allowing standard jscodeshift transforms to operate on Vue-specific logic, distinguishing it from general jscodeshift usage or other Vue migration tools like 'vue-codemod' that offer pre-built transformations.

web-framework

npm install vue-jscodeshift-adapter

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-JSCODESHIFT-AD

vue-jscodeshift-adapter

web-frameworkjavascriptv3.0.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

adapt

✓ import adapt from 'vue-jscodeshift-adapter';

✗ const adapt = require('vue-jscodeshift-adapter');

The primary way to use this library is by importing the default 'adapt' function for ESM projects. While older versions might have supported CommonJS, modern usage and the successor 'jscodeshift-adapters' emphasize ESM.

This quickstart demonstrates how to create a jscodeshift transform, adapt it for Vue SFCs using vue-jscodeshift-adapter, and execute it via the jscodeshift CLI to modify 'var' declarations to 'let' and add comments to script blocks.

import adapt from 'vue-jscodeshift-adapter'; // Define your jscodeshift transform function. // This example changes 'var' to 'let' and adds a comment. function myCodemod(file, api) { const j = api.jscodeshift; const root = j(file.source); // Transform 'var' declarations to 'let' root.find(j.VariableDeclaration, { kind: 'var' }) .forEach(path => { path.node.kind = 'let'; }); // Add a comment at the top of the script block const firstNode = root.get().node; if (firstNode) { firstNode.comments = firstNode.comments || []; firstNode.comments.unshift(j.commentBlock(' This script was processed by vue-jscodeshift-adapter ')); } return root.toSource(); } // Export the adapted transform function export default adapt(myCodemod); /* To run this codemod on your Vue and JavaScript files: 1. Save the above code as `transform.js` in your project root. 2. Ensure you have `jscodeshift` installed as a dev dependency: `npm install jscodeshift --save-dev` 3. Run the codemod using the jscodeshift CLI: `npx jscodeshift your-project-path -t ./transform.js --extensions vue,js` Replace `your-project-path` with the actual path to your source files (e.g., `./src`). The `--extensions vue,js` flag ensures both Vue SFCs and regular JS files are processed. */

Debug

Known issues

gotchaThis adapter only processes the `<script>` block within Vue Single File Components. If a `.vue` file lacks a `<script>` block, your jscodeshift transform will not be invoked for that file, and no changes will be applied, even if other blocks (like `<template>` or `<style>`) exist.

fix

Ensure all `.vue` files you intend to transform include a `<script>` block, even an empty one (`<script></script>`), if you expect the codemod to run.

affects: >=1.0.0

gotchaThe package has not been updated in over two years (last release 3.0.0 was March 2022). This means it may not be fully compatible with the latest Vue.js versions (e.g., Vue 3.3+, Vue 3.4+) or recent versions of jscodeshift and its underlying parsers, potentially leading to parsing errors or unexpected behavior with modern JavaScript/TypeScript syntax or newer Vue SFC features.

fix

Thoroughly test transformations on a small subset of your codebase before applying broadly. Consider using the more broadly supported 'jscodeshift-adapters' (which was inspired by this project) or other Vue-specific codemod collections like 'vue-codemod' for Vue 2/3 migrations, which may have more active maintenance.

affects: <=3.0.0

gotchaVersion mismatches with `vue-template-compiler` (a common dependency in the Vue ecosystem) can occur, leading to build errors or incorrect parsing of Vue SFCs. This can happen if `vue-jscodeshift-adapter` or another tool in your dependency tree relies on a specific `vue-template-compiler` version that conflicts with your project's Vue version.

fix

Ensure your `vue-template-compiler` version matches your installed `vue` package version. If using `vue-loader >= 10.0`, manually update `vue-template-compiler`. If issues persist, check your dependency tree for conflicting `vue-template-compiler` versions and use `resolutions` or `overrides` in your `package.json` to force a consistent version.

affects: >=1.0.0

Errors

Common errors & fixes

This may cause things to work incorrectly. Make sure to use the same version for both. (vue-template-compiler@X.Y.Z)

A version mismatch between the installed `vue` package and `vue-template-compiler` (often a transitive dependency) causes conflicts in parsing Vue Single File Components.

fix

Explicitly install `vue-template-compiler` as a dev dependency with the exact same version as your `vue` package: `npm install vue-template-compiler@<YOUR_VUE_VERSION> --save-dev`.

Error: Your transform did not return a value. Please return the root.toSource().

The jscodeshift transform function, after using `vue-jscodeshift-adapter`, must explicitly return the modified source code using `root.toSource()`.

fix

Ensure your `myCodemod` function (passed to `adapt`) ends with `return root.toSource();`.

jscodeshift: unknown parser: 'vue'

This error typically indicates that jscodeshift itself does not recognize 'vue' as a valid parser type, or that the `--extensions` flag is misunderstood as a parser instruction. The `vue-jscodeshift-adapter` handles the Vue SFC parsing internally.

fix

You do not need to specify a 'vue' parser. Ensure you are using the `--extensions vue,js` flag correctly with jscodeshift to tell it which file types to process. If you need a specific JavaScript/TypeScript parser for the *script content*, specify it via `--parser=tsx` or `--parser=babel` etc.

Upgrade

Version history

3.0.0latest on npm

Audit

Dependencies

jscodeshiftrequiredRequired as the underlying codemod runner; this adapter provides the bridge for Vue SFCs.

vue-template-compileroptionalUsed internally by Vue tools to parse SFCs; version mismatches can cause issues.

Agent activity

13 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/psalaets/vue-jscodeshift-adapter ↗

packagehttps://www.npmjs.com/package/vue-jscodeshift-adapter ↗