rework state exports utility

This commit is contained in:
Geoff Doty 2024-05-22 13:11:40 -04:00
parent 19ef0ce234
commit 570221e549
2 changed files with 13 additions and 25 deletions

View File

@ -32,11 +32,12 @@ The `app()` is the builder function and takes an `opts` object:
#### Output: #### Output:
> WARNING: May change in future Interface with internal state for utility expansion
| Property | Description | | Property | Description |
| --------------- | --------------------------------------------- | | --------------- | --------------------------------------------- |
| `state([data])` | state function to get or update internal data | | `state` | internal state object |
| `update()` | function to render dom state |
### h(tag, [...args]) ### h(tag, [...args])
@ -72,4 +73,4 @@ The `h()` is an **optional** hypertext build utility that weighs in around **~25
### TODO ### TODO
- Remove State Helper or make better - Improve Update

View File

@ -10,11 +10,11 @@
* @param {Object} opts.actions object functions includes and return state * @param {Object} opts.actions object functions includes and return state
* @param {String} opts.mount querySelector value * @param {String} opts.mount querySelector value
* *
* @returns {Object} state proxy object * @returns {Object} state and update() interface
*/ */
export default function app(opts) { export default function app(opts) {
// initial setup // initial setup
let data = check(opts.state, {}); let state = check(opts.state, {});
let view = check(opts.view, () => null); let view = check(opts.view, () => null);
let actions = check(opts.actions, {}); let actions = check(opts.actions, {});
let mount = opts.mount || "body"; let mount = opts.mount || "body";
@ -30,31 +30,18 @@ export default function app(opts) {
return typeof value === typeof type ? value : type; return typeof value === typeof type ? value : type;
} }
// state helper
const state = (state) => {
if(typeof state === "object") {
data = {...data, ...state};
}
// update ui
update();
// return current state
return data;
}
/** /**
* Assigns Dispatch-able Actions into App * Assigns Dispatch-able Actions into App
* *
* @param {Object} input state used by actions * @param {Object} data state used by actions
* @param {Object} actions functions that update state * @param {Object} actions functions that update state
*/ */
function dispatch(input, actions) { function dispatch(data, actions) {
Object.entries(actions).forEach(([name, action]) => { Object.entries(actions).forEach(([name, action]) => {
if (typeof action === "function") { if (typeof action === "function") {
actions[name] = (...args) => { actions[name] = (...args) => {
// update date from action return // update date from action return
Object.assign(data, action(input, ...args)); Object.assign(state, action(data, ...args));
// call update // call update
update(); update();
@ -67,13 +54,13 @@ export default function app(opts) {
/** update dom */ /** update dom */
const update = () => { const update = () => {
document.querySelector(mount).replaceChildren(view(data, actions)); document.querySelector(mount).replaceChildren(view(state, actions));
} }
// mount view // mount view
if (opts.view && mount) { if (opts.view && mount) {
dispatch(data, actions); dispatch(state, actions);
} }
return {state} return {state,update}
} }