preactjs/preact 10.0.0-alpha.2

10.0.0-alpha.2 - Sir Alphatross 🎉

on GitHub

The weekend is coming and we thought it be a good time to make another alpha release for everyone to play with 🎉

This was a wonderful week for us. More and more bug reports contain links to a reproducible test case. You all are simply amazing! We wouldn't be able to fix this many bugs without all your help 👍 Even our contributions had an alltime high with excellent PRs from the community!

Despite fixing many bugs we landed a new package to help you test hooks in Preact 🎉

Introducing preact/test-utils

With hooks having their own scheduling logic, we didn't have a good testing story up until now! First-time contributor @JoviDeCroock went right into it and quickly had a prototype running. With the blink of an eye he had a PR that was ready to be merged. These testing utilities are inspired by the excellent react-dom/test-utils tools and share a similar act() function 👍

For testing hooks effectively we need to flush pending effects synchronously. The brand new act() function allows you to do just that:

import { act } from "preact/test-utils";

let spy = sinon.spy();
function StateContainer() {
  useEffect(spy);
  return <div />;
}

// Wrap the render() with `act` to flush hooks automatically
act(() => render(<StateContainer />, document.body));

// Do your assertions 🎉
expect(spy).to.be.calledOnce;

If you're working with class-based components you can use the new setupRerender function to flush pending state updates in your tests:

import { setupRerender, Component } from "preact/test-utils";

// Setup rerender logic first
const rerender = setupRerender();

let updateState;
class App extends Component {
  constructor() {
    super();
    this.state = { count: 0 };
    updateState = () => this.setState(prev => ({ count: ++prev.count }));
  }

  render() {
    return <div>count: {this.state.count]}</div>;
  }
}

// Render your component
render(<App />, dom);
expect(dom.textContent).to.equal("count: 0");

// Trigger a state update
updateState();

// Flush all state updates
rerender();

expect(dom.textContent).to.equal("count: 1");

It's his first contribution to Preact and we couldn't be more ecstatic about his work. Give him a round of applause 👍 It's also good to know for us that our code remains very accessible for new contributors.

Bug-Fixes

• Fix devtools not loading (#1360, thanks @calebeby)
• Inline vnode children (#1317, thanks @developit)
• Remove double Promise on initialization (#1370, thanks @bmeurer and @marvinhagemeister)
• Fix camelCase style properties not working (#1375, thanks @mochiya98)
• Fix Portal rendering undefined tags into the DOM (#1367, thanks @marvinhagemeister)
• Fix this.props not set for PureComponent components (#1384, thanks @marvinhagemeister)
• Use console.error for caught errors in the devtools adapter (#1385, thanks @yuqianma)
• Fix state not updated when setState is called in componentWillReceiveProps (#1369, thanks @mochiya98)
• Fix svg foreignObject not being treated as svg (#1391, thanks @marvinhagemeister)
• Fix onBeforeInput not attaching event handler (#1366, thanks @marvinhagemeister)
• Fix React.isValidElement check failing for vnodes created with Preact (#1380, thanks @marvinhagemeister)
• Fix <select>.value not working (#1397, thanks @JoviDeCroock)
• Fix multiple selections for <select> only selecting last item (#1405, thanks @JoviDeCroock)
• Fix force flag blocking state update in second render() (#1377, thanks @developit)
• Fix IE11 crashing because of missing Element.prototype.remove (#1395, thanks @marvinhagemeister)
• Fix forwardRef and memo ignoring refs when composed together (#1358, thanks @marvinhagemeister)

Performance

• Move _prevState for devtools out of core (#1379, thanks @developit)
• Reuse oldChildrenLength to save bytes (#1386, thanks @yuqianma)
• Don't call setProperty for style strings (#1394, thanks @choumx)

Other

• Fix unable to satisfy type parameters for static methods (#1365, thanks @marvinhagemeister)
• Add back missing camelCase attributes (#1390, thanks @marvinhagemeister)
• Add missing autocorrect attribute types (#1393, thanks @garybernhardt)
• Ignore final new line for all mangle.json files (#1378, thanks @developit)
• Add more tests for componentWillReceiveProps (#1387, thanks @developit)