Prefresh-vite

Setup

npm i -s @prefresh/vite
## OR
yarn add @prefresh/vite

Then add it to your vite.config.js config:

import prefresh from '@prefresh/vite';

export default {
  plugins: [prefresh()],
};

@prefresh/vite configures Vite's Oxc JSX transform for Preact and composes @prefresh/rolldown internally. Babel is only used as a selective fallback when you pass parserPlugins.

Options

The plugin accepts two options include & exclude which are used in the @rollup/pluginutils.createFilter to filter out files or include them.

The plugin also accepts the addition of parserPlugins. Providing parserPlugins opts that file transform back into the Babel-based path, similar to how @preact/preset-vite only enables Babel when that path is requested.

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 refresh transform 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.