0
# Vite Plugin Solid
1

2
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.
3

4
## Package Information
5

6
- **Package Name**: vite-plugin-solid
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install -D vite-plugin-solid`
10

11
## Core Imports
12

13
```typescript
14
import solidPlugin from "vite-plugin-solid";
15
import type { Options, ExtensionOptions } from "vite-plugin-solid";
16
```
17

18
For CommonJS:
19

20
```javascript
21
const solidPlugin = require("vite-plugin-solid");
22
```
23

24
## Basic Usage
25

26
```typescript
27
// vite.config.ts
28
import { defineConfig } from "vite";
29
import solidPlugin from "vite-plugin-solid";
30

31
export default defineConfig({
32
  plugins: [solidPlugin()],
33
});
34
```
35

36
## Architecture
37

38
Vite Plugin Solid is built around several key components:
39

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

46
## Capabilities
47

48
### Plugin Factory Function
49

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

52
```typescript { .api }
53
/**
54
 * Creates a Vite plugin for Solid.js integration
55
 * @param options - Optional configuration options
56
 * @returns Vite Plugin object
57
 */
58
function solidPlugin(options?: Partial<Options>): Plugin;
59
```
60

61
**Usage Example:**
62

63
```typescript
64
// Basic usage
65
export default defineConfig({
66
  plugins: [solidPlugin()],
67
});
68

69
// With custom options
70
export default defineConfig({
71
  plugins: [
72
    solidPlugin({
73
      dev: true,
74
      hot: true,
75
      ssr: false,
76
      include: ["src/**/*.{js,jsx,ts,tsx}"],
77
      extensions: ["mdx"],
78
      solid: {
79
        generate: "dom",
80
        hydratable: false,
81
      },
82
    }),
83
  ],
84
});
85
```
86

87
### Type Exports
88

89
Named type exports for TypeScript usage.
90

91
```typescript { .api }
92
export interface ExtensionOptions {
93
  /** Whether extension should be processed with TypeScript */
94
  typescript?: boolean;
95
}
96

97
export interface Options {
98
  /** Files to include (picomatch pattern) */
99
  include?: FilterPattern;
100
  /** Files to exclude (picomatch pattern) */
101
  exclude?: FilterPattern;
102
  /** Inject solid-js/dev in development mode (default: true) */
103
  dev?: boolean;
104
  /** Force SSR code generation (default: false) */
105
  ssr?: boolean;
106
  /** Inject HMR runtime in dev mode (default: true) */
107
  hot?: boolean;
108
  /** Custom file extensions to process (default: undefined) */
109
  extensions?: (string | [string, ExtensionOptions])[];
110
  /** Additional babel transform options (default: {}) */
111
  babel?:
112
    | babel.TransformOptions
113
    | ((source: string, id: string, ssr: boolean) => babel.TransformOptions)
114
    | ((source: string, id: string, ssr: boolean) => Promise<babel.TransformOptions>);
115
  /** Solid-specific JSX compilation options (default: {}) */
116
  solid?: {
117
    /** Remove unnecessary closing tags from templates (default: false) */
118
    omitNestedClosingTags?: boolean;
119
    /** Remove last closing tag from templates (default: true) */
120
    omitLastClosingTag?: boolean;
121
    /** Remove unnecessary quotes from templates (default: true) */
122
    omitQuotes?: boolean;
123
    /** Runtime module name (default: "solid-js/web") */
124
    moduleName?: string;
125
    /** Output mode: "dom" | "ssr" | "universal" (default: "dom") */
126
    generate?: "ssr" | "dom" | "universal";
127
    /** Include hydratable markers (default: false) */
128
    hydratable?: boolean;
129
    /** Enable automatic event delegation on camelCase (default: true) */
130
    delegateEvents?: boolean;
131
    /** Smart conditional detection for boolean expressions and ternaries (default: true) */
132
    wrapConditionals?: boolean;
133
    /** Set current render context on Custom Elements and slots (default: true) */
134
    contextToCustomElements?: boolean;
135
    /** Component exports to auto-import from solid-js (default: ["For","Show","Switch","Match","Suspense","SuspenseList","Portal","Index","Dynamic","ErrorBoundary"]) */
136
    builtIns?: string[];
137
  };
138
}
139

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

145

146
### Advanced Configuration Examples
147

148
**SSR Configuration:**
149
```typescript
150
solidPlugin({
151
  ssr: true,
152
  solid: {
153
    generate: "ssr",
154
    hydratable: true,
155
  },
156
});
157
```
158

159
**Custom Extensions:**
160
```typescript
161
solidPlugin({
162
  extensions: [
163
    "mdx",
164
    ["vue", { typescript: true }],
165
  ],
166
});
167
```
168

169
**Dynamic Babel Configuration:**
170
```typescript
171
solidPlugin({
172
  babel: (source, id, ssr) => ({
173
    presets: [
174
      ["@babel/preset-env", { targets: { node: "current" } }],
175
    ],
176
    plugins: ssr ? [] : ["babel-plugin-jsx-remove-data-test-id"],
177
  }),
178
});
179
```
180

181
**Advanced Solid Options:**
182
```typescript
183
solidPlugin({
184
  solid: {
185
    moduleName: "solid-js/universal",
186
    generate: "universal",
187
    delegateEvents: false,
188
    contextToCustomElements: false,
189
    builtIns: ["For", "Show", "Switch"],
190
  },
191
});
192
```
193

194
## Testing Configuration
195

196
The plugin automatically configures Vitest for Solid.js testing:
197

198
```typescript
199
// Automatic configuration applied:
200
{
201
  test: {
202
    environment: "jsdom", // if not SSR
203
    server: { 
204
      deps: { external: [/solid-js/] } 
205
    },
206
    setupFiles: ["@testing-library/jest-dom"], // if available
207
  }
208
}
209
```
210

211
## Vite Integration Details
212

213
The plugin implements these Vite plugin hooks:
214

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

222
## Error Handling
223

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

226
- Invalid JSX syntax
227
- Missing TypeScript configuration for .tsx files
228
- Babel preset conflicts
229
- File extension mismatches
230

231
## Compatibility
232

233
- **Vite**: 3.x, 4.x, 5.x, 6.x, 7.x
234
- **Solid.js**: 1.7.2+
235
- **Node.js**: 14.18.0+
236
- **TypeScript**: Full support for .tsx files