diff --git a/README.md b/README.md index 5ed0e2a..1a7fed2 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,10 @@ -# Um +# Uhm > Minimal JavaScript UI Builder -Um, is an experimental composable UI builder that takes ideas from early [hyperapp](https://github.com/jorgebucaran/hyperapp) design, but does not stick to strict Elm Architecture. +Uhm, is an experimental composable UI builder that takes ideas from early [hyperapp](https://github.com/jorgebucaran/hyperapp) design, but does not stick to strict Elm Architecture. -Um, because you should think about, um, NOT using it. +Uhm, because you should think about, ah, NOT using it. ## Features - Real DOM @@ -18,12 +18,12 @@ Um, because you should think about, um, NOT using it. Via JSDelivr CDN ```js -import {app,h} from "https://cdn.jsdelivr.net/gh/n2geoff/um/dist/um.min.js"; +import {app,h} from "https://cdn.jsdelivr.net/gh/n2geoff/uhm/dist/uhm.min.js"; ``` ## Overview -**Um** only has 2 exported functions, `app()` and `h()`, and the later is optional. +**Uhm** only has 2 exported functions, `app()` and `h()`, and the later is optional. ### app({opts}) @@ -33,10 +33,10 @@ The `app()` is the builder function and takes an `opts` object: | Property | Default | Description | | --------- | -------------------------- | ----------------------------------------------------------- | -| `state` | `{}` | initial data state | -| `actions` | `{}` | function object passed to view | +| `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 | +| `mount` | `body` | valid query selector as mounting point | #### Output: @@ -47,6 +47,8 @@ Interface with internal state for utility expansion | `state` | internal state object | | `update()` | function to render dom state | +> !IMPORTANT: long running operations require manual `update()` called + ### h(tag, [...args]) The `h()` is an **optional** hypertext build utility that weighs in around **~250b** and is provided as *a* way to build out your `view` DOM, but you can build your `view` using any method you like as long as it returns valid DOM. diff --git a/deno.json b/deno.json index 00c1599..242e92e 100644 --- a/deno.json +++ b/deno.json @@ -4,8 +4,8 @@ "exports": "./index.js", "tasks": { "dev": "deno run --watch index.js", - "format": "deno run -A npm:rollup index.js --file dist/um.js --format esm", - "minify": "deno run -A npm:terser dist/um.js -c -o dist/um.min.js --source-map url", + "format": "deno run -A npm:rollup index.js --file dist/uhm.js --format esm", + "minify": "deno run -A npm:terser dist/uhm.js -c -o dist/uhm.min.js --source-map url", "build": "deno task format && deno task minify" } } \ No newline at end of file diff --git a/dist/um.js b/dist/uhm.js similarity index 97% rename from dist/um.js rename to dist/uhm.js index 55b101a..96fa3e0 100644 --- a/dist/um.js +++ b/dist/uhm.js @@ -121,7 +121,7 @@ var diff = { }, }; -/*! Um v0.5.0 | MIT LICENSE | https://github.com/n2geoff/um */ +/*! Uhm v0.6.0 | MIT LICENSE | https://github.com/n2geoff/uhm */ /** * App Builder @@ -168,8 +168,8 @@ function app(opts) { // update date from action return Object.assign(state, action(data, ...args)); - // call update - update(); + // delay update + setTimeout(() => update(), 20); }; } }); diff --git a/dist/um.min.js b/dist/uhm.min.js similarity index 63% rename from dist/um.min.js rename to dist/uhm.min.js index 3ef44b6..94eb82b 100644 --- a/dist/um.min.js +++ b/dist/uhm.min.js @@ -1,4 +1,4 @@ /*! Emerj v1.0.0 | MIT LICENSE | https://github.com/bryhoyt/emerj */ var diff={attrs(elem){const attrs={};for(let i=0;inode.id),"string"==typeof modified){const html=modified;(modified=document.createElement(base.tagName)).innerHTML=html}const nodesByKey={old:this.nodesByKey(base,opts.key),new:this.nodesByKey(modified,opts.key)};let idx;for(idx=0;modified.firstChild;idx++){const newNode=modified.removeChild(modified.firstChild);if(idx>=base.childNodes.length){base.appendChild(newNode);continue}let baseNode=base.childNodes[idx];const newKey=opts.key(newNode);if(opts.key(baseNode)||newKey){const match=newKey&&newKey in nodesByKey.old?nodesByKey.old[newKey]:newNode;match!==baseNode&&(baseNode=base.insertBefore(match,baseNode))}if(baseNode.nodeType!==newNode.nodeType||baseNode.tagName!==newNode.tagName)base.replaceChild(newNode,baseNode);else if([Node.TEXT_NODE,Node.COMMENT_NODE].indexOf(baseNode.nodeType)>=0){if(baseNode.textContent===newNode.textContent)continue;baseNode.textContent=newNode.textContent}else if(baseNode!==newNode){const attrs={base:this.attrs(baseNode),new:this.attrs(newNode)};for(const attr in attrs.base)attr in attrs.new||baseNode.removeAttribute(attr);for(const attr in attrs.new)attr in attrs.base&&attrs.base[attr]===attrs.new[attr]||baseNode.setAttribute(attr,attrs.new[attr]);this.merge(baseNode,newNode)}}for(;base.childNodes.length>idx;)base.removeChild(base.lastChild)}}; -/*! Um v0.5.0 | MIT LICENSE | https://github.com/n2geoff/um */function app(opts){const state=check(opts.state,{}),view=check(opts.view,(()=>null)),actions=check(opts.actions,{}),mount=opts.mount||"body";function check(value,type){return typeof value==typeof type?value:type}const update=()=>{diff.merge(document.querySelector(mount),view(state,actions))};return opts.view&&mount&&function(data,actions){Object.entries(actions).forEach((([name,action])=>{"function"==typeof action&&(actions[name]=(...args)=>{Object.assign(state,action(data,...args)),update()})})),update()}(state,actions),{state:state,update:update}}function h(tag,...args){const el=document.createElement(tag);for(let i=0;inull)),actions=check(opts.actions,{}),mount=opts.mount||"body";function check(value,type){return typeof value==typeof type?value:type}const update=()=>{diff.merge(document.querySelector(mount),view(state,actions))};return opts.view&&mount&&function(data,actions){Object.entries(actions).forEach((([name,action])=>{"function"==typeof action&&(actions[name]=(...args)=>{Object.assign(state,action(data,...args)),setTimeout((()=>update()),20)})})),update()}(state,actions),{state:state,update:update}}function h(tag,...args){const el=document.createElement(tag);for(let i=0;i