Using Codemods

Learn how to migrate your app to CanJS 3 using can-migrate.

Overview

A codemod is a transformation script that parses the AST of source code in order to do a code-aware find-and-replace refactor across multiple files. can-migrate is a CLI utility for running codemods that can help migrate your app to CanJS 3.

For example, the following CanJS 2.3 code:

import can from "can";
import "can/map/define/define";

export default can.Map.extend({
  define: {}
});

…can be transformed to this:

import CanMap from "can-map";
import can from "can";
import "can-map-define";

export default CanMap.extend({
  define: {}
});

Using this CLI will get you about 85% of the way to having your codebase migrated; it’s not a complete solution for a seamless migration, but it will get you significantly closer than doing the migration by hand.

Install

Install can-migrate from npm:

npm install -g can-migrate

This will make the can-migrate command available globally.

Usage

The CLI provides the following options:

can-migrate [<files> OPTIONS...]

Updates files according to the CanJS 3 migration paths (minimal, modern, latest & greatest)

Options
--apply     -a    Apply transforms (instead of a dry run)
--force           Apply transforms regardless of git status
--silent    -s    Silence output
--config    -c    Path to custom config file
--transform -t    Specify a transform

Example

Runs all the default can-migrate transforms on the files that match the **/*.js glob:

can-migrate --apply **/*.js

Runs the can-component-rename transform on the files that match the **/*.js glob:

can-migrate --apply **/*.js --transform can-component-rename/can-component-rename.js

You can find a complete list of transforms on GitHub.

Recommended Migration Process

Use the following steps as a guide for using this tool:

Make a new branch for the migration:
```
git checkout -b migration
```
Ensure all tests are passing and your git state is clean. As with any migration, if your code is not tested, the amount of time it takes for a successful migration is exponentially greater.
Run the transforms on each modlet or standalone testable component:
```
can-migrate [<modlet/*.js>] --apply
```
Alternatively, you can run one transform at a time for a more incremental approach:
```
can-migrate [<modlet/*.js>] --transforms <transform path> --apply
```

Install the can-* modules used in that modlet or component. Here are the modules in the Core collection:

npm i can-component --save
npm i can-compute --save
npm i can-connect --save
npm i can-define --save
npm i can-route --save
npm i can-route-pushstate --save
npm i can-set --save
npm i can-stache --save
npm i can-stache-bindings --save

Run the tests again and fix the bugs as they come up. Review Migrating to CanJS 3 to understand what changes to expect
Commit the module once all tests are passing again.
Repeat 2-6 until all modlet or components are migrated and tests are passing.

Note: If you are using StealJS, ensure you are running StealJS 0.16 or greater.

Introduction to the Transform Scripts

Read this section to understand how the transforms (also called codemods) are organized, the different types of transformations that are included with can-migrate, and what to expect from each one.

There are 3 main types of transforms included in the can-migrate tool: replace, import, and require. There are also three module-specific transforms that handle more complex transformations: can-component-rename, can-data, and can-extend.

Each can-module that has a transform script has a folder in the src/transforms directory. Most of these folders have the following structure:

can-moduleName/

import.js
replace.js
require.js

You can run a specific transform by passing can-moduleName/replace.js or you can pass the entire can-moduleName/ directory to the CLI tool with the --transform flag.

Run all the transforms in the directory:

can-migrate */*.js --apply --transform can-moduleName/

Run a specific transform script:

can-migrate */*.js --apply --transform can-moduleName/replace.js

“Import” Transforms

These transforms change the way a module is imported if it using the import syntax.

For example, it will transform any of the following:

import Component from "can/component/";
import Component from "can/component/component";
import Component from "can/component/component.js";

…to this:

import Component from "can-component";

“Replace” Transforms

These transforms replace how a module is imported and used, which may vary by module. You can learn how each module is transformed by a particular script in the specific transformation section below.

For example, it can transform code like this:

import can from "can";
can.addClass(el, "myClass");

…to this:

import className from "can-util/dom/class-name/class-name";
import can from "can";
className.addClass.call(el, "myClass");

“Require” Transforms

These transforms handle the cases where a module is loaded using require.

For example, it will transform any of the following:

const Component = require("can/component/");
const Component = require("can/component/component");
const Component = require("can/component/component.js");

…to this:

const Component = require("can-component");

Custom Transforms

While the replace, import, and require transforms handle most cases, there are some more specific scripts for can-component-rename, can-data, can-extend. Read about them in the section below.

Complete List of Transform Scripts

This section details all the transformation scripts with examples of before and after.

can-stache-bindings/colon-bindings

Running the colon-bindings transform:

can-migrate -a src/**/*.{js,md,html,stache,component} -t can-stache-bindings/colon-bindings

…will transform this:

<input {^$value}="H1" {$value}="H2" {($value)}="H3" ($value)="H4"
  {^value}="H1" {value}="H2" {(value)}="H3" (value)="H4">

…to this:

<input el:value:to="H1" el:value:from="H2" el:value:bind="H3" on:el:value="H4"
  vm:value:to="H1" vm:value:from="H2" vm:value:bind="H3" on:vm:value="H4">

…or this:

Component.extend({
  tag: 'my-tag',
  template: stache(
    '<input {^$value}="H1" {$value}="H2" {($value)}="H3" ($value)="H4" ' +
        '{^value}="H1" {value}="H2" {(value)}="H3" (value)="H4">'
  )
});

…to this:

Component.extend({
  tag: 'my-tag',
  template: stache(
    '<input el:value:to="H1" el:value:from="H2" el:value:bind="H3" on:el:value="H4" ' +
        'vm:value:to="H1" vm:value:from="H2" vm:value:bind="H3" on:vm:value="H4">'
  )
});

It will also transform stache bindings inside:

```html, ```js, and ```javascript blocks in .md files
<view>, <template>, <view-model>, and <script type="view-model"> blocks in .component files
<script type="text/stache"> and <script src="...steal/steal.js"> blocks in .html files

With the --implicit flag, the transform will intuitively determine whether to bind to the ViewModel or Element without the explicit vm: or el: specifiers. For example, running this:

can-migrate -a src/**/*.{js,md,html,stache,component} -t can-stache-bindings/colon-bindings --implicit

…will transform this:

<input {^$value}="H1" {$value}="H2" {($value)}="H3" ($value)="H4"
  {^value}="H1" {value}="H2" {(value)}="H3" (value)="H4">

…to this:

<input value:to="H1" value:from="H2" value:bind="H3" on:value="H4"
  value:to="H1" value:from="H2" value:bind="H3" on:value="H4">

can-component-rename

Running all of the can-component-rename transforms:

can-migrate -a **/*.js -t can-component-rename/

…will transform this:

Component.extend({
  tag: "my-tag",
  template: "Hi",
  events: {
    removed: function(){}
  }
});

…to this:

Component.extend({
  tag: "my-tag",
  view: "Hi",
  events: {
    "{element} beforeremove": function(){}
  }
});

…or this:

can.Component.extend({
  tag: "my-tag",
  template: "Hi",
  events: {
    removed(){}
  }
});

…to this:

can.Component.extend({
  tag: "my-tag",
  view: "Hi",
  events: {
    "{element} beforeremove"(){}
  }
});

…or this:

Component.extend({
  tag: "my-tag",
  events: {
    "removed": () => {}
  }
});

…to this:

Component.extend({
  tag: "my-tag",
  events: {
    "{element} beforeremove": () => {}
  }
});

can-data

Running all of the can-data transforms:

can-migrate -a **/*.js -t can-data/

…will transform this:

import can from "can";

can.data(el, "name", "Luke");
can.data(el, "name");

…to this:

import domData from "can-util/dom/data/data";
import can from "can";

domData.set.call(el, "name", "Luke");
domData.get.call(el, "name");

…or this:

const can = require("can");

can.data(el, "name", "Luke");
can.data(el, "name");

…to this:

const domData = require("can-util/dom/data/data");
const can = require("can");

domData.set.call(el, "name", "Luke");
domData.get.call(el, "name");

can-extend

Running all of the can-extend transforms:

can-migrate -a **/*.js -t can-extend/

…will transform this:

import can from "can";

can.extend(true, {}, {}, {}, {});
can.extend(false, {}, {});
can.extend({}, {});

…to this:

import deepAssign from "can-util/js/deep-assign/deep-assign";
import assign from "can-util/js/assign/assign";
import can from "can";

deepAssign({}, {}, {}, {});
assign({}, {});
assign({}, {});

…or this:

const can = require("can");

can.extend(true, {}, {}, {}, {});
can.extend(false, {}, {});
can.extend({}, {});

…to this:

const deepAssign = require("can-util/js/deep-assign/deep-assign");
const assign = require("can-util/js/assign/assign");
const can = require("can");

deepAssign({}, {}, {}, {});
assign({}, {});
assign({}, {});

can-addClass

To run all of the can-addClass transforms listed below:

can-migrate -a **/*.js -t can-addClass/

replace

Running this transform:

can-migrate -a **/*.js -t can-addClass/replace.js

…will transform code like this:

import can from "can";
can.addClass(el, "myClass");

…to this:

import className from "can-util/dom/class-name/class-name";
import can from "can";
className.addClass.call(el, "myClass");

can-addEvent

To run all of the can-addEvent transforms listed below:

can-migrate -a **/*.js -t can-addEvent/

replace

Running this transform:

can-migrate -a **/*.js -t can-addEvent/replace.js

…will transform code like this:

import can from "can";
can.addEvent.call(obj, "change", function() { alert("object change!"); });

…to this:

import canEvent from "can-event";
import can from "can";
canEvent.addEventListener.call(obj, "change", function() { alert("object change!"); });

can-ajax

To run all of the can-ajax transforms listed below:

can-migrate -a **/*.js -t can-ajax/

replace

Running this transform:

can-migrate -a **/*.js -t can-ajax/replace.js

…will transform code like this:

import can from "can";
can.ajax();

…to this:

import ajax from "can-ajax";
import can from "can";
ajax();

can-append

To run all of the can-append transforms listed below:

can-migrate -a **/*.js -t can-append/

replace

Running this transform:

can-migrate -a **/*.js -t can-append/replace.js

…will transform code like this:

import can from "can";
can.append(el, "<p></p>");

…to this:

import mutate from "can-util/dom/mutate/mutate";
import can from "can";
mutate.appendChild.call(el, "<p></p>");

can-batch

To run all of the can-batch transforms listed below:

can-migrate -a **/*.js -t can-batch/

replace

Running this transform:

can-migrate -a **/*.js -t can-batch/replace.js

…will transform code like this:

import can from "can";
can.batch.start();

…to this:

import canBatch from "can-batch";
import can from "can";
canBatch.start();

can-buildFragment

To run all of the can-buildFragment transforms listed below:

can-migrate -a **/*.js -t can-buildFragment/

replace

Running this transform:

can-migrate -a **/*.js -t can-buildFragment/replace.js

…will transform code like this:

import can from "can";
can.buildFragment("<div><input/></div>");

…to this:

import buildFragment from "can-util/dom/fragment/fragment";
import can from "can";
buildFragment("<div><input/></div>");

can-camelize

To run all of the can-camelize transforms listed below:

can-migrate -a **/*.js -t can-camelize/

replace

Running this transform:

can-migrate -a **/*.js -t can-camelize/replace.js

…will transform code like this:

import can from "can";
can.camelize("str");

…to this:

import string from "can-util/js/string/string";
import can from "can";
string.camelize("str");

can-capitilize

To run all of the can-capitilize transforms listed below:

can-migrate -a **/*.js -t can-capitilize/

replace

Running this transform:

can-migrate -a **/*.js -t can-capitilize/replace.js

…will transform code like this:

import can from "can";
can.capitalize("str");

…to this:

import string from "can-util/js/string/string";
import can from "can";
string.capitalize("str");

can-component

To run all of the can-component transforms listed below:

can-migrate -a **/*.js -t can-component/

import

Running this transform:

can-migrate -a **/*.js -t can-component/import.js

…will transform any of the following:

import Component from "can/component/";
import Component from "can/component/component";
import Component from "can/component/component.js";

…to this:

import Component from "can-component";

replace

Running this transform:

can-migrate -a **/*.js -t can-component/replace.js

…will transform code like this:

import can from "can";
can.Component.extend();

…to this:

import Component from "can-component";
import can from "can";
Component.extend();

require

Running this transform:

can-migrate -a **/*.js -t can-component/require.js

…will transform any of the following:

const Component = require("can/component/");
const Component = require("can/component/component");
const Component = require("can/component/component.js");

…to this:

const Component = require("can-component");

can-compute

To run all of the can-compute transforms listed below:

can-migrate -a **/*.js -t can-compute/

import

Running this transform:

can-migrate -a **/*.js -t can-compute/import.js

…will transform any of the following:

import compute from "can/compute/";
import compute from "can/compute/compute";
import compute from "can/compute/compute.js";

…to this:

import compute from "can-compute";

replace

Running this transform:

can-migrate -a **/*.js -t can-compute/replace.js

…will transform code like this:

import can from "can";
can.compute();

…to this:

import compute from "can-compute";
import can from "can";
compute();

require

Running this transform:

can-migrate -a **/*.js -t can-compute/require.js

…will transform any of the following:

const compute = require("can/compute/");
const compute = require("can/compute/compute");
const compute = require("can/compute/compute.js");

…to this:

const compute = require("can-compute");

can-construct-super

To run all of the can-construct-super transforms listed below:

can-migrate -a **/*.js -t can-construct-super/

import

Running this transform:

can-migrate -a **/*.js -t can-construct-super/import.js

…will transform any of the following:

import constructSuper from "can/construct/super/";
import constructSuper from "can/construct/super/super";
import constructSuper from "can/construct/super/super.js";

…to this:

import constructSuper from "can-construct-super";

require

Running this transform:

can-migrate -a **/*.js -t can-construct-super/require.js

…will transform any of the following:

const constructSuper = require("can/construct/super/");
const constructSuper = require("can/construct/super/super");
const constructSuper = require("can/construct/super/super.js");

…to this:

const constructSuper = require("can-construct-super");

can-construct

To run all of the can-construct transforms listed below:

can-migrate -a **/*.js -t can-construct/

import

Running this transform:

can-migrate -a **/*.js -t can-construct/import.js

…will transform any of the following:

import construct from "can/construct/";
import construct from "can/construct/construct";
import construct from "can/construct/construct.js";

…to this:

import Construct from "can-construct";

replace

Running this transform:

can-migrate -a **/*.js -t can-construct/replace.js

…will transform code like this:

import can from "can";
can.Construct.extend();

…to this:

import Construct from "can-construct";
import can from "can";
Construct.extend();

require

Running this transform:

can-migrate -a **/*.js -t can-construct/require.js

…will transform any of the following:

const construct = require("can/construct/");
const construct = require("can/construct/construct");
const construct = require("can/construct/construct.js");

…to this:

const Construct = require("can-construct");

can-control

To run all of the can-control transforms listed below:

can-migrate -a **/*.js -t can-control/

import

Running this transform:

can-migrate -a **/*.js -t can-control/import.js

…will transform any of the following:

import Control from "can/control/";
import Control from "can/control/control";
import Control from "can/control/control.js";

…to this:

import Control from "can-control";

replace

Running this transform:

can-migrate -a **/*.js -t can-control/replace.js

…will transform code like this:

import can from "can";
can.Control( staticProperties, instanceProperties );

…to this:

import Control from "can-control";
import can from "can";
Control( staticProperties, instanceProperties );

require

Running this transform:

can-migrate -a **/*.js -t can-control/require.js

…will transform any of the following:

const Control = require("can/control/");
const Control = require("can/control/control");
const Control = require("can/control/control.js");

…to this:

const Control = require("can-control");

can-deparam

To run all of the can-deparam transforms listed below:

can-migrate -a **/*.js -t can-deparam/

replace

Running this transform:

can-migrate -a **/*.js -t can-deparam/replace.js

…will transform code like this:

import can from "can";
can.deparam("#foo[]=bar&foo[]=baz");

…to this:

import deparam from "can-deparam";
import can from "can";
deparam("#foo[]=bar&foo[]=baz");

can-dispatch

To run all of the can-dispatch transforms listed below:

can-migrate -a **/*.js -t can-dispatch/

replace

Running this transform:

can-migrate -a **/*.js -t can-dispatch/replace.js

…will transform code like this:

import can from "can";
can.dispatch( obj, event, args );

…to this:

import canEvent from "can-event";
import can from "can";
canEvent( obj, event, args );

can-each

To run all of the can-each transforms listed below:

can-migrate -a **/*.js -t can-each/

replace

Running this transform:

can-migrate -a **/*.js -t can-each/replace.js

…will transform code like this:

import can from "can";
can.each();

…to this:

import each from "can-each";
import can from "can";
each();

can-esc

To run all of the can-esc transforms listed below:

can-migrate -a **/*.js -t can-esc/

replace

Running this transform:

can-migrate -a **/*.js -t can-esc/replace.js

…will transform code like this:

import can from "can";
can.esc("<div>&nbsp</div>");

…to this:

import string from "can-util/js/string/string";
import can from "can";
string.esc("<div>&nbsp</div>");

can-event

To run all of the can-event transforms listed below:

can-migrate -a **/*.js -t can-event/

import

Running this transform:

can-migrate -a **/*.js -t can-event/import.js

…will transform any of the following:

import event from "can/event/";
import event from "can/event/event";
import event from "can/event/event.js";

…to this:

import canEvent from "can-event";

replace

Running this transform:

can-migrate -a **/*.js -t can-event/replace.js

…will transform code like this:

import can from "can";
can.event.dispatch.call(obj, "change");

…to this:

import canEvent from "can-event";
import can from "can";
canEvent.dispatch.call(obj, "change");

require

Running this transform:

can-migrate -a **/*.js -t can-event/require.js

…will transform any of the following:

const event = require("can/event/");
const event = require("can/event/event");
const event = require("can/event/event.js");

…to this:

const canEvent = require("can-event");

can-fixture

To run all of the can-fixture transforms listed below:

can-migrate -a **/*.js -t can-fixture/

import

Running this transform:

can-migrate -a **/*.js -t can-fixture/import.js

…will transform any of the following:

import fixture from "can/util/fixture/";
import fixture from "can/util/fixture/fixture";
import fixture from "can/util/fixture/fixture.js";

…to this:

import fixture from "can-fixture";

replace

Running this transform:

can-migrate -a **/*.js -t can-fixture/replace.js

…will transform code like this:

import can from "can";
can.fixture( "/foobar.json", function(){});

…to this:

import fixture from "can-fixture";
import can from "can";
fixture( "/foobar.json", function(){});

require

Running this transform:

can-migrate -a **/*.js -t can-fixture/require.js

…will transform any of the following:

const fixture = require("can/util/fixture/");
const fixture = require("can/util/fixture/fixture");
const fixture = require("can/util/fixture/fixture.js");

…to this:

const fixture = require("can-fixture");

can-frag

To run all of the can-frag transforms listed below:

can-migrate -a **/*.js -t can-frag/

replace

Running this transform:

can-migrate -a **/*.js -t can-frag/replace.js

…will transform code like this:

import can from "can";
can.frag();

…to this:

import frag from "can-frag";
import can from "can";
frag();

can-getObject

To run all of the can-getObject transforms listed below:

can-migrate -a **/*.js -t can-getObject/

replace

Running this transform:

can-migrate -a **/*.js -t can-getObject/replace.js

…will transform code like this:

import can from "can";
can.getObject(name, roots);

…to this:

import string from "can-util/js/string/string";
import can from "can";
string.getObject(name, roots);

can-hyphenate

To run all of the can-hyphenate transforms listed below:

can-migrate -a **/*.js -t can-hyphenate/

replace

Running this transform:

can-migrate -a **/*.js -t can-hyphenate/replace.js

…will transform code like this:

import can from "can";
can.hyphenate("str");

…to this:

import string from "can-util/js/string/string";
import can from "can";
string.hyphenate("str");

can-isArray

To run all of the can-isArray transforms listed below:

can-migrate -a **/*.js -t can-isArray/

replace

Running this transform:

can-migrate -a **/*.js -t can-isArray/replace.js

…will transform code like this:

import can from "can";
can.isArray([1,2,3]);

…to this:

import isArrayLike from "can-util/js/is-array-like/is-array-like";
import can from "can";
isArrayLike([1,2,3]);

can-isDeferred

To run all of the can-isDeferred transforms listed below:

can-migrate -a **/*.js -t can-isDeferred/

replace

Running this transform:

can-migrate -a **/*.js -t can-isDeferred/replace.js

…will transform code like this:

import can from "can";
can.isDeferred(obj);

…to this:

import isPromiseLike from "can-util/js/is-promise-like/is-promise-like";
import can from "can";
isPromiseLike(obj);

can-isEmptyObject

To run all of the can-isEmptyObject transforms listed below:

can-migrate -a **/*.js -t can-isEmptyObject/

replace

Running this transform:

can-migrate -a **/*.js -t can-isEmptyObject/replace.js

…will transform code like this:

import can from "can";
can.isEmptyObject(obj);

…to this:

import isEmptyObject from "can-util/js/is-empty-object/is-empty-object";
import can from "can";
isEmptyObject(obj);

can-isFunction

To run all of the can-isFunction transforms listed below:

can-migrate -a **/*.js -t can-isFunction/

replace

Running this transform:

can-migrate -a **/*.js -t can-isFunction/replace.js

…will transform code like this:

import can from "can";
can.isFunction(func);

…to this:

import isFunction from "can-util/js/is-function/is-function";
import can from "can";
isFunction(func);

can-list

To run all of the can-list transforms listed below:

can-migrate -a **/*.js -t can-list/

import

Running this transform:

can-migrate -a **/*.js -t can-list/import.js

…will transform any of the following:

import List from "can/list/";
import List from "can/list/list";
import List from "can/list/list.js";

…to this:

import CanList from "can-list";

replace

Running this transform:

can-migrate -a **/*.js -t can-list/replace.js

…will transform code like this:

import can from "can";
var people = new can.List(["Alex", "Bill"]);

…to this:

import CanList from "can-list";
import can from "can";
var people = new CanList(["Alex", "Bill"]);

require

Running this transform:

can-migrate -a **/*.js -t can-list/require.js

…will transform any of the following:

const List = require("can/list/");
const List = require("can/list/list");
const List = require("can/list/list.js");

…to this:

const CanList = require("can-list");

can-listenTo

To run all of the can-listenTo transforms listed below:

can-migrate -a **/*.js -t can-listenTo/

replace

Running this transform:

can-migrate -a **/*.js -t can-listenTo/replace.js

…will transform code like this:

import can from "can";
can.listenTo.call(obj, other, event, handler);

…to this:

import canEvent from "can-event";
import can from "can";
canEvent.call(obj, other, event, handler);

can-makeArray

To run all of the can-makeArray transforms listed below:

can-migrate -a **/*.js -t can-makeArray/

replace

Running this transform:

can-migrate -a **/*.js -t can-makeArray/replace.js

…will transform code like this:

import can from "can";
can.makeArray({0: "a", length: 1});

…to this:

import makeArray from "can-util/js/make-array/make-array";
import can from "can";
makeArray({0: "a", length: 1});

can-map-backup

To run all of the can-map-backup transforms listed below:

can-migrate -a **/*.js -t can-map-backup/

import

Running this transform:

can-migrate -a **/*.js -t can-map-backup/import.js

…will transform any of the following:

import mapBackup from "can/map/backup/";
import mapBackup from "can/map/backup/backup";
import mapBackup from "can/map/backup/backup.js";

…to this:

import mapBackup from "can-map-backup";

require

Running this transform:

can-migrate -a **/*.js -t can-map-backup/require.js

…will transform any of the following:

const mapBackup = require("can/map/backup/");
const mapBackup = require("can/map/backup/backup");
const mapBackup = require("can/map/backup/backup.js");

…to this:

const mapBackup = require("can-map-backup");

can-map-define

To run all of the can-map-define transforms listed below:

can-migrate -a **/*.js -t can-map-define/

import

Running this transform:

can-migrate -a **/*.js -t can-map-define/import.js

…will transform any of the following:

import mapDefine from "can/map/define/";
import mapDefine from "can/map/define/define";
import mapDefine from "can/map/define/define.js";

…to this:

import mapDefine from "can-map-define";

require

Running this transform:

can-migrate -a **/*.js -t can-map-define/require.js

…will transform any of the following:

const mapDefine = require("can/map/define/");
const mapDefine = require("can/map/define/define");
const mapDefine = require("can/map/define/define.js");

…to this:

const mapDefine = require("can-map-define");

can-map

To run all of the can-map transforms listed below:

can-migrate -a **/*.js -t can-map/

import

Running this transform:

can-migrate -a **/*.js -t can-map/import.js

…will transform any of the following:

import map from "can/map/";
import map from "can/map/map";
import map from "can/map/map.js";

…to this:

import CanMap from "can-map";

replace

Running this transform:

can-migrate -a **/*.js -t can-map/replace.js

…will transform code like this:

import can from "can";
const map = new can.Map(aName);

…to this:

import CanMap from "can-map";
import can from "can";
const map = new CanMap(aName);

require

Running this transform:

can-migrate -a **/*.js -t can-map/require.js

…will transform any of the following:

const map = require("can/map/");
const map = require("can/map/map");
const map = require("can/map/map.js");

…to this:

const CanMap = require("can-map");

can-model

To run all of the can-model transforms listed below:

can-migrate -a **/*.js -t can-model/

import

Running this transform:

can-migrate -a **/*.js -t can-model/import.js

…will transform any of the following:

import model from "can/model/";
import model from "can/model/model";
import model from "can/model/model.js";

…to this:

import Model from "can-model";

replace

Running this transform:

can-migrate -a **/*.js -t can-model/replace.js

…will transform code like this:

import can from "can";
can.Model(name, staticProperties, instanceProperties);

…to this:

import Model from "can-model";
import can from "can";
Model(name, staticProperties, instanceProperties);

require

Running this transform:

can-migrate -a **/*.js -t can-model/require.js

…will transform any of the following:

const model = require("can/model/");
const model = require("can/model/model");
const model = require("can/model/model.js");

…to this:

const Model = require("can-model");

can-mustache

To run all of the can-mustache transforms listed below:

can-migrate -a **/*.js -t can-mustache/

replace

Running this transform:

can-migrate -a **/*.js -t can-mustache/replace.js

…will transform code like this:

import can from "can";
can.mustache( id, template );

…to this:

import mustache from "can-mustache";
import can from "can";
mustache( id, template );

can-one

To run all of the can-one transforms listed below:

can-migrate -a **/*.js -t can-one/

replace

Running this transform:

can-migrate -a **/*.js -t can-one/replace.js

…will transform code like this:

import can from "can";
can.event.dispatch.call(obj, "change");

…to this:

import canEvent from "can-event";
import can from "can";
canEvent.dispatch.call(obj, "change");

can-param

To run all of the can-param transforms listed below:

can-migrate -a **/*.js -t can-param/

replace

Running this transform:

can-migrate -a **/*.js -t can-param/replace.js

…will transform code like this:

import can from "can";
can.param({foo: "bar"});

…to this:

import param from "can-param";
import can from "can";
param({foo: "bar"});

can-remove

To run all of the can-remove transforms listed below:

can-migrate -a **/*.js -t can-remove/

replace

Running this transform:

can-migrate -a **/*.js -t can-remove/replace.js

…will transform code like this:

import can from "can";
can.remove.call(el, child);

…to this:

import mutate from "can-util/dom/mutate/mutate";
import can from "can";
mutate.removeChild.call.call(el, child);

can-removeEvent

To run all of the can-removeEvent transforms listed below:

can-migrate -a **/*.js -t can-removeEvent/

replace

Running this transform:

can-migrate -a **/*.js -t can-removeEvent/replace.js

…will transform code like this:

import can from "can";
can.event.removeEvent.call(el, "click", function() {});

…to this:

import canEvent from "can-event";
import can from "can";
canEvent.removeEvent.call(el, "click", function() {});

can-route-pushstate

To run all of the can-route-pushstate transforms listed below:

can-migrate -a **/*.js -t can-route-pushstate/

import

Running this transform:

can-migrate -a **/*.js -t can-route-pushstate/import.js

…will transform any of the following:

import routePushState from "can/route/pushstate/";
import routePushState from "can/route/pushstate/pushstate";
import routePushState from "can/route/pushstate/pushstate.js";

…to this:

import routePushState from "can-route-pushstate";

require

Running this transform:

can-migrate -a **/*.js -t can-route-pushstate/require.js

…will transform any of the following:

const routePushState = require("can/route/pushstate/");
const routePushState = require("can/route/pushstate/pushstate");
const routePushState = require("can/route/pushstate/pushstate.js");

…to this:

const routePushState = require("can-route-pushstate");

can-route

To run all of the can-route transforms listed below:

can-migrate -a **/*.js -t can-route/

import

Running this transform:

can-migrate -a **/*.js -t can-route/import.js

…will transform any of the following:

import route from "can/route/";
import route from "can/route/route";
import route from "can/route/route.js";

…to this:

import route from "can-route";

replace

Running this transform:

can-migrate -a **/*.js -t can-route/replace.js

…will transform code like this:

import can from "can";
can.route("{page}", {page: "homepage"});

…to this:

import route from "can-route";
import can from "can";
route("{page}", {page: "homepage"});

require

Running this transform:

can-migrate -a **/*.js -t can-route/require.js

…will transform any of the following:

const route = require("can/route/");
const route = require("can/route/route");
const route = require("can/route/route.js");

…to this:

const route = require("can-route");

can-stache

To run all of the can-stache transforms listed below:

can-migrate -a **/*.js -t can-stache/

import

Running this transform:

can-migrate -a **/*.js -t can-stache/import.js

…will transform any of the following:

import stache from "can/view/stache/";
import stache from "can/view/stache/stache";
import stache from "can/view/stache/stache.js";

…to this:

import stache from "can-stache";

replace

Running this transform:

can-migrate -a **/*.js -t can-stache/replace.js

…will transform code like this:

import can from "can";
can.stache(template);

…to this:

import stache from "can-stache";
import can from "can";
stache(template);

require

Running this transform:

can-migrate -a **/*.js -t can-stache/require.js

…will transform any of the following:

const stache = require("can/view/stache/");
const stache = require("can/view/stache/stache");
const stache = require("can/view/stache/stache.js");

…to this:

const stache = require("can-stache");

can-stopListening

To run all of the can-stopListening transforms listed below:

can-migrate -a **/*.js -t can-stopListening/

replace

Running this transform:

can-migrate -a **/*.js -t can-stopListening/replace.js

…will transform code like this:

import can from "can";
can.event.stopListening.call(obj, other, event, handler);

…to this:

import canEvent from "can-event";
import can from "can";
canEvent.stopListening.call(obj, other, event, handler);

can-sub

To run all of the can-sub transforms listed below:

can-migrate -a **/*.js -t can-sub/

replace

Running this transform:

can-migrate -a **/*.js -t can-sub/replace.js

…will transform code like this:

import can from "can";
can.sub(str, data, remove);

…to this:

import string from "can-util/js/string/string";
import can from "can";
string.sub(str, data, remove);

can-underscore

To run all of the can-underscore transforms listed below:

can-migrate -a **/*.js -t can-underscore/

replace

Running this transform:

can-migrate -a **/*.js -t can-underscore/replace.js

…will transform code like this:

import can from "can";
can.underscore("str");

…to this:

import string from "can-util/js/string/string";
import can from "can";
string.underscore("str");

can-view-attr

To run all of the can-view-attr transforms listed below:

can-migrate -a **/*.js -t can-view-attr/

replace

Running this transform:

can-migrate -a **/*.js -t can-view-attr/replace.js

…will transform code like this:

import can from "can";
can.view.attr(attributeName, attrHandler(el, attrData));

…to this:

import canViewCallbacks from "can-view-callbacks";
import can from "can";
canViewCallbacks.attr(attributeName, attrHandler(el, attrData));

can-view-autorender

To run all of the can-view-autorender transforms listed below:

can-migrate -a **/*.js -t can-view-autorender/

import

Running this transform:

can-migrate -a **/*.js -t can-view-autorender/import.js

…will transform any of the following:

import autorender from "can/view/autorender/";
import autorender from "can/view/autorender/autorender";
import autorender from "can/view/autorender/autorender.js";

…to this:

import canAutorender from "can-view-autorender";

replace

Running this transform:

can-migrate -a **/*.js -t can-view-autorender/replace.js

…will transform code like this:

import can from "can";
can.autorender(success, error);

…to this:

import canAutorender from "can-view-autorender";
import can from "can";
canAutorender(success, error);

require

Running this transform:

can-migrate -a **/*.js -t can-view-autorender/require.js

…will transform any of the following:

const autorender = require("can/view/autorender/");
const autorender = require("can/view/autorender/autorender");
const autorender = require("can/view/autorender/autorender.js");

…to this:

const canAutorender = require("can-view-autorender");

can-view-callbacks

To run all of the can-view-callbacks transforms listed below:

can-migrate -a **/*.js -t can-view-callbacks/

import

Running this transform:

can-migrate -a **/*.js -t can-view-callbacks/import.js

…will transform any of the following:

import viewCallbacks from "can/view/callbacks/";
import viewCallbacks from "can/view/callbacks/callbacks";
import viewCallbacks from "can/view/callbacks/callbacks.js";

…to this:

import canViewCallbacks from "can-view-callbacks";

replace

Running this transform:

can-migrate -a **/*.js -t can-view-callbacks/replace.js

…will transform code like this:

import can from "can";
can.view.callbacks();

…to this:

import canViewCallbacks from "can-view-callbacks";
import can from "can";
canViewCallbacks();

require

Running this transform:

can-migrate -a **/*.js -t can-view-callbacks/require.js

…will transform any of the following:

const viewCallbacks = require("can/view/callbacks/");
const viewCallbacks = require("can/view/callbacks/callbacks");
const viewCallbacks = require("can/view/callbacks/callbacks.js");

…to this:

const canViewCallbacks = require("can-view-callbacks");

can-view-href

To run all of the can-view-href transforms listed below:

can-migrate -a **/*.js -t can-view-href/

import

Running this transform:

can-migrate -a **/*.js -t can-view-href/import.js

…will transform any of the following:

import viewHref from "can/view/href/";
import viewHref from "can/view/href/href";
import viewHref from "can/view/href/href.js";

…to this:

import canViewHref from "can-view-href";

require

Running this transform:

can-migrate -a **/*.js -t can-view-href/require.js

…will transform any of the following:

const viewHref = require("can/view/href/");
const viewHref = require("can/view/href/href");
const viewHref = require("can/view/href/href.js");

…to this:

const canViewHref = require("can-view-href");

can-view-import

To run all of the can-view-import transforms listed below:

can-migrate -a **/*.js -t can-view-import/

import

Running this transform:

can-migrate -a **/*.js -t can-view-import/import.js

…will transform any of the following:

import viewImport from "can/view/import/";
import viewImport from "can/view/import/import";
import viewImport from "can/view/import/import.js";

…to this:

import canViewImport from "can-view-import";

require

Running this transform:

can-migrate -a **/*.js -t can-view-import/require.js

…will transform any of the following:

const viewImport = require("can/view/import/");
const viewImport = require("can/view/import/import");
const viewImport = require("can/view/import/import.js");

…to this:

const canViewImport = require("can-view-import");

can-view-live

To run all of the can-view-live transforms listed below:

can-migrate -a **/*.js -t can-view-live/

replace

Running this transform:

can-migrate -a **/*.js -t can-view-live/replace.js

…will transform code like this:

import can from "can";
can.view.live.text(textNode, text);

…to this:

import canViewLive from "can-view-live";
import can from "can";
canViewLive.text(textNode, text);

import

Running this transform:

can-migrate -a **/*.js -t can-view-live/import.js

…will transform any of the following:

import viewLive from "can/view/live/";
import viewLive from "can/view/live/live";
import viewLive from "can/view/live/live.js";

…to this:

import canViewLive from "can-view-live";

require

Running this transform:

can-migrate -a **/*.js -t can-view-live/require.js

…will transform any of the following:

const viewLive = require("can/view/live/");
const viewLive = require("can/view/live/live");
const viewLive = require("can/view/live/live.js");

…to this:

const canViewLive = require("can-view-live");

can-view-parser

To run all of the can-view-parser transforms listed below:

can-migrate -a **/*.js -t can-view-parser/

import

Running this transform:

can-migrate -a **/*.js -t can-view-parser/import.js

…will transform any of the following:

import viewParser from "can/view/parser/";
import viewParser from "can/view/parser/parser";
import viewParser from "can/view/parser/parser.js";

…to this:

import canViewParser from "can-view-parser";

require

Running this transform:

can-migrate -a **/*.js -t can-view-parser/require.js

…will transform any of the following:

const viewParser = require("can/view/parser/");
const viewParser = require("can/view/parser/parser");
const viewParser = require("can/view/parser/parser.js");

…to this:

const canViewParser = require("can-view-parser");

can-view-scope

To run all of the can-view-scope transforms listed below:

can-migrate -a **/*.js -t can-view-scope/

replace

Running this transform:

can-migrate -a **/*.js -t can-view-scope/replace.js

…will transform code like this:

import can from "can";
const scope = new can.view.Scope(data);

…to this:

import canViewScope from "can-view-scope";
import can from "can";
const scope = new canViewScope(data);

import

Running this transform:

can-migrate -a **/*.js -t can-view-scope/import.js

…will transform any of the following:

import viewScope from "can/view/scope/";
import viewScope from "can/view/scope/scope";
import viewScope from "can/view/scope/scope.js";

…to this:

import canViewScope from "can-view-scope";

require

Running this transform:

can-migrate -a **/*.js -t can-view-scope/require.js

…will transform any of the following:

const viewScope = require("can/view/scope/");
const viewScope = require("can/view/scope/scope");
const viewScope = require("can/view/scope/scope.js");

…to this:

const canViewScope = require("can-view-scope");

can-view-tag

To run all of the can-view-tag transforms listed below:

can-migrate -a **/*.js -t can-view-tag/

replace

Running this transform:

can-migrate -a **/*.js -t can-view-tag/replace.js

…will transform code like this:

import can from "can";
can.view.tag(tagName, tagHandler(el, tagData));

…to this:

import canViewCallbacks from "can-view-callbacks";
import can from "can";
canViewCallbacks.tag(tagName, tagHandler(el, tagData));

can-view-target

To run all of the can-view-target transforms listed below:

can-migrate -a **/*.js -t can-view-target/

import

Running this transform:

can-migrate -a **/*.js -t can-view-target/import.js

…will transform any of the following:

import viewTarget from "can/view/target/";
import viewTarget from "can/view/target/target";
import viewTarget from "can/view/target/target.js";

…to this:

import canViewTarget from "can-view-target";

replace

Running this transform:

can-migrate -a **/*.js -t can-view-target/replace.js

…will transform code like this:

import can from "can";
can.view.target();

…to this:

import canViewTarget from "can-view-target";
import can from "can";
canViewTarget();

require

Running this transform:

can-migrate -a **/*.js -t can-view-target/require.js

…will transform any of the following:

const viewTarget = require("can/view/target/");
const viewTarget = require("can/view/target/target");
const viewTarget = require("can/view/target/target.js");

…to this:

const canViewTarget = require("can-view-target");