Skip to main content

Gasket v6.0

· 4 min read
Kawika Bader
Kawika Bader
Senior Engineer

We have released Gasket 6!​

via GIPHY

The core updates encompass a few main themes:

  • Decoupling from Redux
  • Support for Next.js 10
  • Simplification of Intl implementation
  • Improved Static Site Generation Support
  • Webpack 5 Support
  • Legacy Code Cleanup

Decoupling from Redux​

To make Gasket less prescriptive, we have made efforts to decouple the dependency on Redux across our packages and plugins. This does not mean that we have removed support for Redux; only that we wish to allow space for other options.

Gasket 6 introduces a new package called @gasket/data. This package makes accessing server-side data and configurations from the client possible without Redux.

Check out our @gasket/data package docs!

Support for Next.js 10​

We have also tuned up our packages and plugins to work with Next.js 10!

We have created a new @gasket/nextjs package, which will inject a GasketData script into the DOM. This script is consumed by the @gasket/data package to make server-side data available to the browser.

With this update, we have also removed built-in support for next-routes. Instead, we encourage using Next.js default page routing.

Simplify Intl Implementation​

Intl Plugin​

The @gasket/plugin-intl plugin has been updated to no longer require Redux as a dependency. It has been simplified to use the gasket data package instead.

Also, locale files are now served from the public/locales/ folder by default. However, you are able to configure this location in your gasket.config.js with the intl.localesDir option. This enables source locale files to be easily deployed to a CDN along with other static content. If you wish to continue serving the locale files from your app, this can be enabled using the intl.serveStatic config options.

If your app is using locale files from NPM module dependencies, this is an opt-in feature now, which can be enabled in the Gasket config using the intl.modules config option.

Intl Package​

To clarify the purpose of this Gasket Intl package and differentiate it from any future tie-in packages (Vue, Svelte, etc), it has been renamed to @gasket/react-intl.

The @gasket/react-intl package has also been updated with simplified locale paths, and the removal of server-rendered pages with preloaded locale files.

Refer to the @gasket/react-intl docs for more details.

Improved Static Site Generation Support​

To improve static site generation support, we have updated a few of our lifecycle signatures with a new context object. The purpose for this is to allow these lifecycle methods the option to be run at build time without a request object, or at run time, when the request object is present.

Webpack 5 Support​

Webpack 5 support is now available! We have tuned all our plugins and packages to support Webpack 5.

With this update, we have removed the generated Webpack config defaults, as the previously prescribed config options have changed. You can find more info about configuring Node.js options with Webpack 5 on the webpack website.

Legacy Code Cleanup​

In an effort to keep the Gasket code base clear and concise, we have opted to remove fallback naming support. This will require all plugins and packages to be aligned to the project-type prefixed naming convention. This formatting allows user plugins to be referenced with short names and will help avoid collisions.

Fetch​

Gasket is no longer providing a browser ponyfill for the fetch API. If you are supporting older browsers that don't have fetch, please bring your own polyfill.

You can find more info about various polyfills at polyfill.io.

Upgrading to Gasket 6​

If you wish to upgrade an existing application to Gasket 6, we have created a comprehensive upgrade guide to walk you through the steps to upgrade!