Integrate into Can proper

[andrejewski]

This issue articulates the changes and schedule to get can-dom-mutate integrated into CanJs.

Effected packages, ordered by what will be touched first:

• can-util
• can-view-live
• can-stache-bindings
• can-simple-dom

3.0 Schedule

#	Task	Status
0	Update dependencies to use can-dom-data and can-globals	Done
1	Replace the events in can-util/dom/events/${inserted/removed/attributes} and see CDM is a drop in replacement for can-util and full canjs; tweak to match existing behavior (potentially creating a one-off module in CDM to patch the differences)
2	Repeat for can-view-live, making sure the removed event works as expected
3	Repeat for can-stache-bindings (and this point if everything passes can-simple-dom should just work as well but we can run some tests perhaps)
4	Publish the changes to the above modules in v3.0s.

4.0 Schedule

#	Task
0	Update can-view-live and can-stache-bindings to use CDM directly instead of using DOM events

4.0+ Schedule

#	Task
0	Alter can-view-live and can-view-list to leverage text node level observation

---

Let me know if I am missing any packages/pieces that will need to be addressed.

@justinbmeyer @matthewp @phillipskevin

[matthewp]

It would be good to describe how can-dom-mutate differs from the can-util API. I know that it's a different API, but how is it different? Given a couple of code examples of how something was used in can-util and how they would now be used with can-dom-mutate would help me to understand the difference.

[andrejewski]

@matthewp For 3.x, the can-util API would not change by adopting CDM under the hood. For 4.x, can-util/dom/events would hopefully be replaced with can-dom-events. In either case, the way you add these listeners stays the same (because the events support both can-util and can-dom-events styles via the compat).

The potential breakage would removing them from can-util outright.

[matthewp]

Can you still give some code examples? Assume I don't know what the can-util/dom/events api is (I only have a vague memory of it, tbh).

[andrejewski]

import canEvents from 'can-util/dom/events'
import 'can-util/dom/events/removed/removed'

var myDomNode
canEvents.addEventListener.call(myDomNode, 'removed', function () {})

Nothing changes and in 4.0 it could be completed removed.

[justinbmeyer]

Benefits:

• Improved performance:
  • We won't have to dispatch and register DOM custom event dispatching.
  • It's likely we can avoid wrapping functions like domMutate.appendChild
• Avoid warnings (and potential errors) with code like: <input value:bind="value"/> (Happens in FF because it doesn't allow custom events on disabled elements).
• Ability to fix memory leaks with bindings like stache("{{foo}}") as we will be able to listen to text nodes being removed from the dom.

Risks:

• In 4.0 - breaking APIs from 3.0, but with easily to swap packages. For example, instead of require("can-util/dom/events/inserted"), users will import can-dom-mutate/events/inserted.

[matthewp]

I think this is fine to proceed with 👍

[andrejewski]

3.x Changes:

• Merge PRs for mutation timing issues
  • Merge can-view-live PR and patch release
  • Merge can-ejs PR and patch release
  • Merge can-stache-bindings PR and patch release
• Merge can-dom-mutate PR and release v1.0
• Merge can-util PR and minor release
• Update canjs/canjs with all updated version and patch release

[andrejewski]

4.0 Steps:

1. remove can-dom-data from can-dom-mutate [PR]
2. make a can-dom-data 4.X that uses can-dom-mutate to clean itself up [PR]
3. remove the can-dom-data stuff from inserted & removed
   • This is resolved by creating brand new events.
   • Use the -mutation-events as a baseline for step 6.
4. using can-dom-mutate everywhere we can
   • Use the below traceData to find packages to convert.
5. pointing 4.X stuff to 4.X can-dom-data
6. can-event-dom-inserted & can-event-dom-removed

// _traceData of inserted/removed
can-component@3.3.6#can-component
can-connect@1.5.10#can/tag/tag_test
can-stache-bindings@3.11.0#test/bindings-test
can-component@3.3.6#can-component
can-connect@1.5.10#can/tag/tag
can-legacy-view-helpers@0.6.1#src/live
can-stache-bindings@3.11.0#can-stache-bindings
can-view-href@3.1.1#can-view-href
can-view-live@3.2.5#lib/core

// _traceData of dom/mutate
can-component@3.3.6#can-component
can-connect@1.5.10#can/tag/tag
can-legacy-view-helpers@0.6.1#src/live
can-legacy-view-helpers@0.6.1#src/node_list
can-view-callbacks@3.2.3#can-view-callbacks
can-view-import@3.2.5#can-view-import
can-view-live@3.2.5#lib/list
can-view-nodelist@3.1.1#can-view-nodelist
can-view-target@3.1.5#can-view-target

// _traceData of dom/data
can-stache-bindings@3.11.0#can-stache-bindings
can-view-model@3.5.1#can-view-model
can-util@3.10.15#dom/mutate/mutate
can-stache@3.13.2#helpers/core
can-util@3.10.15#dom/events/delegate/delegate
can-component@3.3.6#can-component
can-util@3.10.15#dom/attr/attr
can-control@3.2.3#can-control
can-connect@1.5.10#can/tag/tag
can-util@3.10.15#dom/events/make-mutation-event/make-mutation-event
can-util@3.10.15#dom/events/attributes/attributes
can-util@3.10.15#dom/dom
can-legacy-view-helpers@0.6.1#src/live

// _traceData for can-dom-data-state
can-event-dom-enter@1.0.4#can-event-dom-enter
can-event-dom-radiochange@1.0.4#can-event-dom-radiochange
can-util@3.10.15#dom/data/data
can-util@3.10.15#dom/mutation-observer/document/document
can-util@3.10.15#js/cid/get-cid
can-view-import@3.2.5#can-view-import

Grinding

[andrejewski]

Looking at the current trace data for can@major, I see the following packages dependent on can-util/dom/mutate, can-util/events, can-util/events/{mutation}, and can-util/dom/data and can-dom-data-state:

can-control
can-connect
can-component
can-event-queue
can-event-dom-enter
can-event-dom-radiochange
can-stache
can-stache-bindings
can-view-live
can-view-import
can-view-model
can-view-callbacks
can-view-nodelist
can-view-target

I will work on branches off of respective major branches with the branch name magneto.

[justinbmeyer]

Here's my order:

can-event-queue
can-view-nodelist
can-view-target
can-view-callbacks
can-event-dom-enter
can-event-dom-radiochange
can-view-model
can-view-live
can-control
can-stache
can-stache-bindings
can-component
can-view-import
can-connect

[andrejewski]

Base:

• can-dom-events
• can-dom-mutate

The track list:

• can-event-queue
• can-view-nodelist
• can-view-target
• can-view-callbacks
• can-event-dom-enter
• can-event-dom-radiochange
• can-view-model
• can-control (force linking can-dom-events because can-util)
• can-view-live (still using can-util for js/diff, dom/attr, dom/frag)
• can-stache
• can-stache-bindings
• can-component
• can-view-import
• can-connect

TODO

• canjs