nicoder / solid Goto Github PK

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.

• 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.

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, null);
  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 it's 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.

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

> npm init solid app my-app

Use app-ts for a TypeScript starter.

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

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

> npm install solid-js babel-preset-solid

Solid's rendering is done by the DOM Expressions library. This library provides a generic optimized runtime for fine grained libraries like Solid with the opportunity to use a number of different Rendering APIs. The best option is to use JSX pre-compilation with Babel Plugin JSX DOM Expressions to give the smallest code size, cleanest syntax, and most performant code. The compiler converts JSX to native DOM element instructions and wraps dynamic expressions in reactive computations.

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.

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 to install the library separately for these to work.

Solid's data management is built off a set of flexible reactive primitives. Similar to React Hooks except instead of whitelisting change for an owning Component they independentally are soley responsible for all the updates.

Solid's State primitive is arguably its most powerful and distinctive one. Through the use of proxies and explicit setters it gives the control of an immutable interface and the performance of a mutable one. The setters support a variety of forms, but to get started set and update state with an object.

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

const CountingComponent = () => {
  const [state, setState] = createState({ counter: 0 });

  const interval = setInterval(
    () => setState({ counter: state.counter + 1 }),
    1000
  );

  onCleanup(() => clearInterval(interval));

  return <div>{state.counter}</div>;
};

Where the magic happens is with computations(effects and memos) which automatically track dependencies.

const [state, setState] = createState({ user: { firstName: "Jake", lastName: "Smith" }})

createEffect(() =>
  setState({
    displayName: `${state.user.firstName} ${state.user.lastName}`
  })
);

console.log(state.displayName); // Jake Smith
setState('user', {firstName: "Jacob" });
console.log(state.displayName); // Jacob Smith

Whenever any dependency changes the State value will update immediately. Each setState statement will notify subscribers synchronously with all changes applied. This means you can depend on the value being set on the next line.

Solid State also exposes a reconcile method used with setState that does deep diffing to allow for automatic efficient interopt with immutable store technologies like Redux, Apollo(GraphQL), or RxJS.

const unsubscribe = store.subscribe(({ todos }) => (
  setState('todos', reconcile(todos)));
);
onCleanup(() => unsubscribe());

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.

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

• 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.

• 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.

• Why SolidJS: Do We Really Need Another JS UI Library Summary of the journey so far.
• 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

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