Skip to content

Manual Migrations

Sometimes, a code change is needed that cannot be easily or reliably automated and requires human attention. For finding such places in our source code, vue-metamorph provides an interface for this.

The vue-metamorph CLI runs manual migration plugins after running codemod plugins.

DANGER

Do not mutate the AST in manual migrations! vue-metamorph passes the same object to each manual migration plugin, so any mutations may cause incorrect results from later plugins.

ts
import {  } from 'vue-metamorph';

const :  = {
  : 'manual',
  : 'Migrate vue event emitter',
  ({
    ,
    ,
    ,
    ,
    : {  }
  }) {
    for (const  of ) {
      (, {
        () {
          // find calls to $on(), $off(), $once() functions
          if (... === 'MemberExpression'
            && .... === 'Identifier'
            && ['$on', '$off', '$once'].(....)) {

            // To show a manual migration result for a node, call `report()` and pass the node and a message
            (.., 'Migrate the event emitter methods');
          }
          this.();
        }
      });
    }
  }
}

The CLI output for this manual migration plugin might look like:

path/to/my/file.js 4:1-4:12
Migrate the event emitter methods

1 | import MyComponent from './MyComponent.vue';
2 |
3 | const instance = new MyComponent();
4 | instance.$on('click', () => { console.log('clicked'); });
  | ^^^^^^^^^^^^
5 |
6 | // ...
7 |