From 72fc4f3be704064a3a43979f1327895a83f10c20 Mon Sep 17 00:00:00 2001
From: Geoff Doty <n2geoff@gmail.com>
Date: Sat, 4 May 2024 20:47:34 -0400
Subject: [PATCH] update api better to match existing standards

---
 README.md       | 15 +++++++--------
 src/app.js      | 26 +++++++++++++-------------
 test/index.html |  4 ++--
 3 files changed, 22 insertions(+), 23 deletions(-)

diff --git a/README.md b/README.md
index fc438ae..f97477c 100644
--- a/README.md
+++ b/README.md
@@ -15,16 +15,16 @@ This is an experimental composable ui library that takes ideas from Elm Architec
 
 the `app` builder takes an `opts` object that expects it to include:
 
-- `data` as initial data `{object}`
-- `methods` as `{object}` with functions definitions
+- `state` as initial data `{object}`
+- `actions` as `{object}` with functions definitions
 - `view` as `{function}` that returns valid dom
 
 and a querySelector compatible `selector` to mount the ui.
 
 `app` returns:
 
--  a object that returns a `state` object that you can use to update in other components
-- `methods` you can call outside the app component
+- `state` current of component as updatable function
+- `actions` to call on component
 
 ### Example
 
@@ -33,8 +33,8 @@ and a querySelector compatible `selector` to mount the ui.
         import {app, h} from "./tagged.js";
 
         const myapp = app({
-            data: {name: "[Your Name Here]", job: "Developer"},
-            view(state, methods) {
+            state: {name: "[Your Name Here]", job: "Developer"},
+            view(state, actions) {
                 return h("main", [
                     h("strong", `Greeting from ${state.name}`),
                     h("div", `Your local ${state.job}`),
@@ -59,7 +59,6 @@ and a querySelector compatible `selector` to mount the ui.
 
 ## Todo
 
-- Methods
-- Update API: state, actions
+- Actions Example
 
 > WORK-IN-PROGRESS
diff --git a/src/app.js b/src/app.js
index aea05c1..5707448 100644
--- a/src/app.js
+++ b/src/app.js
@@ -2,7 +2,7 @@ export default function app(opts, selector = "body") {
     // initial setup
     let data = {};
     let view = () => null;
-    let methods = {};
+    let actions = {};
 
     // query helper
     const $ = document.querySelector.bind(document);
@@ -14,39 +14,39 @@ export default function app(opts, selector = "body") {
         }
 
         // update ui
-        render();
+        update();
 
         // return current state
         return data;
     }
 
-    const render = () => {
-        $(selector).replaceChildren(view(data, methods));
+    const update = () => {
+        $(selector).replaceChildren(view(data, actions));
     }
 
-    // setup view
+    // setup view function
     if (opts.view && typeof opts.view === "function") {
         view = opts?.view;
     }
 
-    // setup data
-    if (opts.data && typeof opts.data === "object") {
+    // setup data object
+    if (opts.state && typeof opts.state === "object") {
         // wrap data in state object
-        data = state(opts.data);
+        data = state(opts.state);
     }
 
-    // setup methods
-    if (opts.methods && typeof opts.methods === "object") {
-        methods = opts.methods;
+    // setup actions object
+    if (opts.actions && typeof opts.actions === "object") {
+        actions = opts.actions;
     }
 
     // mount view
     if (opts.view && selector) {
-        render();
+        update();
     }
 
     return {
         state,
-        methods,
+        actions,
     };
 }
diff --git a/test/index.html b/test/index.html
index b6b6f97..d84f703 100644
--- a/test/index.html
+++ b/test/index.html
@@ -14,8 +14,8 @@
         import {app, h} from "../src/index.js";
 
         const myapp = app({
-            data: {name: "[Your Name Here]", job: "Developer"},
-            view(state, methods) {
+            state: {name: "[Your Name Here]", job: "Developer"},
+            view(state, actions) {
                 return h("main", [
                     h("strong", `Greeting from ${state.name}`),
                     h("div", `Your local ${state.job}`),