Skip to content
  • 10.2.1
  • cf635d5
  • Compare
    Choose a tag to compare
    Search for a tag
  • 10.2.1
  • cf635d5
  • Compare
    Choose a tag to compare
    Search for a tag

@marvinhagemeister marvinhagemeister released this Jan 8, 2020 · 20 commits to master since this release

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

Bug Fixes

Assets 2
  • 10.2.0
  • f695f5a
  • Compare
    Choose a tag to compare
    Search for a tag
  • 10.2.0
  • f695f5a
  • Compare
    Choose a tag to compare
    Search for a tag

@marvinhagemeister marvinhagemeister released this Jan 7, 2020 · 22 commits to master since this release

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 state
const [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 render
const SomeComponent = () => {
	throw new Error("fail");
};

const App = props => {
	const [err] = useErrorBoundary();

	if (err) {
		return <p>Something went wrong...</p>;
	} else {
		return <SomeComponent />;
	}
};

Lazy works with non-default export

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 export
const LazyFoo = lazy(() => import("./Foo").then(m => m.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

Typings

Maintenance

Assets 2
  • 10.1.1
  • 71425ff
  • Compare
    Choose a tag to compare
    Search for a tag
  • 10.1.1
  • 71425ff
  • Compare
    Choose a tag to compare
    Search for a tag

@marvinhagemeister marvinhagemeister released this Dec 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

Assets 2
  • 10.1.0
  • 1a9d7fc
  • Compare
    Choose a tag to compare
    Search for a tag
  • 10.1.0
  • 1a9d7fc
  • Compare
    Choose a tag to compare
    Search for a tag

@marvinhagemeister marvinhagemeister released this Dec 9, 2019 · 64 commits to master since this release

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

Assets 2
  • 10.0.5
  • 9e780aa
  • Compare
    Choose a tag to compare
    Search for a tag
  • 10.0.5
  • 9e780aa
  • Compare
    Choose a tag to compare
    Search for a tag

@marvinhagemeister marvinhagemeister released this Nov 10, 2019 · 207 commits to master since this release

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 🏌️‍♀️

TypeScript

Maintenance

Assets 2

@marvinhagemeister marvinhagemeister released this Nov 1, 2019 · 1 commit to 8 since this release

Assets 2
  • 10.0.4
  • 5eee583
  • Compare
    Choose a tag to compare
    Search for a tag
  • 10.0.4
  • 5eee583
  • Compare
    Choose a tag to compare
    Search for a tag

@robertknight robertknight released this Oct 29, 2019 · 288 commits to master since this release

This release fixes a build issue that caused errors when using effect hooks.

Assets 2
  • 10.0.3
  • 88999fe
  • Compare
    Choose a tag to compare
    Search for a tag
  • 10.0.3
  • 88999fe
  • Compare
    Choose a tag to compare
    Search for a tag

@marvinhagemeister marvinhagemeister released this Oct 29, 2019 · 292 commits to master since this release

This release corrects an issue where a debug warning was printed incorrectly to the console, that (rightfully) confused users. So we wanted to fix that as quick as possible 👍

Bug Fixes

Maintenance

  • Queue layoutEffects in component render callbacks array (+0 B) (#2050, thanks @andrewiggins)
  • Separate debug tests into multiple files and fix some bugs in debug (#2047, thanks @andrewiggins)
Assets 2
  • 10.0.2
  • 8e848b0
  • Compare
    Choose a tag to compare
    Search for a tag
  • 10.0.2
  • 8e848b0
  • Compare
    Choose a tag to compare
    Search for a tag

@marvinhagemeister marvinhagemeister released this Oct 28, 2019 · 309 commits to master since this release

tl;dr: This is release contains mostly bug fixes and some size reductions. We encourage everyone to upgrade.

Just a week has passed since the last release and there are already an exciting number of new commits in master. Hackoktoberfest has had really positive effects on us and we're excited to see some new contributors in this release 💯

As you can see from the changelog: @andrewiggins is currently on a byte removing spree, so I thought it'd be appropriate to list them in their own category 🎉 A few others joined him and marie kondo'ed everything that didn't spark joy in us!

Besides some great savings, there are new debug warnings for components and fixes for our Suspense implementation 🎉

Features

  • Add debug warnings when calling setState or forceUpdate on an unmounted component (#2037, thanks @andrewiggins)

Bug Fixes

Golf (size reductions)

  • Inline coerceToVNode inside of toChildArray (-21 B) (#2040, thanks @andrewiggins)
  • Remove unused mount check in context Provider (-6 B) (#2039, thanks @andrewiggins)
  • Golfed render (#2045, thanks @MohammedSheikhIbrahim)
  • Remove useless return from eventProxy (#2026, thanks @jridgewell)
  • Rewrite useImperativeHandle to use useLayoutEffect (-35 B) (#2003, thanks @andrewiggins)
  • Re-purpose renderCallbacks as a general per-component commit queue (#2011, thanks @andrewiggins)

Types

  • Add nonce to JSX HTMLAttributes types for better Content Security Policy support. (#2035, thanks @calvinf)
  • Remove internal import from compat types (#2018, thanks @andrewiggins)
  • Fix internal vnode typings (#2015, thanks @pmkroeker)

Maintenance

Assets 2
  • 10.0.1
  • a803e68
  • Compare
    Choose a tag to compare
    Search for a tag
  • 10.0.1
  • a803e68
  • Compare
    Choose a tag to compare
    Search for a tag

@marvinhagemeister marvinhagemeister released this Oct 17, 2019 · 399 commits to master since this release

tl;dr: This is a standard bug-fix release with no new features. We encourage everyone to upgrade

Wow, we've been overwhelmed with the reactions to our final Preact X release! We saw a huge uptick in npm downloads to 200.000 per week 🎉 Another exciting announcement is that Google AMP is officially using Preact under the hood. We've receivied many more thank you notes (and even stroopwafels!) from companies using Preact. Those range from small companies to big enterprise ones, where Preact is used in a wide span of different environments.

We preactively allocated the weeks after the big launch for a period of bug-fixes only in case something slipped through. It was admittedly a more conservative decision after our long alpha and beta period, but we wanted to make sure that you all would have a butter smooth experience no matter what 🌠 It's safe to say that it went really well and we've only received a couple bug reports so far 🎉

In the short amount of time that has passed since the release, we managed to squash a good portion of those! Thank you so much to everyone for reporting bugs and helping us track them down! You rock 👍 💯

Bug Fixes

Types

Maintenance

Assets 2
You can’t perform that action at this time.