change app mounting signature

README.md

@@ -9,7 +9,7 @@ Uhm, because you should think about, ah, NOT using it.
 ## Features
 - Real DOM
 - [Non-destructive (re)Rendering](https://github.com/bryhoyt/emerj)
-- Supports tagged html syntax via [xhtm](https://github.com/dy/xhtm)
+- Supports tagged `html` syntax via [xhtm](https://github.com/dy/xhtm)
 - No Build System
 - No Over Engineering
 - ~6kb minified / ~3kb gzip
@@ -28,9 +28,9 @@ import {app,h} from "https://cdn.jsdelivr.net/gh/n2geoff/uhm/dist/uhm.min.js";
 
 **Uhm** only has 3 exported functions, `app()`, `h()` and `html`, and the later is optional.
 
-### app({opts})
+### app(mount, {opts})
 
-The `app()` is the builder function and takes an `opts` object:
+The `app()` builder function takes two arguments, the `mount` point as a selector or element, and the `opts` object made of:
 
 #### Input:
 
@@ -39,7 +39,7 @@ The `app()` is the builder function and takes an `opts` object:
 | `state`   | `{}`                       | initial data state                                        |
 | `actions` | `{key: (state) => {}}`     | function object passed to view                              |
 | `view`    | `(state, actions) => null` | function that takes state and actions and returns valid dom |
-| `mount`   | `body`                     | valid query selector as mounting point                      |
+
 
 #### Output:
 
@@ -56,21 +56,33 @@ Interface with internal state for utility expansion
 
 The `h()` is a hypertext build utility that provides *a* way to build out your `view` DOM, but you can build your `view` using `html` or even `jsx`, really any method you like as long as it returns valid DOM.
 
+```js
+return h("h3", ${greeting});
+```
+
+### html
+
+Instead of returning hypertext to build your dom, you can use regular html
+
+```js
+return html`<h3>Hello ${greeting}</h3>`;
+```
 
 ## Example
 
 ```html
+    <div id="app"></div>
     <script type="module">
         import {app, h} from "./uhm.min.js";
 
-        const myapp = app({
+        const myapp = app("#app", {
             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}`),
                     h("div", {id: "test"}, [
-                        h("h1", "Um, Hello"),
+                        h("h1", "Uhm, Hello"),
                         h("p", 21),
                         h("hr")
                     ])

examples/h/todo.html

@@ -20,11 +20,11 @@
     </main>
 
     <script type="module">
-        import {app, h} from "../index.js";
+        import {app, h} from "../../index.js";
 
         const $ = document.querySelector.bind(document);
 
-        const todo = app({
+        const todo = app("#app", {
             state: {todos: [], value: ""},
             actions: {
                 submit: (state, event) => {
@@ -71,8 +71,7 @@
                     ]),
                     h("hr"),
                 ]);
-            },
-            mount: "#app"
+            }
         });
 
         // Update State outside Creation

examples/html/todo.html

@@ -14,11 +14,11 @@
     </main>
 
     <script type="module">
-        import { app, html } from '../src/app3.js';
+        import { app, html } from '../../index.js';
 
         const $ = (s) => Array.from(document.querySelectorAll(s));
 
-        const todo = app({
+        const todo = app("#app", {
             state: { todos: [], value: "" },
             actions: {
                 submit: (state, event) => {
@@ -69,8 +69,7 @@
                     <hr />
                 </main>
                 `;
-            },
-            mount: "#app",
+            }
         });
     </script>
 </body>

src/app.js

@@ -1,6 +1,6 @@
 import diff from './emerj.js';
 
-/*! Uhm v0.7.0 | MIT LICENSE | https://github.com/n2geoff/uhm */
+/*! Uhm v0.8.0 | MIT LICENSE | https://github.com/n2geoff/uhm */
 
 /**
  * App Builder
@@ -8,20 +8,19 @@ import diff from './emerj.js';
  * Composes state, actions, view together as
  * mountable ui
  *
+ * @param {String}   mount          element or querySelector value
  * @param {Object}   opts           options bag of state, view, actions, and mount
  * @param {Object}   opts.state     initial app object state
  * @param {Function} opts.view      function that returns dom. state and actions are passed in
  * @param {Object}   opts.actions   object functions includes and return state
- * @param {String}   opts.mount     querySelector value
  *
  * @returns {Object}                state and update() interface
  */
-export function app(opts) {
+export function app(mount = 'body', opts = {}) {
     // initial setup
     const state   = opts.state || {};
     const view    = opts.view || (() => null);
     const actions = opts.actions || {};
-    const mount   = opts.mount || 'body';
 
     /**
      * Assigns Dispatch-able Actions into App
@@ -47,7 +46,7 @@ export function app(opts) {
 
     /** update dom */
     const update = () => {
-        const parentNode = document.querySelector(mount);
+        const parentNode = typeof mount === 'string' ? document.querySelector(mount) : mount;
         let result = view(state, actions);
 
         // handle multiple nodes