DNA
Progressive Web Components.
From v3 to v4
Changes
- Function Component signature has changed:
- function Card(properties, store, requestUpdate) { + function Card(properties, { store, requestUpdate }) {
-
Typings improvements
-
Using the
compile
function is now the preferred way to compile on the fly an HTML string into a virtual DOM template:
-import { html } from '@chialab/dna'; +import { compile } from '@chialab/dna'; - ${html(model.title)} + ${compile(model.title)}
Please note that VDOM convertion does not handle HTML entities and it can lead to unexpected output, reason why the default behavior changed.
Removed
Hooks, React and compatibility modules are now out of the scope of the DNA library and have been removed.
From v2 to v3
This is a list of changes requested to completely migrate to the DNA 3.0 version.
-
Install and use the new
@chialab/dna
instead of the@dnajs/idom
module -
Extends the
Component
constructor instead of theBaseComponent
class
- import { BaseComponent } from '@dnajs/idom'; + import { Component } from '@chialab/dna'; - class Card extends BaseComponent { + class Card extends Component {
-
Convert
template
getter torender
method. -
Convert
css
getter to<style>
elements inrender
method. -
Replace the
prop
helper with a property descriptor. -
Replace
events
getters with the newlisteners
getter. -
Replace stringed prototype references with real references in event listeners.
-
Replace
trigger
references withdispatchEvent
. -
Replace
delegate
calls withdelegateEventListener
. -
Replace
undelegate
calls withundelegateEventListener
. -
Replace
observeProperty
calls withobserve
. -
Replace
unobserveProperty
calls withunobserve
. -
Update
render
invokations. -
Remove template functions.
-
Check that your templates does not rely on the falsity of zero and empty string values.
-
Replace all core mixins with the
Component
class. -
Remove all
proxy
occurrences. -
Replace
trust
occurrences withhtml
. -
Import the
mix
helper from@chialab/proteins
. -
Remove all
DOM.getNodeComponent
,DOM.getComponentNode
and.node
references. -
Correctly extend builtin elements using the
extend
helper. -
Replace
define
invokations withcustomElements.define
.