CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-vite-plugin-solid

Solid.js integration plugin for Vite 3/4/5/6 with HMR, TypeScript support, and minimal configuration

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

index.mddocs/

Vite Plugin Solid

Vite Plugin Solid is the official Vite integration plugin for Solid.js that provides seamless development experience with Hot Module Replacement (HMR), TypeScript support, and zero configuration setup. It transforms JSX/TSX files using Babel with Solid-specific presets and handles development dependencies for optimal performance.

Package Information

  • Package Name: vite-plugin-solid
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install -D vite-plugin-solid

Core Imports

import solidPlugin from "vite-plugin-solid";
import type { Options, ExtensionOptions } from "vite-plugin-solid";

For CommonJS:

const solidPlugin = require("vite-plugin-solid");

Basic Usage

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

export default defineConfig({
  plugins: [solidPlugin()],
});

Architecture

Vite Plugin Solid is built around several key components:

  • Babel Integration: Uses babel-preset-solid for JSX transformation and solid-refresh for HMR
  • File Processing: Handles .jsx, .tsx, and custom extensions with TypeScript support detection
  • Vite Plugin Hooks: Implements Vite plugin lifecycle methods for configuration, resolution, and transformation
  • SSR Support: Configurable server-side rendering with hydration markers
  • Development Optimization: Automatic solid-js/dev injection and framework package crawling

Capabilities

Plugin Factory Function

Creates a Vite plugin instance for Solid.js integration with optional configuration.

/**
 * Creates a Vite plugin for Solid.js integration
 * @param options - Optional configuration options
 * @returns Vite Plugin object
 */
function solidPlugin(options?: Partial<Options>): Plugin;

Usage Example:

// Basic usage
export default defineConfig({
  plugins: [solidPlugin()],
});

// With custom options
export default defineConfig({
  plugins: [
    solidPlugin({
      dev: true,
      hot: true,
      ssr: false,
      include: ["src/**/*.{js,jsx,ts,tsx}"],
      extensions: ["mdx"],
      solid: {
        generate: "dom",
        hydratable: false,
      },
    }),
  ],
});

Type Exports

Named type exports for TypeScript usage.

export interface ExtensionOptions {
  /** Whether extension should be processed with TypeScript */
  typescript?: boolean;
}

export interface Options {
  /** Files to include (picomatch pattern) */
  include?: FilterPattern;
  /** Files to exclude (picomatch pattern) */
  exclude?: FilterPattern;
  /** Inject solid-js/dev in development mode (default: true) */
  dev?: boolean;
  /** Force SSR code generation (default: false) */
  ssr?: boolean;
  /** Inject HMR runtime in dev mode (default: true) */
  hot?: boolean;
  /** Custom file extensions to process (default: undefined) */
  extensions?: (string | [string, ExtensionOptions])[];
  /** Additional babel transform options (default: {}) */
  babel?:
    | babel.TransformOptions
    | ((source: string, id: string, ssr: boolean) => babel.TransformOptions)
    | ((source: string, id: string, ssr: boolean) => Promise<babel.TransformOptions>);
  /** Solid-specific JSX compilation options (default: {}) */
  solid?: {
    /** Remove unnecessary closing tags from templates (default: false) */
    omitNestedClosingTags?: boolean;
    /** Remove last closing tag from templates (default: true) */
    omitLastClosingTag?: boolean;
    /** Remove unnecessary quotes from templates (default: true) */
    omitQuotes?: boolean;
    /** Runtime module name (default: "solid-js/web") */
    moduleName?: string;
    /** Output mode: "dom" | "ssr" | "universal" (default: "dom") */
    generate?: "ssr" | "dom" | "universal";
    /** Include hydratable markers (default: false) */
    hydratable?: boolean;
    /** Enable automatic event delegation on camelCase (default: true) */
    delegateEvents?: boolean;
    /** Smart conditional detection for boolean expressions and ternaries (default: true) */
    wrapConditionals?: boolean;
    /** Set current render context on Custom Elements and slots (default: true) */
    contextToCustomElements?: boolean;
    /** Component exports to auto-import from solid-js (default: ["For","Show","Switch","Match","Suspense","SuspenseList","Portal","Index","Dynamic","ErrorBoundary"]) */
    builtIns?: string[];
  };
}

// External types from dependencies
type FilterPattern = (string | RegExp)[] | string | RegExp | null; // from 'vite'
// babel.TransformOptions is from '@babel/core' package

Advanced Configuration Examples

SSR Configuration:

solidPlugin({
  ssr: true,
  solid: {
    generate: "ssr",
    hydratable: true,
  },
});

Custom Extensions:

solidPlugin({
  extensions: [
    "mdx",
    ["vue", { typescript: true }],
  ],
});

Dynamic Babel Configuration:

solidPlugin({
  babel: (source, id, ssr) => ({
    presets: [
      ["@babel/preset-env", { targets: { node: "current" } }],
    ],
    plugins: ssr ? [] : ["babel-plugin-jsx-remove-data-test-id"],
  }),
});

Advanced Solid Options:

solidPlugin({
  solid: {
    moduleName: "solid-js/universal",
    generate: "universal",
    delegateEvents: false,
    contextToCustomElements: false,
    builtIns: ["For", "Show", "Switch"],
  },
});

Testing Configuration

The plugin automatically configures Vitest for Solid.js testing:

// Automatic configuration applied:
{
  test: {
    environment: "jsdom", // if not SSR
    server: { 
      deps: { external: [/solid-js/] } 
    },
    setupFiles: ["@testing-library/jest-dom"], // if available
  }
}

Vite Integration Details

The plugin implements these Vite plugin hooks:

  • config: Configures resolve conditions, optimizeDeps, and test settings
  • configEnvironment: Sets environment-specific resolve conditions (Vite 6+)
  • configResolved: Determines HMR necessity
  • resolveId: Handles solid-refresh runtime resolution
  • load: Provides solid-refresh runtime code
  • transform: Transforms JSX/TSX files with Babel

Error Handling

The plugin handles transformation errors gracefully and provides detailed error information during development. Common issues include:

  • Invalid JSX syntax
  • Missing TypeScript configuration for .tsx files
  • Babel preset conflicts
  • File extension mismatches

Compatibility

  • Vite: 3.x, 4.x, 5.x, 6.x, 7.x
  • Solid.js: 1.7.2+
  • Node.js: 14.18.0+
  • TypeScript: Full support for .tsx files

docs

index.md

tile.json