All Versions
Latest Version
Avg Release Cycle
14 days
Latest Release
27 days ago

Changelog History
Page 1

  • v10.3.4

    March 11, 2020

    🚀 This is a maintenance release, upgrading should be free, please do report it in case you encounter any issues.

    render-queue sorting

    Preact batches all rendering work and executes from the top of the Virtual DOM tree to the bottom. However, if new rendering tasks were added during an existing render, they were processed without regard for their depth in the tree.

    Thanks to a clever fix from @jviide, Preact's render queue is now immutable. Any new tasks added during rendering are placed into a second batch.

    💻 material-ui integration

    👀 A peculiar issue users were seeing with material-ui related to a ref never getting populated, we went very deep into the codebase and found out that our forwardRef was a bit too eager, at creation it would already start forwarding. We moved this to a later point, now just before the vnode will get diffed the ref will be forwarded.

    🛠 Fixes:

    🚧 Maintenance:

  • v10.3.3

    March 01, 2020

    _ tl;dr: Some minor changes which make this release safe to upgrade for everyone!_

    🚀 Another week, another Preact release! It seems like the previous one wasn't too long ago, but there are already so many cool changes in master that we're eager to bundle them in a neat release!

    Much improved conditional rendering

    🚚 One insanely cool and very important change was done by @andrewiggins, who woke up one day and found a very elegant solution to handling conditionally rendered elements. Most virtual-dom-based frameworks mark a falsy result with some sort placeholder (sometimes referred to as "holes"), so that the diffing algorithm can ensure that elements are not moved around needlessly.

    🐎 It's not just for performance though as they are some real world consequences to moving nodes around. The most common annoyance is <input>-elements losing focus whenever a parent is moved. With this change we are pretty confident that we squashed all known issues on that front 👍

    👌 Improved SVG attribute casing

    🍱 SVG also received a big change by @steveharrison . It's his first contribution Preact and he already knocked it out of the park with an excellent PR. HE went through the whole SVG spec and noticed that we didn't match some of the weird casings of SVG-Attributes properly and his PR remedies that beautifully! 💯

    Preact sightings

    🍱 @pksjce finished her YouTube series where she reads through a portion of the Preact source code. With that she helped us tremendously in spotting areas in code which lacked comments and finally pushed us to create a proper "Contributing" guide. If you are considering contributing to Preact, this short document is well worth a read as it contains an overview of the repo's structure and answers for the most common questions regarding our code. That said if you feel like something is missing or you do have troubles understanding some sections of the source, please reach out to us! We're here to help and feedback about friction points is crucial to making Preact better for everyone 👍

    🍱 Checking our official website you may have noticed some slight changes here and there. They're mostly to simplify navigation or to give our docs a more fitting structure. The long term plan is to integrate our learnings about the most common support questions we get and fill in those spots. @NJalal7 spotted a few of those areas and even found a bug in Preact in the process that we we're promptly able to fix 🙌

    🍱 Thank you so much to everyone who contributed code, helped us in narrowing down issues or participated in making Preact even better. Preact wouldn't be were it is now without you all ❤️

    🔋 Features

    • Compat: Add isPropagationStopped fn to event (#2378, thanks @reznord)
    • 0️⃣ Compat: Add isDefaultPrevented fn to event (#2377, thanks @teodragovic)
    • 🐎 Large performance boost in preact/debug (#2362, thanks @developit)

    🐛 Bug Fixes


    🚧 Maintenance

    • ➕ Add comment to clarify seemingly redundant string concatenation (#2369, thanks @mhmdanas)
    • 📇 Rename some variables to increase legibility (#2361, thanks @andrewiggins)
    • Combine searches in excessDomChildren into the same code block (#2356, thanks @andrewiggins)
    • 🛠 Fix failing test by defaulting to empty array (#2353, thanks @JoviDeCroock)
    • ➕ Add new test file for null placeholders (#2352, thanks @andrewiggins)
  • v10.3.2

    February 15, 2020

    _ tl;dr: Another bug-fix only release. It's safe to upgrade and we encourage everybody to do so_ 👍

    💅 It's sunny today and I haven't been outside yet, so I'll make it quick: Those pesky ref TypeScript errors when used with a CSS-in-JS library should be no more! So if you're using styled-components, emotion, goober or any other CSS-in-JS library, this update is for you! 💯

    @robertknight found that false values where not special cased for aria-* attributes as they have a different way of treating boolean values compared to the DOM. Many boolean-like attributes like aria-checked have three states:

    • true element is checked
    • false element is unchecked, but it's possible to check it
    • 0️⃣ undefined (default) element can't be checked

    🍱 As usual thank you so much for everyone who helped make Preact better by contributing code or reporting issues! You all rock 👍

    🐛 Bug Fixes

    • ➕ Add support for false value in aria-attributes (#2347, thanks @marvinhagemeister)
    • ✂ Remove array provided to callback in and .forEach (#2326, thanks @mhmdanas)
    • 🛠 Fix missing index (#2322, thanks @JoviDeCroock)


    • 👀 Match useErrorBoundary type with componentDidCatch (#2332, thanks @intrnl)
    • 🛠 Fix incompatible ref typing with ReactElement (& popular react libraries) (#2099, thanks @xiel)
    • 👀 Make useErrorBoundary's callback param optional (#2320, thanks @intrnl)

    🚧 Maintenance

  • v10.3.1

    February 06, 2020

    _ tl;dr: Just a minor bug-fix-only release. Safe to upgrade for everyone._

    🚀 We've been notified of an issue with the way we used the new exports feature that was introduced with Node 13, so we wanted to get out patch release as quickly as possible. Despite that we managed to include several other fixes in such a short timeframe that are worthy to mention.

    ✅ Run tests against the minfied production artifact

    🍱 This is big for us. @andrewiggins did an amazing PR which modifies our testing infrastructure to execute the tests against the minfied production bundles that are published to npm. This greatly reduces any chances of us not catching bugs that may exist in transpilers or the custom minify config we're using. And Andre promptly found a few misconfigurations already. Most of you propably didn't run into these issues as they are somewhat in the edge case area, but it's amazing to have a tool to automatically check our code for an mishaps 💯

    A new size bot

    🍱 In the early days of the Preact X rewrite we made a promise to ourselves in that we would check the effects on size for each PR. We started by printing out all the sizes of our exports via microbundle, but we did still have to compare those manually against what's in master. Both @kristoferbaxter and @developit have been joining forces and created a bot which does that automatically. As soon as the pipeline on a PR succeeds it will add a comment listing all the size differences 👍

    🔄 Changelog

    🐛 Bug Fixes

    • 🛠 Fix className not being applied when set to an empty string with preact/compat (#2309, thanks @JoviDeCroock)
    • 🏗 Run karma tests against build output (#2300, thanks @andrewiggins) ❤️
    • 🛠 Fix: Resolves Node submodule subpath error (#2304, thanks @4cm4k1)

    🚧 Maintenance

    • ➕ Add to umd and make browser a modular export for future bundlers (#2311, thanks @JoviDeCroock)
    • ➕ Add root exports (#2310, thanks @JoviDeCroock)
    • ✂ Removes warning from tests by removing console.log in render.test.js (#2305, thanks @theZieger)
  • v10.3.0

    February 03, 2020

    _ tl;dr: This release contains a good number of bug fixes and we encourage all users to upgrade._

    🚀 A little bit of time has passed since our last release and we're excited to ship another one, making Preact even more robust! The fixes nearly touch all packages and further improves compatibility with third-party libraries 🎉

    🍱 If you glance at the contributor names, you'll notice a few new ones there. It's safe to say that we were amazed and super ecstatic by the amount of new first time contributors to Preact! 🙌

    🔋 Features

    • 👍 Include support for customised built-in elements (#2266, thanks @defx)
    • ⬆️ Upgrade devtools adapter to support Profiler and bring back preact/devtools import (#2246, thanks @marvinhagemeister)

    🐛 Bug Fixes


    • 👍 Allow null as an initial value for useRef (#2281, thanks @armujahid)

    🚧 Maintenance

  • v10.2.1

    January 08, 2020

    🚀 This release corrects an issue regarding hydration that was found in yesterdays 10.2.0 release 🎉

    🐛 Bug Fixes

  • v10.2.0

    January 07, 2020

    🚀 Happy belated New Years to everybody 🎉 We hope you enjoyed the holidays and had some time off to recharge 👍 Our very first release in 2020 brings two new features and the usual round of bug fixes 💯

    🆕 New useErrorBoundary hook

    👀 There is a new hook called useErrorBoundary which allows you to catch errors that are thrown by any child components. It's essentially the hook version of componentDidCatch.

    // 1. parameter is null or the error that was caught// 2. paremeter can be called to reset the stateconst [err, reset] = useErrorBoundary();// Optional: You can pass a callback function that will// be executed when an error occurs:const [err] = useErrorBoundary(() =\> callMeMaybe());

    Usage example:

    // Example component that will throw an error on renderconst SomeComponent = () =\> { throw new Error("fail"); };const App = props =\> { const [err] = useErrorBoundary(); if (err) { return \<p\>Something went wrong...\</p\>; } else { return \<SomeComponent /\>; } };

    0️⃣ Lazy works with non-default export

    0️⃣ This PR was one of the smallest ones, but something that makes working with different kind of lazy loaded modules a lot easier. Previously lazy would always use the default export of the imported module. With this change it's now possible to use it with any export.

    // Look ma, no default exportconst LazyFoo = lazy(() =\> import("./Foo").MyComponent);

    🍱 On top of that we have the usual round of bug fixes. We'd like to thank everyone who reported them and helped us make Preact even better. Thank you so much!! 👍

    🔋 Features

    🐛 Bug Fixes


    🚧 Maintenance

  • v10.1.1

    December 16, 2019

    _ tl;dr: A tiny maintenance release, which helps with debugging Preact apps._

    🚀 This release is a lot smaller compared to our usual ones, but we deemed one feature important enough to have in users hands that we made this release. And that's component stacks which we hope will reduce the issue count in our tracker slightly 🎉

    On top of that we want to congratulate @jamesb3ll for his first-time contribution to Preact 🥇 He found an issue and filled it with every detail one can imagine (codesandbox is awesome!). But instead of stopping there, he tinkered a bit and found a genius fix for it! Thank you for your PR 👍 🍀

    Component Stacks

    ⚠ Whenever you include preact/debug you get a lot of hints and warnings about how you can make your application better. But sometimes it was hard to tell where the error originated from. To resolve that we automatically append a component stack trace telling you directly which component threw the error.

    class Foo extends Component { constructor(props) { super(props); // Doesn't do anything, `this.state = { foo: true }`// should be used instead.this.setState({ foo: true }); } render() { return \<div\>foo\</div\>; } }function Bar() { return \<Foo /\>; }function Baz() { return \<Bar /\>; }

    ⚠ The above code will print the following warning to the browser's console:

    Screenshot from 2019-12-16 20-55-21

    🍱 With the stack appended at the bottom it's much easier to track down the source 💯 To get those beautiful file and line mappings, make sure that you have @babel/plugin-transform-react-jsx-source enabled in your babel config 👍

    🔋 Features

    🐛 Bug Fixes

    • 🛠 Fix componentWillReceiveProps not called on child component when parent is queued in the same commit (#2186, thanks @jamesb3ll)

    🚧 Maintenance

  • v10.1.0

    December 09, 2019

    _ 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:


    🍱 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


    • ➕ 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

  • v10.0.5

    November 10, 2019

    _ tl;dr: This release is a bug fix only release and all users are encouraged to update._

    🍱 This week saw many cool improvements surrounding our TypeScript definitions. Thanks to an amazing contribution from @lukeshiru the event target is now correctly inferred for all native elements. This alone should remove many manually casted event arguments in your code 🎉

    🍱 Together @JoviDeCroock and @cristianbote set their minds on fixing a few newly reported issues surrounding refs and the like. Personally, I'm pretty impressed how quickly they could identify and resolve the issues. Much respect to you two 👍

    As the year is coming to an end @andrewiggins did some house-cleaning and found various places where we could save even more bytes! I don't know how he does it and it's just amazing to witness so much pure talent!

    🚧 Beside that, the changes mainly revolve around maintenance tasks. We've switched to prettier for automatic code formatting, lowering the barrier for new contributors even more. The formatting is automatically applied on each commit via a git-hook, and everything will be taken care of for you 💯

    🍱 We also saw two exciting contributions from Googlers: @jridgewell found a very hard to spot unnecessary case in a regex we use to append px to certain CSS values and @jakearchibald found an html attribute we missed in our typings 🎉

    🚀 Like in our past release we'd like to take a moment to thank everybody who contributed, not just code but also made the time to write bug reports. Thank you so much 👍

    🐛 Bug Fixes

    🍱 Golf 🏌️‍♀️


    • ➕ Add types for currentTarget on event handlers for IntrinsicElements (#2084, thanks @lukeshiru)
    • 👌 Improve ref typings for IntrinsicElements (#2070, thanks @lukeshiru)
    • ➕ Add as html attribute to TypeScript defs (#2068, thanks @jakearchibald)

    🚧 Maintenance