@amoutonbrady/vite-plugin-solid

⚡ Vite Plugin Solid

A simple integration to run solid-js with vite

Features

• HMR with minimal configuration
• Drop-in installation as vite plugin
• Minimal bundle size (5.82kb non gzip for a Hello World)
• Support typescript (.js .ts .jsx .tsx) out of the box
• 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#main 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

Usage

Installation

Install vite and vite-plugin-solid as dev dependencies

# with npm
$ npm install -D vite @amoutonbrady/vite-plugin-solid
# with pnpm
$ pnpm add -D vite @amoutonbrady/vite-plugin-solid
# with yarn
$ yarn add -D vite @amoutonbrady/vite-plugin-solid

Add it as plugin to vite.config.ts

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

const config: UserConfig = {
  root: "src",
  outDir: "dist",
  plugins: [solidPlugin()],
  // Vite and Esbuild being opinionated about how to manage JSX,
  // you need to disable it to prevent extra stuff going in your bundle
  // Luckily, vite is still quite fast even skipping Esbuild
  enableEsbuild: false,
};

export default config;

Or vite.config.js

// vite.config.js
import { solidPlugin } from "@amoutonbrady/vite-plugin-solid";

/**
 *  @type {import('vite').UserConfig}
 */
const config = {
  root: "src",
  outDir: "dist",
  plugins: [solidPlugin()],
  // Vite and Esbuild being opinionated about how to manage JSX,
  // you need to disable it to prevent extra stuff going in your bundle
  // Luckily, vite is still quite fast even skipping Esbuild
  enableEsbuild: false,
};

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.

// This variable is mandatory if you want automatic HMR
export const dispose = render(() => App, rootElement);

// The plugin will automatically inject the following snippet :

// HMR stuff, this will be automatically removed during build
// /!\ You need to add "vite" in the "compilerOptions.types" of your tsconfig.json
// if you want to avoid type errors here
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"
  }
}

Plugin options

You can pass options to the plugin via vite.config.(js|ts)

import { solidPlugin } from "@amoutonbrady/vite-plugin-solid";

const options = {
  babel: {
    presets: ["@babel/preset-env"],
  },
};

const config = {
  root: "src",
  outDir: "dist",
  plugins: [solidPlugin(options)],
  enableEsbuild: false,
};

export default config;

For now the only options is to add extra babel config.

Limitations

This is an early version, some things may not work as expected. Please report findings.

• HMR is manual and doesn't hold state on reload
• ESBuild has to be deactivated because of its JSX management which slow downs a bit the reload
• Vite is primarly build for Vue and therefore includes it when installing it

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

• solid-js and vite obviously
• svite - initial inspiration (also based this readme on it)