Prefresh-snowpack


Setup

If you're using the preact-template you'll get this behavior
out of the box, if you don't or are using the old version fo it you'll have to follow these instructions.

``
npm i --save-dev @prefresh/snowpack


OR


yarn add --dev @prefresh/snowpack
`

You'll have to add a few things, as seen in this PR.

Add @prefresh/babel-plugin to your babel.config.json:

`json
{
"presets": [
[
"@babel/preset-react",
{
"pragma": "h",
"pragmaFrag": "Fragment"
}
],
"@babel/preset-typescript"
],
"plugins": ["@babel/plugin-syntax-import-meta", "@prefresh/babel-plugin"]
}
`

After adding it to your babel-config you'll have to make sure your snowpack.config.json contains both plugin-babel and @prefresh/snowpack

`json
{
"plugins": ["@snowpack/plugin-babel", "@prefresh/snowpack"]
}
`

Best practices

$3

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.

`jsx
export default () => {
return

Want to refresh

;
};
`

Instead do:

`jsx
const Refresh = () => {
return

Want to refresh

;
};

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.