{"id":13472120,"url":"https://github.com/luwes/sinuous","last_synced_at":"2025-05-15T11:06:32.942Z","repository":{"id":37742999,"uuid":"179846317","full_name":"luwes/sinuous","owner":"luwes","description":"🧬 Light, fast, reactive UI library","archived":false,"fork":false,"pushed_at":"2024-03-16T06:07:34.000Z","size":10095,"stargazers_count":1057,"open_issues_count":13,"forks_count":34,"subscribers_count":17,"default_branch":"main","last_synced_at":"2025-04-22T06:17:08.195Z","etag":null,"topics":["dom","functional","hyperscript","javascript","reactive","sinuous","ui"],"latest_commit_sha":null,"homepage":"https://sinuous.netlify.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/luwes.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2019-04-06T14:52:50.000Z","updated_at":"2025-04-07T08:24:54.000Z","dependencies_parsed_at":"2023-09-29T08:53:22.901Z","dependency_job_id":"9dab9972-f789-420e-a903-4977c195d06c","html_url":"https://github.com/luwes/sinuous","commit_stats":{"total_commits":755,"total_committers":15,"mean_commits":"50.333333333333336","dds":"0.14304635761589402","last_synced_commit":"ca2a9427a063d080e3bff3bd62082b03663f749f"},"previous_names":[],"tags_count":126,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luwes%2Fsinuous","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luwes%2Fsinuous/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luwes%2Fsinuous/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luwes%2Fsinuous/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/luwes","download_url":"https://codeload.github.com/luwes/sinuous/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251802856,"owners_count":21646289,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dom","functional","hyperscript","javascript","reactive","sinuous","ui"],"created_at":"2024-07-31T16:00:52.058Z","updated_at":"2025-05-15T11:06:32.917Z","avatar_url":"https://github.com/luwes.png","language":"JavaScript","readme":"# \u003ca href=\"https://github.com/luwes/sinuous\"\u003e\u003cimg src=\"https://sinuous.netlify.app/images/sinuous-logo.svg?sanitize=true\" height=\"40\" alt=\"Sinuous\" /\u003e\u003c/a\u003e\n\n[![Version](https://img.shields.io/npm/v/sinuous.svg?color=success\u0026style=flat-square)](https://www.npmjs.com/package/sinuous)\n![Badge size](https://img.badgesize.io/https://cdn.jsdelivr.net/npm/sinuous/+esm?compression=gzip\u0026label=gzip\u0026style=flat-square)\n[![codecov](https://img.shields.io/codecov/c/github/luwes/sinuous.svg?style=flat-square\u0026color=success)](https://codecov.io/gh/luwes/sinuous)\n\n**npm**: `npm i sinuous`  \n**cdn**: https://cdn.jsdelivr.net/npm/sinuous/+esm\n\n---\n\n- **Small.** hello world at `~1.4kB` gzip.\n- **Fast.** [top ranked](https://rawgit.com/krausest/js-framework-benchmark/master/webdriver-ts-results/table.html) of 80+ UI libs.\n- **Truly reactive.** automatically derived from the app state.\n- **DevEx.** no compile step needed, choose your [view syntax](#view-syntax).\n\n---\n\n### Add-ons\n\n| Size                                                                                                                                   | Name                                     | Description                             |\n| -------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | --------------------------------------- |\n| ![Badge size](https://img.badgesize.io/https://cdn.jsdelivr.net/npm/sinuous/src/observable.js?compression=gzip\u0026label=gzip\u0026style=flat-square) | [`sinuous/observable`](./src/observable.md) | Tiny observable _(included by default)_ |\n| ![Badge size](https://img.badgesize.io/https://cdn.jsdelivr.net/npm/sinuous/src/map.js?compression=gzip\u0026label=gzip\u0026style=flat-square)        | [`sinuous/map`](./src/map.js)               | Fast list renderer                      |\n| ![Badge size](https://img.badgesize.io/https://cdn.jsdelivr.net/npm/sinuous/src/hydrate.js?compression=gzip\u0026label=gzip\u0026style=flat-square)    | [`sinuous/hydrate`](./src/hydrate.md)       | Hydrate static HTML                     |\n| ![Badge size](https://img.badgesize.io/https://cdn.jsdelivr.net/npm/sinuous/src/template.js?compression=gzip\u0026label=gzip\u0026style=flat-square)   | [`sinuous/template`](./src/template.md)     | Pre-rendered Template                   |\n\n### Community\n\n- [**sinuous-context**](https://github.com/theSherwood/sinuous-context) ([@theSherwood](https://github.com/theSherwood)): A light-weight, fast, and easy to use context api for Sinuous.\n- [**memo**](https://github.com/luwes/memo) ([@luwes](https://github.com/luwes)): Memoize components and functions.\n- [**disco**](https://github.com/luwes/disco) ([@luwes](https://github.com/luwes)): Universal `connected` and `disconnected` lifecycle events.\n- [**sinuous-style**](https://github.com/theSherwood/sinuous-style) ([@theSherwood](https://github.com/theSherwood)): Scoped styles for Sinuous à la styled-jsx.\n- [**sinuous-lifecycle**](https://www.npmjs.com/package/sinuous-lifecycle) ([@heyheyhello](https://github.com/heyheyhello)): onAttach/onDetach DOM lifecycles.\n- [**sinuous-trace**](https://www.npmjs.com/package/sinuous-trace) ([@heyheyhello](https://github.com/heyheyhello)): Traces the internal API to record component creation, adoption, and removal.\n\n### Examples\n\n- [**Counter**](https://codesandbox.io/s/sinuous-counter-z6k71) (@ CodeSandbox)\n- [**Analog SVG Clock**](https://sinuous.netlify.app/examples/clock/) ⏰\n- [**Classic TodoMVC**](https://luwes.github.io/sinuous-todomvc/) _([GitHub Project](https://github.com/luwes/sinuous-todomvc))_\n- [**JS Framework Benchmark**](https://github.com/krausest/js-framework-benchmark/blob/master/frameworks/keyed/sinuous/src/main.js) (@ GitHub)\n- [**Sierpinski Triangle**](https://replit.com/@luwes/sinuous-sierpinski-triangle-demo)\n- [**Three.js Boxes**](https://replit.com/@luwes/sinuous-three-boxes) 📦\n- [**JSX**](https://github.com/heyheyhello/sinuous-tsx-example/tree/jsx/) _([GitHub Project @heyheyhello](https://github.com/heyheyhello/sinuous-tsx-example/tree/jsx/))_\n- [**TSX**](https://github.com/heyheyhello/sinuous-tsx-example/tree/tsx/) _([GitHub Project @heyheyhello](https://github.com/heyheyhello/sinuous-tsx-example/tree/tsx/))_\n- [**Simple routing**](https://codesandbox.io/s/sinuous-router-g2eud) ([@mindplay-dk](https://github.com/mindplay-dk)) 🌏\n- [**Datepicker**](https://codesandbox.io/s/sinuous-date-picker-thxdt) ([@mindplay-dk](https://github.com/mindplay-dk))\n- [**Hacker News**](https://codesandbox.io/s/sinuous-hacker-news-dqtf7) ([@mindplay-dk](https://github.com/mindplay-dk))\n- [**7 GUIs**](https://codesandbox.io/s/github/theSherwood/7_GUIs/tree/master/sinuous) ([@theSherwood](https://github.com/theSherwood))\n- [**Plain SPA**](https://github.com/johannschopplich/plain-spa) ([@johannschopplich](https://github.com/johannschopplich))\n\n---\n\n_See [complete docs](https://sinuous.netlify.app/docs/getting-started/), or in a nutshell..._\n\n## View syntax\n\nA 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.\n\n**Hyperscript** directly call `h(type: string, props: object, ...children)`.\n\n**Tagged templates** transform the HTML to `h` calls at runtime w/ the ` html`` ` tag or,\nat build time with [`sinuous/babel-plugin-htm`](./src/babel-plugin-htm).\n\n**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).\n\n---\n\n**Counter Example (_1.4kB gzip_) ([Codesandbox](https://codesandbox.io/s/sinuous-counter-z6k71))**\n\n#### Tagged template (recommended)\n\n```js\nimport { observable, html } from 'sinuous';\n\nconst counter = observable(0);\nconst view = () =\u003e html` \u003cdiv\u003eCounter ${counter}\u003c/div\u003e `;\n\ndocument.body.append(view());\nsetInterval(() =\u003e counter(counter() + 1), 1000);\n```\n\n#### JSX\n\n```jsx\nimport { h, observable } from 'sinuous';\n\nconst counter = observable(0);\nconst view = () =\u003e \u003cdiv\u003eCounter {counter}\u003c/div\u003e;\n\ndocument.body.append(view());\nsetInterval(() =\u003e counter(counter() + 1), 1000);\n```\n\n#### Hyperscript\n\n```js\nimport { h, observable } from 'sinuous';\n\nconst counter = observable(0);\nconst view = () =\u003e h('div', 'Counter ', counter);\n\ndocument.body.append(view());\nsetInterval(() =\u003e counter(counter() + 1), 1000);\n```\n\n## Reactivity\n\nThe 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](https://github.com/adamhaile/S) or [Mobx](https://mobx.js.org) some functions will look very familiar, in under `1kB` Sinuous observable is not as extensive but offers a distilled version of the same functionality. It works under this philosophy:\n\n_Anything that can be derived from the application state, should be derived. Automatically._\n\n```js\nimport { observable, computed, subscribe } from 'sinuous/observable';\n\nconst length = observable(0);\nconst squared = computed(() =\u003e Math.pow(length(), 2));\n\nsubscribe(() =\u003e console.log(squared()));\nlength(4); // =\u003e logs 16\n```\n\n#### Use a custom reactive library\n\nSinuous can work with different observable libraries; S.js, MobX, hyperactiv.\nSee the [wiki for more info](https://github.com/luwes/sinuous/wiki/Choose-your-own-reactive-library).\n\n## Hydration\n\nSinuous [`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.\n\nIn terms of performance nothing beats statically generated HTML, both in serving and rendering on the client.\n\nYou could say using hydrate is a bit like using [jQuery](https://jquery.com/), 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.\n\n```js\nimport { observable } from 'sinuous';\nimport { hydrate, dhtml } from 'sinuous/hydrate';\n\nconst isActive = observable('');\n\nhydrate(\n  dhtml`\u003ca class=\"navbar-burger burger${isActive}\"\n    onclick=${() =\u003e isActive(isActive() ? '' : ' is-active')} /\u003e`\n);\n\nhydrate(dhtml`\u003ca class=\"navbar-menu${isActive}\" /\u003e`);\n```\n\n## Internal API\n\nSinuous exposes an internal API which can be overridden for fun and profit.\nFor example [sinuous-context](https://github.com/theSherwood/sinuous-context) uses it to implement a React like context API.\n\nAs of `0.27.4` the internal API should be used to make Sinuous work with a 3rd party reactive library like [Mobx](https://mobx.js.org). This can be done by overriding `subscribe`, `root`, `sample` and `cleanup`.\n\n### Example\n\n```js\nimport { api } from 'sinuous';\n\nconst oldH = api.h;\napi.h = (...args) =\u003e {\n  console.log(args);\n  return oldH(...args);\n};\n```\n\n### Methods\n\nThese are defined in [sinuous/src](./src/index.js) and [sinuous/h](./src/h.js).\n\n- `h(type: string, props: object, ...children)`\n- `hs(type: string, props: object, ...children)`\n- `insert\u003cT\u003e(el: Node, value: T, endMark?: Node, current?: T | Frag, startNode?: Node): T | Frag;`\n- `property(el: Node, value: unknown, name: string, isAttr?: boolean, isCss?: boolean): void;`\n- `add(parent: Node, value: Value | Value[], endMark?: Node): Node | Frag;`\n- `rm(parent: Node, startNode: Node, endMark: Node): void;`\n- `subscribe\u003cT\u003e(observer: () =\u003e T): () =\u003e void;`\n- `root\u003cT\u003e(fn: () =\u003e T): T;`\n- `sample\u003cT\u003e(fn: () =\u003e T): T;`\n- `cleanup\u003cT extends () =\u003e unknown\u003e(fn: T): T;`\n\nNote 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.\n\n## Concept\n\nSinuous started as a little experiment to get similar behavior as [Surplus](https://github.com/adamhaile/surplus) but with template literals instead of JSX.\n[HTM](https://github.com/developit/htm) compiles to an `h` tag. Adapted code from [Ryan Solid](https://github.com/ryansolid/babel-plugin-jsx-dom-expressions)'s dom expressions + a Reactive library provides the reactivity.\n\nSinuous returns a [hyperscript](https://github.com/hyperhype/hyperscript) function which is armed to handle the callback functions from the reactive library and updates the DOM accordingly.\n\n## Contributors\n\n### Code Contributors\n\nThis project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].\n\u003ca href=\"https://github.com/luwes/sinuous/graphs/contributors\"\u003e\u003cimg src=\"https://opencollective.com/sinuous/contributors.svg?width=890\u0026button=false\" /\u003e\u003c/a\u003e\n\n### Financial Contributors\n\nBecome a financial contributor and help us sustain our community. [[Contribute](https://opencollective.com/sinuous/contribute)]\n\n#### Individuals\n\n\u003ca href=\"https://opencollective.com/sinuous\"\u003e\u003cimg src=\"https://opencollective.com/sinuous/individuals.svg?width=890\"\u003e\u003c/a\u003e\n\n#### Organizations\n\nSupport this project with your organization. Your logo will show up here with a link to your website. [[Contribute](https://opencollective.com/sinuous/contribute)]\n\n\u003ca href=\"https://opencollective.com/sinuous/organization/0/website\"\u003e\u003cimg src=\"https://opencollective.com/sinuous/organization/0/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/sinuous/organization/1/website\"\u003e\u003cimg src=\"https://opencollective.com/sinuous/organization/1/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/sinuous/organization/2/website\"\u003e\u003cimg src=\"https://opencollective.com/sinuous/organization/2/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/sinuous/organization/3/website\"\u003e\u003cimg src=\"https://opencollective.com/sinuous/organization/3/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/sinuous/organization/4/website\"\u003e\u003cimg src=\"https://opencollective.com/sinuous/organization/4/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/sinuous/organization/5/website\"\u003e\u003cimg src=\"https://opencollective.com/sinuous/organization/5/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/sinuous/organization/6/website\"\u003e\u003cimg src=\"https://opencollective.com/sinuous/organization/6/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/sinuous/organization/7/website\"\u003e\u003cimg src=\"https://opencollective.com/sinuous/organization/7/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/sinuous/organization/8/website\"\u003e\u003cimg src=\"https://opencollective.com/sinuous/organization/8/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/sinuous/organization/9/website\"\u003e\u003cimg src=\"https://opencollective.com/sinuous/organization/9/avatar.svg\"\u003e\u003c/a\u003e\n","funding_links":["https://opencollective.com/sinuous/contribute","https://opencollective.com/sinuous","https://opencollective.com/sinuous/organization/0/website","https://opencollective.com/sinuous/organization/1/website","https://opencollective.com/sinuous/organization/2/website","https://opencollective.com/sinuous/organization/3/website","https://opencollective.com/sinuous/organization/4/website","https://opencollective.com/sinuous/organization/5/website","https://opencollective.com/sinuous/organization/6/website","https://opencollective.com/sinuous/organization/7/website","https://opencollective.com/sinuous/organization/8/website","https://opencollective.com/sinuous/organization/9/website"],"categories":["JavaScript","Uncategorized"],"sub_categories":["Uncategorized"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fluwes%2Fsinuous","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fluwes%2Fsinuous","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fluwes%2Fsinuous/lists"}