vue-jscodeshift-adapter

Run jscodeshift on Vue single file components

Install

npm install vue-jscodeshift-adapter -D

Usage

The instructions below assume you're familiar with jscodeshift.

Run a codemod on some .js and/or .vue files

The source file will be updated appropriately based on the return value of your transform().

If .vue file doesn't have a <script>, your transform() will not be called and the source file will not be changed.

1. Create wrapped transform function

// my-transform.js
import adapt from 'vue-jscodeshift-adapter';
import someCodemod from 'some-codemod';

export default adapt(someCodemod);

2. Run jscodeshift

$ jscodeshift <path> -t my-transform.js --extensions vue,js

See jscodeshift readme for more info on jscodeshift CLI.

License

MIT

Change Log

[3.0.0] - 2024-05-10

Breaking

• Switch to ES Modules

Fixed

• Handle vue files that contain both <script> and <script setup>.

[2.2.1] - 2023-10-11

• Fix indent of whitespace-only lines. Thanks to @nemoDreamer.

[2.2.0] - 2020-10-02

• Preserve indent of <script> and <style> tags. Thanks to @SevInf

[2.1.0] - 2020-05-15

• Update dependencies

[2.0.3] - 2019-12-11

• Update dependencies

[2.0.2] - 2019-05-23

• Update dependencies

[2.0.1] - 2018-08-01

• Update dependencies

[2.0.0] - 2018-03-25

Breaking Change

The "modify any block of a vue component" use case is temporarily not supported until the API is figured out.

As of 2.0.0, this module can only

• transform js files
• transform the <script> block of vue files

[1.2.0] - 2018-03-18

Added

• Ability to run on directory containing js and vue files (#4).

[1.1.1] - 2018-03-13

Fixed

• No longer changing spacing inside <template> when transform() doesn't touch it (#3)

[1.1.0] - 2018-03-03

Added

• Transform can change <script> content through fileInfo.script.content
• Transform can change <template> content through fileInfo.template.content
• Transform can change <style> content through fileInfo.style.content

[1.0.0] - 2018-25-02

Added

• Initial impl