solid-js

Active contributors: Ryan Carniato, Damian Tarnawski, Joe Pea

solid-js is the package that publishes everything most apps consume. Its source lives in packages/solid/ and it ships seven entry points to npm.

Purpose

solid-js is a single npm package with a multi-entry public surface:

• The root entry exposes the reactive runtime and shared component types.
• solid-js/web exposes the browser DOM renderer and SSR functions (the right one is selected by export conditions).
• solid-js/store exposes the proxy-based reactive store.
• solid-js/web/storage exposes provideRequestEvent for SSR request scoping.
• solid-js/h and solid-js/html expose non-JSX renderers.
• solid-js/universal exposes createRenderer for custom backends.

All seven entries share the same package version (packages/solid/package.json version field — currently 1.9.12). They are bundled together by packages/solid/rollup.config.js (16 bundles), and their TypeScript types are emitted into types/, web/types/, store/types/, etc.

Directory layout

packages/solid/
├── README.md
├── CHANGELOG.md
├── package.json                # version, exports map, scripts
├── rollup.config.js            # 16-bundle Rollup config (single source of truth)
├── babel.config.cjs            # test-mode Babel config (jsx-dom-expressions)
├── vite.config.mjs             # Vitest config + alias resolution
├── tsconfig*.json              # build / test type configs
├── jsx-runtime.d.ts            # tiny shim that re-exports JSX types
├── src/                        # root entry source
│   ├── index.ts                # public re-exports
│   ├── reactive/               # signal.ts, scheduler.ts, observable.ts, array.ts
│   ├── render/                 # component.ts, flow.ts, Suspense.ts, hydration.ts
│   └── server/                 # SSR reactive stub + rendering
├── web/                        # solid-js/web entry
│   ├── src/                    # browser DOM renderer
│   ├── server/                 # SSR renderer (uses seroval)
│   ├── storage/                # solid-js/web/storage entry
│   └── package.json            # tells bundlers about ./web exports
├── store/                      # solid-js/store entry
│   ├── src/                    # store.ts, mutable.ts, modifiers.ts, server.ts
│   └── package.json
├── h/                          # solid-js/h entry (HyperScript)
├── html/                       # solid-js/html entry (tagged template)
├── universal/                  # solid-js/universal entry (custom renderer)
├── test/                       # vitest spec, bench, and type-test files
└── bench/                      # standalone benchmarks

The internal package.json files in web/, store/, web/storage/, h/, html/, and universal/ exist solely so that bundlers and Node's package-exports resolver pick up the right dist/ entry points when consumers do import "solid-js/web".

Public re-exports at the root

packages/solid/src/index.ts is a re-export hub. It surfaces:

• All reactive primitives from ./reactive/signal.js (createSignal, createMemo, createEffect, createRoot, createResource, createContext, useContext, untrack, batch, on, onMount, onCleanup, onError, catchError, getOwner, runWithOwner, getListener, startTransition, useTransition, …).
• All public types (Accessor, Setter, Signal, Resource, Component, Owner, Transition, …).
• Everything from ./reactive/observable.js (observable, from).
• Everything from ./reactive/scheduler.js (requestCallback, cancelCallback).
• Everything from ./reactive/array.js (mapArray, indexArray).
• Everything from ./render/index.js (createComponent, mergeProps, splitProps, <For>, <Index>, <Show>, <Switch>, <Match>, <Suspense>, <SuspenseList>, <ErrorBoundary>, lazy, createUniqueId, enableScheduling, enableHydration, sharedConfig).
• The dev-only DEV object (gated by IS_DEV).
• A multi-instance warning that fires in dev when two copies of solid-js are loaded into the same realm.

Concretely, the file is short — about 90 lines — and serves as the package's public API contract. If a primitive isn't named in this file, it is not part of the supported solid-js root surface.

Key abstractions

Type / function	Source	Description
Signal<T>	packages/solid/src/reactive/signal.ts	Tuple [Accessor<T>, Setter<T>] returned by createSignal.
Computation<Init, Next>	packages/solid/src/reactive/signal.ts	Internal node type for memos / effects / render effects.
Owner	packages/solid/src/reactive/signal.ts	Lexical context that owns nested computations and cleanup callbacks.
Resource<T>	packages/solid/src/reactive/signal.ts	Async accessor with loading / error / latest / state properties.
Component<P> / ParentComponent<P> / FlowComponent<P, C>	packages/solid/src/render/component.ts	Function-component types for plain, child-accepting, and flow-control components.
JSX namespace	src/jsx.d.ts (copied from dom-expressions)	Element/intrinsic types consumed by the JSX transform.

How it works

The entry points form a dependency graph. The root reactive runtime depends on nothing except dom-expressions types and seroval (only in the SSR build). Every other entry point depends on the root.

graph TD
    Reactive["src/reactive/<br>signal, scheduler, observable, array"]
    Render["src/render/<br>component, flow, Suspense, hydration"]
    Server["src/server/<br>reactive + rendering (SSR)"]
    RootIdx["src/index.ts<br>(public root entry)"]

    Reactive --> Render
    Reactive --> Server
    Render --> RootIdx
    Reactive --> RootIdx

    Web["web/src/index.ts<br>solid-js/web (browser)"]
    WebSrv["web/server/index.ts<br>solid-js/web (server)"]
    Store["store/src/index.ts<br>solid-js/store"]
    Storage["web/storage/src/index.ts<br>solid-js/web/storage"]
    H["h/src/index.ts<br>solid-js/h"]
    HTML["html/src/index.ts<br>solid-js/html"]
    Univ["universal/src/index.ts<br>solid-js/universal"]

    Render --> Web
    Server --> WebSrv
    Web --> WebSrv
    Web --> Storage
    Web --> H
    Web --> HTML
    RootIdx --> Store
    RootIdx --> Univ

The browser/server split for solid-js/web is handled by the package-exports browser / node / deno / worker conditions in packages/solid/web/package.json and the same conditions in the parent packages/solid/package.json's exports block.

Entry points

Each entry has its own page:

• Reactivity primitives
• Components and control flow
• solid-js/web (DOM renderer)
• solid-js/web server entry
• solid-js/store
• solid-js/web/storage
• solid-js/h and solid-js/html
• solid-js/universal

Key source files

File	Purpose
packages/solid/package.json	The package definition, including the seven-entry exports map and the build scripts.
packages/solid/src/index.ts	The root public surface.
packages/solid/src/reactive/signal.ts	The reactive runtime (1,821 lines).
packages/solid/rollup.config.js	All 16 bundle definitions.
packages/solid/vite.config.mjs	Vitest config and alias map for in-source testing.

Entry points for modification

If you are adding a new public reactive primitive: implement it in packages/solid/src/reactive/signal.ts, re-export it in the corresponding export {...} block in that file, and surface it in packages/solid/src/index.ts. Add a corresponding entry to packages/solid/test/signals.spec.ts and packages/solid/test/signals.type-tests.ts.

If you are adding a new component or control-flow tag: implement it in packages/solid/src/render/ (creating a new file or extending flow.ts), re-export from packages/solid/src/render/index.ts, and add the SSR mirror to packages/solid/src/server/rendering.ts. Then mention it in the builtIns list of packages/babel-preset-solid/index.js if it should be auto-imported by the compiler.

If you are adding a new entry point (e.g. solid-js/foo): create packages/solid/foo/, write package.json and src/index.ts, add a Rollup config entry to packages/solid/rollup.config.js, add the exports block to packages/solid/package.json, add the tsconfig.build.json, and add the typed export to the files array.