├── .npmrc
├── test
    ├── index.js
    ├── package.json
    ├── js
    │   ├── bundle.js
    │   ├── inner.js
    │   └── reactive-props.js
    ├── uce-template-head.jpg
    ├── resolve.js
    ├── min
    │   ├── my-counter
    │   │   ├── my-counter.js
    │   │   ├── index.html
    │   │   └── my-counter.uce
    │   ├── partial.html
    │   ├── index.html
    │   ├── complex.html
    │   └── slots.html
    ├── my-counter
    │   ├── my-counter.js
    │   ├── index.html
    │   └── my-counter.uce
    ├── wc.html
    ├── my-btn.uce
    ├── spaces.html
    ├── setup.html
    ├── refs.html
    ├── csp
    │   └── index.html
    ├── unicorn.html
    ├── resolve-lazy.html
    ├── resolve.html
    ├── this.html
    ├── nested.html
    ├── wc.js
    ├── partial.html
    ├── loader.html
    ├── index.html
    ├── slots.html
    ├── dbmonster.css
    ├── complex.html
    ├── dbmonster.html
    └── dbmonster.js
├── bin
    ├── package.json
    └── index.js
├── cjs
    ├── package.json
    ├── partial.js
    └── index.js
├── _config.yml
├── nonce.txt
├── .gitignore
├── .npmignore
├── rollup
    ├── babel.config.js
    └── es.config.js
├── esm
    ├── partial.js
    └── index.js
├── LICENSE
├── package.json
├── extra-details.md
├── es.js
├── min.js
└── README.md


/.npmrc:
--------------------------------------------------------------------------------
1 | package-lock=false
2 | 


--------------------------------------------------------------------------------
/test/index.js:
--------------------------------------------------------------------------------
1 | require('../cjs');


--------------------------------------------------------------------------------
/bin/package.json:
--------------------------------------------------------------------------------
1 | {"type":"commonjs"}


--------------------------------------------------------------------------------
/cjs/package.json:
--------------------------------------------------------------------------------
1 | {"type":"commonjs"}


--------------------------------------------------------------------------------
/test/package.json:
--------------------------------------------------------------------------------
1 | {"type":"commonjs"}


--------------------------------------------------------------------------------
/_config.yml:
--------------------------------------------------------------------------------
1 | theme: jekyll-theme-architect


--------------------------------------------------------------------------------
/nonce.txt:
--------------------------------------------------------------------------------
1 | ijeLM8+5uwZ7ZXFmK+H2dwIWdiKJ1A4zhZIsq2Ffqqo=


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | .nyc_output
3 | node_modules/
4 | 


--------------------------------------------------------------------------------
/test/js/bundle.js:
--------------------------------------------------------------------------------
1 | export default 'Bundle loaded OK';
2 | 


--------------------------------------------------------------------------------
/test/js/inner.js:
--------------------------------------------------------------------------------
1 | module.exports = 'Inner loaded OK';
2 | 


--------------------------------------------------------------------------------
/test/uce-template-head.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WebReflection/uce-template/HEAD/test/uce-template-head.jpg


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | .npmrc
3 | .nyc_output
4 | .travis.yml
5 | _config.yml
6 | node_modules/
7 | rollup/
8 | test/
9 | 


--------------------------------------------------------------------------------
/test/resolve.js:
--------------------------------------------------------------------------------
1 | const {resolve} = customElements.get('uce-template');
2 | 
3 | // let's pretend this is a polyfill
4 | resolve('promise-helper', Promise);
5 | 


--------------------------------------------------------------------------------
/test/min/my-counter/my-counter.js:
--------------------------------------------------------------------------------
1 | Promise.all([
2 |   customElements.whenDefined('uce-template'),
3 |   fetch('my-counter.uce').then((b) => b.text())
4 | ]).then(([Template, parts]) => {
5 |   document.body.appendChild(Template.from(parts));
6 | });
7 | 


--------------------------------------------------------------------------------
/test/my-counter/my-counter.js:
--------------------------------------------------------------------------------
1 | Promise.all([
2 |   customElements.whenDefined('uce-template'),
3 |   fetch('my-counter.uce').then((b) => b.text())
4 | ]).then(([Template = customElements.get('uce-template'), parts]) => {
5 |   document.body.appendChild(Template.from(parts));
6 | });
7 | 


--------------------------------------------------------------------------------
/test/wc.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <script defer src="../index.js"></script>
 7 |   <script defer src="wc.js"></script>
 8 | </head>
 9 | <body>
10 |   <my-counter></my-counter>
11 | </body>
12 | </html>


--------------------------------------------------------------------------------
/rollup/babel.config.js:
--------------------------------------------------------------------------------
 1 | import {nodeResolve} from '@rollup/plugin-node-resolve';
 2 | import babel from '@rollup/plugin-babel';
 3 | 
 4 | export default {
 5 |   input: './esm/index.js',
 6 |   plugins: [
 7 |     nodeResolve(),
 8 |     babel({
 9 |       presets: ['@babel/preset-env'],
10 |       babelHelpers: 'bundled'
11 |     })
12 |   ],
13 |   
14 |   output: {
15 |     esModule: false,
16 |     exports: 'named',
17 |     file: './index.js',
18 |     format: 'iife'
19 |   }
20 | };
21 | 


--------------------------------------------------------------------------------
/test/my-btn.uce:
--------------------------------------------------------------------------------
 1 | <button is="my-btn">
 2 |   Clicked {{this.times}} times!
 3 | </button>
 4 | 
 5 | <script type="module">
 6 |   import {useEffect} from 'uhooks';
 7 |   export default {
 8 |     setup() {
 9 |       useEffect(() => {
10 |         console.log('connected');
11 |         return () => {
12 |           console.log('disconnected');
13 |         };
14 |       });
15 |     },
16 |     props: {times: 0},
17 |     onClick() {
18 |       this.times++;
19 |     }
20 |   };
21 | </script>
22 | 


--------------------------------------------------------------------------------
/test/min/my-counter/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang=en>
 3 | <head>
 4 | <meta charset=UTF-8>
 5 | <meta name=viewport content="width=device-width,initial-scale=1">
 6 | <title>uce-template - My Counter Example</title>
 7 | <style>body,main{box-sizing:border-box;margin:0}main{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh}</style>
 8 | <script defer src=../../../min.js></script>
 9 | <script defer src=./my-counter.js></script>
10 | </head>
11 | <body>
12 | <main>
13 | <my-counter></my-counter>
14 | </main>
15 | </body>
16 | </html>


--------------------------------------------------------------------------------
/test/min/my-counter/my-counter.uce:
--------------------------------------------------------------------------------
 1 | <my-counter>
 2 | <button onclick={{dec}}>
 3 | -
 4 | </button>
 5 | <span>{{state.count}}</span>
 6 | <button onclick={{inc}}>
 7 | +
 8 | </button>
 9 | </my-counter>
10 | <script type=module>import{reactive as t}from"@uce"
11 | export default{setup(c){const e=t({count:0})
12 | return{state:e,inc:()=>{e.count++},dec:()=>{e.count--}}}}
13 | </script>
14 | <style scoped>button,span{font-size:200%}span{width:4rem;display:inline-block;text-align:center}button{width:4rem;height:4rem;border:0;border-radius:10px;background-color:#2e8b57;color:#fff}</style>


--------------------------------------------------------------------------------
/test/min/partial.html:
--------------------------------------------------------------------------------
 1 | <style scoped>button,span{font-size:200%}span{width:4rem;display:inline-block;text-align:center}button{width:4rem;height:4rem;border:0;border-radius:10px;background-color:#2e8b57;color:#fff}</style>
 2 | <my-counter>
 3 | <button onclick={{dec}}>
 4 | -
 5 | </button>
 6 | <span>{{state.count}}</span>
 7 | <button onclick={{inc}}>
 8 | +
 9 | </button>
10 | </my-counter>
11 | <script type=module>import{reactive as n}from"@uce"
12 | export default{setup:function(t){var c=n({count:0})
13 | return t.connected=function(){console.log("connected")},{element:t,state:c,inc:function(){c.count++},dec:function(){c.count--}}}}
14 | </script>


--------------------------------------------------------------------------------
/esm/partial.js:
--------------------------------------------------------------------------------
 1 | export default html => {
 2 |   const template = [];
 3 |   const values = [];
 4 |   const {length} = html;
 5 |   let s = 0, e = 0, p = 0;
 6 |   while (
 7 |     s < length &&
 8 |     -1 < (s = html.indexOf('{{', p)) &&
 9 |     -1 < (e = html.indexOf('}}', s + 2))
10 |   ) {
11 |     template.push(html.slice(p, s));
12 |     values.push(html.slice(s + 2, e));
13 |     p = e + 2;
14 |   }
15 |   template.push(html.slice(p));
16 |   const args = [template];
17 |   const rest = Function(
18 |     'return function(){with(arguments[0])return[' + values + ']}'
19 |   )();
20 |   return function (object) {
21 |     return args.concat(rest.call(this, object));
22 |   };
23 | };
24 | 


--------------------------------------------------------------------------------
/test/js/reactive-props.js:
--------------------------------------------------------------------------------
1 | var stateHandler=function(t){"use strict";var n=Object.defineProperties,e=Object.keys,r=function(t,n,e,r,o){return{configurable:!0,get:function(){return r},set:function(u){(t||u!==r||n&&"object"==typeof u&&u)&&(r=u,e?o.call(this,r):o.call(this))}}},o=function(t,n,o,i,c,a){for(var l={},f=c!==u,s=[o,i,f],v=e(t),d=0;d<v.length;d++){var h=n(t,v[d]),b=f?c(h):[h,c];a&&(b[1]=a),l[v[d]]=r.apply(null,s.concat(b))}return l},u=function(){},i=function(t,n){return t[n]};return function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},e=t.all,r=void 0!==e&&e,c=t.shallow,a=void 0===c||c,l=t.useState,f=void 0===l?u:l;return function(t,e){return n({},o(t,i,r,a,f,e))}}}();


--------------------------------------------------------------------------------
/cjs/partial.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | module.exports = html => {
 3 |   const template = [];
 4 |   const values = [];
 5 |   const {length} = html;
 6 |   let s = 0, e = 0, p = 0;
 7 |   while (
 8 |     s < length &&
 9 |     -1 < (s = html.indexOf('{{', p)) &&
10 |     -1 < (e = html.indexOf('}}', s + 2))
11 |   ) {
12 |     template.push(html.slice(p, s));
13 |     values.push(html.slice(s + 2, e));
14 |     p = e + 2;
15 |   }
16 |   template.push(html.slice(p));
17 |   const args = [template];
18 |   const rest = Function(
19 |     'return function(){with(arguments[0])return[' + values + ']}'
20 |   )();
21 |   return function (object) {
22 |     return args.concat(rest.call(this, object));
23 |   };
24 | };
25 | 


--------------------------------------------------------------------------------
/test/my-counter/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <title>uce-template - My Counter Example</title>
 7 |   <style>
 8 |   body, main {
 9 |     box-sizing: border-box;
10 |     margin: 0;
11 |   }
12 |   main {
13 |     display: flex;
14 |     flex-direction: column;
15 |     align-items: center;
16 |     justify-content: center;
17 |     height: 100vh;
18 |   }
19 |   </style>
20 |   <script defer src="../../es.js"></script>
21 |   <script defer src="./my-counter.js"></script>
22 | </head>
23 | <body>
24 |   <main>
25 |     <my-counter></my-counter>
26 |   </main>
27 | </body>
28 | </html>
29 | 


--------------------------------------------------------------------------------
/test/spaces.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <script src="../index.js"></script>
 7 | </head>
 8 | <body>
 9 |   <to-do-item></to-do-item>
10 |   <template is="uce-template">
11 |     <to-do-item>
12 |       <p class=text>{{ item.value }}</p>
13 |       <button class=delete onclick="{{ deleteItem }}">-</button>
14 |     </to-do-item>
15 |     <script type="module" setup>
16 |     export default {
17 |       item: {value: 'test'},
18 |       deleteItem({currentTarget}) {
19 |         currentTarget.closest('to-do-item').remove();
20 |       }
21 |     };
22 |     </script>
23 |   </template>
24 | </body>
25 | </html>


--------------------------------------------------------------------------------
/test/setup.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <title>script setup</title>
 7 |   <script defer src=../index.js></script>
 8 | </head>
 9 | <body>
10 |   <x-clock></x-clock>
11 |   <template is="uce-template">
12 |     <x-clock>{{time}}</x-clock>
13 |     <script type="module" setup>
14 |       let id = 0;
15 |       export default {
16 |         get time() {
17 |           return (new Date).toISOString();
18 |         }
19 |       };
20 |       this.connected = e => id = setInterval(this.render, 1000 / 30);
21 |       this.disconnected = e => clearInterval(id);
22 |     </script>
23 |   </template>
24 | </body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/rollup/es.config.js:
--------------------------------------------------------------------------------
 1 | import {nodeResolve} from '@rollup/plugin-node-resolve';
 2 | import {terser} from 'rollup-plugin-terser';
 3 | import includePaths from 'rollup-plugin-includepaths';
 4 | 
 5 | export default {
 6 |   input: './esm/index.js',
 7 |   plugins: [
 8 |     includePaths({
 9 |       include: {
10 |         '@webreflection/lie': 'node_modules/@ungap/degap/promise.js',
11 |         '@ungap/create-content': 'node_modules/@ungap/degap/create-content.js',
12 |         '@ungap/custom-elements': 'node_modules/@ungap/degap/custom-elements.js'
13 |       },
14 |     }),
15 |     nodeResolve(),
16 |     terser()
17 |   ],
18 |   
19 |   output: {
20 |     esModule: false,
21 |     exports: 'named',
22 |     file: './es.js',
23 |     format: 'iife'
24 |   }
25 | };
26 | 


--------------------------------------------------------------------------------
/test/refs.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <title>uce-template slots</title>
 7 |   <script defer src=../index.js></script>
 8 | </head>
 9 | <body>
10 |   <element-details>
11 |     <span ref="name"></span>
12 |     <span ref="description"></span>
13 |   </element-details>
14 | 
15 |   <template is="uce-template">
16 |     <element-details></element-details>
17 |     <script type="module" setup>
18 |       import {ref} from '@uce';
19 |       const {name, description} = ref(this);
20 |       name.textContent = 'I am name';
21 |       description.textContent = 'I am description';
22 |     </script>
23 |   </template>
24 | </body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/test/csp/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-eval'">
 7 |   <title>uce-template + CSP</title>
 8 |   <script defer src="../../min.js"></script>
 9 |   </script>
10 | </script>
11 | </script>
12 | </head>
13 | <body>
14 |   <csp-test></csp-test>
15 |   <template is="uce-template">
16 |     <csp-test>
17 |       {{text}}
18 |     </csp-test>
19 |     <script type="module">
20 |       export default {
21 |         setup: function () {
22 |           return {text: 'CSP works just fine'};
23 |         }
24 |       };
25 |     </script>
26 |   </template>
27 | </body>
28 | </html>


--------------------------------------------------------------------------------
/test/unicorn.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <title>uce-template is a unicorn</title>
 7 |   <script src="../min.js"></script>
 8 | </head>
 9 | <body>
10 |   <!-- multi times usage -->
11 |   <button is="rain-bow">
12 |     🦄 I am rainbow
13 |   </button>
14 | 
15 |   <!-- definition -->
16 |   <template is="uce-template">
17 |     <button is="rain-bow"></button>
18 |     <style>
19 |     button[is="rain-bow"] {
20 |       font-weight: bold;
21 |       background-color: #91d370;
22 |       background-image: linear-gradient(
23 |         319deg, #91d370 0%, #bca0ff 37%, #f2cd54 100%
24 |       );
25 |     }
26 |     </style>
27 |   </template>
28 | </body>
29 | </html>


--------------------------------------------------------------------------------
/test/resolve-lazy.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <script defer src="../index.js"></script>
 7 |   <script type="module">
 8 |   customElements.get('uce-template').resolve('promise-helper', Promise);
 9 |   </script>
10 | </head>
11 | <body>
12 |   <a-lie></a-lie>
13 |   <template is="uce-template">
14 |     <a-lie>component</a-lie>
15 |     <script type="module">
16 |       import Promise from 'promise-helper';
17 |       export default {
18 |         setup(el) {
19 |           new Promise($ => setTimeout($, 1000, 'it works'))
20 |                 .then(console.log);
21 |           return el;
22 |         }
23 |       };
24 |     </script>
25 |   </template>
26 | </body>
27 | </html>


--------------------------------------------------------------------------------
/test/resolve.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <script src="../index.js"></script>
 7 | </head>
 8 | <body>
 9 |   <a-lie></a-lie>
10 |   <template is="uce-template">
11 |     <a-lie>component</a-lie>
12 |     <script type="module">
13 |       // it will resolve 'promise-helper' module
14 |       import './resolve.js';
15 |       // that can be used in here already
16 |       import Promise from 'promise-helper';
17 | 
18 |       export default {
19 |         setup(el) {
20 |           new Promise($ => setTimeout($, 1000, 'it works'))
21 |                 .then(console.log);
22 |           return el;
23 |         }
24 |       };
25 |     </script>
26 |   </template>
27 | </body>
28 | </html>
29 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | ISC License
 2 | 
 3 | Copyright (c) 2020, Andrea Giammarchi, @WebReflection
 4 | 
 5 | Permission to use, copy, modify, and/or distribute this software for any
 6 | purpose with or without fee is hereby granted, provided that the above
 7 | copyright notice and this permission notice appear in all copies.
 8 | 
 9 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
10 | REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
11 | AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
12 | INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
13 | LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE
14 | OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
15 | PERFORMANCE OF THIS SOFTWARE.
16 | 


--------------------------------------------------------------------------------
/test/this.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <title>uce-template is a unicorn</title>
 7 |   <script src="../index.js"></script>
 8 | </head>
 9 | <body>
10 |   <!-- multi times usage -->
11 |   <button is="rain-bow">
12 |     🦄 I am rainbow
13 |   </button>
14 | 
15 |   <!-- definition -->
16 |   <template is="uce-template">
17 |     <button is="rain-bow">
18 |       {{this.toString()}}
19 |     </button>
20 |     <style>
21 |     button[is="rain-bow"] {
22 |       font-weight: bold;
23 |       background-color: #91d370;
24 |       background-image: linear-gradient(
25 |         319deg, #91d370 0%, #bca0ff 37%, #f2cd54 100%
26 |       );
27 |     }
28 |     </style>
29 |   </template>
30 | </body>
31 | </html>


--------------------------------------------------------------------------------
/test/my-counter/my-counter.uce:
--------------------------------------------------------------------------------
 1 | <my-counter>
 2 |   <button onclick="{{dec}}">
 3 |     -
 4 |   </button>
 5 |   <span>{{state.count}}</span>
 6 |   <button onclick="{{inc}}">
 7 |     +
 8 |   </button>
 9 | </my-counter>
10 | 
11 | <script type="module">
12 |   import {reactive} from "@uce";
13 |   export default {
14 |     setup(element) {
15 |       const state = reactive({ count: 0 });
16 |       const inc = () => { state.count++ };
17 |       const dec = () => { state.count-- };
18 |       return { state, inc, dec };
19 |     },
20 |   };
21 | </script>
22 | 
23 | <style scoped>
24 |   span,
25 |   button {
26 |     font-size: 200%;
27 |   }
28 | 
29 |   span {
30 |     width: 4rem;
31 |     display: inline-block;
32 |     text-align: center;
33 |   }
34 | 
35 |   button {
36 |     width: 4rem;
37 |     height: 4rem;
38 |     border: none;
39 |     border-radius: 10px;
40 |     background-color: seagreen;
41 |     color: white;
42 |   }
43 | </style>


--------------------------------------------------------------------------------
/test/nested.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <title>uce-template nested elements</title>
 7 |   <script src="../index.js"></script>
 8 | </head>
 9 | <body>
10 |   <template is="uce-template">
11 |     <div is="my-element">
12 |       {{slot.header}}
13 |       {{slot.content}}
14 |     </div>
15 |     <script type="module">
16 |       import {slot as slots} from '@uce';
17 |       export default {
18 |         setup(element) {
19 |           var slot = slots(element);
20 |           console.log(slot);
21 |           return {slot: slot};
22 |         }
23 |       };
24 |     </script>
25 |   </template>
26 |   <div is="my-element">
27 |     <h3 slot="header">Outer</h3>
28 |     <div slot="content">
29 |       <div is="my-element">
30 |         <h3 slot="header">Inner</h3>
31 |         <div slot="content">
32 |           Content
33 |         </div>
34 |       </div>
35 |     </div>
36 |   </div>
37 | </body>
38 | </html>


--------------------------------------------------------------------------------
/test/min/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang=en>
 3 | <head>
 4 | <meta charset=UTF-8>
 5 | <meta name=viewport content="width=device-width,initial-scale=1">
 6 | <title>WIP: uce-template</title>
 7 | <script defer src=../../index.js></script>
 8 | <style>body{font-family:sans-serif;user-select:none}</style>
 9 | </head>
10 | <body>
11 | <template is=uce-template>
12 | <my-counter>
13 | <button onclick={{dec}}>
14 | -
15 | </button>
16 | <span>{{state.count}}</span>
17 | <button onclick={{inc}}>
18 | +
19 | </button>
20 | </my-counter>
21 | <script type=module>import n from"@uce/reactive"
22 | export default{setup:function(t){var e=n({count:0})
23 | return t.connected=function(){console.log("connected")},{element:t,state:e,inc:function(){e.count++},dec:function(){e.count--}}}}
24 | </script>
25 | <style scoped>button,span{font-size:200%}span{width:4rem;display:inline-block;text-align:center}button{width:4rem;height:4rem;border:0;border-radius:10px;background-color:#2e8b57;color:#fff}</style>
26 | </template>
27 | <main>
28 | <my-counter></my-counter>
29 | <hr>
30 | <my-counter></my-counter>
31 | </main>
32 | </body>
33 | </html>


--------------------------------------------------------------------------------
/test/wc.js:
--------------------------------------------------------------------------------
 1 | const template = `
 2 | <my-counter>
 3 | 	<button onclick="{{dec}}">
 4 |     -
 5 |   </button>
 6 | 	<span>{{state.count}}</span>
 7 | 	<button onclick="{{inc}}">
 8 |     +
 9 |   </button>
10 | </my-counter>
11 | 
12 | <script type="module">
13 | 	import reactive from "@uce/reactive";
14 |   export default {
15 |     setup(element) {
16 |       const state = reactive({ count: 0 });
17 |       const inc = () => {
18 |         state.count++;
19 |       };
20 |       const dec = () => {
21 |         state.count--;
22 |       };
23 |       return { state, inc, dec };
24 |     },
25 |   };
26 | </script>
27 | 
28 | <style scoped>
29 | 	* {
30 | 		font-size: 200%;
31 | 	}
32 | 
33 | 	span {
34 | 		width: 4rem;
35 | 		display: inline-block;
36 | 		text-align: center;
37 | 	}
38 | 
39 | 	button {
40 | 		width: 4rem;
41 | 		height: 4rem;
42 | 		border: none;
43 | 		border-radius: 10px;
44 | 		background-color: seagreen;
45 | 		color: white;
46 | 	}
47 | </style>`;
48 | 
49 | customElements
50 |   .whenDefined("uce-template")
51 |   .then(Template =>
52 |     document.body.insertAdjacentElement("beforeend", Template.from(template))
53 |   );


--------------------------------------------------------------------------------
/test/partial.html:
--------------------------------------------------------------------------------
 1 | <style scoped>
 2 | span,
 3 | button {
 4 |   font-size: 200%;
 5 | }
 6 | span {
 7 |   width: 4rem;
 8 |   display: inline-block;
 9 |   text-align: center;
10 | }
11 | button {
12 |   width: 4rem;
13 |   height: 4rem;
14 |   border: none;
15 |   border-radius: 10px;
16 |   background-color: seagreen;
17 |   color: white;
18 | }
19 | </style>
20 | 
21 | <my-counter>
22 |   <button onclick={{dec}}>
23 |     -
24 |   </button>
25 |   <span>{{state.count}}</span>
26 |   <button onclick={{inc}}>
27 |     +
28 |   </button>
29 | </my-counter>
30 | 
31 | <script type="module">
32 | 
33 | import {reactive} from '@uce';
34 | 
35 | export default {
36 |   setup: function (element) {
37 |     var state = reactive({
38 |       count: 0
39 |     });
40 | 
41 |     function inc() {
42 |       state.count++;
43 |     }
44 | 
45 |     function dec() {
46 |       state.count--;
47 |     }
48 | 
49 |     element.connected = function () {
50 |       console.log('connected');
51 |     };
52 | 
53 |     return {
54 |       element: element,
55 |       state: state,
56 |       inc: inc,
57 |       dec: dec
58 |     };
59 |   }
60 | };
61 | </script>
62 | 


--------------------------------------------------------------------------------
/test/min/complex.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang=en>
 3 | <head>
 4 | <meta charset=UTF-8>
 5 | <meta name=viewport content="width=device-width,initial-scale=1">
 6 | <title>WIP: uce-template</title>
 7 | <script defer src=../../index.js></script>
 8 | </head>
 9 | <body>
10 | <template is=uce-template lazy>
11 | <my-counter>
12 | <button onclick={{dec}}>
13 | -
14 | </button>
15 | <span>{{state.count}} {{element.text}}</span>
16 | <button onclick={{inc}}>
17 | +
18 | </button>
19 | <pre>
20 | This is
21 | a test
22 |       </pre>
23 | </my-counter>
24 | <script type=module>import{reactive as e}from"@uce"
25 | import o from"js/bundle.js"
26 | console.log(o)
27 | export default{props:{text:""},setup(o){const t=e({count:0})
28 | return o.connected=()=>{console.log("connected")},{element:o,state:t,inc:()=>{t.count++},dec:()=>{t.count--}}}}
29 | </script>
30 | <style scoped>button,span{font-size:200%}span{width:4rem;display:inline-block;text-align:center}button{width:4rem;height:4rem;border:0;border-radius:10px;background-color:#2e8b57;color:#fff}</style>
31 | <style>body{font-family:sans-serif;user-select:none}</style>
32 | </template>
33 | <my-counter></my-counter>
34 | <hr>
35 | <my-counter></my-counter>
36 | </body>
37 | </html>


--------------------------------------------------------------------------------
/test/loader.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <title>Document</title>
 7 |   <script type="module">
 8 |     import loader from 'https://unpkg.com/uce-loader?module';
 9 |     loader({
10 |       on(component) {
11 |         // first component found, load uce-template
12 |         if (!this.q) {
13 |           this.q = [component];
14 |           const script = document.createElement('script');
15 |           script.src = '../index.js';
16 |           document.body.appendChild(script).onload = () => {
17 |             // get the uce-template class to use its .from(...)
18 |             this.Template = customElements.get('uce-template');
19 |             // load all queued components
20 |             for (var q = this.q.splice(0), i = 0; i < q.length; i++)
21 |               this.on(q[i]);
22 |           };
23 |         }
24 |         // when uce-template is loaded
25 |         else if (this.Template) {
26 |           // ignore loading uce-template itself
27 |           if (component !== 'uce-template') {
28 |             // load the component on demand
29 |             fetch(`./${component}.uce`)
30 |               .then(body => body.text())
31 |               .then(definition => {
32 |                 document.body.appendChild(
33 |                   this.Template.from(definition)
34 |                 );
35 |               });
36 |           }
37 |         }
38 |         // if uce-template is not loaded yet
39 |         // add the component to the queue
40 |         else
41 |           this.q.push(component);
42 |       }
43 |     });
44 |   </script>
45 | </head>
46 | <body>
47 |   <button is="my-btn"></button>
48 | </body>
49 | </html>


--------------------------------------------------------------------------------
/test/min/slots.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang=en>
 3 | <head>
 4 | <meta charset=UTF-8>
 5 | <meta name=viewport content="width=device-width,initial-scale=1">
 6 | <title>uce-template slots</title>
 7 | <script defer src=../../min.js></script>
 8 | </head>
 9 | <body>
10 | <p>
11 | Original example <a href=https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots>@MDN</a>
12 | </p>
13 | <hr>
14 | <element-details>
15 | <span slot=name>slot</span>
16 | <span slot=description>A placeholder inside a web component that users can fill with their own markup, with the effect of composing different DOM trees together.</span>
17 | <dl slot=attributes>
18 | <dt>name</dt>
19 | <dd>The name of the slot.</dd>
20 | </dl>
21 | </element-details>
22 | <element-details>
23 | <span slot=name>template</span>
24 | <span slot=description>A mechanism for holding client- side content that is not to be rendered when a page is loaded but may subsequently be instantiated during runtime using JavaScript.</span>
25 | </element-details>
26 | <template is=uce-template>
27 | <style scoped>details{font-family:"Open Sans Light",Helvetica,Arial}.name{font-weight:700;color:#217ac0;font-size:120%}h4{margin:10px 0 -8px}h4 span{background:#217ac0;padding:2px 6px;border:1px solid #cee9f9;border-radius:4px;color:#fff}.attributes{margin-left:22px;font-size:90%}.attributes p{margin-left:16px;font-style:italic}</style>
28 | <element-details>
29 | <summary>
30 | <span>
31 | <code class=name>&lt;{{slot.name}}&gt;</code>
32 | <i class=desc>{{slot.description}}</i>
33 | </span>
34 | </summary>
35 | <div class=attributes>
36 | <h4><span>Attributes</span></h4>
37 | {{slot.attributes || html`<p>None</p>`}}
38 | </div>
39 | <hr>
40 | </element-details>
41 | <script type=module>import{html as t,slot as e}from"@uce"
42 | export default{setup:o=>({html:t,slot:e(o)})}
43 | </script>
44 | 
45 | </template>
46 | </body>
47 | </html>


--------------------------------------------------------------------------------
/test/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width,initial-scale=1.0">
 6 |   <title>WIP: uce-template</title>
 7 |   <script defer src="../min.js"></script>
 8 |   <style>
 9 |     body {
10 |       font-family: sans-serif;
11 |       user-select: none;
12 |     }
13 |   </style>
14 | </head>
15 | <body>
16 |   <template is="uce-template">
17 | 
18 |     <my-counter>
19 |       <button onclick={{dec}}>
20 |         -
21 |       </button>
22 |       <span>{{state.count}}</span>
23 |       <button onclick={{inc}}>
24 |         +
25 |       </button>
26 |     </my-counter>
27 | 
28 |     <script type="module">
29 | 
30 |     import reactive from '@uce/reactive';
31 | 
32 |     export default {
33 |       setup: function (element) {
34 |         var state = reactive({
35 |           count: 0
36 |         });
37 | 
38 |         function inc() {
39 |           state.count++;
40 |         }
41 | 
42 |         function dec() {
43 |           state.count--;
44 |         }
45 | 
46 |         element.connected = function () {
47 |           console.log('connected');
48 |         };
49 | 
50 |         return {
51 |           element: element,
52 |           state: state,
53 |           inc: inc,
54 |           dec: dec
55 |         };
56 |       }
57 |     };
58 |     </script>
59 | 
60 |     <style scoped>
61 |     span,
62 |     button {
63 |       font-size: 200%;
64 |     }
65 |     span {
66 |       width: 4rem;
67 |       display: inline-block;
68 |       text-align: center;
69 |     }
70 |     button {
71 |       width: 4rem;
72 |       height: 4rem;
73 |       border: none;
74 |       border-radius: 10px;
75 |       background-color: seagreen;
76 |       color: white;
77 |     }
78 |     </style>
79 | 
80 |   </template>
81 | 
82 |   <main>
83 |     <my-counter></my-counter>
84 |     <hr>
85 |     <my-counter></my-counter>
86 |   </main>
87 | 
88 | </body>
89 | </html>
90 | 


--------------------------------------------------------------------------------
/test/slots.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <title>uce-template slots</title>
 7 |   <script defer src=../min.js></script>
 8 | </head>
 9 | <body>
10 |   <p>
11 |     Original example <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots">@MDN</a>
12 |   </p>
13 |   <hr>
14 |   <element-details>
15 |     <span slot="name">slot</span>
16 |     <span slot="description">A placeholder inside a web
17 |       component that users can fill with their own markup,
18 |       with the effect of composing different DOM trees
19 |       together.</span>
20 |     <dl slot="attributes">
21 |       <dt>name</dt>
22 |       <dd>The name of the slot.</dd>
23 |     </dl>
24 |   </element-details>
25 | 
26 |   <element-details>
27 |     <span slot="name">template</span>
28 |     <span slot="description">A mechanism for holding client-
29 |       side content that is not to be rendered when a page is
30 |       loaded but may subsequently be instantiated during
31 |       runtime using JavaScript.</span>
32 |   </element-details>
33 | 
34 |   <template is="uce-template">
35 |     <style scoped>
36 |       details {font-family: "Open Sans Light",Helvetica,Arial}
37 |       .name {font-weight: bold; color: #217ac0; font-size: 120%}
38 |       h4 { margin: 10px 0 -8px 0; }
39 |       h4 span { background: #217ac0; padding: 2px 6px 2px 6px }
40 |       h4 span { border: 1px solid #cee9f9; border-radius: 4px }
41 |       h4 span { color: white }
42 |       .attributes { margin-left: 22px; font-size: 90% }
43 |       .attributes p { margin-left: 16px; font-style: italic }
44 |     </style>
45 |     <element-details>
46 |       <summary>
47 |         <span>
48 |           <code class="name">&lt;{{slot.name}}&gt;</code>
49 |           <i class="desc">{{slot.description}}</i>
50 |         </span>
51 |       </summary>
52 |       <div class="attributes">
53 |         <h4><span>Attributes</span></h4>
54 |         {{slot.attributes || html`<p>None</p>`}}
55 |       </div>
56 |       <hr>
57 |     </element-details>
58 |     <script type="module">
59 |       import {html, slot} from '@uce';
60 |       export default {
61 |         setup: element => ({html, slot: slot(element)})
62 |       };
63 |     </script>
64 |   </template>
65 | </body>
66 | </html>
67 | 


--------------------------------------------------------------------------------
/test/dbmonster.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |   color: #333;
  3 |   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  4 |   font-size: 14px;
  5 |   line-height: 1.42857143;
  6 |   margin: 0;
  7 | }
  8 | 
  9 | label {
 10 |   display: inline-block;
 11 |   font-weight: 700;
 12 |   margin-bottom: 5px;
 13 | }
 14 | 
 15 | #range {
 16 | display: flex;
 17 | }
 18 | 
 19 | input[type=range] {
 20 |   display: block;
 21 |   width: 100%;
 22 |   margin-bottom: 10px;
 23 |   margin-top: 5px;
 24 | }
 25 | 
 26 | table {
 27 |   border-collapse: collapse;
 28 |   border-spacing: 0;
 29 | }
 30 | 
 31 | :before,
 32 | :after {
 33 |   box-sizing: border-box;
 34 | }
 35 | 
 36 | .table > thead > tr > th,
 37 | .table > tbody > tr > th,
 38 | .table > tfoot > tr > th,
 39 | .table > thead > tr > td,
 40 | .table > tbody > tr > td,
 41 | .table > tfoot > tr > td {
 42 |   border-top: 1px solid #ddd;
 43 |   line-height: 1.42857143;
 44 |   padding: 8px;
 45 |   vertical-align: top;
 46 | }
 47 | 
 48 | .table {
 49 |   width: 100%;
 50 | }
 51 | 
 52 | .table-striped > tbody > tr:nth-child(odd) > td,
 53 | .table-striped > tbody > tr:nth-child(odd) > th {
 54 |   background: #f9f9f9;
 55 | }
 56 | 
 57 | .label {
 58 |   border-radius: .25em;
 59 |   color: #fff;
 60 |   display: inline;
 61 |   font-size: 75%;
 62 |   font-weight: 700;
 63 |   line-height: 1;
 64 |   padding: .2em .6em .3em;
 65 |   text-align: center;
 66 |   vertical-align: baseline;
 67 |   white-space: nowrap;
 68 | }
 69 | 
 70 | .label-success {
 71 |   background-color: #5cb85c;
 72 | }
 73 | 
 74 | .label-warning {
 75 |   background-color: #f0ad4e;
 76 | }
 77 | 
 78 | .popover {
 79 |   background-color: #fff;
 80 |   background-clip: padding-box;
 81 |   border: 1px solid #ccc;
 82 |   border: 1px solid rgba(0, 0, 0, .2);
 83 |   border-radius: 6px;
 84 |   box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
 85 |   display: none;
 86 |   left: 0;
 87 |   max-width: 276px;
 88 |   padding: 1px;
 89 |   position: absolute;
 90 |   text-align: left;
 91 |   top: 0;
 92 |   white-space: normal;
 93 |   z-index: 1010;
 94 | }
 95 | 
 96 | .popover>.arrow:after {
 97 |   border-width: 10px;
 98 |   content: "";
 99 | }
100 | 
101 | .popover.left {
102 |   margin-left: -10px;
103 | }
104 | 
105 | .popover.left > .arrow {
106 |   border-right-width: 0;
107 |   border-left-color: rgba(0, 0, 0, .25);
108 |   margin-top: -11px;
109 |   right: -11px;
110 |   top: 50%;
111 | }
112 | 
113 | .popover.left > .arrow:after {
114 |   border-left-color: #fff;
115 |   border-right-width: 0;
116 |   bottom: -10px;
117 |   content: " ";
118 |   right: 1px;
119 | }
120 | 
121 | .popover > .arrow {
122 |   border-width: 11px;
123 | }
124 | 
125 | .popover > .arrow,
126 | .popover>.arrow:after {
127 |   border-color: transparent;
128 |   border-style: solid;
129 |   display: block;
130 |   height: 0;
131 |   position: absolute;
132 |   width: 0;
133 | }
134 | 
135 | .popover-content {
136 |   padding: 9px 14px;
137 | }
138 | 
139 | .Query {
140 |   position: relative;
141 | }
142 | 
143 | .Query:hover .popover {
144 |   display: block;
145 |   left: -100%;
146 |   width: 100%;
147 | }


--------------------------------------------------------------------------------
/test/complex.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <meta name="viewport" content="width=device-width,initial-scale=1.0">
  6 | 
  7 |   <title>WIP: uce-template</title>
  8 | 
  9 |   <!-- the uce-template module -->
 10 |   <script defer src="../index.js"></script>
 11 | </head>
 12 | <body>
 13 |   <!--
 14 |     An SSR compatible way to define components
 15 |     with an optional lazy attribute to define
 16 |     components only once encountered live
 17 |   -->
 18 |   <template is="uce-template" lazy>
 19 | 
 20 |     <!--
 21 |       component template with optional shadow attribute:
 22 |         * <my-comp shadow> or <my-comp shadow="open"> creates open ShadowDOM
 23 |         * <my-comp shadow="closed"> creates closed ShadowDOM
 24 |         * no shadow means no ShadowDOM needed/used
 25 |     -->
 26 |     <my-counter>
 27 |       <button onclick={{dec}}>
 28 |         -
 29 |       </button>
 30 |       <span>{{state.count}} {{this.text}}</span>
 31 |       <button onclick={{inc}}>
 32 |         +
 33 |       </button>
 34 |       <pre>
 35 | This is
 36 | a test
 37 |       </pre>
 38 |     </my-counter>
 39 | 
 40 |     <!--
 41 |       optional script with pre-defined modules:
 42 |         * reactive(state) helper as '@uce/reactive' virtual module
 43 |         * full 'uce', 'augmentor', and 'reactive-props' modules
 44 |     -->
 45 |     <script type="module">
 46 | 
 47 |     import {reactive} from '@uce';
 48 | 
 49 |     import bundle from "./js/bundle.js";
 50 |     console.log(bundle);
 51 | 
 52 |     export default {
 53 |       // make element.text reactive
 54 |       props: {text: ''},
 55 |       // setup current element returning what
 56 |       // is expected to be used in the component template
 57 |       setup(element) {
 58 |         const state = reactive({
 59 |           count: 0
 60 |         });
 61 | 
 62 |         const inc = () => { state.count++ };
 63 |         const dec = () => { state.count-- };
 64 | 
 65 |         element.connected = () => {
 66 |           console.log('connected');
 67 |         };
 68 | 
 69 |         return {state, inc, dec};
 70 |       }
 71 |     };
 72 |     </script>
 73 | 
 74 |     <!--
 75 |       optional style (one or more styles)
 76 |         * global by default (no scoped, no shadow)
 77 |         * if scoped, prefixes styles with the component name
 78 |         * if shadow, it's injected on top of the ShadowDOM
 79 |     -->
 80 |     <style scoped>
 81 |     span,
 82 |     button {
 83 |       font-size: 200%;
 84 |     }
 85 |     span {
 86 |       width: 4rem;
 87 |       display: inline-block;
 88 |       text-align: center;
 89 |     }
 90 |     button {
 91 |       width: 4rem;
 92 |       height: 4rem;
 93 |       border: none;
 94 |       border-radius: 10px;
 95 |       background-color: seagreen;
 96 |       color: white;
 97 |     }
 98 |     </style>
 99 | 
100 |     <!-- global style example -->
101 |     <style>
102 |     body {
103 |       font-family: sans-serif;
104 |       user-select: none;
105 |     }
106 |     </style>
107 |   </template>
108 | 
109 |   <!-- the defined components in the wild -->
110 |   <MY-COUNTER></MY-COUNTER>
111 |   <hr>
112 |   <my-counter></my-counter>
113 | 
114 | </body>
115 | </html>
116 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "uce-template",
 3 |   "version": "0.7.1",
 4 |   "description": "A tiny toolless library with tools included",
 5 |   "bin": {
 6 |     "uce-template": "bin/index.js"
 7 |   },
 8 |   "main": "./cjs/index.js",
 9 |   "scripts": {
10 |     "uce": "node -e 'require(`fs`).writeFileSync(`esm/uce.js`,require(`fs`).readFileSync(`node_modules/uce/esm/index.js`).toString().replace(/NOPE\\/\\/ \\[props\\][\\S\\s]+?\\/\\/ \\[\\/props\\]/, ``))'",
11 |     "build": "npm run graph && npm run cjs && npm run rollup:es && npm run rollup:babel && drop-babel-typeof index.js && npm run min && npm run integrity && npm run size",
12 |     "cjs": "ascjs --no-default esm cjs",
13 |     "graph": "cp node_modules/reactive-props/state.js test/js/reactive-props.js",
14 |     "integrity": "cat min.js | openssl dgst -sha256 -binary | openssl base64 -A > nonce.txt && node -e 'const {readFileSync,writeFileSync}=require(`fs`),nonce=readFileSync(`nonce.txt`);writeFileSync(`README.md`,readFileSync(`README.md`).toString().replace(/(integrity)=\"[^\"]*?\"/g,`$1=\"sha256-${nonce}\"`).replace(/(__nonce__ )`[^`]*?`/g,\"$1`\"+nonce+\"`\"))'",
15 |     "rollup:es": "rollup --config rollup/es.config.js && sed -i.bck 's/^var /self./' es.js && rm -rf es.js.bck",
16 |     "rollup:babel": "rollup --config rollup/babel.config.js && sed -i.bck 's/^var /self./' index.js && rm -rf index.js.bck",
17 |     "min": "terser index.js --comments='/^!/' -c -m -o min.js",
18 |     "size": "echo 'JS';echo \"  gzip   $(cat min.js | gzip | wc -c)\" && echo \"  brotli $(cat min.js | brotli | wc -c)\" && echo 'ES';echo \"  gzip   $(cat es.js | gzip | wc -c)\" && echo \"  brotli $(cat es.js | brotli | wc -c)\""
19 |   },
20 |   "keywords": [
21 |     "custom",
22 |     "elements",
23 |     "template",
24 |     "uce"
25 |   ],
26 |   "author": "Andrea Giammarchi",
27 |   "license": "ISC",
28 |   "devDependencies": {
29 |     "@rollup/plugin-babel": "^5.3.0",
30 |     "@rollup/plugin-node-resolve": "^13.0.0",
31 |     "@ungap/degap": "^0.2.7",
32 |     "ascjs": "^5.0.1",
33 |     "drop-babel-typeof": "^1.0.3",
34 |     "rollup": "^2.52.7",
35 |     "rollup-plugin-includepaths": "^0.2.4",
36 |     "rollup-plugin-terser": "^7.0.2"
37 |   },
38 |   "module": "./esm/index.js",
39 |   "type": "module",
40 |   "exports": {
41 |     ".": {
42 |       "import": "./esm/index.js",
43 |       "default": "./cjs/index.js"
44 |     },
45 |     "./package.json": "./package.json"
46 |   },
47 |   "unpkg": "min.js",
48 |   "dependencies": {
49 |     "@babel/core": "^7.14.6",
50 |     "@babel/preset-env": "^7.14.7",
51 |     "@ungap/create-content": "^0.3.1",
52 |     "@ungap/custom-elements": "^1.0.0",
53 |     "@webreflection/lie": "^0.1.1",
54 |     "csso": "^4.2.0",
55 |     "html-minifier-terser": "^5.1.1",
56 |     "qsa-observer": "^2.0.2",
57 |     "reactive-props": "^0.2.2",
58 |     "terser": "^5.7.1",
59 |     "uce": "^1.16.2",
60 |     "uce-helpers": "^0.1.1",
61 |     "uce-require": "^0.1.9",
62 |     "uhooks": "^0.2.8"
63 |   },
64 |   "repository": {
65 |     "type": "git",
66 |     "url": "git+https://github.com/WebReflection/uce-template.git"
67 |   },
68 |   "bugs": {
69 |     "url": "https://github.com/WebReflection/uce-template/issues"
70 |   },
71 |   "homepage": "https://github.com/WebReflection/uce-template#readme"
72 | }
73 | 


--------------------------------------------------------------------------------
/test/dbmonster.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 |   <head>
 4 |     <title>uhtml dbmonster</title>
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <link rel="stylesheet" href="dbmonster.css">
 7 |     <script defer src="https://unpkg.com/perf-monitor@0.3.0/dist/umd/perf-monitor.js"></script>
 8 |     <script defer src="dbmonster.js"></script>
 9 |     <script defer src="../index.js"></script>
10 |   </head>
11 |   <body>
12 |     <div id="range"></div>
13 |     <div id="app">
14 |       <table is="db-monster" class="table table-striped latest-data"></table>
15 |     </div>
16 |     <div id="link">
17 |       You're looking at uhtml<br>
18 |       version of <a href="https://dbmonster.firebaseapp.com/">DBMonster</a>.
19 |     </div>
20 | 
21 |     <template is="uce-template">
22 |       <tr is="db-monster-tr">
23 |         <td class="dbname">{{data.dbname}}</td>
24 |         <td class="query-count">
25 |           <span class={{data.lastSample.countClassName}}>
26 |             {{data.lastSample.nbQueries}}
27 |           </span>
28 |         </td>
29 |         <!--{{extras}}-->
30 |       </tr>
31 |       <script type="module">
32 |         import {html} from '@uce';
33 |         export default {
34 |           props: {data: {}},
35 |           setup(element) {
36 |             return {
37 |               get data() {
38 |                 return element.data;
39 |               },
40 |               get extras() {
41 |                 const {topFiveQueries} = element.data.lastSample;
42 |                 return topFiveQueries.map((query, j, a) => html`
43 |                   <td class="${query.elapsedClassName}">
44 |                     <span class="foo">
45 |                       ${query.formatElapsed}
46 |                     </span>
47 |                     <div class="popover left">
48 |                       <div class="popover-content">
49 |                         ${query.query}
50 |                       </div>
51 |                       <div class="arrow"></div>
52 |                     </div>
53 |                   </td>`
54 |                 );
55 |               }
56 |             };
57 |           }
58 |         };
59 |       </script>
60 |     </template>
61 | 
62 |     <template is="uce-template">
63 |       <table is="db-monster">
64 |         <tbody><!--{{rows}}--></tbody>
65 |       </table>
66 |       <script type="module">
67 |         import {html, reactive} from '@uce';
68 |         export default {
69 |           setup() {
70 |             perfMonitor.startFPSMonitor();
71 |             perfMonitor.startMemMonitor();
72 |             const update = () => {
73 |               setTimeout(update, ENV.timeout);
74 |               const data = ENV.generateData().toArray();
75 |               perfMonitor.startProfile('view update');
76 |               state.data = data;
77 |               perfMonitor.endProfile('view update');
78 |             };
79 |             const state = reactive({ data: [] });
80 |             update();
81 |             return {
82 |               get rows() {
83 |                 return state.data.map((db, i) => html`
84 |                   <tr is="db-monster-tr"
85 |                       key=${db.dbname}
86 |                       .data=${db} />
87 |                 `);
88 |               }
89 |             };
90 |           }
91 |         };
92 |       </script>
93 |     </template>
94 |   </body>
95 | </html>
96 | 


--------------------------------------------------------------------------------
/extra-details.md:
--------------------------------------------------------------------------------
  1 | ## How does uce-template work?
  2 | 
  3 | Based on [uce](https://github.com/WebReflection/uce#readme) and the latest [custom-elements polyfill](https://github.com/ungap/custom-elements#readme), this module glues most modern Web development patterns in a standard way that yet feels like magic.
  4 | 
  5 | The *HTML* content of each component is handled by [tag-params](https://github.com/WebReflection/tag-params#readme) *partial* utility, while the *JS* content is normalized as lightweight *CommonJS* environment, where anyone can feed the module system as they need.
  6 | 
  7 | As strawberry on top, *hooks* are provided behind the scene via the `@uce/reactive` utility and thanks to [augmentor](https://github.com/WebReflection/augmentor#readme).
  8 | 
  9 | The *JS* environment is likely the most complex part to grasp though, so here some extra detail on how it works.
 10 | 
 11 | 
 12 | ### The module JS environment
 13 | 
 14 | The component script definition happens in a virtual `Function` sandbox, where all *imports* and *exports* are normalized as *CommonJS*, and a `require(module)` utility is provided.
 15 | 
 16 | Like it is for *CommonJS*, the `require` utility always returns the same module, once such module has been provided.
 17 | 
 18 | In the previous example, the `@uce/reactive` is virtually predefined in *uce-template*, but there are other modules too:
 19 | 
 20 |   * [augmentor](https://github.com/WebReflection/augmentor#readme) to create any *hooked* wizardry we like
 21 |   * [qsa-observer](https://github.com/WebReflection/qsa-observer#readme) to monitor nodes if needed
 22 |   * [reactive-props](https://github.com/WebReflection/reactive-props#readme) to create any reactive alchemy, even if this is provided already via `@uce/reactive`
 23 |   * [uce](https://github.com/WebReflection/uce#readme) to eventually import `html`, `svg`, or `render` utilities from [uhtml](https://github.com/WebReflection/uce#readme)
 24 |   * [@webreflection/lie](https://github.com/WebReflection/lie#readme) to have basic *Promise* support in IE11 (resolves only)
 25 | 
 26 | While `import {html} from 'uce'`, and *uce* in general, is very helpful to compose inner nodes of a defined component, every other module is there only because this library uses these modules to work, and it wouldn't make sense to not provide what's already included in *uce-template*.
 27 | 
 28 | However, it is possible to **define any module** using the `resolve(name, module)` utility:
 29 | 
 30 | ```js
 31 | import {resolve} from 'uce-template';
 32 | 
 33 | import MyLibrary from 'MyLibrary';
 34 | resolve('my-library', MyLibrary);
 35 | ```
 36 | 
 37 | Alternatively, it is also possible to define modules via the `uce-template` class itself:
 38 | 
 39 | ```js
 40 | customElements.whenDefined('uce-template').then({resolve} => {
 41 |   resolve('my-utility', {any(){}, module: 'really'});
 42 | });
 43 | ```
 44 | 
 45 | Please note that modules are unique so it is encouraged to use real module names to avoid clashing within third parts libraries.
 46 | 
 47 | 
 48 | ### The lazy JS environment
 49 | 
 50 | Modules can also be **loaded at runtime**, but only if *relative* or if the *CDN* supports Cross Origin Requests.
 51 | 
 52 | ```js
 53 | // provided by uce-template
 54 | import reactive from '@uce/reactive';
 55 | 
 56 | import doubleRainbow from './js/rainbow.js';
 57 | 
 58 | export default {
 59 |   setup(element) {
 60 |     const state = reactive({ count: 0 });
 61 |     const inc = () => { state.count++ };
 62 |     const dec = () => { state.count-- };
 63 |     console.log(doubleRainbow); // 🌈🌈
 64 |     return {state, inc, dec};
 65 |   }
 66 | };
 67 | ```
 68 | 
 69 | The `js/rainbow.js` in example should be reachable, and contain some export either via *ESM* syntax, or *CJS*, so that `export default '🌈🌈'` or `module.exports = '🌈🌈'` would be both valid and accepted.
 70 | 
 71 | It is *our duty* to be sure that lazily loaded modules can run within our target browsers, so in case *IE11* is one of these targets, it's our duty to transpile those file in a compatible way via *Babel* or others, as the `require` utility only cares about *imports* and *exports*.
 72 | 
 73 | The **advantage** of having *lazy* modules resolution is that a component defined via `<template is="uce-template" lazy>` will *not* need to have all dependencies pre-defined/resolved, and it *will* download once these only when any instance of such component is spot live.
 74 | 
 75 | As it is for ESM and CommonJS, every module is granted to be downloaded once and persist across multiple *imports*.
 76 | 
 77 | 
 78 | ### Inherited _µce_ features
 79 | 
 80 | If the *default export* contains `props`, or any `onevent` handler, all the features available via *uce* will be available within the component too:
 81 | 
 82 | ```js
 83 | export default {
 84 |   observedAttributes: ['thing'],
 85 |   props: {test: 'default value'},
 86 |   onClick() {
 87 |     console.log('click');
 88 |   },
 89 |   setup(element) {
 90 |     // setup an own attributeChanged
 91 |     element.attributeChanged = (name, oldVal, newVal) => {
 92 |       // will log "thing" and the value
 93 |       console.log(name, newVal);
 94 |     };
 95 |     // log "default value"
 96 |     console.log(element.test);
 97 |   }
 98 | };
 99 | ```
100 | 
101 | All `props` will automatically re-render the component, while `observedAttributes` must have an `attributeChanged` callback attached on setup.
102 | 
103 | This is because the whole *render* is hooked once, and all lifecycle events will belong to it.
104 | 
105 | To know more about _µce_ features, [please check its own repository](https://github.com/WebReflection/uce#readme).
106 | 


--------------------------------------------------------------------------------
/bin/index.js:
--------------------------------------------------------------------------------
  1 | #!/usr/bin/env node
  2 | 
  3 | 'use strict';
  4 | 
  5 | const {promises, readFileSync} = require('fs');
  6 | const {join, resolve} = require('path');
  7 | 
  8 | const {minify} = require('html-minifier-terser');
  9 | const {minify: terser} = require('terser');
 10 | const {minify: csso} = require('csso');
 11 | 
 12 | const {transform: babel} = require('@babel/core');
 13 | 
 14 | const exit = error => {
 15 |   console.error(error);
 16 |   process.exit(1);
 17 | };
 18 | 
 19 | const {lstat, mkdir, readdir, readFile, writeFile} = promises;
 20 | 
 21 | let BABEL = false;
 22 | let DEBUG = false;
 23 | let SOURCE = '';
 24 | let DEST = '';
 25 | 
 26 | for (let {argv} = process, i = 2, {length} = argv; i < length; i++) {
 27 |   if (/^-/.test(argv[i])) {
 28 |     const equal = argv[i].indexOf('=');
 29 |     const key = equal < 0 ? argv[i] : argv[i].slice(0, equal);
 30 |     const value = () => equal < 0 ? (++i < length ? argv[i] : '') : argv[i].slice(equal + 1);
 31 |     switch (key) {
 32 |       case '-h':
 33 |       case '--help':
 34 |         let version = '';
 35 |         try { version = require(join(__dirname, '..', 'package.json')).version }
 36 |         catch (o_O) {}
 37 |         console.log('');
 38 |         console.log(' \x1b[1muce-template\x1b[0m v' + version);
 39 |         console.log(' \x1b[2mhttps://github.com/webreflection/uce-template\x1b[0m');
 40 |         console.log('');
 41 |         console.log(' \x1b[4musage\x1b[0m');
 42 |         console.log('');
 43 |         console.log('   uce-template [options] file.html');
 44 |         console.log('   cat file.html | uce-template [options]');
 45 |         console.log('   uce-template [options] ./source-dir -o ./dest-dir');
 46 |         console.log('');
 47 |         console.log(' \x1b[4moptions\x1b[0m');
 48 |         console.log('');
 49 |         console.log('   -h --help       this message');
 50 |         console.log('   --babel         targets ES5');
 51 |         console.log('   --debug         does not minify JS');
 52 |         console.log('   -o              output file/folder');
 53 |         console.log('');
 54 |         process.exit(0);
 55 |       case '-o':
 56 |         const dest = value();
 57 |         if (!dest)
 58 |           exit('invalid destination path');
 59 |         DEST = resolve(process.cwd(), dest);
 60 |         break;
 61 |       case '--babel':
 62 |         BABEL = true;
 63 |         break;
 64 |       case '--debug':
 65 |         DEBUG = true;
 66 |         break;
 67 |       default:
 68 |         exit('unknown flag ' + key);
 69 |         break;
 70 |     }
 71 |   }
 72 |   else {
 73 |     if (SOURCE)
 74 |       exit('multiple sources are not allowed');
 75 |     SOURCE = resolve(process.cwd(), argv[i]);
 76 |   }
 77 | }
 78 | 
 79 | const parse = source => lstat(source).then(
 80 |   async stats => stats.isDirectory() ?
 81 |                   await parseDir(source) :
 82 |                   [await parseFile(source)],
 83 |   () => exit('unable to parse ' + source)
 84 | );
 85 | 
 86 | const parseDir = async source => {
 87 |   const code = [];
 88 |   for (const file of await readdir(source)) {
 89 |     if (!/^\./.test(file)) {
 90 |       const path = join(source, file);
 91 |       if (/\.(?:uce|html?)$/i.test(file))
 92 |         code.push(await parseFile(path));
 93 |       else {
 94 |         const stats = await lstat(path);
 95 |         if (stats.isDirectory())
 96 |           code.push.apply(code, await parseDir(path));
 97 |       }
 98 |     }
 99 |   }
100 |   return code;
101 | };
102 | 
103 | const parseFile = source => readFile(source, 'utf-8')
104 |                               .then(transform, exit);
105 | 
106 | const saveFile = (dest, code) => writeFile(dest, code).catch(exit);
107 | 
108 | const saveDir = async (source, dest, code) => {
109 |   for (const file of await readdir(source)) {
110 |     if (!/^\./.test(file)) {
111 |       const path = join(source, file);
112 |       if (/\.(?:uce|html?)$/i.test(file)) {
113 |         await mkdir(dest, {recursive: true});
114 |         await saveFile(join(dest, file), code.shift());
115 |       }
116 |       else {
117 |         const stats = await lstat(path);
118 |         if (stats.isDirectory())
119 |           await saveDir(path, join(dest, file), code);
120 |       }
121 |     }
122 |   }
123 | };
124 | 
125 | const transform = buffer => {
126 |   const re = /\x00(\d+)/g;
127 |   const chunks = [];
128 |   const scripts = [];
129 |   const outcome = minify(buffer.toString().trim(), {
130 |     preserveLineBreaks: true,
131 |     collapseBooleanAttributes: true,
132 |     collapseWhitespace: true,
133 |     html5: true,
134 |     keepClosingSlash: true,
135 |     removeAttributeQuotes: true,
136 |     removeComments: true,
137 |     minifyJS: text => ('\x00' + (scripts.push(text) - 1)),
138 |     minifyCSS: text => csso(text).css
139 |   });
140 |   let match;
141 |   while (match = re.exec(outcome)) {
142 |     const [_, index] = match;
143 |     let text = scripts[index];
144 |     const expression = /^\{\{/.test(text);
145 |     if (expression)
146 |       text = text.replace(/(?:^\{\{|\}\}$)/g, '');
147 |     chunks.push(new Promise($ => {
148 |       if (BABEL)
149 |         text = babel(text, {
150 |           babelrc: false,
151 |           sourceType: 'module',
152 |           presets: ['@babel/preset-env']
153 |         })
154 |         .code.trim()
155 |         .replace(/^(['"])use strict\1;/gm, '').trim()
156 |       ;
157 |       if (DEBUG)
158 |         $(expression ? `{{${text.trim()}}}` : text);
159 |       else {
160 |         terser(text, {mangle: {toplevel: true}, format: {semicolons: false}})
161 |           .then(({code}) => {
162 |             code = code.replace('Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0', '');
163 |             $(expression ? `{{${code.trim()}}}` : code);
164 |           })
165 |           .catch(exit)
166 |         ;
167 |       }
168 |     }));
169 |   }
170 |   return Promise.all(chunks).then(scripts => outcome.replace(re, (_, i) => scripts[i]));
171 | };
172 | 
173 | (SOURCE ?
174 |   parse(SOURCE) :
175 |   transform(readFileSync(0, 'utf-8')).then(code => [code])
176 | ).then(async code => {
177 |   if (DEST) {
178 |     const stats = await lstat(SOURCE);
179 |     if (stats.isDirectory())
180 |       saveDir(SOURCE, DEST, code);
181 |     else
182 |       saveFile(DEST, code.join('\n\n'));
183 |   }
184 |   else
185 |     process.stdout.write(code.join('\n\n'));
186 | });
187 | 


--------------------------------------------------------------------------------
/test/dbmonster.js:
--------------------------------------------------------------------------------
  1 | window.ENV = function () {'use strict';
  2 |   var counter = 0;
  3 |   var data;
  4 |   var _base;
  5 |   if (!(_base = String.prototype).lpad)
  6 |     _base.lpad = function (padding, toLength) {
  7 |       return padding.repeat((toLength - this.length) / padding.length).concat(this);
  8 |     };
  9 | 
 10 |   function formatElapsed(value) {
 11 |     var str = parseFloat(value).toFixed(2);
 12 |     if (value > 60) {
 13 |       var minutes = Math.floor(value / 60);
 14 |       var comps = (value % 60).toFixed(2).split('.');
 15 |       var seconds = comps[0].lpad('0', 2);
 16 |       var ms = comps[1];
 17 |       str = minutes + ":" + seconds + "." + ms;
 18 |     }
 19 |     return str;
 20 |   }
 21 | 
 22 |   function getElapsedClassName(elapsed) {
 23 |     var className = 'Query elapsed';
 24 |     if (elapsed >= 10.0) {
 25 |       className += ' warn_long';
 26 |     }
 27 |     else if (elapsed >= 1.0) {
 28 |       className += ' warn';
 29 |     }
 30 |     else {
 31 |       className += ' short';
 32 |     }
 33 |     return className;
 34 |   }
 35 | 
 36 |   function countClassName(queries) {
 37 |     var countClassName = "label";
 38 |     if (queries >= 20) {
 39 |       countClassName += " label-important";
 40 |     }
 41 |     else if (queries >= 10) {
 42 |       countClassName += " label-warning";
 43 |     }
 44 |     else {
 45 |       countClassName += " label-success";
 46 |     }
 47 |     return countClassName;
 48 |   }
 49 | 
 50 |   function updateQuery(object) {
 51 |     if (!object) {
 52 |       object = {};
 53 |     }
 54 |     var elapsed = Math.random() * 15;
 55 |     object.elapsed = elapsed;
 56 |     object.formatElapsed = formatElapsed(elapsed);
 57 |     object.elapsedClassName = getElapsedClassName(elapsed);
 58 |     object.query = "SELECT blah FROM something";
 59 |     object.waiting = Math.random() < 0.5;
 60 |     if (Math.random() < 0.2) {
 61 |       object.query = "<IDLE> in transaction";
 62 |     }
 63 |     if (Math.random() < 0.1) {
 64 |       object.query = "vacuum";
 65 |     }
 66 |     return object;
 67 |   }
 68 | 
 69 |   function cleanQuery(value) {
 70 |     if (value) {
 71 |       value.formatElapsed = "";
 72 |       value.elapsedClassName = "";
 73 |       value.query = "";
 74 |       value.elapsed = null;
 75 |       value.waiting = null;
 76 |     } else {
 77 |       return {
 78 |         query: "***",
 79 |         formatElapsed: "",
 80 |         elapsedClassName: ""
 81 |       };
 82 |     }
 83 |   }
 84 | 
 85 |   function generateRow(object, keepIdentity, counter) {
 86 |     var nbQueries = Math.floor((Math.random() * 10) + 1);
 87 |     if (!object) {
 88 |       object = {};
 89 |     }
 90 |     object.lastMutationId = counter;
 91 |     object.nbQueries = nbQueries;
 92 |     if (!object.lastSample) {
 93 |       object.lastSample = {};
 94 |     }
 95 |     if (!object.lastSample.topFiveQueries) {
 96 |       object.lastSample.topFiveQueries = [];
 97 |     }
 98 |     if (keepIdentity) {
 99 |       // for Angular optimization
100 |       if (!object.lastSample.queries) {
101 |         object.lastSample.queries = [];
102 |         for (var l = 0; l < 12; l++) {
103 |           object.lastSample.queries[l] = cleanQuery();
104 |         }
105 |       }
106 |       for (var j in object.lastSample.queries) {
107 |         var value = object.lastSample.queries[j];
108 |         if (j <= nbQueries) {
109 |           updateQuery(value);
110 |         } else {
111 |           cleanQuery(value);
112 |         }
113 |       }
114 |     } else {
115 |       object.lastSample.queries = [];
116 |       for (var j = 0; j < 12; j++) {
117 |         if (j < nbQueries) {
118 |           var value = updateQuery(cleanQuery());
119 |           object.lastSample.queries.push(value);
120 |         } else {
121 |           object.lastSample.queries.push(cleanQuery());
122 |         }
123 |       }
124 |     }
125 |     for (var i = 0; i < 5; i++) {
126 |       var source = object.lastSample.queries[i];
127 |       object.lastSample.topFiveQueries[i] = source;
128 |     }
129 |     object.lastSample.nbQueries = nbQueries;
130 |     object.lastSample.countClassName = countClassName(nbQueries);
131 |     return object;
132 |   }
133 | 
134 |   function getData(keepIdentity) {
135 |     var oldData = data;
136 |     if (!keepIdentity) { // reset for each tick when !keepIdentity
137 |       data = [];
138 |       for (var i = 1; i <= ENV.rows; i++) {
139 |         data.push({ dbname: 'cluster' + i, query: "", formatElapsed: "", elapsedClassName: "" });
140 |         data.push({ dbname: 'cluster' + i + ' slave', query: "", formatElapsed: "", elapsedClassName: "" });
141 |       }
142 |     }
143 |     if (!data) { // first init when keepIdentity
144 |       data = [];
145 |       for (var i = 1; i <= ENV.rows; i++) {
146 |         data.push({ dbname: 'cluster' + i });
147 |         data.push({ dbname: 'cluster' + i + ' slave' });
148 |       }
149 |       oldData = data;
150 |     }
151 |     for (var i in data) {
152 |       var row = data[i];
153 |       if (!keepIdentity && oldData && oldData[i]) {
154 |         row.lastSample = oldData[i].lastSample;
155 |       }
156 |       if (!row.lastSample || Math.random() < ENV.mutations()) {
157 |         counter = counter + 1;
158 |         if (!keepIdentity) {
159 |           row.lastSample = null;
160 |         }
161 |         generateRow(row, keepIdentity, counter);
162 |       } else {
163 |         data[i] = oldData[i];
164 |       }
165 |     }
166 |     return {
167 |       toArray: function () {
168 |         return data;
169 |       }
170 |     };
171 |   }
172 | 
173 |   var mutationsValue = 0.5;
174 | 
175 |   function mutations(value) {
176 |     if (value) {
177 |       mutationsValue = value;
178 |       return mutationsValue;
179 |     } else {
180 |       return mutationsValue;
181 |     }
182 |   }
183 | 
184 |   var body = document.querySelector('body');
185 |   var theFirstChild = body.firstChild;
186 | 
187 |   var sliderContainer = document.createElement('div');
188 |   sliderContainer.style.cssText = "display: flex";
189 |   var slider = document.createElement('input');
190 |   var text = document.createElement('label');
191 |   text.innerHTML = 'mutations : ' + (mutationsValue * 100).toFixed(0) + '%';
192 |   text.id = "ratioval";
193 |   slider.setAttribute("type", "range");
194 |   slider.style.cssText = 'margin-bottom: 10px; margin-top: 5px';
195 |   slider.addEventListener('change', function (e) {
196 |     ENV.mutations(e.target.value / 100);
197 |     document.querySelector('#ratioval').innerHTML = 'mutations : ' + (ENV.mutations() * 100).toFixed(0) + '%';
198 |   });
199 |   sliderContainer.appendChild(text);
200 |   sliderContainer.appendChild(slider);
201 |   body.insertBefore(sliderContainer, theFirstChild);
202 | 
203 |   return {
204 |     generateData: getData,
205 |     rows: 50,
206 |     timeout: 0,
207 |     mutations: mutations
208 |   };
209 | }();


--------------------------------------------------------------------------------
/esm/index.js:
--------------------------------------------------------------------------------
  1 | import '@ungap/custom-elements';
  2 | import Lie from '@webreflection/lie';
  3 | import {get, has, ref, slot} from 'uce-helpers';
  4 | 
  5 | import {
  6 |   hooked,
  7 |   useState, useRef,
  8 |   useContext, createContext,
  9 |   useCallback, useMemo, useReducer,
 10 |   useEffect, useLayoutEffect,
 11 |   hasEffect, dropEffect
 12 | } from 'uhooks';
 13 | 
 14 | import {define, render, html, svg, css} from 'uce';
 15 | 
 16 | import stateHandler from 'reactive-props';
 17 | const domHandler = stateHandler({dom: true, useState});
 18 | 
 19 | import QSAO from 'qsa-observer';
 20 | const query = [];
 21 | const {drop, parse: parseQSAO} = QSAO({
 22 |   query,
 23 |   handle(element, _, selector) {
 24 |     drop([element]);
 25 |     if (toBeDefined.has(selector)) {
 26 |       const define = toBeDefined.get(selector);
 27 |       toBeDefined.delete(selector);
 28 |       query.splice(query.indexOf(selector), 1);
 29 |       define();
 30 |     }
 31 |   }
 32 | });
 33 | 
 34 | import {asCJS, cache, loader, waiting} from 'uce-require';
 35 | 
 36 | // Note: rollup breaks es.js if this is imported on top
 37 | import createContent from '@ungap/create-content';
 38 | 
 39 | import partial from './partial.js';
 40 | 
 41 | export const resolve = (name, module) => {
 42 |   if (name in cache && cache[name] !== waiting)
 43 |     console.warn('duplicated ' + name);
 44 |   cache[name] = module;
 45 | };
 46 | 
 47 | export const parse = parts => {
 48 |   const template = new Template;
 49 |   template.innerHTML = parts;
 50 |   return template;
 51 | };
 52 | 
 53 | const toBeDefined = new Map;
 54 | const wrapSetup = [
 55 |   'module.exports=function(module,exports){"use strict";',
 56 |   '}'
 57 | ];
 58 | 
 59 | const noop = () => {};
 60 | 
 61 | const badTemplate = () => {
 62 |   throw new Error('bad template');
 63 | };
 64 | 
 65 | 
 66 | const lazySetup = (fn, self, props, exports) => {
 67 |   const module = {exports};
 68 |   fn.call(self, module, exports);
 69 |   const result = module.exports;
 70 |   const out = result.default || result;
 71 |   if (props)
 72 |     domHandler(self, out.props);
 73 |   return out;
 74 | };
 75 | 
 76 | // preloaded imports
 77 | const virtualNameSpace = {
 78 |   define, render, html, svg, css,
 79 |   reactive: stateHandler({useState}),
 80 |   ref, slot
 81 | };
 82 | 
 83 | // deprecated? namespace
 84 | resolve('@uce/reactive', virtualNameSpace.reactive);
 85 | resolve('@uce/slot', virtualNameSpace.slot);
 86 | 
 87 | // virtual namespace
 88 | resolve('@uce', virtualNameSpace);
 89 | resolve('uce', virtualNameSpace);
 90 | 
 91 | // extra/useful modules
 92 | const hooks = {
 93 |   augmentor: hooked,
 94 |   hooked,
 95 |   useState, useRef,
 96 |   useContext, createContext,
 97 |   useCallback, useMemo, useReducer,
 98 |   useEffect, useLayoutEffect
 99 | };
100 | resolve('augmentor', hooks);
101 | resolve('uhooks', hooks);
102 | resolve('qsa-observer', QSAO);
103 | resolve('reactive-props', stateHandler);
104 | resolve('@webreflection/lie', Lie);
105 | 
106 | // <template is="uce-template" />
107 | const Template = define(
108 |   'uce-template',
109 |   {extends: 'template', props: null, init}
110 | );
111 | 
112 | Template.resolve = resolve;
113 | Template.from = parse;
114 | 
115 | function init(tried) {
116 |   const defineComponent = $ => {
117 |     const params = partial(
118 |       template.replace(/(<!--(\{\{)|(\}\})-->)/g, '$2$3')
119 |     );
120 |     const component = script && loader(isSetup ? wrapSetup.join($) : $) || {};
121 |     const {observedAttributes, props, setup} = component;
122 |     const hasTemplate = !!template.trim();
123 |     const apply = isSetup || hasTemplate || !!setup;
124 |     const hooks = new WeakMap;
125 |     const definition = {
126 |       props: null,
127 |       extends: as ? name : 'element',
128 |       init() {
129 |         const self = this;
130 |         const {html} = self;
131 |         let init = true;
132 |         let update = noop;
133 |         const render = hooked(() => {
134 |           if (init) {
135 |             init = !init;
136 |             if (apply) {
137 |               self.render = render;
138 |               if (props)
139 |                 domHandler(self, props);
140 |               const values = isSetup ?
141 |                               lazySetup(component, self, isProps, {}) :
142 |                               (setup && component.setup(self));
143 |               if (hasTemplate) {
144 |                 const args = params.bind(self, values || {});
145 |                 update = () => {
146 |                   html.apply(self, args());
147 |                 };
148 |               }
149 |             }
150 |           }
151 |           update();
152 |         });
153 |         render();
154 |         if (hasEffect(render))
155 |           hooks.set(self, render);
156 |       }
157 |     };
158 |     if (css)
159 |       definition.style = () => css;
160 |     if (shadow)
161 |       definition.attachShadow = {mode: shadow};
162 |     if (observedAttributes) {
163 |       definition.observedAttributes = observedAttributes;
164 |       const aC = definition.attributeChanged = function () {
165 |         const {attributeChanged} = this;
166 |         if (attributeChanged !== aC)
167 |           attributeChanged.apply(this, arguments);
168 |       };
169 |     }
170 |     if (script) {
171 |       const c = definition.connected = function () {
172 |         const {connected} = this;
173 |         if (connected !== c)
174 |           connected.call(this);
175 |       };
176 |       const d = definition.disconnected = function () {
177 |         const {disconnected} = this;
178 |         if (hooks.has(this))
179 |           dropEffect(hooks.get(this));
180 |         if (disconnected !== d)
181 |           disconnected.call(this);
182 |       };
183 |     }
184 |     for (const key in component) {
185 |       if (!(key in definition))
186 |         definition[key] = component[key];
187 |     }
188 |     define(as || name, definition);
189 |   };
190 | 
191 |   const {content, ownerDocument, parentNode} = this;
192 |   const {childNodes} = content || createContent(this.innerHTML);
193 |   const styles = [];
194 | 
195 |   // drop this element in IE11before its content is live
196 |   if (parentNode && this instanceof HTMLUnknownElement)
197 |     parentNode.removeChild(this);
198 | 
199 |   let later = defineComponent;
200 |   let isSetup = false;
201 |   let isProps = false;
202 |   let as = '';
203 |   let css = '';
204 |   let name = '';
205 |   let script = '';
206 |   let shadow = '';
207 |   let template = '';
208 |   for (let i = 0; i < childNodes.length; i++) {
209 |     const child = childNodes[i];
210 |     if (child.nodeType === 1) {
211 |       const {tagName} = child;
212 |       const is = has(child, 'is');
213 |       if (/^style$/i.test(tagName))
214 |         styles.push(child);
215 |       else if (is || /-/i.test(tagName)) {
216 |         if (name)
217 |           badTemplate();
218 |         name = tagName.toLowerCase();
219 |         template = child.innerHTML;
220 |         if (is)
221 |           as = get(child, 'is').toLowerCase();
222 |         if (has(child, 'shadow'))
223 |           shadow = get(child, 'shadow') || 'open';
224 |       }
225 |       else if (/^script$/i.test(tagName)) {
226 |         if (script)
227 |           badTemplate();
228 |         isSetup = has(child, 'setup');
229 |         isProps = isSetup && get(child, 'setup') === 'props';
230 |         script = child.textContent;
231 |         later = () => {
232 |           asCJS(script, true).then(defineComponent);
233 |         };
234 |       }
235 |     }
236 |   }
237 |   const selector = as ? (name + '[is="' + as + '"]') : name;
238 |   if (!selector)
239 |     return setTimeout(tried ? badTemplate : init.bind(this), 0, true);
240 |   for (let i = styles.length; i--;) {
241 |     const child = styles[i];
242 |     const {textContent} = child;
243 |     if (has(child, 'shadow'))
244 |       template = '<style>' + textContent + '</style>' + template;
245 |     else if (has(child, 'scoped')) {
246 |       const def = [];
247 |       css += textContent.replace(
248 |               /\{([^}]+?)\}/g,
249 |               (_, $1) => '\x01' + def.push($1) + ','
250 |             )
251 |             .split(',')
252 |             .map(s => (s.trim() ? (selector + ' ' + s.trim()) : ''))
253 |             .join(',\n')
254 |             .replace(/\x01(\d+),/g, (_, $1) => '{' + def[--$1] + '}')
255 |             .replace(/(,\n)+/g, ',\n');
256 |     }
257 |     else
258 |       css += textContent;
259 |   }
260 |   if (has(this, 'lazy')) {
261 |     toBeDefined.set(selector, later);
262 |     query.push(selector);
263 |     parseQSAO(ownerDocument.querySelectorAll(query));
264 |   }
265 |   else
266 |     later();
267 | }
268 | 


--------------------------------------------------------------------------------
/cjs/index.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | require('@ungap/custom-elements');
  3 | const Lie = (m => /* c8 ignore start */ m.__esModule ? m.default : m /* c8 ignore stop */)(require('@webreflection/lie'));
  4 | const {get, has, ref, slot} = require('uce-helpers');
  5 | 
  6 | const {
  7 |   hooked,
  8 |   useState,
  9 |   useRef,
 10 |   useContext,
 11 |   createContext,
 12 |   useCallback,
 13 |   useMemo,
 14 |   useReducer,
 15 |   useEffect,
 16 |   useLayoutEffect,
 17 |   hasEffect,
 18 |   dropEffect
 19 | } = require('uhooks');
 20 | 
 21 | const {define, render, html, svg, css} = require('uce');
 22 | 
 23 | const stateHandler = (m => /* c8 ignore start */ m.__esModule ? m.default : m /* c8 ignore stop */)(require('reactive-props'));
 24 | const domHandler = stateHandler({dom: true, useState});
 25 | 
 26 | const QSAO = (m => /* c8 ignore start */ m.__esModule ? m.default : m /* c8 ignore stop */)(require('qsa-observer'));
 27 | const query = [];
 28 | const {drop, parse: parseQSAO} = QSAO({
 29 |   query,
 30 |   handle(element, _, selector) {
 31 |     drop([element]);
 32 |     if (toBeDefined.has(selector)) {
 33 |       const define = toBeDefined.get(selector);
 34 |       toBeDefined.delete(selector);
 35 |       query.splice(query.indexOf(selector), 1);
 36 |       define();
 37 |     }
 38 |   }
 39 | });
 40 | 
 41 | const {asCJS, cache, loader, waiting} = require('uce-require');
 42 | 
 43 | // Note: rollup breaks es.js if this is imported on top
 44 | const createContent = (m => /* c8 ignore start */ m.__esModule ? m.default : m /* c8 ignore stop */)(require('@ungap/create-content'));
 45 | 
 46 | const partial = (m => /* c8 ignore start */ m.__esModule ? m.default : m /* c8 ignore stop */)(require('./partial.js'));
 47 | 
 48 | const resolve = (name, module) => {
 49 |   if (name in cache && cache[name] !== waiting)
 50 |     console.warn('duplicated ' + name);
 51 |   cache[name] = module;
 52 | };
 53 | exports.resolve = resolve;
 54 | 
 55 | const parse = parts => {
 56 |   const template = new Template;
 57 |   template.innerHTML = parts;
 58 |   return template;
 59 | };
 60 | exports.parse = parse;
 61 | 
 62 | const toBeDefined = new Map;
 63 | const wrapSetup = [
 64 |   'module.exports=function(module,exports){"use strict";',
 65 |   '}'
 66 | ];
 67 | 
 68 | const noop = () => {};
 69 | 
 70 | const badTemplate = () => {
 71 |   throw new Error('bad template');
 72 | };
 73 | 
 74 | 
 75 | const lazySetup = (fn, self, props, exports) => {
 76 |   const module = {exports};
 77 |   fn.call(self, module, exports);
 78 |   const result = module.exports;
 79 |   const out = result.default || result;
 80 |   if (props)
 81 |     domHandler(self, out.props);
 82 |   return out;
 83 | };
 84 | 
 85 | // preloaded imports
 86 | const virtualNameSpace = {
 87 |   define, render, html, svg, css,
 88 |   reactive: stateHandler({useState}),
 89 |   ref, slot
 90 | };
 91 | 
 92 | // deprecated? namespace
 93 | resolve('@uce/reactive', virtualNameSpace.reactive);
 94 | resolve('@uce/slot', virtualNameSpace.slot);
 95 | 
 96 | // virtual namespace
 97 | resolve('@uce', virtualNameSpace);
 98 | resolve('uce', virtualNameSpace);
 99 | 
100 | // extra/useful modules
101 | const hooks = {
102 |   augmentor: hooked,
103 |   hooked,
104 |   useState, useRef,
105 |   useContext, createContext,
106 |   useCallback, useMemo, useReducer,
107 |   useEffect, useLayoutEffect
108 | };
109 | resolve('augmentor', hooks);
110 | resolve('uhooks', hooks);
111 | resolve('qsa-observer', QSAO);
112 | resolve('reactive-props', stateHandler);
113 | resolve('@webreflection/lie', Lie);
114 | 
115 | // <template is="uce-template" />
116 | const Template = define(
117 |   'uce-template',
118 |   {extends: 'template', props: null, init}
119 | );
120 | 
121 | Template.resolve = resolve;
122 | Template.from = parse;
123 | 
124 | function init(tried) {
125 |   const defineComponent = $ => {
126 |     const params = partial(
127 |       template.replace(/(<!--(\{\{)|(\}\})-->)/g, '$2$3')
128 |     );
129 |     const component = script && loader(isSetup ? wrapSetup.join($) : $) || {};
130 |     const {observedAttributes, props, setup} = component;
131 |     const hasTemplate = !!template.trim();
132 |     const apply = isSetup || hasTemplate || !!setup;
133 |     const hooks = new WeakMap;
134 |     const definition = {
135 |       props: null,
136 |       extends: as ? name : 'element',
137 |       init() {
138 |         const self = this;
139 |         const {html} = self;
140 |         let init = true;
141 |         let update = noop;
142 |         const render = hooked(() => {
143 |           if (init) {
144 |             init = !init;
145 |             if (apply) {
146 |               self.render = render;
147 |               if (props)
148 |                 domHandler(self, props);
149 |               const values = isSetup ?
150 |                               lazySetup(component, self, isProps, {}) :
151 |                               (setup && component.setup(self));
152 |               if (hasTemplate) {
153 |                 const args = params.bind(self, values || {});
154 |                 update = () => {
155 |                   html.apply(self, args());
156 |                 };
157 |               }
158 |             }
159 |           }
160 |           update();
161 |         });
162 |         render();
163 |         if (hasEffect(render))
164 |           hooks.set(self, render);
165 |       }
166 |     };
167 |     if (css)
168 |       definition.style = () => css;
169 |     if (shadow)
170 |       definition.attachShadow = {mode: shadow};
171 |     if (observedAttributes) {
172 |       definition.observedAttributes = observedAttributes;
173 |       const aC = definition.attributeChanged = function () {
174 |         const {attributeChanged} = this;
175 |         if (attributeChanged !== aC)
176 |           attributeChanged.apply(this, arguments);
177 |       };
178 |     }
179 |     if (script) {
180 |       const c = definition.connected = function () {
181 |         const {connected} = this;
182 |         if (connected !== c)
183 |           connected.call(this);
184 |       };
185 |       const d = definition.disconnected = function () {
186 |         const {disconnected} = this;
187 |         if (hooks.has(this))
188 |           dropEffect(hooks.get(this));
189 |         if (disconnected !== d)
190 |           disconnected.call(this);
191 |       };
192 |     }
193 |     for (const key in component) {
194 |       if (!(key in definition))
195 |         definition[key] = component[key];
196 |     }
197 |     define(as || name, definition);
198 |   };
199 | 
200 |   const {content, ownerDocument, parentNode} = this;
201 |   const {childNodes} = content || createContent(this.innerHTML);
202 |   const styles = [];
203 | 
204 |   // drop this element in IE11before its content is live
205 |   if (parentNode && this instanceof HTMLUnknownElement)
206 |     parentNode.removeChild(this);
207 | 
208 |   let later = defineComponent;
209 |   let isSetup = false;
210 |   let isProps = false;
211 |   let as = '';
212 |   let css = '';
213 |   let name = '';
214 |   let script = '';
215 |   let shadow = '';
216 |   let template = '';
217 |   for (let i = 0; i < childNodes.length; i++) {
218 |     const child = childNodes[i];
219 |     if (child.nodeType === 1) {
220 |       const {tagName} = child;
221 |       const is = has(child, 'is');
222 |       if (/^style$/i.test(tagName))
223 |         styles.push(child);
224 |       else if (is || /-/i.test(tagName)) {
225 |         if (name)
226 |           badTemplate();
227 |         name = tagName.toLowerCase();
228 |         template = child.innerHTML;
229 |         if (is)
230 |           as = get(child, 'is').toLowerCase();
231 |         if (has(child, 'shadow'))
232 |           shadow = get(child, 'shadow') || 'open';
233 |       }
234 |       else if (/^script$/i.test(tagName)) {
235 |         if (script)
236 |           badTemplate();
237 |         isSetup = has(child, 'setup');
238 |         isProps = isSetup && get(child, 'setup') === 'props';
239 |         script = child.textContent;
240 |         later = () => {
241 |           asCJS(script, true).then(defineComponent);
242 |         };
243 |       }
244 |     }
245 |   }
246 |   const selector = as ? (name + '[is="' + as + '"]') : name;
247 |   if (!selector)
248 |     return setTimeout(tried ? badTemplate : init.bind(this), 0, true);
249 |   for (let i = styles.length; i--;) {
250 |     const child = styles[i];
251 |     const {textContent} = child;
252 |     if (has(child, 'shadow'))
253 |       template = '<style>' + textContent + '</style>' + template;
254 |     else if (has(child, 'scoped')) {
255 |       const def = [];
256 |       css += textContent.replace(
257 |               /\{([^}]+?)\}/g,
258 |               (_, $1) => '\x01' + def.push($1) + ','
259 |             )
260 |             .split(',')
261 |             .map(s => (s.trim() ? (selector + ' ' + s.trim()) : ''))
262 |             .join(',\n')
263 |             .replace(/\x01(\d+),/g, (_, $1) => '{' + def[--$1] + '}')
264 |             .replace(/(,\n)+/g, ',\n');
265 |     }
266 |     else
267 |       css += textContent;
268 |   }
269 |   if (has(this, 'lazy')) {
270 |     toBeDefined.set(selector, later);
271 |     query.push(selector);
272 |     parseQSAO(ownerDocument.querySelectorAll(query));
273 |   }
274 |   else
275 |     later();
276 | }
277 | 


--------------------------------------------------------------------------------
/es.js:
--------------------------------------------------------------------------------
1 | !function(e){"use strict";var t=Promise;const n=(e,t)=>n=>[].reduce.call(n.querySelectorAll("["+e+"]"),((r,o)=>{let{parentNode:l}=o;do{if(l===n){const n=s(o,e);r[n]=t?[].concat(r[n]||[],o):o;break}if(/-/.test(l.tagName)||s(l,"is"))break}while(l=l.parentNode);return r}),{}),s=(e,t)=>e.getAttribute(t),r=(e,t)=>e.hasAttribute(t),o=n("ref",!1),l=n("slot",!0);let c=null,a=new Set;const i=e=>{const{$:t,r:n,h:s}=e;m(n)&&(h.get(s).delete(e),n()),m(e.r=t())&&h.get(s).add(e)},u=()=>{const e=a;a=new Set,e.forEach((({h:e,c:t,a:n,e:s})=>{s&&e.apply(t,n)}))},h=new WeakMap,d=[],p=[];function f(e,t){return e!==this[t]}const g=()=>c,m=e=>"function"==typeof e,b=e=>{const t={h:n,c:null,a:null,e:0,i:0,s:[]};return n;function n(){const n=c;c=t,t.e=t.i=0;try{return e.apply(t.c=this,t.a=arguments)}finally{c=n,d.length&&w.then(d.forEach.bind(d.splice(0),i)),p.length&&p.splice(0).forEach(i)}}},w=new t((e=>e()));function y(e){const{_:t,value:n}=this;n!==e&&(this._=new Set,this.value=e,t.forEach((({h:e,c:t,a:n})=>{e.apply(t,n)})))}const v=(e,t)=>{const n=g(),{i:s,s:r}=n;return s!==r.length&&t&&!t.some(f,r[s]._)||(r[s]={$:e(),_:t}),r[n.i++].$},x=e=>(t,n)=>{const s=g(),{i:r,s:o,h:l}=s,c=r===o.length;s.i++,c&&(h.has(l)||h.set(l,new Set),o[r]={$:t,_:n,r:null,h:l}),(c||!n||n.some(f,o[r]._))&&e.push(o[r]),o[r].$=t,o[r]._=n},$=x(d),C=x(p),k=(e,t)=>m(t)?t(e):t,S=(e,t,n)=>{const s=g(),{i:r,s:o}=s;r===o.length&&o.push({$:m(n)?n(t):k(void 0,t),set:t=>{o[r].$=e(o[r].$,t),(e=>{a.has(e)||(e.e=1,a.add(e),w.then(u))})(s)}});const{$:l,set:c}=o[s.i++];return[l,c]},E=e=>S(k,e);var N=e=>({get:t=>e.get(t),set:(t,n)=>(e.set(t,n),n)});const A=/([^\s\\>"'=]+)\s*=\s*(['"]?)$/,M=/^(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr)$/i,O=/<[a-z][^>]+$/i,L=/>[^<>]*$/,T=/<([a-z]+[a-z0-9:._-]*)([^>]*?)(\/>)/gi,j=/\s+$/,q=(e,t)=>0<t--&&(O.test(e[t])||!L.test(e[t])&&q(e,t)),_=(e,t,n)=>M.test(t)?e:`<${t}${n.replace(j,"")}></${t}>`;const{isArray:W}=Array,{indexOf:H,slice:P}=[],R=(e,t)=>111===e.nodeType?1/t<0?t?(({firstChild:e,lastChild:t})=>{const n=document.createRange();return n.setStartAfter(e),n.setEndAfter(t),n.deleteContents(),e})(e):e.lastChild:t?e.valueOf():e.firstChild:e;const z=(e,t)=>{let n,s=t.slice(2);return!(t in e)&&t.toLowerCase()in e&&(s=s.toLowerCase()),t=>{const r=W(t)?t:[t,!1];n!==r[0]&&(n&&e.removeEventListener(s,n,r[1]),(n=r[0])&&e.addEventListener(s,n,r[1]))}},B=e=>document.createElementNS("http://www.w3.org/1999/xhtml",e),D=(e,t)=>("svg"===t?J:F)(e),F=e=>{const t=B("template");return t.innerHTML=e,t.content},J=e=>{const{content:t}=B("template"),n=B("div");n.innerHTML='<svg xmlns="http://www.w3.org/2000/svg">'+e+"</svg>";const{childNodes:s}=n.firstChild;let{length:r}=s;for(;r--;)t.appendChild(s[0]);return t},U=({childNodes:e},t)=>e[t],X=e=>{const t=[];let{parentNode:n}=e;for(;n;)t.push(H.call(n.childNodes,e)),n=(e=n).parentNode;return t},{createTreeWalker:G,importNode:I}=document,K=1!=I.length,Q=K?(e,t,n)=>I.call(document,D(e,t),!0):D,V=K?e=>G.call(document,e,129,null,!1):e=>G.call(document,e,129),Y=(e,t,n)=>((e,t,n,s,r)=>{const o=n.length;let l=t.length,c=o,a=0,i=0,u=null;for(;a<l||i<c;)if(l===a){const t=c<o?i?s(n[i-1],-0).nextSibling:s(n[c-i],0):r;for(;i<c;)e.insertBefore(s(n[i++],1),t)}else if(c===i)for(;a<l;)u&&u.has(t[a])||e.removeChild(s(t[a],-1)),a++;else if(t[a]===n[i])a++,i++;else if(t[l-1]===n[c-1])l--,c--;else if(t[a]===n[c-1]&&n[i]===t[l-1]){const r=s(t[--l],-1).nextSibling;e.insertBefore(s(n[i++],1),s(t[a++],-1).nextSibling),e.insertBefore(s(n[--c],1),r),t[l]=n[c]}else{if(!u){u=new Map;let e=i;for(;e<c;)u.set(n[e],e++)}if(u.has(t[a])){const r=u.get(t[a]);if(i<r&&r<c){let o=a,h=1;for(;++o<l&&o<c&&u.get(t[o])===r+h;)h++;if(h>r-i){const o=s(t[a],0);for(;i<r;)e.insertBefore(s(n[i++],1),o)}else e.replaceChild(s(n[i++],1),s(t[a++],-1))}else a++}else e.removeChild(s(t[a++],-1))}return n})(e.parentNode,t,n,R,e),Z=(e,t)=>{switch(t[0]){case"?":return((e,t,n)=>s=>{n!==!!s&&((n=!!s)?e.setAttribute(t,""):e.removeAttribute(t))})(e,t.slice(1),!1);case".":return((e,t)=>"dataset"===t?(({dataset:e})=>t=>{for(const n in t){const s=t[n];null==s?delete e[n]:e[n]=s}})(e):n=>{e[t]=n})(e,t.slice(1));case"@":return z(e,"on"+t.slice(1));case"o":if("n"===t[1])return z(e,t)}switch(t){case"ref":return(e=>{let t;return n=>{t!==n&&(t=n,"function"==typeof n?n(e):n.current=e)}})(e);case"aria":return(e=>t=>{for(const n in t){const s="role"===n?n:`aria-${n}`,r=t[n];null==r?e.removeAttribute(s):e.setAttribute(s,r)}})(e)}return((e,t)=>{let n,s=!0;const r=document.createAttributeNS(null,t);return t=>{n!==t&&(n=t,null==n?s||(e.removeAttributeNode(r),s=!0):(r.value=t,s&&(e.setAttributeNodeNS(r),s=!1)))}})(e,t)};function ee(e){const{type:t,path:n}=e,s=n.reduceRight(U,this);return"node"===t?(e=>{let t,n,s=[];const r=o=>{switch(typeof o){case"string":case"number":case"boolean":t!==o&&(t=o,n||(n=document.createTextNode("")),n.data=o,s=Y(e,s,[n]));break;case"object":case"undefined":if(null==o){t!=o&&(t=o,s=Y(e,s,[]));break}if(W(o)){t=o,0===o.length?s=Y(e,s,[]):"object"==typeof o[0]?s=Y(e,s,o):r(String(o));break}t!==o&&"ELEMENT_NODE"in o&&(t=o,s=Y(e,s,11===o.nodeType?P.call(o.childNodes):[o]));break;case"function":r(o(e))}};return r})(s):"attr"===t?Z(s,e.name):(e=>{let t;return n=>{t!=n&&(t=n,e.textContent=null==n?"":n)}})(s)}const te="isµ",ne=N(new WeakMap),se=/^(?:plaintext|script|style|textarea|title|xmp)$/i,re=(e,t)=>{const n=((e,t,n)=>{const s=[],{length:r}=e;for(let n=1;n<r;n++){const r=e[n-1];s.push(A.test(r)&&q(e,n)?r.replace(A,((e,s,r)=>`${t}${n-1}=${r||'"'}${s}${r?"":'"'}`)):`${r}\x3c!--${t}${n-1}--\x3e`)}s.push(e[r-1]);const o=s.join("").trim();return n?o:o.replace(T,_)})(t,te,"svg"===e),s=Q(n,e),r=V(s),o=[],l=t.length-1;let c=0,a=`isµ${c}`;for(;c<l;){const e=r.nextNode();if(!e)throw`bad template: ${n}`;if(8===e.nodeType)e.data===a&&(o.push({type:"node",path:X(e)}),a="isµ"+ ++c);else{for(;e.hasAttribute(a);)o.push({type:"attr",path:X(e),name:e.getAttribute(a)}),e.removeAttribute(a),a="isµ"+ ++c;se.test(e.tagName)&&e.textContent.trim()===`\x3c!--${a}--\x3e`&&(e.textContent="",o.push({type:"text",path:X(e)}),a="isµ"+ ++c)}}return{content:s,nodes:o}},oe=(e,t)=>{const{content:n,nodes:s}=ne.get(t)||ne.set(t,re(e,t)),r=I.call(document,n,!0);return{content:r,updates:s.map(ee,r)}},le=(e,{type:t,template:n,values:s})=>{const{length:r}=s;ce(e,s,r);let{entry:o}=e;o&&o.template===n&&o.type===t||(e.entry=o=((e,t)=>{const{content:n,updates:s}=oe(e,t);return{type:e,template:t,content:n,updates:s,wire:null}})(t,n));const{content:l,updates:c,wire:a}=o;for(let e=0;e<r;e++)c[e](s[e]);return a||(o.wire=(e=>{const{childNodes:t}=e,{length:n}=t;if(n<2)return n?t[0]:e;const s=P.call(t,0);return{ELEMENT_NODE:1,nodeType:111,firstChild:s[0],lastChild:s[n-1],valueOf(){if(t.length!==n){let t=0;for(;t<n;)e.appendChild(s[t++])}return e}}})(l))},ce=({stack:e},t,n)=>{for(let s=0;s<n;s++){const n=t[s];n instanceof ae?t[s]=le(e[s]||(e[s]={stack:[],entry:null,wire:null}),n):W(n)?ce(e[s]||(e[s]={stack:[],entry:null,wire:null}),n,n.length):e[s]=null}n<e.length&&e.splice(n)};function ae(e,t,n){this.type=e,this.template=t,this.values=n}const{create:ie,defineProperties:ue}=Object,he=e=>{const t=N(new WeakMap);return ue(((t,...n)=>new ae(e,t,n)),{for:{value(n,s){const r=t.get(n)||t.set(n,ie(null));return r[s]||(r[s]=(t=>(n,...s)=>le(t,{type:e,template:n,values:s}))({stack:[],entry:null,wire:null}))}},node:{value:(t,...n)=>le({stack:[],entry:null,wire:null},{type:e,template:t,values:n}).valueOf()}})},de=N(new WeakMap),pe=(e,t)=>{const n="function"==typeof t?t():t,s=de.get(e)||de.set(e,{stack:[],entry:null,wire:null}),r=n instanceof ae?le(s,n):n;return r!==s.wire&&(s.wire=r,e.textContent="",e.appendChild(r.valueOf())),e},fe=he("html"),ge=he("svg");function me(e){for(var t=e[0],n=1,s=arguments.length;n<s;n++)t+=arguments[n]+e[n];return t}const{defineProperties:be,keys:we}=Object,ye=(e,t,n,s,r)=>({configurable:!0,get:()=>s,set(o){(e||o!==s||t&&"object"==typeof o&&o)&&(s=o,n?r.call(this,s):r.call(this))}}),ve=(e,t,n,s,r,o)=>{const l={},c=r!==xe,a=[n,s,c];for(let n=we(e),s=0;s<n.length;s++){const i=t(e,n[s]),u=c?r(i):[i,r];o&&(u[1]=o),l[n[s]]=ye.apply(null,a.concat(u))}return l},xe=()=>{};var $e=({all:e=!1,shallow:t=!0,useState:n=xe,getAttribute:s=((e,t)=>e.getAttribute(t))}={})=>(r,o,l)=>{const c=ve(o,((e,t)=>{let n=e[t],o=typeof n;return r.hasOwnProperty(t)?(n=r[t],delete r[t]):r.hasAttribute(t)&&(n=s(r,t),"number"==o?n=+n:"boolean"==o&&(n=!/^(?:false|0|)$/.test(n))),n}),e,t,n,l);return be(r,c)};const Ce=$e({dom:!0}),ke=customElements,{define:Se}=ke,{parse:Ee,stringify:Ne}=JSON,{create:Ae,defineProperties:Me,getOwnPropertyDescriptor:Oe,keys:Le}=Object,Te="element",je=new WeakMap,qe=N(new Map([[Te,{c:HTMLElement,e:Te}]])),_e=e=>document.createElement(e),We=e=>qe.get(e)||qe.set(e,{c:_e(e).constructor,e:e}),He=(e,t)=>{const{attachShadow:n,attributeChanged:s,bound:r,connected:o,disconnected:l,handleEvent:c,init:a,observedAttributes:i,props:u,render:h,style:d}=t,p=new WeakMap,f={},g={},m=[],b=Ae(null),w=(e,t,s)=>{if(!p.has(e)){p.set(e,0),Me(e,{html:{configurable:!0,value:Re.bind(n?e.attachShadow(n):e)}});for(let t=0;t<y;t++){const{type:n,options:s}=m[t];e.addEventListener(n,e,s)}if(r&&r.forEach(Pe,e),u){const t={};for(let e=Le(u),n=0;n<e.length;n++){const s=e[n],r=u[s];t[s]="object"==typeof r?Ee(Ne(r)):r}je.set(e,t),Ce(e,t,h)}(a||h)&&(a||h).call(e),t&&(e[t]=s)}};for(let e=Le(t),n=0,{length:s}=e;n<s;n++){const s=e[n];if(/^on./.test(s)&&!/Options$/.test(s)){const e=t[s+"Options"]||!1,n=s.toLowerCase();let r=n.slice(2);m.push({type:r,options:e}),b[r]=s,n!==s&&(r=n.slice(2,3)+s.slice(3),b[r]=s,m.push({type:r,options:e}))}switch(s){case"attachShadow":case"constructor":case"observedAttributes":case"style":break;default:g[s]=Oe(t,s)}}const{length:y}=m;if(y&&!c&&(g.handleEvent={value(e){this[b[e.type]](e)}}),null!==u)if(u)for(let e=Le(u),t=0;t<e.length;t++){const n=e[t];g[n]={get(){return w(this),je.get(this)[n]},set(e){w(this,n,e)}}}else g.props={get(){const e={};for(let{attributes:t}=this,{length:n}=t,s=0;s<n;s++){const{name:n,value:r}=t[s];e[n]=r}return e}};i&&(f.observedAttributes={value:i}),g.attributeChangedCallback={value(){w(this),s&&s.apply(this,arguments)}},g.connectedCallback={value(){w(this),o&&o.call(this)}},l&&(g.disconnectedCallback={value:l});const{c:v,e:x}=We(t.extends||Te);class $ extends v{}Me($,f),Me($.prototype,g);const C=[e,$];return x!==Te&&C.push({extends:x}),Se.apply(ke,C),qe.set(e,{c:$,e:x}),d&&(document.head.appendChild(_e("style")).textContent=d(x===Te?e:x+'[is="'+e+'"]')),$};function Pe(e){this[e]=this[e].bind(this)}function Re(){return pe(this,fe.apply(null,arguments))}ke.get("uce-lib")||ke.define("uce-lib",class extends We(Te).c{static get define(){return He}static get render(){return pe}static get html(){return fe}static get svg(){return ge}static get css(){return me}});const ze=(e,t)=>e[t];var Be=({all:e=!1,shallow:t=!0,useState:n=xe}={})=>(s,r)=>be({},ve(s,ze,e,t,n,r)),De=(e={})=>(e.dom?$e:Be)(e);const Fe=!0,Je=!1,Ue="querySelectorAll";function Xe(e){this.observe(e,{subtree:Fe,childList:Fe})}const Ge="querySelectorAll",{document:Ie,Element:Ke,MutationObserver:Qe,Set:Ve,WeakMap:Ye}=self,Ze=e=>Ge in e,{filter:et}=[];var tt=e=>{const t=new Ye,n=(n,s)=>{let o;if(s)for(let l,c=(e=>e.matches||e.webkitMatchesSelector||e.msMatchesSelector)(n),a=0,{length:i}=r;a<i;a++)c.call(n,l=r[a])&&(t.has(n)||t.set(n,new Ve),o=t.get(n),o.has(l)||(o.add(l),e.handle(n,s,l)));else t.has(n)&&(o=t.get(n),t.delete(n),o.forEach((t=>{e.handle(n,s,t)})))},s=(e,t=!0)=>{for(let s=0,{length:r}=e;s<r;s++)n(e[s],t)},{query:r}=e,o=e.root||Ie,l=((e,t,n)=>{const s=(t,n,r,o,l)=>{for(let c=0,{length:a}=t;c<a;c++){const a=t[c];(l||Ue in a)&&(o?n.has(a)||(n.add(a),r.delete(a),e(a,o)):r.has(a)||(r.add(a),n.delete(a),e(a,o)),l||s(a[Ue]("*"),n,r,o,Fe))}},r=new(n||MutationObserver)((e=>{for(let t=new Set,n=new Set,r=0,{length:o}=e;r<o;r++){const{addedNodes:o,removedNodes:l}=e[r];s(l,t,n,Je,Je),s(o,t,n,Fe,Je)}}));return r.add=Xe,r.add(t||document),r})(n,o,Qe),{attachShadow:c}=Ke.prototype;return c&&(Ke.prototype.attachShadow=function(e){const t=c.call(this,e);return l.add(t),t}),r.length&&s(o[Ge](r)),{drop:e=>{for(let n=0,{length:s}=e;n<s;n++)t.delete(e[n])},flush:()=>{const e=l.takeRecords();for(let t=0,{length:n}=e;t<n;t++)s(et.call(e[t].removedNodes,Ze),!1),s(et.call(e[t].addedNodes,Ze),!0)},observer:l,parse:s}};t.all||(t.all=e=>new t((t=>{const{length:n}=e;n||t();let s=0;for(;s<n;)e[s++].then(r);function r(){++s===n&&t()}s=0})));const{create:nt,defineProperty:st,keys:rt}=Object,ot=[],lt=e=>ct[e],ct=nt(null),at={},it=(e,n)=>{const s=[],r=[],o=e.replace(/(^|[\r\n])\s*import\s*((['|"])[^\3]+?\3)/g,((e,t,n)=>t+"require("+n+")")).replace(/(^|[\r\n])\s*import\s*([^\3]+?)(\s*from\s*)((['|"])[^\5]+?\5)/g,((e,t,n,s,r)=>t+"const "+n.replace(/\s+as\s+/g,":")+" = require("+r+")")).replace(/^\s*export\s+default(\s*)/gm,"exports.default =$1").replace(/(^|[\r\n])\s*export\s*\{([^}]+?)\}[^\n]*/g,((e,t,n)=>(n.trim().split(/\s*,\s*/).forEach((e=>{s.push(`exports.${e} = ${e};`)})),t))).replace(/(^|[\r\n])\s*export\s+(const|let|var|function)(\s+)(\w+)/g,((e,t,n,r,o)=>(s.push(`exports.${o} = ${o};`),t+n+r+o))).concat("\n",s.join("\n")).replace(/require\s*\(\s*(['"])([^\1]+?)\1\s*\)/g,((e,t,n)=>(r.push(n),e)));return n?(r.forEach((e=>{e in ct||ot.push(new t((t=>{let n=at;if(/^(?:[./]|https?:)/.test(e)){ct[e]=n;const s=new XMLHttpRequest;s.open("get",e,!0),s.send(null),s.onload=()=>{t(ct[e]=ut(s.responseText))}}else st(ct,e,{get:()=>n,set:e=>{t(n=e)}})})))})),new t((e=>{t.all(ot).then((()=>e(o)))}))):o},ut=(e=>{const t=rt(e||{}),n=t.map((t=>e[t])).concat(lt);return t.push("require"),e=>{const s={},r={exports:s},o=t.concat("module","exports",'"use strict;"\n'+it(e));Function.apply(null,o).apply(null,n.concat(r,s));const l=r.exports,c=rt(l);return 1===c.length&&"default"===c[0]?l.default:l}})();var ht=e=>{const t=[],n=[],{length:s}=e;let r=0,o=0,l=0;for(;r<s&&-1<(r=e.indexOf("{{",l))&&-1<(o=e.indexOf("}}",r+2));)t.push(e.slice(l,r)),n.push(e.slice(r+2,o)),l=o+2;t.push(e.slice(l));const c=[t],a=Function("return function(){with(arguments[0])return["+n+"]}")();return function(e){return c.concat(a.call(this,e))}};const dt=De({dom:!0,useState:E}),pt=[],{drop:ft,parse:gt}=tt({query:pt,handle(e,t,n){if(ft([e]),wt.has(n)){const e=wt.get(n);wt.delete(n),pt.splice(pt.indexOf(n),1),e()}}}),mt=(e,t)=>{e in ct&&ct[e]!==at&&console.warn("duplicated "+e),ct[e]=t},bt=e=>{const t=new kt;return t.innerHTML=e,t},wt=new Map,yt=['module.exports=function(module,exports){"use strict";',"}"],vt=()=>{},xt=()=>{throw new Error("bad template")},$t={define:He,render:pe,html:fe,svg:ge,css:me,reactive:De({useState:E}),ref:o,slot:l};mt("@uce/reactive",$t.reactive),mt("@uce/slot",$t.slot),mt("@uce",$t),mt("uce",$t);const Ct={augmentor:b,hooked:b,useState:E,useRef:e=>{const t=g(),{i:n,s:s}=t;return n===s.length&&s.push({current:e}),s[t.i++]},useContext:({_:e,value:t})=>(e.add(g()),t),createContext:e=>({_:new Set,provide:y,value:e}),useCallback:(e,t)=>v((()=>e),t),useMemo:v,useReducer:S,useEffect:$,useLayoutEffect:C};mt("augmentor",Ct),mt("uhooks",Ct),mt("qsa-observer",tt),mt("reactive-props",De),mt("@webreflection/lie",t);const kt=He("uce-template",{extends:"template",props:null,init:function e(t){const n=e=>{const t=ht(x.replace(/(<!--(\{\{)|(\}\})-->)/g,"$2$3")),n=y&&ut(d?yt.join(e):e)||{},{observedAttributes:s,props:r,setup:o}=n,l=!!x.trim(),c=d||l||!!o,a=new WeakMap,i={props:null,extends:f?m:"element",init(){const e=this,{html:s}=e;let i=!0,u=vt;const f=b((()=>{if(i&&(i=!i,c)){e.render=f,r&&dt(e,r);const c=d?((e,t,n,s)=>{const r={exports:s};e.call(t,r,s);const o=r.exports,l=o.default||o;return n&&dt(t,l.props),l})(n,e,p,{}):o&&n.setup(e);if(l){const n=t.bind(e,c||{});u=()=>{s.apply(e,n())}}}u()}));var g;f(),g=f,h.has(g)&&a.set(e,f)}};if(g&&(i.style=()=>g),v&&(i.attachShadow={mode:v}),s){i.observedAttributes=s;const e=i.attributeChanged=function(){const{attributeChanged:t}=this;t!==e&&t.apply(this,arguments)}}if(y){const e=i.connected=function(){const{connected:t}=this;t!==e&&t.call(this)},t=i.disconnected=function(){const{disconnected:e}=this;a.has(this)&&(e=>{const t=h.get(e);t&&w.then((()=>{t.forEach((e=>{e.r(),e.r=null})),t.clear()}))})(a.get(this)),e!==t&&e.call(this)}}for(const e in n)e in i||(i[e]=n[e]);He(f||m,i)},{content:o,ownerDocument:l,parentNode:c}=this,{childNodes:a}=o||D(this.innerHTML),i=[];c&&this instanceof HTMLUnknownElement&&c.removeChild(this);let u=n,d=!1,p=!1,f="",g="",m="",y="",v="",x="";for(let e=0;e<a.length;e++){const t=a[e];if(1===t.nodeType){const{tagName:e}=t,o=r(t,"is");/^style$/i.test(e)?i.push(t):o||/-/i.test(e)?(m&&xt(),m=e.toLowerCase(),x=t.innerHTML,o&&(f=s(t,"is").toLowerCase()),r(t,"shadow")&&(v=s(t,"shadow")||"open")):/^script$/i.test(e)&&(y&&xt(),d=r(t,"setup"),p=d&&"props"===s(t,"setup"),y=t.textContent,u=()=>{it(y,!0).then(n)})}}const $=f?m+'[is="'+f+'"]':m;if(!$)return setTimeout(t?xt:e.bind(this),0,!0);for(let e=i.length;e--;){const t=i[e],{textContent:n}=t;if(r(t,"shadow"))x="<style>"+n+"</style>"+x;else if(r(t,"scoped")){const e=[];g+=n.replace(/\{([^}]+?)\}/g,((t,n)=>"
"+e.push(n)+",")).split(",").map((e=>e.trim()?$+" "+e.trim():"")).join(",\n").replace(/\x01(\d+),/g,((t,n)=>"{"+e[--n]+"}")).replace(/(,\n)+/g,",\n")}else g+=n}r(this,"lazy")?(wt.set($,u),pt.push($),gt(l.querySelectorAll(pt))):u()}});kt.resolve=mt,kt.from=bt,e.parse=bt,e.resolve=mt}({});
2 | 


--------------------------------------------------------------------------------
/min.js:
--------------------------------------------------------------------------------
1 | !function(e){"use strict";
2 | /*! (c) Andrea Giammarchi @webreflection ISC */!function(){var e="function"==typeof Promise?Promise:function(e){var t,n=[],r=0;return e((function(e){t=e,r=1,n.splice(0).forEach(o)})),{then:o};function o(e){return r?setTimeout(e,0,t):n.push(e),this}},t=function(e,t){var n=function(e){for(var t=0,n=e.length;t<n;t++)r(e[t])},r=function(e){var t=e.target,n=e.attributeName,r=e.oldValue;t.attributeChangedCallback(n,r,t.getAttribute(n))};return function(o,a){var u=o.constructor.observedAttributes;return u&&e(a).then((function(){new t(n).observe(o,{attributes:!0,attributeOldValue:!0,attributeFilter:u});for(var e=0,a=u.length;e<a;e++)o.hasAttribute(u[e])&&r({target:o,attributeName:u[e],oldValue:null})})),o}},n=!0,r=!1,o="querySelectorAll";function a(e){this.observe(e,{subtree:n,childList:n})}var u="querySelectorAll",i=self,c=i.document,l=i.Element,s=i.MutationObserver,f=i.Set,h=i.WeakMap,d=function(e){return u in e},p=[].filter,v=function(e){var t=new h,i=function(n,r){var o;if(r)for(var a,u=function(e){return e.matches||e.webkitMatchesSelector||e.msMatchesSelector}(n),i=0,c=g.length;i<c;i++)u.call(n,a=g[i])&&(t.has(n)||t.set(n,new f),(o=t.get(n)).has(a)||(o.add(a),e.handle(n,r,a)));else t.has(n)&&(o=t.get(n),t.delete(n),o.forEach((function(t){e.handle(n,r,t)})))},v=function(e){for(var t=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],n=0,r=e.length;n<r;n++)i(e[n],t)},g=e.query,y=e.root||c,m=function(e,t,u){var i=function t(r,a,u,i,c){for(var l=0,s=r.length;l<s;l++){var f=r[l];(c||o in f)&&(i?a.has(f)||(a.add(f),u.delete(f),e(f,i)):u.has(f)||(u.add(f),a.delete(f),e(f,i)),c||t(f[o]("*"),a,u,i,n))}},c=new(u||MutationObserver)((function(e){for(var t=new Set,o=new Set,a=0,u=e.length;a<u;a++){var c=e[a],l=c.addedNodes,s=c.removedNodes;i(s,t,o,r,r),i(l,t,o,n,r)}}));return c.add=a,c.add(t||document),c}(i,y,s),b=l.prototype.attachShadow;return b&&(l.prototype.attachShadow=function(e){var t=b.call(this,e);return m.add(t),t}),g.length&&v(y[u](g)),{drop:function(e){for(var n=0,r=e.length;n<r;n++)t.delete(e[n])},flush:function(){for(var e=m.takeRecords(),t=0,n=e.length;t<n;t++)v(p.call(e[t].removedNodes,d),!1),v(p.call(e[t].addedNodes,d),!0)},observer:m,parse:v}},g=self,y=g.document,m=g.Map,b=g.MutationObserver,w=g.Object,E=g.Set,S=g.WeakMap,x=g.Element,O=g.HTMLElement,k=g.Node,C=g.Error,N=g.TypeError,A=g.Reflect,M=self.Promise||e,T=w.defineProperty,L=w.keys,j=w.getOwnPropertyNames,$=w.setPrototypeOf,_=!self.customElements,P=function(e){for(var t=L(e),n=[],r=t.length,o=0;o<r;o++)n[o]=e[t[o]],delete e[t[o]];return function(){for(var o=0;o<r;o++)e[t[o]]=n[o]}};if(_){var q=function(){var e=this.constructor;if(!R.has(e))throw new N("Illegal constructor");var t=R.get(e);if(F)return J(F,t);var n=H.call(y,t);return J($(n,e.prototype),t)},H=y.createElement,R=new m,D=new m,W=new m,I=new m,B=[],z=v({query:B,handle:function(e,t,n){var r=W.get(n);if(t&&!r.isPrototypeOf(e)){var o=P(e);F=$(e,r);try{new r.constructor}finally{F=null,o()}}var a="".concat(t?"":"dis","connectedCallback");a in r&&e[a]()}}).parse,F=null,V=function(t){if(!D.has(t)){var n,r=new e((function(e){n=e}));D.set(t,{$:r,_:n})}return D.get(t).$},J=t(V,b);T(self,"customElements",{configurable:!0,value:{define:function(e,t){if(I.has(e))throw new C('the name "'.concat(e,'" has already been used with this registry'));R.set(t,e),W.set(e,t.prototype),I.set(e,t),B.push(e),V(e).then((function(){z(y.querySelectorAll(e))})),D.get(e)._(t)},get:function(e){return I.get(e)},whenDefined:V}}),T(q.prototype=O.prototype,"constructor",{value:q}),T(self,"HTMLElement",{configurable:!0,value:q}),T(y,"createElement",{configurable:!0,value:function(e,t){var n=t&&t.is,r=n?I.get(n):I.get(e);return r?new r:H.call(y,e)}}),"isConnected"in k.prototype||T(k.prototype,"isConnected",{configurable:!0,get:function(){return!(this.ownerDocument.compareDocumentPosition(this)&this.DOCUMENT_POSITION_DISCONNECTED)}})}else try{var U=function e(){return self.Reflect.construct(HTMLLIElement,[],e)};U.prototype=HTMLLIElement.prototype;var X="extends-li";self.customElements.define("extends-li",U,{extends:"li"}),_=y.createElement("li",{is:X}).outerHTML.indexOf(X)<0;var G=self.customElements,K=G.get,Q=G.whenDefined;T(self.customElements,"whenDefined",{configurable:!0,value:function(e){var t=this;return Q.call(this,e).then((function(n){return n||K.call(t,e)}))}})}catch(e){_=!_}if(_){var Y=function(e){var t=ae.get(e);pe(t.querySelectorAll(this),e.isConnected)},Z=self.customElements,ee=x.prototype.attachShadow,te=y.createElement,ne=Z.define,re=Z.get,oe=(A||{construct:function(e){return e.call(this)}}).construct,ae=new S,ue=new E,ie=new m,ce=new m,le=new m,se=new m,fe=[],he=[],de=function(e){return se.get(e)||re.call(Z,e)},pe=v({query:he,handle:function(e,t,n){var r=le.get(n);if(t&&!r.isPrototypeOf(e)){var o=P(e);me=$(e,r);try{new r.constructor}finally{me=null,o()}}var a="".concat(t?"":"dis","connectedCallback");a in r&&e[a]()}}).parse,ve=v({query:fe,handle:function(e,t){ae.has(e)&&(t?ue.add(e):ue.delete(e),he.length&&Y.call(he,e))}}).parse,ge=function(e){if(!ce.has(e)){var t,n=new M((function(e){t=e}));ce.set(e,{$:n,_:t})}return ce.get(e).$},ye=t(ge,b),me=null;j(self).filter((function(e){return/^HTML/.test(e)})).forEach((function(e){var t=self[e];function n(){var e=this.constructor;if(!ie.has(e))throw new N("Illegal constructor");var n=ie.get(e),r=n.is,o=n.tag;if(r){if(me)return ye(me,r);var a=te.call(y,o);return a.setAttribute("is",r),ye($(a,e.prototype),r)}return oe.call(this,t,[],e)}T(n.prototype=t.prototype,"constructor",{value:n}),T(self,e,{value:n})})),T(y,"createElement",{configurable:!0,value:function(e,t){var n=t&&t.is;if(n){var r=se.get(n);if(r&&ie.get(r).tag===e)return new r}var o=te.call(y,e);return n&&o.setAttribute("is",n),o}}),ee&&(x.prototype.attachShadow=function(e){var t=ee.call(this,e);return ae.set(this,t),t}),T(Z,"get",{configurable:!0,value:de}),T(Z,"whenDefined",{configurable:!0,value:ge}),T(Z,"define",{configurable:!0,value:function(e,t,n){if(de(e))throw new C("'".concat(e,"' has already been defined as a custom element"));var r,o=n&&n.extends;ie.set(t,o?{is:e,tag:o}:{is:"",tag:e}),o?(r="".concat(o,'[is="').concat(e,'"]'),le.set(r,t.prototype),se.set(e,t),he.push(r)):(ne.apply(Z,arguments),fe.push(r=e)),ge(e).then((function(){o?(pe(y.querySelectorAll(r)),ue.forEach(Y,[r])):ve(y.querySelectorAll(r))})),ce.get(e)._(t)}})}}();var t="function"==typeof Promise?Promise:function(e){var t,n=[],r=0;return e((function(e){t=e,r=1,n.splice(0).forEach(o)})),{then:o};function o(e){return r?setTimeout(e,0,t):n.push(e),this}},n=function(e,t){return function(n){return[].reduce.call(n.querySelectorAll("["+e+"]"),(function(o,a){var u=a.parentNode;do{if(u===n){var i=r(a,e);o[i]=t?[].concat(o[i]||[],a):a;break}if(/-/.test(u.tagName)||r(u,"is"))break}while(u=u.parentNode);return o}),{})}},r=function(e,t){return e.getAttribute(t)},o=function(e,t){return e.hasAttribute(t)},a=n("ref",!1),u=n("slot",!0),i=null,c=new Set,l=function(e){var t=e.$,n=e.r,r=e.h;g(n)&&(f.get(r).delete(e),n()),g(e.r=t())&&f.get(r).add(e)},s=function(){var e=c;c=new Set,e.forEach((function(e){var t=e.h,n=e.c,r=e.a;e.e&&t.apply(n,r)}))},f=new WeakMap,h=[],d=[];function p(e,t){return e!==this[t]}var v=function(){return i},g=function(e){return"function"==typeof e},y=function(e){var t={h:n,c:null,a:null,e:0,i:0,s:[]};return n;function n(){var n=i;i=t,t.e=t.i=0;try{return e.apply(t.c=this,t.a=arguments)}finally{i=n,h.length&&m.then(h.forEach.bind(h.splice(0),l)),d.length&&d.splice(0).forEach(l)}}},m=new t((function(e){return e()}));function b(e){var t=this._;this.value!==e&&(this._=new Set,this.value=e,t.forEach((function(e){var t=e.h,n=e.c,r=e.a;t.apply(n,r)})))}var w=function(e,t){var n=v(),r=n.i,o=n.s;return r!==o.length&&t&&!t.some(p,o[r]._)||(o[r]={$:e(),_:t}),o[n.i++].$},E=function(e){return function(t,n){var r=v(),o=r.i,a=r.s,u=r.h,i=o===a.length;r.i++,i&&(f.has(u)||f.set(u,new Set),a[o]={$:t,_:n,r:null,h:u}),(i||!n||n.some(p,a[o]._))&&e.push(a[o]),a[o].$=t,a[o]._=n}},S=E(h),x=E(d),O=function(e,t){return g(t)?t(e):t},k=function(e,t,n){var r=v(),o=r.i,a=r.s;o===a.length&&a.push({$:g(n)?n(t):O(void 0,t),set:function(t){a[o].$=e(a[o].$,t),function(e){c.has(e)||(e.e=1,c.add(e),m.then(s))}(r)}});var u=a[r.i++];return[u.$,u.set]},C=function(e){return k(O,e)};function N(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function A(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function M(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&L(e,t)}function T(e){return(T=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function L(e,t){return(L=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function j(e,t){return!t||"object"!=typeof t&&"function"!=typeof t?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):t}function $(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var n,r=T(e);if(t){var o=T(this).constructor;n=Reflect.construct(r,arguments,o)}else n=r.apply(this,arguments);return j(this,n)}}var _=function(e){return{get:function(t){return e.get(t)},set:function(t,n){return e.set(t,n),n}}},P=/([^\s\\>"'=]+)\s*=\s*(['"]?)$/,q=/^(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr)$/i,H=/<[a-z][^>]+$/i,R=/>[^<>]*$/,D=/<([a-z]+[a-z0-9:._-]*)([^>]*?)(\/>)/gi,W=/\s+$/,I=function e(t,n){return 0<n--&&(H.test(t[n])||!R.test(t[n])&&e(t,n))},B=function(e,t,n){return q.test(t)?e:"<".concat(t).concat(n.replace(W,""),"></").concat(t,">")},z=function(e,t,n){for(var r=[],o=e.length,a=function(n){var o=e[n-1];r.push(P.test(o)&&I(e,n)?o.replace(P,(function(e,r,o){return"".concat(t).concat(n-1,"=").concat(o||'"').concat(r).concat(o?"":'"')})):"".concat(o,"\x3c!--").concat(t).concat(n-1,"--\x3e"))},u=1;u<o;u++)a(u);r.push(e[o-1]);var i=r.join("").trim();return n?i:i.replace(D,B)},F=Array.isArray,V=[],J=V.indexOf,U=V.slice,X=function(e,t){return 111===e.nodeType?1/t<0?t?function(e){var t=e.firstChild,n=e.lastChild,r=document.createRange();return r.setStartAfter(t),r.setEndAfter(n),r.deleteContents(),t}(e):e.lastChild:t?e.valueOf():e.firstChild:e},G=function(e,t){var n,r=t.slice(2);return!(t in e)&&t.toLowerCase()in e&&(r=r.toLowerCase()),function(t){var o=F(t)?t:[t,!1];n!==o[0]&&(n&&e.removeEventListener(r,n,o[1]),(n=o[0])&&e.addEventListener(r,n,o[1]))}},K=function(e){var t="fragment",n="template",r="content"in a(n)?function(e){var t=a(n);return t.innerHTML=e,t.content}:function(e){var r=a(t),u=a(n),i=null;if(/^[^\S]*?<(col(?:group)?|t(?:head|body|foot|r|d|h))/i.test(e)){var c=RegExp.$1;u.innerHTML="<table>"+e+"</table>",i=u.querySelectorAll(c)}else u.innerHTML=e,i=u.childNodes;return o(r,i),r};return function(e,t){return("svg"===t?u:r)(e)};function o(e,t){for(var n=t.length;n--;)e.appendChild(t[0])}function a(n){return n===t?e.createDocumentFragment():e.createElementNS("http://www.w3.org/1999/xhtml",n)}function u(e){var n=a(t),r=a("div");return r.innerHTML='<svg xmlns="http://www.w3.org/2000/svg">'+e+"</svg>",o(n,r.firstChild.childNodes),n}}(document),Q=function(e,t){return e.childNodes[t]},Y=function(e){for(var t=[],n=e.parentNode;n;)t.push(J.call(n.childNodes,e)),n=(e=n).parentNode;return t},Z=document,ee=Z.createTreeWalker,te=Z.importNode,ne=1!=te.length,re=ne?function(e,t,n){return te.call(document,K(e,t,n),!0)}:K,oe=ne?function(e){return ee.call(document,e,129,null,!1)}:function(e){return ee.call(document,e,129)},ae=function(e,t,n){return function(e,t,n,r,o){for(var a=n.length,u=t.length,i=a,c=0,l=0,s=null;c<u||l<i;)if(u===c)for(var f=i<a?l?r(n[l-1],-0).nextSibling:r(n[i-l],0):o;l<i;)e.insertBefore(r(n[l++],1),f);else if(i===l)for(;c<u;)s&&s.has(t[c])||e.removeChild(r(t[c],-1)),c++;else if(t[c]===n[l])c++,l++;else if(t[u-1]===n[i-1])u--,i--;else if(t[c]===n[i-1]&&n[l]===t[u-1]){var h=r(t[--u],-1).nextSibling;e.insertBefore(r(n[l++],1),r(t[c++],-1).nextSibling),e.insertBefore(r(n[--i],1),h),t[u]=n[i]}else{if(!s){s=new Map;for(var d=l;d<i;)s.set(n[d],d++)}if(s.has(t[c])){var p=s.get(t[c]);if(l<p&&p<i){for(var v=c,g=1;++v<u&&v<i&&s.get(t[v])===p+g;)g++;if(g>p-l)for(var y=r(t[c],0);l<p;)e.insertBefore(r(n[l++],1),y);else e.replaceChild(r(n[l++],1),r(t[c++],-1))}else c++}else e.removeChild(r(t[c++],-1))}return n}(e.parentNode,t,n,X,e)},ue=function(e,t){switch(t[0]){case"?":return function(e,t,n){return function(r){n!==!!r&&((n=!!r)?e.setAttribute(t,""):e.removeAttribute(t))}}(e,t.slice(1),!1);case".":return function(e,t){return"dataset"===t?function(e){var t=e.dataset;return function(e){for(var n in e){var r=e[n];null==r?delete t[n]:t[n]=r}}}(e):function(n){e[t]=n}}(e,t.slice(1));case"@":return G(e,"on"+t.slice(1));case"o":if("n"===t[1])return G(e,t)}switch(t){case"ref":return function(e){var t;return function(n){t!==n&&(t=n,"function"==typeof n?n(e):n.current=e)}}(e);case"aria":return function(e){return function(t){for(var n in t){var r="role"===n?n:"aria-".concat(n),o=t[n];null==o?e.removeAttribute(r):e.setAttribute(r,o)}}}(e)}return function(e,t){var n,r=!0,o=document.createAttributeNS(null,t);return function(t){n!==t&&(null==(n=t)?r||(e.removeAttributeNode(o),r=!0):(o.value=t,r&&(e.setAttributeNodeNS(o),r=!1)))}}(e,t)};function ie(e){var t=e.type,n=e.path.reduceRight(Q,this);return"node"===t?function(e){var t,n,r=[];return function o(a){switch(typeof a){case"string":case"number":case"boolean":t!==a&&(t=a,n||(n=document.createTextNode("")),n.data=a,r=ae(e,r,[n]));break;case"object":case"undefined":if(null==a){t!=a&&(t=a,r=ae(e,r,[]));break}if(F(a)){t=a,0===a.length?r=ae(e,r,[]):"object"==typeof a[0]?r=ae(e,r,a):o(String(a));break}t!==a&&"ELEMENT_NODE"in a&&(t=a,r=ae(e,r,11===a.nodeType?U.call(a.childNodes):[a]));break;case"function":o(a(e))}}}(n):"attr"===t?ue(n,e.name):function(e){var t;return function(n){t!=n&&(t=n,e.textContent=null==n?"":n)}}(n)}var ce="isµ",le=_(new WeakMap),se=/^(?:plaintext|script|style|textarea|title|xmp)$/i,fe=function(e,t){var n=le.get(t)||le.set(t,function(e,t){for(var n=z(t,ce,"svg"===e),r=re(n,e),o=oe(r),a=[],u=t.length-1,i=0,c="".concat(ce).concat(i);i<u;){var l=o.nextNode();if(!l)throw"bad template: ".concat(n);if(8===l.nodeType)l.data===c&&(a.push({type:"node",path:Y(l)}),c="".concat(ce).concat(++i));else{for(;l.hasAttribute(c);)a.push({type:"attr",path:Y(l),name:l.getAttribute(c)}),l.removeAttribute(c),c="".concat(ce).concat(++i);se.test(l.tagName)&&l.textContent.trim()==="\x3c!--".concat(c,"--\x3e")&&(l.textContent="",a.push({type:"text",path:Y(l)}),c="".concat(ce).concat(++i))}}return{content:r,nodes:a}}(e,t)),r=n.content,o=n.nodes,a=te.call(document,r,!0);return{content:a,updates:o.map(ie,a)}},he=function(e,t){var n=t.type,r=t.template,o=t.values,a=o.length;de(e,o,a);var u=e.entry;u&&u.template===r&&u.type===n||(e.entry=u=function(e,t){var n=fe(e,t);return{type:e,template:t,content:n.content,updates:n.updates,wire:null}}(n,r));for(var i=u,c=i.content,l=i.updates,s=i.wire,f=0;f<a;f++)l[f](o[f]);return s||(u.wire=function(e){var t=e.childNodes,n=t.length;if(n<2)return n?t[0]:e;var r=U.call(t,0);return{ELEMENT_NODE:1,nodeType:111,firstChild:r[0],lastChild:r[n-1],valueOf:function(){if(t.length!==n)for(var o=0;o<n;)e.appendChild(r[o++]);return e}}}(c))},de=function e(t,n,r){for(var o=t.stack,a=0;a<r;a++){var u=n[a];u instanceof pe?n[a]=he(o[a]||(o[a]={stack:[],entry:null,wire:null}),u):F(u)?e(o[a]||(o[a]={stack:[],entry:null,wire:null}),u,u.length):o[a]=null}r<o.length&&o.splice(r)};function pe(e,t,n){this.type=e,this.template=t,this.values=n}var ve=Object.create,ge=Object.defineProperties,ye=function(e){var t=_(new WeakMap);return ge((function(t){for(var n=arguments.length,r=new Array(n>1?n-1:0),o=1;o<n;o++)r[o-1]=arguments[o];return new pe(e,t,r)}),{for:{value:function(n,r){var o=t.get(n)||t.set(n,ve(null));return o[r]||(o[r]=function(t){return function(n){for(var r=arguments.length,o=new Array(r>1?r-1:0),a=1;a<r;a++)o[a-1]=arguments[a];return he(t,{type:e,template:n,values:o})}}({stack:[],entry:null,wire:null}))}},node:{value:function(t){for(var n=arguments.length,r=new Array(n>1?n-1:0),o=1;o<n;o++)r[o-1]=arguments[o];return he({stack:[],entry:null,wire:null},{type:e,template:t,values:r}).valueOf()}}})},me=_(new WeakMap),be=function(e,t){var n="function"==typeof t?t():t,r=me.get(e)||me.set(e,{stack:[],entry:null,wire:null}),o=n instanceof pe?he(r,n):n;return o!==r.wire&&(r.wire=o,e.textContent="",e.appendChild(o.valueOf())),e},we=ye("html"),Ee=ye("svg");function Se(e){for(var t=e[0],n=1,r=arguments.length;n<r;n++)t+=arguments[n]+e[n];return t}var xe=Object.defineProperties,Oe=Object.keys,ke=function(e,t,n,r,o){return{configurable:!0,get:function(){return r},set:function(a){(e||a!==r||t&&"object"==typeof a&&a)&&(r=a,n?o.call(this,r):o.call(this))}}},Ce=function(e,t,n,r,o,a){for(var u={},i=o!==Ne,c=[n,r,i],l=Oe(e),s=0;s<l.length;s++){var f=t(e,l[s]),h=i?o(f):[f,o];a&&(h[1]=a),u[l[s]]=ke.apply(null,c.concat(h))}return u},Ne=function(){},Ae=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.all,n=void 0!==t&&t,r=e.shallow,o=void 0===r||r,a=e.useState,u=void 0===a?Ne:a,i=e.getAttribute,c=void 0===i?function(e,t){return e.getAttribute(t)}:i;return function(e,t,r){var a=Ce(t,(function(t,n){var r=t[n],o=typeof r;return e.hasOwnProperty(n)?(r=e[n],delete e[n]):e.hasAttribute(n)&&(r=c(e,n),"number"==o?r=+r:"boolean"==o&&(r=!/^(?:false|0|)$/.test(r))),r}),n,o,u,r);return xe(e,a)}},Me=Ae({dom:!0}),Te=customElements,Le=Te.define,je=JSON.parse,$e=JSON.stringify,_e=Object.create,Pe=Object.defineProperties,qe=Object.getOwnPropertyDescriptor,He=Object.keys,Re="element",De=new WeakMap,We=_(new Map([[Re,{c:HTMLElement,e:Re}]])),Ie=function(e){return document.createElement(e)},Be=function(e){return We.get(e)||We.set(e,{c:Ie(e).constructor,e:e})},ze=function(e,t){for(var n=t.attachShadow,r=t.attributeChanged,o=t.bound,a=t.connected,u=t.disconnected,i=t.handleEvent,c=t.init,l=t.observedAttributes,s=t.props,f=t.render,h=t.style,d=new WeakMap,p={},v={},g=[],y=_e(null),m=function(e,t,r){if(!d.has(e)){d.set(e,0),Pe(e,{html:{configurable:!0,value:Ve.bind(n?e.attachShadow(n):e)}});for(var a=0;a<C;a++){var u=g[a],i=u.type,l=u.options;e.addEventListener(i,e,l)}if(o&&o.forEach(Fe,e),s){for(var h={},p=He(s),v=0;v<p.length;v++){var y=p[v],m=s[y];h[y]="object"==typeof m?je($e(m)):m}De.set(e,h),Me(e,h,f)}(c||f)&&(c||f).call(e),t&&(e[t]=r)}},b=He(t),w=0,E=b.length;w<E;w++){var S=b[w];if(/^on./.test(S)&&!/Options$/.test(S)){var x=t[S+"Options"]||!1,O=S.toLowerCase(),k=O.slice(2);g.push({type:k,options:x}),y[k]=S,O!==S&&(k=O.slice(2,3)+S.slice(3),y[k]=S,g.push({type:k,options:x}))}switch(S){case"attachShadow":case"constructor":case"observedAttributes":case"style":break;default:v[S]=qe(t,S)}}var C=g.length;if(C&&!i&&(v.handleEvent={value:function(e){this[y[e.type]](e)}}),null!==s)if(s)for(var A=function(e,t){var n=e[t];v[n]={get:function(){return m(this),De.get(this)[n]},set:function(e){m(this,n,e)}}},T=He(s),L=0;L<T.length;L++)A(T,L);else v.props={get:function(){for(var e={},t=this.attributes,n=t.length,r=0;r<n;r++){var o=t[r],a=o.name,u=o.value;e[a]=u}return e}};l&&(p.observedAttributes={value:l}),v.attributeChangedCallback={value:function(){m(this),r&&r.apply(this,arguments)}},v.connectedCallback={value:function(){m(this),a&&a.call(this)}},u&&(v.disconnectedCallback={value:u});var j=Be(t.extends||Re),_=j.c,P=j.e,q=function(e){M(n,e);var t=$(n);function n(){return N(this,n),t.apply(this,arguments)}return n}(_);Pe(q,p),Pe(q.prototype,v);var H=[e,q];return P!==Re&&H.push({extends:P}),Le.apply(Te,H),We.set(e,{c:q,e:P}),h&&(document.head.appendChild(Ie("style")).textContent=h(P===Re?e:P+'[is="'+e+'"]')),q};function Fe(e){this[e]=this[e].bind(this)}function Ve(){return be(this,we.apply(null,arguments))}Te.get("uce-lib")||Te.define("uce-lib",function(e){M(a,e);var t,n,r,o=$(a);function a(){return N(this,a),o.apply(this,arguments)}return t=a,r=[{key:"define",get:function(){return ze}},{key:"render",get:function(){return be}},{key:"html",get:function(){return we}},{key:"svg",get:function(){return Ee}},{key:"css",get:function(){return Se}}],(n=null)&&A(t.prototype,n),r&&A(t,r),a}(Be(Re).c));var Je=function(e,t){return e[t]},Ue=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.all,n=void 0!==t&&t,r=e.shallow,o=void 0===r||r,a=e.useState,u=void 0===a?Ne:a;return function(e,t){return xe({},Ce(e,Je,n,o,u,t))}},Xe=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(e.dom?Ae:Ue)(e)},Ge=!0,Ke=!1,Qe="querySelectorAll";function Ye(e){this.observe(e,{subtree:Ge,childList:Ge})}var Ze="querySelectorAll",et=self,tt=et.document,nt=et.Element,rt=et.MutationObserver,ot=et.Set,at=et.WeakMap,ut=function(e){return Ze in e},it=[].filter,ct=function(e){var t=new at,n=function(n,r){var a;if(r)for(var u,i=function(e){return e.matches||e.webkitMatchesSelector||e.msMatchesSelector}(n),c=0,l=o.length;c<l;c++)i.call(n,u=o[c])&&(t.has(n)||t.set(n,new ot),(a=t.get(n)).has(u)||(a.add(u),e.handle(n,r,u)));else t.has(n)&&(a=t.get(n),t.delete(n),a.forEach((function(t){e.handle(n,r,t)})))},r=function(e){for(var t=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],r=0,o=e.length;r<o;r++)n(e[r],t)},o=e.query,a=e.root||tt,u=function(e,t,n){var r=function t(n,r,o,a,u){for(var i=0,c=n.length;i<c;i++){var l=n[i];(u||Qe in l)&&(a?r.has(l)||(r.add(l),o.delete(l),e(l,a)):o.has(l)||(o.add(l),r.delete(l),e(l,a)),u||t(l[Qe]("*"),r,o,a,Ge))}},o=new(n||MutationObserver)((function(e){for(var t=new Set,n=new Set,o=0,a=e.length;o<a;o++){var u=e[o],i=u.addedNodes,c=u.removedNodes;r(c,t,n,Ke,Ke),r(i,t,n,Ge,Ke)}}));return o.add=Ye,o.add(t||document),o}(n,a,rt),i=nt.prototype.attachShadow;return i&&(nt.prototype.attachShadow=function(e){var t=i.call(this,e);return u.add(t),t}),o.length&&r(a[Ze](o)),{drop:function(e){for(var n=0,r=e.length;n<r;n++)t.delete(e[n])},flush:function(){for(var e=u.takeRecords(),t=0,n=e.length;t<n;t++)r(it.call(e[t].removedNodes,ut),!1),r(it.call(e[t].addedNodes,ut),!0)},observer:u,parse:r}};t.all||(t.all=function(e){return new t((function(t){var n=e.length;n||t();for(var r=0;r<n;)e[r++].then(o);function o(){++r===n&&t()}r=0}))});var lt,st,ft,ht=Object.create,dt=Object.defineProperty,pt=Object.keys,vt=[],gt=function(e){return yt[e]},yt=ht(null),mt={},bt=function(e,n){var r=[],o=[],a=e.replace(/(^|[\r\n])\s*import\s*((['|"])[^\3]+?\3)/g,(function(e,t,n){return t+"require("+n+")"})).replace(/(^|[\r\n])\s*import\s*([^\3]+?)(\s*from\s*)((['|"])[^\5]+?\5)/g,(function(e,t,n,r,o){return t+"const "+n.replace(/\s+as\s+/g,":")+" = require("+o+")"})).replace(/^\s*export\s+default(\s*)/gm,"exports.default =$1").replace(/(^|[\r\n])\s*export\s*\{([^}]+?)\}[^\n]*/g,(function(e,t,n){return n.trim().split(/\s*,\s*/).forEach((function(e){r.push("exports.".concat(e," = ").concat(e,";"))})),t})).replace(/(^|[\r\n])\s*export\s+(const|let|var|function)(\s+)(\w+)/g,(function(e,t,n,o,a){return r.push("exports.".concat(a," = ").concat(a,";")),t+n+o+a})).concat("\n",r.join("\n")).replace(/require\s*\(\s*(['"])([^\1]+?)\1\s*\)/g,(function(e,t,n){return o.push(n),e}));return n?(o.forEach((function(e){e in yt||vt.push(new t((function(t){var n=mt;if(/^(?:[./]|https?:)/.test(e)){yt[e]=n;var r=new XMLHttpRequest;r.open("get",e,!0),r.send(null),r.onload=function(){t(yt[e]=wt(r.responseText))}}else dt(yt,e,{get:function(){return n},set:function(e){t(n=e)}})})))})),new t((function(e){t.all(vt).then((function(){return e(a)}))}))):a},wt=(st=pt(lt||{}),ft=st.map((function(e){return lt[e]})).concat(gt),st.push("require"),function(e){var t={},n={exports:t},r=st.concat("module","exports",'"use strict;"\n'+bt(e));Function.apply(null,r).apply(null,ft.concat(n,t));var o=n.exports,a=pt(o);return 1===a.length&&"default"===a[0]?o.default:o}),Et=Xe({dom:!0,useState:C}),St=[],xt=ct({query:St,handle:function(e,t,n){if(Ot([e]),At.has(n)){var r=At.get(n);At.delete(n),St.splice(St.indexOf(n),1),r()}}}),Ot=xt.drop,kt=xt.parse,Ct=function(e,t){e in yt&&yt[e]!==mt&&console.warn("duplicated "+e),yt[e]=t},Nt=function(e){var t=new _t;return t.innerHTML=e,t},At=new Map,Mt=['module.exports=function(module,exports){"use strict";',"}"],Tt=function(){},Lt=function(){throw new Error("bad template")},jt={define:ze,render:be,html:we,svg:Ee,css:Se,reactive:Xe({useState:C}),ref:a,slot:u};Ct("@uce/reactive",jt.reactive),Ct("@uce/slot",jt.slot),Ct("@uce",jt),Ct("uce",jt);var $t={augmentor:y,hooked:y,useState:C,useRef:function(e){var t=v(),n=t.i,r=t.s;return n===r.length&&r.push({current:e}),r[t.i++]},useContext:function(e){var t=e._,n=e.value;return t.add(v()),n},createContext:function(e){return{_:new Set,provide:b,value:e}},useCallback:function(e,t){return w((function(){return e}),t)},useMemo:w,useReducer:k,useEffect:S,useLayoutEffect:x};Ct("augmentor",$t),Ct("uhooks",$t),Ct("qsa-observer",ct),Ct("reactive-props",Xe),Ct("@webreflection/lie",t);var _t=ze("uce-template",{extends:"template",props:null,init:function e(t){var n=function(e){var t=function(e){for(var t=[],n=[],r=e.length,o=0,a=0,u=0;o<r&&-1<(o=e.indexOf("{{",u))&&-1<(a=e.indexOf("}}",o+2));)t.push(e.slice(u,o)),n.push(e.slice(o+2,a)),u=a+2;t.push(e.slice(u));var i=[t],c=Function("return function(){with(arguments[0])return["+n+"]}")();return function(e){return i.concat(c.call(this,e))}}(E.replace(/(<!--(\{\{)|(\}\})-->)/g,"$2$3")),n=b&&wt(h?Mt.join(e):e)||{},r=n.observedAttributes,o=n.props,a=n.setup,u=!!E.trim(),i=h||u||!!a,c=new WeakMap,l={props:null,extends:p?g:"element",init:function(){var e,r=this,l=r.html,s=!0,p=Tt,v=y((function(){if(s&&(s=!s,i)){r.render=v,o&&Et(r,o);var e=h?function(e,t,n,r){var o={exports:r};e.call(t,o,r);var a=o.exports,u=a.default||a;return n&&Et(t,u.props),u}(n,r,d,{}):a&&n.setup(r);if(u){var c=t.bind(r,e||{});p=function(){l.apply(r,c())}}}p()}));v(),e=v,f.has(e)&&c.set(r,v)}};if(v&&(l.style=function(){return v}),w&&(l.attachShadow={mode:w}),r){l.observedAttributes=r;var s=l.attributeChanged=function(){var e=this.attributeChanged;e!==s&&e.apply(this,arguments)}}if(b)var S=l.connected=function(){var e=this.connected;e!==S&&e.call(this)},x=l.disconnected=function(){var e=this.disconnected;c.has(this)&&function(e){var t=f.get(e);t&&m.then((function(){t.forEach((function(e){e.r(),e.r=null})),t.clear()}))}(c.get(this)),e!==x&&e.call(this)};for(var O in n)O in l||(l[O]=n[O]);ze(p||g,l)},a=this.content,u=this.ownerDocument,i=this.parentNode,c=(a||K(this.innerHTML)).childNodes,l=[];i&&this instanceof HTMLUnknownElement&&i.removeChild(this);for(var s=n,h=!1,d=!1,p="",v="",g="",b="",w="",E="",S=0;S<c.length;S++){var x=c[S];if(1===x.nodeType){var O=x.tagName,k=o(x,"is");/^style$/i.test(O)?l.push(x):k||/-/i.test(O)?(g&&Lt(),g=O.toLowerCase(),E=x.innerHTML,k&&(p=r(x,"is").toLowerCase()),o(x,"shadow")&&(w=r(x,"shadow")||"open")):/^script$/i.test(O)&&(b&&Lt(),h=o(x,"setup"),d=h&&"props"===r(x,"setup"),b=x.textContent,s=function(){bt(b,!0).then(n)})}}var C=p?g+'[is="'+p+'"]':g;if(!C)return setTimeout(t?Lt:e.bind(this),0,!0);for(var N=l.length;N--;){var A=l[N],M=A.textContent;o(A,"shadow")?E="<style>"+M+"</style>"+E:o(A,"scoped")?function(){var e=[];v+=M.replace(/\{([^}]+?)\}/g,(function(t,n){return"
"+e.push(n)+","})).split(",").map((function(e){return e.trim()?C+" "+e.trim():""})).join(",\n").replace(/\x01(\d+),/g,(function(t,n){return"{"+e[--n]+"}"})).replace(/(,\n)+/g,",\n")}():v+=M}o(this,"lazy")?(At.set(C,s),St.push(C),kt(u.querySelectorAll(St))):s()}});_t.resolve=Ct,_t.from=Nt,e.parse=Nt,e.resolve=Ct}({});


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # <em>µ</em>ce-template
  2 | 
  3 | [![Downloads](https://img.shields.io/npm/dm/uce-template.svg)](https://www.npmjs.com/package/uce-template) [![CSP friendly](https://webreflection.github.io/csp/friendly.svg)](https://webreflection.github.io/csp/#-csp-friendly)
  4 | 
  5 | ![winter sky](./test/uce-template-head.jpg)
  6 | 
  7 | <sup>**Social Media Photo by [Federico Bottos](https://unsplash.com/@landscapeplaces) on [Unsplash](https://unsplash.com/)**</sup>
  8 | 
  9 | A tiny toolless library with tools included. **[Live demo](https://webreflection.github.io/uce-template/test/)**
 10 | 
 11 | - - -
 12 | 
 13 | ### 📣 Community Announcement
 14 | 
 15 | Please ask questions in the [dedicated discussions repository](https://github.com/WebReflection/discussions), to help the community around this project grow ♥
 16 | 
 17 | ---
 18 | 
 19 | Inspired by [Vue 3 "_One Piece_"](https://github.com/vuejs/vue-next/releases/tag/v3.0.0), _uce-template_ provides a custom builtin `<template>` element to define components in a _Vue_ fashion.
 20 | 
 21 | ```html
 22 | <template is="uce-template">
 23 | 
 24 |   <style scoped>
 25 |   span { color: green }
 26 |   </style>
 27 | 
 28 |   <the-green>
 29 |     The <span>{{thing}}</span> is green
 30 |   </the-green>
 31 | 
 32 |   <script type="module">
 33 |   export default {
 34 |     setup() {
 35 |       return {thing: 'world'}
 36 |     }
 37 |   }
 38 |   </script>
 39 | 
 40 | </template>
 41 | ```
 42 | 
 43 | Add this library to the equation, and [see it bootstrapping](https://codepen.io/WebReflection/pen/xxVMgZx?editors=1000) all defined components.
 44 | 
 45 | - - -
 46 | 
 47 | ## Getting Started
 48 | 
 49 | <details>
 50 |   <summary><strong>Features</strong></summary>
 51 |   <div>
 52 | 
 53 |   * **SSR** compatibility out of the box: components definitions land *once* so no duplicated templates are needed in both layout and *JS*
 54 |   * a simple **CLI** that converts any html page or component into its minified version and, optionally, *Babel* transpilation
 55 |   * **Custom Elements** based, including builtin extends, so that *IE11*, *Safari*, or any other browser, will work right away
 56 |   * optionally **lazy** `<template lazy>` component, to resolve their definition only when live
 57 |   * optionally **shadow**ed `<custom-element shadow>` components, and optionally shadowed `<style shadow>` styles
 58 |   * a variety of pre-defined modules to import, including a virtual `@uce` module, to create reactive *UIs* and more
 59 |   * a runtime *ESM -> CommonJS* **module** system, where relative dependencies are [resolved (once) lazily](./extra-details.md#the-lazy-js-environment), but any imported [module can be pre-defined](./extra-details.md#the-module-js-environment) through the `resolve(name, module)` exported utility
 60 |   * everything pre-bundled fits into *10K* gzipped budget, or *9K* via brotli, but it's only *7K* gzip, and *6.5K* brotli in its *no-polyfills* version 🦄
 61 | 
 62 | #### Goals
 63 | 
 64 |   * demonstrate that tools and tooling can be optional, thanks to the current state of the *Web*
 65 |   * avoid any debate regarding duplicated code and re-hydration cost: each component can be served through static pages or dynamic *SSR*, without needing duplicated code around
 66 |   * being ahead of time providing the long discussed partial templates already, improving the previous *HTML Imports* idea, which has been dropped anyway, and simplifying scoped styles via auto prefixes or shadow dom
 67 |   * being extremely developer friendly with a script anyone can add on any page to start with, with the optional tooling offered by the module itself to optimize stand alone components, or even whole *HTML* pages
 68 | 
 69 |   </div>
 70 | </details>
 71 | 
 72 | <details>
 73 |   <summary><strong>CLI</strong></summary>
 74 |   <div>
 75 | 
 76 | While it's suggested to install the *CLI* globally, due some not-super-light dependency, it's still an `npx` command away:
 77 | 
 78 | ```sh
 79 | # check all options and usage
 80 | npx uce-template --help
 81 | 
 82 | # works with files
 83 | npx uce-template my-component.html
 84 | 
 85 | # works with stdin
 86 | cat my-component.html | uce-template
 87 | ```
 88 | 
 89 | That's it, but of course we should be sure that produced layout still works as expected 👍
 90 | 
 91 |   </div>
 92 | </details>
 93 | 
 94 | <details>
 95 |   <summary><strong>&lt;template&gt;</strong></summary>
 96 |   <div>
 97 | 
 98 | Any template that extends `uce-template` *must* contain at least a custom element in it, either regular, or built-in extend:
 99 | 
100 | ```html
101 | <!-- register regular-element -->
102 | <template is="uce-template">
103 |   <regular-element>
104 |     regular
105 |   </regular-element>
106 | </template>
107 | 
108 | <!-- register builtin-element as div -->
109 | <template is="uce-template">
110 |   <div is="builtin-element">
111 |     builtin
112 |   </div>
113 | </template>
114 | ```
115 | 
116 | Any template *might* contain a single `<script>` tag, and/or one or more `<style>` definitions.
117 | 
118 | 
119 | #### &lt;slot&gt;
120 | 
121 | If a component contains `{{slot.name}}` definitions, nodes from the living *HTML*, before the component gets upgraded, will be placed in there once live.
122 | 
123 | See this [live example](https://codepen.io/WebReflection/pen/OJNdZPB?editors=1000) to understand more.
124 | 
125 |   </div>
126 | </details>
127 | 
128 | <details>
129 |   <summary><strong>&lt;custom-element&gt;</strong></summary>
130 |   <div>
131 | 
132 | Each "*component*" might define itself with, or without, its own static, or dynamic, content.
133 | 
134 | Such *content* will be used to render each custom element once "*mounted*" (live) and per each reactive state change, but *only* if the template is not an empty one.
135 | 
136 | All **dynamic parts** must be wrapped within `{{dynamic}}` curly brackets as shown here:
137 | 
138 | ```html
139 | <my-counter>
140 |   <button onclick={{dec}}> - </button>
141 |   <span>{{state.count}}</span>
142 |   <button onclick={{inc}}> + </button>
143 | </my-counter>
144 | ```
145 | 
146 | The `state`, `dec`, and `inc` references will be passed along through the script node, if any.
147 | 
148 | Whenever the component is rendered, its update callback is invoked providing the element itself as a **context**.
149 | 
150 | ```html
151 | <button is="my-button">
152 |   I am a {{this.tagName}}
153 | </button>
154 | ```
155 | 
156 | Regarding **ShadowDOM**, its polyfill is not included in this project but it's possible to define a component through its *shadow root* by adding a *shadow* attribute:
157 | 
158 | ```html
159 | <my-counter shadow>
160 |   <!-- this content will be in the shadowRoot -->
161 |   <button onclick={{dec}}> - </button>
162 |   <span>{{state.count}}</span>
163 |   <button onclick={{inc}}> + </button>
164 | </my-counter>
165 | ```
166 | 
167 | The `shadow` attribute is `open` by default, but it can also be specified as `shadow=closed`.
168 | 
169 | Regarding `{{JS}}`, if attribute, and you'd like to use `{{ JS }}` spaces around, the attribute *must* be in quotes, otherwise the *HTML* template breaks the layout in unexpected ways.
170 | 
171 | ```html
172 | <!-- OK -->
173 | <my-counter>
174 |   <button onClick={{dec}}> - </button>
175 | </my-counter>
176 | 
177 | <!-- OK -->
178 | <my-counter>
179 |   <button onClick="{{ dec }}"> - </button>
180 | </my-counter>
181 | 
182 | <!-- IT BREAKS!!! -->
183 | <my-counter>
184 |   <button onClick={{ dec }}> - </button>
185 | </my-counter>
186 | ```
187 | 
188 | ### The curious `<!--{{interpolation}}-->` case
189 | 
190 | As everything in here is mostly based on standard *HTML* behavior, there are cases where an interpolation should be wrapped as comment.
191 | 
192 | The rule of thumb is that if you don't see the layout, or you read some *Bad template* error, it is possible that your interpolation could've been swallowed by the *template* element.
193 | 
194 | This happens mostly with elements such as **table**, **select**, and other elements that accept only a specific type of child node, but not text.
195 | 
196 | ```html
197 | <!-- 👎 this won't work as expected -->
198 | <table is="my-table">
199 |   <tbody>{{rows}}</tbody>
200 | </table>
201 | 
202 | <!-- 👍 this works 🎉 -->
203 | <table is="my-table">
204 |   <tbody><!--{{rows}}--></tbody>
205 | </table>
206 | ```
207 | 
208 | In the first case, the `<tbody>` would ignore any node that is not a `<tr>` *except for comments*, because comments don't get swallowed, or lost, in the process.
209 | 
210 | You can see the [dbmonster.html](./test/dbmonster.html) file definition for both the custom `<table>` and the custom `<tr>` component.
211 | 
212 | 
213 |   </div>
214 | </details>
215 | 
216 | <details>
217 |   <summary><strong>&lt;style&gt;</strong></summary>
218 |   <div>
219 | 
220 | A component can have *one or more* styles in it, within a specific *scope*:
221 | 
222 |   * a generic `<style>` will apply its content globally, useful to address `my-counter + my-counter {...}` cases, as example
223 |   * a `<style scoped>` will apply its content prefixed with the Custom Element name (i.e. `my-counter span, my-counter button {...}`)
224 |   * a `<style shadow>` will apply its content on top of the *shadowRoot*, assuming the component is defined with a `shadow` attribute
225 | 
226 | There is nothing special to consider here, except that *global* styles might interfere with *IE11* if too obtrusive, as once again *IE11* doesn't understand the `<template>` element purpose and behavior.
227 | 
228 |   </div>
229 | </details>
230 | 
231 | <details>
232 |   <summary><strong>&lt;script&gt;</strong></summary>
233 |   <div>
234 | 
235 | A definition can contain only *one script tag* in it, and such *script* will be virtually handled like a *module*.
236 | 
237 | Since *IE11* is *not* compatible with `<template>` elements, if the `type` is not specified, *IE11* will try to evaluate all scripts on the page right-away.
238 | 
239 | Accordingly, the `type` attribute can really have any value, as it's completely irrelevant for this library, but such value must not be IE11 compatible, and `module` is just one value that *IE11* would ignore.
240 | 
241 | The script *might* contain a `default export`, or even a `module.exports = ...`, where such export *might* have a `setup(element) { ... }` method that returns what the *dynamic* parts of the component expect:
242 | 
243 | ```html
244 | <script type="module">
245 | import {reactive} from '@uce';
246 | export default {
247 |   setup(element) {
248 |     const state = reactive({ count: 0 });
249 |     const inc = () => { state.count++ };
250 |     const dec = () => { state.count-- };
251 |     return {state, inc, dec};
252 |   }
253 | };
254 | </script>
255 | ```
256 | 
257 | The `@uce` *reactive* helper makes it possible to automatically update the view whenever one of its properties changes.
258 | 
259 | To know more about reactive changes, please [read this Medium post](https://medium.com/@WebReflection/reactive-state-for-data-dom-78332ddafd0e).
260 | 
261 | ### The `setup` attribute
262 | 
263 | If a `<script type="module" setup>` is found, the content of the script is invoked with the element itself as context.
264 | 
265 | [Live demo](https://webreflection.github.io/uce-template/test/setup.html)
266 | 
267 | ```html
268 | <x-clock></x-clock>
269 | <template is="uce-template">
270 |   <x-clock>{{time}}</x-clock>
271 |   <script type="module" setup>
272 |     let id = 0;
273 |     export default {
274 |       get time() {
275 |         return (new Date).toISOString();
276 |       }
277 |     };
278 |     this.connected = e => id = setInterval(this.render, 1000 / 30);
279 |     this.disconnected = e => clearInterval(id);
280 |   </script>
281 | </template>
282 | ```
283 | 
284 | This shortcut is specially handy for components that don't need to setup *observedAttributes* but might need to setup *props*, and for the latter case, the `setup` attribute should contain `props`.
285 | 
286 | ```html
287 | <script type="module" setup="props">
288 |   // props are defined as key => defaultValue pairs
289 |   export const props = {
290 |     name: this.name || 'anonymous',
291 |     age: +this.age || 0
292 |   };
293 | </script>
294 | ```
295 | 
296 |   </div>
297 | </details>
298 | 
299 | - - -
300 | 
301 | ## How to / Examples
302 | 
303 | This section goal is to showcase basic to complex examples via *uce-template*, where some example might use the `.uce` extension to confine components within their own files.
304 | 
305 | <details>
306 |   <summary><strong>View <code>.uce</code> files as HTML</strong></summary>
307 |   <div>
308 | 
309 | If you are using VS Code, you can *Ctrl+Shift+p*, type *settings JSON*, choose *Open Settings (JSON)*, and add the following to such file in order to highlight `.uce` files as *HTML*:
310 | 
311 | ```js
312 | {
313 |   "other-settings": "...",
314 | 
315 |   "files.associations": {
316 |     "*.uce": "html"
317 |   }
318 | }
319 | ```
320 | 
321 |   </div>
322 | </details>
323 | 
324 | <details>
325 |   <summary><strong>Lazy Loaded Components</strong></summary>
326 |   <div>
327 | 
328 | If we define components as `view/my-component.uce` we might as well decide to include these lazily, or better, only when these are found in the current page.
329 | 
330 | This approach simplifies a lot bundles, dependencies, unnecessary bloat, and it can be done by including just `uce-template` and the tiny <sup><sub>(364 bytes)</sub></sup> [uce-loader](https://github.com/WebReflection/uce-loader#readme) as bootstrap, eventually defining extra dependencies used across components.
331 | 
332 | ```js
333 | import {parse, resolve} from 'uce-template';
334 | import loader from 'uce-loader';
335 | 
336 | // optional components dependencies
337 | import something from 'cool';
338 | resolve('cool', something);
339 | 
340 | // bootstrap the loader
341 | loader({
342 |   on(component) {
343 |     // ignore uce-template itself
344 |     if (component !== 'uce-template')
345 |       fetch(`view/${component}.uce`)
346 |         .then(body => body.text())
347 |         .then(definition => {
348 |           document.body.appendChild(
349 |             parse(definition)
350 |           );
351 |         });
352 |   }
353 | });
354 | ```
355 | 
356 | The same technique could be used directly on any *HTML* page, writing some code that might be compatible with *IE11* too.
357 | 
358 | ```html
359 | <!doctype html>
360 | <html>
361 |   <head>
362 |     <script defer src="//unpkg.com/uce-template"></script>
363 |     <script defer src="//unpkg.com/uce-loader"></script>
364 |     <script defer>
365 |     addEventListener(
366 |       'DOMContentLoaded',
367 |       function () {
368 |         uceLoader({
369 |           Template: customElements.get('uce-template'),
370 |           on: function (name) {
371 |             if (name !== 'uce-template') {
372 |               var xhr = new XMLHttpRequest;
373 |               var Template = this.Template;
374 |               xhr.open('get', name + '.uce', true);
375 |               xhr.send(null);
376 |               xhr.onload = function () {
377 |                 document.body.appendChild(
378 |                   Template.from(xhr.responseText)
379 |                 );
380 |               };
381 |             }
382 |           }
383 |         });
384 |       },
385 |       {once: true}
386 |     );
387 |     </script>
388 |   </head>
389 |   <body>
390 |     <my-component>
391 |       <p slot="content">
392 |         Some content to show in <code>my-component</code>
393 |       </p>
394 |     </my-component>
395 |   </body>
396 | </html>
397 | ```
398 | 
399 |   </div>
400 | </details>
401 | 
402 | <details>
403 |   <summary><strong>Lazy Loaded <code>uce-template</code></strong></summary>
404 |   <div>
405 | 
406 | If the majority of our pages don't use components at all, adding 7K+ of *JS* on top of each page might be undesired.
407 | 
408 | However, we can follow the very same *Lazy Loaded Components* approach, except our loader will be in charge of bringing in also the *uce-template* library, either when an *uce-template* itself is found, or any other component.
409 | 
410 | ```js
411 | import loader from 'uce-loader';
412 | loader({
413 |   on(component) {
414 |     // first component found, load uce-template
415 |     if (!this.q) {
416 |       this.q = [component];
417 |       const script = document.createElement('script');
418 |       script.src = '//unpkg.com/uce-template';
419 |       document.body.appendChild(script).onload = () => {
420 |         // get the uce-template class to use its .from(...)
421 |         this.Template = customElements.get('uce-template');
422 |         // load all queued components
423 |         for (var q = this.q.splice(0), i = 0; i < q.length; i++)
424 |           this.on(q[i]);
425 |       };
426 |     }
427 |     // when uce-template is loaded
428 |     else if (this.Template) {
429 |       // ignore loading uce-template itself
430 |       if (component !== 'uce-template') {
431 |         // load the component on demand
432 |         fetch(`view/${component}.uce`)
433 |           .then(body => body.text())
434 |           .then(definition => {
435 |             document.body.appendChild(
436 |               this.Template.from(definition)
437 |             );
438 |           });
439 |       }
440 |     }
441 |     // if uce-template is not loaded yet
442 |     // add the component to the queue
443 |     else
444 |       this.q.push(component);
445 |   }
446 | });
447 | ```
448 | 
449 | Using this technique, our *JS* payload per page would be now reduced to less than *0.5K* once above code gets bundled and minified, while everything else will happen automatically only if there are components somewhere in the page.
450 | 
451 |   </div>
452 | </details>
453 | 
454 | 
455 | <details>
456 |   <summary><strong>Lazy loaded expected components</strong></summary>
457 |   <div>
458 | 
459 | As the page could contain other custom elements from third party and libraries, it might be a good idea to predefine a well known *Set* of expected components, as opposite of trying to load any possible custom elements via the `view/${...}.uce` request.
460 | 
461 | Previous lazy loading techniques would work just fine already, but instead of checking that the component name is not `uce-template`, we could use a *Set*:
462 | 
463 | ```js
464 | loader({
465 |   known: new Set(['some-comp', 'some-other']),
466 |   on(component) {
467 |     if (this.known.has(component))
468 |       fetch(`view/${component}.uce`)
469 |         .then(body => body.text())
470 |         .then(definition => {
471 |           document.body.appendChild(
472 |             parse(definition)
473 |           );
474 |         });
475 |   }
476 | });
477 | ```
478 | 
479 | The advantage of this technique is that the `known` *Set* could be dynamically generated through the list of `view/*.uce` files so that nothing would break if the found component is not part of the *uce-template* family.
480 | 
481 |   </div>
482 | </details>
483 | 
484 | 
485 | <details>
486 |   <summary><strong>CSP &amp; integrity/nonce</strong></summary>
487 |   <div>
488 | 
489 | `uce-template` inevitably needs to use `Function` to evaluate either [template partials](https://github.com/WebReflection/tag-params#caveats) or in-script *require(...)*.
490 | 
491 | It is recommended to increase security using either the __nonce__ `ijeLM8+5uwZ7ZXFmK+H2dwIWdiKJ1A4zhZIsq2Ffqqo=` or the *integrity* attribute, trusting via [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy) only scripts that comes from our own domain.
492 | 
493 | ```html
494 | <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-eval'">
495 | <script defer src="/js/uce-template.js"
496 |         integrity="sha256-ijeLM8+5uwZ7ZXFmK+H2dwIWdiKJ1A4zhZIsq2Ffqqo="
497 |         crossorigin="anonymous">
498 | </script>
499 | ```
500 | 
501 | Please note that these values **change on every release** so please be sure you have the latest version (this README reflects the latest).
502 | 
503 |   </div>
504 | </details>
505 | 
506 | <details>
507 |   <summary><strong>Component own events</strong> <sup><sub>( without props )</sub></sup></summary>
508 |   <div>
509 | 
510 | As it is for [uce](https://github.com/WebReflection/uce#readme), if the definition contains `onEvent(){...}` methods, these will be used to define the component.
511 | 
512 | However, since states are usually decoupled from the component itself, it's a good idea to use a *WeakMap* to relate any component with its state and ... don't worry, *WeakMap* is natively supported in *IE11* too!
513 | 
514 | [Live demo](https://codepen.io/WebReflection/pen/KKzERew?editors=1000)
515 | 
516 | ```html
517 | <button is="my-btn">
518 |   Clicked {{times}} times!
519 | </button>
520 | <script type="module">
521 |   const states = new WeakMap;
522 |   export default {
523 |     setup(element) {
524 |       const state = {times: 0};
525 |       states.set(element, state);
526 |       return state;
527 |     },
528 |     onClick() {
529 |       states.get(this).times++;
530 |       // update the current view if the
531 |       // state is not reactive
532 |       this.render();
533 |     }
534 |   };
535 | </script>
536 | ```
537 | 
538 | Please note this example covers any *state* VS *component* use case, as using the *WeakMap* is a recommendation.
539 | 
540 |   </div>
541 | </details>
542 | 
543 | <details>
544 |   <summary><strong>Component own events</strong> <sup><sub>( with props )</sub></sup></summary>
545 |   <div>
546 | 
547 | If `props` object is defined, and since *props** update the view automatically once changed, we might not need a *WeakMap* to relate the component's state.
548 | 
549 | [Live demo](https://codepen.io/WebReflection/pen/XWdGqxp?editors=1000)
550 | 
551 | ```html
552 | <button is="my-btn"></button>
553 | <template is="uce-template">
554 |   <button is="my-btn">
555 |     Clicked {{this.times}} times!
556 |   </button>
557 |   <script type="module">
558 |     export default {
559 |       props: {times: 0},
560 |       onClick() {
561 |         this.times++;
562 |       }
563 |     };
564 |   </script>
565 | </template>
566 | ```
567 | 
568 | The advantage of using props is that it's possible to define an initial state through attributes, or via direct setting it when rendered through the `html` utility, so that having a button with `times="3"`, as example, would be rendered showing *Clicked 3 times!* right away.
569 | 
570 | ```html
571 | <button is="my-btn" times="3"></button>
572 | ```
573 | 
574 |   </div>
575 | </details>
576 | 
577 | <details>
578 |   <summary><strong>Multiple refs</strong></summary>
579 |   <div>
580 | 
581 | The `import {ref} from '@uce'` helper simplifies retrieval of node by `ref="name"` attribute.
582 | 
583 | ```html
584 | <element-details>
585 |   <span ref="name"></span>
586 |   <span ref="description"></span>
587 | </element-details>
588 | 
589 | <template is="uce-template">
590 |   <element-details></element-details>
591 |   <script type="module" setup>
592 |     import {ref} from '@uce';
593 |     const {name, description} = ref(this);
594 |     name.textContent = 'element name';
595 |     description.textContent = 'element description';
596 |   </script>
597 | </template>
598 | ```
599 | 
600 |   </div>
601 | </details>
602 | 
603 | <details>
604 |   <summary><strong>Multiple, dynamic, slots</strong></summary>
605 |   <div>
606 | 
607 | The `import {slot} from '@uce'` helper simplifies retrieval of slots by name, returning an *array* of elements grouped through the same name.
608 | 
609 | This can be used either to place single slots in interpolations, as [shown in this example](https://codepen.io/WebReflection/pen/OJNdZPB?editors=1000), or to place multiple slots within the same node.
610 | 
611 | [Live demo](https://codepen.io/WebReflection/pen/NWNJVLR?editors=1000)
612 | 
613 | ```html
614 | <filter-list>
615 |   Loading filter ...
616 |   <ul>
617 |     <li slot="list">some</li>
618 |     <li slot="list">searchable</li>
619 |     <li slot="list">text</li>
620 |   </ul>
621 | </filter-list>
622 | 
623 | <template is="uce-template">
624 |   <filter-list>
625 |     <div>
626 |       <input placeholder=filter oninput={{filter}}>
627 |     </div>
628 |     <ul>
629 |       {{list}}
630 |     </ul>
631 |   </filter-list>
632 |   <script type="module">
633 |     import {slot} from '@uce';
634 |     export default {
635 |       setup(element) {
636 |         const list = slot(element).list || [];
637 |         return {
638 |           list,
639 |           filter({currentTarget: {value}}) {
640 |             for (const li of list)
641 |               li.style.display =
642 |                 li.textContent.includes(value) ? null : 'none';
643 |           }
644 |         };
645 |       }
646 |     };
647 |   </script>
648 | </template>
649 | ```
650 | 
651 | **However**, in cases where the same-name slots order is not necessarily visualized sequentially, it is always possible to pass an array of nodes instead.
652 | 
653 | That is, any interpolation value can be a DOM node, some value, or an Array of nodes, same way [µhtml](https://github.com/WebReflection/uhtml#readme) works.
654 | 
655 | [Live demo](https://codepen.io/WebReflection/pen/JjXzqww?editors=1000)
656 | 
657 | ```html
658 | <howto-tabs>
659 |   <p>Loading tabs ...</p>
660 |   <howto-tab role="heading" slot="tab">Tab 1</howto-tab>
661 |   <howto-panel role="region" slot="panel">Content 1</howto-panel>
662 |   <howto-tab role="heading" slot="tab">Tab 2</howto-tab>
663 |   <howto-panel role="region" slot="panel">Content 2</howto-panel>
664 | </howto-tabs>
665 | 
666 | <template is="uce-template">
667 |   <howto-tabs>
668 |     {{tabs}}
669 |   </howto-tabs>
670 |   <script type="module">
671 |     import {slot} from '@uce';
672 |     export default {
673 |       setup(element) {
674 |         const {tab, panel} = slot(element);
675 |         const tabs = tab.reduce(
676 |           (tabs, tab, i) => tabs.concat(tab, panel[i]),
677 |           []
678 |         );
679 |         return {tabs};
680 |       }
681 |     };
682 |   </script>
683 | </template>
684 | ```
685 | 
686 |   </div>
687 | </details>
688 | 
689 | <details>
690 |   <summary><strong>Provide yor own modules / dependencies</strong></summary>
691 |   <div>
692 | 
693 | The *module system* provided by *uce-template* is extremely simple and fully extendible, so that each component can `import any from 'thing';` as long as `thing` has been provided/resolved via the library.
694 | 
695 | #### Resolve at build time
696 | 
697 | If we are going to define a single bundle entry point, and we know that each component would need one or more dependency, we can do the following:
698 | 
699 | ```js
700 | import {resolve} from 'uce-template';
701 | 
702 | import moduleA from '3rd-party';
703 | const moduleB = {any: 'value'};
704 | 
705 | resolve('module-a', moduleA);
706 | resolve('module-b', moduleB);
707 | ```
708 | 
709 | Once this build lands as single Web page entry point, all components would be able to *import* right away all base/default modules, plus all those pre-resolved.
710 | 
711 | [Live demo](https://codepen.io/WebReflection/pen/XWdGByv?editors=1001) <sup><sub>(see both HTML and JS panel + console)</sub></sup>
712 | 
713 | ```html
714 | <my-comp></my-comp>
715 | <script type="module">
716 |   import moduleA from 'module-a';
717 |   import moduleB from 'module-a';
718 |   export default {
719 |     setup() {
720 |       console.log(moduleA, moduleB);
721 |     }
722 |   }
723 | </script>
724 | ```
725 | 
726 | #### Resolve lazily / on demand
727 | 
728 | In case the defined component *imports* something from an external file, like `import module from './js/module.js'` would do, such import would be lazily resolved, together with any other module that is not known yet, meaning that `./js/module.js` file could contain something like this:
729 | 
730 | ```js
731 | // a file used to bootstrap uce-template component
732 | // dependencies can always use the uce-template class
733 | const {resolve} = customElements.get('uce-template');
734 | 
735 | // resolve one to many modules
736 | resolve('quite-big-module', {...});
737 | ```
738 | 
739 | A component script can then import this file and access its exported modules right after.
740 | 
741 | [Live demo](https://webreflection.github.io/uce-template/test/resolve.html)
742 | 
743 | ```html
744 | <script type="module">
745 |   import './js/module.js';
746 |   import quiteBigModule from 'quite-big-module';
747 |   export default {
748 |     setup() {
749 |       console.log(quiteBigModule);
750 |     }
751 |   }
752 | </script>
753 | ```
754 | 
755 | Together with *lazy loaded component*, this approach makes it possible to ship components that are fully based on an external `vue/comp.uce` file definition, where any of these components can also share one or more `.js` files able to *resolve* any module needed here or there (shared dependencies in one file, as opposite of dependencies per each shipped components).
756 | 
757 |   </div>
758 | </details>
759 | 
760 | - - -
761 | 
762 | ## F.A.Q.
763 | 
764 | <details>
765 |   <summary><strong>Why is the polyfill included?</strong></summary>
766 |   <div>
767 | 
768 | As standalone file, my [Custom Elements](https://github.com/ungap/custom-elements#readme) size is around *2.1K*, but since it's share almost every library *uce* uses too, bundling it together looked like the best way to go, resulting in just *1K* extra for a module that fits in roughly *7K* to *10K* budget.
769 | 
770 | On the other hand, because the polyfill is not obtrusive and based on runtime features detections, this means that nobody should care about bringing any other polyfill ever, but also *Chrome*, *Firefox*, and *Edge*, will be untouched, so that every custom element will run natively, either builtin extend or regular.
771 | 
772 | In the *Safari* case, or *WebKit* based, only custom elements builtin are provided, while in *IE11* and the old *MS Edge*, both builtin extends and regular elements are patched.
773 | 
774 | That's it: don't worry about any polyfill, because everything is already included in here!
775 | 
776 |   </div>
777 | </details>
778 | 
779 | 
780 | <details>
781 |   <summary><strong>What if I target modern browsers only?</strong></summary>
782 |   <div>
783 | 
784 | If you are targeting browsers you know already provide native Custom Elements V1, you can use [this ESM version](https://unpkg.com/uce-template@latest/es.js) that excludes all polyfills and include only the logic.
785 | 
786 | The current `es.js` bundle is indeed *~7K* gzipped and *~6.5K* brotli, so that it's possible to save even extra bandwidth in your project.
787 | 
788 | #### But my browser is Safari/WebKit ...
789 | 
790 | Well, in such case if that's the only target browser, the [@webreflection/custom-elements-builtin](https://github.com/WebReflection/custom-elements-builtin#readme) module must be included *before* the *uce-template* module lands on the page.
791 | 
792 | ```html
793 | <script defer src="//unpkg.com/@webreflection/custom-elements-builtin"></script>
794 | <script defer src="//unpkg.com/uce-template"></script>
795 | ```
796 | 
797 | This will ensure both regular and builtin extends will work as expected.
798 | 
799 |   </div>
800 | </details>
801 | 
802 | <details>
803 |   <summary><strong>Why there's no ShadowDOM polyfill?</strong></summary>
804 |   <div>
805 | 
806 | Unfortunately *ShadowDOM* is one of those specifications impossible to polyfill, but the good news is that you'll rarely need *ShadowDOM* in *uce-template*, but if your browser is compatible, you can use *ShadowDOM* as much as you like.
807 | 
808 | *However*, there are at least two possible partial polyfills to consider: [attachshadow](https://github.com/WebReflection/attachshadow#readme), which is minimalistic and lightweight, and [ShadyDOM](https://github.com/webcomponents/polyfills/tree/master/packages/shadydom#readme), which is closer to standards, but definitively heavier, although both polyfills can, and should, be injected *only* if the current browser needs it, so sticking this code on top of your *HTML* page would bring *ShadowDOM* to IE11 too, or others.
809 | 
810 | ```html
811 | <!-- this must be done before uce-template -->
812 | <script>
813 | if(!document.documentElement.attachShadow)
814 |   document.write('<script src="//unpkg.com/attachshadow"><\x2fscript>');
815 | </script>
816 | <script defer src="//unpkg.com/uce-template"></script>
817 | ```
818 | 
819 | As every modern browser will have `document.documentElement.attachShadow`, the `document.write` will happen *only* in *IE11* without ever compromise, or penalize, Mobile and modern Desktop browsers.
820 | 
821 | **P.S.** the `<\x2fscript>` is not a typo, it's needed to not have a broken layout due closing *script* tag
822 | 
823 |   </div>
824 | </details>
825 | 
826 | <details>
827 |   <summary><strong>Why using <code>{{...}}</code> instead of <code>${...}</code>?</strong></summary>
828 |   <div>
829 | 
830 | As much as I would've loved to have `${...}` interpolation boundaries, *IE11* would break if an element in the DOM contains `${...}` as attribute.
831 | 
832 | Because `{{...}}` is a well established alternative, I've decided to avoid monkey-patching possible *IE11* issues and simply stick with a de-facto standard alternative.
833 | 
834 | It is also worth considering that *Vue* uses `{{...}}` too, and so do many other template based engines.
835 | 
836 |   </div>
837 | </details>
838 | 
839 | <details>
840 |   <summary><strong>Why is <code>Function</code> necessary?</strong></summary>
841 |   <div>
842 | 
843 | As explained in the "*CSP & integrity/nonce*" part of the [how to/examples](#how-to--examples), it is necessary to use `Function` for at least two reasons:
844 | 
845 |   * it's the only way to opt out from `"use strict";` directive and pass through a `with(object)` statement, needed to understand interpolations without creating a whole JS engine from the scratch
846 |   * it's the only way to provide at runtime a CJS like `require` functionality within `<script type="module">` content
847 | 
848 | But even if there was no `Function` in the equation, parsing and executing a `<script>` tag to define custom elements would've been the exact same equivalent of using `Function`, because *CSP* would've needed special rules anyway, since the operation is basically an *eval* call in the global context.
849 | 
850 | As summary, instead of tricking the browser with practices that are as safe, or as unsafe, as a `Function` call, I've simply used `Function` instead, keeping the code size reasonable.
851 | 
852 |   </div>
853 | </details>
854 | 
855 | <details>
856 |   <summary><strong>What about performance?</strong></summary>
857 |   <div>
858 | 
859 | This project is *as-performant-as* native Custom Elements could be, except for the definition cost, which is a *one-off* operation per each unique custom element *Class*, hence irrelevant in the long run, and there's an insignificant overhead within the initial template parsing logic, but its repeated execution is as fast as *uhtml* can be, and if you [check the latest status](https://rawgit.com/krausest/js-framework-benchmark/master/webdriver-ts-results/table.html) you'll find it's one of the fastest of its kind.
860 | 
861 | You can check the classic [DBMonster demo here](https://webreflection.github.io/uce-template/test/dbmonster.html), and see that it performs just well.
862 | 
863 |   </div>
864 | </details>
865 | 
866 | <details>
867 |   <summary><strong>Are there blocking requests with modules?</strong></summary>
868 |   <div>
869 | 
870 | Nothing in this library is blocking, and modules are resolved *once* only, even relative path imports.
871 | 
872 | The logic is pretty simple: if the module name has not been resolved and it's a relative import, an asynchronous request will be made and evaluated later, while if the module is not resolved, and it's a qualified name, it will be resolved only once some code provides it.
873 | 
874 | All this, plus the *import* to *require* resolution, is handled by the [uce-require](https://github.com/WebReflection/uce-require) helper, purposely not coupled with this module itself, as it could hopefully inspire, and be used by, other projects too.
875 | 
876 |   </div>
877 | </details>
878 | 
879 | - - -
880 | 
881 | ## Live Demos
882 | 
883 |   * a [todo app](https://github.com/WebReflection/uce-template-todo-2020) forked from the *Vue* version of [this post](https://medium.com/javascript-in-plain-english/i-created-the-exact-same-app-in-react-and-vue-here-are-the-differences-2019-edition-42ba2cab9e56)
884 |   * the classic [DB Monster](https://webreflection.github.io/uce-template/test/dbmonster.html) demo
885 |   * a *Custom Element in uce-template* example, either [via getters](https://codepen.io/WebReflection/pen/MWyRGbd?editors=1000), or via the [component context itself](https://codepen.io/WebReflection/pen/BaKEPJR?editors=1000)
886 | 
887 | - - -
888 | 
889 | 
890 | ## ... and more!
891 | 
892 | If you'd like to understand more about `uce-template` and how does it work, please check [this page](./extra-details.md) out.
893 | 


--------------------------------------------------------------------------------