https://github.com/c-py/one-way-data-binding-library.mjs
Maps a javascript objects to arbitrary create, update and delete functions.
https://github.com/c-py/one-way-data-binding-library.mjs
Last synced: 4 months ago
JSON representation
Maps a javascript objects to arbitrary create, update and delete functions.
- Host: GitHub
- URL: https://github.com/c-py/one-way-data-binding-library.mjs
- Owner: c-py
- License: mit
- Created: 2024-08-01T08:30:15.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-02T13:16:16.000Z (almost 2 years ago)
- Last Synced: 2024-08-03T10:26:07.642Z (almost 2 years ago)
- Language: JavaScript
- Size: 26.4 KB
- Stars: 4
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# One Way Data Binding Library .MJS
## 😎 Description 🙏
Maps javascript objects to arbitrary create, update and delete functions.
Can be used to sync stateful or stateless components with some other provider of data.
## 🚀 Installation 😱
```bash
yarn add one-way-data-binding-library.mjs
```
## 😏 Examples ❤️
Canvas API, DOM API and React examples are available:
[https://c-py.github.io/one-way-data-binding-library.mjs/](https://c-py.github.io/one-way-data-binding-library.mjs/)
## 💯 Basic Usage 👆
```js
import oneWayDataBindingLibraryJs from "one-way-data-binding-library.mjs";
const bar = () => ({
create: (relative, absolute) => console.log("Create", relative, absolute),
update: (relative, absolute) => console.log("Update", relative, absolute),
delete: (absolute) => console.log("Delete", absolute),
});
const run = oneWayDataBindingLibraryJs({
"foo.bar": bar,
});
// Create
run(() => ({ foo: { bar: { hello: "world" } } }));
// Update
run((state) => {
state.foo.bar.hello = "moon";
});
// Delete
run((state) => ({}));
```
## 💪 Additional Usage 😂
### Multiple Paths
```js
const example = () => ({
create: (relative, absolute) => console.log("Create", relative, absolute),
update: (relative, absolute) => console.log("Update", relative, absolute),
delete: (absolute) => console.log("Delete", absolute),
});
const run = oneWayDataBindingLibraryJs({
"foo.bar": example,
"foo.baz": example,
});
run(() => ({
foo: {
bar: {},
baz: {},
},
}));
```
### Wildcards
```js
const example = () => ({
create: (relative, absolute) => console.log("Create", relative, absolute),
update: (relative, absolute) => console.log("Update", relative, absolute),
delete: (absolute) => console.log("Delete", absolute),
});
const run = oneWayDataBindingLibraryJs({
"foo.*": example,
});
run(() => ({
foo: {
bar: {},
baz: {},
},
}));
```
### Using Classes
```js
class Example {
create(relative, absolute) {
console.log("Create", relative, absolute);
}
update(relative, absolute) {
console.log("Update", relative, absolute);
}
delete(absolute) {
console.log("Delete", absolute);
}
}
const run = oneWayDataBindingLibraryJs({
"foo.bar": () => new Example(),
});
run(() => ({
foo: {
bar: {},
},
}));
```
## 👀 Help & Documentation 🎉
### Path Matching
JSON Path matching utilises Object Scan: https://github.com/blackflux/object-scan
### State Updates
State updates are Immer patch expressions: https://github.com/immerjs/immer