thewillhuang / solid

A declarative, efficient, and flexible JavaScript library for building user interfaces.

Solid is a declarative JavaScript library for creating user interfaces. It does not use a Virtual DOM. Instead it opts to compile its templates down to real DOM nodes and wrap updates in fine grained reactions. This way when your state updates only the code that depends on it runs.

Key Features

• Real DOM with fine-grained updates (No Virtual DOM! No Dirty Checking Digest Loop!).
• Declarative data
  • Simple composable primitives without the hidden rules.
  • Function Components with no need for lifecycle methods or specialized configuration objects.
  • Render once mental model.
• Fast! Almost indistinguishable performance vs optimized painfully imperative vanilla DOM code. See Solid on JS Framework Benchmark.
• Small! Completely tree-shakeable Solid's compiler will only include parts of the library you use.
• Supports modern features like JSX, Fragments, Context, Portals, Suspense, SSR, Error Boundaries and Asynchronous Rendering.
• Built on TypeScript.
• Webcomponent friendly
  • Context API that spans Custom Elements
  • Implicit event delegation with Shadow DOM Retargeting
  • Shadow DOM Portals
• Transparent debugging: a <div> is just a div.

The Gist

import { render } from "solid-js/dom";

const HelloMessage = props => <div>Hello {props.name}</div>;

render(() => <HelloMessage name="Taylor" />, document.getElementById("hello-example"));

A Simple Component is just a function that accepts properties. Solid uses a render function to create the reactive mount point of your application.

The JSX is then compiled down to efficient real DOM expressions:

import { render, template, insert, createComponent } from "solid-js/dom";

const _tmpl$ = template(`<div>Hello </div>`);

const HelloMessage = props => {
  const _el$ = _tmpl$.cloneNode(true);
  insert(_el$, () => props.name);
  return _el$;
};

render(
  () => createComponent(HelloMessage, { name: "Taylor" }),
  document.getElementById("hello-example")
);

That _el$ is a real div element and props.name, Taylor in this case, is appended to its child nodes. Notice that props.name is wrapped in a function. That is because that is the only part of this component that will ever execute again. Even if a name is updated from the outside only that one expression will be re-evaluated. The compiler optimizes initial render and the runtime optimizes updates. It's the best of both worlds.

Installation

npm init solid <project-type> <project-name> is available with npm 6+.

You can get started with a simple app with the CLI with by running:

> npm init solid app my-app

Or for a TypeScript starter:

> npm init solid app-ts my-app

Or you can install the dependencies in your own project. To use Solid with JSX (recommended) run:

> npm install solid-js babel-preset-solid

The easiest way to get setup is add babel-preset-solid to your .babelrc, or babel config for webpack, or rollup:

"presets": ["solid"]

Remember even though the syntax is almost identical, there are significant differences between how Solid's JSX works and a library like React. Refer to JSX Rendering for more information.

Reactivity

Solid's data management is built off a set of flexible reactive primitives are responsible for all the updates. It takes a very similar approach to MobX or Vue except it never trades its granularity for a VDOM. Dependencies are automatically tracked when you access your reactive values in your Effects and JSX View code.

Solid has a number of reactive primitives but the main 2 are Signals, and State. Ultimately you will need to understand both to write effective Solid code.

Signals hold simple values that you view as atomic immutable cells that consist of a getter and setter. These are ideal for simple local component values. They are called signals as they act as tiny streams that wire your application together.

import { createSignal, onCleanup } from "solid-js";
import { render } from "solid-js/dom";

const App = () => {
  const [count, setCount] = createSignal(0),
    timer = setInterval(() => setCount(count() + 1), 1000);
  onCleanup(() => clearInterval(timer));

  return <div>{count()}</div>;
};

render(() => <App />, document.getElementById("app"));

For React Users: This looks like React Hooks, but it is very different. There are no Hook rules, or concern about stale closures because your Component only runs once. It is only the "Hooks" that re-execute. So they always have the latest.

Solid's state object are deeply nested reactive data trees useful for global stores, model caches, and 3rd party immutable data interopt. They have a much more powerful setter that allows to specify nested changes and use value and function forms for updates.

They can be used in Components as well and is the go to choice when data gets more complicated (nested).

import { createState, onCleanup } from "solid-js";
import { render } from "solid-js/dom";

const App = () => {
  const [state, setState] = createState({
    user: {
      firstName: "John",
      lastName: "Smith"
    }
  });

  return (
    <div
      onClick={() => setState("user", "lastName", l => l + "!")}
    >{state.user.firstName} {state.user.lastName}</div>
  );
};

render(() => <App />, document.getElementById("app"));

Remember if you destructure or spread a state object reactivity is lost. However, unlike Vue we don't separate our setup from our view code so there is little concern about transforming or transfering these reactive atoms around. Just access the properties where you need them.

With Solid State and Context API you really don't need 3rd party global stores. These proxies are optimized part of the reactive system and lend to creating controlled unidirectional patterns.

Read these two introductory articles by @aftzl:

Understanding Solid: Reactivity Basics

Understanding Solid: JSX

And check out the Documentation, Examples, and Articles below to get more familiar with Solid.

Documentation

• Reactivity
• State
• JSX Rendering
• Components
• Styling
• Context
• Suspense
• API
• Comparison with other Libraries
• Storybook

Examples

• Counter Simple Counter
• SCSS Counter Simple Counter with SCSS styling
• Simple Todos Todos with LocalStorage persistence
• Simple Routing Use 'switch' control flow for simple routing
• Scoreboard Make use of hooks to do some simple transitions
• Form Validation HTML 5 validators with custom async validation
• Styled Components A simple example of creating Styled Components.
• Styled JSX A simple example of using Styled JSX with Solid.
• Counter Context Implement a global store with Context API
• Async Resource Ajax requests to SWAPI with Promise cancellation
• Suspense Various Async loading with Solid's Suspend control flow
• Suspense Tabs Defered loading spinners for smooth UX.
• SuspenseList Orchestrating multiple Suspense Components.
• Redux Undoable Todos Example from Redux site done with Solid.
• Simple Todos Template Literals Simple Todos using Lit DOM Expressions
• Simple Todos HyperScript Simple Todos using Hyper DOM Expressions
• TodoMVC Classic TodoMVC example
• Real World Demo Real World Demo for Solid
• Hacker News App Small application to showcase Solid Element
• JS Framework Benchmark The one and only
• Sierpinski's Triangle Demo Solid implementation of the React Fiber demo.
• WebComponent Todos Showing off Solid Element
• UIBench Benchmark a benchmark tests a variety of UI scenarios.
• DBMon Benchmark A benchmark testing ability of libraries to render unoptimized data.

Related Projects

• Solid Element Extensions to Solid.js that add a Web Component wrapper.
• Solid Styled Components Styled Components for Solid using 1kb library Goober.
• Solid Styled JSX Wrapper for using Solid with Zeit's Styled JSX.
• Solid RX Functional Reactive Programming extensions for SolidJS.
• DOM Expressions The renderer behind Solid.js that enables lightning fast fine grained performance.
• Babel Plugin JSX DOM Expressions Babel plugin that converts JSX to DOM Expressions.
• Lit DOM Expressions Tagged Template Literal API for DOM Expressions.
• Hyper DOM Expressions HyperScript API for DOM Expressions.
• Solid Hot Loader Webpack Loader for HMR for Solid Components.
• React Solid State React Hooks API to use Solid.js paradigm in your existing React apps.

Latest Articles

• SolidJS: Reactivity to Rendering Building Solid's reactive renderer from the ground up
• Exploring Reactivity Patterns in 2020 What's the latest trend in the frontend?
• Why SolidJS: Do We Really Need Another JS UI Library Ryan's personal journey creating SolidJS.
• Thinking Granular: How is SolidJS so Performant? An end to end look at what makes SolidJS so fast.
• Introducing the SolidJS UI Library Top 5 reasons to consider learning about SolidJS.
• A Solid RealWorld Demo Comparison of JavaScript Frameworks How does Solid perform in a larger application?
• Designing SolidJS: Abstraction Understanding both the power and cost of abstraction.
• Designing SolidJS: Suspense React isn't the only library that stops time.
• Designing SolidJS: JSX How is it that the syntax born of the Virtual DOM is also secretly the best syntax for Reactive UI libraries?
• Designing SolidJS: Immutability Can Reactive State Management be both Immutable and also the most performant?
• Designing SolidJS: Components Exploring Solid's "Vanishing" Components
• Designing SolidJS: Reactivity Finding the right reactivity model for Solid.
• Designing SolidJS: Dualities How exploring opposites can help us redefine the whole problem space.
• How we wrote the Fastest JavaScript UI Frameworks How Solid topped the JS Framework Benchmark.
• Finding Fine Grained Reactive Programming Introduction to the inner workings of Solid's Reactive system.
• The Real Cost of UI Components Comparison of the cost of Components in different UI Libraries.
• The Fastest Way to Render the DOM Comparison of all Solid Renderers against the Fastest Libraries in the World.
• JavaScript UI Compilers: Comparing Svelte and Solid A closer look at precompiled UI libraries
• Building a Simple JavaScript App with Solid Dissecting building TodoMVC with Solid.
• Solid — The Best JavaScript UI Library You’ve Never Heard Of
• What Every JavaScript Framework Could Learn from React The lessons Solid learned from React.
• React Hooks: Has React Jumped the Shark? Comparison of React Hooks to Solid.
• How I wrote the Fastest JavaScript UI Framework The key to Solid's performance.
• Part 5: JS Frameworks in 2019
• Part 4: Rendering the DOM
• Part 3: Change Management in JavaScript Frameworks
• Part 2: Web Components as Containers
• Part 1: Writing a JS Framework in 2018

No Compilation?

Dislike JSX? Don't mind doing manual work to wrap expressions, worse performance, and having larger bundle sizes? Alternatively in non-compiled environments you can use Tagged Template Literals Lit DOM Expressions or even HyperScript with Hyper DOM Expressions.

For convenience Solid exports interfaces to runtimes for these as:

import h from "solid-js/h";
import html from "solid-js/html";

Remember you still need the corresponding DOM Expressons library for these to work.

Browser Support

The last 2 versions of modern evergreen browsers and Node LTS.

Status

Solid is mostly feature complete for its v1.0.0 release. The next releases will be mostly bug fixes and API tweaks on the road to stability.