preact v10.5.0 Release Notes

Release Date: 2020-09-23 // over 3 years ago
  • ๐Ÿ†• New JSX-runtime functions

    This has been a long time in the making for various virtual-dom based frameworks. Historically JSX was always transpiled to createElement function calls.

    // input\<div\>foobar\</div\>// output, we need to move "foobar" to `props.children`createElement("div, {}, "foobar");
    

    While this has served us well and is very reliable, it has proven to be hard to optimize. Most of the things we do in our createElement function could by done by babel directly, thereby making it smaller and faster. This is very desirable for us as this function is called a lot in any application. It's part of the so-called hot-path.

    ๐Ÿฑ And that's exactly what the new signature does. It removes the need for us to pull out key from props, add back children to props and just makes the implementation simpler. As a nice benefit users won't need to manually import h/createElement anymore ๐ŸŽ‰

    // input\<li key="foo"\>foobar\</li\>// outputjsx("li", { children: "foobar" }, "foo");
    

    Usage with babel:

    // babel.config.jsmodule.exports = {plugins: [["@babel/plugin-transform-react-jsx", {runtime: "automatic", // defaults to classic (classic == createElement calls)importSource: "preact", // NOT preact/jsx-runtime}]]}
    

    ๐Ÿš€ Note that the JSX transformer in TypeScript is a work in progress and will likely be released as part of version 4.1. We're currently running into microsoft/TypeScript#40502 though, so the JSX typings are not found.

    ๐Ÿ”‹ Features

    ๐Ÿ› Bug Fixes

    ๐Ÿšง Maintenance