dist

dist/um.js

@@ -0,0 +1,110 @@
+/**
+ * HTML Tag Scripting Function
+ *
+ * Generates new DOM element(s) from a tag, attributes
+ *
+ * @param {String} tag                 - tag name
+ * @param {Object|String|Array} args   - attributes, text or array of child elements
+ *
+ * @returns {HTMLElement} The created DOM element(s)
+ */
+function h(tag, ...args) {
+    const el = document.createElement(tag);
+
+    // support all scalar values as TextNodes
+    const isScalar = (value) => ["boolean", "string", "number"].includes(typeof value);
+
+    args.forEach((arg) => {
+        if (isScalar(arg)) {
+            el.appendChild(document.createTextNode(arg));
+        } else if (Array.isArray(arg)) {
+            el.append(...arg);
+        } else {
+            Object.assign(el, arg);
+        }
+    });
+
+    return el;
+}
+
+/**
+ * App Builder
+ *
+ * Composes state, actions, view together as
+ * mountable ui
+ *
+ * @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 proxy object
+ */
+function app(opts) {
+    // initial setup
+    let data    = check(opts.state, {});
+    let view    = check(opts.view, () => null);
+    let actions = check(opts.actions, {});
+    let mount   = opts.mount || "body";
+
+    /**
+     * simple type validation check
+     *
+     * @param {*} value
+     * @param {String} type
+     * @returns {*}
+     */
+    function check(value, type) {
+        return typeof value === typeof type ? value : type;
+    }
+
+    // state helper
+    const state = (state) => {
+        if(typeof state === "object") {
+            data = {...data, ...state};
+        }
+
+        // update ui
+        update();
+
+        // return current state
+        return data;
+    };
+
+    /**
+     * Assigns Dispatch-able Actions into App
+     *
+     * @param {Object} input        state used by actions
+     * @param {Object} actions      functions that update state
+     */
+    function dispatch(input, actions) {
+        Object.entries(actions).forEach(([name, action]) => {
+            if (typeof action === "function") {
+                actions[name] = (...args) => {
+                    // update date from action return
+                    Object.assign(data, action(input, ...args));
+
+                    // call update
+                    update();
+                };
+            }
+        });
+
+        update();
+    }
+
+    /** update dom */
+    const update = () => {
+        document.querySelector(mount).replaceChildren(view(data, actions));
+    };
+
+    // mount view
+    if (opts.view && mount) {
+        dispatch(data, actions);
+    }
+
+    return {state}
+}
+
+export { app, h };

dist/um.min.js

@@ -1,3 +1,3 @@
-/*! Um v:0.3 | MIT LICENSE | https://github.com/n2geoff/um */
+/*! Um v:0.4.0 | MIT LICENSE | https://github.com/n2geoff/um */
-function tag(tag,...args){const el=document.createElement(tag);return args.forEach((arg=>{["boolean","string","number"].includes(typeof arg)?el.appendChild(document.createTextNode(arg)):Array.isArray(arg)?el.append(...arg):Object.assign(el,arg)})),el}function app(opts){let data=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=()=>{document.querySelector(mount).replaceChildren(view(data,actions))};return opts.view&&mount&&function(input,actions){Object.entries(actions).forEach((([name,action])=>{"function"==typeof action&&(actions[name]=(...args)=>{Object.assign(data,action(input,...args)),update()})})),update()}(data,actions),{state:state=>("object"==typeof state&&(data={...data,...state}),update(),data)}}const h=tag;export{app,h};
+function h(tag,...args){const el=document.createElement(tag);return args.forEach((arg=>{["boolean","string","number"].includes(typeof arg)?el.appendChild(document.createTextNode(arg)):Array.isArray(arg)?el.append(...arg):Object.assign(el,arg)})),el}function app(opts){let data=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=()=>{document.querySelector(mount).replaceChildren(view(data,actions))};return opts.view&&mount&&function(input,actions){Object.entries(actions).forEach((([name,action])=>{"function"==typeof action&&(actions[name]=(...args)=>{Object.assign(data,action(input,...args)),update()})})),update()}(data,actions),{state:state=>("object"==typeof state&&(data={...data,...state}),update(),data)}}export{app,h};
 //# sourceMappingURL=true

dist/um.min.js.map

@@ -1 +1 @@
-{"version":3,"names":["tag","args","el","document","createElement","forEach","arg","includes","appendChild","createTextNode","Array","isArray","append","Object","assign","app","opts","data","check","state","view","actions","mount","value","type","update","querySelector","replaceChildren","input","entries","name","action","dispatch","h"],"sources":["dist/um.js"],"mappings":"AAQA,SAASA,IAAIA,OAAQC,MACjB,MAAMC,GAAKC,SAASC,cAAcJ,KAelC,OAVAC,KAAKI,SAASC,MAFc,CAAC,UAAW,SAAU,UAAUC,gBAG3CD,KACTJ,GAAGM,YAAYL,SAASM,eAAeH,MAChCI,MAAMC,QAAQL,KACrBJ,GAAGU,UAAUN,KAEbO,OAAOC,OAAOZ,GAAII,IACtB,IAGGJ,EACX,CAEA,SAASa,IAAIC,MAET,IAAIC,KAAUC,MAAMF,KAAKG,MAAO,CAAC,GAC7BC,KAAUF,MAAMF,KAAKI,MAAM,IAAM,OACjCC,QAAUH,MAAMF,KAAKK,QAAS,CAAC,GAC/BC,MAAUN,KAAKM,OAAS,OAG5B,SAASJ,MAAMK,MAAOC,MAClB,cAAcD,cAAiBC,KAAOD,MAAQC,IAClD,CAgCA,MAAMC,OAAS,KACXtB,SAASuB,cAAcJ,OAAOK,gBAAgBP,KAAKH,KAAMI,SAAS,EAQtE,OAJIL,KAAKI,MAAQE,OArBjB,SAAkBM,MAAOP,SACrBR,OAAOgB,QAAQR,SAAShB,SAAQ,EAAEyB,KAAMC,WACd,mBAAXA,SACPV,QAAQS,MAAQ,IAAI7B,QAEhBY,OAAOC,OAAOG,KAAMc,OAAOH,SAAU3B,OAGrCwB,QAAQ,EAEhB,IAGJA,QACJ,CAQIO,CAASf,KAAMI,SAGZ,CAACF,MAtCOA,QACS,iBAAVA,QACNF,KAAO,IAAIA,QAASE,QAIxBM,SAGOR,MA8Bf,CAEA,MAAMgB,EAAIjC,WAEDe,IAAKkB","ignoreList":[]}
+{"version":3,"names":["h","tag","args","el","document","createElement","forEach","arg","includes","appendChild","createTextNode","Array","isArray","append","Object","assign","app","opts","data","check","state","view","actions","mount","value","type","update","querySelector","replaceChildren","input","entries","name","action","dispatch"],"sources":["dist/um.js"],"mappings":"AAUA,SAASA,EAAEC,OAAQC,MACf,MAAMC,GAAKC,SAASC,cAAcJ,KAelC,OAVAC,KAAKI,SAASC,MAFc,CAAC,UAAW,SAAU,UAAUC,gBAG3CD,KACTJ,GAAGM,YAAYL,SAASM,eAAeH,MAChCI,MAAMC,QAAQL,KACrBJ,GAAGU,UAAUN,KAEbO,OAAOC,OAAOZ,GAAII,IACtB,IAGGJ,EACX,CAgBA,SAASa,IAAIC,MAET,IAAIC,KAAUC,MAAMF,KAAKG,MAAO,CAAC,GAC7BC,KAAUF,MAAMF,KAAKI,MAAM,IAAM,OACjCC,QAAUH,MAAMF,KAAKK,QAAS,CAAC,GAC/BC,MAAUN,KAAKM,OAAS,OAS5B,SAASJ,MAAMK,MAAOC,MAClB,cAAcD,cAAiBC,KAAOD,MAAQC,IAClD,CAsCA,MAAMC,OAAS,KACXtB,SAASuB,cAAcJ,OAAOK,gBAAgBP,KAAKH,KAAMI,SAAS,EAQtE,OAJIL,KAAKI,MAAQE,OAtBjB,SAAkBM,MAAOP,SACrBR,OAAOgB,QAAQR,SAAShB,SAAQ,EAAEyB,KAAMC,WACd,mBAAXA,SACPV,QAAQS,MAAQ,IAAI7B,QAEhBY,OAAOC,OAAOG,KAAMc,OAAOH,SAAU3B,OAGrCwB,QAAQ,EAEhB,IAGJA,QACJ,CASIO,CAASf,KAAMI,SAGZ,CAACF,MA5COA,QACS,iBAAVA,QACNF,KAAO,IAAIA,QAASE,QAIxBM,SAGOR,MAoCf,QAESF,IAAKhB","ignoreList":[]}