preactjs/preact 10.0.0-beta.2 on GitHub

tl;dr: We're excited to be one step closer to a final Preact X release! It's packed full with the addition of Suspense, lazy, performance improvements and the usual round of bug fixes 🎉

Internally we've been referring to this one as the "Hitchcock"-Release. @jviide came up again with the very fitting release title 👍 We're proud to welcome @sventschui as the newest addition to our team! And oh boy did he join us with a bang! 🎉

The Suspense Is Real

@sventschui went ahead and added basic support for both the Suspense component and lazy() to preact/compat. With these in place it is now a lot easier to do proper code-splitting. Just have a look at this example on how they can be used together:

import { Suspense, lazy } from "preact/compat";

const Other = lazy(() => import('./OtherComponent'));

function Foo() {
  return <Suspense fallback={<div>Loading...</div>}>
    <Other />
  </Suspense>
}

In the snippet above the Other component will only be displayed once it's loaded. Until then the Suspense component allows the user to display any fallback content making it ideal for any sort of spinners for example 👍 🥇

This was one of the remaining road blocks in getting Next.js to work with Preact X 🎉 Note that our implementation is still considered an experimental preview 🕥

The golfing continues ⛳ 🏌️‍♂️

Last cycle we had a lot of fun finding ways to make Preact even smaller! In fact, we had so much fun that we continued a bit to do so leading up to this release 💯 These size optimizations are really important, because they allow us to offset the byte cost for new features while staying within our self imposed byte size limit 🐳

Faster hydration ⚡ 🏁

Following @developit and @housseindjirdeh's talk on Progressive Hydration at Google I/O'19, we've landed the first changes to support a more ideal way of handling hydration. Note that this is formally a breaking change, but it won't likely cause you any trouble. What's different is that existing server-rendered DOM element attributes will no longer be removed during hydration. This translates to a huge performance benefit for boot-up time, which means your page gets interactive and ready-to-go noticeably sooner if you are doing Server Side Rendering or prerendering 🚀

Removed string styles

We removed support for string styles in favor of setting style properties only with objects. This aligns our behavior with various other virtual-dom based libraries out there ✔️ Note that this is a breaking change from 8.x and you may need to update your code:

// before
<div style="color: LightGoldenrodYellow;" />

// after
<div style={{ color: "LightGoldenrodYellow" }} />

This one was long on our list of possible ways to cut down on size. Nonetheless we are aware that this might be a controversial change. If you have a lot of string styles or want to continue using them, you can use preact-string-styles to patch this behavior back into Preact X. If you don't agree this change, please let us know!

Preact Sightings ⚛️

Sometimes we need a bit inspiration on how to build complete Applications with Preact. We were super stoked to see that one of the demos at Google I/O uses our library and can be inspected here on GitHub. The demo is a minesweeper-like game called Proxx that makes clever use of some advanced web features like Web Workers and WASM. Be sure to check it out!

If any of you wonderful people happen to be at JSConfEU in Berlin this weekend, let's meet in person! Both @cristianbote and I (@marvinhagemeister) will be attending, and we have plenty of stickers with us 😉

In closing we've been super thankful for every PR or bug report we received in the past cycle. They are crucial to make Preact rock solid and help us find edge cases we may not have thought of. Thank you all!

Changelog

Features

Introduce Suspense and lazy (#1593, #1638 thanks @sventschui)
Don't read attributes during hydration (#1596, thanks @developit)
Update README with the proxx demo (#1654, thanks @talentedandrew)
Make consistent use of key check logic (-12 B) (#1651, thanks @andrewiggins)
Update links for the new preactjs org (#1649, thanks @JoviDeCroock)
Support JSX-sourcemaps (#1628, thanks @JoviDeCroock)
Simplify key matching technique (#1637, thanks @developit)
Remove the unused bundlesize dependency (#1641, thanks @JoviDeCroock)
Add travis-size-report to the CI (#1633, thanks @wardpeet)
Revert the lookup on documentView since this introduced a regression (#1631, thanks @cristianbote)
Show useEffect warning instead of throwing error (#1623, thanks @yuqianma)
breaking: Remove support for style as string and other golfing (-32B) (#1606, thanks @cristianbote)
Golf Hooks (-11B) and compat (-18B) (#1602, thanks @JoviDeCroock)
Code golf preact.js.gz size down by 53 B ⛳️ (#1599, thanks @jviide)
Store text node's text content as VNode.props instead of VNode.text (#1600, thanks @jviide)

Bug fixes

Update Fragment DOM log with null placeholder behavior (#1661, thanks @andrewiggins)
Prevent crash with nullish ref (#1657, thanks @JoviDeCroock)
Remove props.key even when key === 0 or key === "" (#1607, thanks @jviide)
Fix unmount behavior when using replaceNode (#1647, thanks @JoviDeCroock)
Fix react-hot-loader compatibility by not checking on vnode ref (#1644, thanks @JoviDeCroock)
Fix this reference in componentWillUnmount under context Consumer (#1627, thanks @sventschui)
Ignore dangerouslySetInnerHTML during hydration (#1595, thanks @developit)
Don't compare vnodes when oldVNode has no dom reference (#1617, thanks @JoviDeCroock)
self is not available in non-browser environments (#1618, thanks @cristianbote)
.some should not be used for effect invoke/cleanup (#1613, thanks @JoviDeCroock)
Only warn once about argumentless effects (#1625, thanks @JoviDeCroock)
Warn about missing preact-render-to-string dependency (#1603, thanks @JoviDeCroock)
Insert portal children instead of overwriting the container (#1629, thanks @JoviDeCroock)

Typings

Add types to compat (#1609, thanks @pmkroeker)
Add types for Suspense/lazy (#1619, thanks @pmkroeker)

preactjs/preact 10.0.0-beta.2 10.0.0-beta.2 The Master Of Suspense on GitHub