CanJS 3.0 Upgrade Resoources

can-fn-to-package-mapping.md

can.* Mapping

• can.Component: can-component

• can.Construct: can-construct

• can.Control: can-control

• can.List: can-list

• can.Map: can-map

  It's recommended this be imported with a local name that is not Map to avoid colliding with ECMAScript 2015 Map.

  import canMap from 'can-map';
  const myMap = new canMap();

• can.Model: can-model

• can.compute: can-compute

• can.event: can-event

  addEvent has been renamed addEventListener and removeEvent has been renamed removeEventListener.

  can.event.addEvent(el, 'click', function() {});
  can.event.removeEvent(el, 'click', function() {});

  becomes:

  import canEvent from 'can-event';
  canEvent.addEventListener(el, 'click', function() {}); 
  canEvent.removeEventListener(el, 'click', function() {}); 

• can.addEvent: can-event

  This method has been renamed addEventListener:

  can.addEvent(el, 'click', function() {});

  becomes:

  import canEvent from 'can-event';
  canEvent.addEventListener(el, 'click', function() {}); 

• can.one: can-event

• can.removeEvent: can-event

  This method has been renamed removeEventListener:

  can.removeEvent(el, 'click', function() {});

  becomes:

  import canEvent from 'can-event';
  canEvent.removeEventListener(el, 'click', function() {}); 

• can.stopListening: can-event

• can.batch: can-event/batch/batch

  trigger has been renamed dispatch:

  can.batch.trigger(myObj, 'myEvent');

  becomes:

  import canBatch from 'can-event/batch/batch';
  canBatch.dispatch(myObj, 'myEvent');

• can.fixture: can-fixture

• can.mustache: can-mustache

• can.route: can-route

• can.stache: can-stache

• can.$: jquery

• can.Deferred

  You can use jQuery's Deferred or any other A+ Promise library

• can.addClass: can-util/dom/class-name/class-name

  This method expects the element to be the context of function, so replace this:

  can.addClass(el, 'myClass');

  with this:

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

• can.ajax: can-util/dom/ajax/ajax

• can.append: can-util/dom/mutate/mutate

  This method expects the element to be the context of function, so replace this:

  can.append(el, '<p></p>');

  with this:

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

• can.buildFragment: can-util/dom/fragment/fragment

• can.camelize: can-util/js/string/string

  All string methods are grouped together so you only have to import the string utilities once:

  can.camelize('first-name');
  can.hyphenate('firstName');

  becomes:

  import string from 'can-util/js/string/string';
  
  string.camelize('first-name');
  string.hyphenate('firstName');

• can.capitilize: can-util/js/string/string

• can.esc: can-util/js/string/string

• can.getObject: can-util/js/string/string

• can.hyphenate: can-util/js/string/string

• can.underscore: can-util/js/string/string

• can.sub: can-util/js/string/string

• can.data: can-util/dom/data/data

  In 3.0, this method expects the element to be the context of function. There's also a separate function for getting and setting data.

  can.data(el, 'something', 'secret'); // set
  can.data(el, 'something'); // get

  becomes:

  import domData from 'can-util/dom/data/data';
  domData.set.call(el, 'something', 'secret');
  domData.get.call(el, 'something');

• can.deparam: can-util/js/deparam/deparam

• can.each: can-util/js/each/each

• can.extend: can-util/dom/assign/assign

  In 3.0, this method has been split into two: a shallow and deep merge. Before, passing true as the first parameter would do a deep merge. Now you explicityl invoke the deep merge or shallow merge function:

  can.extend({}, { answer: 42 }); // shallow
  can.extend(true, {}, { answer: 42 }); // deep

  becomes:

  import assign from 'can-util/js/assign/assign';
  import deepAssign from 'can-util/js/deepAssign/deepAssign';
  assign({}, { answer: 42 }); // shallow
  deepAssign({}, { answer: 42 }); // deep

• __can-util/dom/deep-assign/deep-assign"

• can.frag: can-util/dom/frag/frag

• can.isArray: can-util/js/is-array-like/is-array-like

• can.isDeferred: can-util/js/is-promise-like/is-promise-like

• can.isEmptyObject: can-util/js/is-empty-object/is-empty-object

• can.isFunction: can-util/js/is-function/is-function

• can.makeArray: can-util/js/make-array/make-array

• can.param: can-util/js/param/param

• can.remove: can-util/dom/mutate/mutate

• can.viewModel: can-view-model

  In 3.0, this method expects a DOM element as the first parameter (instead of a selector or DOM element:

  can.viewModel('my-component');

  becomes:

  import $ from 'jquery';
  import canViewModel from 'can-view-model';
  canViewModel($('my-component')[0]);

• can.autorender: can-view-autorender

• can.view.Scope: can-view-scope

• can.view.live: can-view-live

• can.view.nodeLists: can-view-nodelist

• can.view.target: can-view-target

• can.view.callbacks: can-view-callbacks

can-module-mapping.md

• can/component/: can-component
• can/construct/: can-construct
• can/construct/proxy/: N/A
• can/construct/super/: can-construct-super
• can/control/: can-control
• can/control/plugin: N/A
• can/control/route: N/A
• can/list/: can-list
• can/list/promise/: N/A
• can/list/sort: N/A
• can/map/: can-map
• can/map/attributes/: N/A
• can/map/backup/: can-map-backup
• can/map/delegate/: N/A
• can/map/define/: can-map-define
• can/map/setter/: N/A
• can/map/validations/: N/A
• can/map/lazy/: N/A
• can/map/list/: N/A
• can/model/: can-model
• can/compute/: can-compute
• can/event/: can-event
• can/util/fixture/: can-fixture
• can/view/mustache/: N/A
• can/route/: can-route
• can/route/pushstate/: can-route-pushstate
• can/view/stache/: can-stache
• can/util/: can-util
• can/view/: N/A
• can/view/autorender/: can-view-autorender
• can/view/import/: can-view-import
• can/view/href/: can-view-href
• can/view/scope/: can-view-scope
• can/view/live/: can-view-live
• can/view/node_lists/: can-view-nodelist
• can/view/target/: can-view-target
• can/view/parser/: can-view-parser
• can/view/callbacks/: can-view-callbacks
• can/view/modifiers/: N/A
• can/view/bindings: N/A

Curtis, we generally alias can-map as CanMap to keep constructor functions always capitalized.

I think you need to/can do:

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

Also, generally speaking, you should import either can-util/dom/event http://canjs.com/doc/can-util/dom/events/events.html (which needs better docs)

var domEvents = require("can-util/dom/events");

domEvents.addEventListener.on(element,"click", handler)

Or, if you want to bind on objects, use can-event.

They have different purposes now.