search

material-components / material-components-web

Modular and customizable Material Design UI components for the web
https://material.io/develop/web
MIT License
17.12k stars 2.15k forks source link

Remove [de]registerEventHandler methods from adapters #2813

Open patrickrodee opened 6 years ago

patrickrodee commented 6 years ago

Our adapters often have registerEventHandler/deregisterEventHandler methods that are used to add and remove event listeners from DOM nodes. Many frameworks (React, Angular, Vue, etc) prefer events to be bound directly on the DOM elements. This has the benefit of not requiring references to the DOM in the component lifecycle and ensuring that the event handlers are appropriately cleaned up on component destruction.

For many of those frameworks, the registerEventHandler/deregisterEventHandler adapter methods become no-ops.

We should remove the registerEventHandler/deregisterEventHandler methods from our adapters and instead expose information about which handlers should be bound to which events. Registering the event handlers will then become the responsibility of those who wrap our components.

Packages that may require updates, as of 5/29/18:

kfranqueiro commented 6 years ago

You say "expose information" which I assume means documentation... but I assume we also need to move any existing registrations out of the foundation and into our vanilla components, right?

patrickrodee commented 6 years ago

That's correct

kfranqueiro commented 6 years ago

Tracking this as one issue for now, but we will undoubtedly want to PR this one package at a time.

IIRC a couple of packages may also dynamically add and remove event handlers (e.g. menu I think?). I'm not sure if we can move registration out of the foundation in those cases?

aluminick commented 6 years ago

Hi, is adapter and foundation the same thing? And can you give me a sample code on integrating MDC with React using adapter/foundation?

kfranqueiro commented 6 years ago

Foundation, adapter, and component are briefly described here: https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md#javascript

We have a codelab that walks through wrapping a component for React: https://codelabs.developers.google.com/codelabs/mdc-112-web/index.html

moog16 commented 5 years ago

@abhiomkar I'm going to fix this for top app bar to fix https://github.com/material-components/material-components-web/issues/4527.