preactjs/preact 10.1.1

on GitHub

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:

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

• Add component stack in debug warnings (#2179, thanks @marvinhagemeister)

Bug Fixes

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

Maintenance

• Workaround for sinon esm bundle (#2188, thanks @marvinhagemeister)