0
# SolidJS
1

2
SolidJS is a declarative JavaScript library for building user interfaces with fine-grained reactivity. It compiles templates to real DOM nodes and updates them with fine-grained reactions instead of using a Virtual DOM. SolidJS provides reactive state management through signals, efficient rendering through compile-time optimizations, and a component-based architecture for building modern web applications.
3

4
## Package Information
5

6
- **Package Name**: solid-js
7
- **Package Type**: npm
8
- **Language**: TypeScript/JavaScript
9
- **Installation**: `npm install solid-js`
10
- **Version**: 1.9.9
11

12
## Core Imports
13

14
```typescript
15
import { createSignal, createEffect, createMemo } from "solid-js";
16
import { createStore } from "solid-js/store";
17
import { render } from "solid-js/web";
18
```
19

20
For CommonJS:
21

22
```javascript
23
const { createSignal, createEffect, createMemo } = require("solid-js");
24
const { createStore } = require("solid-js/store");
25
const { render } = require("solid-js/web");
26
```
27

28
## Basic Usage
29

30
```typescript
31
import { createSignal, createEffect } from "solid-js";
32
import { render } from "solid-js/web";
33

34
function Counter() {
35
  const [count, setCount] = createSignal(0);
36
  const increment = () => setCount(count() + 1);
37

38
  createEffect(() => {
39
    console.log("Count changed to:", count());
40
  });
41

42
  return (
43
    <div>
44
      <p>Count: {count()}</p>
45
      <button onClick={increment}>Increment</button>
46
    </div>
47
  );
48
}
49

50
render(() => <Counter />, document.getElementById("app"));
51
```
52

53
## Architecture
54

55
SolidJS is built around several key architectural components:
56

57
- **Fine-grained Reactivity**: Uses signals for state management with automatic dependency tracking
58
- **Compile-time Optimizations**: Templates are compiled to optimized DOM operations
59
- **No Virtual DOM**: Direct DOM updates through reactive computations
60
- **Component System**: Function-based components with props and lifecycle hooks
61
- **Store System**: Nested reactive state management for complex data structures
62
- **Multiple Rendering Targets**: Web, SSR, and universal rendering capabilities
63

64
## Capabilities
65

66
### Reactive Primitives
67

68
Core reactive system including signals, effects, and memos for building reactive applications with automatic dependency tracking and fine-grained updates.
69

70
```typescript { .api }
71
function createSignal<T>(value?: T, options?: SignalOptions<T>): Signal<T>;
72
function createEffect<T>(fn: EffectFunction<T>, value?: T, options?: EffectOptions): void;
73
function createMemo<T>(fn: EffectFunction<T>, value?: T, options?: MemoOptions<T>): Accessor<T>;
74
```
75

76
[Reactive Primitives](./reactive-primitives.md)
77

78
### Component System
79

80
Function-based component system with props utilities, lifecycle hooks, and component creation functions for building modular UI components.
81

82
```typescript { .api }
83
type Component<P = {}> = (props: P) => JSX.Element;
84
function createComponent<T extends Component<any>>(Comp: T, props: ComponentProps<T>): JSX.Element;
85
function lazy<T extends Component<any>>(fn: () => Promise<{ default: T }>): T & { preload: () => Promise<{ default: T }> };
86
```
87

88
[Component System](./component-system.md)
89

90
### Control Flow
91

92
Built-in control flow components for conditional rendering, list rendering, and error boundaries with optimized updates and proper cleanup.
93

94
```typescript { .api }
95
function Show<T>(props: { when: T | Accessor<T>; fallback?: JSX.Element; children: JSX.Element | ((item: NonNullable<T>) => JSX.Element) }): JSX.Element;
96
function For<T, U>(props: { each: T[] | Accessor<T[]>; children: (item: T, index: Accessor<number>) => U; fallback?: JSX.Element }): JSX.Element;
97
function ErrorBoundary(props: { fallback: (err: Error, reset: () => void) => JSX.Element; children: JSX.Element }): JSX.Element;
98
```
99

100
[Control Flow](./control-flow.md)
101

102
### Resources and Async
103

104
Resource system for handling asynchronous data loading with built-in loading states, error handling, and automatic refetching capabilities.
105

106
```typescript { .api }
107
function createResource<T, R = unknown>(
108
  fetcher: ResourceFetcher<true, T, R>,
109
  options?: ResourceOptions<T, true>
110
): ResourceReturn<T, R>;
111

112
function createResource<T, S, R = unknown>(
113
  source: ResourceSource<S>,
114
  fetcher: ResourceFetcher<S, T, R>,
115
  options?: ResourceOptions<T, S>
116
): ResourceReturn<T, R>;
117
```
118

119
[Resources and Async](./resources-async.md)
120

121
### Context and Scoping
122

123
Context API for passing data through the component tree and scoping utilities for managing reactive ownership and cleanup.
124

125
```typescript { .api }
126
function createContext<T>(defaultValue?: T): Context<T>;
127
function useContext<T>(context: Context<T>): T;
128
function createRoot<T>(fn: (dispose: () => void) => T, detachedOwner?: Owner): T;
129
```
130

131
[Context and Scoping](./context-scoping.md)
132

133
### Store Management
134

135
Nested reactive state management system with proxy-based stores, mutations, and advanced reconciliation for managing complex application state.
136

137
```typescript { .api }
138
function createStore<T extends object = {}>(
139
  ...[store, options]: {} extends T
140
    ? [store?: T | Store<T>, options?: { name?: string }]
141
    : [store: T | Store<T>, options?: { name?: string }]
142
): [get: Store<T>, set: SetStoreFunction<T>];
143
```
144

145
[Store Management](./store-management.md)
146

147
### Web Rendering
148

149
DOM rendering utilities, web components, and hydration functions for building web applications with server-side rendering support.
150

151
```typescript { .api }
152
function render(code: () => JSX.Element, element: MountableElement): () => void;
153
function hydrate(fn: () => JSX.Element, node: MountableElement): () => void;
154
function Portal(props: { mount?: Node; useShadow?: boolean; isSVG?: boolean; children: JSX.Element }): JSX.Element;
155
```
156

157
[Web Rendering](./web-rendering.md)
158

159
## Types
160

161
### Core Types
162

163
```typescript { .api }
164
type Accessor<T> = () => T;
165
type Setter<T> = ((prev?: T) => T) | T;
166
type Signal<T> = [get: Accessor<T>, set: Setter<T>];
167

168
interface SignalOptions<T> {
169
  equals?: false | ((prev: T, next: T) => boolean);
170
  name?: string;
171
  internal?: boolean;
172
}
173

174
interface EffectOptions {
175
  name?: string;
176
}
177

178
interface MemoOptions<T> extends EffectOptions {
179
  equals?: false | ((prev: T, next: T) => boolean);
180
}
181
```
182

183
### Component Types
184

185
```typescript { .api }
186
type Component<P = {}> = (props: P) => JSX.Element;
187
type VoidComponent<P = {}> = Component<VoidProps<P>>;
188
type ParentComponent<P = {}> = Component<ParentProps<P>>;
189
type FlowComponent<P, C> = Component<FlowProps<P, C>>;
190

191
type VoidProps<P> = P & { children?: never };
192
type ParentProps<P> = P & { children?: JSX.Element };
193
type FlowProps<P, C> = P & { children: C };
194
```
195

196
### Resource Types
197

198
```typescript { .api }
199
type Resource<T> = ResourceReturn<T>[0];
200
type ResourceActions<T> = ResourceReturn<T>[1];
201
type ResourceReturn<T> = [
202
  resource: () => T | undefined,
203
  actions: {
204
    mutate: Setter<T | undefined>;
205
    refetch: (info?: unknown) => T | Promise<T> | undefined | null;
206
  }
207
];
208

209
type ResourceFetcher<S, T> = (
210
  source: S,
211
  info: ResourceFetcherInfo<T>
212
) => T | Promise<T>;
213

214
interface ResourceOptions<T, S = unknown> {
215
  initialValue?: T;
216
  name?: string;
217
  deferStream?: boolean;
218
  ssrLoadFrom?: "initial" | "server";
219
  storage?: (init?: T) => [Accessor<T | undefined>, Setter<T | undefined>];
220
  onHydrated?: (k: S | undefined, info: ResourceFetcherInfo<T>) => void;
221
}
222
```
223

224
### Context Types
225

226
```typescript { .api }
227
interface Context<T> {
228
  id: symbol;
229
  Provider: ContextProviderComponent<T>;
230
  defaultValue: T;
231
}
232

233
type ContextProviderComponent<T> = Component<{
234
  value: T;
235
  children: JSX.Element;
236
}>;
237
```
238

239
### Store Types
240

241
```typescript { .api }
242
type Store<T> = T;
243
type StoreNode = string | number | bigint | boolean | symbol | object | null | undefined;
244

245
interface SetStoreFunction<T> {
246
  (...args: [T] | [SetterValue<T>]): void;
247
  <K1 extends keyof T>(
248
    key: K1,
249
    ...args: [T[K1]] | [SetterValue<T[K1]>]
250
  ): void;
251
  // Additional overloads for nested paths...
252
}
253
```