From 570221e54923cd1a38ed42ffac81175231023782 Mon Sep 17 00:00:00 2001 From: Geoff Doty Date: Wed, 22 May 2024 13:11:40 -0400 Subject: [PATCH] rework state exports utility --- README.md | 7 ++++--- src/app.js | 31 +++++++++---------------------- 2 files changed, 13 insertions(+), 25 deletions(-) diff --git a/README.md b/README.md index cbf9c27..e09cc1d 100644 --- a/README.md +++ b/README.md @@ -32,11 +32,12 @@ The `app()` is the builder function and takes an `opts` object: #### Output: -> WARNING: May change in future +Interface with internal state for utility expansion | 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]) @@ -72,4 +73,4 @@ The `h()` is an **optional** hypertext build utility that weighs in around **~25 ### TODO -- Remove State Helper or make better +- Improve Update diff --git a/src/app.js b/src/app.js index f588df3..246a81d 100644 --- a/src/app.js +++ b/src/app.js @@ -10,11 +10,11 @@ * @param {Object} opts.actions object functions includes and return state * @param {String} opts.mount querySelector value * - * @returns {Object} state proxy object + * @returns {Object} state and update() interface */ export default function app(opts) { // initial setup - let data = check(opts.state, {}); + let state = check(opts.state, {}); let view = check(opts.view, () => null); let actions = check(opts.actions, {}); let mount = opts.mount || "body"; @@ -30,31 +30,18 @@ export default function app(opts) { 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 * - * @param {Object} input state used by actions - * @param {Object} actions functions that update state + * @param {Object} data state used by actions + * @param {Object} actions functions that update state */ - function dispatch(input, actions) { + function dispatch(data, actions) { Object.entries(actions).forEach(([name, action]) => { if (typeof action === "function") { actions[name] = (...args) => { // update date from action return - Object.assign(data, action(input, ...args)); + Object.assign(state, action(data, ...args)); // call update update(); @@ -67,13 +54,13 @@ export default function app(opts) { /** update dom */ const update = () => { - document.querySelector(mount).replaceChildren(view(data, actions)); + document.querySelector(mount).replaceChildren(view(state, actions)); } // mount view if (opts.view && mount) { - dispatch(data, actions); + dispatch(state, actions); } - return {state} + return {state,update} } \ No newline at end of file