https://github.com/gr0uch/s2

A data-binding function for the DOM.
https://github.com/gr0uch/s2

dom metaprogramming proxy reactive template

Last synced: 23 days ago
JSON representation

A data-binding function for the DOM.

• Host: GitHub
• URL: https://github.com/gr0uch/s2
• Owner: gr0uch
• License: bsd-3-clause
• Created: 2020-08-16T04:37:56.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2024-05-31T20:56:09.000Z (8 months ago)
• Last Synced: 2024-12-19T23:23:02.068Z (about 2 months ago)
• Topics: dom, metaprogramming, proxy, reactive, template
• Language: Common Lisp
• Homepage: https://gr0uch.github.io/s2/
• Size: 478 KB
• Stars: 43
• Watchers: 2
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# s2-engine

![test status](https://github.com/gr0uch/s2/actions/workflows/test.yml/badge.svg)

s2 is a thin abstraction of the DOM that can be easily embedded on a page or within an existing framework, since it's toolless. It combines logic-less templates with reactive programming, and is a modern successor to [Knockout](https://github.com/knockout/knockout) or [Ember](https://github.com/emberjs/ember.js) with superior ergonomics and [performance](https://krausest.github.io/js-framework-benchmark/current.html).

At its core is a single function which provides the reactive data-binding. It also includes a Mustache-subset parser (`html`) and state management (`observable`, `computed`). See the documentation page for usage details.

## Install

```sh

npm install s2-engine

```

## Example

```js

import bind, { html } from "https://esm.run/s2-engine";

const template = html`

  {{count}}

  +

`;

const viewModel = {

  count: 0,

  increment(event) {

    event.preventDefault();

    this.count++;

  }

};

const [proxy, fragment] = bind(viewModel, template);

document.body.appendChild(fragment);

// the viewModel can be interacted with using the proxy

window.proxy = proxy;

```

In its most basic form, it provides a reactive binding from data to a template. Changing the data updates the template.

With a modification of the above, a different object can be used as the data source:

```js

import { observable, computed } from "https://esm.run/s2-engine";

const source = observable({

  count: 0,

});

const viewModel = computed({

  count: () => source.count,

  increment: (event) => {

    event.preventDefault();

    source.count++;

  },

});

```

In the above example, the state has moved to `observable`, while `computed` provides the view. This provides an abstraction for arbitrary data to serve as the data model and propagating state to multiple views.

## Benchmarks

See [js-framework-benchmark results table](https://krausest.github.io/js-framework-benchmark/current.html).

## Development

s2 is written in the Parenscript subset of Common Lisp.

- [`parenscript-builder`](https://github.com/gr0uch/parenscript-builder): see instructions

- [`terser`](https://github.com/terser/terser): `npm i -g terser` to add this executable to `$PATH`

Need to build the `psbuild` binary from `parenscript-builder` and put it here to compile with `make`.

## Testing

Run automated tests with Deno:

```sh

make && deno test test/

```

### Manual testing pages

Run a web server like `http-server .` and then navigate to the `/test/` directory. HTTP is required for loading modules.

## Name

s2 is short for simulacra 2. Prior art: I wrote [a similar library that is limited to ES5](https://github.com/gr0uch/simulacra), so no proxies.

## License

[BSD 3-Clause](https://github.com/gr0uch/s2/blob/master/LICENSE)