Sinuous

Light, fast, reactive UI library

UI FrameworkReactive programming
luwes/sinuoussinuous.netlify.appsinuous

README

Sinuous

sinuous


npm: npm i sinuous  
cdn: https://cdn.jsdelivr.net/npm/sinuous/+esm


- Small. hello world at ~1.4kB gzip.
- Fast. top ranked of 80+ UI libs.
- Truly reactive. automatically derived from the app state.
- DevEx. no compile step needed, choose your view syntax.


Community


- [sinuous-context](https://github.com/theSherwood/sinuous-context) (@theSherwood): A light-weight, fast, and easy to use context api for Sinuous.
- [memo](https://github.com/luwes/memo) (@luwes): Memoize components and functions.
- [disco](https://github.com/luwes/disco) (@luwes): Universalconnected and disconnected lifecycle events.
- [sinuous-style](https://github.com/theSherwood/sinuous-style) (@theSherwood): Scoped styles for Sinuous à la styled-jsx.
- [sinuous-lifecycle](https://www.npmjs.com/package/sinuous-lifecycle) (@heyheyhello): onAttach/onDetach DOM lifecycles.
- [sinuous-trace](https://www.npmjs.com/package/sinuous-trace) (@heyheyhello): Traces the internal API to record component creation, adoption, and removal.

Examples


- [Counter](https://codesandbox.io/s/sinuous-counter-z6k71) (@ CodeSandbox)
- [Analog SVG Clock](https://sinuous.netlify.app/examples/clock/) ⏰
- [Classic TodoMVC](https://luwes.github.io/sinuous-todomvc/) _(GitHub Project)_
- [JS Framework Benchmark](https://github.com/krausest/js-framework-benchmark/blob/master/frameworks/keyed/sinuous/src/main.js) (@ GitHub)
- [Sierpinski Triangle](https://replit.com/@luwes/sinuous-sierpinski-triangle-demo)
- [Three.js Boxes](https://replit.com/@luwes/sinuous-three-boxes) 📦
- [JSX](https://github.com/heyheyhello/sinuous-tsx-example/tree/jsx/) _(GitHub Project @heyheyhello)_
- [TSX](https://github.com/heyheyhello/sinuous-tsx-example/tree/tsx/) _(GitHub Project @heyheyhello)_
- [Simple routing](https://codesandbox.io/s/sinuous-router-g2eud) (@mindplay-dk) 🌏
- [Datepicker](https://codesandbox.io/s/sinuous-date-picker-thxdt) (@mindplay-dk)
- [Hacker News](https://codesandbox.io/s/sinuous-hacker-news-dqtf7) (@mindplay-dk)
- [7 GUIs](https://codesandbox.io/s/github/theSherwood/7_GUIs/tree/master/sinuous) (@theSherwood)
- [Plain SPA](https://github.com/johannschopplich/plain-spa) (@johannschopplich)


_See complete docs, or in a nutshell..._

View syntax


A goal Sinuous strives for is to have good interoperability. Sinuous creates DOM elements via hyperscript h calls. This allows the developer more freedom in the choice of the view syntax.

Hyperscript directly call h(type: string, props: object, ...children).

Tagged templates transform the HTML to h calls at runtime w/ the html tag or,
at build time with [sinuous/babel-plugin-htm](./src/babel-plugin-htm).

JSX needs to be transformed at build time first with [babel-plugin-transform-jsx-to-htm](https://github.com/developit/htm/tree/master/packages/babel-plugin-transform-jsx-to-htm) and after with [sinuous/babel-plugin-htm](./packages/sinuous/babel-plugin-htm).


Counter Example (_1.4kB gzip_) (Codesandbox)

Tagged template (recommended)


  1. ```js
  2. import { observable, html } from 'sinuous';

  4. const counter = observable(0);
  5. const view = () => html` <div>Counter ${counter}</div> `;

  7. document.body.append(view());
  8. setInterval(() => counter(counter() + 1), 1000);
  9. ```

JSX


  1. ```jsx
  2. import { h, observable } from 'sinuous';

  4. const counter = observable(0);
  5. const view = () => <div>Counter {counter}</div>;

  7. document.body.append(view());
  8. setInterval(() => counter(counter() + 1), 1000);
  9. ```

Hyperscript


  1. ```js
  2. import { h, observable } from 'sinuous';

  4. const counter = observable(0);
  5. const view = () => h('div', 'Counter ', counter);

  7. document.body.append(view());
  8. setInterval(() => counter(counter() + 1), 1000);
  9. ```

Reactivity


The Sinuous [observable](./src/observable) module provides a mechanism to store and update the application state in a reactive way. If you're familiar with S.js or Mobx some functions will look very familiar, in under1kB Sinuous observable is not as extensive but offers a distilled version of the same functionality. It works under this philosophy:

_Anything that can be derived from the application state, should be derived. Automatically._

  1. ```js
  2. import { observable, computed, subscribe } from 'sinuous/observable';

  4. const length = observable(0);
  5. const squared = computed(() => Math.pow(length(), 2));

  7. subscribe(() => console.log(squared()));
  8. length(4); // => logs 16
  9. ```

Use a custom reactive library


Sinuous can work with different observable libraries; S.js, MobX, hyperactiv.
See the wiki for more info.

Hydration


Sinuous [hydrate](./src/hydrate) is a small add-on that provides fast hydration of static HTML. It's used for adding event listeners, adding dynamic attributes or content to existing DOM elements.

In terms of performance nothing beats statically generated HTML, both in serving and rendering on the client.

You could say using hydrate is a bit like using jQuery, you'll definitely write less JavaScript and do more. Additional benefits with Sinuous is that the syntax will be more _declarative_ and _reactivity_ is built-in.

  1. ```js
  2. import { observable } from 'sinuous';
  3. import { hydrate, dhtml } from 'sinuous/hydrate';

  5. const isActive = observable('');

  7. hydrate(
  8.   dhtml`<a class="navbar-burger burger${isActive}"
  9.     onclick=${() => isActive(isActive() ? '' : ' is-active')} />`
  10. );

  12. hydrate(dhtml`<a class="navbar-menu${isActive}" />`);
  13. ```

Internal API


Sinuous exposes an internal API which can be overridden for fun and profit.
For example sinuous-context uses it to implement a React like context API.

As of 0.27.4 the internal API should be used to make Sinuous work with a 3rd party reactive library like Mobx. This can be done by overridingsubscribe, root, sample and cleanup.

Example


  1. ```js
  2. import { api } from 'sinuous';

  4. const oldH = api.h;
  5. api.h = (...args) => {
  6.   console.log(args);
  7.   return oldH(...args);
  8. };
  9. ```

Methods


These are defined in sinuous/src and sinuous/h.

- h(type: string, props: object, ...children)
- hs(type: string, props: object, ...children)
- `insert(el: Node, value: T, endMark?: Node, current?: T | Frag, startNode?: Node): T | Frag;`
- property(el: Node, value: unknown, name: string, isAttr?: boolean, isCss?: boolean): void;
- add(parent: Node, value: Value | Value[], endMark?: Node): Node | Frag;
- rm(parent: Node, startNode: Node, endMark: Node): void;
- `subscribe(observer: () => T): () => void;`- `root(fn: () => T): T;`- `sample(fn: () => T): T;`- `cleanup unknown>(fn: T): T;`

Note that _some_ observable methods are imported into the internal API from sinuous-observable because they're used in Sinuous' core. To access all observable methods, import from sinuous/observable directly.

Concept


Sinuous started as a little experiment to get similar behavior as Surplus but with template literals instead of JSX.
HTM compiles to anh tag. Adapted code from Ryan Solid's dom expressions + a Reactive library provides the reactivity.

Sinuous returns a hyperscript function which is armed to handle the callback functions from the reactive library and updates the DOM accordingly.

Contributors


Code Contributors


This project exists thanks to all the people who contribute.

Financial Contributors


Become a financial contributor and help us sustain our community.

Individuals



Organizations


Support this project with your organization. Your logo will show up here with a link to your website.