Solid Refresh

npm i -D solid-refresh

yarn add -D solid-refresh

pnpm add -D solid-refresh

This project aims to provide HMR for Solid for various bundlers. It comes with a babel plugin and a runtime. Over time I hope to add different bundlers. Today it supports:

Webpack
Parcel
Nollup
Vite (with option bundler: "vite")
Snowpack (with option bundler: "esm")

Setup

Vite

solid-refresh is already built into vite-plugin-solid.

Parcel

You can add the following to .babelrc:

{
  "env": {
    "development": {
      "plugins": [
        ["module:solid-refresh/babel"]
      ]
    }
  }
}

Webpack

Requires the use of babel-loader. Add the following to .babelrc:

{
  "env": {
    "development": {
      "plugins": ["solid-refresh/babel"]
    }
  }
}

Nollup

Requires the use of @rollup/plugin-babel. Add the following to .babelrc:

{
  "env": {
    "development": {
      "plugins": ["solid-refresh/babel"]
    }
  }
}

Snowpack

Requires the use of @snowpack/plugin-babel. Add the following to .babelrc:

{
  "env": {
    "development": {
      "plugins": ["solid-refresh/babel", { "bundler": "esm" }]
    }
  }
}

Other dev servers

wmr - SolidJS is yet to be supported or isn't clear yet. It will use the same config as Snowpack.
rollup-plugin-hot - The library uses almost an ESM HMR-like API however it behaves the same way as Parcel. Supporting this library is still unclear.

How it works

The babel plugin will transform components with matching Pascal-cased names (indicating that they are components). This detection is supported in variable declarations, function declarations and named exports:

// This works
function Foo() {
  return <h1>Hello Foo</h1>;
}

// This also works
const Bar = () => <h1>Hello Bar</h1>;

Anonymous functions with props as the only parameter are also supported.

// This also works
export default function (props) {
  return <h1>Hello Anonymous!</h1>;
}

The components are wrapped and memoized. When the module receives an update, it replaces the old components from the old module with the new components.

Pragma

On a per file basis, use comments at top of file to opt out(change moves up to parent):

/* @refresh skip */

Or force reload:

/* @refresh reload */

`@refresh granular`

By default, components from the old module are replaced with the new ones from the replacement module, which might cause components that hasn't really changed to unmount abruptly.

Adding @refresh granular comment pragma in the file allows components to opt-in to granular replacement: If the component has changed code-wise, it will be replaced, otherwise, it will be retained, which allows unchanged ancestor components to preserve lifecycles.

Limitations

Preserving state: The default mode does not allow preserving state through module replacement. @refresh granular allows this partially.
No HOC support.

edemaine/solid-refresh