diff --git a/README.md b/README.md index 11df035..80ae57c 100644 --- a/README.md +++ b/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`

Hello ${greeting}

`; +``` ## Example ```html +
diff --git a/src/app.js b/src/app.js index 9145637..56ba7d8 100644 --- a/src/app.js +++ b/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