diff --git a/dist/um.js b/dist/um.js new file mode 100644 index 0000000..d261359 --- /dev/null +++ b/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 }; diff --git a/dist/um.min.js b/dist/um.min.js index 88baa43..4677d64 100644 --- a/dist/um.min.js +++ b/dist/um.min.js @@ -1,3 +1,3 @@ -/*! Um v:0.3 | 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}; +/*! Um v:0.4.0 | MIT LICENSE | https://github.com/n2geoff/um */ +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 \ No newline at end of file diff --git a/dist/um.min.js.map b/dist/um.min.js.map index aab9b0d..4f423e6 100644 --- a/dist/um.min.js.map +++ b/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":[]} \ No newline at end of file +{"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":[]} \ No newline at end of file