@amoutonbrady/vite-plugin-solid

solid-js integration plugin for vite

Usage no npm install needed!

<script type="module">
  import amoutonbradyVitePluginSolid from 'https://cdn.skypack.dev/@amoutonbrady/vite-plugin-solid';
</script>

README

⚡ vite-plugin-solid

A simple integration to run solid-js with vite

Disclaimer

This targets vite 2 (which is in beta right now). To checkout vite 1 support, check out the vite-1.x branch.

The main breaking change is that the package has been renamed from @amoutonbrady/vite-plugin-solid to vite-plugin-solid.

For other breaking changes, check the migration guide of vite.

Features

  • HMR with minimal configuration
  • Drop-in installation as vite plugin
  • Minimal bundle size (5.99kb non gzip for a Hello World)
  • Support typescript (.jsx .tsx) out of the box, even when exported as source in the node_modules
  • Support code splitting out of the box

Quickstart

You can use the vite-template-solid starter templates similar to CRA:

$ npx degit amoutonbrady/vite-template-solid/js my-project
$ cd my-project
$ npm install # or pnpm install or yarn install
$ npm run dev # starts dev-server with hot-module-reloading
$ npm run build # builds to /dist

Installation

Install vite, vite-plugin-solid and babel-preset-solid as dev dependencies. Install solid-js as dependency.

You have to install those so that you are in control to which solid version is used to compile your code.

# with npm
$ npm install -D vite vite-plugin-solid babel-preset-solid
$ npm install solid-js

# with pnpm
$ pnpm add -D vite vite-plugin-solid babel-preset-solid
$ pnpm add solid-js

# with yarn
$ yarn add -D vite vite-plugin-solid babel-preset-solid
$ yarn add solid-js

Add it as plugin to vite.config.ts

// vite.config.ts
import { UserConfig } from "vite";
import { solidPlugin } from "vite-plugin-solid";

const config: UserConfig = {
  plugins: [solidPlugin()],
};

export default config;

Or vite.config.js

// vite.config.js
import solidPlugin from "vite-plugin-solid";

/**
 *  @type {import('vite').UserConfig}
 */
const config = {
  plugins: [solidPlugin()],
};

export default config;

Finally you have to add a bit of code to your entry point to activate HMR. This might be handled automatically at some point by the plugin but for now it's manual.

NB: This is actually a partial HMR, it doesn't retain any state, it just reload the page without reloading the page...

const dispose = render(() => App, rootElement);

// HMR stuff, this will be automatically removed during build
if (import.meta.hot) {
  import.meta.hot.accept();
  import.meta.hot.dispose(dispose);
}

Run

Just use regular vite or vite build commands

{
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  }
}

Troubleshooting

It appears that Webstorm generate some weird triggers when saving a file. In order to prevent that you can follow this thread and disable the "Safe Write" option in "Settings | Appearance & Behavior | System Settings".

Got a question? / Need help?

Join solid discord

Credits