All Projects → ryansolid → Solid

ryansolid / Solid

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

Programming Languages

javascript
184084 projects - #8 most used programming language
typescript
32286 projects
CSS
56736 projects

Projects that are alternatives of or similar to Solid

awesome-solid-js
Curated resources on building sites with SolidJS, a brand new way(now 1.0) to build Javascript based interactive web applications. A very close looking cousin to React/JSX by syntax, and to Svelte by few important principles(compiler and fine-grained reactivity), it's a highly optimised way to deliver web applications with best-in-class performa…
Stars: ✭ 317 (-97.58%)
Mutual labels:  reactive, solid, jsx
Sinuous
🧬 Light, fast, reactive UI library
Stars: ✭ 740 (-94.36%)
Mutual labels:  reactive, performance
Vertx Sql Client
High performance reactive SQL Client written in Java
Stars: ✭ 690 (-94.74%)
Mutual labels:  reactive, performance
Karet
Karet is a library that allows you to embed Kefir observables into React VDOM
Stars: ✭ 81 (-99.38%)
Mutual labels:  reactive, jsx
Meriyah
A 100% compliant, self-hosted javascript parser - https://meriyah.github.io/meriyah
Stars: ✭ 690 (-94.74%)
Mutual labels:  performance, jsx
Jsx Lite
Write components once, run everywhere. Compiles to Vue, React, Solid, Angular, Svelte, and Liquid.
Stars: ✭ 1,015 (-92.26%)
Mutual labels:  solid, jsx
Inferno Most Fp Demo
A demo for the ReactJS Tampa Bay meetup showing how to build a React+Redux-like architecture from scratch using Inferno, Most.js, reactive programmning, and various functional programming tools & techniques
Stars: ✭ 45 (-99.66%)
Mutual labels:  reactive, jsx
Inferno
🔥 An extremely fast, React-like JavaScript library for building modern user interfaces
Stars: ✭ 15,206 (+15.94%)
Mutual labels:  performance, jsx
element
Fast and simple custom elements.
Stars: ✭ 65 (-99.5%)
Mutual labels:  solid, jsx
mobius-gui
🎨 Reactive & Stream & Driver based UI framework build on Mobius Utils, equipped with neumorphism-derived & utility-first styles.
Stars: ✭ 43 (-99.67%)
Mutual labels:  reactive, declarative
Aws Sdk
Using vertx-client for AWS SDK v2
Stars: ✭ 38 (-99.71%)
Mutual labels:  reactive, performance
whatsup
Reactive framework, simple, fast, easy to use!
Stars: ✭ 115 (-99.12%)
Mutual labels:  reactive, jsx
ency
Enhanced concurrency primitives for Javascript.
Stars: ✭ 32 (-99.76%)
Mutual labels:  reactive, declarative
alef-component
Alef Component for Modern Web Apps.
Stars: ✭ 46 (-99.65%)
Mutual labels:  reactive, jsx
Vidom
Library to build UI based on virtual DOM
Stars: ✭ 408 (-96.89%)
Mutual labels:  reactive, jsx
Instant.page
Make your site’s pages instant in 1 minute and improve your conversion rate by 1%
Stars: ✭ 5,476 (-58.25%)
Mutual labels:  performance
Nerv
A blazing fast React alternative, compatible with IE8 and React 16.
Stars: ✭ 5,409 (-58.76%)
Mutual labels:  jsx
Youku Sdk Tool Woodpecker
In-app-debug tool for iOS
Stars: ✭ 600 (-95.43%)
Mutual labels:  performance
Yappi
Yet Another Python Profiler, but this time thread&coroutine&greenlet aware.
Stars: ✭ 595 (-95.46%)
Mutual labels:  performance
Moize
The consistently-fast, complete memoization solution for JS
Stars: ✭ 628 (-95.21%)
Mutual labels:  performance

SolidJS

Build Status Coverage Status NPM Version Discord Subreddit subscribers

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!
  • Small! Completely tree-shakeable Solid's compiler will only include parts of the library you use.
  • Supports and is built on TypeScript.
  • Supports modern features like JSX, Fragments, Context, Portals, Suspense, Streaming SSR, Progressive Hydration, Error Boundaries and Concurrent Rendering.
  • Works in serverless environments including AWS Lambda and Cloudflare Workers.
  • Webcomponent friendly and can author Custom Elements
    • Context API that spans Custom Elements
    • Implicit event delegation with Shadow DOM Retargeting
    • Shadow DOM Portals
  • Transparent debugging: a <div> is just a div.

Learn more on the Solid Website and come chat with us on our Discord

The Gist

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

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/web";

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.

Want to see what code Solid generates:

Try it Online

Quick Start

You can get started with a simple app by running the following in your terminal:

> npx degit solidjs/templates/js my-app
> cd my-app
> npm i # or yarn or pnpm
> npm run dev # or yarn or pnpm

Or for TypeScript:

> npx degit solidjs/templates/ts my-app
> cd my-app
> npm i # or yarn or pnpm
> npm run dev # or yarn or pnpm

This will create a minimal client-rendered application powered by Vite.

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"]

For TypeScript remember to set your TSConfig to handle Solid's JSX by:

"compilerOptions": {
  "jsx": "preserve",
  "jsxImportSource": "solid-js",
}

Documentation

Check out the Documentation website.

Examples

Browser Support

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

Testing Powered By SauceLabs

Community

Come chat with us on Discord

Contributors

Open Collective

Support us with a donation and help us continue our activities. [Contribute]

Sponsors

Become a sponsor and get your logo on our README on GitHub with a link to your site. [Become a sponsor]

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].