Preact@8 to Preact@10 Upgrade Notes

preact-upgrade-experience.md

PreactX Upgrade Experience

Obvious breaking changes

See release 10.0.0-alpha.0 for a full list.

• h -> createElement
• VNode.nodeName -> VNode.type
• VNode.attributes -> VNode.props
• VNode.children -> VNode.props.children
• require('preact/devtools') -> require('preact/debug')
• preact-compat -> preact/compat
• render signature changed
  • see explanation in release notes
• JSX Attribute style no longer supported as string, must be object.
• children no longer guarenteed to be Array:
  • you can get the old behavior by using the new toChildArray export from Preact
• preact-portal#Portal -> preact/compat#createPortal

preactjs/migrate-preact-x was very helpful.

Modules that need updating:

• preact-virtual-list
  • PR Created by Hydrophobefireman: developit/preact-virtual-list#8
• preact-jsx-chai
  • PR Created: developit/preact-jsx-chai#69
  • This PR blocks all others below
• preact-18n
  • PR Created: synacor/preact-i18n#33
• preact-markup
  • PR Created: developit/preact-markup#26
• preact-context-provider
  • PR Created: synacor/preact-context-provider#7
• preact-router@3
  • Done

Non-obvious breaking changes

Event listeners can no longer be falsey

The following pattern will need to be changed:

// Preact 8:
<button onClick={active && this.handleClick}>My Button</button>

// Preact X:
<button {...active && { onClick: this.handleClick }}>My Button</button>

VNode.constructor is undefined

// Preact 8
assert(typeof preact.h('span').constructor === 'function')

// Preact X
assert(typeof preact.createElement('span').constructor === 'undefined')

Tip:

import { options } from 'preact';

function VNode() {}  // what used to come back from preact.h('a').constructor

VNode.prototype.foo = 'bar'; // imagine it was being extended

let old = options.vnode;
options.vnode = vnode => {
  Object.assign(vnode, VNode.prototype);
  if (old) old(vnode);
};