preact-cli@3.0.4

Patch Changes

• 6670ba0 #1461 Thanks @ForsakenHarmony! - fix: await copying of files in create command

• 30fb1fc #1478 Thanks @rschristian! - No longer copies 'sw-debug.js' to output directory on prod builds. No functional changes, as it was not used.

• 2c53b0a #1438 Thanks @VanTanev! - fix: allow an async component to return null rendering

• fce7e7a #1460 Thanks @ForsakenHarmony! - chore: remove preact-compat as it's unused

• ab84275 #1434 Thanks @rschristian! - This disable SSR size tracking. This stops size-plugin-ssr.json from being generated and stops file sizes from being reported to the developer.

• 67fafc8 #1467 Thanks @prateekbh! - Allow only valid options for commands.

preact-cli@3.0.2

Patch Changes

• 07c9a9c #1413 Thanks @JoviDeCroock! - patch cleanFilename to also fix typescript and jsx files

• c136ac4 #1207 Thanks @JoviDeCroock! - Fix the prefresh integration, using --refresh should now correctly enable fast-refresh

• ff79f0b #1406 Thanks @ForsakenHarmony! - chore: add changesets

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! 😄

bugfixes

• Fixes typescript template build issue

async-loader fixes 🎉

• Async Loader fix for Preact X #1309 - @developit
• Normalize pre-render urls #1307 - @BartWaardenburg
• Conditionally execute async-loader preload callback #1276 - @impronunciable

Pre-rendering Fixes

• Fixes flash of content on hydration #1265 - @reznord @developit
• CSS preloading in Firefox #1235 - @developit @prateekbh
• Fix no-sw log, #1263 - @prateekbh
• Less loader options bugfix #1101 - @pl12133
• Security fixes for pre-rendered data #1232 - @JoviDeCroock @prateekbh
• Apple-touch-icon router bug #1227 - @ryanchristian4427

Native URL bug fix

• Fixes native-url bug #1203, thanks @ryanchristian4427

prefresh + minimal sw API 🎉

• Uses prefresh for HMR - @JoviDeCroock
• Introduces minimal SW API - @prateekbh
• Fixes support for custom babelrc

Seamless integration with Critters

• This RC makes sure that CSS from route specific CSS is also inlined in the markup
• Ensures no content jump when webpack loads the complete CSS files over the network.

3.0.0-rc.1

Whats new in 3.0

• Webpack 4
• Modern JavaScript builds
• CSS Chunking
• Inline critical CSS
• Out of the box Typescript support
• Service workers with webpack 4
• Brotli support

Webpack4

The underlying build is now done by Webpack4 instead of Webpack3. This might break your preact.config.js if you added some plugins/loaders which only supported Webpack3.

Modern JavaScript build.

By default the --esm flag is enabled, which means all the files are bundled in ES5 and ES6 mode and delivered with module/nomodule script.

CSS Chunking

While JavaScript was always code splitted, with this version of preact-CLI even CSS will be automatically code splitted for every route.

Inline critical CSS

Critical CSS for every pre-rendered page will be inserted in the head for better first meaningful paint. This is control via a flag --critical-css

Out of the box Typescript support

With version 3, we have a new template named Typescript. You can do preact create Typescript foo to create a Typescript project.

Service workers with workbox

We are dropping sw-precache in favor of workbox. The webpack config also is using the workbox-webpack-plugin. This allows devs to take advantage of advanced modules like background-sync, offline analytics etc.

Brotli support

preact-CLI can generate brotli bundles for you if you enable it using --brotli. The service worker can then intercept the first party JavaScript request and respond with brotli files instead.
Note: Add content-encoding: br header to brotli files is still hosting/dev's responsibility.

Bug fixed

• HTML template is now a part of the scaffolded code. Any template.html present at the root directory will be used to generate index.html.
• pre-render.js can now return a promise which can be used to integrate preact-cli with any CMS of your choice
• pre-render.js/json can now give any number of props which will be used to pre render the routes and also will be passed to the route component while pre rendering.