@amoutonbrady/vite-plugin-solid NPM

⚡ 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.

const rootEl = document.getElementById("app");
const dispose = render(() => App, rootEl);

// 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();
    rootEl.textContent = "";
  });
}

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.

Example

You can checkout the playground

More example will come to full proof the plugin

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".