github preactjs/preact 10.0.0-beta.1
10.0.0-beta.1 Los Compresseros
on GitHub

latest releases: 10.24.1, 10.24.0, 10.23.2...
5 years ago

tl;dr: This release contains important bug fixes to our reconciler and a security fix.
We highly recommend to upgrade to this version if you are running a past alpha
or beta release of Preact X.

Code-Golf to the max ⛳ 🏌️‍♀️

As mentioned in our past release notes we spent more time on making preact even
smaller. It didn't take long until @andrewiggins found ways to cut down close
to 40 bytes in just a few hours. We don't know how he does it, but the bytes
are surely afraid of him by now! Amazed by that headstart @jviide soon followed
with a PR of his own which removed another 30+ bytes. He's been helping us
with loads of performance improvements in the past weeks and you may already
know him from his outstanding contributions to htm,
but this is his very first PR to Preact. Be sure to give him a high-five when
you see him somewhere 🎉

Lazor sharp focus 🔭

The temptation was real and @JoviDeCroock tackled one of the bigger fish that
was back on our minds for a while: Our focus workaround. Due to past bugs in
our reconciler during the alpha phase we had to add a workaround so that a
focused input wouldn't lose focus when sibling elements were moved or removed
completely. The workaround took some toll on the final build size and jovi
managed to finally crack the nut and made it possible to remove that workaround.

After just a few days we're happy to report that close to 100 bytes had to pack
up their things and leave the repo 👉 We're super happy with the result and have
surpassed our initial approximations on possible savings 🏁

VNode hardening 💪

One thing that's very important for us is making sure that we make it easy to
do the right thing by default regarding security. For that all modern frameworks
prevent the most common Cross-Site-Scripting Attacks (short: XSS). Frameworks
that are based on the virtual-dom are unique in that regard as most exploits
rely on some way to inject a malicious string through innerHTML.

Preact 8.x included a protection for the following scenario: 

// Malicious JSON received from server or created
// from user input via JSON.parse() in app code
const evil = {
  type: "div",
  props: {
    dangerouslySetInnerHTML: "<script>alert('xss')</script>"
  }
};

function App() {
  // Inject our evil vnode
  return <div>My name is {evil}</div>;
}

render(<App />, document.body);

The exploit basically comes down to a possibility of a user being able
to inject any js object as a virtual-dom node (= vnode) and in effect
being able to call dom.innerHTML = evilString. Note that this
requires either a compromised or insecure server or an input field which
is parsed via JSON.parse() and put back into JSX unmodified to pull of
the exploit successfully. This is why we think it's a low priority security
issue.

We take any security issue seriously and have added a similar protection
mechanism to Preact X 👍 Thanks goes to @JoviDeCroock and @wardpeet who did
the inital prototype.

Say hello to useDebugValue and useImperativeHandle 👋

These two hooks are lesser known than useState and the like, but are sometimes
used in third-party libraries. useDebugValue is especially important to
remain compatible with the upcoming mobx-react which relies a lot on hooks
internally. With these 2 hooks added we are now 100% compatible with the react
ecosystem on that front 🎉

Easier hydration ✔️

As we all know server-side-rendering (short: ssr) is a neat way to improve
the time to first paint. This is especially important if you're working for
a newspaper or magazine where the bottom line is very dependent on performance.
First-Time contributor @LukasBombach championed an improved way to directly
replace a DOM node with a render() call. This is very useful on a site where
sections are rendered independently from each other.

It works by being able to pass a third replaceNode parameter to render.
We were not only impressed by the attention to detail in his PR, but also by
the incredible description and info-graphics around the changes. This was
beyond stunningly awesome 👍 Check out the description in his PR for more information.

Loads of little fixes 🔧

As usual this release is packed with a bunch of fixes and minor performance
improvements. Most notably are correctness fixes and improvements to animation
event handling. On top of that we added an example page with styled-components
to test with. We knew some users had issues with it and Preact 8.x in the past
so we wanted to make sure that it will work right out of the box with Preact X.
And the good news is that we haven't found any issues so far 🎉

In general we fell like we're reaching a stage with Preact X where it is pretty
stable and mature at this point. A final release is likely not too far off in
the future 💯 😉

But enough talk, here is the full list of changes:

Typings

Check out latest releases or
releases around preactjs/preact 10.0.0-beta.1

Don't miss a new preact release

NewReleases is sending notifications on new releases.

Get notifications