├── .gitignore ├── docs ├── app │ ├── custom-elements │ │ ├── profile-image │ │ │ ├── view.html │ │ │ └── index.js │ │ ├── footer │ │ │ ├── index.js │ │ │ └── view.html │ │ ├── profile-nationality │ │ │ ├── view.html │ │ │ ├── flags.zip │ │ │ ├── index.js │ │ │ └── flags │ │ │ │ ├── blank.gif │ │ │ │ ├── flags.png │ │ │ │ ├── README.md │ │ │ │ ├── flags.min.css │ │ │ │ └── flags.css │ │ ├── main │ │ │ ├── index.js │ │ │ └── view.html │ │ ├── header │ │ │ ├── index.js │ │ │ └── view.html │ │ ├── counter │ │ │ ├── index.js │ │ │ └── view.html │ │ └── profile │ │ │ ├── index.js │ │ │ └── view.html │ ├── index.js │ ├── build.js │ └── build.js.map └── index.html ├── bin └── build ├── LICENSE ├── package.json ├── README.md └── index.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .vscode 3 | .DS_Store -------------------------------------------------------------------------------- /docs/app/custom-elements/profile-image/view.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/app/custom-elements/footer/index.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | name: 'x-footer', 3 | view: require('./view.html') 4 | } 5 | -------------------------------------------------------------------------------- /bin/build: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | browserify docs/app/index.js -d -t [hyperviewify] | exorcist docs/app/build.js.map > docs/app/build.js -------------------------------------------------------------------------------- /docs/app/custom-elements/profile-nationality/view.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /docs/app/custom-elements/profile-nationality/flags.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/davidjamesstone/hyperapp-customelements/HEAD/docs/app/custom-elements/profile-nationality/flags.zip -------------------------------------------------------------------------------- /docs/app/custom-elements/profile-nationality/index.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | name: 'x-profile-nationality', 3 | view: require('./view.html'), 4 | observedAttributes: ['code'] 5 | } 6 | -------------------------------------------------------------------------------- /docs/app/custom-elements/profile-nationality/flags/blank.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/davidjamesstone/hyperapp-customelements/HEAD/docs/app/custom-elements/profile-nationality/flags/blank.gif -------------------------------------------------------------------------------- /docs/app/custom-elements/profile-nationality/flags/flags.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/davidjamesstone/hyperapp-customelements/HEAD/docs/app/custom-elements/profile-nationality/flags/flags.png -------------------------------------------------------------------------------- /docs/app/custom-elements/main/index.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | name: 'x-main', 3 | state: { 4 | counterMax: 10 5 | }, 6 | actions: { 7 | setCounterMax: (value) => (state) => ({ counterMax: value }) 8 | }, 9 | view: require('./view.html') 10 | } 11 | -------------------------------------------------------------------------------- /docs/app/custom-elements/header/index.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | name: 'x-header', 3 | state: { 4 | showMenu: false 5 | }, 6 | actions: { 7 | toggleMenu: () => (state) => ({ showMenu: !state.showMenu }) 8 | }, 9 | view: require('./view.html') 10 | } 11 | -------------------------------------------------------------------------------- /docs/app/custom-elements/footer/view.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/app/custom-elements/counter/index.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | name: 'x-counter', 3 | state: { 4 | counter: 0 5 | }, 6 | actions: { 7 | down: () => state => ({ counter: state.counter - 1 }), 8 | up: () => state => ({ counter: state.counter + 1 }) 9 | }, 10 | view: require('./view.html'), 11 | observedAttributes: [{ max: Number }] 12 | } 13 | -------------------------------------------------------------------------------- /docs/app/custom-elements/counter/view.html: -------------------------------------------------------------------------------- 1 |
2 |

3 | 4 |

5 |

6 | 7 |

8 |

9 | 10 |

11 |
-------------------------------------------------------------------------------- /docs/app/custom-elements/main/view.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 |
5 | Counter max: 7 |
8 |
9 | Counter: 10 |
11 |
12 | 13 | 14 | 15 | 16 | 17 |
18 | -------------------------------------------------------------------------------- /docs/app/custom-elements/profile-image/index.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | name: 'x-profile-image', 3 | view: require('./view.html'), 4 | state: { 5 | getUrl: function () { 6 | if (!this.url) { 7 | return 8 | } 9 | 10 | if (this.size === 'medium') { 11 | return this.url.replace('https://randomuser.me/api/portraits/', 12 | 'https://randomuser.me/api/portraits/med/') 13 | } else if (this.size === 'thumbnail') { 14 | return this.url.replace('https://randomuser.me/api/portraits/', 15 | 'https://randomuser.me/api/portraits/thumb/') 16 | } else { 17 | return this.url 18 | } 19 | } 20 | }, 21 | observedAttributes: ['url', 'size'] 22 | } 23 | -------------------------------------------------------------------------------- /docs/app/index.js: -------------------------------------------------------------------------------- 1 | window.h = require('hyperapp').h 2 | 3 | var define = require('../..') 4 | 5 | define(require('./custom-elements/main')) 6 | define(require('./custom-elements/header')) 7 | define(require('./custom-elements/footer')) 8 | define(require('./custom-elements/profile')) 9 | define(require('./custom-elements/profile-image')) 10 | var Nationality = define(require('./custom-elements/profile-nationality')) 11 | var Counter = define(require('./custom-elements/counter')) 12 | 13 | // Demo programmatically added elements 14 | const myCounter = new Counter() 15 | const myNationality = new Nationality() 16 | myNationality.setAttribute('code', 'gb') 17 | 18 | setTimeout(function () { 19 | document.body.appendChild(myCounter) 20 | document.body.appendChild(myNationality) 21 | }, 5000) 22 | -------------------------------------------------------------------------------- /docs/app/custom-elements/profile/index.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | name: 'x-profile', 3 | view: require('./view.html'), 4 | mapAttrsToState: false, 5 | actions: { 6 | setUser: (user) => state => Object.assign({}, state, { user }) 7 | }, 8 | observedAttributes: ['id'], 9 | loadProfile: function (id) { 10 | var url = 'https://randomuser.me/api/?noinfo' + (id ? '&seed=' + id : '') 11 | var actions = this.actions 12 | 13 | window.fetch(url, { 14 | method: 'get' 15 | }).then(function (response) { 16 | return response.json() 17 | }).then(function (response) { 18 | var user = response.results[0] 19 | console.log(user) 20 | actions.setUser(user) 21 | }).catch(function (err) { 22 | console.error(err) 23 | }) 24 | }, 25 | attributeChangedCallback: function (name, oldValue, newValue) { 26 | this.loadProfile(newValue) 27 | }, 28 | constructor () { 29 | if (this.hasAttribute('id')) { 30 | this.loadProfile(this.getAttribute('id')) 31 | } 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 dvstn 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hyperapp-customelements", 3 | "version": "0.0.2", 4 | "description": "W3C Web Components Custom Elements library for hyperapp", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "standard", 8 | "build": "bin/build" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "git+https://github.com/davidjamesstone/hyperapp-customelements.git" 13 | }, 14 | "keywords": [ 15 | "hyperapp", 16 | "custom elements", 17 | "web components" 18 | ], 19 | "author": "davidjamesstone", 20 | "license": "ISC", 21 | "bugs": { 22 | "url": "https://github.com/davidjamesstone/hyperapp-customelements/issues" 23 | }, 24 | "homepage": "https://github.com/davidjamesstone/hyperapp-customelements#readme", 25 | "peerDependencies": { 26 | "hyperapp": "^1.0.2" 27 | }, 28 | "devDependencies": { 29 | "browserify": "^15.2.0", 30 | "ce-v0": "^0.2.2", 31 | "exorcist": "^1.0.1", 32 | "hyperapp": "^1.1.2", 33 | "hyperviewify": "^1.0.0", 34 | "standard": "^10.0.3" 35 | }, 36 | "standard": { 37 | "ignore": [ 38 | "docs/app/build.js" 39 | ] 40 | }, 41 | "dependencies": {} 42 | } 43 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 27 | 28 | 29 | 30 |
31 |
32 |
33 |

34 | hyperapp-customelements example 35 |

36 |

37 | Check out the source code here. 38 |
39 | The user profiles are loaded dynamically from randomuser.me. 40 |
41 | Styling courtesy of bulma.io. 42 |

43 | 44 | 45 |

46 | Hightlight Custom Elements: 47 | 49 |

50 | 51 | 52 |
53 |
54 |
55 | 56 | 57 | -------------------------------------------------------------------------------- /docs/app/custom-elements/header/view.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/app/custom-elements/profile/view.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 8 |
9 |
10 |
11 |
12 | 14 |
15 |
16 |
17 |

18 | {state.user.name.title} 19 | {state.user.name.first} 20 | {state.user.name.last} 21 |

22 |

23 | 25 | {state.user.id.name} 26 |

27 |
28 |
29 | 30 |
31 | 32 |
33 | 34 | 35 | 36 | {state.user.phone} 37 |
38 | 39 |
40 | 41 | 42 | 43 | 44 |
45 | 46 |
47 | 48 | 49 | 50 | {state.user.email} 51 |
52 |
53 |
54 |
55 |
56 | 57 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # hyperapp-customelements 2 | 3 | `hyperapp-customelements` is a tiny (3KB) Web Components [Custom Elements library](#custom-elements) based on `hyperapp`. 4 | 5 | Define Custom Elements that: 6 | 7 | - work in all evergreen browsers and IE10. 8 | - are based on [hyperapp](https://github.com/hyperapp/hyperapp) so you get 9 | - a beautifully simple API 10 | - a functional paradigm 11 | - immutable state data 12 | - Virtual DOM updates 13 | - provide a solid migration path to Custom Elements V1 14 | 15 | See it in action [here](https://davidjamesstone.github.io/hyperapp-customelements/) 16 | 17 | ```js 18 | const define = require('hyperapp-customelements') 19 | 20 | const MyElement = define({ 21 | // Required 22 | name: 'my-element', 23 | view () { 24 | // Any `h()` returning function including JSX or a transformed `hyperviews` template 25 | }, 26 | 27 | // Optional 28 | state: { 29 | // Initial hyperapp state 30 | }, 31 | actions: { 32 | // Hyperapp actions 33 | }, 34 | constructor () { 35 | // Wired actions are now available as `this.actions` 36 | }, 37 | // Attributes to observe. 38 | // Each item in the array must be a string or an object. 39 | // Use an object to provide a conversion function. 40 | // The function is used to convert the value from a string when reflecting to state 41 | // E.g ['title', { max: Number }, { show: Boolean }, { custom: (value) => {...} }, 'another'] 42 | observedAttributes: Array, 43 | attributeChangedCallback (name, oldValue, newValue) { 44 | // Invoked when an observed attribute changes. 45 | // Attribute changes are reflected to state by default. 46 | // It's therefore not always necessary to provide this function. 47 | // Set `mapAttrsToState` to `false` to update state manually. 48 | }, 49 | connectedCallback () { 50 | // Invoked when the element is inserted into the document 51 | }, 52 | disconnectedCallback () { 53 | // Invoked when the element is removed from the document 54 | }, 55 | //...any other properties/methods are added to the element prototype 56 | }) 57 | ``` 58 | 59 | Then use declaratively 60 | 61 | ```html 62 | 63 | ``` 64 | 65 | or programmatically 66 | 67 | ```js 68 | const myElement = new MyElement() 69 | document.body.appendChild(myElement) 70 | ``` 71 | 72 | ## Example 73 | 74 | ```js 75 | const define = require('hyperapp-customelements') 76 | 77 | define({ 78 | name: 'x-counter', 79 | state: { 80 | counter: 0 81 | }, 82 | actions: { 83 | down: value => state => ({ count: state.count - value }), 84 | up: value => state => ({ count: state.count + value }) 85 | }, 86 | view: (state, actions) => ( 87 |
88 |

{state.count}

89 | 90 | 91 |
92 | ), 93 | observedAttributes: [{ max: Number }] 94 | }) 95 | ``` 96 | 97 | ```html 98 | 99 | ``` 100 | # Notes 101 | 102 | You may notice that the API looks like Custom Elements V1, however the decision was taken to 103 | initially [target Custom Elements V0](https://github.com/WebReflection/ce-v0) but with a V1 flavour so, when V1 is widely supported, the upgrade will be simple. See [this article](https://medium.com/@WebReflection/a-custom-elements-v0-grampafill-dc1319420e9b) for more information. Huge thanks to [Andrea Giammarchi](https://github.com/WebReflection) for all his work in this area. 104 | 105 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | var app = require('hyperapp').app 2 | var CEV0Component = require('ce-v0/comp') 3 | 4 | function hyperappCustomElement (options) { 5 | var view = options.view 6 | var state = options.state 7 | var ctor = options.constructor 8 | var mapAttrsToState = 'mapAttrsToState' in options 9 | ? !!options.mapAttrsToState 10 | : true 11 | 12 | var observedAttributes = options.observedAttributes 13 | var hasObservedAttributes = Array.isArray(observedAttributes) 14 | var actions = Object.assign(mapAttrsToState ? { 15 | __applyState: (item) => (state) => { 16 | return item 17 | } 18 | } : {}, options.actions) 19 | 20 | var opts = {} 21 | var converters = {} 22 | if (hasObservedAttributes) { 23 | opts.observedAttributes = [] 24 | observedAttributes.forEach(function (attr) { 25 | if (typeof attr === 'string') { 26 | opts.observedAttributes.push(attr) 27 | } else { 28 | var name = Object.keys(attr)[0] 29 | opts.observedAttributes.push(name) 30 | if (typeof attr[name] === 'function') { 31 | converters[name] = attr[name] 32 | } 33 | } 34 | }) 35 | } 36 | 37 | function convert (name, value) { 38 | var converter = converters[name] 39 | 40 | if (converter) { 41 | if (converter === Boolean) { 42 | return value !== 'false' && value !== '0' 43 | } 44 | 45 | return converters[name](value) 46 | } 47 | 48 | return value 49 | } 50 | 51 | function mapToState (el) { 52 | if (hasObservedAttributes) { 53 | opts.observedAttributes.forEach(function (name) { 54 | if (el.hasAttribute(name)) { 55 | var item = {} 56 | item[name] = convert(name, el.getAttribute(name)) 57 | el.actions.__applyState(item) 58 | } 59 | }) 60 | } 61 | } 62 | 63 | if (typeof ctor === 'function') { 64 | opts.constructor = function () { 65 | this.actions = app(state, actions, view, this) 66 | 67 | ctor.call(this) 68 | 69 | if (mapAttrsToState) { 70 | mapToState(this) 71 | } 72 | } 73 | } else { 74 | opts.constructor = function () { 75 | this.actions = app(state, actions, view, this) 76 | 77 | if (mapAttrsToState) { 78 | mapToState(this) 79 | } 80 | } 81 | } 82 | 83 | // Only fire attributeChangedCallback 84 | // if it's an observed attribute as per CEV1 85 | var onattribute 86 | var attributeChangedCallback = options.attributeChangedCallback 87 | 88 | if (hasObservedAttributes) { 89 | onattribute = function (name, oldValue, newValue) { 90 | if (observedAttributes.indexOf(name) < 0) { 91 | return 92 | } 93 | 94 | if (attributeChangedCallback) { 95 | attributeChangedCallback.call(this, name, oldValue, newValue) 96 | } 97 | 98 | if (mapAttrsToState) { 99 | var partial = {} 100 | partial[name] = convert(name, newValue) 101 | this.actions.__applyState(partial) 102 | } 103 | } 104 | 105 | opts.onattribute = onattribute 106 | } 107 | 108 | for (var key in options) { 109 | switch (key) { 110 | case 'connectedCallback': 111 | opts.onconnected = options[key] 112 | break 113 | case 'disconnectedCallback': 114 | opts.ondisconnected = options[key] 115 | break 116 | case 'view': 117 | case 'state': 118 | case 'actions': 119 | case 'constructor': 120 | case 'observedAttributes': 121 | case 'attributeChangedCallback': 122 | break 123 | default: 124 | opts[key] = options[key] 125 | break 126 | } 127 | } 128 | 129 | return new CEV0Component(opts) 130 | } 131 | 132 | module.exports = hyperappCustomElement 133 | -------------------------------------------------------------------------------- /docs/app/custom-elements/profile-nationality/flags/README.md: -------------------------------------------------------------------------------- 1 | Country flags in single CSS sprite 2 | ================================== 3 | 4 | CSS Sprites - a method to optimize page loads by combining a large number of small images into one. 5 | 6 | ## Usage 7 | 8 | Include CSS file in your HTML code then insert a transparent 1x1 pixel image with classes `flag` and `flag-{country code}`. The country code is in the format ISO 3166-1 alpha-2: 9 | 10 | ```html 11 | 12 | 13 | 14 | 15 | 16 | Czech Republic 17 | 18 | 19 | ``` 20 | 21 | ## Included flags 22 | 23 | 24 | * Afghanistan (af) 25 | * Aland Islands (ax) 26 | * Albania (al) 27 | * Algeria (dz) 28 | * American Samoa (as) 29 | * Andorra (ad) 30 | * Angola (ao) 31 | * Anguilla (ai) 32 | * Antigua and Barbuda (ag) 33 | * Argentina (ar) 34 | * Armenia (am) 35 | * Aruba (aw) 36 | * Australia (au) 37 | * Austria (at) 38 | * Azerbaijan (az) 39 | * Bahamas (bs) 40 | * Bahrain (bh) 41 | * Bangladesh (bd) 42 | * Barbados (bb) 43 | * Belarus (by) 44 | * Belgium (be) 45 | * Belize (bz) 46 | * Benin (bj) 47 | * Bermuda (bm) 48 | * Bhutan (bt) 49 | * Bolivia, Plurinational State of (bo) 50 | * Bosnia and Herzegovina (ba) 51 | * Botswana (bw) 52 | * Bouvet Island (bv) 53 | * Brazil (br) 54 | * British Indian Ocean Territory (io) 55 | * Brunei Darussalam (bn) 56 | * Bulgaria (bg) 57 | * Burkina Faso (bf) 58 | * Burundi (bi) 59 | * Cambodia (kh) 60 | * Cameroon (cm) 61 | * Canada (ca) 62 | * Canary Islands (ic) 63 | * Cape Verde (cv) 64 | * Catalonia (catalonia) 65 | * Cayman Islands (ky) 66 | * Central African Republic (cf) 67 | * Chad (td) 68 | * Chile (cl) 69 | * China (cn) 70 | * Colombia (co) 71 | * Comoros (km) 72 | * Congo (cg) 73 | * Congo, The Democratic Republic of the (cd) 74 | * Cook Islands (ck) 75 | * Costa Rica (cr) 76 | * Cote d'Ivoire (ci) 77 | * Croatia (hr) 78 | * Cuba (cu) 79 | * Curacao (cw) 80 | * Cyprus (cy) 81 | * Czech Republic (cz) 82 | * Denmark (dk) 83 | * Djibouti (dj) 84 | * Dominica (dm) 85 | * Dominican Republic (do) 86 | * Ecuador (ec) 87 | * Egypt (eg) 88 | * El Salvador (sv) 89 | * England (england) 90 | * Equatorial Guinea (gq) 91 | * Eritrea (er) 92 | * Estonia (ee) 93 | * Ethiopia (et) 94 | * European Union (eu) 95 | * Falkland Islands (Malvinas) (fk) 96 | * Faroe Islands (fo) 97 | * Fiji (fj) 98 | * Finland (fi) 99 | * France (fr) 100 | * French Guiana (gf) 101 | * French Polynesia (pf) 102 | * French Southern Territories (tf) 103 | * Gabon (ga) 104 | * Gambia (gm) 105 | * Georgia (ge) 106 | * Germany (de) 107 | * Ghana (gh) 108 | * Gibraltar (gi) 109 | * Greece (gr) 110 | * Greenland (gl) 111 | * Grenada (gd) 112 | * Guadeloupe (gp) 113 | * Guam (gu) 114 | * Guatemala (gt) 115 | * Guernsey (gg) 116 | * Guinea (gn) 117 | * Guinea-Bissau (gw) 118 | * Guyana (gy) 119 | * Haiti (ht) 120 | * Heard Island and McDonald Islands (hm) 121 | * Holy See (Vatican City State) (va) 122 | * Honduras (hn) 123 | * Hong Kong (hk) 124 | * Hungary (hu) 125 | * Iceland (is) 126 | * India (in) 127 | * Indonesia (id) 128 | * Iran, Islamic Republic of (ir) 129 | * Iraq (iq) 130 | * Ireland (ie) 131 | * Isle of Man (im) 132 | * Israel (il) 133 | * Italy (it) 134 | * Jamaica (jm) 135 | * Japan (jp) 136 | * Jersey (je) 137 | * Jordan (jo) 138 | * Kazakhstan (kz) 139 | * Kenya (ke) 140 | * Kiribati (ki) 141 | * Korea, Democratic People's Republic of (kp) 142 | * Korea, Republic of (kr) 143 | * Kosovo (xk) 144 | * Kurdistan (kurdistan) 145 | * Kuwait (kw) 146 | * Kyrgyzstan (kg) 147 | * Lao People's Democratic Republic (la) 148 | * Latvia (lv) 149 | * Lebanon (lb) 150 | * Lesotho (ls) 151 | * Liberia (lr) 152 | * Libya (ly) 153 | * Liechtenstein (li) 154 | * Lithuania (lt) 155 | * Luxembourg (lu) 156 | * Macao (mo) 157 | * Macedonia, The Former Yugoslav Republic of (mk) 158 | * Madagascar (mg) 159 | * Malawi (mw) 160 | * Malaysia (my) 161 | * Maldives (mv) 162 | * Mali (ml) 163 | * Malta (mt) 164 | * Marshall Islands (mh) 165 | * Martinique (mq) 166 | * Mauritania (mr) 167 | * Mauritius (mu) 168 | * Mayotte (yt) 169 | * Mexico (mx) 170 | * Micronesia, Federated States of (fm) 171 | * Moldova, Republic of (md) 172 | * Monaco (mc) 173 | * Mongolia (mn) 174 | * Montenegro (me) 175 | * Montserrat (ms) 176 | * Morocco (ma) 177 | * Mozambique (mz) 178 | * Myanmar (mm) 179 | * Namibia (na) 180 | * Nauru (nr) 181 | * Nepal (np) 182 | * Netherlands (nl) 183 | * Netherlands Antilles (an) 184 | * New Caledonia (nc) 185 | * New Zealand (nz) 186 | * Nicaragua (ni) 187 | * Niger (ne) 188 | * Nigeria (ng) 189 | * Niue (nu) 190 | * Norfolk Island (nf) 191 | * Northern Mariana Islands (mp) 192 | * Norway (no) 193 | * Oman (om) 194 | * Pakistan (pk) 195 | * Palau (pw) 196 | * Palestinian Territory, Occupied (ps) 197 | * Panama (pa) 198 | * Papua New Guinea (pg) 199 | * Paraguay (py) 200 | * Peru (pe) 201 | * Philippines (ph) 202 | * Pitcairn (pn) 203 | * Poland (pl) 204 | * Portugal (pt) 205 | * Puerto Rico (pr) 206 | * Qatar (qa) 207 | * Reunion (re) 208 | * Romania (ro) 209 | * Russian Federation (ru) 210 | * Rwanda (rw) 211 | * Saint Helena (sh) 212 | * Saint Kitts and Nevis (kn) 213 | * Saint Lucia (lc) 214 | * Saint Pierre and Miquelon (pm) 215 | * Saint Vincent and the Grenadines (vc) 216 | * Samoa (ws) 217 | * San Marino (sm) 218 | * Sao Tome and Principe (st) 219 | * Saudi Arabia (sa) 220 | * Scotland (scotland) 221 | * Senegal (sn) 222 | * Serbia (rs) 223 | * Seychelles (sc) 224 | * Sierra Leone (sl) 225 | * Singapore (sg) 226 | * Sint Maarten (sx) 227 | * Slovakia (sk) 228 | * Slovenia (si) 229 | * Solomon Islands (sb) 230 | * Somalia (so) 231 | * Somaliland (somaliland) 232 | * South Africa (za) 233 | * South Georgia and the South Sandwich Islands (gs) 234 | * South Sudan (ss) 235 | * Spain (es) 236 | * Sri Lanka (lk) 237 | * Sudan (sd) 238 | * Suriname (sr) 239 | * Svalbard and Jan Mayen (sj) 240 | * Swaziland (sz) 241 | * Sweden (se) 242 | * Switzerland (ch) 243 | * Syrian Arab Republic (sy) 244 | * Taiwan, Province of China (tw) 245 | * Tajikistan (tj) 246 | * Tanzania (tz) 247 | * Thailand (th) 248 | * Tibet (tibet) 249 | * Timor-Leste (tl) 250 | * Togo (tg) 251 | * Tokelau (tk) 252 | * Tonga (to) 253 | * Trinidad and Tobago (tt) 254 | * Tunisia (tn) 255 | * Turkey (tr) 256 | * Turkmenistan (tm) 257 | * Turks and Caicos Islands (tc) 258 | * Tuvalu (tv) 259 | * Uganda (ug) 260 | * Ukraine (ua) 261 | * United Arab Emirates (ae) 262 | * United Kingdom (gb) 263 | * United States (us) 264 | * United States Minor Outlying Islands (um) 265 | * Uruguay (uy) 266 | * Uzbekistan (uz) 267 | * Vanuatu (vu) 268 | * Venezuela, Bolivarian Republic of (ve) 269 | * Viet Nam (vn) 270 | * Virgin Islands, British (vg) 271 | * Virgin Islands, U.S. (vi) 272 | * Wales (wales) 273 | * Wallis and Futuna (wf) 274 | * Western Sahara (eh) 275 | * Yemen (ye) 276 | * Zambia (zm) 277 | * Zanzibar (zanzibar) 278 | * Zimbabwe (zw) 279 | 280 | ## Links 281 | 282 | * [CSS Flag Sprites generator](https://www.flag-sprites.com/ "Country flags in single CSS sprite") 283 | * [ISO 3166-1](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2) -------------------------------------------------------------------------------- /docs/app/custom-elements/profile-nationality/flags/flags.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Generated with CSS Flag Sprite generator (https://www.flag-sprites.com/) 3 | */.flag{display:inline-block;width:16px;height:11px;background:url('flags.png') no-repeat}.flag.flag-cz{background-position:-64px -33px}.flag.flag-ne{background-position:-16px -110px}.flag.flag-jm{background-position:-240px -66px}.flag.flag-ae{background-position:-16px 0}.flag.flag-im{background-position:-112px -66px}.flag.flag-sh{background-position:-112px -132px}.flag.flag-gm{background-position:-48px -55px}.flag.flag-bm{background-position:-144px -11px}.flag.flag-ga{background-position:-160px -44px}.flag.flag-scotland{background-position:-48px -132px}.flag.flag-um{background-position:-160px -154px}.flag.flag-bz{background-position:-32px -22px}.flag.flag-vg{background-position:-16px -165px}.flag.flag-kg{background-position:-48px -77px}.flag.flag-uz{background-position:-208px -154px}.flag.flag-ke{background-position:-32px -77px}.flag.flag-il{background-position:-96px -66px}.flag.flag-sn{background-position:-208px -132px}.flag.flag-ai{background-position:-64px 0}.flag.flag-ba{background-position:0 -11px}.flag.flag-am{background-position:-96px 0}.flag.flag-lr{background-position:-48px -88px}.flag.flag-gb{background-position:-176px -44px}.flag.flag-no{background-position:-96px -110px}.flag.flag-sr{background-position:0 -143px}.flag.flag-tl{background-position:-240px -143px}.flag.flag-py{background-position:-144px -121px}.flag.flag-zw{background-position:-224px -165px}.flag.flag-sy{background-position:-80px -143px}.flag.flag-mv{background-position:-160px -99px}.flag.flag-ar{background-position:-144px 0}.flag.flag-kn{background-position:-112px -77px}.flag.flag-as{background-position:-160px 0}.flag.flag-ms{background-position:-112px -99px}.flag.flag-sb{background-position:-16px -132px}.flag.flag-kw{background-position:-176px -77px}.flag.flag-bh{background-position:-96px -11px}.flag.flag-ge{background-position:-208px -44px}.flag.flag-catalonia{background-position:-64px -22px}.flag.flag-tg{background-position:-160px -143px}.flag.flag-kh{background-position:-64px -77px}.flag.flag-tc{background-position:-112px -143px}.flag.flag-nz{background-position:-160px -110px}.flag.flag-do{background-position:-144px -33px}.flag.flag-tj{background-position:-208px -143px}.flag.flag-tf{background-position:-144px -143px}.flag.flag-eg{background-position:-208px -33px}.flag.flag-td{background-position:-128px -143px}.flag.flag-br{background-position:-192px -11px}.flag.flag-ph{background-position:0 -121px}.flag.flag-mr{background-position:-96px -99px}.flag.flag-pm{background-position:-48px -121px}.flag.flag-tk{background-position:-224px -143px}.flag.flag-ci{background-position:-144px -22px}.flag.flag-cv{background-position:-16px -33px}.flag.flag-sl{background-position:-176px -132px}.flag.flag-ee{background-position:-192px -33px}.flag.flag-md{background-position:-176px -88px}.flag.flag-cg{background-position:-112px -22px}.flag.flag-jo{background-position:0 -77px}.flag.flag-ec{background-position:-176px -33px}.flag.flag-ng{background-position:-48px -110px}.flag.flag-lu{background-position:-96px -88px}.flag.flag-ag{background-position:-48px 0}.flag.flag-bd{background-position:-32px -11px}.flag.flag-sm{background-position:-192px -132px}.flag.flag-ax{background-position:-224px 0}.flag.flag-mm{background-position:-16px -99px}.flag.flag-sx{background-position:-64px -143px}.flag.flag-om{background-position:-176px -110px}.flag.flag-rs{background-position:-208px -121px}.flag.flag-vn{background-position:-48px -165px}.flag.flag-fr{background-position:-144px -44px}.flag.flag-us{background-position:-176px -154px}.flag.flag-lk{background-position:-32px -88px}.flag.flag-mc{background-position:-160px -88px}.flag.flag-ua{background-position:-128px -154px}.flag.flag-de{background-position:-80px -33px}.flag.flag-tt{background-position:-64px -154px}.flag.flag-va{background-position:-224px -154px}.flag.flag-lb{background-position:-240px -77px}.flag.flag-mo{background-position:-48px -99px}.flag.flag-to{background-position:-32px -154px}.flag.flag-ki{background-position:-80px -77px}.flag.flag-cl{background-position:-176px -22px}.flag.flag-lc{background-position:0 -88px}.flag.flag-tn{background-position:-16px -154px}.flag.flag-ir{background-position:-176px -66px}.flag.flag-bo{background-position:-176px -11px}.flag.flag-io{background-position:-144px -66px}.flag.flag-cf{background-position:-96px -22px}.flag.flag-za{background-position:-176px -165px}.flag.flag-dm{background-position:-128px -33px}.flag.flag-my{background-position:-208px -99px}.flag.flag-ug{background-position:-144px -154px}.flag.flag-mw{background-position:-176px -99px}.flag.flag-tv{background-position:-80px -154px}.flag.flag-ss{background-position:-16px -143px}.flag.flag-bb{background-position:-16px -11px}.flag.flag-ca{background-position:-48px -22px}.flag.flag-ni{background-position:-64px -110px}.flag.flag-ad{background-position:0 0}.flag.flag-so{background-position:-224px -132px}.flag.flag-gt{background-position:-144px -55px}.flag.flag-id{background-position:-64px -66px}.flag.flag-si{background-position:-128px -132px}.flag.flag-np{background-position:-112px -110px}.flag.flag-hk{background-position:-208px -55px}.flag.flag-me{background-position:-192px -88px}.flag.flag-bg{background-position:-80px -11px}.flag.flag-cm{background-position:-192px -22px}.flag.flag-rw{background-position:-240px -121px}.flag.flag-pt{background-position:-112px -121px}.flag.flag-ic{background-position:-48px -66px}.flag.flag-cd{background-position:-80px -22px}.flag.flag-ck{background-position:-160px -22px}.flag.flag-mt{background-position:-128px -99px}.flag.flag-pl{background-position:-32px -121px}.flag.flag-ch{background-position:-128px -22px}.flag.flag-ve{background-position:0 -165px}.flag.flag-sk{background-position:-160px -132px}.flag.flag-ye{background-position:-144px -165px}.flag.flag-mh{background-position:-224px -88px}.flag.flag-pa{background-position:-192px -110px}.flag.flag-kurdistan{background-position:-160px -77px}.flag.flag-hu{background-position:-32px -66px}.flag.flag-vu{background-position:-64px -165px}.flag.flag-bv{background-position:-240px -11px}.flag.flag-nr{background-position:-128px -110px}.flag.flag-vc{background-position:-240px -154px}.flag.flag-qa{background-position:-160px -121px}.flag.flag-somaliland{background-position:-240px -132px}.flag.flag-sc{background-position:-32px -132px}.flag.flag-an{background-position:-112px 0}.flag.flag-mk{background-position:-240px -88px}.flag.flag-je{background-position:-224px -66px}.flag.flag-fi{background-position:-64px -44px}.flag.flag-af{background-position:-32px 0}.flag.flag-be{background-position:-48px -11px}.flag.flag-ma{background-position:-144px -88px}.flag.flag-fo{background-position:-128px -44px}.flag.flag-bt{background-position:-224px -11px}.flag.flag-cu{background-position:0 -33px}.flag.flag-pn{background-position:-64px -121px}.flag.flag-al{background-position:-80px 0}.flag.flag-kp{background-position:-128px -77px}.flag.flag-eu{background-position:-48px -44px}.flag.flag-es{background-position:-16px -44px}.flag.flag-pr{background-position:-80px -121px}.flag.flag-cy{background-position:-48px -33px}.flag.flag-bj{background-position:-128px -11px}.flag.flag-tibet{background-position:-192px -143px}.flag.flag-gd{background-position:-192px -44px}.flag.flag-nu{background-position:-144px -110px}.flag.flag-gf{background-position:-224px -44px}.flag.flag-km{background-position:-96px -77px}.flag.flag-sj{background-position:-144px -132px}.flag.flag-ls{background-position:-64px -88px}.flag.flag-fj{background-position:-80px -44px}.flag.flag-bs{background-position:-208px -11px}.flag.flag-bw{background-position:0 -22px}.flag.flag-mx{background-position:-192px -99px}.flag.flag-pe{background-position:-208px -110px}.flag.flag-wales{background-position:-80px -165px}.flag.flag-sg{background-position:-96px -132px}.flag.flag-pk{background-position:-16px -121px}.flag.flag-nc{background-position:0 -110px}.flag.flag-hr{background-position:0 -66px}.flag.flag-dk{background-position:-112px -33px}.flag.flag-bf{background-position:-64px -11px}.flag.flag-au{background-position:-192px 0}.flag.flag-kr{background-position:-144px -77px}.flag.flag-gw{background-position:-176px -55px}.flag.flag-gq{background-position:-96px -55px}.flag.flag-la{background-position:-224px -77px}.flag.flag-bn{background-position:-160px -11px}.flag.flag-gn{background-position:-64px -55px}.flag.flag-aw{background-position:-208px 0}.flag.flag-lt{background-position:-80px -88px}.flag.flag-fk{background-position:-96px -44px}.flag.flag-pw{background-position:-128px -121px}.flag.flag-eh{background-position:-224px -33px}.flag.flag-sa{background-position:0 -132px}.flag.flag-kz{background-position:-208px -77px}.flag.flag-gy{background-position:-192px -55px}.flag.flag-er{background-position:0 -44px}.flag.flag-in{background-position:-128px -66px}.flag.flag-ml{background-position:0 -99px}.flag.flag-re{background-position:-176px -121px}.flag.flag-cr{background-position:-240px -22px}.flag.flag-at{background-position:-176px 0}.flag.flag-iq{background-position:-160px -66px}.flag.flag-ky{background-position:-192px -77px}.flag.flag-gh{background-position:0 -55px}.flag.flag-uy{background-position:-192px -154px}.flag.flag-az{background-position:-240px 0}.flag.flag-pf{background-position:-224px -110px}.flag.flag-ru{background-position:-224px -121px}.flag.flag-it{background-position:-208px -66px}.flag.flag-jp{background-position:-16px -77px}.flag.flag-st{background-position:-32px -143px}.flag.flag-gr{background-position:-112px -55px}.flag.flag-nl{background-position:-80px -110px}.flag.flag-is{background-position:-192px -66px}.flag.flag-mn{background-position:-32px -99px}.flag.flag-wf{background-position:-96px -165px}.flag.flag-ro{background-position:-192px -121px}.flag.flag-gg{background-position:-240px -44px}.flag.flag-cw{background-position:-32px -33px}.flag.flag-et{background-position:-32px -44px}.flag.flag-mu{background-position:-144px -99px}.flag.flag-gu{background-position:-160px -55px}.flag.flag-ie{background-position:-80px -66px}.flag.flag-sz{background-position:-96px -143px}.flag.flag-fm{background-position:-112px -44px}.flag.flag-gl{background-position:-32px -55px}.flag.flag-th{background-position:-176px -143px}.flag.flag-bi{background-position:-112px -11px}.flag.flag-ao{background-position:-128px 0}.flag.flag-sv{background-position:-48px -143px}.flag.flag-zanzibar{background-position:-192px -165px}.flag.flag-xk{background-position:-128px -165px}.flag.flag-gp{background-position:-80px -55px}.flag.flag-li{background-position:-16px -88px}.flag.flag-na{background-position:-240px -99px}.flag.flag-se{background-position:-80px -132px}.flag.flag-by{background-position:-16px -22px}.flag.flag-pg{background-position:-240px -110px}.flag.flag-ps{background-position:-96px -121px}.flag.flag-yt{background-position:-160px -165px}.flag.flag-tm{background-position:0 -154px}.flag.flag-ly{background-position:-128px -88px}.flag.flag-sd{background-position:-64px -132px}.flag.flag-mz{background-position:-224px -99px}.flag.flag-tr{background-position:-48px -154px}.flag.flag-gs{background-position:-128px -55px}.flag.flag-dj{background-position:-96px -33px}.flag.flag-england{background-position:-240px -33px}.flag.flag-gi{background-position:-16px -55px}.flag.flag-tz{background-position:-112px -154px}.flag.flag-zm{background-position:-208px -165px}.flag.flag-nf{background-position:-32px -110px}.flag.flag-lv{background-position:-112px -88px}.flag.flag-dz{background-position:-160px -33px}.flag.flag-ht{background-position:-16px -66px}.flag.flag-co{background-position:-224px -22px}.flag.flag-cn{background-position:-208px -22px}.flag.flag-mq{background-position:-80px -99px}.flag.flag-vi{background-position:-32px -165px}.flag.flag-hm{background-position:-224px -55px}.flag.flag-tw{background-position:-96px -154px}.flag.flag-mp{background-position:-64px -99px}.flag.flag-ws{background-position:-112px -165px}.flag.flag-hn{background-position:-240px -55px}.flag.flag-mg{background-position:-208px -88px} -------------------------------------------------------------------------------- /docs/app/build.js: -------------------------------------------------------------------------------- 1 | (function(){function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o state => ({ counter: state.counter - 1 }), 9 | up: () => state => ({ counter: state.counter + 1 }) 10 | }, 11 | view: require('./view.html'), 12 | observedAttributes: [{ max: Number }] 13 | } 14 | 15 | },{"./view.html":2}],2:[function(require,module,exports){ 16 | module.exports = function view (state, actions) { 17 | return h('div', { class: 'field has-addons' }, [ 18 | h('p', { class: 'control' }, h('button', { class: 'button', onclick: function (e) { actions.down() }, disabled: (!state.counter) }, '-')), 19 | h('p', { class: 'control' }, h('input', { class: 'input', type: 'text', value: (state.counter), readonly: 'readonly' })), 20 | h('p', { class: 'control' }, h('button', { class: 'button', onclick: function (e) { actions.up() }, disabled: (state.max && state.counter >= state.max) }, '+')) 21 | ]) 22 | } 23 | 24 | },{}],3:[function(require,module,exports){ 25 | module.exports = { 26 | name: 'x-footer', 27 | view: require('./view.html') 28 | } 29 | 30 | },{"./view.html":4}],4:[function(require,module,exports){ 31 | module.exports = function view (state, actions) { 32 | return h('footer', { class: 'footer' }, h('div', { class: 'container' }, h('div', { class: 'content has-text-centered' }, h('p', {}, [ 33 | h('a', { href: 'http://opensource.org/licenses/mit-license.php' }, 'MIT'), 34 | '.' 35 | ])))) 36 | } 37 | 38 | },{}],5:[function(require,module,exports){ 39 | module.exports = { 40 | name: 'x-header', 41 | state: { 42 | showMenu: false 43 | }, 44 | actions: { 45 | toggleMenu: () => (state) => ({ showMenu: !state.showMenu }) 46 | }, 47 | view: require('./view.html') 48 | } 49 | 50 | },{"./view.html":6}],6:[function(require,module,exports){ 51 | module.exports = function view (state, actions) { 52 | return h('nav', { class: 'navbar is-transparent' }, [ 53 | h('div', { class: 'navbar-brand' }, [ 54 | h('a', { class: 'navbar-item', href: '#' }, 'HYPERAPP-CUSTOMELEMENTS'), 55 | h('div', { class: 'navbar-burger burger', onclick: function (e) { actions.toggleMenu() } }, [ 56 | h('span', {}), 57 | h('span', {}), 58 | h('span', {}) 59 | ]) 60 | ]), 61 | h('div', { class: 'navbar-menu', style: { display: state.showMenu ? 'block' : 'none' } }, [ 62 | h('div', { class: 'navbar-start' }, [ 63 | h('a', { class: 'navbar-item', href: '#' }, 'Home'), 64 | h('div', { class: 'navbar-item has-dropdown is-hoverable' }, [ 65 | h('a', { class: 'navbar-link', href: '#' }, 'Docs'), 66 | h('div', { class: 'navbar-dropdown is-boxed' }, [ 67 | h('a', { class: 'navbar-item', href: '#' }, 'Overview'), 68 | h('a', { class: 'navbar-item', href: '#' }, 'Modifiers'), 69 | h('a', { class: 'navbar-item', href: '#' }, 'Columns'), 70 | h('a', { class: 'navbar-item', href: '#' }, 'Layout'), 71 | h('a', { class: 'navbar-item', href: '#' }, 'Form'), 72 | h('hr', { class: 'navbar-divider' }), 73 | h('a', { class: 'navbar-item', href: '#' }, 'Elements'), 74 | h('a', { class: 'navbar-item is-active', href: '#' }, 'Components') 75 | ]) 76 | ]) 77 | ]), 78 | h('div', { class: 'navbar-end' }, h('div', { class: 'navbar-item' }, h('div', { class: 'field is-grouped' }, [ 79 | h('p', { class: 'control' }, h('a', { class: 'bd-tw-button button', href: '#' }, [ 80 | h('span', { class: 'icon' }, h('i', { class: 'fab fa-twitter' })), 81 | h('span', {}, 'Tweet') 82 | ])), 83 | h('p', { class: 'control' }, h('a', { class: 'button is-primary', href: '#' }, [ 84 | h('span', { class: 'icon' }, h('i', { class: 'fas fa-download' })), 85 | h('span', {}, 'Download') 86 | ])) 87 | ]))) 88 | ]) 89 | ]) 90 | } 91 | 92 | },{}],7:[function(require,module,exports){ 93 | module.exports = { 94 | name: 'x-main', 95 | state: { 96 | counterMax: 10 97 | }, 98 | actions: { 99 | setCounterMax: (value) => (state) => ({ counterMax: value }) 100 | }, 101 | view: require('./view.html') 102 | } 103 | 104 | },{"./view.html":8}],8:[function(require,module,exports){ 105 | module.exports = function view (state, actions) { 106 | return h('div', { class: 'section' }, [ 107 | h('div', { class: 'columns' }, [ 108 | h('div', { class: 'column is-one-fifth' }, [ 109 | 'Counter max:', 110 | h('input', { type: 'number', value: (state.counterMax), class: 'input', onchange: function (e) { actions.setCounterMax(+this.value) } }) 111 | ]), 112 | h('div', { class: 'column is-two-fifths' }, [ 113 | 'Counter:', 114 | h('x-counter', { max: (state.counterMax) }) 115 | ]) 116 | ]), 117 | h('x-profile', { id: '' }), 118 | h('x-profile', { id: '' }), 119 | h('x-profile', { id: '' }) 120 | ]) 121 | } 122 | 123 | },{}],9:[function(require,module,exports){ 124 | module.exports = { 125 | name: 'x-profile-image', 126 | view: require('./view.html'), 127 | state: { 128 | getUrl: function () { 129 | if (!this.url) { 130 | return 131 | } 132 | 133 | if (this.size === 'medium') { 134 | return this.url.replace('https://randomuser.me/api/portraits/', 135 | 'https://randomuser.me/api/portraits/med/') 136 | } else if (this.size === 'thumbnail') { 137 | return this.url.replace('https://randomuser.me/api/portraits/', 138 | 'https://randomuser.me/api/portraits/thumb/') 139 | } else { 140 | return this.url 141 | } 142 | } 143 | }, 144 | observedAttributes: ['url', 'size'] 145 | } 146 | 147 | },{"./view.html":10}],10:[function(require,module,exports){ 148 | module.exports = function view (state, actions) { 149 | return state.url ? h('img', { src: (state.getUrl()) }) : undefined 150 | } 151 | 152 | },{}],11:[function(require,module,exports){ 153 | module.exports = { 154 | name: 'x-profile-nationality', 155 | view: require('./view.html'), 156 | observedAttributes: ['code'] 157 | } 158 | 159 | },{"./view.html":12}],12:[function(require,module,exports){ 160 | module.exports = function view (state, actions) { 161 | return h('span', {}, state.code ? h('span', { class: 'flag flag-' + (state.code.toLowerCase()), alt: (state.code) }) : undefined) 162 | } 163 | 164 | },{}],13:[function(require,module,exports){ 165 | module.exports = { 166 | name: 'x-profile', 167 | view: require('./view.html'), 168 | mapAttrsToState: false, 169 | actions: { 170 | setUser: (user) => state => Object.assign({}, state, { user }) 171 | }, 172 | observedAttributes: ['id'], 173 | loadProfile: function (id) { 174 | var url = 'https://randomuser.me/api/?noinfo' + (id ? '&seed=' + id : '') 175 | var actions = this.actions 176 | 177 | window.fetch(url, { 178 | method: 'get' 179 | }).then(function (response) { 180 | return response.json() 181 | }).then(function (response) { 182 | var user = response.results[0] 183 | console.log(user) 184 | actions.setUser(user) 185 | }).catch(function (err) { 186 | console.error(err) 187 | }) 188 | }, 189 | attributeChangedCallback: function (name, oldValue, newValue) { 190 | this.loadProfile(newValue) 191 | }, 192 | constructor () { 193 | if (this.hasAttribute('id')) { 194 | this.loadProfile(this.getAttribute('id')) 195 | } 196 | } 197 | } 198 | 199 | },{"./view.html":14}],14:[function(require,module,exports){ 200 | module.exports = function view (state, actions) { 201 | return h('div', {}, state.user ? h('div', { key: (state.user.id.value), class: 'card' }, h('div', { class: 'card-content' }, [ 202 | h('div', { class: 'media' }, [ 203 | h('div', { class: 'media-left' }, h('figure', { class: 'image is-48x48' }, h('x-profile-image', { size: 'thumbnail', url: (state.user.picture.large) }))), 204 | h('div', { class: 'media-content' }, [ 205 | h('p', { class: 'title is-4' }, (state.user.name.title) + '\ 206 | ' + (state.user.name.first) + '\ 207 | ' + (state.user.name.last)), 208 | h('p', { class: 'subtitle is-6' }, [ 209 | h('x-profile-nationality', { code: (state.user.nat) }), 210 | (state.user.id.name) 211 | ]) 212 | ]) 213 | ]), 214 | h('div', { class: 'content' }, [ 215 | h('div', {}, [ 216 | h('span', { class: 'icon has-text-success' }, h('i', { class: 'fa fa-phone' })), 217 | h('a', { href: 'tel:' + (state.user.phone) }, (state.user.phone)) 218 | ]), 219 | h('div', {}, [ 220 | h('span', { class: 'icon has-text-info' }, h('i', { class: 'fa fa-birthday-cake' })), 221 | h('time', { datetime: (state.user.registered) }, (new Date(state.user.dob).toDateString())) 222 | ]), 223 | h('div', {}, [ 224 | h('span', { class: 'icon has-text-warning' }, h('i', { class: 'fa fa-envelope' })), 225 | h('a', { href: 'mailto:' + (state.user.email) }, (state.user.email)) 226 | ]) 227 | ]) 228 | ])) : undefined) 229 | } 230 | 231 | },{}],15:[function(require,module,exports){ 232 | window.h = require('hyperapp').h 233 | 234 | var define = require('../..') 235 | 236 | define(require('./custom-elements/main')) 237 | define(require('./custom-elements/header')) 238 | define(require('./custom-elements/footer')) 239 | define(require('./custom-elements/profile')) 240 | define(require('./custom-elements/profile-image')) 241 | var Nationality = define(require('./custom-elements/profile-nationality')) 242 | var Counter = define(require('./custom-elements/counter')) 243 | 244 | // Demo programmatically added elements 245 | const myCounter = new Counter() 246 | const myNationality = new Nationality() 247 | myNationality.setAttribute('code', 'gb') 248 | 249 | setTimeout(function () { 250 | document.body.appendChild(myCounter) 251 | document.body.appendChild(myNationality) 252 | }, 5000) 253 | 254 | },{"../..":16,"./custom-elements/counter":1,"./custom-elements/footer":3,"./custom-elements/header":5,"./custom-elements/main":7,"./custom-elements/profile":13,"./custom-elements/profile-image":9,"./custom-elements/profile-nationality":11,"hyperapp":18}],16:[function(require,module,exports){ 255 | var app = require('hyperapp').app 256 | var CEV0Component = require('ce-v0/comp') 257 | 258 | function hyperappCustomElement (options) { 259 | var view = options.view 260 | var state = options.state 261 | var ctor = options.constructor 262 | var mapAttrsToState = 'mapAttrsToState' in options 263 | ? !!options.mapAttrsToState 264 | : true 265 | 266 | var observedAttributes = options.observedAttributes 267 | var hasObservedAttributes = Array.isArray(observedAttributes) 268 | var actions = Object.assign(mapAttrsToState ? { 269 | __applyState: (item) => (state) => { 270 | return item 271 | } 272 | } : {}, options.actions) 273 | 274 | var opts = {} 275 | var converters = {} 276 | if (hasObservedAttributes) { 277 | opts.observedAttributes = [] 278 | observedAttributes.forEach(function (attr) { 279 | if (typeof attr === 'string') { 280 | opts.observedAttributes.push(attr) 281 | } else { 282 | var name = Object.keys(attr)[0] 283 | opts.observedAttributes.push(name) 284 | if (typeof attr[name] === 'function') { 285 | converters[name] = attr[name] 286 | } 287 | } 288 | }) 289 | } 290 | 291 | function convert (name, value) { 292 | var converter = converters[name] 293 | 294 | if (converter) { 295 | if (converter === Boolean) { 296 | return value !== 'false' && value !== '0' 297 | } 298 | 299 | return converters[name](value) 300 | } 301 | 302 | return value 303 | } 304 | 305 | function mapToState (el) { 306 | if (hasObservedAttributes) { 307 | opts.observedAttributes.forEach(function (name) { 308 | if (el.hasAttribute(name)) { 309 | var item = {} 310 | item[name] = convert(name, el.getAttribute(name)) 311 | el.actions.__applyState(item) 312 | } 313 | }) 314 | } 315 | } 316 | 317 | if (typeof ctor === 'function') { 318 | opts.constructor = function () { 319 | this.actions = app(state, actions, view, this) 320 | 321 | ctor.call(this) 322 | 323 | if (mapAttrsToState) { 324 | mapToState(this) 325 | } 326 | } 327 | } else { 328 | opts.constructor = function () { 329 | this.actions = app(state, actions, view, this) 330 | 331 | if (mapAttrsToState) { 332 | mapToState(this) 333 | } 334 | } 335 | } 336 | 337 | // Only fire attributeChangedCallback 338 | // if it's an observed attribute as per CEV1 339 | var onattribute 340 | var attributeChangedCallback = options.attributeChangedCallback 341 | 342 | if (hasObservedAttributes) { 343 | onattribute = function (name, oldValue, newValue) { 344 | if (observedAttributes.indexOf(name) < 0) { 345 | return 346 | } 347 | 348 | if (attributeChangedCallback) { 349 | attributeChangedCallback.call(this, name, oldValue, newValue) 350 | } 351 | 352 | if (mapAttrsToState) { 353 | var partial = {} 354 | partial[name] = convert(name, newValue) 355 | this.actions.__applyState(partial) 356 | } 357 | } 358 | 359 | opts.onattribute = onattribute 360 | } 361 | 362 | for (var key in options) { 363 | switch (key) { 364 | case 'connectedCallback': 365 | opts.onconnected = options[key] 366 | break 367 | case 'disconnectedCallback': 368 | opts.ondisconnected = options[key] 369 | break 370 | case 'view': 371 | case 'state': 372 | case 'actions': 373 | case 'constructor': 374 | case 'observedAttributes': 375 | case 'attributeChangedCallback': 376 | break 377 | default: 378 | opts[key] = options[key] 379 | break 380 | } 381 | } 382 | 383 | return new CEV0Component(opts) 384 | } 385 | 386 | module.exports = hyperappCustomElement 387 | 388 | },{"ce-v0/comp":17,"hyperapp":18}],17:[function(require,module,exports){ 389 | function Component(e){"use strict";/*! (C) 2017 Andrea Giammarchi - Mit Style License */ 390 | var t,a,r=function(e,t,a,r){var c=Object.getOwnPropertyDescriptor(e,t);c&&(c.enumerable=!1,a[r]=c)},c={},n={},o=e.extends||HTMLElement;for(t in e)switch(t){case"extends":case"name":break;case"static":a=e[t];for(t in a)r(a,t,c,t);break;case"constructor":r(e,t,n,"createdCallback");break;case"onattribute":r(e,t,n,"attributeChangedCallback");break;case"onconnected":r(e,t,n,"attachedCallback");break;case"ondisconnected":r(e,t,n,"detachedCallback");break;default:r(e,t,n,t)}return(Object.setPrototypeOf||function(e,a){if(e.__proto__=a,!(e instanceof a)){delete e.__proto__;for(t in a)try{r(a,t,e,t)}catch(e){}}return e})(Object.defineProperties(document.registerElement(e.name,{prototype:Object.create(o.prototype,n)}),c),o)}try{module.exports=Component}catch(e){} 391 | },{}],18:[function(require,module,exports){ 392 | !function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports):"function"==typeof define&&define.amd||n(e.hyperapp={})}(this,function(e){"use strict";e.h=function(e,n){for(var t,r=[],o=[],i=arguments.length;i-- >2;)r.push(arguments[i]);for(;r.length;)if((t=r.pop())&&t.pop)for(i=t.length;i--;)r.push(t[i]);else null!=t&&!0!==t&&!1!==t&&o.push(t);return"function"==typeof e?e(n||{},o):{nodeName:e,attributes:n||{},children:o,key:n&&n.key}},e.app=function(e,n,t,r){var o,i=[],u=r&&r.children[0]||null,l=u&&function e(n,t){return{nodeName:n.nodeName.toLowerCase(),attributes:{},children:t.call(n.childNodes,function(n){return 3===n.nodeType?n.nodeValue:e(n,t)})}}(u,[].map),f=s(e),a=s(n);return d(function e(n,t,r){for(var o in r)"function"==typeof r[o]?function(e,o){r[e]=function(e){return"function"==typeof(e=o(e))&&(e=e(p(n,f),r)),e&&e!==(t=p(n,f))&&!e.then&&d(f=h(n,s(t,e),f)),e}}(o,r[o]):e(n.concat(o),t[o]=t[o]||{},r[o]=s(r[o]))}([],f,a)),a;function c(){o=!o;var e=t(f,a);for(r&&!o&&(u=function e(n,t,r,o,u,l){if(o===r);else if(null==r)t=n.insertBefore(y(o,u),t);else if(o.nodeName&&o.nodeName===r.nodeName){!function(e,n,t,r){for(var o in s(n,t))t[o]!==("value"===o||"checked"===o?e[o]:n[o])&&m(e,o,t[o],r,n[o]);t.onupdate&&i.push(function(){t.onupdate(e,n)})}(t,r.attributes,o.attributes,u=u||"svg"===o.nodeName);for(var f=[],a={},c={},d=0;d1?h(e.slice(1),n,t[e[0]]):n,s(t,r)):n}function p(e,n){for(var t=0;t state => ({ counter: state.counter - 1 }),\n up: () => state => ({ counter: state.counter + 1 })\n },\n view: require('./view.html'),\n observedAttributes: [{ max: Number }]\n}\n", 31 | "module.exports = function view (state, actions) {\n return h('div', { class: 'field has-addons' }, [\n h('p', { class: 'control' }, h('button', { class: 'button', onclick: function (e) { actions.down() }, disabled: (!state.counter) }, '-')),\n h('p', { class: 'control' }, h('input', { class: 'input', type: 'text', value: (state.counter), readonly: 'readonly' })),\n h('p', { class: 'control' }, h('button', { class: 'button', onclick: function (e) { actions.up() }, disabled: (state.max && state.counter >= state.max) }, '+'))\n ])\n}\n", 32 | "module.exports = {\n name: 'x-footer',\n view: require('./view.html')\n}\n", 33 | "module.exports = function view (state, actions) {\n return h('footer', { class: 'footer' }, h('div', { class: 'container' }, h('div', { class: 'content has-text-centered' }, h('p', {}, [\n h('a', { href: 'http://opensource.org/licenses/mit-license.php' }, 'MIT'),\n '.'\n ]))))\n}\n", 34 | "module.exports = {\n name: 'x-header',\n state: {\n showMenu: false\n },\n actions: {\n toggleMenu: () => (state) => ({ showMenu: !state.showMenu })\n },\n view: require('./view.html')\n}\n", 35 | "module.exports = function view (state, actions) {\n return h('nav', { class: 'navbar is-transparent' }, [\n h('div', { class: 'navbar-brand' }, [\n h('a', { class: 'navbar-item', href: '#' }, 'HYPERAPP-CUSTOMELEMENTS'),\n h('div', { class: 'navbar-burger burger', onclick: function (e) { actions.toggleMenu() } }, [\n h('span', {}),\n h('span', {}),\n h('span', {})\n ])\n ]),\n h('div', { class: 'navbar-menu', style: { display: state.showMenu ? 'block' : 'none' } }, [\n h('div', { class: 'navbar-start' }, [\n h('a', { class: 'navbar-item', href: '#' }, 'Home'),\n h('div', { class: 'navbar-item has-dropdown is-hoverable' }, [\n h('a', { class: 'navbar-link', href: '#' }, 'Docs'),\n h('div', { class: 'navbar-dropdown is-boxed' }, [\n h('a', { class: 'navbar-item', href: '#' }, 'Overview'),\n h('a', { class: 'navbar-item', href: '#' }, 'Modifiers'),\n h('a', { class: 'navbar-item', href: '#' }, 'Columns'),\n h('a', { class: 'navbar-item', href: '#' }, 'Layout'),\n h('a', { class: 'navbar-item', href: '#' }, 'Form'),\n h('hr', { class: 'navbar-divider' }),\n h('a', { class: 'navbar-item', href: '#' }, 'Elements'),\n h('a', { class: 'navbar-item is-active', href: '#' }, 'Components')\n ])\n ])\n ]),\n h('div', { class: 'navbar-end' }, h('div', { class: 'navbar-item' }, h('div', { class: 'field is-grouped' }, [\n h('p', { class: 'control' }, h('a', { class: 'bd-tw-button button', href: '#' }, [\n h('span', { class: 'icon' }, h('i', { class: 'fab fa-twitter' })),\n h('span', {}, 'Tweet')\n ])),\n h('p', { class: 'control' }, h('a', { class: 'button is-primary', href: '#' }, [\n h('span', { class: 'icon' }, h('i', { class: 'fas fa-download' })),\n h('span', {}, 'Download')\n ]))\n ])))\n ])\n ])\n}\n", 36 | "module.exports = {\n name: 'x-main',\n state: {\n counterMax: 10\n },\n actions: {\n setCounterMax: (value) => (state) => ({ counterMax: value })\n },\n view: require('./view.html')\n}\n", 37 | "module.exports = function view (state, actions) {\n return h('div', { class: 'section' }, [\n h('div', { class: 'columns' }, [\n h('div', { class: 'column is-one-fifth' }, [\n 'Counter max:',\n h('input', { type: 'number', value: (state.counterMax), class: 'input', onchange: function (e) { actions.setCounterMax(+this.value) } })\n ]),\n h('div', { class: 'column is-two-fifths' }, [\n 'Counter:',\n h('x-counter', { max: (state.counterMax) })\n ])\n ]),\n h('x-profile', { id: '' }),\n h('x-profile', { id: '' }),\n h('x-profile', { id: '' })\n ])\n}\n", 38 | "module.exports = {\n name: 'x-profile-image',\n view: require('./view.html'),\n state: {\n getUrl: function () {\n if (!this.url) {\n return\n }\n\n if (this.size === 'medium') {\n return this.url.replace('https://randomuser.me/api/portraits/',\n 'https://randomuser.me/api/portraits/med/')\n } else if (this.size === 'thumbnail') {\n return this.url.replace('https://randomuser.me/api/portraits/',\n 'https://randomuser.me/api/portraits/thumb/')\n } else {\n return this.url\n }\n }\n },\n observedAttributes: ['url', 'size']\n}\n", 39 | "module.exports = function view (state, actions) {\n return state.url ? h('img', { src: (state.getUrl()) }) : undefined\n}\n", 40 | "module.exports = {\n name: 'x-profile-nationality',\n view: require('./view.html'),\n observedAttributes: ['code']\n}\n", 41 | "module.exports = function view (state, actions) {\n return h('span', {}, state.code ? h('span', { class: 'flag flag-' + (state.code.toLowerCase()), alt: (state.code) }) : undefined)\n}\n", 42 | "module.exports = {\n name: 'x-profile',\n view: require('./view.html'),\n mapAttrsToState: false,\n actions: {\n setUser: (user) => state => Object.assign({}, state, { user })\n },\n observedAttributes: ['id'],\n loadProfile: function (id) {\n var url = 'https://randomuser.me/api/?noinfo' + (id ? '&seed=' + id : '')\n var actions = this.actions\n\n window.fetch(url, {\n method: 'get'\n }).then(function (response) {\n return response.json()\n }).then(function (response) {\n var user = response.results[0]\n console.log(user)\n actions.setUser(user)\n }).catch(function (err) {\n console.error(err)\n })\n },\n attributeChangedCallback: function (name, oldValue, newValue) {\n this.loadProfile(newValue)\n },\n constructor () {\n if (this.hasAttribute('id')) {\n this.loadProfile(this.getAttribute('id'))\n }\n }\n}\n", 43 | "module.exports = function view (state, actions) {\n return h('div', {}, state.user ? h('div', { key: (state.user.id.value), class: 'card' }, h('div', { class: 'card-content' }, [\n h('div', { class: 'media' }, [\n h('div', { class: 'media-left' }, h('figure', { class: 'image is-48x48' }, h('x-profile-image', { size: 'thumbnail', url: (state.user.picture.large) }))),\n h('div', { class: 'media-content' }, [\n h('p', { class: 'title is-4' }, (state.user.name.title) + '\\\n ' + (state.user.name.first) + '\\\n ' + (state.user.name.last)),\n h('p', { class: 'subtitle is-6' }, [\n h('x-profile-nationality', { code: (state.user.nat) }),\n (state.user.id.name)\n ])\n ])\n ]),\n h('div', { class: 'content' }, [\n h('div', {}, [\n h('span', { class: 'icon has-text-success' }, h('i', { class: 'fa fa-phone' })),\n h('a', { href: 'tel:' + (state.user.phone) }, (state.user.phone))\n ]),\n h('div', {}, [\n h('span', { class: 'icon has-text-info' }, h('i', { class: 'fa fa-birthday-cake' })),\n h('time', { datetime: (state.user.registered) }, (new Date(state.user.dob).toDateString()))\n ]),\n h('div', {}, [\n h('span', { class: 'icon has-text-warning' }, h('i', { class: 'fa fa-envelope' })),\n h('a', { href: 'mailto:' + (state.user.email) }, (state.user.email))\n ])\n ])\n ])) : undefined)\n}\n", 44 | "window.h = require('hyperapp').h\n\nvar define = require('../..')\n\ndefine(require('./custom-elements/main'))\ndefine(require('./custom-elements/header'))\ndefine(require('./custom-elements/footer'))\ndefine(require('./custom-elements/profile'))\ndefine(require('./custom-elements/profile-image'))\nvar Nationality = define(require('./custom-elements/profile-nationality'))\nvar Counter = define(require('./custom-elements/counter'))\n\n// Demo programmatically added elements\nconst myCounter = new Counter()\nconst myNationality = new Nationality()\nmyNationality.setAttribute('code', 'gb')\n\nsetTimeout(function () {\n document.body.appendChild(myCounter)\n document.body.appendChild(myNationality)\n}, 5000)\n", 45 | "var app = require('hyperapp').app\nvar CEV0Component = require('ce-v0/comp')\n\nfunction hyperappCustomElement (options) {\n var view = options.view\n var state = options.state\n var ctor = options.constructor\n var mapAttrsToState = 'mapAttrsToState' in options\n ? !!options.mapAttrsToState\n : true\n\n var observedAttributes = options.observedAttributes\n var hasObservedAttributes = Array.isArray(observedAttributes)\n var actions = Object.assign(mapAttrsToState ? {\n __applyState: (item) => (state) => {\n return item\n }\n } : {}, options.actions)\n\n var opts = {}\n var converters = {}\n if (hasObservedAttributes) {\n opts.observedAttributes = []\n observedAttributes.forEach(function (attr) {\n if (typeof attr === 'string') {\n opts.observedAttributes.push(attr)\n } else {\n var name = Object.keys(attr)[0]\n opts.observedAttributes.push(name)\n if (typeof attr[name] === 'function') {\n converters[name] = attr[name]\n }\n }\n })\n }\n\n function convert (name, value) {\n var converter = converters[name]\n\n if (converter) {\n if (converter === Boolean) {\n return value !== 'false' && value !== '0'\n }\n\n return converters[name](value)\n }\n\n return value\n }\n\n function mapToState (el) {\n if (hasObservedAttributes) {\n opts.observedAttributes.forEach(function (name) {\n if (el.hasAttribute(name)) {\n var item = {}\n item[name] = convert(name, el.getAttribute(name))\n el.actions.__applyState(item)\n }\n })\n }\n }\n\n if (typeof ctor === 'function') {\n opts.constructor = function () {\n this.actions = app(state, actions, view, this)\n\n ctor.call(this)\n\n if (mapAttrsToState) {\n mapToState(this)\n }\n }\n } else {\n opts.constructor = function () {\n this.actions = app(state, actions, view, this)\n\n if (mapAttrsToState) {\n mapToState(this)\n }\n }\n }\n\n // Only fire attributeChangedCallback\n // if it's an observed attribute as per CEV1\n var onattribute\n var attributeChangedCallback = options.attributeChangedCallback\n\n if (hasObservedAttributes) {\n onattribute = function (name, oldValue, newValue) {\n if (observedAttributes.indexOf(name) < 0) {\n return\n }\n\n if (attributeChangedCallback) {\n attributeChangedCallback.call(this, name, oldValue, newValue)\n }\n\n if (mapAttrsToState) {\n var partial = {}\n partial[name] = convert(name, newValue)\n this.actions.__applyState(partial)\n }\n }\n\n opts.onattribute = onattribute\n }\n\n for (var key in options) {\n switch (key) {\n case 'connectedCallback':\n opts.onconnected = options[key]\n break\n case 'disconnectedCallback':\n opts.ondisconnected = options[key]\n break\n case 'view':\n case 'state':\n case 'actions':\n case 'constructor':\n case 'observedAttributes':\n case 'attributeChangedCallback':\n break\n default:\n opts[key] = options[key]\n break\n }\n }\n\n return new CEV0Component(opts)\n}\n\nmodule.exports = hyperappCustomElement\n", 46 | "function Component(e){\"use strict\";/*! (C) 2017 Andrea Giammarchi - Mit Style License */\nvar t,a,r=function(e,t,a,r){var c=Object.getOwnPropertyDescriptor(e,t);c&&(c.enumerable=!1,a[r]=c)},c={},n={},o=e.extends||HTMLElement;for(t in e)switch(t){case\"extends\":case\"name\":break;case\"static\":a=e[t];for(t in a)r(a,t,c,t);break;case\"constructor\":r(e,t,n,\"createdCallback\");break;case\"onattribute\":r(e,t,n,\"attributeChangedCallback\");break;case\"onconnected\":r(e,t,n,\"attachedCallback\");break;case\"ondisconnected\":r(e,t,n,\"detachedCallback\");break;default:r(e,t,n,t)}return(Object.setPrototypeOf||function(e,a){if(e.__proto__=a,!(e instanceof a)){delete e.__proto__;for(t in a)try{r(a,t,e,t)}catch(e){}}return e})(Object.defineProperties(document.registerElement(e.name,{prototype:Object.create(o.prototype,n)}),c),o)}try{module.exports=Component}catch(e){}", 47 | "!function(e,n){\"object\"==typeof exports&&\"undefined\"!=typeof module?n(exports):\"function\"==typeof define&&define.amd||n(e.hyperapp={})}(this,function(e){\"use strict\";e.h=function(e,n){for(var t,r=[],o=[],i=arguments.length;i-- >2;)r.push(arguments[i]);for(;r.length;)if((t=r.pop())&&t.pop)for(i=t.length;i--;)r.push(t[i]);else null!=t&&!0!==t&&!1!==t&&o.push(t);return\"function\"==typeof e?e(n||{},o):{nodeName:e,attributes:n||{},children:o,key:n&&n.key}},e.app=function(e,n,t,r){var o,i=[],u=r&&r.children[0]||null,l=u&&function e(n,t){return{nodeName:n.nodeName.toLowerCase(),attributes:{},children:t.call(n.childNodes,function(n){return 3===n.nodeType?n.nodeValue:e(n,t)})}}(u,[].map),f=s(e),a=s(n);return d(function e(n,t,r){for(var o in r)\"function\"==typeof r[o]?function(e,o){r[e]=function(e){return\"function\"==typeof(e=o(e))&&(e=e(p(n,f),r)),e&&e!==(t=p(n,f))&&!e.then&&d(f=h(n,s(t,e),f)),e}}(o,r[o]):e(n.concat(o),t[o]=t[o]||{},r[o]=s(r[o]))}([],f,a)),a;function c(){o=!o;var e=t(f,a);for(r&&!o&&(u=function e(n,t,r,o,u,l){if(o===r);else if(null==r)t=n.insertBefore(y(o,u),t);else if(o.nodeName&&o.nodeName===r.nodeName){!function(e,n,t,r){for(var o in s(n,t))t[o]!==(\"value\"===o||\"checked\"===o?e[o]:n[o])&&m(e,o,t[o],r,n[o]);t.onupdate&&i.push(function(){t.onupdate(e,n)})}(t,r.attributes,o.attributes,u=u||\"svg\"===o.nodeName);for(var f=[],a={},c={},d=0;d1?h(e.slice(1),n,t[e[0]]):n,s(t,r)):n}function p(e,n){for(var t=0;t