update api better to match existing standards

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

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,
     };
 }

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}`),