« Changelog History


preact v10.1.0 Release Notes

Release Date: 2019-12-09 // over 4 years ago

  • _ tl;dr: This release adds support for the highly anticipated preact-devtools extension. It's in an early preview state, but it has proven to be very useful already for inspecting a component tree in our internal testing. Apart from that there is a new SuspenseList component to control loading in lists and the usual round of bug fixes._

    🚀 Christmas comes early in the form of another feature packed Preact release 🎉 We're particular proud of this one as it represents the results of a lot of work behind the scenes. Especially when it comes to the devtools.

    🍱 Developers, Developers, Developers! 🔧

    For the longest time we've been able to reuse the react devtools extension that was (as the name implies) written specifically for React. We did this by hooking ourselves into the init procedure and shimming in a conversion layer that translated our inner workings to something React would use under the hood. Over the past year we've kept up with all the internal changes of React's private structures, but it took us more and more time to make sure that the integration wasn't breaking or running into weird edge cases.

    💻 Faced with a choice we decided to pursue the development of our own extension specifically written for Preact. This way we are not affected by any breaking changes on React's side and have the possibility to extend the devtools with custom UI, like for the Composition-API PR #1923 .

    🚀 That said the extension is not what we would call final yet. It's more of an early preview, akin to an alpha release. Despite bugs you may encounter, we found it useful enough in our testing that we didn't want to hold back any longer.

    Download it here: https://preactjs.github.io/preact-devtools/

    preact-chrome-light

    🍱 SuspenseList 🔢

    💻 SuspenseList is a new component that can control the order in which any child suspensions are revealed. Take a list of images for example. Due to the browser firing the requests to download them in parallel, the images may appear in any order. This can be a bit jarring, when some sort of appear animation is involved. With SuspenseList we can force all images to appear at the same time, inorder or in reverse.

    In the following example A will appear first, followed by B even if C was loaded before B. And finally C will appear.

    // `revealOrder` can be one of 'forwards', 'backwards' or 'together'\<SuspenseList revealOrder="forwards"\> \<Suspense fallback={\<span\>Loading...\</span\>}\> \<A /\> \</Suspense\> \<Suspense fallback={\<span\>Loading...\</span\>}\> \<B /\> \</Suspense\> \<Suspense fallback={\<span\>Loading...\</span\>}\> \<C /\> \</Suspense\> \</SuspenseList\>

    🔋 Features

    🐛 Bug Fixes

    Typings

    • ➕ Add onToggle event to TypeScript defs. (#2151, thanks @xorgy)
    • Re-export FunctionComponent from preact/compat (#2087, thanks @jokester)
    • 🛠 Fix internal Suspense-related typings (#2117, thanks @jviide)
    • Specify valid dir property values (#2108, thanks @antonk52)

    🍱 Golf ⛳️🏌️‍♀️

    🚧 Maintenance