From afc0bd6b089ee63b954bf28d2f3698f00372ddb4 Mon Sep 17 00:00:00 2001 From: Yiyi Sun Date: Thu, 24 Dec 2020 20:31:30 -0500 Subject: [PATCH] :npm build and update docs --- README.md | 36 +- demo-html/app.js | 2 +- demo-html/app.js.map | 2 +- demo/app.js | 2 +- demo/app.js.map | 2 +- demo/home.html | 25 +- dist/apprun-dev-tools.js | 2 +- dist/apprun-dev-tools.js.map | 2 +- dist/apprun-html.esm.js | 2 +- dist/apprun-html.esm.js.map | 2 +- dist/apprun-html.js | 2 +- dist/apprun-html.js.map | 2 +- dist/apprun.js | 2 +- dist/apprun.js.map | 2 +- docs/03-dev-tools.md | 16 +- docs/imgs/apprun-debug-log.mp4 | Bin 0 -> 2244808 bytes esm/apprun-dev-tools-tests.js | 24 +- esm/apprun-dev-tools-tests.js.map | 2 +- esm/apprun-dev-tools.js | 4 +- esm/apprun-dev-tools.js.map | 2 +- esm/vdom-html.js | 2 + esm/vdom-html.js.map | 2 +- package-lock.json | 10249 +--------------------------- package.json | 10 +- 24 files changed, 119 insertions(+), 10277 deletions(-) create mode 100644 docs/imgs/apprun-debug-log.mp4 diff --git a/README.md b/README.md index 94029698..9149158c 100644 --- a/README.md +++ b/README.md @@ -42,7 +42,7 @@ You can build applications using [Component](docs/#/05-component) that also have * [Order from Amazon](https://www.amazon.com/Practical-Application-Development-AppRun-High-Performance/dp/1484240685/) -## AppRun CLI +## Create AppRun Apps We recommend using TypeScript and JSX. TypeScript provides [strong typing](https://medium.com/@yiyisun/strong-typing-in-apprun-78520be329c1). JSX provides more [advanced features](https://dev.to/yysun/advanced-view-features-in-apprun-17g5). @@ -86,46 +86,20 @@ npx degit yysun/apprun-electron-forge my-app npx degit yysun/apprun-websockets my-app npx degit yysun/apprun-websockets-sqlite my-app ``` +## AppRun Developer Tools -## ES2015 by Default - -In the past, the AppRun default version on npm is 1.x. The CLI creates tsconfig for es5. You can use --es6 option to create tsconfig for 2.x. - -On Feb 21, 2020, the default version on npm has been changed from 1.x to 2.x. And the CLI creates tsconfig for es2015. You can use --es5 option for 1.x. - -When upgrading projects to the latest version (2.x), please modify the tsconfig from targeting es5 to es2015. - -Currently, the npm tags are as following: - -* apprun@es5: 1.x, stable, es5 -* apprun@latest: 2.x, stable, es2015, web components -* apprun@next: 3.x, dev, es2015, web components, lit-html - -## Developer Tools - -### CLI in Console - -To use the AppRun dev-tools CLI, include the dev-tools script. +To use the AppRun dev-tools, include the dev-tools script. ```JavaScript - + ``` See [AppRun CLI Run in the Console](https://dev.to/yysun/make-cli-run-in-the-console-42ho) -### Dev-Tools Extensions -AppRun supports the Redux DevTools Extension. To use the dev-tools, install the [Redux DevTools Extension](https://github.com/zalmoxisus/redux-devtools-extension). You can monitor the events and states in the devtools. +AppRun Dev Tools connects to the Redux DevTools Extension. To use the dev-tools, install the [Redux DevTools Extension](https://github.com/zalmoxisus/redux-devtools-extension). You can monitor the events and states. ![app-dev-tools](docs/imgs/apprun-dev-tools.gif) - -### VS Code Extension - -AppRun has a code snippet extension for VS Code that you can install from the extension marketplace. It inserts the AppRun code template for application, component and event handling. - -![app-dev-tools](docs/imgs/apprun-vscode-extension.png) - - ## Contribute You can launch the webpack dev-server and the demo app from the _demo_ folder with the following npm commands: diff --git a/demo-html/app.js b/demo-html/app.js index efccd5d5..a72c986c 100644 --- a/demo-html/app.js +++ b/demo-html/app.js @@ -1,2 +1,2 @@ -!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.apprun=e():t.apprun=e()}(this,(function(){return(()=>{"use strict";var t={643:(t,e,n)=>{n.r(e);var s=n(778);let o=class extends s.Component{constructor(){super(...arguments),this.view=({num:t,children:e})=>s.default.h("div",null,s.default.h("h1",null,t),e),this.update={"-1":t=>Object.assign(Object.assign({},t),{num:t.num-1}),"+1":t=>Object.assign(Object.assign({},t),{num:t.num+1})},this.mounted=({num:t},e)=>({num:parseInt(t),children:e}),this.rendered=({num:t})=>{this.element.setAttribute("num",t)}}};o=function(t,e,n,s){var o,i=arguments.length,r=i<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,n):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,n,s);else for(var a=t.length-1;a>=0;a--)(o=t[a])&&(r=(i<3?o(r):i>3?o(e,n,r):o(e,n))||r);return i>3&&r&&Object.defineProperty(e,n,r),r}([(0,s.customElement)("my-counter")],o);let i=class extends s.Component{constructor(){super(...arguments),this.state={},this.view=t=>s.default.h(s.default.Fragment,null,s.default.h("div",null,s.default.h("button",{$onclick:"fetchComic"},"XKCD")),t.loading?s.default.h("div",null,"loading ... "):"",t.comic&&s.default.h(s.default.Fragment,null,s.default.h("h3",null,t.comic.title),s.default.h("img",{src:t.comic.url}))),this.update={loading:(t,e)=>({loading:!0}),fetchComic:t=>{return e=this,n=void 0,o=function*(){this.run("loading",!0);const t=yield fetch("https://xkcd-imgs.herokuapp.com/");return{comic:yield t.json(),loading:!1}},new((s=void 0)||(s=Promise))((function(t,i){function r(t){try{c(o.next(t))}catch(t){i(t)}}function a(t){try{c(o.throw(t))}catch(t){i(t)}}function c(e){var n;e.done?t(e.value):(n=e.value,n instanceof s?n:new s((function(t){t(n)}))).then(r,a)}c((o=o.apply(e,n||[])).next())}));var e,n,s,o}},this.mounted=()=>this.run("fetchComic")}};i=function(t,e,n,s){var o,i=arguments.length,r=i<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,n):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,n,s);else for(var a=t.length-1;a>=0;a--)(o=t[a])&&(r=(i<3?o(r):i>3?o(e,n,r):o(e,n))||r);return i>3&&r&&Object.defineProperty(e,n,r),r}([(0,s.customElement)("my-xkcd",{shadow:!0,render:!1})],i)},752:(t,e,n)=>{n.d(e,{g:()=>s,Z:()=>r});class s{constructor(){this._events={}}on(t,e,n={}){this._events[t]=this._events[t]||[],this._events[t].push({fn:e,options:n})}off(t,e){const n=this._events[t]||[];this._events[t]=n.filter((t=>t.fn!==e))}find(t){return this._events[t]}run(t,...e){const n=this._events[t]||[];return console.assert(n&&n.length>0,"No subscriber for event: "+t),this._events[t]=n.filter((t=>!t.options.once)),n.forEach((n=>{const{fn:s,options:o}=n;return o.delay?this.delay(t,s,e,o):s.apply(this,e),!n.options.once})),n.length}once(t,e,n={}){this.on(t,e,Object.assign(Object.assign({},n),{once:!0}))}delay(t,e,n,s){s._t&&clearTimeout(s._t),s._t=setTimeout((()=>{clearTimeout(s._t),e.apply(this,n)}),s.delay)}}let o;const i="object"==typeof self&&self.self===self&&self||"object"==typeof n.g&&n.g.global===n.g&&n.g;i.app&&i._AppRunVersions?o=i.app:(o=new s,i.app=o,i._AppRunVersions="AppRun-2");const r=o},778:(t,e,n)=>{n.d(e,{Component:()=>p,customElement:()=>c,default:()=>_});var s=n(752),o=n(703);const i=(t,e={})=>class extends HTMLElement{constructor(){super()}get component(){return this._component}get state(){return this._component.state}static get observedAttributes(){return(e.observedAttributes||[]).map((t=>t.toLowerCase()))}connectedCallback(){if(this.isConnected&&!this._component){const n=e||{};this._shadowRoot=n.shadow?this.attachShadow({mode:"open"}):this;const s=n.observedAttributes||[],o=s.reduce(((t,e)=>{const n=e.toLowerCase();return n!==e&&(t[n]=e),t}),{});this._attrMap=t=>o[t]||t;const i={};Array.from(this.attributes).forEach((t=>i[this._attrMap(t.name)]=t.value)),s.forEach((t=>{void 0!==this[t]&&(i[t]=this[t]),Object.defineProperty(this,t,{get:()=>i[t],set(e){this.attributeChangedCallback(t,i[t],e)},configurable:!0,enumerable:!0})}));const r=this.children?Array.from(this.children):[];if(r.forEach((t=>t.parentElement.removeChild(t))),this._component=new t(Object.assign(Object.assign({},i),{children:r})).mount(this._shadowRoot,n),this._component._props=i,this._component.dispatchEvent=this.dispatchEvent.bind(this),this._component.mounted){const t=this._component.mounted(i,r,this._component.state);void 0!==t&&(this._component.state=t)}this.on=this._component.on.bind(this._component),this.run=this._component.run.bind(this._component),!1!==n.render&&this._component.run(".")}}disconnectedCallback(){var t,e,n,s;null===(e=null===(t=this._component)||void 0===t?void 0:t.unload)||void 0===e||e.call(t),null===(s=null===(n=this._component)||void 0===n?void 0:n.unmount)||void 0===s||s.call(n),this._component=null}attributeChangedCallback(t,n,s){if(this._component){const o=this._attrMap(t);this._component._props[o]=s,this._component.run("attributeChanged",o,n,s),s!==n&&!1!==e.render&&window.requestAnimationFrame((()=>{this._component.run(".")}))}}},r=(t,e,n)=>{"undefined"!=typeof customElements&&customElements.define(t,i(e,n))},a={meta:new WeakMap,defineMetadata(t,e,n){this.meta.has(n)||this.meta.set(n,{}),this.meta.get(n)[t]=e},getMetadataKeys(t){return t=Object.getPrototypeOf(t),this.meta.get(t)?Object.keys(this.meta.get(t)):[]},getMetadata(t,e){return e=Object.getPrototypeOf(e),this.meta.get(e)?this.meta.get(e)[t]:null}};function c(t,e){return function(n){return r(t,n,e),n}}const h=(t,e)=>(e?t.state[e]:t.state)||"",l=(t,e,n)=>{if(e){const s=t.state||{};s[e]=n,t.setState(s)}else t.setState(n)},u={};s.Z.on("get-components",(t=>t.components=u));const d=t=>t;class p{constructor(t,e,n,o){this.state=t,this.view=e,this.update=n,this.options=o,this._app=new s.g,this._actions=[],this._global_events=[],this._history=[],this._history_idx=-1,this._history_prev=()=>{this._history_idx--,this._history_idx>=0?this.setState(this._history[this._history_idx],{render:!0,history:!1}):this._history_idx=0},this._history_next=()=>{this._history_idx++,this._history_idxthis.mount(t,Object.assign(Object.assign({},e),{render:!0}))}render(t,e){s.Z.render(t,e,this)}_view(t,e=null){if(!this.view)return;const n=s.Z.createElement;s.Z.h=s.Z.createElement=(t,e,...o)=>(e&&Object.keys(e).forEach((n=>{n.startsWith("$")&&(((t,e,n,o)=>{if(t.startsWith("$on")){const n=e[t];if(t=t.substring(1),"boolean"==typeof n)e[t]=e=>o.run(t,e);else if("string"==typeof n)e[t]=t=>o.run(n,t);else if("function"==typeof n)e[t]=t=>o.setState(n(o.state,t));else if(Array.isArray(n)){const[s,...i]=n;"string"==typeof s?e[t]=t=>o.run(s,...i,t):"function"==typeof s&&(e[t]=t=>o.setState(s(o.state,...i,t)))}}else if("$bind"===t){const s=e.type||"text",i="string"==typeof e[t]?e[t]:e.name;if("input"===n)switch(s){case"checkbox":e.checked=h(o,i),e.onclick=t=>l(o,i||t.target.name,t.target.checked);break;case"radio":e.checked=h(o,i)===e.value,e.onclick=t=>l(o,i||t.target.name,t.target.value);break;case"number":case"range":e.value=h(o,i),e.oninput=t=>l(o,i||t.target.name,Number(t.target.value));break;default:e.value=h(o,i),e.oninput=t=>l(o,i||t.target.name,t.target.value)}else"select"===n?(e.value=h(o,i),e.onchange=t=>{t.target.multiple||l(o,i||t.target.name,t.target.value)}):"option"===n?(e.selected=h(o,i),e.onclick=t=>l(o,i||t.target.name,t.target.selected)):"textarea"===n&&(e.innerHTML=h(o,i),e.oninput=t=>l(o,i||t.target.name,t.target.value))}else s.Z.run("$",{key:t,tag:n,props:e,component:o})})(n,e,t,this),delete e[n])})),n(t,e,...o));const o=e?this.view(t,e):this.view(t);return s.Z.h=s.Z.createElement=n,o}renderState(t,e=null){if(!this.view)return;let n=e||this._view(t);if(s.Z.debug&&s.Z.run("debug",{component:this,_:n?".":"-",state:t,vdom:n,el:this.element}),"object"!=typeof document)return;const o="string"==typeof this.element?document.getElementById(this.element):this.element;if(o){const t="_c";this.unload?o._component===this&&o.getAttribute(t)===this.tracking_id||(this.tracking_id=(new Date).valueOf().toString(),o.setAttribute(t,this.tracking_id),"undefined"!=typeof MutationObserver&&(this.observer||(this.observer=new MutationObserver((t=>{t[0].oldValue!==this.tracking_id&&document.body.contains(o)||(this.unload(this.state),this.observer.disconnect(),this.observer=null)}))),this.observer.observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeOldValue:!0,attributeFilter:[t]}))):o.removeAttribute&&o.removeAttribute(t),o._component=this}e||this.render(o,n),this.rendered&&this.rendered(this.state)}setState(t,e={render:!0,history:!1}){if(t instanceof Promise)Promise.all([t,this._state]).then((t=>{t[0]&&this.setState(t[0])})).catch((t=>{throw console.error(t),t})),this._state=t;else{if(this._state=t,null==t)return;this.state=t,!1!==e.render&&this.renderState(t),!1!==e.history&&this.enable_history&&(this._history=[...this._history,t],this._history_idx=this._history.length-1),"function"==typeof e.callback&&e.callback(this.state)}}mount(t=null,e){var n,o;if(console.assert(!this.element,"Component already mounted."),this.options=e=Object.assign(Object.assign({},this.options),e),this.element=t,this.global_event=e.global_event,this.enable_history=!!e.history,this.enable_history&&(this.on(e.history.prev||"history-prev",this._history_prev),this.on(e.history.next||"history-next",this._history_next)),e.route&&(this.update=this.update||{},this.update[e.route]=d),this.add_actions(),this.state=null!==(o=null!==(n=this.state)&&void 0!==n?n:this.model)&&void 0!==o?o:{},"function"==typeof this.state&&(this.state=this.state()),e.render?this.setState(this.state,{render:!0,history:!0}):this.setState(this.state,{render:!1,history:!0}),s.Z.debug){const e="string"==typeof t?t:t.id;u[e]=u[e]||[],u[e].push(this)}return this}is_global_event(t){return t&&(this.global_event||this._global_events.indexOf(t)>=0||t.startsWith("#")||t.startsWith("/")||t.startsWith("@"))}add_action(t,e,n={}){e&&"function"==typeof e&&(n.global&&this._global_events.push(t),this.on(t,((...o)=>{s.Z.debug&&s.Z.run("debug",{component:this,_:">",event:t,p:o,current_state:this.state,options:n});const i=e(this.state,...o);s.Z.debug&&s.Z.run("debug",{component:this,_:"<",event:t,p:o,newState:i,state:this.state,options:n}),this.setState(i,n)}),n))}add_actions(){const t=this.update||{};a.getMetadataKeys(this).forEach((e=>{if(e.startsWith("apprun-update:")){const n=a.getMetadata(e,this);t[n.name]=[this[n.key].bind(this),n.options]}}));const e={};Array.isArray(t)?t.forEach((t=>{const[n,s,o]=t;n.toString().split(",").forEach((t=>e[t.trim()]=[s,o]))})):Object.keys(t).forEach((n=>{const s=t[n];("function"==typeof s||Array.isArray(s))&&n.split(",").forEach((t=>e[t.trim()]=s))})),e["."]||(e["."]=d),Object.keys(e).forEach((t=>{const n=e[t];"function"==typeof n?this.add_action(t,n):Array.isArray(n)&&this.add_action(t,n[0],n[1])}))}run(t,...e){const n=t.toString();return this.is_global_event(n)?s.Z.run(n,...e):this._app.run(n,...e)}on(t,e,n){const o=t.toString();return this._actions.push({name:o,fn:e}),this.is_global_event(o)?s.Z.on(o,e,n):this._app.on(o,e,n)}unmount(){var t;null===(t=this.observer)||void 0===t||t.disconnect(),this._actions.forEach((t=>{const{name:e,fn:n}=t;this.is_global_event(e)?s.Z.off(e,n):this._app.off(e,n)}))}}p.__isAppRunComponent=!0;const f="//",m="///",g=t=>{if(t||(t="#"),t.startsWith("#")){const[e,...n]=t.split("/");s.Z.run(e,...n)||s.Z.run(m,e,...n),s.Z.run(f,e,...n)}else if(t.startsWith("/")){const[e,n,...o]=t.split("/");s.Z.run("/"+n,...o)||s.Z.run(m,"/"+n,...o),s.Z.run(f,"/"+n,...o)}else s.Z.run(t)||s.Z.run(m,t),s.Z.run(f,t)};s.Z.h=s.Z.createElement=o.az,s.Z.render=function(t,e,n){(0,o.yj)(t,e,n)},s.Z.Fragment=o.HY,s.Z.webComponent=r,s.Z.start=(t,e,n,s,o)=>{const i=Object.assign(Object.assign({},o),{render:!0,global_event:!0}),r=new p(e,n,s);return o&&o.rendered&&(r.rendered=o.rendered),r.mount(t,i),r};const y=t=>{};s.Z.on("$",y),s.Z.on("debug",(t=>y)),s.Z.on(f,y),s.Z.on("#",y),s.Z.route=g,s.Z.on("route",(t=>s.Z.route&&s.Z.route(t))),"object"==typeof document&&document.addEventListener("DOMContentLoaded",(()=>{s.Z.route===g&&(window.onpopstate=()=>g(location.hash),g(location.hash))}));const _=s.Z;"object"==typeof window&&(window.Component=p,window.React=s.Z,window.on=function(t,e={}){return function(n,s){const o=t?t.toString():s;a.defineMetadata("apprun-update:"+o,{name:o,key:s,options:e},n)}},window.customElement=c)},703:(t,e,n)=>{n.d(e,{HY:()=>f,az:()=>r,yj:()=>c});var s=n(752);function o(t,e,n=0){var i;if("string"==typeof t)return t;if(Array.isArray(t))return t.map((t=>o(t,e,n++)));let r=t;if(t&&"function"==typeof t.tag&&Object.getPrototypeOf(t.tag).__isAppRunComponent&&(r=function(t,e,n){const{tag:o,props:i,children:r}=t;let a="_"+n,c=i&&i.id;c?a=c:c=`_${n}${Date.now()}`,e.__componentCache||(e.__componentCache={});let h=e.__componentCache[a];h&&h instanceof o||(h=e.__componentCache[a]=new o(Object.assign(Object.assign({},i),{children:r})).mount(c));let l=h.state;if(h.mounted){const t=h.mounted(i,r,h.state);l=void 0!==t?t:h.state}if(l instanceof Promise){const t=t=>{h.element=t,Promise.all([l]).then((t=>{t[0]?h.setState(t[0]):h.setState(h.state)}))};return s.Z.h("section",Object.assign({},i,{ref:e=>t(e),_component:h}))}if(null!=l){const t=h._view(l,i),e=e=>{h.element=e,h.state=l,h.renderState(l,t)};return s.Z.h("section",Object.assign({},i,{ref:t=>e(t),_component:h}),t)}return s.Z.h("section",Object.assign({},i,{_component:h}))}(t,e,n)),r&&Array.isArray(r.children)){const t=null===(i=r.props)||void 0===i?void 0:i._component;if(t){let e=0;r.children=r.children.map((n=>o(n,t,e++)))}else r.children=r.children.map((t=>o(t,e,n++)))}return r}function i(t){const e=[],n=t=>{null!=t&&""!==t&&!1!==t&&e.push("function"==typeof t||"object"==typeof t?t:""+t)};return t&&t.forEach((t=>{Array.isArray(t)?t.forEach((t=>n(t))):n(t)})),e}function r(t,e,...n){const s=i(n);if("string"==typeof t)return{tag:t,props:e,children:s};if(Array.isArray(t))return t;if(void 0===t&&n)return s;if(Object.getPrototypeOf(t).__isAppRunComponent)return{tag:t,props:e,children:s};if("function"==typeof t)return t(e,s);throw new Error("Unknown tag in vdom "+t)}const a=new WeakMap,c=function(t,e,n={}){if(null==e||!1===e)return;e=o(e,n);const s="SVG"===(null==t?void 0:t.nodeName);t&&(Array.isArray(e)?l(t,e,s):l(t,[e],s))};function h(t,e,n){3!==e._op&&(n=n||"svg"===e.tag,function(t,e){const n=t.nodeName,s=""+(e.tag||"");return n.toUpperCase()===s.toUpperCase()}(t,e)?(!(2&e._op)&&l(t,e.children,n),!(1&e._op)&&p(t,e.props,n)):t.parentNode.replaceChild(d(e,n),t))}function l(t,e,n){var s;const o=(null===(s=t.childNodes)||void 0===s?void 0:s.length)||0,i=(null==e?void 0:e.length)||0,r=Math.min(o,i);for(let s=0;sr;)t.removeChild(t.lastChild),c--;if(i>r){const s=document.createDocumentFragment();for(let t=r;tn.appendChild(d(t,e)))),n}function p(t,e,n){const s=t._props||{};e=function(t,e){e.class=e.class||e.className,delete e.className;const n={};return t&&Object.keys(t).forEach((t=>n[t]=null)),e&&Object.keys(e).forEach((t=>n[t]=e[t])),n}(s,e||{}),t._props=e;for(const s in e){const o=e[s];if(s.startsWith("data-")){const e=s.substring(5).replace(/-(\w)/g,(t=>t[1].toUpperCase()));t.dataset[e]!==o&&(o||""===o?t.dataset[e]=o:delete t.dataset[e])}else if("style"===s)if(t.style.cssText&&(t.style.cssText=""),"string"==typeof o)t.style.cssText=o;else for(const e in o)t.style[e]!==o[e]&&(t.style[e]=o[e]);else if(s.startsWith("xlink")){const e=s.replace("xlink","").toLowerCase();null==o||!1===o?t.removeAttributeNS("http://www.w3.org/1999/xlink",e):t.setAttributeNS("http://www.w3.org/1999/xlink",e,o)}else s.startsWith("on")?o&&"function"!=typeof o?"string"==typeof o&&(o?t.setAttribute(s,o):t.removeAttribute(s)):t[s]=o:/^id$|^class$|^list$|^readonly$|^contenteditable$|^role|-/g.test(s)||n?t.getAttribute(s)!==o&&(o?t.setAttribute(s,o):t.removeAttribute(s)):t[s]!==o&&(t[s]=o);"key"===s&&o&&(a[o]=t)}e&&"function"==typeof e.ref&&window.requestAnimationFrame((()=>e.ref(t)))}function f(t,...e){return i(e)}}},e={};function n(s){if(e[s])return e[s].exports;var o=e[s]={exports:{}};return t[s](o,o.exports,n),o.exports}return n.d=(t,e)=>{for(var s in e)n.o(e,s)&&!n.o(t,s)&&Object.defineProperty(t,s,{enumerable:!0,get:e[s]})},n.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(t){if("object"==typeof window)return window}}(),n.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),n.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n(643)})()})); +!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.apprun=e():t.apprun=e()}(this,(function(){return(()=>{"use strict";var t={643:(t,e,n)=>{n.r(e);var s=n(778);let o=class extends s.Component{constructor(){super(...arguments),this.view=({num:t,children:e})=>s.default.h("div",null,s.default.h("h1",null,t),e),this.update={"-1":t=>Object.assign(Object.assign({},t),{num:t.num-1}),"+1":t=>Object.assign(Object.assign({},t),{num:t.num+1})},this.mounted=({num:t},e)=>({num:parseInt(t),children:e}),this.rendered=({num:t})=>{this.element.setAttribute("num",t)}}};o=function(t,e,n,s){var o,i=arguments.length,r=i<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,n):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,n,s);else for(var a=t.length-1;a>=0;a--)(o=t[a])&&(r=(i<3?o(r):i>3?o(e,n,r):o(e,n))||r);return i>3&&r&&Object.defineProperty(e,n,r),r}([(0,s.customElement)("my-counter")],o);let i=class extends s.Component{constructor(){super(...arguments),this.state={},this.view=t=>s.default.h(s.default.Fragment,null,s.default.h("div",null,s.default.h("button",{$onclick:"fetchComic"},"XKCD")),t.loading?s.default.h("div",null,"loading ... "):"",t.comic&&s.default.h(s.default.Fragment,null,s.default.h("h3",null,t.comic.title),s.default.h("img",{src:t.comic.url}))),this.update={loading:(t,e)=>({loading:!0}),fetchComic:async t=>{this.run("loading",!0);const e=await fetch("https://xkcd-imgs.herokuapp.com/");return{comic:await e.json(),loading:!1}}},this.mounted=()=>this.run("fetchComic")}};i=function(t,e,n,s){var o,i=arguments.length,r=i<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,n):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,n,s);else for(var a=t.length-1;a>=0;a--)(o=t[a])&&(r=(i<3?o(r):i>3?o(e,n,r):o(e,n))||r);return i>3&&r&&Object.defineProperty(e,n,r),r}([(0,s.customElement)("my-xkcd",{shadow:!0,render:!1})],i)},752:(t,e,n)=>{n.d(e,{g:()=>s,Z:()=>r});class s{constructor(){this._events={}}on(t,e,n={}){this._events[t]=this._events[t]||[],this._events[t].push({fn:e,options:n})}off(t,e){const n=this._events[t]||[];this._events[t]=n.filter((t=>t.fn!==e))}find(t){return this._events[t]}run(t,...e){const n=this._events[t]||[];return console.assert(n&&n.length>0,"No subscriber for event: "+t),this._events[t]=n.filter((t=>!t.options.once)),n.forEach((n=>{const{fn:s,options:o}=n;return o.delay?this.delay(t,s,e,o):s.apply(this,e),!n.options.once})),n.length}once(t,e,n={}){this.on(t,e,Object.assign(Object.assign({},n),{once:!0}))}delay(t,e,n,s){s._t&&clearTimeout(s._t),s._t=setTimeout((()=>{clearTimeout(s._t),e.apply(this,n)}),s.delay)}}let o;const i="object"==typeof self&&self.self===self&&self||"object"==typeof n.g&&n.g.global===n.g&&n.g;i.app&&i._AppRunVersions?o=i.app:(o=new s,i.app=o,i._AppRunVersions="AppRun-2");const r=o},778:(t,e,n)=>{n.d(e,{Component:()=>p,customElement:()=>c,default:()=>y});var s=n(752),o=n(703);const i=(t,e={})=>class extends HTMLElement{constructor(){super()}get component(){return this._component}get state(){return this._component.state}static get observedAttributes(){return(e.observedAttributes||[]).map((t=>t.toLowerCase()))}connectedCallback(){if(this.isConnected&&!this._component){const n=e||{};this._shadowRoot=n.shadow?this.attachShadow({mode:"open"}):this;const s=n.observedAttributes||[],o=s.reduce(((t,e)=>{const n=e.toLowerCase();return n!==e&&(t[n]=e),t}),{});this._attrMap=t=>o[t]||t;const i={};Array.from(this.attributes).forEach((t=>i[this._attrMap(t.name)]=t.value)),s.forEach((t=>{void 0!==this[t]&&(i[t]=this[t]),Object.defineProperty(this,t,{get:()=>i[t],set(e){this.attributeChangedCallback(t,i[t],e)},configurable:!0,enumerable:!0})}));const r=this.children?Array.from(this.children):[];if(r.forEach((t=>t.parentElement.removeChild(t))),this._component=new t(Object.assign(Object.assign({},i),{children:r})).mount(this._shadowRoot,n),this._component._props=i,this._component.dispatchEvent=this.dispatchEvent.bind(this),this._component.mounted){const t=this._component.mounted(i,r,this._component.state);void 0!==t&&(this._component.state=t)}this.on=this._component.on.bind(this._component),this.run=this._component.run.bind(this._component),!1!==n.render&&this._component.run(".")}}disconnectedCallback(){var t,e,n,s;null===(e=null===(t=this._component)||void 0===t?void 0:t.unload)||void 0===e||e.call(t),null===(s=null===(n=this._component)||void 0===n?void 0:n.unmount)||void 0===s||s.call(n),this._component=null}attributeChangedCallback(t,n,s){if(this._component){const o=this._attrMap(t);this._component._props[o]=s,this._component.run("attributeChanged",o,n,s),s!==n&&!1!==e.render&&window.requestAnimationFrame((()=>{this._component.run(".")}))}}},r=(t,e,n)=>{"undefined"!=typeof customElements&&customElements.define(t,i(e,n))},a={meta:new WeakMap,defineMetadata(t,e,n){this.meta.has(n)||this.meta.set(n,{}),this.meta.get(n)[t]=e},getMetadataKeys(t){return t=Object.getPrototypeOf(t),this.meta.get(t)?Object.keys(this.meta.get(t)):[]},getMetadata(t,e){return e=Object.getPrototypeOf(e),this.meta.get(e)?this.meta.get(e)[t]:null}};function c(t,e){return function(n){return r(t,n,e),n}}const h=(t,e)=>(e?t.state[e]:t.state)||"",l=(t,e,n)=>{if(e){const s=t.state||{};s[e]=n,t.setState(s)}else t.setState(n)},u={};s.Z.on("get-components",(t=>t.components=u));const d=t=>t;class p{constructor(t,e,n,o){this.state=t,this.view=e,this.update=n,this.options=o,this._app=new s.g,this._actions=[],this._global_events=[],this._history=[],this._history_idx=-1,this._history_prev=()=>{this._history_idx--,this._history_idx>=0?this.setState(this._history[this._history_idx],{render:!0,history:!1}):this._history_idx=0},this._history_next=()=>{this._history_idx++,this._history_idxthis.mount(t,Object.assign(Object.assign({},e),{render:!0}))}render(t,e){s.Z.render(t,e,this)}_view(t,e=null){if(!this.view)return;const n=s.Z.createElement;s.Z.h=s.Z.createElement=(t,e,...o)=>(e&&Object.keys(e).forEach((n=>{n.startsWith("$")&&(((t,e,n,o)=>{if(t.startsWith("$on")){const n=e[t];if(t=t.substring(1),"boolean"==typeof n)e[t]=e=>o.run(t,e);else if("string"==typeof n)e[t]=t=>o.run(n,t);else if("function"==typeof n)e[t]=t=>o.setState(n(o.state,t));else if(Array.isArray(n)){const[s,...i]=n;"string"==typeof s?e[t]=t=>o.run(s,...i,t):"function"==typeof s&&(e[t]=t=>o.setState(s(o.state,...i,t)))}}else if("$bind"===t){const s=e.type||"text",i="string"==typeof e[t]?e[t]:e.name;if("input"===n)switch(s){case"checkbox":e.checked=h(o,i),e.onclick=t=>l(o,i||t.target.name,t.target.checked);break;case"radio":e.checked=h(o,i)===e.value,e.onclick=t=>l(o,i||t.target.name,t.target.value);break;case"number":case"range":e.value=h(o,i),e.oninput=t=>l(o,i||t.target.name,Number(t.target.value));break;default:e.value=h(o,i),e.oninput=t=>l(o,i||t.target.name,t.target.value)}else"select"===n?(e.value=h(o,i),e.onchange=t=>{t.target.multiple||l(o,i||t.target.name,t.target.value)}):"option"===n?(e.selected=h(o,i),e.onclick=t=>l(o,i||t.target.name,t.target.selected)):"textarea"===n&&(e.innerHTML=h(o,i),e.oninput=t=>l(o,i||t.target.name,t.target.value))}else s.Z.run("$",{key:t,tag:n,props:e,component:o})})(n,e,t,this),delete e[n])})),n(t,e,...o));const o=e?this.view(t,e):this.view(t);return s.Z.h=s.Z.createElement=n,o}renderState(t,e=null){if(!this.view)return;let n=e||this._view(t);if(s.Z.debug&&s.Z.run("debug",{component:this,_:n?".":"-",state:t,vdom:n,el:this.element}),"object"!=typeof document)return;const o="string"==typeof this.element?document.getElementById(this.element):this.element;if(o){const t="_c";this.unload?o._component===this&&o.getAttribute(t)===this.tracking_id||(this.tracking_id=(new Date).valueOf().toString(),o.setAttribute(t,this.tracking_id),"undefined"!=typeof MutationObserver&&(this.observer||(this.observer=new MutationObserver((t=>{t[0].oldValue!==this.tracking_id&&document.body.contains(o)||(this.unload(this.state),this.observer.disconnect(),this.observer=null)}))),this.observer.observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeOldValue:!0,attributeFilter:[t]}))):o.removeAttribute&&o.removeAttribute(t),o._component=this}e||this.render(o,n),this.rendered&&this.rendered(this.state)}setState(t,e={render:!0,history:!1}){if(t instanceof Promise)Promise.all([t,this._state]).then((t=>{t[0]&&this.setState(t[0])})).catch((t=>{throw console.error(t),t})),this._state=t;else{if(this._state=t,null==t)return;this.state=t,!1!==e.render&&this.renderState(t),!1!==e.history&&this.enable_history&&(this._history=[...this._history,t],this._history_idx=this._history.length-1),"function"==typeof e.callback&&e.callback(this.state)}}mount(t=null,e){var n,o;if(console.assert(!this.element,"Component already mounted."),this.options=e=Object.assign(Object.assign({},this.options),e),this.element=t,this.global_event=e.global_event,this.enable_history=!!e.history,this.enable_history&&(this.on(e.history.prev||"history-prev",this._history_prev),this.on(e.history.next||"history-next",this._history_next)),e.route&&(this.update=this.update||{},this.update[e.route]=d),this.add_actions(),this.state=null!==(o=null!==(n=this.state)&&void 0!==n?n:this.model)&&void 0!==o?o:{},"function"==typeof this.state&&(this.state=this.state()),e.render?this.setState(this.state,{render:!0,history:!0}):this.setState(this.state,{render:!1,history:!0}),s.Z.debug){const e="string"==typeof t?t:t.id;u[e]=u[e]||[],u[e].push(this)}return this}is_global_event(t){return t&&(this.global_event||this._global_events.indexOf(t)>=0||t.startsWith("#")||t.startsWith("/")||t.startsWith("@"))}add_action(t,e,n={}){e&&"function"==typeof e&&(n.global&&this._global_events.push(t),this.on(t,((...o)=>{s.Z.debug&&s.Z.run("debug",{component:this,_:">",event:t,p:o,current_state:this.state,options:n});const i=e(this.state,...o);s.Z.debug&&s.Z.run("debug",{component:this,_:"<",event:t,p:o,newState:i,state:this.state,options:n}),this.setState(i,n)}),n))}add_actions(){const t=this.update||{};a.getMetadataKeys(this).forEach((e=>{if(e.startsWith("apprun-update:")){const n=a.getMetadata(e,this);t[n.name]=[this[n.key].bind(this),n.options]}}));const e={};Array.isArray(t)?t.forEach((t=>{const[n,s,o]=t;n.toString().split(",").forEach((t=>e[t.trim()]=[s,o]))})):Object.keys(t).forEach((n=>{const s=t[n];("function"==typeof s||Array.isArray(s))&&n.split(",").forEach((t=>e[t.trim()]=s))})),e["."]||(e["."]=d),Object.keys(e).forEach((t=>{const n=e[t];"function"==typeof n?this.add_action(t,n):Array.isArray(n)&&this.add_action(t,n[0],n[1])}))}run(t,...e){const n=t.toString();return this.is_global_event(n)?s.Z.run(n,...e):this._app.run(n,...e)}on(t,e,n){const o=t.toString();return this._actions.push({name:o,fn:e}),this.is_global_event(o)?s.Z.on(o,e,n):this._app.on(o,e,n)}unmount(){var t;null===(t=this.observer)||void 0===t||t.disconnect(),this._actions.forEach((t=>{const{name:e,fn:n}=t;this.is_global_event(e)?s.Z.off(e,n):this._app.off(e,n)}))}}p.__isAppRunComponent=!0;const f="//",m="///",g=t=>{if(t||(t="#"),t.startsWith("#")){const[e,...n]=t.split("/");s.Z.run(e,...n)||s.Z.run(m,e,...n),s.Z.run(f,e,...n)}else if(t.startsWith("/")){const[e,n,...o]=t.split("/");s.Z.run("/"+n,...o)||s.Z.run(m,"/"+n,...o),s.Z.run(f,"/"+n,...o)}else s.Z.run(t)||s.Z.run(m,t),s.Z.run(f,t)};s.Z.h=s.Z.createElement=o.az,s.Z.render=function(t,e,n){(0,o.yj)(t,e,n)},s.Z.Fragment=o.HY,s.Z.webComponent=r,s.Z.start=(t,e,n,s,o)=>{const i=Object.assign(Object.assign({},o),{render:!0,global_event:!0}),r=new p(e,n,s);return o&&o.rendered&&(r.rendered=o.rendered),r.mount(t,i),r};const _=t=>{};s.Z.on("$",_),s.Z.on("debug",(t=>_)),s.Z.on(f,_),s.Z.on("#",_),s.Z.route=g,s.Z.on("route",(t=>s.Z.route&&s.Z.route(t))),"object"==typeof document&&document.addEventListener("DOMContentLoaded",(()=>{s.Z.route===g&&(window.onpopstate=()=>g(location.hash),g(location.hash))}));const y=s.Z;"object"==typeof window&&(window.Component=p,window.React=s.Z,window.on=function(t,e={}){return function(n,s){const o=t?t.toString():s;a.defineMetadata(`apprun-update:${o}`,{name:o,key:s,options:e},n)}},window.customElement=c)},703:(t,e,n)=>{n.d(e,{HY:()=>f,az:()=>r,yj:()=>c});var s=n(752);function o(t,e,n=0){var i;if("string"==typeof t)return t;if(Array.isArray(t))return t.map((t=>o(t,e,n++)));let r=t;if(t&&"function"==typeof t.tag&&Object.getPrototypeOf(t.tag).__isAppRunComponent&&(r=function(t,e,n){const{tag:o,props:i,children:r}=t;let a=`_${n}`,c=i&&i.id;c?a=c:c=`_${n}${Date.now()}`,e.__componentCache||(e.__componentCache={});let h=e.__componentCache[a];h&&h instanceof o||(h=e.__componentCache[a]=new o(Object.assign(Object.assign({},i),{children:r})).mount(c));let l=h.state;if(h.mounted){const t=h.mounted(i,r,h.state);l=void 0!==t?t:h.state}if(l instanceof Promise){const t=t=>{h.element=t,Promise.all([l]).then((t=>{t[0]?h.setState(t[0]):h.setState(h.state)}))};return s.Z.h("section",Object.assign({},i,{ref:e=>t(e),_component:h}))}if(null!=l){const t=h._view(l,i),e=e=>{h.element=e,h.state=l,h.renderState(l,t)};return s.Z.h("section",Object.assign({},i,{ref:t=>e(t),_component:h}),t)}return s.Z.h("section",Object.assign({},i,{_component:h}))}(t,e,n)),r&&Array.isArray(r.children)){const t=null===(i=r.props)||void 0===i?void 0:i._component;if(t){let e=0;r.children=r.children.map((n=>o(n,t,e++)))}else r.children=r.children.map((t=>o(t,e,n++)))}return r}function i(t){const e=[],n=t=>{null!=t&&""!==t&&!1!==t&&e.push("function"==typeof t||"object"==typeof t?t:`${t}`)};return t&&t.forEach((t=>{Array.isArray(t)?t.forEach((t=>n(t))):n(t)})),e}function r(t,e,...n){const s=i(n);if("string"==typeof t)return{tag:t,props:e,children:s};if(Array.isArray(t))return t;if(void 0===t&&n)return s;if(Object.getPrototypeOf(t).__isAppRunComponent)return{tag:t,props:e,children:s};if("function"==typeof t)return t(e,s);throw new Error(`Unknown tag in vdom ${t}`)}const a=new WeakMap,c=function(t,e,n={}){if(null==e||!1===e)return;e=o(e,n);const s="SVG"===(null==t?void 0:t.nodeName);t&&(Array.isArray(e)?l(t,e,s):l(t,[e],s))};function h(t,e,n){3!==e._op&&(n=n||"svg"===e.tag,function(t,e){const n=t.nodeName,s=`${e.tag||""}`;return n.toUpperCase()===s.toUpperCase()}(t,e)?(!(2&e._op)&&l(t,e.children,n),!(1&e._op)&&p(t,e.props,n)):t.parentNode.replaceChild(d(e,n),t))}function l(t,e,n){var s;const o=(null===(s=t.childNodes)||void 0===s?void 0:s.length)||0,i=(null==e?void 0:e.length)||0,r=Math.min(o,i);for(let s=0;sr;)t.removeChild(t.lastChild),c--;if(i>r){const s=document.createDocumentFragment();for(let t=r;tn.appendChild(d(t,e)))),n}function p(t,e,n){const s=t._props||{};e=function(t,e){e.class=e.class||e.className,delete e.className;const n={};return t&&Object.keys(t).forEach((t=>n[t]=null)),e&&Object.keys(e).forEach((t=>n[t]=e[t])),n}(s,e||{}),t._props=e;for(const s in e){const o=e[s];if(s.startsWith("data-")){const e=s.substring(5).replace(/-(\w)/g,(t=>t[1].toUpperCase()));t.dataset[e]!==o&&(o||""===o?t.dataset[e]=o:delete t.dataset[e])}else if("style"===s)if(t.style.cssText&&(t.style.cssText=""),"string"==typeof o)t.style.cssText=o;else for(const e in o)t.style[e]!==o[e]&&(t.style[e]=o[e]);else if(s.startsWith("xlink")){const e=s.replace("xlink","").toLowerCase();null==o||!1===o?t.removeAttributeNS("http://www.w3.org/1999/xlink",e):t.setAttributeNS("http://www.w3.org/1999/xlink",e,o)}else s.startsWith("on")?o&&"function"!=typeof o?"string"==typeof o&&(o?t.setAttribute(s,o):t.removeAttribute(s)):t[s]=o:/^id$|^class$|^list$|^readonly$|^contenteditable$|^role|-/g.test(s)||n?t.getAttribute(s)!==o&&(o?t.setAttribute(s,o):t.removeAttribute(s)):t[s]!==o&&(t[s]=o);"key"===s&&o&&(a[o]=t)}e&&"function"==typeof e.ref&&window.requestAnimationFrame((()=>e.ref(t)))}function f(t,...e){return i(e)}}},e={};function n(s){if(e[s])return e[s].exports;var o=e[s]={exports:{}};return t[s](o,o.exports,n),o.exports}return n.d=(t,e)=>{for(var s in e)n.o(e,s)&&!n.o(t,s)&&Object.defineProperty(t,s,{enumerable:!0,get:e[s]})},n.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(t){if("object"==typeof window)return window}}(),n.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),n.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n(643)})()})); //# sourceMappingURL=app.js.map \ No newline at end of file diff --git a/demo-html/app.js.map b/demo-html/app.js.map index af608a02..79aeab40 100644 --- a/demo-html/app.js.map +++ b/demo-html/app.js.map @@ -1 +1 @@ -{"version":3,"sources":["webpack://apprun/webpack/universalModuleDefinition","webpack://apprun/./demo-html/components/counter.tsx","webpack://apprun/./demo-html/components/xkcd.tsx","webpack://apprun/./src/app.ts","webpack://apprun/./src/web-component.ts","webpack://apprun/./src/decorator.ts","webpack://apprun/./src/directive.ts","webpack://apprun/./src/component.ts","webpack://apprun/./src/router.ts","webpack://apprun/./src/apprun.ts","webpack://apprun/./src/vdom.ts","webpack://apprun/./src/createComponent.tsx","webpack://apprun/./src/vdom-my.ts","webpack://apprun/webpack/bootstrap","webpack://apprun/webpack/startup","webpack://apprun/webpack/runtime/define property getters","webpack://apprun/webpack/runtime/global","webpack://apprun/webpack/runtime/hasOwnProperty shorthand","webpack://apprun/webpack/runtime/make namespace object"],"names":["root","factory","exports","module","define","amd","this","MyApp","Component","view","num","children","update","state","mounted","parseInt","rendered","element","setAttribute","customElement","loading","comic","title","src","url","_","run","response","fetch","json","shadow","render","App","_events","name","fn","options","push","subscribers","filter","sub","args","console","assert","length","once","forEach","delay","apply","on","_t","clearTimeout","setTimeout","app","self","g","global","componentClass","HTMLElement","super","_component","observedAttributes","map","attr","toLowerCase","isConnected","opts","_shadowRoot","attachShadow","mode","attrMap","reduce","lc","_attrMap","props","Array","from","attributes","item","value","undefined","Object","defineProperty","get","attributeChangedCallback","configurable","enumerable","el","parentElement","removeChild","mount","_props","dispatchEvent","bind","new_state","unload","unmount","oldValue","mappedName","window","requestAnimationFrame","customElements","Reflect","meta","WeakMap","metadataKey","metadataValue","target","has","set","getPrototypeOf","keys","constructor","getStateValue","component","setStateValue","setState","componentCache","o","components","REFRESH","_app","_actions","_global_events","_history","_history_idx","_history_prev","history","_history_next","start","node","p","h","tag","key","startsWith","event","substring","e","isArray","handler","type","checked","Number","multiple","selected","directive","html","vdom","_view","document","getElementById","tracking_attr","getAttribute","tracking_id","Date","valueOf","toString","MutationObserver","observer","changes","body","contains","disconnect","observe","childList","subtree","attributeOldValue","attributeFilter","removeAttribute","Promise","all","_state","then","v","catch","err","error","renderState","enable_history","callback","global_event","prev","next","route","add_actions","id","indexOf","action","current_state","newState","actions","getMetadataKeys","getMetadata","act","split","n","trim","add_action","is_global_event","off","__isAppRunComponent","ROUTER_EVENT","ROUTER_404_EVENT","rest","parent","model","NOOP","addEventListener","onpopstate","location","hash","events","defineMetadata","createComponent","idx","child","now","__componentCache","ref","new_parent","i","collect","ch","c","createElement","Error","keyCache","updateElement","nodes","isSvg","nodeName","updateChildren","key1","key2","toUpperCase","same","updateProps","parentNode","replaceChild","create","old_len","childNodes","new_len","len","Math","min","textContent","nodeType","nodeValue","createText","SVGElement","insertBefore","old","temp","nextSibling","appendChild","lastChild","d","createDocumentFragment","div","insertAdjacentHTML","createTextNode","JSON","stringify","createElementNS","cached","oldProps","newProps","mergeProps","cname","replace","match","dataset","style","cssText","s","xname","removeAttributeNS","setAttributeNS","test","Fragment","__webpack_module_cache__","__webpack_require__","moduleId","__webpack_modules__","definition","globalThis","Function","obj","prop","prototype","hasOwnProperty","call","r","Symbol","toStringTag"],"mappings":"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","file":"demo-html/app.js","sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"apprun\"] = factory();\n\telse\n\t\troot[\"apprun\"] = factory();\n})(this, function() {\nreturn ","import app, { Component, customElement } from '../../src/apprun';\n\n@customElement(\"my-counter\")\nclass MyApp extends Component {\n\n view = ({ num, children }) =>
\n

{num}

\n {children}\n
\n\n update = {\n '-1': state => ({...state, num: state.num - 1}),\n '+1': state => ({...state, num: state.num + 1})\n }\n\n mounted = ({ num }, children) => ({ num: parseInt(num), children });\n\n rendered = ({ num }) => {\n this.element.setAttribute('num', num);\n }\n}\n","import app, { Component, customElement } from '../../src/apprun';\n\n// example of async fetch using mounted\n\n@customElement('my-xkcd', {shadow: true, render: false})\nexport default class extends Component {\n state = {};\n\n view = (state) => <>\n
\n {state.loading ?
loading ...
: ''}\n {state.comic && <>\n

{state.comic.title}

\n \n }\n ;\n\n update = {\n 'loading': (_, loading) => ({ loading: true }),\n 'fetchComic': async _ => {\n this.run('loading', true);\n const response = await fetch('https://xkcd-imgs.herokuapp.com/');\n const comic = await response.json();\n return { comic, loading: false };\n }\n };\n\n mounted = () => this.run('fetchComic');\n}","import { EventOptions} from './types'\nexport class App {\n\n private _events: Object;\n\n public start;\n public h;\n public createElement;\n public render;\n public Fragment;\n public webComponent;\n\n constructor() {\n this._events = {};\n }\n\n on(name: string, fn: (...args) => void, options: EventOptions = {}): void {\n this._events[name] = this._events[name] || [];\n this._events[name].push({ fn, options });\n }\n\n off(name: string, fn: (...args) => void): void {\n const subscribers = this._events[name] || [];\n\n this._events[name] = subscribers.filter((sub) => sub.fn !== fn);\n }\n\n find(name: string): any {\n return this._events[name];\n }\n\n run(name: string, ...args): number {\n const subscribers = this._events[name] || [];\n\n console.assert(subscribers && subscribers.length > 0, 'No subscriber for event: ' + name);\n\n // Update the list of subscribers by pulling out those which will run once.\n // We must do this update prior to running any of the events in case they\n // cause additional events to be turned off or on.\n this._events[name] = subscribers.filter((sub) => {\n return !sub.options.once;\n });\n\n subscribers.forEach((sub) => {\n const { fn, options } = sub;\n if (options.delay) {\n this.delay(name, fn, args, options);\n } else {\n fn.apply(this, args);\n }\n return !sub.options.once;\n });\n\n return subscribers.length;\n }\n\n once(name: string, fn, options: EventOptions = {}): void {\n this.on(name, fn, { ...options, once: true });\n }\n\n private delay(name, fn, args, options): void {\n if (options._t) clearTimeout(options._t);\n options._t = setTimeout(() => {\n clearTimeout(options._t);\n fn.apply(this, args);\n }, options.delay);\n }\n}\n\nconst AppRunVersions = 'AppRun-2';\nlet app: App;\nconst root = (typeof self === 'object' && self.self === self && self) ||\n (typeof global === 'object' && global.global === global && global)\nif (root['app'] && root['_AppRunVersions']) {\n app = root['app'];\n} else {\n app = new App();\n root['app'] = app;\n root['_AppRunVersions'] = AppRunVersions;\n}\nexport default app;\n","declare var customElements;\n\nexport type CustomElementOptions = {\n render?: boolean;\n shadow?: boolean;\n history?: boolean;\n global_event?: boolean;\n observedAttributes?: string[];\n};\n\nexport const customElement = (componentClass, options: CustomElementOptions = {}) => class CustomElement extends HTMLElement {\n private _shadowRoot;\n private _component;\n private _attrMap: (arg0: string) => string;\n public on;\n public run;\n constructor() {\n super();\n }\n get component() { return this._component; }\n get state() { return this._component.state; }\n\n static get observedAttributes() {\n // attributes need to be set to lowercase in order to get observed\n return (options.observedAttributes || []).map(attr => attr.toLowerCase());\n }\n\n connectedCallback() {\n if (this.isConnected && !this._component) {\n const opts = options || {};\n this._shadowRoot = opts.shadow ? this.attachShadow({ mode: 'open' }) : this;\n const observedAttributes = (opts.observedAttributes || [])\n\n const attrMap = observedAttributes.reduce((map, name) => {\n const lc = name.toLowerCase()\n if (lc !== name) {\n map[lc] = name\n }\n return map\n }, {})\n this._attrMap = (name: string) : string => attrMap[name] || name\n\n const props = {};\n Array.from(this.attributes).forEach(item => props[this._attrMap(item.name)] = item.value);\n\n // add getters/ setters to allow observation on observedAttributes\n observedAttributes.forEach(name => {\n if (this[name] !== undefined) props[name] = this[name];\n Object.defineProperty(this, name, {\n get(): any {\n return props[name];\n },\n set(this: CustomElement, value: unknown) {\n // trigger change event\n this.attributeChangedCallback(name, props[name], value)\n },\n configurable: true,\n enumerable: true\n });\n })\n\n const children = this.children ? Array.from(this.children) : [];\n children.forEach(el => el.parentElement.removeChild(el));\n this._component = new componentClass({ ...props, children }).mount(this._shadowRoot, opts);\n // attach props to component\n this._component._props = props;\n // expose dispatchEvent\n this._component.dispatchEvent = this.dispatchEvent.bind(this)\n if (this._component.mounted) {\n const new_state = this._component.mounted(props, children, this._component.state);\n if (typeof new_state !== 'undefined') this._component.state = new_state;\n }\n this.on = this._component.on.bind(this._component);\n this.run = this._component.run.bind(this._component);\n if (!(opts.render===false)) this._component.run('.');\n }\n }\n\n disconnectedCallback() {\n this._component?.unload?.();\n this._component?.unmount?.();\n this._component = null;\n }\n\n attributeChangedCallback(name: string, oldValue: unknown, value: unknown) {\n if (this._component) {\n // camelCase attributes arrive only in lowercase\n const mappedName = this._attrMap(name);\n // store the new property/ attribute\n this._component._props[mappedName] = value;\n this._component.run('attributeChanged', mappedName, oldValue, value);\n\n if (value !== oldValue && !(options.render === false)) {\n window.requestAnimationFrame(() => {\n // re-render state with new combined props on next animation frame\n this._component.run('.')\n })\n }\n }\n }\n}\n\nexport default (name: string, componentClass, options?: CustomElementOptions) => {\n (typeof customElements !== 'undefined') && customElements.define(name, customElement(componentClass, options))\n}\n","import webComponent, { CustomElementOptions } from './web-component';\n\n// tslint:disable:no-invalid-this\nexport const Reflect = {\n\n meta: new WeakMap(),\n\n defineMetadata(metadataKey, metadataValue, target) {\n if (!this.meta.has(target)) this.meta.set(target, {});\n this.meta.get(target)[metadataKey] = metadataValue;\n },\n\n getMetadataKeys(target) {\n target = Object.getPrototypeOf(target);\n return this.meta.get(target) ? Object.keys(this.meta.get(target)) : [];\n },\n\n getMetadata(metadataKey, target) {\n target = Object.getPrototypeOf(target);\n return this.meta.get(target) ? this.meta.get(target)[metadataKey] : null;\n }\n}\n\nexport function update(events?: E, options: any = {}) {\n return (target: any, key: string, descriptor: any) => {\n const name = events ? events.toString() : key;\n Reflect.defineMetadata(`apprun-update:${name}`,\n { name, key, options }, target);\n return descriptor;\n }\n}\n\nexport function on(events?: E, options: any = {}) {\n return function (target: any, key: string) {\n const name = events ? events.toString() : key;\n Reflect.defineMetadata(`apprun-update:${name}`,\n { name, key, options }, target)\n }\n}\n\nexport function customElement(name: string, options?: CustomElementOptions) {\n return function _customElement(constructor: T) {\n webComponent(name, constructor, options);\n return constructor;\n }\n}\n\n","import app from './app';\n\nconst getStateValue = (component, name) => {\n return (name ? component['state'][name] : component['state']) || '';\n}\n\nconst setStateValue = (component, name, value) => {\n if (name) {\n const state = component['state'] || {};\n state[name] = value;\n component.setState(state);\n } else {\n component.setState(value);\n }\n}\n\nexport default (key: string, props: {}, tag, component) => {\n if (key.startsWith('$on')) {\n const event = props[key];\n key = key.substring(1)\n if (typeof event === 'boolean') {\n props[key] = e => component.run(key, e);\n } else if (typeof event === 'string') {\n props[key] = e => component.run(event, e);\n } else if (typeof event === 'function') {\n props[key] = e => component.setState(event(component.state, e));\n } else if (Array.isArray(event)) {\n const [handler, ...p] = event;\n if (typeof handler === 'string') {\n props[key] = e => component.run(handler, ...p, e);\n } else if (typeof handler === 'function') {\n props[key] = e => component.setState(handler(component.state, ...p, e));\n }\n }\n\n } else if (key === '$bind') {\n const type = props['type'] || 'text';\n const name = typeof props[key] === 'string' ? props[key] : props['name'];\n if (tag === 'input') {\n switch (type) {\n case 'checkbox':\n props['checked'] = getStateValue(component, name);\n props['onclick'] = e => setStateValue(component, name || e.target.name, e.target.checked);\n break;\n case 'radio':\n props['checked'] = getStateValue(component, name) === props['value'];\n props['onclick'] = e => setStateValue(component, name || e.target.name, e.target.value);\n break;\n case 'number':\n case 'range':\n props['value'] = getStateValue(component, name);\n props['oninput'] = e => setStateValue(component, name || e.target.name, Number(e.target.value));\n break;\n default:\n props['value'] = getStateValue(component, name);\n props['oninput'] = e => setStateValue(component, name || e.target.name, e.target.value);\n }\n } else if (tag === 'select') {\n props['value'] = getStateValue(component, name);\n props['onchange'] = e => {\n if (!e.target.multiple) { // multiple selection use $bind on option\n setStateValue(component, name || e.target.name, e.target.value);\n }\n }\n } else if (tag === 'option') {\n props['selected'] = getStateValue(component, name);\n props['onclick'] = e => setStateValue(component, name || e.target.name, e.target.selected);\n } else if (tag === 'textarea') {\n props['innerHTML'] = getStateValue(component, name);\n props['oninput'] = e => setStateValue(component, name || e.target.name, e.target.value);\n }\n } else {\n app.run('$', { key, tag, props, component });\n }\n}","\r\nimport app, { App } from './app';\r\nimport { Reflect } from './decorator'\r\nimport { View, Update, ActionDef, ActionOptions, MountOptions } from './types';\r\nimport directive from './directive';\r\n\r\nconst componentCache = {};\r\napp.on('get-components', o => o.components = componentCache);\r\n\r\nconst REFRESH = state => state;\r\n\r\nexport class Component {\r\n static __isAppRunComponent = true;\r\n private _app = new App();\r\n private _actions = [];\r\n private _global_events = [];\r\n private _state;\r\n private _history = [];\r\n private _history_idx = -1;\r\n private enable_history;\r\n private global_event;\r\n public element;\r\n public rendered;\r\n public mounted;\r\n public unload;\r\n private tracking_id;\r\n private observer;\r\n\r\n render(element: HTMLElement, node) {\r\n app.render(element, node, this);\r\n }\r\n\r\n private _view(state, p = null) {\r\n if (!this.view) return;\r\n const h = app.createElement;\r\n app.h = app.createElement = (tag, props, ...children) => {\r\n props && Object.keys(props).forEach(key => {\r\n if (key.startsWith('$')) {\r\n directive(key, props, tag, this);\r\n delete props[key];\r\n }\r\n });\r\n return h(tag, props, ...children);\r\n }\r\n const html = p ? this.view(state, p) : this.view(state);\r\n app.h = app.createElement = h;\r\n return html;\r\n }\r\n\r\n private renderState(state: T, vdom = null) {\r\n if (!this.view) return;\r\n let html = vdom || this._view(state);\r\n\r\n app['debug'] && app.run('debug', {\r\n component: this,\r\n _: html ? '.' : '-',\r\n state,\r\n vdom: html,\r\n el: this.element\r\n });\r\n\r\n if (typeof document !== 'object') return;\r\n\r\n const el = (typeof this.element === 'string') ?\r\n document.getElementById(this.element) : this.element;\r\n\r\n if (el) {\r\n const tracking_attr = '_c';\r\n if (!this.unload) {\r\n el.removeAttribute && el.removeAttribute(tracking_attr);\r\n } else if (el['_component'] !== this || el.getAttribute(tracking_attr) !== this.tracking_id) {\r\n this.tracking_id = new Date().valueOf().toString();\r\n el.setAttribute(tracking_attr, this.tracking_id);\r\n if (typeof MutationObserver !== 'undefined') {\r\n if (!this.observer) this.observer = new MutationObserver(changes => {\r\n if (changes[0].oldValue === this.tracking_id || !document.body.contains(el)) {\r\n this.unload(this.state);\r\n this.observer.disconnect();\r\n this.observer = null;\r\n }\r\n });\r\n this.observer.observe(document.body, {\r\n childList: true, subtree: true,\r\n attributes: true, attributeOldValue: true, attributeFilter: [tracking_attr]\r\n });\r\n }\r\n }\r\n el['_component'] = this;\r\n }\r\n if (!vdom) {\r\n this.render(el, html);\r\n }\r\n this.rendered && this.rendered(this.state);\r\n }\r\n\r\n public setState(state: T, options: ActionOptions\r\n = { render: true, history: false }) {\r\n if (state instanceof Promise) {\r\n // Promise will not be saved or rendered\r\n // state will be saved and rendered when promise is resolved\r\n // Wait for previous promise to complete first\r\n Promise.all([state, this._state]).then(v => {\r\n if (v[0]) this.setState(v[0]);\r\n }).catch(err => {\r\n console.error(err);\r\n throw err;\r\n });\r\n this._state = state;\r\n } else {\r\n this._state = state;\r\n if (state == null) return;\r\n this.state = state;\r\n if (options.render !== false) this.renderState(state);\r\n if (options.history !== false && this.enable_history) {\r\n this._history = [...this._history, state];\r\n this._history_idx = this._history.length - 1;\r\n }\r\n if (typeof options.callback === 'function') options.callback(this.state);\r\n }\r\n }\r\n\r\n private _history_prev = () => {\r\n this._history_idx--;\r\n if (this._history_idx >= 0) {\r\n this.setState(this._history[this._history_idx], { render: true, history: false });\r\n }\r\n else {\r\n this._history_idx = 0;\r\n }\r\n };\r\n\r\n private _history_next = () => {\r\n this._history_idx++;\r\n if (this._history_idx < this._history.length) {\r\n this.setState(this._history[this._history_idx], { render: true, history: false });\r\n }\r\n else {\r\n this._history_idx = this._history.length - 1;\r\n }\r\n };\r\n\r\n constructor(\r\n protected state?: T,\r\n protected view?: View,\r\n protected update?: Update,\r\n protected options?) {\r\n }\r\n\r\n start = (element = null, options?: MountOptions): Component => {\r\n return this.mount(element, { ...options, render: true });\r\n }\r\n\r\n public mount(element = null, options?: MountOptions): Component {\r\n console.assert(!this.element, 'Component already mounted.')\r\n this.options = options = { ...this.options, ...options };\r\n this.element = element;\r\n this.global_event = options.global_event;\r\n this.enable_history = !!options.history;\r\n\r\n if (this.enable_history) {\r\n this.on(options.history.prev || 'history-prev', this._history_prev);\r\n this.on(options.history.next || 'history-next', this._history_next);\r\n }\r\n\r\n if (options.route) {\r\n this.update = this.update || {};\r\n this.update[options.route] = REFRESH;\r\n }\r\n\r\n this.add_actions();\r\n this.state = this.state ?? this['model'] ?? {};\r\n if (typeof this.state === 'function') this.state = this.state();\r\n if (options.render) {\r\n this.setState(this.state, { render: true, history: true });\r\n } else {\r\n this.setState(this.state, { render: false, history: true });\r\n }\r\n if (app['debug']) {\r\n const id = typeof element === 'string' ? element : element.id;\r\n componentCache[id] = componentCache[id] || [];\r\n componentCache[id].push(this);\r\n }\r\n return this;\r\n }\r\n\r\n is_global_event(name: string): boolean {\r\n return name && (\r\n this.global_event ||\r\n this._global_events.indexOf(name) >= 0 ||\r\n name.startsWith('#') || name.startsWith('/') || name.startsWith('@'));\r\n }\r\n\r\n add_action(name: string, action, options: ActionOptions = {}) {\r\n if (!action || typeof action !== 'function') return;\r\n if (options.global) this._global_events.push(name);\r\n this.on(name as any, (...p) => {\r\n\r\n app['debug'] && app.run('debug', {\r\n component: this,\r\n _: '>',\r\n event: name, p,\r\n current_state: this.state,\r\n options\r\n });\r\n\r\n const newState = action(this.state, ...p);\r\n\r\n app['debug'] && app.run('debug', {\r\n component: this,\r\n _: '<',\r\n event: name, p,\r\n newState,\r\n state: this.state,\r\n options\r\n });\r\n\r\n this.setState(newState, options)\r\n }, options);\r\n }\r\n\r\n add_actions() {\r\n const actions = this.update || {};\r\n Reflect.getMetadataKeys(this).forEach(key => {\r\n if (key.startsWith('apprun-update:')) {\r\n const meta = Reflect.getMetadata(key, this)\r\n actions[meta.name] = [this[meta.key].bind(this), meta.options];\r\n }\r\n })\r\n\r\n const all = {};\r\n if (Array.isArray(actions)) {\r\n actions.forEach(act => {\r\n const [name, action, opts] = act as ActionDef;\r\n const names = name.toString();\r\n names.split(',').forEach(n => all[n.trim()] = [action, opts])\r\n })\r\n } else {\r\n Object.keys(actions).forEach(name => {\r\n const action = actions[name];\r\n if (typeof action === 'function' || Array.isArray(action)) {\r\n name.split(',').forEach(n => all[n.trim()] = action)\r\n }\r\n })\r\n }\r\n\r\n if (!all['.']) all['.'] = REFRESH;\r\n Object.keys(all).forEach(name => {\r\n const action = all[name];\r\n if (typeof action === 'function') {\r\n this.add_action(name, action);\r\n } else if (Array.isArray(action)) {\r\n this.add_action(name, action[0], action[1]);\r\n }\r\n });\r\n }\r\n\r\n public run(event: E, ...args) {\r\n const name = event.toString();\r\n return this.is_global_event(name) ?\r\n app.run(name, ...args) :\r\n this._app.run(name, ...args);\r\n }\r\n\r\n public on(event: E, fn: (...args) => void, options?: any) {\r\n const name = event.toString();\r\n this._actions.push({ name, fn });\r\n return this.is_global_event(name) ?\r\n app.on(name, fn, options) :\r\n this._app.on(name, fn, options);\r\n }\r\n\r\n public unmount() {\r\n this.observer?.disconnect();\r\n this._actions.forEach(action => {\r\n const { name, fn } = action;\r\n this.is_global_event(name) ?\r\n app.off(name, fn) :\r\n this._app.off(name, fn);\r\n });\r\n }\r\n}\r\n","import app from './app';\n\nexport type Route = (url: string, ...args: any[]) => any;\n\nexport const ROUTER_EVENT: string = '//';\nexport const ROUTER_404_EVENT: string = '///';\n\nexport const route: Route = (url: string) => {\n if (!url) url = '#';\n if (url.startsWith('#')) {\n const [name, ...rest] = url.split('/');\n app.run(name, ...rest) || app.run(ROUTER_404_EVENT, name, ...rest);\n app.run(ROUTER_EVENT, name, ...rest);\n } else if (url.startsWith('/')) {\n const [_, name, ...rest] = url.split('/');\n app.run('/' + name, ...rest) || app.run(ROUTER_404_EVENT, '/' + name, ...rest);\n app.run(ROUTER_EVENT, '/' + name, ...rest);\n } else {\n app.run(url) || app.run(ROUTER_404_EVENT, url);\n app.run(ROUTER_EVENT, url);\n }\n}\nexport default route;","import app from './app';\nimport { createElement, render, Fragment } from './vdom';\nimport { Component } from './component';\nimport { VNode, View, Action, Update, EventOptions, ActionOptions, MountOptions, AppStartOptions } from './types';\nimport { on, update, customElement } from './decorator';\nimport webComponent, { CustomElementOptions } from './web-component';\nimport { Route, route, ROUTER_EVENT, ROUTER_404_EVENT } from './router';\n\nexport interface IApp {\n start(element?: Element | string, model?: T, view?: View, update?: Update,\n options?: AppStartOptions): Component;\n on(name: string, fn: (...args: any[]) => void, options?: any): void;\n off(name: string, fn: (...args: any[]) => void): void;\n run(name: string, ...args: any[]): number;\n h(tag: string | Function, props, ...children): VNode | VNode[];\n createElement(tag: string | Function, props, ...children): VNode | VNode[];\n render(element: HTMLElement, node: VNode): void;\n Fragment(props, ...children): any[];\n route?: Route;\n webComponent(name: string, componentClass, options?: CustomElementOptions): void;\n}\n\napp.h = app.createElement = createElement;\napp.render = render;\napp.Fragment = Fragment;\napp.webComponent = webComponent;\n\napp.start = (element?: Element, model?: T, view?: View, update?: Update,\n options?: AppStartOptions) : Component => {\n const opts = {...options, render: true, global_event: true };\n const component = new Component(model, view, update);\n if (options && options.rendered) component.rendered = options.rendered;\n component.mount(element, opts);\n return component;\n};\n\nconst NOOP = _ => {/* Intentionally empty */ }\napp.on('$', NOOP);\napp.on('debug', _ => NOOP);\napp.on(ROUTER_EVENT, NOOP);\napp.on('#', NOOP);\napp['route'] = route;\napp.on('route', url => app['route'] && app['route'](url));\n\nif (typeof document === 'object') {\n document.addEventListener(\"DOMContentLoaded\", () => {\n if (app['route'] === route) {\n window.onpopstate = () => route(location.hash);\n route(location.hash);\n }\n });\n}\n\nexport type StatelessComponent = (args: T) => string | VNode | void;\nexport { app, Component, View, Action, Update, on, update, EventOptions, ActionOptions, MountOptions, Fragment }\nexport { update as event };\nexport { ROUTER_EVENT, ROUTER_404_EVENT };\nexport { customElement, CustomElementOptions, AppStartOptions };\nexport default app as IApp;\n\nif (typeof window === 'object') {\n window['Component'] = Component;\n window['React'] = app;\n window['on'] = on;\n window['customElement'] = customElement;\n}\n\n\n","import { createElement, updateElement, Fragment } from './vdom-my';\nexport function render(element, html, parent?) {\n updateElement(element, html, parent);\n}\nexport { createElement, Fragment };\n\n\n","import app from './app';\n\nfunction render(node, parent, idx) {\n const { tag, props, children } = node;\n let key = `_${idx}`;\n let id = props && props['id'];\n if (!id) id = `_${idx}${Date.now()}`;\n else key = id;\n if (!parent.__componentCache) parent.__componentCache = {};\n let component = parent.__componentCache[key];\n if (!component || !(component instanceof tag)) {\n component = parent.__componentCache[key] = new tag({ ...props, children }).mount(id);\n }\n let state = component.state;\n if (component.mounted) {\n const new_state = component.mounted(props, children, component.state);\n state = (typeof new_state !== 'undefined') ? new_state : component.state;\n }\n if (state instanceof Promise) {\n const render = el => {\n component.element = el;\n Promise.all([state]).then(v => {\n if (v[0]) component.setState(v[0]);\n else component.setState(component.state);\n })\n }\n return
render(e)} _component={component}>
;\n } else if (state != null) {\n const vdom = component._view(state, props);\n const render = el => {\n component.element = el;\n component.state = state;\n component.renderState(state, vdom);\n }\n return
render(e)} _component={component}>{vdom}
;\n } else {\n return
;\n }\n}\n\nexport default function createComponent(node, parent, idx = 0) {\n if (typeof node === 'string') return node;\n if (Array.isArray(node)) return node.map(child => createComponent(child, parent, idx++));\n let vdom = node;\n if (node && typeof node.tag === 'function' && Object.getPrototypeOf(node.tag).__isAppRunComponent) {\n vdom = render(node, parent, idx);\n }\n if (vdom && Array.isArray(vdom.children)) {\n const new_parent = vdom.props?._component;\n if (new_parent) {\n let i = 0;\n vdom.children = vdom.children.map(child => createComponent(child, new_parent, i++));\n } else {\n vdom.children = vdom.children.map(child => createComponent(child, parent, idx++));\n }\n }\n return vdom;\n}\n","import createComponent from './createComponent';\nimport { VDOM, VNode } from './types';\nexport type Element = any; //HTMLElement | SVGSVGElement | SVGElement;\n\nconst ATTR_PROPS = '_props';\n\nfunction collect(children) {\n const ch = [];\n const push = (c) => {\n if (c !== null && c !== undefined && c !== '' && c !== false) {\n ch.push((typeof c === 'function' || typeof c === 'object') ? c : `${c}`);\n }\n }\n children && children.forEach(c => {\n if (Array.isArray(c)) {\n c.forEach(i => push(i));\n } else {\n push(c);\n }\n });\n return ch;\n}\n\nexport function createElement(tag: string | Function | [], props?: {}, ...children) {\n const ch = collect(children);\n if (typeof tag === 'string') return { tag, props, children: ch };\n else if (Array.isArray(tag)) return tag; // JSX fragments - babel\n else if (tag === undefined && children) return ch; // JSX fragments - typescript\n else if (Object.getPrototypeOf(tag).__isAppRunComponent) return { tag, props, children: ch } // createComponent(tag, { ...props, children });\n else if (typeof tag === 'function') return tag(props, ch);\n else throw new Error(`Unknown tag in vdom ${tag}`);\n};\n\nconst keyCache = new WeakMap();\n\nexport const updateElement = render;\n\nexport function render(element: Element, nodes: VDOM, parent = {}) {\n // console.log('render', element, node);\n // tslint:disable-next-line\n if (nodes == null || nodes === false) return;\n\n nodes = createComponent(nodes, parent);\n\n const isSvg = element?.nodeName === \"SVG\";\n\n if (!element) return;\n if (Array.isArray(nodes)) {\n updateChildren(element, nodes, isSvg);\n } else {\n updateChildren(element, [nodes], isSvg);\n }\n}\n\nfunction same(el: Element, node: VNode) {\n // if (!el || !node) return false;\n const key1 = el.nodeName;\n const key2 = `${node.tag || ''}`;\n return key1.toUpperCase() === key2.toUpperCase();\n}\n\nfunction update(element: Element, node: VNode, isSvg: boolean) {\n if (node['_op'] === 3) return;\n // console.assert(!!element);\n isSvg = isSvg || node.tag === \"svg\";\n if (!same(element, node)) {\n element.parentNode.replaceChild(create(node, isSvg), element);\n return;\n }\n !(node['_op'] & 2) && updateChildren(element, node.children, isSvg);\n !(node['_op'] & 1) && updateProps(element, node.props, isSvg);\n}\n\nfunction updateChildren(element, children, isSvg: boolean) {\n const old_len = element.childNodes?.length || 0;\n const new_len = children?.length || 0;\n const len = Math.min(old_len, new_len);\n for (let i = 0; i < len; i++) {\n const child = children[i];\n if (child['_op'] === 3) continue;\n const el = element.childNodes[i];\n if (typeof child === 'string') {\n if (el.textContent !== child) {\n if (el.nodeType === 3) {\n el.nodeValue = child\n } else {\n element.replaceChild(createText(child), el);\n }\n }\n } else if (child instanceof HTMLElement || child instanceof SVGElement) {\n element.insertBefore(child, el);\n } else {\n const key = child.props && child.props['key'];\n if (key) {\n if (el.key === key) {\n update(element.childNodes[i], child, isSvg);\n } else {\n // console.log(el.key, key);\n const old = keyCache[key];\n if (old) {\n const temp = old.nextSibling;\n element.insertBefore(old, el);\n temp ? element.insertBefore(el, temp) : element.appendChild(el);\n }\n update(element.childNodes[i], child, isSvg);\n }\n } else {\n update(element.childNodes[i], child, isSvg);\n }\n }\n }\n\n let n = element.childNodes.length;\n while (n > len) {\n element.removeChild(element.lastChild);\n n--;\n }\n\n if (new_len > len) {\n const d = document.createDocumentFragment();\n for (let i = len; i < children.length; i++) {\n d.appendChild(create(children[i], isSvg));\n }\n element.appendChild(d);\n }\n}\n\nfunction createText(node) {\n if (node.indexOf('_html:') === 0) { // ?\n const div = document.createElement('div');\n div.insertAdjacentHTML('afterbegin', node.substring(6))\n return div;\n } else {\n return document.createTextNode(node);\n }\n}\n\nfunction create(node: VNode | string | HTMLElement | SVGElement, isSvg: boolean): Element {\n // console.assert(node !== null && node !== undefined);\n if ((node instanceof HTMLElement) || (node instanceof SVGElement)) return node;\n if (typeof node === \"string\") return createText(node);\n if (!node.tag || (typeof node.tag === 'function')) return createText(JSON.stringify(node));\n isSvg = isSvg || node.tag === \"svg\";\n const element = isSvg\n ? document.createElementNS(\"http://www.w3.org/2000/svg\", node.tag)\n : document.createElement(node.tag);\n\n updateProps(element, node.props, isSvg);\n if (node.children) node.children.forEach(child => element.appendChild(create(child, isSvg)));\n return element\n}\n\nfunction mergeProps(oldProps: {}, newProps: {}): {} {\n newProps['class'] = newProps['class'] || newProps['className'];\n delete newProps['className'];\n const props = {};\n if (oldProps) Object.keys(oldProps).forEach(p => props[p] = null);\n if (newProps) Object.keys(newProps).forEach(p => props[p] = newProps[p]);\n return props;\n}\n\nfunction updateProps(element: Element, props: {}, isSvg) {\n // console.assert(!!element);\n const cached = element[ATTR_PROPS] || {};\n props = mergeProps(cached, props || {});\n element[ATTR_PROPS] = props;\n\n for (const name in props) {\n const value = props[name];\n // if (cached[name] === value) continue;\n // console.log('updateProps', name, value);\n if (name.startsWith('data-')) {\n const dname = name.substring(5);\n const cname = dname.replace(/-(\\w)/g, (match) => match[1].toUpperCase());\n if (element.dataset[cname] !== value) {\n if (value || value === \"\") element.dataset[cname] = value;\n else delete element.dataset[cname];\n }\n } else if (name === 'style') {\n if (element.style.cssText) element.style.cssText = '';\n if (typeof value === 'string') element.style.cssText = value;\n else {\n for (const s in value) {\n if (element.style[s] !== value[s]) element.style[s] = value[s];\n }\n }\n } else if (name.startsWith('xlink')) {\n const xname = name.replace('xlink', '').toLowerCase();\n if (value == null || value === false) {\n element.removeAttributeNS('http://www.w3.org/1999/xlink', xname);\n } else {\n element.setAttributeNS('http://www.w3.org/1999/xlink', xname, value);\n }\n } else if (name.startsWith('on')) {\n if (!value || typeof value === 'function') {\n element[name] = value;\n } else if (typeof value === 'string') {\n if (value) element.setAttribute(name, value);\n else element.removeAttribute(name);\n }\n } else if (/^id$|^class$|^list$|^readonly$|^contenteditable$|^role|-/g.test(name) || isSvg) {\n if (element.getAttribute(name) !== value) {\n if (value) element.setAttribute(name, value);\n else element.removeAttribute(name);\n }\n } else if (element[name] !== value) {\n element[name] = value;\n }\n if (name === 'key' && value) keyCache[value] = element;\n }\n if (props && typeof props['ref'] === 'function') {\n window.requestAnimationFrame(() => props['ref'](element));\n }\n}\n\nexport function Fragment(props, ...children): any[] {\n return collect(children);\n}","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tif(__webpack_module_cache__[moduleId]) {\n\t\treturn __webpack_module_cache__[moduleId].exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// module exports must be returned from runtime so entry inlining is disabled\n// startup\n// Load entry module and return exports\nreturn __webpack_require__(643);\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.g = (function() {\n\tif (typeof globalThis === 'object') return globalThis;\n\ttry {\n\t\treturn this || new Function('return this')();\n\t} catch (e) {\n\t\tif (typeof window === 'object') return window;\n\t}\n})();","__webpack_require__.o = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop)","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};"],"sourceRoot":""} \ No newline at end of file +{"version":3,"sources":["webpack://apprun/webpack/universalModuleDefinition","webpack://apprun/./demo-html/components/counter.tsx","webpack://apprun/./demo-html/components/xkcd.tsx","webpack://apprun/./src/app.ts","webpack://apprun/./src/web-component.ts","webpack://apprun/./src/decorator.ts","webpack://apprun/./src/directive.ts","webpack://apprun/./src/component.ts","webpack://apprun/./src/router.ts","webpack://apprun/./src/apprun.ts","webpack://apprun/./src/vdom.ts","webpack://apprun/./src/createComponent.tsx","webpack://apprun/./src/vdom-my.ts","webpack://apprun/webpack/bootstrap","webpack://apprun/webpack/startup","webpack://apprun/webpack/runtime/define property getters","webpack://apprun/webpack/runtime/global","webpack://apprun/webpack/runtime/hasOwnProperty shorthand","webpack://apprun/webpack/runtime/make namespace object"],"names":["root","factory","exports","module","define","amd","this","MyApp","Component","view","num","children","update","state","mounted","parseInt","rendered","element","setAttribute","customElement","loading","comic","title","src","url","_","async","run","response","fetch","json","shadow","render","App","_events","name","fn","options","push","subscribers","filter","sub","args","console","assert","length","once","forEach","delay","apply","on","_t","clearTimeout","setTimeout","app","self","g","global","componentClass","HTMLElement","super","_component","observedAttributes","map","attr","toLowerCase","isConnected","opts","_shadowRoot","attachShadow","mode","attrMap","reduce","lc","_attrMap","props","Array","from","attributes","item","value","undefined","Object","defineProperty","get","attributeChangedCallback","configurable","enumerable","el","parentElement","removeChild","mount","_props","dispatchEvent","bind","new_state","unload","unmount","oldValue","mappedName","window","requestAnimationFrame","customElements","Reflect","meta","WeakMap","metadataKey","metadataValue","target","has","set","getPrototypeOf","keys","constructor","getStateValue","component","setStateValue","setState","componentCache","o","components","REFRESH","_app","_actions","_global_events","_history","_history_idx","_history_prev","history","_history_next","start","node","p","h","tag","key","startsWith","event","substring","e","isArray","handler","type","checked","Number","multiple","selected","directive","html","vdom","_view","document","getElementById","tracking_attr","getAttribute","tracking_id","Date","valueOf","toString","MutationObserver","observer","changes","body","contains","disconnect","observe","childList","subtree","attributeOldValue","attributeFilter","removeAttribute","Promise","all","_state","then","v","catch","err","error","renderState","enable_history","callback","global_event","prev","next","route","add_actions","id","indexOf","action","current_state","newState","actions","getMetadataKeys","getMetadata","act","split","n","trim","add_action","is_global_event","off","__isAppRunComponent","ROUTER_EVENT","ROUTER_404_EVENT","rest","parent","model","NOOP","addEventListener","onpopstate","location","hash","events","defineMetadata","createComponent","idx","child","now","__componentCache","ref","new_parent","i","collect","ch","c","createElement","Error","keyCache","updateElement","nodes","isSvg","nodeName","updateChildren","key1","key2","toUpperCase","same","updateProps","parentNode","replaceChild","create","old_len","childNodes","new_len","len","Math","min","textContent","nodeType","nodeValue","createText","SVGElement","insertBefore","old","temp","nextSibling","appendChild","lastChild","d","createDocumentFragment","div","insertAdjacentHTML","createTextNode","JSON","stringify","createElementNS","cached","oldProps","newProps","mergeProps","cname","replace","match","dataset","style","cssText","s","xname","removeAttributeNS","setAttributeNS","test","Fragment","__webpack_module_cache__","__webpack_require__","moduleId","__webpack_modules__","definition","globalThis","Function","obj","prop","prototype","hasOwnProperty","call","r","Symbol","toStringTag"],"mappings":"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","file":"demo-html/app.js","sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"apprun\"] = factory();\n\telse\n\t\troot[\"apprun\"] = factory();\n})(this, function() {\nreturn ","import app, { Component, customElement } from '../../src/apprun';\n\n@customElement(\"my-counter\")\nclass MyApp extends Component {\n\n view = ({ num, children }) =>
\n

{num}

\n {children}\n
\n\n update = {\n '-1': state => ({...state, num: state.num - 1}),\n '+1': state => ({...state, num: state.num + 1})\n }\n\n mounted = ({ num }, children) => ({ num: parseInt(num), children });\n\n rendered = ({ num }) => {\n this.element.setAttribute('num', num);\n }\n}\n","import app, { Component, customElement } from '../../src/apprun';\n\n// example of async fetch using mounted\n\n@customElement('my-xkcd', {shadow: true, render: false})\nexport default class extends Component {\n state = {};\n\n view = (state) => <>\n
\n {state.loading ?
loading ...
: ''}\n {state.comic && <>\n

{state.comic.title}

\n \n }\n ;\n\n update = {\n 'loading': (_, loading) => ({ loading: true }),\n 'fetchComic': async _ => {\n this.run('loading', true);\n const response = await fetch('https://xkcd-imgs.herokuapp.com/');\n const comic = await response.json();\n return { comic, loading: false };\n }\n };\n\n mounted = () => this.run('fetchComic');\n}","import { EventOptions} from './types'\nexport class App {\n\n private _events: Object;\n\n public start;\n public h;\n public createElement;\n public render;\n public Fragment;\n public webComponent;\n\n constructor() {\n this._events = {};\n }\n\n on(name: string, fn: (...args) => void, options: EventOptions = {}): void {\n this._events[name] = this._events[name] || [];\n this._events[name].push({ fn, options });\n }\n\n off(name: string, fn: (...args) => void): void {\n const subscribers = this._events[name] || [];\n\n this._events[name] = subscribers.filter((sub) => sub.fn !== fn);\n }\n\n find(name: string): any {\n return this._events[name];\n }\n\n run(name: string, ...args): number {\n const subscribers = this._events[name] || [];\n\n console.assert(subscribers && subscribers.length > 0, 'No subscriber for event: ' + name);\n\n // Update the list of subscribers by pulling out those which will run once.\n // We must do this update prior to running any of the events in case they\n // cause additional events to be turned off or on.\n this._events[name] = subscribers.filter((sub) => {\n return !sub.options.once;\n });\n\n subscribers.forEach((sub) => {\n const { fn, options } = sub;\n if (options.delay) {\n this.delay(name, fn, args, options);\n } else {\n fn.apply(this, args);\n }\n return !sub.options.once;\n });\n\n return subscribers.length;\n }\n\n once(name: string, fn, options: EventOptions = {}): void {\n this.on(name, fn, { ...options, once: true });\n }\n\n private delay(name, fn, args, options): void {\n if (options._t) clearTimeout(options._t);\n options._t = setTimeout(() => {\n clearTimeout(options._t);\n fn.apply(this, args);\n }, options.delay);\n }\n}\n\nconst AppRunVersions = 'AppRun-2';\nlet app: App;\nconst root = (typeof self === 'object' && self.self === self && self) ||\n (typeof global === 'object' && global.global === global && global)\nif (root['app'] && root['_AppRunVersions']) {\n app = root['app'];\n} else {\n app = new App();\n root['app'] = app;\n root['_AppRunVersions'] = AppRunVersions;\n}\nexport default app;\n","declare var customElements;\n\nexport type CustomElementOptions = {\n render?: boolean;\n shadow?: boolean;\n history?: boolean;\n global_event?: boolean;\n observedAttributes?: string[];\n};\n\nexport const customElement = (componentClass, options: CustomElementOptions = {}) => class CustomElement extends HTMLElement {\n private _shadowRoot;\n private _component;\n private _attrMap: (arg0: string) => string;\n public on;\n public run;\n constructor() {\n super();\n }\n get component() { return this._component; }\n get state() { return this._component.state; }\n\n static get observedAttributes() {\n // attributes need to be set to lowercase in order to get observed\n return (options.observedAttributes || []).map(attr => attr.toLowerCase());\n }\n\n connectedCallback() {\n if (this.isConnected && !this._component) {\n const opts = options || {};\n this._shadowRoot = opts.shadow ? this.attachShadow({ mode: 'open' }) : this;\n const observedAttributes = (opts.observedAttributes || [])\n\n const attrMap = observedAttributes.reduce((map, name) => {\n const lc = name.toLowerCase()\n if (lc !== name) {\n map[lc] = name\n }\n return map\n }, {})\n this._attrMap = (name: string) : string => attrMap[name] || name\n\n const props = {};\n Array.from(this.attributes).forEach(item => props[this._attrMap(item.name)] = item.value);\n\n // add getters/ setters to allow observation on observedAttributes\n observedAttributes.forEach(name => {\n if (this[name] !== undefined) props[name] = this[name];\n Object.defineProperty(this, name, {\n get(): any {\n return props[name];\n },\n set(this: CustomElement, value: unknown) {\n // trigger change event\n this.attributeChangedCallback(name, props[name], value)\n },\n configurable: true,\n enumerable: true\n });\n })\n\n const children = this.children ? Array.from(this.children) : [];\n children.forEach(el => el.parentElement.removeChild(el));\n this._component = new componentClass({ ...props, children }).mount(this._shadowRoot, opts);\n // attach props to component\n this._component._props = props;\n // expose dispatchEvent\n this._component.dispatchEvent = this.dispatchEvent.bind(this)\n if (this._component.mounted) {\n const new_state = this._component.mounted(props, children, this._component.state);\n if (typeof new_state !== 'undefined') this._component.state = new_state;\n }\n this.on = this._component.on.bind(this._component);\n this.run = this._component.run.bind(this._component);\n if (!(opts.render===false)) this._component.run('.');\n }\n }\n\n disconnectedCallback() {\n this._component?.unload?.();\n this._component?.unmount?.();\n this._component = null;\n }\n\n attributeChangedCallback(name: string, oldValue: unknown, value: unknown) {\n if (this._component) {\n // camelCase attributes arrive only in lowercase\n const mappedName = this._attrMap(name);\n // store the new property/ attribute\n this._component._props[mappedName] = value;\n this._component.run('attributeChanged', mappedName, oldValue, value);\n\n if (value !== oldValue && !(options.render === false)) {\n window.requestAnimationFrame(() => {\n // re-render state with new combined props on next animation frame\n this._component.run('.')\n })\n }\n }\n }\n}\n\nexport default (name: string, componentClass, options?: CustomElementOptions) => {\n (typeof customElements !== 'undefined') && customElements.define(name, customElement(componentClass, options))\n}\n","import webComponent, { CustomElementOptions } from './web-component';\n\n// tslint:disable:no-invalid-this\nexport const Reflect = {\n\n meta: new WeakMap(),\n\n defineMetadata(metadataKey, metadataValue, target) {\n if (!this.meta.has(target)) this.meta.set(target, {});\n this.meta.get(target)[metadataKey] = metadataValue;\n },\n\n getMetadataKeys(target) {\n target = Object.getPrototypeOf(target);\n return this.meta.get(target) ? Object.keys(this.meta.get(target)) : [];\n },\n\n getMetadata(metadataKey, target) {\n target = Object.getPrototypeOf(target);\n return this.meta.get(target) ? this.meta.get(target)[metadataKey] : null;\n }\n}\n\nexport function update(events?: E, options: any = {}) {\n return (target: any, key: string, descriptor: any) => {\n const name = events ? events.toString() : key;\n Reflect.defineMetadata(`apprun-update:${name}`,\n { name, key, options }, target);\n return descriptor;\n }\n}\n\nexport function on(events?: E, options: any = {}) {\n return function (target: any, key: string) {\n const name = events ? events.toString() : key;\n Reflect.defineMetadata(`apprun-update:${name}`,\n { name, key, options }, target)\n }\n}\n\nexport function customElement(name: string, options?: CustomElementOptions) {\n return function _customElement(constructor: T) {\n webComponent(name, constructor, options);\n return constructor;\n }\n}\n\n","import app from './app';\n\nconst getStateValue = (component, name) => {\n return (name ? component['state'][name] : component['state']) || '';\n}\n\nconst setStateValue = (component, name, value) => {\n if (name) {\n const state = component['state'] || {};\n state[name] = value;\n component.setState(state);\n } else {\n component.setState(value);\n }\n}\n\nexport default (key: string, props: {}, tag, component) => {\n if (key.startsWith('$on')) {\n const event = props[key];\n key = key.substring(1)\n if (typeof event === 'boolean') {\n props[key] = e => component.run(key, e);\n } else if (typeof event === 'string') {\n props[key] = e => component.run(event, e);\n } else if (typeof event === 'function') {\n props[key] = e => component.setState(event(component.state, e));\n } else if (Array.isArray(event)) {\n const [handler, ...p] = event;\n if (typeof handler === 'string') {\n props[key] = e => component.run(handler, ...p, e);\n } else if (typeof handler === 'function') {\n props[key] = e => component.setState(handler(component.state, ...p, e));\n }\n }\n\n } else if (key === '$bind') {\n const type = props['type'] || 'text';\n const name = typeof props[key] === 'string' ? props[key] : props['name'];\n if (tag === 'input') {\n switch (type) {\n case 'checkbox':\n props['checked'] = getStateValue(component, name);\n props['onclick'] = e => setStateValue(component, name || e.target.name, e.target.checked);\n break;\n case 'radio':\n props['checked'] = getStateValue(component, name) === props['value'];\n props['onclick'] = e => setStateValue(component, name || e.target.name, e.target.value);\n break;\n case 'number':\n case 'range':\n props['value'] = getStateValue(component, name);\n props['oninput'] = e => setStateValue(component, name || e.target.name, Number(e.target.value));\n break;\n default:\n props['value'] = getStateValue(component, name);\n props['oninput'] = e => setStateValue(component, name || e.target.name, e.target.value);\n }\n } else if (tag === 'select') {\n props['value'] = getStateValue(component, name);\n props['onchange'] = e => {\n if (!e.target.multiple) { // multiple selection use $bind on option\n setStateValue(component, name || e.target.name, e.target.value);\n }\n }\n } else if (tag === 'option') {\n props['selected'] = getStateValue(component, name);\n props['onclick'] = e => setStateValue(component, name || e.target.name, e.target.selected);\n } else if (tag === 'textarea') {\n props['innerHTML'] = getStateValue(component, name);\n props['oninput'] = e => setStateValue(component, name || e.target.name, e.target.value);\n }\n } else {\n app.run('$', { key, tag, props, component });\n }\n}","\r\nimport app, { App } from './app';\r\nimport { Reflect } from './decorator'\r\nimport { View, Update, ActionDef, ActionOptions, MountOptions } from './types';\r\nimport directive from './directive';\r\n\r\nconst componentCache = {};\r\napp.on('get-components', o => o.components = componentCache);\r\n\r\nconst REFRESH = state => state;\r\n\r\nexport class Component {\r\n static __isAppRunComponent = true;\r\n private _app = new App();\r\n private _actions = [];\r\n private _global_events = [];\r\n private _state;\r\n private _history = [];\r\n private _history_idx = -1;\r\n private enable_history;\r\n private global_event;\r\n public element;\r\n public rendered;\r\n public mounted;\r\n public unload;\r\n private tracking_id;\r\n private observer;\r\n\r\n render(element: HTMLElement, node) {\r\n app.render(element, node, this);\r\n }\r\n\r\n private _view(state, p = null) {\r\n if (!this.view) return;\r\n const h = app.createElement;\r\n app.h = app.createElement = (tag, props, ...children) => {\r\n props && Object.keys(props).forEach(key => {\r\n if (key.startsWith('$')) {\r\n directive(key, props, tag, this);\r\n delete props[key];\r\n }\r\n });\r\n return h(tag, props, ...children);\r\n }\r\n const html = p ? this.view(state, p) : this.view(state);\r\n app.h = app.createElement = h;\r\n return html;\r\n }\r\n\r\n private renderState(state: T, vdom = null) {\r\n if (!this.view) return;\r\n let html = vdom || this._view(state);\r\n\r\n app['debug'] && app.run('debug', {\r\n component: this,\r\n _: html ? '.' : '-',\r\n state,\r\n vdom: html,\r\n el: this.element\r\n });\r\n\r\n if (typeof document !== 'object') return;\r\n\r\n const el = (typeof this.element === 'string') ?\r\n document.getElementById(this.element) : this.element;\r\n\r\n if (el) {\r\n const tracking_attr = '_c';\r\n if (!this.unload) {\r\n el.removeAttribute && el.removeAttribute(tracking_attr);\r\n } else if (el['_component'] !== this || el.getAttribute(tracking_attr) !== this.tracking_id) {\r\n this.tracking_id = new Date().valueOf().toString();\r\n el.setAttribute(tracking_attr, this.tracking_id);\r\n if (typeof MutationObserver !== 'undefined') {\r\n if (!this.observer) this.observer = new MutationObserver(changes => {\r\n if (changes[0].oldValue === this.tracking_id || !document.body.contains(el)) {\r\n this.unload(this.state);\r\n this.observer.disconnect();\r\n this.observer = null;\r\n }\r\n });\r\n this.observer.observe(document.body, {\r\n childList: true, subtree: true,\r\n attributes: true, attributeOldValue: true, attributeFilter: [tracking_attr]\r\n });\r\n }\r\n }\r\n el['_component'] = this;\r\n }\r\n if (!vdom) {\r\n this.render(el, html);\r\n }\r\n this.rendered && this.rendered(this.state);\r\n }\r\n\r\n public setState(state: T, options: ActionOptions\r\n = { render: true, history: false }) {\r\n if (state instanceof Promise) {\r\n // Promise will not be saved or rendered\r\n // state will be saved and rendered when promise is resolved\r\n // Wait for previous promise to complete first\r\n Promise.all([state, this._state]).then(v => {\r\n if (v[0]) this.setState(v[0]);\r\n }).catch(err => {\r\n console.error(err);\r\n throw err;\r\n });\r\n this._state = state;\r\n } else {\r\n this._state = state;\r\n if (state == null) return;\r\n this.state = state;\r\n if (options.render !== false) this.renderState(state);\r\n if (options.history !== false && this.enable_history) {\r\n this._history = [...this._history, state];\r\n this._history_idx = this._history.length - 1;\r\n }\r\n if (typeof options.callback === 'function') options.callback(this.state);\r\n }\r\n }\r\n\r\n private _history_prev = () => {\r\n this._history_idx--;\r\n if (this._history_idx >= 0) {\r\n this.setState(this._history[this._history_idx], { render: true, history: false });\r\n }\r\n else {\r\n this._history_idx = 0;\r\n }\r\n };\r\n\r\n private _history_next = () => {\r\n this._history_idx++;\r\n if (this._history_idx < this._history.length) {\r\n this.setState(this._history[this._history_idx], { render: true, history: false });\r\n }\r\n else {\r\n this._history_idx = this._history.length - 1;\r\n }\r\n };\r\n\r\n constructor(\r\n protected state?: T,\r\n protected view?: View,\r\n protected update?: Update,\r\n protected options?) {\r\n }\r\n\r\n start = (element = null, options?: MountOptions): Component => {\r\n return this.mount(element, { ...options, render: true });\r\n }\r\n\r\n public mount(element = null, options?: MountOptions): Component {\r\n console.assert(!this.element, 'Component already mounted.')\r\n this.options = options = { ...this.options, ...options };\r\n this.element = element;\r\n this.global_event = options.global_event;\r\n this.enable_history = !!options.history;\r\n\r\n if (this.enable_history) {\r\n this.on(options.history.prev || 'history-prev', this._history_prev);\r\n this.on(options.history.next || 'history-next', this._history_next);\r\n }\r\n\r\n if (options.route) {\r\n this.update = this.update || {};\r\n this.update[options.route] = REFRESH;\r\n }\r\n\r\n this.add_actions();\r\n this.state = this.state ?? this['model'] ?? {};\r\n if (typeof this.state === 'function') this.state = this.state();\r\n if (options.render) {\r\n this.setState(this.state, { render: true, history: true });\r\n } else {\r\n this.setState(this.state, { render: false, history: true });\r\n }\r\n if (app['debug']) {\r\n const id = typeof element === 'string' ? element : element.id;\r\n componentCache[id] = componentCache[id] || [];\r\n componentCache[id].push(this);\r\n }\r\n return this;\r\n }\r\n\r\n is_global_event(name: string): boolean {\r\n return name && (\r\n this.global_event ||\r\n this._global_events.indexOf(name) >= 0 ||\r\n name.startsWith('#') || name.startsWith('/') || name.startsWith('@'));\r\n }\r\n\r\n add_action(name: string, action, options: ActionOptions = {}) {\r\n if (!action || typeof action !== 'function') return;\r\n if (options.global) this._global_events.push(name);\r\n this.on(name as any, (...p) => {\r\n\r\n app['debug'] && app.run('debug', {\r\n component: this,\r\n _: '>',\r\n event: name, p,\r\n current_state: this.state,\r\n options\r\n });\r\n\r\n const newState = action(this.state, ...p);\r\n\r\n app['debug'] && app.run('debug', {\r\n component: this,\r\n _: '<',\r\n event: name, p,\r\n newState,\r\n state: this.state,\r\n options\r\n });\r\n\r\n this.setState(newState, options)\r\n }, options);\r\n }\r\n\r\n add_actions() {\r\n const actions = this.update || {};\r\n Reflect.getMetadataKeys(this).forEach(key => {\r\n if (key.startsWith('apprun-update:')) {\r\n const meta = Reflect.getMetadata(key, this)\r\n actions[meta.name] = [this[meta.key].bind(this), meta.options];\r\n }\r\n })\r\n\r\n const all = {};\r\n if (Array.isArray(actions)) {\r\n actions.forEach(act => {\r\n const [name, action, opts] = act as ActionDef;\r\n const names = name.toString();\r\n names.split(',').forEach(n => all[n.trim()] = [action, opts])\r\n })\r\n } else {\r\n Object.keys(actions).forEach(name => {\r\n const action = actions[name];\r\n if (typeof action === 'function' || Array.isArray(action)) {\r\n name.split(',').forEach(n => all[n.trim()] = action)\r\n }\r\n })\r\n }\r\n\r\n if (!all['.']) all['.'] = REFRESH;\r\n Object.keys(all).forEach(name => {\r\n const action = all[name];\r\n if (typeof action === 'function') {\r\n this.add_action(name, action);\r\n } else if (Array.isArray(action)) {\r\n this.add_action(name, action[0], action[1]);\r\n }\r\n });\r\n }\r\n\r\n public run(event: E, ...args) {\r\n const name = event.toString();\r\n return this.is_global_event(name) ?\r\n app.run(name, ...args) :\r\n this._app.run(name, ...args);\r\n }\r\n\r\n public on(event: E, fn: (...args) => void, options?: any) {\r\n const name = event.toString();\r\n this._actions.push({ name, fn });\r\n return this.is_global_event(name) ?\r\n app.on(name, fn, options) :\r\n this._app.on(name, fn, options);\r\n }\r\n\r\n public unmount() {\r\n this.observer?.disconnect();\r\n this._actions.forEach(action => {\r\n const { name, fn } = action;\r\n this.is_global_event(name) ?\r\n app.off(name, fn) :\r\n this._app.off(name, fn);\r\n });\r\n }\r\n}\r\n","import app from './app';\n\nexport type Route = (url: string, ...args: any[]) => any;\n\nexport const ROUTER_EVENT: string = '//';\nexport const ROUTER_404_EVENT: string = '///';\n\nexport const route: Route = (url: string) => {\n if (!url) url = '#';\n if (url.startsWith('#')) {\n const [name, ...rest] = url.split('/');\n app.run(name, ...rest) || app.run(ROUTER_404_EVENT, name, ...rest);\n app.run(ROUTER_EVENT, name, ...rest);\n } else if (url.startsWith('/')) {\n const [_, name, ...rest] = url.split('/');\n app.run('/' + name, ...rest) || app.run(ROUTER_404_EVENT, '/' + name, ...rest);\n app.run(ROUTER_EVENT, '/' + name, ...rest);\n } else {\n app.run(url) || app.run(ROUTER_404_EVENT, url);\n app.run(ROUTER_EVENT, url);\n }\n}\nexport default route;","import app from './app';\nimport { createElement, render, Fragment } from './vdom';\nimport { Component } from './component';\nimport { VNode, View, Action, Update, EventOptions, ActionOptions, MountOptions, AppStartOptions } from './types';\nimport { on, update, customElement } from './decorator';\nimport webComponent, { CustomElementOptions } from './web-component';\nimport { Route, route, ROUTER_EVENT, ROUTER_404_EVENT } from './router';\n\nexport interface IApp {\n start(element?: Element | string, model?: T, view?: View, update?: Update,\n options?: AppStartOptions): Component;\n on(name: string, fn: (...args: any[]) => void, options?: any): void;\n off(name: string, fn: (...args: any[]) => void): void;\n run(name: string, ...args: any[]): number;\n h(tag: string | Function, props, ...children): VNode | VNode[];\n createElement(tag: string | Function, props, ...children): VNode | VNode[];\n render(element: HTMLElement, node: VNode): void;\n Fragment(props, ...children): any[];\n route?: Route;\n webComponent(name: string, componentClass, options?: CustomElementOptions): void;\n}\n\napp.h = app.createElement = createElement;\napp.render = render;\napp.Fragment = Fragment;\napp.webComponent = webComponent;\n\napp.start = (element?: Element, model?: T, view?: View, update?: Update,\n options?: AppStartOptions) : Component => {\n const opts = {...options, render: true, global_event: true };\n const component = new Component(model, view, update);\n if (options && options.rendered) component.rendered = options.rendered;\n component.mount(element, opts);\n return component;\n};\n\nconst NOOP = _ => {/* Intentionally empty */ }\napp.on('$', NOOP);\napp.on('debug', _ => NOOP);\napp.on(ROUTER_EVENT, NOOP);\napp.on('#', NOOP);\napp['route'] = route;\napp.on('route', url => app['route'] && app['route'](url));\n\nif (typeof document === 'object') {\n document.addEventListener(\"DOMContentLoaded\", () => {\n if (app['route'] === route) {\n window.onpopstate = () => route(location.hash);\n route(location.hash);\n }\n });\n}\n\nexport type StatelessComponent = (args: T) => string | VNode | void;\nexport { app, Component, View, Action, Update, on, update, EventOptions, ActionOptions, MountOptions, Fragment }\nexport { update as event };\nexport { ROUTER_EVENT, ROUTER_404_EVENT };\nexport { customElement, CustomElementOptions, AppStartOptions };\nexport default app as IApp;\n\nif (typeof window === 'object') {\n window['Component'] = Component;\n window['React'] = app;\n window['on'] = on;\n window['customElement'] = customElement;\n}\n\n\n","import { createElement, updateElement, Fragment } from './vdom-my';\nexport function render(element, html, parent?) {\n updateElement(element, html, parent);\n}\nexport { createElement, Fragment };\n\n\n","import app from './app';\n\nfunction render(node, parent, idx) {\n const { tag, props, children } = node;\n let key = `_${idx}`;\n let id = props && props['id'];\n if (!id) id = `_${idx}${Date.now()}`;\n else key = id;\n if (!parent.__componentCache) parent.__componentCache = {};\n let component = parent.__componentCache[key];\n if (!component || !(component instanceof tag)) {\n component = parent.__componentCache[key] = new tag({ ...props, children }).mount(id);\n }\n let state = component.state;\n if (component.mounted) {\n const new_state = component.mounted(props, children, component.state);\n state = (typeof new_state !== 'undefined') ? new_state : component.state;\n }\n if (state instanceof Promise) {\n const render = el => {\n component.element = el;\n Promise.all([state]).then(v => {\n if (v[0]) component.setState(v[0]);\n else component.setState(component.state);\n })\n }\n return
render(e)} _component={component}>
;\n } else if (state != null) {\n const vdom = component._view(state, props);\n const render = el => {\n component.element = el;\n component.state = state;\n component.renderState(state, vdom);\n }\n return
render(e)} _component={component}>{vdom}
;\n } else {\n return
;\n }\n}\n\nexport default function createComponent(node, parent, idx = 0) {\n if (typeof node === 'string') return node;\n if (Array.isArray(node)) return node.map(child => createComponent(child, parent, idx++));\n let vdom = node;\n if (node && typeof node.tag === 'function' && Object.getPrototypeOf(node.tag).__isAppRunComponent) {\n vdom = render(node, parent, idx);\n }\n if (vdom && Array.isArray(vdom.children)) {\n const new_parent = vdom.props?._component;\n if (new_parent) {\n let i = 0;\n vdom.children = vdom.children.map(child => createComponent(child, new_parent, i++));\n } else {\n vdom.children = vdom.children.map(child => createComponent(child, parent, idx++));\n }\n }\n return vdom;\n}\n","import createComponent from './createComponent';\nimport { VDOM, VNode } from './types';\nexport type Element = any; //HTMLElement | SVGSVGElement | SVGElement;\n\nconst ATTR_PROPS = '_props';\n\nfunction collect(children) {\n const ch = [];\n const push = (c) => {\n if (c !== null && c !== undefined && c !== '' && c !== false) {\n ch.push((typeof c === 'function' || typeof c === 'object') ? c : `${c}`);\n }\n }\n children && children.forEach(c => {\n if (Array.isArray(c)) {\n c.forEach(i => push(i));\n } else {\n push(c);\n }\n });\n return ch;\n}\n\nexport function createElement(tag: string | Function | [], props?: {}, ...children) {\n const ch = collect(children);\n if (typeof tag === 'string') return { tag, props, children: ch };\n else if (Array.isArray(tag)) return tag; // JSX fragments - babel\n else if (tag === undefined && children) return ch; // JSX fragments - typescript\n else if (Object.getPrototypeOf(tag).__isAppRunComponent) return { tag, props, children: ch } // createComponent(tag, { ...props, children });\n else if (typeof tag === 'function') return tag(props, ch);\n else throw new Error(`Unknown tag in vdom ${tag}`);\n};\n\nconst keyCache = new WeakMap();\n\nexport const updateElement = render;\n\nexport function render(element: Element, nodes: VDOM, parent = {}) {\n // console.log('render', element, node);\n // tslint:disable-next-line\n if (nodes == null || nodes === false) return;\n\n nodes = createComponent(nodes, parent);\n\n const isSvg = element?.nodeName === \"SVG\";\n\n if (!element) return;\n if (Array.isArray(nodes)) {\n updateChildren(element, nodes, isSvg);\n } else {\n updateChildren(element, [nodes], isSvg);\n }\n}\n\nfunction same(el: Element, node: VNode) {\n // if (!el || !node) return false;\n const key1 = el.nodeName;\n const key2 = `${node.tag || ''}`;\n return key1.toUpperCase() === key2.toUpperCase();\n}\n\nfunction update(element: Element, node: VNode, isSvg: boolean) {\n if (node['_op'] === 3) return;\n // console.assert(!!element);\n isSvg = isSvg || node.tag === \"svg\";\n if (!same(element, node)) {\n element.parentNode.replaceChild(create(node, isSvg), element);\n return;\n }\n !(node['_op'] & 2) && updateChildren(element, node.children, isSvg);\n !(node['_op'] & 1) && updateProps(element, node.props, isSvg);\n}\n\nfunction updateChildren(element, children, isSvg: boolean) {\n const old_len = element.childNodes?.length || 0;\n const new_len = children?.length || 0;\n const len = Math.min(old_len, new_len);\n for (let i = 0; i < len; i++) {\n const child = children[i];\n if (child['_op'] === 3) continue;\n const el = element.childNodes[i];\n if (typeof child === 'string') {\n if (el.textContent !== child) {\n if (el.nodeType === 3) {\n el.nodeValue = child\n } else {\n element.replaceChild(createText(child), el);\n }\n }\n } else if (child instanceof HTMLElement || child instanceof SVGElement) {\n element.insertBefore(child, el);\n } else {\n const key = child.props && child.props['key'];\n if (key) {\n if (el.key === key) {\n update(element.childNodes[i], child, isSvg);\n } else {\n // console.log(el.key, key);\n const old = keyCache[key];\n if (old) {\n const temp = old.nextSibling;\n element.insertBefore(old, el);\n temp ? element.insertBefore(el, temp) : element.appendChild(el);\n }\n update(element.childNodes[i], child, isSvg);\n }\n } else {\n update(element.childNodes[i], child, isSvg);\n }\n }\n }\n\n let n = element.childNodes.length;\n while (n > len) {\n element.removeChild(element.lastChild);\n n--;\n }\n\n if (new_len > len) {\n const d = document.createDocumentFragment();\n for (let i = len; i < children.length; i++) {\n d.appendChild(create(children[i], isSvg));\n }\n element.appendChild(d);\n }\n}\n\nfunction createText(node) {\n if (node.indexOf('_html:') === 0) { // ?\n const div = document.createElement('div');\n div.insertAdjacentHTML('afterbegin', node.substring(6))\n return div;\n } else {\n return document.createTextNode(node);\n }\n}\n\nfunction create(node: VNode | string | HTMLElement | SVGElement, isSvg: boolean): Element {\n // console.assert(node !== null && node !== undefined);\n if ((node instanceof HTMLElement) || (node instanceof SVGElement)) return node;\n if (typeof node === \"string\") return createText(node);\n if (!node.tag || (typeof node.tag === 'function')) return createText(JSON.stringify(node));\n isSvg = isSvg || node.tag === \"svg\";\n const element = isSvg\n ? document.createElementNS(\"http://www.w3.org/2000/svg\", node.tag)\n : document.createElement(node.tag);\n\n updateProps(element, node.props, isSvg);\n if (node.children) node.children.forEach(child => element.appendChild(create(child, isSvg)));\n return element\n}\n\nfunction mergeProps(oldProps: {}, newProps: {}): {} {\n newProps['class'] = newProps['class'] || newProps['className'];\n delete newProps['className'];\n const props = {};\n if (oldProps) Object.keys(oldProps).forEach(p => props[p] = null);\n if (newProps) Object.keys(newProps).forEach(p => props[p] = newProps[p]);\n return props;\n}\n\nfunction updateProps(element: Element, props: {}, isSvg) {\n // console.assert(!!element);\n const cached = element[ATTR_PROPS] || {};\n props = mergeProps(cached, props || {});\n element[ATTR_PROPS] = props;\n\n for (const name in props) {\n const value = props[name];\n // if (cached[name] === value) continue;\n // console.log('updateProps', name, value);\n if (name.startsWith('data-')) {\n const dname = name.substring(5);\n const cname = dname.replace(/-(\\w)/g, (match) => match[1].toUpperCase());\n if (element.dataset[cname] !== value) {\n if (value || value === \"\") element.dataset[cname] = value;\n else delete element.dataset[cname];\n }\n } else if (name === 'style') {\n if (element.style.cssText) element.style.cssText = '';\n if (typeof value === 'string') element.style.cssText = value;\n else {\n for (const s in value) {\n if (element.style[s] !== value[s]) element.style[s] = value[s];\n }\n }\n } else if (name.startsWith('xlink')) {\n const xname = name.replace('xlink', '').toLowerCase();\n if (value == null || value === false) {\n element.removeAttributeNS('http://www.w3.org/1999/xlink', xname);\n } else {\n element.setAttributeNS('http://www.w3.org/1999/xlink', xname, value);\n }\n } else if (name.startsWith('on')) {\n if (!value || typeof value === 'function') {\n element[name] = value;\n } else if (typeof value === 'string') {\n if (value) element.setAttribute(name, value);\n else element.removeAttribute(name);\n }\n } else if (/^id$|^class$|^list$|^readonly$|^contenteditable$|^role|-/g.test(name) || isSvg) {\n if (element.getAttribute(name) !== value) {\n if (value) element.setAttribute(name, value);\n else element.removeAttribute(name);\n }\n } else if (element[name] !== value) {\n element[name] = value;\n }\n if (name === 'key' && value) keyCache[value] = element;\n }\n if (props && typeof props['ref'] === 'function') {\n window.requestAnimationFrame(() => props['ref'](element));\n }\n}\n\nexport function Fragment(props, ...children): any[] {\n return collect(children);\n}","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tif(__webpack_module_cache__[moduleId]) {\n\t\treturn __webpack_module_cache__[moduleId].exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// module exports must be returned from runtime so entry inlining is disabled\n// startup\n// Load entry module and return exports\nreturn __webpack_require__(643);\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.g = (function() {\n\tif (typeof globalThis === 'object') return globalThis;\n\ttry {\n\t\treturn this || new Function('return this')();\n\t} catch (e) {\n\t\tif (typeof window === 'object') return window;\n\t}\n})();","__webpack_require__.o = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop)","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};"],"sourceRoot":""} \ No newline at end of file diff --git a/demo/app.js b/demo/app.js index b92bcf3c..c1d0576c 100644 --- a/demo/app.js +++ b/demo/app.js @@ -1,2 +1,2 @@ -!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.apprun=e():t.apprun=e()}(this,(function(){return(()=>{"use strict";var __webpack_modules__={740:(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{Z:()=>__WEBPACK_DEFAULT_EXPORT__});var _src_apprun__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__(778),_state_machine__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__(863);const state={_state:"START",display:"0",arg1:0,arg2:0,op:"",stack:[]},view=({_state:t,op:e,arg1:n,arg2:o,display:a,stack:s})=>_src_apprun__WEBPACK_IMPORTED_MODULE_0__.default.h(_src_apprun__WEBPACK_IMPORTED_MODULE_0__.default.Fragment,null,_src_apprun__WEBPACK_IMPORTED_MODULE_0__.default.h("style",null," ","\n .calculator { width: 200px; }\n .buttons {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n grid-gap: 2px;\n }\n button { padding: 10px; width:100%; }\n button:nth-of-type(1) {\n grid-column: span 2;\n }\n button:nth-of-type(16) {\n grid-column: span 2;\n }\n "),_src_apprun__WEBPACK_IMPORTED_MODULE_0__.default.h("div",{class:"calculator"},_src_apprun__WEBPACK_IMPORTED_MODULE_0__.default.h("h1",null,a),_src_apprun__WEBPACK_IMPORTED_MODULE_0__.default.h("div",{class:"buttons",$onclick:button_click},_src_apprun__WEBPACK_IMPORTED_MODULE_0__.default.h("button",null,"CE"),_src_apprun__WEBPACK_IMPORTED_MODULE_0__.default.h("button",null,"+/-"),_src_apprun__WEBPACK_IMPORTED_MODULE_0__.default.h("button",null,"/"),_src_apprun__WEBPACK_IMPORTED_MODULE_0__.default.h("button",null,"7"),_src_apprun__WEBPACK_IMPORTED_MODULE_0__.default.h("button",null,"8"),_src_apprun__WEBPACK_IMPORTED_MODULE_0__.default.h("button",null,"9"),_src_apprun__WEBPACK_IMPORTED_MODULE_0__.default.h("button",null,"*"),_src_apprun__WEBPACK_IMPORTED_MODULE_0__.default.h("button",null,"4"),_src_apprun__WEBPACK_IMPORTED_MODULE_0__.default.h("button",null,"5"),_src_apprun__WEBPACK_IMPORTED_MODULE_0__.default.h("button",null,"6"),_src_apprun__WEBPACK_IMPORTED_MODULE_0__.default.h("button",null,"-"),_src_apprun__WEBPACK_IMPORTED_MODULE_0__.default.h("button",null,"1"),_src_apprun__WEBPACK_IMPORTED_MODULE_0__.default.h("button",null,"2"),_src_apprun__WEBPACK_IMPORTED_MODULE_0__.default.h("button",null,"3"),_src_apprun__WEBPACK_IMPORTED_MODULE_0__.default.h("button",null,"+"),_src_apprun__WEBPACK_IMPORTED_MODULE_0__.default.h("button",null,"0"),_src_apprun__WEBPACK_IMPORTED_MODULE_0__.default.h("button",null,"."),_src_apprun__WEBPACK_IMPORTED_MODULE_0__.default.h("button",null,"=")),_src_apprun__WEBPACK_IMPORTED_MODULE_0__.default.h("small",null,s.length>0&&`${s[0][0]} ${s[0][1]} `,t.startsWith("FIRST_")&&""+a,"OP"===t&&`${n} ${e}`,t.startsWith("SECOND_")&&`${n} ${e} ${a}`,"EQ"===t&&`${n} ${e} ${o} = ${a}`))),button_click=(state,e)=>{var _a;const priority={"*":2,"/":2,"+":1,"-":1},getEvent=t=>{switch(t){case"+/-":return"+/-";case"CE":return"CE";case".":return"DOT";case"=":return"EQ";default:return/\d/.test(t)?"NUM":"OP"}},key=(null===(_a=e.target)||void 0===_a?void 0:_a.textContent)||e,event=getEvent(key);let{_state,op,arg1,arg2,display,stack}=state;const clear=()=>{display="0",arg1=arg2=0,op="",stack.length=0},negative=()=>{display=display.startsWith("-")?display.substring(1):"-"+display},calc=()=>{display=eval(`${arg1}${op}${arg2}`).toString()},op1=()=>{op=key,arg1=parseFloat(display)},op2=()=>{if(priority[key]===priority[op])arg2=parseFloat(display),calc(),op=key,arg1=parseFloat(display);else if(priority[key]{arg1=parseFloat(display),calc()},eq2=()=>{if(arg2=parseFloat(display),calc(),stack.length){arg2=parseFloat(display);const f=stack.pop();display=eval(`${f[0]}${f[1]}${display}`).toString(),arg1=f[0],op=f[1]}},state_machine={START:[["NUM","FIRST_ARG",()=>display=key],["DOT","FIRST_ARG_FLOAT",()=>display="0."]],FIRST_ARG:[["+/-","FIRST_ARG",negative],["NUM","FIRST_ARG",()=>display+=key],["DOT","FIRST_ARG_FLOAT",()=>display+=key],["OP","OP",op1],["CE","START",clear]],FIRST_ARG_FLOAT:[["+/-","FIRST_ARG_FLOAT",negative],["NUM","FIRST_ARG_FLOAT",()=>display+=key],["OP","OP",op1],["CE","START",clear]],OP:[["NUM","SECOND_ARG",()=>display=key],["DOT","SECOND_ARG",()=>display="0."],["OP","OP",()=>op=key],["CE","START",clear]],SECOND_ARG:[["+/-","SECOND_ARG",negative],["NUM","SECOND_ARG",()=>display+=key],["DOT","SECOND_ARG_FLOAT",()=>display+=key],["EQ","EQ",eq2],["OP","OP",op2],["CE","OP",()=>display="0"]],SECOND_ARG_FLOAT:[["+/-","SECOND_ARG_FLOAT",negative],["NUM","SECOND_ARG_FLOAT",()=>display+=key],["EQ","EQ",eq2],["OP","OP",op2],["CE","OP",()=>display="0"]],EQ:[["+/-","FIRST_ARG",negative],["NUM","FIRST_ARG",()=>display=key],["DOT","FIRST_ARG_FLOAT",()=>display="0."],["EQ","EQ",eq0],["OP","OP",op1],["CE","START",clear]]},{next_state,transition}=(0,_state_machine__WEBPACK_IMPORTED_MODULE_1__.k)(state_machine,_state,event);return _state=next_state||_state,transition&&transition(),{_state,op,arg1,arg2,display,stack}},update={"#calculator":t=>t},__WEBPACK_DEFAULT_EXPORT__=t=>new _src_apprun__WEBPACK_IMPORTED_MODULE_0__.Component(state,view,update).mount(t)},863:(t,e,n)=>{n.d(e,{k:()=>o});const o=(t,e,n)=>{const o=t[e];if(!o)throw new Error(`No state: ${o} found in state machine`);const a=o.find((t=>t[0]===n));return a?{next_state:a[1],transition:a[2]}:{}}},788:(t,e,n)=>{n.r(e);var o=n(778);let a;const s=({url:t})=>{a.innerHTML="
",$(a.firstChild).load(t)};o.default.on("#",(()=>o.default.render(a,o.default.h(s,{url:"demo/home.html"})))),o.default.on("#new",(()=>o.default.render(a,o.default.h(s,{url:"demo/new.html"}))));const i=t=>o.default.h("div",null,o.default.h("h1",null,t),o.default.h("button",{onclick:()=>o.default.run("DECREASE")},"-1"),o.default.h("button",{onclick:()=>o.default.run("INCREASE")},"+1")),r={"#counter":t=>t,INCREASE:t=>t+1,DECREASE:t=>t-1},l=[],c=({num:t,idx:e})=>o.default.h("div",null,o.default.h("h1",null,t),o.default.h("button",{onclick:()=>o.default.run("-1",e)},"-1"),o.default.h("button",{onclick:()=>o.default.run("+1",e)},"+1"),o.default.h("button",{onclick:()=>o.default.run("remove-counter",e)},"x")),d=({counters:t})=>t.map(((t,e)=>o.default.h(c,{num:t,idx:e}))),u=t=>(console.log(t),o.default.h("div",null,o.default.h("div",null,o.default.h("button",{onclick:()=>o.default.run("history-prev")}," << "),o.default.h("button",{onclick:()=>o.default.run("history-next")}," >> "),o.default.h("button",{onclick:()=>o.default.run("add-counter")},"add counter"),o.default.h("button",{onclick:()=>o.default.run("remove-counter",t.length-1),disabled:t.length<=0},"remove counter")),o.default.h("br",null),o.default.h(d,{counters:t}))),p={"#counters":t=>t,"add-counter":t=>[...t,0],"remove-counter":(t,e)=>[...t.slice(0,e),...t.slice(e+1)],"+1":(t,e)=>[...t.slice(0,e),t[e]+1,...t.slice(e+1)],"-1":(t,e)=>[...t.slice(0,e),t[e]-1,...t.slice(e+1)]};class h extends o.Component{constructor(){super(...arguments),this.model={dragging:!1,position:{x:100,y:100},start:{x:0,y:0}},this.view=t=>{const e={userSelect:"none",cursor:"move",position:"absolute",padding:"50px",border:"1px solid black",color:t.dragging?"gold":"white","background-color":"#3C8D2F",left:t.position.x+"px",top:t.position.y+"px"};return o.app.h("div",{ref:e=>t.el=e,$onpointerdown:"drag",$onpointermove:"move",$onpointerup:"drop",style:e}," Drag me!")},this.update={"#dragdrop":t=>t,drag:(t,e)=>(e.target.setPointerCapture(e.pointerId),Object.assign(Object.assign({},t),{dragging:!0,start:{x:e.pageX,y:e.pageY}})),move:(t,e)=>{if(!t.dragging)return;const n={x:e.pageX,y:e.pageY},o={x:t.position.x+e.pageX-t.start.x,y:t.position.y+e.pageY-t.start.y};return Object.assign(Object.assign({},t),{start:n,position:o})},drop:(t,e)=>(e.target.releasePointerCapture(e.pointerId),Object.assign(Object.assign({},t),{dragging:!1}))},this.unload=({el:t})=>{console.log("dragdrop.unload"),t.onpointerdown=t.onpointerup=t.onpointermove=null}}}var m,_=n(740);!function(t){t[t.all=0]="all",t[t.todo=1]="todo",t[t.done=2]="done"}(m||(m={}));const f=({todo:t,idx:e})=>o.default.h("li",{onclick:()=>g.run("toggle",e),style:{color:t.done?"green":"red",textDecoration:t.done?"line-through":"none",cursor:"pointer"}},t.value),b=t=>{const e=document.getElementById("new-todo");13===t&&e.value&&(g.run("add",e.value),e.value="")},v={"#todo":t=>t,add:(t,e)=>Object.assign(Object.assign({},t),{todos:[...t.todos,{value:e,done:!1}]}),toggle:(t,e)=>Object.assign(Object.assign({},t),{todos:[...t.todos.slice(0,e),Object.assign(Object.assign({},t.todos[e]),{done:!t.todos[e].done}),...t.todos.slice(e+1)]}),filter:(t,e)=>Object.assign(Object.assign({},t),{filter:e}),clear:t=>Object.assign(Object.assign({},t),{todos:[]})};let g=new o.Component({filter:0,todos:[]},(t=>{const e=e=>({"font-weight":t.filter===e?"bold":"normal",cursor:"pointer"});return o.default.h("div",null,o.default.h("h1",null,"Todo"),o.default.h("div",null,o.default.h("span",null,"Show:"),o.default.h("span",null," ",o.default.h("a",{style:e(0),onclick:()=>g.run("filter",0)},"All"))," |",o.default.h("span",null," ",o.default.h("a",{style:e(1),onclick:()=>g.run("filter",1)},"Todo"))," |",o.default.h("span",null," ",o.default.h("a",{style:e(2),onclick:()=>g.run("filter",2)},"Done"))),o.default.h("ul",null,t.todos.filter((e=>0===t.filter||1===t.filter&&!e.done||2===t.filter&&e.done)).map(((t,e)=>o.default.h(f,{todo:t,idx:e})))),o.default.h("div",null,o.default.h("input",{id:"new-todo",placeholder:"add todo",onkeyup:t=>b(t.keyCode)}),o.default.h("button",{onclick:t=>b(13)},"Add"),o.default.h("button",{onclick:()=>g.run("clear")},"Clear")),o.default.h("br",null),o.default.h("div",null,o.default.h("button",{onclick:()=>g.run("todo-undo")}," Undo "),o.default.h("button",{onclick:()=>g.run("todo-redo")}," Redo ")))}),v);function y(t){return Math.round(1e3*Math.random())%t}const w=["pretty","large","big","small","tall","short","long","handsome","plain","quaint","clean","elegant","easy","angry","crazy","helpful","mushy","odd","unsightly","adorable","important","inexpensive","cheap","expensive","fancy"],C=["red","yellow","blue","green","pink","brown","purple","brown","white","black","orange"],E=["table","chair","house","bbq","desk","car","pony","cookie","sandwich","burger","pizza","mouse","keyboard"];let k=1;function O(t){return new Array(t).fill(0).map((t=>({id:k++,label:`${w[y(w.length)]} ${C[y(C.length)]} ${E[y(E.length)]}`})))}const x={run:()=>({data:O(1e3),selected:0}),add:t=>({data:t.data.concat(O(1e3)),selected:t.selected}),runlots:()=>({data:O(1e4),selected:0}),clear:()=>({data:[],selected:0}),update:t=>({data:t.data.map(((t,e)=>(e%10==0&&(t.label=t.label+" !!!"),t))),selected:t.selected}),swaprows:t=>{if(t.data.length>4){const e=t.data.length-2,n=t.data[1];t.data[1]=t.data[e],t.data[e]=n}return t},select:(t,e)=>{t.selected=e},delete:(t,e)=>{t.selected!=t.selected&&t.selected,t.data=t.data.filter((t=>t.id!=e))}};let A,T;const S=function(t){T=t,A=performance.now()},R=function(){window.setTimeout((function(){const t=performance.now();console.log(T+" took "+(t-A))}),0)},P=t=>{for(;t;){if("TR"===t.tagName)return t.id;t=t.parentNode}},D=(t,e)=>{var n;const o=e.target;if(o){if(e.preventDefault(),"BUTTON"===o.tagName&&o.id)S(o.id),M.run(o.id),R();else if(o.matches(".remove")){S("delete");const t=P(o);M.run("delete",t),null===(n=document.getElementById(t))||void 0===n||n.remove(),R()}else if(o.matches(".lbl")){S("select");const e=P(o);let n;t.selected&&(n=document.getElementById(""+t.selected),n&&(n.className="")),M.run("select",e),n=document.getElementById(e),n&&(n.className="danger")}R()}},M=new o.Component({data:[],selected:0},(t=>o.app.h("div",{class:"container",$onclick:D},o.app.h("div",null,o.app.h("button",{id:"run"},"Create 1,000 rows"),o.app.h("button",{id:"runlots"},"Create 10,000 rows"),o.app.h("button",{id:"add"},"Append 1,000 rows"),o.app.h("button",{id:"update"},"Update every 10th row"),o.app.h("button",{id:"clear"},"Clear"),o.app.h("button",{id:"swaprows"},"Swap Rows")),o.app.h("br",null),o.app.h("table",{class:"table table-hover table-striped test-data",id:"main-table"},o.app.h("tbody",null,t.data.map((e=>{const n=e.id==t.selected?"danger":void 0;return o.app.h("tr",{class:n,id:e.id,key:e.id},o.app.h("td",{class:"col-md-1"},e.id),o.app.h("td",{class:"col-md-4"},o.app.h("a",{class:"lbl"},e.label)),o.app.h("td",{class:"col-md-1"},o.app.h("a",{class:"remove"},o.app.h("span",{class:"glyphicon glyphicon-remove remove","aria-hidden":"true"}))),o.app.h("td",{class:"col-md-6"}))})))),o.app.h("span",{class:"preloadicon glyphicon glyphicon-remove hidden","aria-hidden":"true"}))),x);M.unload=()=>{console.log("benchmark.unload")},M["-patch-vdom-on"]=!0;var N=function(t,e,n,o){var a,s=arguments.length,i=s<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,n):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(t,e,n,o);else for(var r=t.length-1;r>=0;r--)(a=t[r])&&(i=(s<3?a(i):s>3?a(e,n,i):a(e,n))||i);return s>3&&i&&Object.defineProperty(e,n,i),i};class j extends o.Component{constructor(){super(...arguments),this.model="world",this.view=t=>o.default.h("div",null,o.default.h("h1",null,"Hello: ",t),o.default.h("input",{autofocus:!0,oninput:t=>this.run("input",t)})),this.hello=t=>t,this.oninput=(t,e)=>e.target.value}}N([(0,o.on)("#hello")],j.prototype,"hello",void 0),N([(0,o.on)("input")],j.prototype,"oninput",void 0);class I extends o.Component{constructor(){super(...arguments),this.model="world",this.view=t=>o.default.h("div",null,o.default.h("div",null,"Test push state"),o.default.h("h1",null,"Hello: ",t),o.default.h("input",{oninput:t=>this.run("input",t)})),this.hello=(t,e)=>e||t,this.oninput=(t,e)=>(history.pushState(null,null,"#hello-pushstate/"+e.target.value),e.target.value)}}N([(0,o.on)("#hello-pushstate")],I.prototype,"hello",void 0),N([(0,o.on)("input")],I.prototype,"oninput",void 0);class L extends o.Component{constructor(){super(...arguments),this.model="world",this.view=t=>o.default.h("div",null,o.default.h("div",null,"Test delayed event (1s)"),o.default.h("h1",null,"Hello: ",t),o.default.h("input",{oninput:t=>this.run("input",t)})),this.hello=t=>t,this.update={input:[(t,e)=>e.target.value,{delay:1e3,debug:!0}]}}}N([(0,o.on)("#hello-delayed")],L.prototype,"hello",void 0);class U extends o.Component{constructor(){super(...arguments),this.model="world",this.view=t=>o.default.h("div",null,o.default.h("div",null,"Test directive"),o.default.h("h1",null,"Hello: ",t),o.default.h("table",null,o.default.h("tr",null,o.default.h("td",null,"Default event:"),o.default.h("td",null,""),o.default.h("td",null,o.default.h("input",{value:t,$oninput:!0}))),o.default.h("tr",null,o.default.h("td",null,"Named event:"),o.default.h("td",null,""),o.default.h("td",null,o.default.h("input",{value:t,$oninput:"ev1"}))),o.default.h("tr",null,o.default.h("td",null,"Bind:"),o.default.h("td",null,""),o.default.h("td",null,o.default.h("input",{value:t,$bind:!0}))))),this.hello=t=>t,this.oninput=(t,e)=>e.target.value}}N([(0,o.on)("#hello-directive")],U.prototype,"hello",void 0),N([(0,o.on)("oninput, ev1")],U.prototype,"oninput",void 0);var B=n(80);const W=[{id:"yellow",rot:0},{id:"green",rot:60},{id:"magenta",rot:120},{id:"red",rot:180},{id:"cyan",rot:240},{id:"blue",rot:300}];class F extends B.Component{constructor(){super(...arguments),this.state=0,this.view=t=>`
\n

AppRun SVG Carousel

\n \n \n ${W.map((t=>``)).join("")}\n \n \n \n \n \n
It is a reimplementation of a snabbdom example by Jon Kleiser.
\n
`,this.update={"@rot+60":t=>t+60,"@rot-60":t=>t-60,"@reset":()=>0,"#svg":t=>t}}}let Z=new F;o.default.on("$",(({key:t,props:e})=>{if("$animation"===t){const n=e[t];"string"==typeof n&&(e.class="animated "+n)}}));class H extends o.Component{constructor(){super(...arguments),this.state={animation:!0},this.view=t=>o.default.h(o.default.Fragment,null,o.default.h("img",{$animation:t.animation&&"bounce infinite",src:"logo.png"}),o.default.h("div",{$animation:"bounceInRight"},o.default.h("button",{disabled:t.animation,$onclick:"start-animation"},"start"),o.default.h("button",{disabled:!t.animation,$onclick:"stop-animation"},"stop"))),this.update={"#animation":t=>t,"start-animation":t=>Object.assign(Object.assign({},t),{animation:!0}),"stop-animation":t=>Object.assign(Object.assign({},t),{animation:!1})}}}const V=[{name:"Hello World ($bind)",code:"// Hello World ($bind)\nconst state = '';\nconst view = state =>
\n

Hello {state}

\n \n
;\napp.start(document.body, state, view);\n"},{name:"Hello World ($on)",code:"// Hello World ($on)\nconst state = '';\nconst view = state => <>\n

Hello {state}

\n \n;\nconst oninput = (_, e) => e.target.value;\napp.start(document.body, state, view);\n"},{name:"Hello World (debounce)",code:"// Hello World (debounce)\nconst state = '';\nconst view = state => <>\n

Hello {state}

\n \n;\nconst oninput = [(_, e) => e.target.value, { delay: 300 }];\napp.start(document.body, state, view, {oninput});\n"},{name:"Clock",code:"// Clock\nconst state = new Date();\nconst view = state =>

{state.toLocaleTimeString()}

;\nconst timer = state => new Date();\nwindow.setInterval(() => { app.run('timer') }, 1000);\napp.start(document.body, state, view, {timer});\n"},{name:"Clock (Component Lifecycle)",code:"// Clock (Component Lifecycle)\nclass Clock extends Component {\n id;\n state = new Date();\n view = state => <>\n

{state.toLocaleTimeString()}

\n \n ;\n update = {\n timer: state => new Date()\n }\n mounted = () => {\n this.id = window.setInterval(() => { this.run('timer') }, 1000);\n console.log('timer started');\n }\n unload = () => {\n window.clearInterval(this.id);\n console.log('timer cleared');\n }\n}\napp.render(document.body, );\n"},{name:"Stopwatch",code:"// Stopwatch\nconst state = {\n id: null,\n start: new Date(),\n elapsed: '0'\n}\nconst view = state =>
\n

{state.elapsed}

\n \n \n
;\n\nconst update = {\n start:state => {\n state.start = new Date();\n state.id = state.id || window.setInterval(() => { app.run('timer') }, 100);\n },\n stop: state => {\n state.id = state.id && window.clearInterval(state.id) && false;\n },\n timer: state => {\n state.elapsed = ((new Date() - state.start) / 1000).toFixed(3) + ' seconds';\n return state\n }\n};\napp.start(document.body, state, view, update);\n"},{name:"Counter (HTML)",code:"// Counter (HTML)\nconst state = 0;\nconst view = state => `
\n

${state}

\n \n \n
`;\nconst update = {\n '+1': state => state + 1,\n '-1': state => state - 1\n};\napp.start(document.body, state, view, update);\n"},{name:"Counter (JSX)",code:"// Counter (JSX)\nconst state = 0;\nconst view = state =>
\n

{state}

\n \n \n
;\nconst update = {\n '+1': state => state + 1,\n '-1': state => state - 1\n};\napp.start(document.body, state, view, update);\n"},{name:"Counter ($onclick)",code:"// Counter ($onclick)\nconst state = 0;\nconst view = state =>
\n

{state}

\n \n \n
;\napp.start(document.body, state, view);\n "},{name:"Counter (Web Component)",code:"// Counter (Web Component)\nclass Counter extends Component {\n state = 0;\n view = state => {\n const add = (state, num) => state + num;\n return <>\n

{state}

\n \n \n ;\n }\n}\napp.webComponent('my-app', Counter);\napp.render(document.body, );\n"},{name:"Async fetch",code:"// Async fetch\nconst state = {};\nconst view = state => <>\n
\n {state.loading &&
loading ...
}\n {state.comic && }\n;\nconst update = {\n 'loading': (state, loading) => ({...state, loading }),\n 'fetchComic': async _ => {\n app.run('loading', true);\n const response = await fetch('https://xkcd-imgs.herokuapp.com/');\n const comic = await response.json();\n return {comic};\n }\n};\napp.start(document.body, state, view, update);\n"},{name:"Custom Directive",code:"// Animation Directive Using animate.css\napp.on('$', ({key, props}) => {\n if (key === '$animation') {\n const value = props[key];\n if (typeof value === 'string') {\n props.class = `animated ${value}`;\n }\n }\n});\n\nconst state = {\n animation: true\n}\n\nconst start_animation = state => ({ animation: true })\nconst stop_animation = state => ({ animation: false })\n\nconst view = state => <>\n \n
\n \n \n
\n\n\napp.start(document.body, state, view);\n"},{name:"Ref - Examples",code:"// Ref - Examples\nconst focus = e => e.focus()\nconst edit = e => e.setAttribute('contenteditable', 'true');\nconst View = () => <>\n \n
\n
\n This text is editable. Click to edit.\n
\n;\n\napp.render(document.body, );\n"},{name:"Child Components",code:"// Child Components\n\nclass Counter extends Component {\n state = 0;\n view = state => (\n
\n

{state}

\n \n \n
\n );\n update = {\n '+1': state => state + 1,\n '-1': state => state - 1\n };\n}\n\nclass App extends Component {\n state = 0;\n view = state => (\n
\n \n
\n \n \n \n
\n );\n update = {\n '+1': state => state + 1,\n };\n}\n\nnew App().start(document.body);\n"},{name:"Element in JSX - canvas",code:"// Element in JSX - canvas\nconst View = () => {\n const canvas = document.createElement('canvas');\n const ctx = canvas.getContext(\"2d\");\n ctx.beginPath();\n ctx.arc(95, 50, 40, 0, 2 * Math.PI);\n ctx.stroke();\n return
\n {canvas}\n
\n}\napp.render(document.body, );\n"},{name:"Shadow DOM",code:"// Shadow DOM\nconst Shadow = (_, children) => {\n const el = document.createElement('section');\n el.attachShadow({ mode: 'open' });\n app.render(el.shadowRoot, children);\n return <>{el};\n};\n\nconst View = () => <>\n
black
\n \n \n
red
\n
red
\n \n
black
\n\napp.render(document.body, );\n"},{name:"Decorators",code:"// Decorators\n//@customElement decorator creates a web component\n@customElement('my-counter')\nclass Counter extends Component {\n state = 0;\n\n //@on decorator creates an event handler\n @on('+') add = (state, delta) => state + delta;\n\n view = state => <>\n

{state}

\n \n \n ;\n}\n\n//now, create three web components\ndocument.body.append(document.createElement('my-counter'));\ndocument.body.append(document.createElement('my-counter'));\ndocument.body.append(document.createElement('my-counter'));\n"},{name:"Reactivity - getter",code:'// Reactivity - getter\nconst state = {\n a: 1,\n b: 2,\n get c() {\n return this.a + this.b;\n }\n};\nconst view = ({a, b, c}) => <>\n \n \n

{a} + {b} = { c }

\n;\napp.start(document.body, state, view);\n'},{name:"Reactivity - Proxy",code:"// Reactivity - Proxy\nconst handler = {\n get: (target, name) => {\n const text = target.text || '';\n switch (name) {\n case 'text': return target.text;\n case 'characters': return text.replace(/\\s/g, '').length;\n case 'words': return !text ? 0 : text.split(/\\s/).length;\n case 'lines': return text.split('\\n').length;\n default: return null\n }\n }\n};\nconst state = new Proxy(\n { text: \"let's count\" },\n handler\n);\nconst view = state =>
\n \n
chars: {state.characters} words: {state.words} lines: {state.lines}
\n 
{state.text}
\n
;\napp.start(document.body, state, view);\n"},{name:"Routing (component event)",code:"// Routing (component event)\nclass Home extends Component {\n view = () =>
Home
;\n update = {'#, #home': state => state };\n}\n\nclass Contact extends Component {\n view = () =>
Contact
;\n update = {'#contact': state => state };\n}\n\nclass About extends Component {\n view = () =>
About
;\n update = {'#about': state => state };\n}\n\nconst App = () => <>\n
\n Home{' | '}\n Contact{' | '}\n About
\n
\n\n\napp.render(document.body, );\n[About, Contact, Home].map(C => new C().start('pages'));\n"},{name:"Routing (mount options)",code:"// Routing (mount options)\nclass Home extends Component {\n view = () =>
Home
;\n}\n\nclass Contact extends Component {\n view = () =>
Contact
;\n}\n\nclass About extends Component {\n view = () =>
About
;\n}\n\nconst App = () => <>\n
\n Home{' | '}\n Contact{' | '}\n About
\n
\n\n\napp.render(document.body, );\n[\n [About, '#about'],\n [Contact, '#contact'],\n [Home, '#, #home'],\n].map(([C, route]) => new C().start('pages', {route}));\n"},{name:"SVG - animation",code:'// SVG - animation\nconst view = () => <>\n \n \n \n \n \n \n \n \n;\n\napp.start(document.body, {}, view);\n'},{name:"SVG - xlink",code:'// SVG - xlink\nconst view = () => \n \n Click => AppRun\n\n\napp.start(document.body, {}, view);\n'},{name:"SVG - $onclick",code:'// SVG - $onclick\nconst view = state => \n \n \n\n\nconst update = {\n test: (state, evt) => alert("You have clicked the " + evt.target.tagName)\n}\napp.start(document.body, \'\', view, update);\n'},{name:"Content Editable",code:'// Content Editable\nconst view = () => <>\n
\n This text is editable. Click to edit.\n
\n \n \n\napp.start(document.body, {}, view);\n'},{name:"List attribute",code:'// List attribute\nconst view = () => <>\n \n \n \n\napp.start(document.body, {}, view);\n'},{name:"Init State as an Async Function",code:"// Init State as an Async Function\nconst state = async () => {\n const response = await fetch('https://xkcd-imgs.herokuapp.com/');\n const comic = await response.json();\n return { comic };\n};\n\nconst view = state => <>\n { state.comic && }\n;\n\napp.start(document.body, state, view);\n"}],K=t=>`\n\n\n \n \n \n \n \n AppRun Playground\n \n \n \n\n\n\n\n\n`;\n\nconst tab = ({ code }) => {\n const doc = window.open().document;\n doc.open();\n doc.write(html(code));\n doc.close();\n};\n\nconst run = ({ code }) => {\n let iframe = document.getElementById('iframe') as HTMLIFrameElement;\n iframe.parentNode.replaceChild(iframe.cloneNode(), iframe);\n iframe = document.getElementById('iframe') as HTMLIFrameElement;\n const doc = iframe.contentWindow.document;\n doc.open();\n doc.write(html(code));\n doc.close();\n};\n\nexport class PlayComponent extends Component {\n\n codeEditor = null\n state = {...examples[0], selectedIndex: 0}\n\n view = (state) =>
\n
\n
\n Examples: \n \n
\n
\n \n
\n
\n
\n
\n \n
\n
\n