From 01fccef88be53c4b61a273fe8424428079838cd0 Mon Sep 17 00:00:00 2001 From: Olian04 Date: Mon, 28 Nov 2022 00:24:17 +0100 Subject: [PATCH] feat: Implement #4 --- README.md | 42 +- demos/count.ts | 2 +- demos/groups.ts | 2 +- demos/{browser.html => web.html} | 45 +- package-lock.json | 643 +++++++++++++++++++++++++++- package.json | 12 +- rollup.config.mjs | 18 +- src/{api.ts => api.core.ts} | 0 src/api.node.ts | 1 + src/api.web.ts | 3 + src/composites/createEffectGroup.ts | 27 +- src/composites/createQueryAtom.ts | 53 +++ src/types/EffectProps.ts | 2 +- src/types/QueryAtom.ts | 11 + 14 files changed, 806 insertions(+), 55 deletions(-) rename demos/{browser.html => web.html} (64%) rename src/{api.ts => api.core.ts} (100%) create mode 100644 src/api.node.ts create mode 100644 src/api.web.ts create mode 100644 src/composites/createQueryAtom.ts create mode 100644 src/types/QueryAtom.ts diff --git a/README.md b/README.md index 9dd8feb..9cae627 100644 --- a/README.md +++ b/README.md @@ -38,10 +38,12 @@ Simply-reactive is a [very small & dependency free](https://bundlephobia.com/pac - [Selectors](#selector) are pieces of derived reactive state. - [Effects](#effect) are side effects produced by changes to the reactive graph. -`Simply-reactive` also provides two reactive composites: +`Simply-reactive` also provides four reactive composites: - [Groups](#group) are atoms containing collections of reactive primitives or other reactive composites. +- [Effect Groups](#effect-Group) are collections of effects used for enabeling and disabeling multiple effects at once. - [Resources](#resource) are selectors specifically optimized for data fetching. +- [Query Atoms](#query-atom) are atoms with two way databindings to query search parameters. ### Atom @@ -108,6 +110,27 @@ console.log(DoubleCountGroup.find(1).get()); // 4 console.log(DoubleCountGroup.find(2).get()); // 0 ``` +### Effect Group + +Effect Groups are collections of effects used for enabeling and disabeling multiple effects at once. + +```ts +const EffectGroup = createEffectGroup([ + () => (document.getElementById('in-a').value = A.get()), + () => (document.getElementById('in-b').value = B.get()), + () => (document.getElementById('out-a').innerText = A.get()), + () => (document.getElementById('out-b').innerText = B.get()), + () => (document.getElementById('out-product').innerText = A.get() * B.get()), +]); + +document.getElementById('in-a').addEventListener('change', (ev) => { + A.set(parseInt(ev.target.value, 10)); +}); +document.getElementById('in-b').addEventListener('change', (ev) => { + B.set(parseInt(ev.target.value, 10)); +}); +``` + ### Resource Resources are selectors specifically optimized for data fetching. @@ -122,3 +145,20 @@ console.log(`Data after first load ${await Data.get()}`); Data.invalidate(); console.log(`Data after second load ${await Data.get()}`); ``` + +### Query Atom + +Query Atoms are atoms with two way databindings to query search parameters. + +```ts +const A = createQueryAtom({ + key: 'a', + default: 0, +}); + +A.set(3); + +// Reload page + +A.get(); // 3 +``` diff --git a/demos/count.ts b/demos/count.ts index 7f9d368..89436fa 100644 --- a/demos/count.ts +++ b/demos/count.ts @@ -1,4 +1,4 @@ -import { createAtom, createEffect, createSelector } from '../dist/api'; +import { createAtom, createEffect, createSelector } from '../dist/api.node'; const Count = createAtom({ default: 0, diff --git a/demos/groups.ts b/demos/groups.ts index 6222c16..319a951 100644 --- a/demos/groups.ts +++ b/demos/groups.ts @@ -1,4 +1,4 @@ -import { createGroup, createAtom, createSelector } from '../dist/api'; +import { createGroup, createAtom, createSelector } from '../dist/api.node'; const CountGroup = createGroup({ getDefault: () => diff --git a/demos/browser.html b/demos/web.html similarity index 64% rename from demos/browser.html rename to demos/web.html index f0d2ff5..b313e0a 100644 --- a/demos/browser.html +++ b/demos/web.html @@ -23,18 +23,27 @@ - - +
+ + + +
+ + Increment A + Increment B