Preact CLI V3 🎉

Preact CLI version 3 is finally here!

This is a major update that upgrades every piece of the toolchain, including the latest versions of underlying tools - Webpack 4 and Babel 7. It also brings a new documentation site: preactjs.com/cli.

Here are the features:

• Modern JavaScript output
  Modern versions of your JavaScript bundles are automatically generated and delivered to the 90% of browsers that support modern JS. Legacy browsers are still fully supported through selectively added polyfills.

• Critical CSS inlining
  In order to avoid render-blocking network requests, Preact CLI V3 uses Critters to inline critical CSS automatically in production builds.

• Workbox
  This version moves from v2's sw-precache to using Workbox for service worker generation. Along with this, we've also introduced a new API for customizing your service workers without giving up Preact CLI's default configuration. See the Preact CLI Service Worker documentation for more info.

• Partial hydration
  Applications built with Preact CLI are automatically hydrated in stages, allowing your app's "shell" to render while the code and resources necessary for routes are still loading. This ensures parts of the page become interactive as the code that powers them is downloaded.

• Better template and service worker editing
  Every new project now includes template.html and sw.js source files, which you can edit or replace to make changes. Older projects can be upgraded from Preact CLI version 2 by copying these files to the src directory.

• CMS support for prerendering
  The --prerenderUrls command-line argument now accepts a .js file path. Pointing this at a module that exports an async function makes it possible to dynamically fetch data from a CMS or other content source, which is then used to generate and prerender pages:

  export default async () => [
    {
      url: '/',
      data: await readFile('/data/home.json')
    },
    {
      url: '/about',
      data: await readFile('/data/about.json')
    }
  ];

• Built-in prerender data serialization and hydration
  Preact CLI now serializes the data used during --prerenderUrls prerendering, inlining it into the HTML pages. Data is automatically picked up during hydration and passed to your root component, and can also be accessed anywhere in an app using @preact/prerender-data-provider.

• Prefresh-ready!
  Version 3 of Preact CLI also comes with the option of using Prefresh, a new and improved form of Hot Module Replacement built and maintained by the Preact team.

Most importantly
Thanks to all the people who contributed to Preact CLI v3: it wouldn't have happened without you! 😄