https://github.com/alexeyraspopov/obsx
DOM-driven templates powered by reactive signals
https://github.com/alexeyraspopov/obsx
Last synced: 10 days ago
JSON representation
DOM-driven templates powered by reactive signals
- Host: GitHub
- URL: https://github.com/alexeyraspopov/obsx
- Owner: alexeyraspopov
- Created: 2025-01-02T03:58:30.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-01-07T03:41:46.000Z (4 months ago)
- Last Synced: 2025-04-14T03:53:16.992Z (18 days ago)
- Language: JavaScript
- Size: 2.93 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# DOM-driven templates powered by reactive signals
So I've got a decent implementation of reactive signals in
[inertial](https://unknownprinciple.github.io/inertial/). Now I want to make use of that library in
making template engine.
1. I want simple attribute bindings. `data-` as the base for everything, so I can traverse
`element.dataset` at ease.
2. Control flow: `data-when` for conditions, `data-each` for lists. Others: `data-prop-*` for
properties, `data-attr-*` for attributes, `data-on-*` for events.
3. Expressions should be executed in context of the view model, but without the use of `this`. Like
if I were using `with` operator.
4. The public API should provide hooks for controlling how reactive signals are used. Maybe I can
hide the implementation detail completely.
5. There should be an easy way to define transitions.
6. Control flow attributes can be applied to `` to avoid unnecessary wrappers.
7. Potentially, consider cooperative scheduling for DOM updates, to avoid freezing.
8. Ability to write tests with both Playwright and Testing Library.
Examples:
```html
Click me
import { ObservableScope } from "inertial";
import { apply } from "obsx";
let os = ObservableScope();
let vm = {
count: os.signal(0),
increment() {
vm.count((value) => value + 1);
},
};
apply(vm, document.querySelector("#counter"));
```
```html
```