synvert-javascript

synvert-javascript is a command tool to rewrite javascript code automatically, it depends on synvert-core-javascript and synvert-snippets-javascript.

synvert-core-javascript provides a set of DSLs to rewrite javascript code.

synvert-snippets-javascript provides official snippets to rewrite javascript code.

Here is an example of synvert snippet.

const Synvert = require("synvert-core");

new Synvert.Rewriter("jquery", "deprecate-event-shorthand", () => {
  description('jQuery event shorthand is deprecated.');

  withinFiles(Synvert.ALL_FILES, function () {
    // $('#test').click(function(e) { });
    // =>
    // $('#test').on('click', function(e) { });
    withNode(
      {
        type: "CallExpression",
        callee: { type: "MemberExpression", object: /^\$/, property: 'click' },
        arguments: { length: 1, first: { type: { in: ["FunctionExpression", "ArrowFunctionExpression"] } } },
      },
      () => {
        replace("callee.property", { with: "on" });
        insert("'click', ", { to: "arguments.0", at: "beginning" });
      }
    );

    // $form.submit();
    // =>
    // $form.trigger('submit');
    withNode(
      {
        type: "CallExpression",
        callee: { type: "MemberExpression", object: /^\$/, property: 'submit' },
        arguments: { length: 0 },
      },
      () => {
        replace(["callee.property", "arguments"], { with: "trigger('submit')" });
      }
    );
  });
});

Installation

To install the latest version, run

$ npm install -g synvert

This will also install synvert-core-javascript.

Before using synvert, you need to sync all official snippets first.

$ synvert-javascript --sync

Then you can use synvert to rewrite your javascript code, e.g.

$ synvert-javascript -r jquery/migrate

Usage

$ synvert-javascript --help
Write javascript code to change javascript code

USAGE
  $ synvert-javascript

OPTIONS
  -d, --load=load          load custom snippets, snippet paths can be local file path or remote http url
  -f, --format=format      output format
  -g, --generate=generate  generate a snippet with snippet name
  -h, --help               show CLI help
  -l, --list               list snippets
  -r, --run=run            run a snippet with snippet name
  -s, --show=show          show a snippet with snippet name
  -v, --version
  --enableEcmaFeaturesJsx  enable EcmaFeatures jsx
  --path=path              [default: .] project path
  --showRunProcess         show processing files when running a snippet
  --skipFiles=skipFiles    [default: node_modules/**] skip files, splitted by comma
  --sync                   sync snippets

Sync snippets

Official Snippets are available on github, you can sync them any time you want.

$ synvert-javascript --sync

List snippets

List all available snippets.

$ synvert-javascript -l

$ synvert-javascript --list --format json

Show a snippet

Describe what a snippet does.

$ synvert-javascript -s jquery/migrate

Run a snippet

Run a snippet, analyze and then rewrite code.

$ synvert-javascript -r jquery/migrate

Load custom snippet

$ synvert-javascript --load https://raw.githubusercontent.com/xinminlabs/synvert-snippets-javascript/master/lib/javascript/no-useless-constructor.js --run javascript/no-useless-constructor

$ synvert-javascript --load ~/Sites/xinminlabs/synvert-snippets-javascript/lib/javascript/no-useless-constructor.js --run jquery/no-useless-constructor

Show processing files when running a snippet.

$ synvert-javascript -r javascript/trailing-comma --showRunProcess

Enable EcmaFeatures jsx.

$ synvert-javascript -r javascript/trailing-comma --enableEcmaFeaturesJsx

Skip files.

$ synvert-javascript -r javascript/trailing-comma --skipFiles=test/**

Customize path.

$ synvert-javascript -r javascript/trailing-comma --path=/repos/synvert

Generate a snippet

$ synvert-javascript -g javascript/convert-foo-to-bar

Use Docker

You can run synvert-javascript command in a docker container.

docker pull xinminlabs/awesomecode-synvert-javascript

docker run xinminlabs/awesomecode-synvert-javascript synvert-javascript --list

docker run -v <your project path>:/app xinminlabs/awesomecode-synvert-javascript synvert-javascript --run javascript/trailing-comma /app