Prefresh

Fast-refresh for Preact!

Integrations

• @web/dev-server
• CRA with prefresh
• gatsby
• next
• nollup
• preact-cli (--refresh)
• snowpack
• vite
• webpack

Writing your own integration

Best practices

Recognition

We need to be able to recognise your components, this means that components should start with a capital letter and hook should start with use followed by a capital letter. This allows the Babel plugin to effectively recognise these.

Do note that a component as seen below is not named.

export default () => {
  return <p>Want to refresh</p>;
};

Instead do:

const Refresh = () => {
  return <p>Want to refresh</p>;
};

export default Refresh;

When you are working with HOC's be sure to lift up the displayName so we can recognise it as a component.

Usage in IE11

If you want to use @prefresh/webpack or @prefresh/next with IE11, you'll need to transpile the @prefresh/core and @prefresh/utils packages.

For Next.js you can install next-transpile-modules and add the following code snippet to your next.config.js.

const withTranspiledModules = require('next-transpile-modules')([
  '@prefresh/core',
  '@prefresh/utils',
]);

module.exports = withTM({
  /* regular next.js config options here */
});