preact

Bugfix

This release fixes an issue when hydrating from a static server-rendered DOM that could cause Preact to do far more work than it should have been doing. If you're doing SSR, check out this release for a massive performance boost.

7.x

7.x is currently in beta. It should be an entirely safe upgrade for most.

The reason it's a new major version is because Preact now ignores externally created DOM elements when rendering, unless performing hydration from a server-render (ie - the diff is initiated from a render() against an element that was not created by the DOM renderer).

Features

• Preliminary React DevTools support thanks to the amazing @robertknight! 🙇

<img width="353" src="https://cloud.githubusercontent.com/assets/105127/19808223/ca9c16ca-9cf1-11e6-833d-94d8a2841a8f.gif">

Fixes

• Prevent against reassignment of the same value to TextNodes in Firefox (#368, thanks @zbinlin)
• When swapping the base of a composed child component, update its parent's base reference (#349)
• Prevent accidental duplicate recycling of elements when swapping a component's root element (#373, thanks @jakearchibald)

With 6.3.0, the children prop (on a VNode) is now always an Array, even if there are no children. This allows us to skip an existence check when plucking children within render:

// 6.2.1 & prior:
({ children }) => children && children[0];

// As of 6.3.0:
({ children }) => children[0];

This change is backwards compatible since previously an empty array was already being returned for no children in some cases. Now it's just more consistent! 🌈

Bugfix: Switch to using the render parent to determine if re-rendering starting from within an SVG, since the current element may not exist (eg: for a component).

Improvements

• Support for infinitely nested children!
• Massive performance boost for h() (the hyperscript/jsx processor/reviver).
• Tons of little performance optimizations
• Allow components to not inherit from Component without caring
• Add aliases.js and typings.json to the NPM package.

Public Changes

• Rename Component._disableRendering to Component._disable to save a few bytes
• Removed undocumented support for getInitialState() on classful components.

This has never been part of the API but was left in core in order to support preact-compat's use. It is now being moved into preact-compat. This allows preact to normalize class components that don't inherit from Component.

Bugfixes

• Fix regression in 6.1.0 where state changes in componentDidUpdate() resulted in synchronous re-renders
• Fix issue where rendering an SVG element using the className prop (alias) would incorrectly assign className as an attribute. /cc @pl12133
• Fix serializing class for SVG (test included) (#334)

• Tons of little optimizations!
• Don't skip empty values in extend() (and thus in setState()). Fixes #308.
• Address ownership issue when rendering using reclaimed DOM. Fixes #297.
• Fix issue where re-rendering an intermediary high order component could remove (or fail to add) the associated element.
• When removing old props from the DOM, skip those with empty values.
• Exclusively rely on DOM state when diffing value and checked props. Fixes #326.
• Use strict equality when comparing attribute values against prop values. Fixes #327.
• Upon initial entry into diff, check if the diff should start out in SVG mode. Fixes #331.
• Fix prop cache reset triggering in the wrong case (affected performance)
• Add typings path to package.json. Fixes #318.
• Add support for single level of array children in h() (#313)
• Move both className to class normalization and hashed class stringification out of h() and into the DOM renderer.
  • Tiny possible breakage here: if you were creating VNodes using className and expecting them to have attributes.class instead of attributes.className, that is no longer the case.

• Fix <input list="id"> when datalist element is placed after the input in the DOM (Issue #294, thanks @vutran!)
• Fix HMR issue caused by recycling of a re-used Component base. (Issue #295, thanks @katopz!)

• Make 6.x the official latest release!

npm install --save preact@beta

Features

• Add support for SVG <foreignObject> (#278, thanks @amio!)
• Add preact/aliases import: A copy of preact that includes a createElement() alias (#168/#274, thanks @ngasull!)
• Switch to use event capturing for increased consistency with React (#266/#271, thanks @i-like-robots!)

Breaking Changes

• Discard keyed nodes when diffing children instead of allowing them to be reused unkeyed
• linkState() no longer falls back to components path lookups and no longer auto-invokes functions
  • These features were unused & poorly documented, and added extra weight
• Remove default empty options.vnode hook
  • While this is technically a breaking change, very few people use this API
  • Simply perform an existence check on the previous hook prior to calling it

Bug Fixes

• Fix and tests for regression in 5.7 that could cause nodes to be removed (related to #260/#277)
• Fix initial render failing to reuse certain components when picking up from SSR (#260)
• When swapping between Text, Comment and Element nodes, recycle whole orphaned trees
• Prevent the recycler from collecting non-Element nodes 🐛
• Switch back to the pre-5.7 case-sensitive on prefix for event handler props (#275, thanks @c2h5oh!)

• Correct regression introduced in 5.6.0 where re-rendering components with the same root node could duplicate their DOM. Fixes #257.
• Enforce this.props and this.context, even when a class improperly inherits from Component (eg: calls super() without forwarding arguments)
• Fix for all empty vnodes ("", null, etc) rendering a comment - this should only occur when an empty vnode is returned from a component's render().
• Make event handler "on" prefix case-insensitive

Features

• When rendering null, a comment node will be inserted instead of an empty TextNode.
• When using linkState() with components instead of DOM elements, use the first argument passed to the event handler as the default value unless a path is given.

Bug Fixes

• Fix case where switching from a String to Object style value would attempt to assign numeric CSS properties to the element (#233)
• Fix bug where using all lowercase event names would skip bypass binding implementation (but still mostly work)
• Fix and test for double-nulling of refs when changing the type of a component's root DOM element (#243)
• Fix IE bug caused by assigning to the nodeValue property of a TextNode that has been removed from the DOM.

• Fix this.base not being unset when unmounting High-Order components (#239)

Features

• #237 Imporving performance by inlining hook calls (thanks @trashhalo!)
• Disable rendering on unmount (thanks @Madumo!) [discussion]

Bug Fixes

• Fix keyed node removal issue noted by @localvoid and originally noticed by @kruczy in #235.

• Fix for erroneously recycled components

🎉 Preact 5 is here! 🎈

Version 5 represents a fairly major jump forward. It should be backwards-compatible, but major version increment is to signify a few new features that will not be made available in older versions - mainly built-in SVG support, and async rendering.

Take a few seconds and upgrade, you'll be happy you did! 🌈

Tip: If you're using preact-compat, it's best to upgrade that to 2.0.0 at the same time. Since Preact 5+ now includes built-in support for SVG, preact-compat@2 drops the preact-svg dependency, saving you around 1.7kb.

---

Along with the lovely stable stamp, this release includes some finishing touches:

Bug Fixes

• Fix case where a ref may be nulled before a component is unmounted (#232, thanks @slmgc!)
• Ensure remounting component trees invokes mount lifecycle events for deeply nested children (thanks to @kruczy @madumo et al for their help with this!)

New Features

• Style objects now have a lightning fast pipeline out to the DOM. (#228, thanks @trashhalo!)

  Example: <div style={{ foo:'bar '}} /> now diffs against the current style rather than stringifying the object

• Fixed lifecycle event DOM timing! #65 and #96
• Fixed swapping issue #230

Features

• #220 - Add Flow definition (fixes #219) - thanks @bouk!

Bug Fixes

• #218 - Fix nested JSX text children resulting in multiple TextNodes (thanks @bardt!)

Minor Changes

• Fix an inconsistency with how defaultProps are applied (developit/preact-compat#47)

  A key in props with a value of undefined should be treated as a missing key, and the value from defaultProps should be used in its place.

• Switch setImmediate backend from MessageChannel to Promise#then (change diff)

  This is much faster!

  However: This comes with the caveat of being unusable for animation. While this matches the use-case for setImmediate() within Preact (debouncing rendering), it means that componentDidUpdate() and setState() callbacks should not be used as a means of animation. *

  * This is only true when using the built-in debounce mechanism. Overriding to requestAnimationFrame is still a great way to do animations via these hooks.

Bug Fixes

• Fix an issue where swapping between functional and classful children of a high-order component could trigger an unmount in certain cases

  💁 If you're using preact-router, this fixes a redirect breakage

• #207 Fix xlinkHref prop for <svg> tags - thanks @aeosynth!

Bugfixes

• Ignore props.children if children are manually specified (as jsx children, or the third argument to h())
• Fix and test for the <svg class> bug @zhenkunou found and reported in #202
• Tiny size optimizations to offset the cost of the above fix :)

• Fix and (corrected) test for object style attribute serialization (#204) - thanks @katopz
• 🎨 Add built-in support for inline SVG! (#202)

Bugfixes

• Fix issue where value and a few other properties could get out of sync with their DOM counterparts.
• Fix overly optimistic codemod that was breaking child resolution in 5.0.1-beta.14. The codemod is now more intelligent and will only remove pointless initialization to undefined if not done within a conditionally executable block.

• Fixes 5.0.1-beta.13 having been published without the beta flag.

• Bugfix: When recycling old trees due to a Component render producing a different root node, avoid accidentally recycling the base of a high-order child component.

New Features

• Allow functions as VNode children (#154)

This is used in libraries that provide animation functionality by re-rendering function children with changing props:

render() {
  return (
    <SomeAnimator start={0} end={155} loop>
      { hue => (
        <span style={{ color: `hsl(${hue}, 100%, 60%)` }}>Rainbow</span>
      ) }
    </SomeAnimator>
  );
}

Bug Fixes

• Account for High-Order stateful child components wrapped in one or more functional components (#175)
• Fix disappearing element issue when swapping component root between Element and Text nodes (#176)
• Verify nesting ownership when attempting to unmount High-Order components

Other

• Various performance and memory optimizations

New Features

• Add support for cloneElement(). See React's Docs for more.

Bug Fixes

• Wrap DOM property assignment in a try{} block, as it can throw.
• Fix element reordering regression (#174)

Potentially Breaking Changes

• Switch to exclusively named exports. Fixes compatibility with ES Module bundlers like Rollup (#150).

Bug Fixes

• Don't invoke shouldComponentUpdate() when updating via forceUpdate() (#158)
• Fix diff self-correction issue that resulted in an unnecessary element removal and re-append (#159)

Bug Fixes

• Fix issue where switching HOC child components could trigger unmount lifecycle methods on the parent

Bug Fixes

• Fix issue where Components rendering null would break functional root check introduced in 5.0.0-beta9 (#182)
• Fix clearing a previously null/undefined value when using className compat alias (#181)

Potentially Breaking Changes

• DOM event handlers are no longer invoked with the source element as their context (this) (#153)
• Adding properties to context within a tree no longer overwrites, instead it extends/appends (#156)

Bug Fixes

• Fix for high-order component mount lifecycle (#143)
• Fix incorrect rendering of 0 values (#149)

Features

• Add key property to VNodes (#155)

Optimization

Preact 4: <img src="http://i.imgur.com/PPswLY8.png" width="400" />

Preact 5: <img src="http://i.imgur.com/Fd8mmxT.png" width="400" />

• Fix children being ignored when passed explicitly via props in certain cases. Fixes developit/preact-compat#44 (thanks @ld0rman!)

  Fun fact: this means you can now do: <div children={['hello!']} />

• Bugfix: Fixes an issue caught by preact-compat's ref tests, where swapping the root node rendered by a component would null its ref twice.

• Fix regression in 4.6.2 related to recycled component DOM not being treated as first render
• A few small optimizations

• Merge #106: removes some unnecessary code, drops ~50 bytes

• Lazy-instantiate the internal mapping for linkState() and setState's callback queue.

  This reduces allocation cost for components. It also reduces overall memory consumption for classful components that don't make use of those given features (certainly the common case for setState callback)

• Don't attempt to append a child to a parentNode if the child is the parentNode. Fixes Issue #126.

• Optimize serialization of Objects to CSS strings to be about 5x faster (benchmark: https://esbench.com/bench/570daee0db965b9a009659f7)

• Rethink solution to #120. TL;DR: fresh instances, cached DOM. Long version:

  Re-invoking the constructor on a class was not a great idea. Babel's transpiled constructors (and basically anything else) re-assign to the prototype, which is slow and a fairly bad idea. Also, and more importantly, it was assigning this.base to null, completely ignoring the main reason for caching components (caching their generated DOM using the component itself as a cache key). This commit changes the behavior to discard the cached component instance itself, re-using only the base by copying it to a fresh instance. Best of both worlds!

• Fix for #122: don't assume Function.prototype exists, as it does not for Arrow Functions (thanks @LinusU!)

• Fix regression since 4.5.0 where key tracking for components would fail in some cases, causing components not to be recycled. Relates to #98 and the second issue noted in #120.
• Switch to a global/named symbol Symbol.for('preactattr') for the prop cache key (still falling back to __preactattr_).
• Address the state re-use issue noted in Issue #120 by manually re-invoking component constructors when re-using components from the recycler.

• Updated ESLint, announced preactjs.com website.

Bug Fixes

• Fix context being null/undefined when unset. It should be an empty object.
• Fix issue where ref (and key) were not being removed from props prior to being passed into component render (Issue #98)

Optimizations

• Drop unnecessary cloning of props/context
• Ship a more optimized default build by applying uglify-js without name mangling and with beautification (removes comments and applies dead code elimination)

Bug Fixes

• When reclaiming externally created elements (such as via dangerouslySetInnerHTML), copy their attributes into the prop cache so they are properly diffed on subsequent render (Issue #97)
• Fix cached unmount behavior: lifecycle events should be invoked for nested components, but only the top-level component should be physically removed from the DOM. The rest remain cached within that component's DOM + VDOM tree (Issue #94)

• Fix exception thrown when removing/unsetting dangerouslySetInnerHTML

• Fixed issue where setting the value prop for a <select> element could have no effect on initial render