vite-plugin-solid
    TypeScript icon, indicating that this package has built-in type declarations

    2.2.3 • Public • Published

    Solid Vite Plugin

    vite-plugin-solid

    A simple integration to run solid-js with vite

    HMR gif demonstrationdemodemodemo

    Got a question? / Need help?

    Join solid discord and check the troubleshooting section to see if your question hasn't been already answered.

    Features

    • HMR with no configuration needed
    • Drop-in installation as a vite plugin
    • Minimal bundle size
    • Support typescript (.tsx) out of the box
    • Support code splitting out of the box

    Requirements

    This module 100% esm compatible. As per this document it is strongly recommended to have at least the version 14.13.0 of node installed.

    You can check your current version of node by typing node -v in your terminal. If your version is below that one version I'd encourage you to either do an update globally or use a node version management tool such as volta or nvm.

    Quickstart

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

    $ npx degit solidjs/templates/js my-solid-project
    $ cd my-solid-project
    $ npm install # or pnpm install or yarn install
    $ npm run start # 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.js

    // vite.config.ts
    import { defineConfig } from 'vite';
    import solidPlugin from 'vite-plugin-solid';
    
    export default defineConfig({
      plugins: [solidPlugin()],
    });

    Run

    Just use regular vite or vite build commands

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

    API

    options

    • Type: Object
    • Default: {}

    options.dev

    • Type: Boolean
    • Default: true

    This will inject solid-js/dev in place of solid-js in dev mode. Has no effect in prod. If set to false, it won't inject it in dev. This is useful for extra logs and debug.

    options.hot

    • Type: Boolean
    • Default: true

    This will inject HMR runtime in dev mode. Has no effect in prod. If set to false, it won't inject the runtime in dev.

    options.ssr

    • Type: Boolean
    • Default: false

    This will force SSR code in the produced files. This is experiemental and mostly not working yet.

    options.babel

    • Type: Babel.TransformOptions
    • Default: {}

    Pass any additional babel transform options. Those will be merged with the transformations required by Solid.

    options.solid

    Pass any additional babel-plugin-jsx-dom-expressions. They will be merged with the defaults sets by babel-preset-solid.

    options.typescript

    Pass any additional @babel/preset-typescript.

    options.extensions

    • Type: (string, [string, { typescript: boolean }])[]
    • Default: []

    An array of custom extension that will be passed through the solid compiler. By default, the plugin only transform jsx and tsx files. This is useful if you want to transform mdx files for example.

    Note on HMR

    Starting from version 1.1.0, this plugin handle automatic HMR via solid-refresh.

    At this stage it's still early work but provide basic HMR. In order to get the best out of it there are couple of things to keep in mind:

    • When you modify a file every state below this component will be reset to default state (including the current file). The state in parent component is preserved.

    • The entrypoint can't benefit from HMR yet and will force a hard reload of the entire app. This is still really fast thanks to browser caching.

    If at least one of this point is blocking to you, you can revert to the old behavior but opting out the automatic HMR and placing the following snippet in your entry point:

    const dispose = render(() => <App />, document.body);
    
    if (import.meta.hot) {
      import.meta.hot.accept();
      import.meta.hot.dispose(dispose);
    }

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

    • If one of your dependency spit out React code instead of Solid that means that they don't expose JSX properly. To get around it, you might want to manually exclude it from the dependencies optimization

    • If you are trying to make directives work and they somehow don't try setting the options.typescript.onlyRemoveTypeImports option to true

    Migration from v1

    The master branch now target vite 2.

    The main breaking change from previous version 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.

    Credits

    Install

    npm i vite-plugin-solid

    DownloadsWeekly Downloads

    1,737

    Version

    2.2.3

    License

    MIT

    Unpacked Size

    63.8 kB

    Total Files

    7

    Last publish

    Collaborators

    • ryansolid
    • amoutonbrady
    • davedbase