├── www
    ├── favicon.ico
    └── index.html
├── dist
    ├── res
    │   ├── polyfill.js
    │   ├── style.css
    │   ├── sdrag.min.js
    │   ├── split.css
    │   ├── split.js
    │   ├── html.min.js
    │   └── moloader.min.js
    ├── z-minifier.min.js
    ├── preview.html
    ├── z-data.min.js
    ├── z-data.min.es2015.js
    ├── index.html
    └── z-data.min.all.js
├── hello-world.html
├── LICENSE
├── package.json
├── css
    ├── README.md
    └── atomic-css-rules.txt
├── README-cn.md
├── CHANGE.txt
├── README-en.md
├── README.md
└── src
    └── z-data.js


/www/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Funlang/z-data/HEAD/www/favicon.ico


--------------------------------------------------------------------------------
/dist/res/polyfill.js:
--------------------------------------------------------------------------------
 1 | if (Element.prototype.getAttributeNames == undefined) {
 2 |     Element.prototype.getAttributeNames = function () {
 3 |         var attributes = this.attributes;
 4 |         var length = attributes.length;
 5 |         var result = new Array(length);
 6 |         for (var i = 0; i < length; i++) {
 7 |             result[i] = attributes[i].name;
 8 |         }
 9 |         return result;
10 |     };
11 | }
12 | 


--------------------------------------------------------------------------------
/hello-world.html:
--------------------------------------------------------------------------------
 1 | <script src='./src/z-template.js'></script>
 2 | 
 3 | <div z-data={name:'hello-world.html',items:{i:1,j:2,k:3}}
 4 |      #background=`silver`
 5 | >
 6 |     <template for='k:v,i in items' key=k>
 7 |         <template if=!i>
 8 |             <div :text=name
 9 |                  :style={fontSize:`200%`}
10 |                  #color=`#fa0a`
11 |             ></div>
12 |             <div class=t0
13 |                  :class={t1:true}
14 |                  .t2
15 |                  :k=k
16 |             >[if !i] i=${i}</div>
17 |         </template>
18 |         <template else if='k=="j"'>
19 |             <div :css.font-size=`120%`>[if k=="j"] k=${k}</div>
20 |         </template>
21 |         <template else>
22 |             <div #font-weight=`bold`>[else] k=${k}</div>
23 |         </template>
24 |     </template>
25 | </div>
26 | 
27 | <script>ZData.start()</script>
28 | 


--------------------------------------------------------------------------------
/dist/res/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     box-sizing: border-box;
 3 | }
 4 | 
 5 | html,
 6 | body {
 7 |     padding: 0;
 8 |     margin: 0;
 9 |     height: 100%;
10 |     overflow: hidden;
11 | }
12 | 
13 | /* @media screen and (min-width: 768px) {
14 |     ::-webkit-scrollbar {
15 |         width: 8px;
16 |         height: 8px;
17 |     }
18 |     :hover::-webkit-scrollbar {
19 |         background: #eee7;
20 |     }
21 |     :hover::-webkit-scrollbar-thumb {
22 |         background: #cccc;
23 |     }
24 |     :hover::-webkit-scrollbar-button {
25 |         height: 8px;
26 |         width: 8px;
27 |         background: #9999;
28 |     }
29 |     :hover::-webkit-scrollbar-track:hover {
30 |         background: #fff;
31 |     }
32 |     :hover::-webkit-scrollbar-thumb:hover {
33 |         background: #aaa;
34 |     }
35 |     :hover::-webkit-scrollbar-button:hover {
36 |         background: #666;
37 |     }
38 | } */
39 | 


--------------------------------------------------------------------------------
/dist/res/sdrag.min.js:
--------------------------------------------------------------------------------
1 | Element.prototype.sdrag=function(o,e,r){var a=["left","top","right","bottom"],i={true:"left",false:"right"},s={true:"top",false:"bottom"},p=!0,g=!0,u=0,l=0,m=this,f=!1;function d(t){var e,n={};o&&o(m,t.pageX,u,t.pageY,l,n),"vertical"!==r&&(e=("pageX"in n?n:t).pageX,"startX"in n&&(u=n.startX),!1=="skipX"in n&&(m.style[i[p]]=(e-u)*(p?1:-1)+"px",m.style[i[!p]]="unset")),"horizontal"!==r&&(t=("pageY"in n?n:t).pageY,"startY"in n&&(l=n.startY),!1=="skipY"in n&&(m.style[s[g]]=(t-l)*(g?1:-1)+"px",m.style[s[!g]]="unset"))}this.addEventListener("mousedown",function(t){if(!(t.currentTarget instanceof HTMLElement||t.currentTarget instanceof SVGElement))throw new Error("Your target must be an html element");f=!0;var e=getComputedStyle(m),n={};a.forEach(t=>n[t]=e[t]?parseInt(e[t]):0),p=n.left<n.right,g=n.top<n.bottom,u=t.pageX-n[i[p]]*(p?1:-1),l=t.pageY-n[s[g]]*(g?1:-1),window.addEventListener("mousemove",d)}),window.addEventListener("mouseup",function(t){!0===f&&(f=!1,window.removeEventListener("mousemove",d),e&&e(m,t.pageX,u,t.pageY,l))})};


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 Funlang
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "z-data",
 3 |   "author": {
 4 |     "name": "Wisdom ZHANG"
 5 |   },
 6 |   "homepage": "https://github.com/Funlang/z-data",
 7 |   "license": "MIT",
 8 |   "repository": {
 9 |     "type": "git",
10 |     "url": "git://github.com/Funlang/z-data.git"
11 |   },
12 |   "type": "module",
13 |   "main": "dist/z-data.min.js",
14 |   "dependencies": {
15 |   },
16 |   "devDependencies": {
17 |     "uglify-js": "^3.13.5"
18 |   },
19 |   "scripts": {
20 |     "z-data": "uglifyjs -c -m webkit -o src/z-data.min.js src/z-data.js && z-pen\\to-es2015.fun && z-pen\\to-es2015.fun -src",
21 |     "z-data-all": "z-pen\\to-es2015-z-json.fun && uglifyjs -c -m webkit -o src/z-data.min.all.js -- src/z-data.min.es2015.js src/z-json.es2015.js",
22 |     "z-minifier": "uglifyjs -c -m -o z-pen/z-minifier.min.js z-pen/z-minifier.js",
23 |     "z-template": "uglifyjs -c -m -o src/z-template.min.js src/z-template.js",
24 |     "moloader": "uglifyjs -c -m -o z-pen/res/moloader.min.js z-pen/res/moloader.js",
25 |     "monaco-html": "uglifyjs -c -m -o z-pen/res/html.min.js z-pen/res/html.js",
26 |     "sdrag": "uglifyjs -c -m -o z-pen/res/sdrag.min.js z-pen/res/sdrag.js",
27 |     "polyfill.js": "uglifyjs -c -m -o z-pen/res/polyfill.min.js z-pen/res/polyfill.js"
28 |   },
29 |   "version": "2.2.0"
30 | }
31 | 


--------------------------------------------------------------------------------
/css/README.md:
--------------------------------------------------------------------------------
 1 | # Rules
 2 | 
 3 | ## 1. padding/margin
 4 | p0, m.1, pl2, mt3px, px4%
 5 | m--varname, py--sm, px--lg
 6 | 
 7 | ## 2. max/min - height/width, font-size/line-height, gap/border-radius
 8 | h1, w2, xh100%, nw4%, font12px, lh2
 9 | font--fontsize, lh--lineheight
10 | gap2 gapr2px gapc2 brad2 bradtl2 bradbr2 bradt2 gap--a bradt--a bradb2px
11 | 
12 | ## 3. left/top/right/bottom
13 | l0, t1, r2pt, b3px
14 | l--left, t--top
15 | 
16 | ## 4. opacity/order/z-index
17 | op.1, ord2, z3
18 | op--opacity, z--zlevel
19 | 
20 | ## 5. position ...
21 | ### position/display/cursor/visibility/white-space/user-select/pointer-events
22 | pos-absolute, d-block, cs-pointer, v-visible, ws-nowrap, us-none, pe-all
23 | 
24 | ## 6. overflow
25 | o-scroll, ox-visible, oy-hidden
26 | 
27 | ## 7. content/color/background
28 | content-x, c#000, b#fff
29 | c--color, b--bgcolor
30 | 
31 | ## 8. media
32 | ### sm|s / md|m / lg|l / xl/2xl/xxl/print
33 | s:p0
34 | 
35 | ## 9. state
36 | ### hover|focus[-...]|active|after|before|(first|last)(-...)
37 | hover=b#ff0, m:focus=c#f50, not-active=m0, l:after="content-x cs-move"
38 | out-not-hover=c#000, parent^active=b#000, elder~hover=b#fff, prev+hover=c#fff
39 | 
40 | ## X. group
41 | ### border, border-left, border-top, border-right, border-bottom, background, animation, align, ...
42 | ### bd|bl|bt|br|bb|bg|a|al|font|flex|grid|mask
43 | bd="style: bold; width: 1px; color: red"
44 | 


--------------------------------------------------------------------------------
/dist/z-minifier.min.js:
--------------------------------------------------------------------------------
1 | function minify(t,a){const l="area, base, br, col, embed, hr, img, input, link, meta, param, source, track, wbr".split(/,\s*/),c=(e,t)=>{let s=UglifyJS.minify(t?"$_z_d="+e:e).code;return s?s.replace(/;$|^\$_z_d=/g,""):e},n=e=>e.replace(/^\s+|\s+$|\/\*[^]*?\*\//g,"").replace(/\s{2,}|\r?\n/g," ").replace(/('[^']*'|"[^"]*")|\s*([{};:,])\s*|([(\[])\s+|\s+([)\]])/g,(e,t,s,a,l)=>(t||"")+(s||"")+(a||"")+(l||"")).replace(/[-\w]+:\s*;/g,"").replace(/;+([;}]|$)/g,"$1"),r=(e,t)=>"style"==e?n(t):"class"==e?t.replace(/^\s+|\s+$|(\s)\s+/g,"$1"):/^(?:[@:.#]|on)\w+|^z-data$/.test(e)?c(t,!e.startsWith("on")):t;let i=[],s;if("string"==typeof t){let e=document.createElement("z-temp");e.innerHTML=t.replace(/<[^>]*? html>/,e=>(s=e,"<html>")).replace(/<\/?(html|head|body)\b/g,e=>e+"-mini"),t=e}return p(t),i.join("").replace(/(<\/?(html|head|body))-mini\b/g,(e,t)=>t).replace(/<html>/,e=>s||e);function p(t){for(let e=(t.content||t).firstChild;e;e=e.nextSibling)!function(s){switch(s.nodeType){case 1:i.push("<",s.localName),s.getAttributeNames().forEach(e=>{i.push(" ",e);let t;(t=r(e,s.getAttribute(e)))&&(i.push("="),/[\s>'"]/.test(t)&&(t=t.includes('"')?"'"+t+"'":'"'+t+'"'),i.push(t))}),i.push(">"),"script"==s.localName?i.push(c(s.textContent)):"style"==s.localName?i.push(n(s.textContent)):p(s),l.includes(s.localName)||i.push("</",s.localName,">");break;case 3:/\S/.test(s.nodeValue)&&i.push(s.nodeValue.replace(/\s{2,}/g," "));break;case 8:let e;a&&(e=s.data.match(/^\s*@(\w+):\s*([^]+?)\s*\/?$/))&&(a[e[1]]=e[2])}}(e)}}


--------------------------------------------------------------------------------
/dist/preview.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <head>
 4 |     <meta http-equiv="content-type" content="text/html;charset=utf-8">
 5 |     <meta name="viewport" content="width=device-width,initial-scale=1">
 6 |     <title>z-data studio</title>
 7 |     <meta name="author" content="Wisdom ZHANG" />
 8 |     <meta name="description" content="z-data studio, to develop, debug and preview z-data apps and components">
 9 |     <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
10 |     <link rel="stylesheet" href="./res/style.css">
11 |     <link rel="stylesheet" href="./res/split.css">
12 |     <script src="./res/split.js"></script>
13 |     <style keep>
14 |         body {
15 |             overflow: auto;
16 |             font-family: "Microsoft Yahei";
17 |         }
18 | 
19 |         body[minify] {
20 |             white-space: pre-wrap;
21 |             font-family: consolas;
22 |         }
23 |     </style>
24 |     <script src="./res/polyfill.js" keep></script>
25 |     <script src="./z-data.min.es2015.js" keep></script>
26 | </head>
27 | 
28 | <body>
29 | 
30 | </body>
31 | 
32 | <script>
33 |     (window.ZData = ZData).nobserve = true;
34 |     window.refresh = () => {
35 |         try {
36 |             let html = document.location.href.match(/([\?#])(?:(?:(url)|html)=)?(.+)$/);
37 |             let f = v => (document.body.innerHTML = '', ZData.loadHTML(v, document.body));
38 |             if (html) {
39 |                 if (html[2]) fetch(window.unescape(html[3])).then(res => res.text()).then(f);
40 |                 else f(window.unescape(html[3]));
41 |             }
42 |         } catch (e) { }
43 |     };
44 |     refresh();
45 | </script>
46 | 
47 | </html>


--------------------------------------------------------------------------------
/dist/res/split.css:
--------------------------------------------------------------------------------
 1 | [data-flex-splitter-horizontal],
 2 | [data-flex-splitter-vertical] {
 3 |     display: flex;
 4 |     height: 100%;
 5 | }
 6 | [data-flex-splitter-horizontal] > *,
 7 | [data-flex-splitter-vertical] > * {
 8 |     flex: none;
 9 |     /* overflow: auto; */
10 |     box-sizing: border-box;
11 | }
12 | [data-flex-splitter-horizontal] > [role="separator"],
13 | [data-flex-splitter-vertical] > [role="separator"] {
14 |     touch-action: none;
15 |     display: flex;
16 |     align-items: center;
17 |     justify-content: center;
18 |     background-color: rgba(160, 160, 160, 0.15);
19 |     z-index: 100;
20 | }
21 | [data-flex-splitter-horizontal] > [role="separator"]:hover,
22 | [data-flex-splitter-vertical] > [role="separator"]:hover {
23 |     background-color: rgba(160, 160, 160, 0.45);
24 | }
25 | [data-flex-splitter-horizontal] > [role="separator"]::before,
26 | [data-flex-splitter-vertical] > [role="separator"]::before {
27 |     content: "";
28 |     box-sizing: border-box;
29 |     border: 4px rgba(160, 160, 160, 0.8);
30 | }
31 | [data-flex-splitter-horizontal] > [role="separator"] {
32 |     cursor: ew-resize;
33 |     width: 4px;
34 | }
35 | [data-flex-splitter-horizontal] > [role="separator"]::before {
36 |     width: 8px;
37 |     margin: -2px;
38 |     height: 24px;
39 |     border-style: double;
40 | }
41 | [data-flex-splitter-vertical] {
42 |     flex-direction: column;
43 | }
44 | [data-flex-splitter-vertical] > [role="separator"] {
45 |     cursor: ns-resize;
46 |     height: 4px;
47 | }
48 | [data-flex-splitter-vertical] > [role="separator"]::before {
49 |     width: 24px;
50 |     height: 8px;
51 |     margin: -2px;
52 |     border-style: double;
53 | }
54 | 


--------------------------------------------------------------------------------
/css/atomic-css-rules.txt:
--------------------------------------------------------------------------------
 1 | 
 2 | s         = \w+                                                                 # 小写字母, 正则表达式, 在规则中使用时换成大写
 3 | ss        = [\w\-]+
 4 | n         = -?(\d*\.)?\d+|--\w+
 5 | u         = \w+|%
 6 | PM        = {p: 'padding', m: 'margin'}                                         # 大写, 缩写列表, 在规则左侧时为 p|m, 在规则右侧时展开为 PM[pm]
 7 | HW        = {h: 'height', w: 'width'}
 8 | XN        = {x: 'max', n: 'min'}
 9 | LTRB      = {l: 'left', t: 'top', r: 'right', b: 'bottom'}
10 | FSLH      = {font: 'font-size', lh: 'line-height', gap: 'gap', gapr: 'row-gap', gapc: 'column-gap', brad: 'border-radius'}
11 | OOZ       = {op: 'opacity', ord: 'order', z: 'z-index'}
12 | POS       = {pos: 'position', d: 'display', cs: 'cursor', v: 'visibility', ws: 'white-space', us: 'user-select', pe: 'pointer-events'}
13 | OF        = {o: 'overflow'}
14 | COLOR     = {b: 'background', c: 'color'}
15 | IF        = (s, set, b = '-', a = '') => s ? b + (set[s]||s) + a : ''           # 大写, 函数, 可以应用在规则右侧
16 | NUMS      = (num, unit) => /^--/.test(num) ? `var(${num})` : `${unit ? num : num / 4}${unit || 'rem'}`
17 | MINW      = {sm: 640, s: 640, md: 768, m: 768, lg: 1024, l: 1024, xl: 1280, '2xl': 1536, xxl: 1536}
18 | 
19 | # 规则, 左侧为 BNF 形正则式, (名称 类型), 方括号 [] 表示可选; 规则右式中 {} 翻译为 ${}, [] 翻译为可选的 ${IF(...)}
20 | # padding/margin
21 | (pm PM) [side LTRB] (num N) [unit U] = {pm}[-side]:{NUMS(num,unit)}
22 | # 上式翻译为下式
23 | # /^(?<pm>p|m)(?<side>l|t|r|b)?(?<num>-?(\d*\.)?\d+)(?<unit>\w+|%)?$/, `${PM[pm]}${IF(side,LTRB)}:${NUMS(num,unit)}`
24 | 
25 | # 合并式规则, 翻译成多条短语, 可以再次应用规则
26 | (pm [pm]) x (any) => {pm}l{any} {pm}r{any}
27 | (pm [pm]) y (any) => {pm}t{any} {pm}b{any}
28 | 
29 | # max/min - height/width, font-size/line-height
30 | [xn XN] (hw HW) (num N) [unit U] = [xn-]{hw}:{NUMS(num,unit)}
31 | (fslh FSLH) (num N) [unit U] = {fslh}:{NUMS(num,unit)}
32 | # left/top/right/bottom
33 | (side LTRB) (num N) [unit U] = {side}:{NUMS(num,unit)}
34 | # opacity/order/z-index
35 | (ooz OOZ) (num N) = {ooz}:{/^--/.test(num) ? `var(${num})` : num > 1 && ooz == 'op' ? num / 100 : num}
36 | # position/display/overflow
37 | (pos POS) - (value SS) = {pos}:{value}
38 | (of OF) [xy x|y] - (value S) = {of}[-xy]:{value}
39 | # content/color/background
40 | (name content) [value -\S+] = {name}:'{value ? value.slice(1) : ''}'
41 | (name COLOR) (color #[0-9a-fA-F]+|--\w+) = {name}:{/^--/.test(color) ? `var(${color})` : color}
42 | 
43 | # brad - border-radius
44 | (a brad) (side LTRB) (sidE LTRB) (num N) [unit U] = border-{side}-{sidE}-radius:{NUMS(num,unit)}
45 | (a brad) (side [tb]) (any) => brad{side}l{any} brad{side}r{any}
46 | 
47 | # 属性样式语法
48 | # 1. 空属性, 表达 样式和值, 用 正则表达式 可以直接替换
49 | # 2. 属性=值, 表达为 修饰符=样式和值 组
50 | #    修饰符主要分为 3 种:
51 | #    1. 伪类, 后修饰符, 如 hover=m1, after="p1 text-center", 用于 :hover, :after 等
52 | #    2. 父/前 伪类, 前修饰符, 如 a-hover=m1, a~not-hover=d-none 等
53 | #    3. 媒体查询类
54 | # 3. 属性=值, 表达为 分组=样式和值 组, 如
55 | #    bg="... ... ...", animate="... ... ..."
56 | #
57 | 
58 | media = ((?<media>sm?|md?|lg?|xl|[2x]xl|print):)?
59 | state = ((?<before>(?!not)\w+)(?<to>[-+~\^]))?(?<not>not-)?(?<after>hover|focus(-\w+)?|active|after|before|(first|last)(-\w+)*)
60 | group = (?<group>bd|bl|bt|br|bb|bg|a|al|font|flex|grid|mask)
61 | 


--------------------------------------------------------------------------------
/dist/res/split.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | addEventListener("pointerdown", function(t) {
 3 |     var e = t.target,
 4 |         i = e.parentElement;
 5 |     if (
 6 |         i &&
 7 |         t.isPrimary &&
 8 |         0 === t.button &&
 9 |         "separator" === e.getAttribute("role")
10 |     ) {
11 |         var n = i.hasAttribute("data-flex-splitter-vertical"),
12 |             r = i.hasAttribute("data-flex-splitter-horizontal");
13 |         if (n || r) {
14 |             t.preventDefault();
15 |             var a,
16 |                 o = t.pointerId,
17 |                 s = e.previousElementSibling,
18 |                 p = e.nextElementSibling;
19 |             if (getComputedStyle(i).flexDirection.indexOf('reverse') > 0) {
20 |                 [s, p] = [p, s]
21 |             }
22 |             var h = getComputedStyle(s),
23 |                 l = getComputedStyle(p),
24 |                 d = s.getBoundingClientRect();
25 |             if (n) {
26 |                 var m = d.top + t.offsetY,
27 |                     f = s.offsetHeight + p.offsetHeight,
28 |                     v = Math.max(
29 |                         parseInt(h.minHeight, 10) || 0,
30 |                         f - (parseInt(l.maxHeight, 10) || f)
31 |                     ),
32 |                     u = Math.min(
33 |                         parseInt(h.maxHeight, 10) || f,
34 |                         f - (parseInt(l.minHeight, 10) || 0)
35 |                     );
36 |                 a = function(t) {
37 |                     if (t.pointerId === o) {
38 |                         var e = Math.round(
39 |                             Math.min(Math.max(t.clientY - m, v), u)
40 |                         );
41 |                         (s.style.height = e + "px"),
42 |                             (p.style.height = f - e + "px");
43 |                     }
44 |                 };
45 |             } else {
46 |                 var x = d.left + t.offsetX,
47 |                     g = s.offsetWidth + p.clientWidth,
48 |                     c = Math.max(
49 |                         parseInt(h.minWidth, 10) || 0,
50 |                         g - (parseInt(l.maxWidth, 10) || g)
51 |                     ),
52 |                     I = Math.min(
53 |                         parseInt(h.maxWidth, 10) || g,
54 |                         g - (parseInt(l.minWidth, 10) || 0)
55 |                     );
56 |                 a = function(t) {
57 |                     if (t.pointerId === o) {
58 |                         var e = Math.round(
59 |                             Math.min(Math.max(t.clientX - x, c), I)
60 |                         );
61 |                         (s.style.width = e + "px"),
62 |                             (p.style.width = g - e + "px");
63 |                     }
64 |                 };
65 |             }
66 |             var E = function(t) {
67 |                 t.pointerId === o &&
68 |                     (e.releasePointerCapture(o),
69 |                     e.removeEventListener("pointermove", a),
70 |                     e.removeEventListener("pointerup", E),
71 |                     e.removeEventListener("pointercancel", E));
72 |             };
73 |             a(t),
74 |                 (s.style.flexShrink = p.style.flexShrink = 1),
75 |                 e.addEventListener("pointercancel", E),
76 |                 e.addEventListener("pointerup", E),
77 |                 e.addEventListener("pointermove", a),
78 |                 e.setPointerCapture(o);
79 |         }
80 |     }
81 | });
82 | 


--------------------------------------------------------------------------------
/dist/res/html.min.js:
--------------------------------------------------------------------------------
1 | var lang_zdata={defaultToken:"",tokenPostfix:".html",ignoreCase:!0,tokenizer:{root:[[/<!DOCTYPE/,"metatag","@doctype"],[/<!--/,"comment","@comment"],[/(<)((?:[\w\-]+:)?[\w\-]+)(\s*)(\/>)/,["delimiter","tag","","delimiter"]],[/(<)(script)/,["delimiter",{token:"tag",next:"@script"}]],[/(<)(style)/,["delimiter",{token:"tag",next:"@style"}]],[/(<)((?:[\w\-]+:)?[\w\-]+)/,["delimiter",{token:"tag",next:"@otherTag"}]],[/(<\/)((?:[\w\-]+:)?[\w\-]+)/,["delimiter",{token:"tag",next:"@otherTag"}]],[/</,"delimiter"],[/[^<]+/]],doctype:[[/[^>]+/,"metatag.content"],[/>/,"metatag","@pop"]],comment:[[/-->/,"comment","@pop"],[/[^-]+/,"comment.content"],[/./,"comment.content"]],otherTag:[[/\/?>/,"delimiter","@pop"],[/(=)(\s*)("(?:[^"]*?)"|'(?:[^']*?)'|[^\s>]+)/,["delimiter","","attribute.value"]],[/\b(z-data)(=)(')/,["keyword","delimiter",{token:"attribute.name",next:"@scriptEmbedded1",nextEmbedded:"text/javascript"}]],[/\b(z-data)(=)(")/,["keyword","delimiter",{token:"attribute.name",next:"@scriptEmbedded2",nextEmbedded:"text/javascript"}]],[/([:.@!#]*)([\w\-]+)/,["attribute.value","attribute.name"]],[/=/,"delimiter"],[/[ \t\r\n]+/]],script:[[/type/,"attribute.name","@scriptAfterType"],[/(=)(\s*)("(?:[^"]*?)"|'(?:[^']*?)'|[^\s>]+)/,["delimiter","","attribute.value"]],[/([:.@!#]*)([\w\-]+)/,["attribute.value","attribute.name"]],[/=/,"delimiter"],[/>/,{token:"delimiter",next:"@scriptEmbedded",nextEmbedded:"text/javascript"}],[/[ \t\r\n]+/],[/(<\/)(script\s*)(>)/,["delimiter","tag",{token:"delimiter",next:"@pop"}]]],scriptAfterType:[[/=/,"delimiter","@scriptAfterTypeEquals"],[/>/,{token:"delimiter",next:"@scriptEmbedded",nextEmbedded:"text/javascript"}],[/[ \t\r\n]+/],[/<\/script\s*>/,{token:"@rematch",next:"@pop"}]],scriptAfterTypeEquals:[[/"([^"]*)"/,{token:"attribute.value",switchTo:"@scriptWithCustomType.$1"}],[/'([^']*)'/,{token:"attribute.value",switchTo:"@scriptWithCustomType.$1"}],[/>/,{token:"delimiter",next:"@scriptEmbedded",nextEmbedded:"text/javascript"}],[/[ \t\r\n]+/],[/<\/script\s*>/,{token:"@rematch",next:"@pop"}]],scriptWithCustomType:[[/>/,{token:"delimiter",next:"@scriptEmbedded.$S2",nextEmbedded:"$S2"}],[/(=)(\s*)("(?:[^"]*?)"|'(?:[^']*?)'|[^\s>]+)/,["delimiter","","attribute.value"]],[/([:.@!#]*)([\w\-]+)/,["attribute.value","attribute.name"]],[/=/,"delimiter"],[/[ \t\r\n]+/],[/<\/script\s*>/,{token:"@rematch",next:"@pop"}]],scriptEmbedded:[[/<\/script/,{token:"@rematch",next:"@pop",nextEmbedded:"@pop"}],[/[^<]+/,""]],scriptEmbedded1:[[/'/,{token:"attribute.name",next:"@pop",nextEmbedded:"@pop"}],[/[^']+/,""]],scriptEmbedded2:[[/"/,{token:"attribute.name",next:"@pop",nextEmbedded:"@pop"}],[/[^"]+/,""]],style:[[/type/,"attribute.name","@styleAfterType"],[/(=)(\s*)("(?:[^"]*?)"|'(?:[^']*?)'|[^\s>]+)/,["delimiter","","attribute.value"]],[/([:.@!#]*)([\w\-]+)/,["attribute.value","attribute.name"]],[/=/,"delimiter"],[/>/,{token:"delimiter",next:"@styleEmbedded",nextEmbedded:"text/css"}],[/[ \t\r\n]+/],[/(<\/)(style\s*)(>)/,["delimiter","tag",{token:"delimiter",next:"@pop"}]]],styleAfterType:[[/=/,"delimiter","@styleAfterTypeEquals"],[/>/,{token:"delimiter",next:"@styleEmbedded",nextEmbedded:"text/css"}],[/[ \t\r\n]+/],[/<\/style\s*>/,{token:"@rematch",next:"@pop"}]],styleAfterTypeEquals:[[/"([^"]*)"/,{token:"attribute.value",switchTo:"@styleWithCustomType.$1"}],[/'([^']*)'/,{token:"attribute.value",switchTo:"@styleWithCustomType.$1"}],[/>/,{token:"delimiter",next:"@styleEmbedded",nextEmbedded:"text/css"}],[/[ \t\r\n]+/],[/<\/style\s*>/,{token:"@rematch",next:"@pop"}]],styleWithCustomType:[[/>/,{token:"delimiter",next:"@styleEmbedded.$S2",nextEmbedded:"$S2"}],[/(=)(\s*)("(?:[^"]*?)"|'(?:[^']*?)'|[^\s>]+)/,["delimiter","","attribute.value"]],[/([:.@!#]*)([\w\-]+)/,["attribute.value","attribute.name"]],[/=/,"delimiter"],[/[ \t\r\n]+/],[/<\/style\s*>/,{token:"@rematch",next:"@pop"}]],styleEmbedded:[[/<\/style/,{token:"@rematch",next:"@pop",nextEmbedded:"@pop"}],[/[^<]+/,""]]}};
2 | const EmpELs=["area","base","br","col","embed","hr","img","input","keygen","link","menuitem","meta","param","source","track","wbr"],lang_conf={wordPattern:/(-?\d*\.\d\w*)|([^\`\~\!\@\$\^\&\*\(\)\=\+\[\{\]\}\\\|\;\:\'\"\,\.\<\>\/\s]+)/g,comments:{blockComment:["<!--","-->"]},brackets:[["<!--","-->"],["<",">"],["{","}"],["(",")"]],autoClosingPairs:[{open:"{",close:"}"},{open:"[",close:"]"},{open:"(",close:")"},{open:'"',close:'"'},{open:"'",close:"'"}],surroundingPairs:[{open:'"',close:'"'},{open:"'",close:"'"},{open:"{",close:"}"},{open:"[",close:"]"},{open:"(",close:")"},{open:"<",close:">"}],onEnterRules:[{beforeText:new RegExp(`<(?!(?:${EmpELs.join("|")}))([_:\\w][_:\\w-.\\d]*)([^/>]*(?!/)>)[^<]*$`,"i"),afterText:/^<\/([_:\w][_:\w-.\d]*)\s*>$/i,action:{indentAction:2}},{beforeText:new RegExp(`<(?!(?:${EmpELs.join("|")}))(\\w[\\w\\d]*)([^/>]*(?!/)>)[^<]*$`,"i"),action:{indentAction:1}}],folding:{markers:{start:new RegExp("^\\s*<!--\\s*#region\\b.*-->"),end:new RegExp("^\\s*<!--\\s*#endregion\\b.*-->")}}};
3 | 


--------------------------------------------------------------------------------
/dist/z-data.min.js:
--------------------------------------------------------------------------------
1 | const ZData=(()=>{var n,i=0,B=0,g=0,u=0,e="Attribute",t="Element",s=t+"Sibling",r=t+"Child";const k="z-data",$="z-comp",x="z-none",p="init",w="args",U="key",G="use",z="_z_d",v=`[${k}]`,D="get"+e,Z="set"+e,m="remove",C=m+e,E="first"+r,I="last"+r,J="previous"+s,P="next",A=P+s,y="create"+t,f="parent"+t,L="insertBefore",_="forEach",O="includes",j="length",Q="startsWith",M=(e,t=/ +/)=>e.trim().split(t),T="replace",N="textContent",X="input",Y="change",ee="class",W="style",h="querySelector",F=document,te=(e,t=F)=>t[h+"All"](e),o=(e,t=`[${x}]`)=>e.closest(t),se="addEventListener",K=Object.keys,a=Object.values,dP="deleteProperty",R=(e,t="object")=>typeof e==t,l=e=>R(e,"function"),S=void 0,re=/^(?:camel|prevent|stop|debounce|(\d+)(?:(m?)s)|capture|once|passive|self|out|window|document|(shift|ctrl|alt|meta)|(cmd))$/,ie=/^(?:\s*(?:(\w+)\s*:\s*)?(\w*)(?:\s*,\s*(\w+))?\s+in\s+)?(.+)$/,ae=/^[:@.#!].|^z-d-/,le=/^(?:(:)(:?)(!?)|(@)|([.#!])|(z-d-))?([^.]*)(?:[.]([^.].*))?$/,ne=e=>e&&0<=e.indexOf("${")&&e.indexOf("`")<0,oe=/[-_ ]+/g,c=/-([a-z])/g,d=new WeakMap,pe=(t,s)=>{if(!t||!R(t)||l(t)||t.__ob__||t._isVue||!delete t[s.i])return t;{let e=d.get(t);if(e||((e={s:{},set(e,t,s,r){for(var i in this.s)this.s[i].set(e,t,s,r);return!0},[dP](e,t){let s,r=!0;for(s in this.s)r=this.s[s][dP](e,t)&&r;return r}}).p=new Proxy(t,e),d.set(t,e).set(e.p,e)),!e.s[s.i])for(var r in e.s[s.i]=s,t)try{t[r]=n(t[r],s)}catch(e){}return e.p}},fe=(e,t,s)=>e.dispatchEvent(new CustomEvent(t,{detail:s,bubbles:!0})),q=(t,s)=>{if(!t[z]||!(i<=t[z].age||t[z].ing)){(t[z]||(t[z]={})).age=i,t[z].ing=(t[z].ing||0)+1,s=s&&(t[z].env=s)||t[z].env||{ps:{$emit:fe},d:{}};var e=e=>{u++,Ce(F.body),de({p:t[f],el:t},{...s,d:t[z].zd,r:t},e||i),u--,Ee(F.body)};let l=b(e);var r=t[z].zd;if(!r){let a={i:z+Math.random(),set(e,t,s,r,i){l();try{i||(e[t]=n(s,a))}catch(e){}return!0},[dP](e,t){return t!=this.i&&(l(),delete e[t])}};n=window.ZDataProxy||pe,ZData.proxy=e=>n(e,a),r=V(t,t[D](k),s,S,t[w]||{})||{},t.$data=t[z].zd=r=n(r,a),t[Z](k,""),t[w]&&(r[w]=t[w]),V(t,t[D](p),{...s,d:r})}e(1),t[z].ing--}},ce={},de=(r,i,c)=>{let{p:s,el:a,cp:e}=r,t;var l=a[z]||(a[z]={});let n=l.as||(l.as=(t=ce[a[D]("z-d")])?(l.ps=t.ps,t.as):a.getAttributeNames());if(!n[O](x)){if(!e){let e,t;if(c===S&&n[O](k))return q(a,i);if(n[O]($)&&(e=a[D]($))){try{a[C]($),(t=/^([.\/]|https?:)/.test(e)?fetch(e).then(e=>e.text()):/^z:/.test(e)&&ZData.get?ZData.get(e):V(a,e,i)).then(e=>{var t=V(a,a[D](w),i);"-"==a.tagName[1]||n[O]("del")?Ze(e,s,a,t,1):Ze(e,a,S,t)}).catch(ve)}catch(e){}return}if("template"==a.localName){if(a.content||(a.content=F.createDocumentFragment())[L](a[E],S),e=a[D]("for")){var p=r;l=e;var f=i;c=ie.exec(l);if(c){var d,{p:u,el:v}=p;let e=V(v,c[4],f),t={k:c[1],v:c[2],i:c[3]},i={...f,ps:{...f.ps}},s=v[D](U),r=s&&M(s,"."),a=v[z].ns||(v[z].ns={}),l=0,n=v,o=v[z].age=(v[z].age||0)+1;for(d in r=r&&2==r[j]&&r[0]==t.v&&r[1],t.k&&(i.ps[t.k]=S),t.v&&(i.ps[t.v]=S),t.i&&(i.ps[t.i]=S),e){var m=e[d],m=(t.k&&(i.ps[t.k]=d),t.v&&(i.ps[t.v]=m),t.i&&(i.ps[t.i]=l++),r?m[r]:s?V(v,s,i):t.k?d:m);if(m!==S){t.k&&(i.ps[t.k]=m);let r=n[A],e=a[m];if(e){if(e.age==o)continue;let t=e.t[A],s=e.s!=r;s&&r&&!e.s[z].skip&&(r[z].skip=1,r=(p.el=r)[z].t[A],H(p,i,e=>e!=r,ve),s=e.s!=(r=p[P])),p.el=e.s,p.el[z].skip=0,H({...p},i,e=>e!=t),H(p,i,e=>e!=t,({p:e,el:t})=>{s&&e[L](t,r)}),s?p[P]=r:r=p[P],e.age=o}else p.el=v,me(p,i),p.el=n[A],e=a[m]={age:o,s:p.el},H(p,i,e=>e!=r);e.s[z].t=e.t=n=r?r[J]:u[I]}}K(a).filter(e=>a[e].age!=o)[_](e=>{be({el:a[e].s},a[e].t[A],f),delete a[e]}),p[P]=n[A]}}else{e=a[D]("if");var l=r,c=e,o=i,{p:h,el:b}=l;if(!c||V(b,c,o)){let e,t=l[P],s=ve;b[z].fi?(t=b[z].fi[A],(e=(e=b[D](G))&&V(b,"`"+e+"`",o))&&b[z].u!=e&&(he(l,o),me({...l,el:b,next:t},o))):(me(l,o),s=he),l.el=b[A],H(l,o,e=>e!=t),H(l,o,ue,s),b[z].fi=t?t[J]:h[I]}else he(l,o)}return}}{var g=r;var y=i;c=n;let p=g["el"],s=p[z],a=s.vs||(s.vs=[]),f=s.ps;if(!f){f=s.ps={ps:[]};if(g.cp){ce[++B]={as:c,ps:f};p[Z]("z-d",B)}c[_](n=>{let o=p[D](n);if(ae.test(n)||ne(o)){let s=le.exec(n),r=s[7],i=s[5],a=s[6],l=i?i!="."||!r?(r=ZData.ss(r),W):ee:r;l=ye[l]||l;if(l){let e=s[8]&&M(s[8],".")||[];let t={a:n,k:a?S:l==ee||!e[O]("camel")?l:ge(l),b:s[4]&&3||s[2]&&2||(s[1]||i||a)&&1||S,m:i&&r?[r,...e]:e,e:a?`${ge(l)}({e:this,v:${o||true},m:{${e.map(e=>e+":1").join()}}})`:o,A:s[3]||e[O]("attr")};if(!t.b||i=="!")t.e="`"+t.e+"`";f.ps.push(t);t.b&&p[C](n)}}else ZData.ss(n,o)});let e,t;if((e=p.firstChild)&&e==p.lastChild&&e.nodeType==3&&ne(t=e.nodeValue))f.ps.push({k:N,e:"`"+t+"`",m:[]})}if(!g.cp){let i=0,t=s=>{if("*"==s.k)for(var e in s.K=V(p,s.e,y,s)||{})t({...s,k:e,e:s.K[e],E:1,f:S});else if(3==s.b)$e(g,s,y);else{let t=s.e;s.E||(t=V(p,t,y,s,s.k?S:1),s.k)||(s.e=S);var r=s.m[O]("number");if(s.k&&a[i]!==t&&(ke(p,s,r&&p.u&&R(t,"string")?t[T](/[^\d.-]/g,""):t===S?"":t,a[i]),a[i]=t),2==s.b){if(!s.b2){t="this."+s.k,s.k==W&&s.m[j]&&(t+="[`"+s.m[0]+"`]");let e="text"==p.type?X:Y;s.m[O](X)?e=X:s.m[O](Y)&&(e=Y),s.m[O]("trim")&&(t+=".trim()"),r&&(t="this.u?this.u.replace(/1/,"+t+"):parseFloat("+t+")");r="=this."+z+".vs["+i+"]=";t=/==/.test(s.e)?t+"&&("+s.e[T](/==+/,r)+")":s.e+r+t,s.b2={...s,e:t,k:e,ev:e,f:S}}$e(g,s.b2,y)}i++}};f.ps[_](t)}}H({cp:e,p:a,el:a[E]},i)}},H=(e,t,s,r)=>{for(;e.el&&(!s||s(e.el));e.el=e[P])e[P]=e.el[A],r&&!r(e,t)||de(e,t)},ue=e=>e.hasAttribute("else"),ve=()=>0,me=({p:e,el:t,next:s,n:r},i,a)=>{(r=t[z].node)||(r=(r=t[D](G))&&(t[z].u=r=V(t,"`"+r+"`",i))&&(r=i.r[h](r)||(a=o(i.r[f],v))&&a[h](r))&&r.content||t.content,t[z].u||(t[z].node=r),H({cp:1,p:r,el:r[E]}));for(let l=r[E];l;l=l[A])r=l.cloneNode(!0),e[L](r,s)},he=(e,t)=>{var s;e.el[z]&&e.el[z].fi&&(s=e.el[z].fi[A],e.el[z].fi=S,e.el=e[P],be(e,s,t))},be=(e,t,s)=>{H(e,s,e=>e!=t,({el:e})=>{e[m]()})},ge=e=>e[T](c,(e,t)=>t.toUpperCase()),ye={css:W,text:N,html:"innerHTML"},ke=(s,e,r,i)=>{if(e.k==ee){if(e.m[j]){let t=""===e.e||r;r={},e.m[_](e=>{e.endsWith("-")?(r[e+t]=1,i&&(r[e+i]=0)):r[e]=t})}let t=s.classList;if(!Array.isArray(r)){if(R(r)){for(var a in r)r[a]?t.add(a):t[m](a);return}r=r?M(r):[]}r[_](e=>t.add(e))}else e.k==W&&(e.m[j]&&(r=1==e.m[j]?{[e.m[0]]:r}:{[e.m[0]]:r&&e.m[1]}),R(r))?K(r)[_](e=>{!1===r[e]?s[W].removeProperty(e):"-"==e[0]?s[W].setProperty(e,r[e]):s[W][e]=r[e]}):e.A?!1===r?s[C](e.k):s[Z](e.k,r):s[e.k]=r},b=(s,r)=>{let i;return(...e)=>{let t=this;i=(i=r?clearTimeout(i):i)||setTimeout(()=>{i=S,s.apply(t,e)},r)}},$e=({el:n},t,o)=>{let{a:p,k:f,e:c,ev:s,m:d}=t;if(!n[z][p]){let i=d[O]("window")?window:d[O]("document")||d[O]("out")?F:n,a=e=>{if(!(d[O]("self")&&n!=e.target||d[O]("out")&&n.contains(e.target))){if(f[Q]("key")||f[Q]("mouse")||f.endsWith("click")){for(var t of d){t=re.exec(t);if(t&&(t[3]||t[4])){t=t[3]||t[4]&&"meta";if(!t||!e[t+"Key"])return}}var s=d.filter(e=>!re.test(e));if(1==s[j])if(f[Q]("key")&&e.key){var r=s[0][T](oe,"");if(({space:" ",slash:"/",gt:">",eq:"="}[r]||r)!=(e.key.toLowerCase()[T](oe,"")||" "))return}else if(["left","mid","right"][e.button]!=s[0])return}return d[O]("prevent")&&e.preventDefault(),d[O]("stop")&&e.stopPropagation(),d[O]("once")&&i.removeEventListener(f,a,l),V(n,c,{...o,ps:{...n[z][p],$el:o.r}})}},e=d.indexOf("debounce");0<=e&&(e=d[e+1],t=re.exec(e),e=t&&t[1]?t[2]?+t[1]:1e3*t[1]:250,a=b(a,e));let l={capture:d[O]("capture"),passive:d[O]("passive")};i[se](f,a,l),s&&!n[e="fireChange"]&&(n[e]=()=>fe(n,s))}n[z][p]={...o.ps}},xe={},we=(e,t,s,r)=>{s=r&&r.f||xe[s+=e]||(xe[s]=new Function(["$2D",...t],"var R3$;with($2D){R3$="+e+"};return R3$"));return r&&!r.f&&(r.f=s),s},V=(e,t,s,r,i)=>t&&De(()=>l(t)?t.call(e,s.r):(t=we(t,K(s.ps),K(s.ps).join(","),r).call(e,s.d,...a(s.ps)),i&&l(t)?t(i):t),{el:e,exp:t}),ze=(e,t,s)=>console.warn(`E ${k}: ${s} [${t}]`,e),De=(e,{el:t,exp:s})=>{try{var r=e();return r instanceof Promise?r.catch(e=>ze(t,s,e)):r}catch(e){ze(t,s,e)}},Ze=(e,s,r,t,i,a)=>{s=s||F.body;let l,n=[],o,p="",f,c=F[y](k),d=((l=s[D]("z-i"))||s[Z]("z-i",l=++g),b(()=>{--u<0&&(u=0),n[j]&&n.shift()()}));c[ye.html]=e[T](/<!--[^]*?-->/g,"")[T](/^z-data\s*/,()=>a=1)[T](/<(script)([^>]*)>([^]*?)<\/\1>/gi,(e,t,r,i)=>{var s=r.match(/src\s*=\s*(?:'([^']+)|"([^"]+)|(\S+))/);if((r=s&&(s[1]||s[2]||s[3]))&&!te(`script[src="${r}"]`)[j]||i){let s=F[y]("script"),t=(e,t)=>(o=()=>(F.body[L](s,S),e&&e()),t?o():n.push(o));s[Z](x,""),r?ZData.get?n.push(()=>ZData.get(r).then(e=>(s[N]=e,t(d,1)))):(s.src=r,s.onload=s.onerror=d,t()):a&&!p?p=i:(s[N]=i,t(d))}return""})[T](/(<style[^>@]*>)([^]*?)(?=<\/style>)/gi,(e,t,s)=>t+s[T](/\s*([^{}]+)(?=\{)/g,(e,t)=>/^[@\d]|^(from|to)\b/.test(t)?t:M(t,/\s*,\s*/).map(e=>e[T](/^(\[z-i=.*?\] )?(.*)/,(e,t,s)=>`[z-i="${l}"] `+s)).join(","))),f=c[h](v)||c[E],a&&p&&f[Z](k,`args=>{${p[T](/\bexport\s+default(?=\s*\{)/,"return")}}`),f&&t&&(f[w]=t),n.push(()=>{for(let e=c[E],t=e&&e[A];e;t=(e=t)&&t[A])s[L](e,r);i&&r&&r[m](),d()}),n.push(()=>f&&q(f)),u+=n[j],d()},Ce=e=>e[z]&&e[z].ob&&e[z].ob.disconnect(),Ee=e=>{let t=(e[z]||(e[z]={})).ob||(e[z].ob=new MutationObserver(r=>{if(!u)if(e==F.body){if(r[j]<99){let e=1;for(let t=0,s;t<r[j];t++)e=e&&(o(s=r[t].target)||!o(s,v)&&!s[h](v));if(e)return}Pe()}else q(e)}));ZData.nobserve||b(()=>t.observe(e,{childList:!0,subtree:!0}))},Pe=b(()=>Ae(S,1)),Ae=(e,t)=>{t||++i,++u,Ce(F.body),te(v)[_](e=>o(e)||q(e)),--u,Ee(F.body)},Le={};return F[se]("DOMContentLoaded",Ae),{start:Ae,loadHTML:Ze,on:(e,t)=>((Le[e]=Le[e]||[]).push(t),ZData),call:(e,t)=>(Le[e]||[])[_](e=>e(t)),ss:e=>e,deb:b}})();


--------------------------------------------------------------------------------
/dist/z-data.min.es2015.js:
--------------------------------------------------------------------------------
1 | const ZData=(()=>{var n,i=0,B=0,g=0,u=0,e="Attribute",t="Element",s=t+"Sibling",r=t+"Child";const k="z-data",$="z-comp",x="z-none",p="init",w="args",U="key",G="use",z="_z_d",v=`[${k}]`,D="get"+e,Z="set"+e,m="remove",C=m+e,E="first"+r,I="last"+r,J="previous"+s,P="next",A=P+s,y="create"+t,f="parent"+t,L="insertBefore",_="forEach",O="includes",j="length",Q="startsWith",M=(e,t=/ +/)=>e.trim().split(t),T="replace",N="textContent",X="input",Y="change",ee="class",W="style",h="querySelector",F=document,te=(e,t=F)=>t[h+"All"](e),o=(e,t=`[${x}]`)=>e.closest(t),se="addEventListener",K=Object.keys,a=Object.values||(o=>K(o).map(k=>o[k])),Oa=Object.assign,dP="deleteProperty",R=(e,t="object")=>typeof e==t,l=e=>R(e,"function"),S=void 0,re=/^(?:camel|prevent|stop|debounce|(\d+)(?:(m?)s)|capture|once|passive|self|out|window|document|(shift|ctrl|alt|meta)|(cmd))$/,ie=/^(?:\s*(?:(\w+)\s*:\s*)?(\w*)(?:\s*,\s*(\w+))?\s+in\s+)?(.+)$/,ae=/^[:@.#!].|^z-d-/,le=/^(?:(:)(:?)(!?)|(@)|([.#!])|(z-d-))?([^.]*)(?:[.]([^.].*))?$/,ne=e=>e&&0<=e.indexOf("${")&&e.indexOf("`")<0,oe=/[-_ ]+/g,c=/-([a-z])/g,d=new WeakMap,pe=(t,s)=>{if(!t||!R(t)||l(t)||t.__ob__||t._isVue||!delete t[s.i])return t;{let e=d.get(t);if(e||((e={s:{},set(e,t,s,r){for(var i in this.s)this.s[i].set(e,t,s,r);return!0},[dP](e,t){let s,r=!0;for(s in this.s)r=this.s[s][dP](e,t)&&r;return r}}).p=new Proxy(t,e),d.set(t,e).set(e.p,e)),!e.s[s.i])for(var r in e.s[s.i]=s,t)try{t[r]=n(t[r],s)}catch(e){}return e.p}},fe=(e,t,s)=>e.dispatchEvent(new CustomEvent(t,{detail:s,bubbles:!0})),q=(t,s)=>{if(!t[z]||!(i<=t[z].age||t[z].ing)){(t[z]||(t[z]={})).age=i,t[z].ing=(t[z].ing||0)+1,s=s&&(t[z].env=s)||t[z].env||{ps:{$emit:fe},d:{}};var e=e=>{u++,Ce(F.body),de({p:t[f],el:t},Oa({},s,{d:t[z].zd,r:t}),e||i),u--,Ee(F.body)};let l=b(e);var r=t[z].zd;if(!r){let a={i:z+Math.random(),set(e,t,s,r,i){l();try{i||(e[t]=n(s,a))}catch(e){}return!0},[dP](e,t){return t!=this.i&&(l(),delete e[t])}};n=window.ZDataProxy||pe,ZData.proxy=e=>n(e,a),r=V(t,t[D](k),s,S,t[w]||{})||{},t.$data=t[z].zd=r=n(r,a),t[Z](k,""),t[w]&&(r[w]=t[w]),V(t,t[D](p),Oa({},s,{d:r}))}e(1),t[z].ing--}},ce={},de=(r,i,c)=>{let{p:s,el:a,cp:e}=r,t;var l=a[z]||(a[z]={});let n=l.as||(l.as=(t=ce[a[D]("z-d")])?(l.ps=t.ps,t.as):a.getAttributeNames());if(!n[O](x)){if(!e){let e,t;if(c===S&&n[O](k))return q(a,i);if(n[O]($)&&(e=a[D]($))){try{a[C]($),(t=/^([.\/]|https?:)/.test(e)?fetch(e).then(e=>e.text()):/^z:/.test(e)&&ZData.get?ZData.get(e):V(a,e,i)).then(e=>{var t=V(a,a[D](w),i);"-"==a.tagName[1]||n[O]("del")?Ze(e,s,a,t,1):Ze(e,a,S,t)}).catch(ve)}catch(e){}return}if("template"==a.localName){if(a.content||(a.content=F.createDocumentFragment())[L](a[E],S),e=a[D]("for")){var p=r;l=e;var f=i;c=ie.exec(l);if(c){var d,{p:u,el:v}=p;let e=V(v,c[4],f),t={k:c[1],v:c[2],i:c[3]},i=Oa({},f,{ps:Oa({},f.ps,{})}),s=v[D](U),r=s&&M(s,"."),a=v[z].ns||(v[z].ns={}),l=0,n=v,o=v[z].age=(v[z].age||0)+1;for(d in r=r&&2==r[j]&&r[0]==t.v&&r[1],t.k&&(i.ps[t.k]=S),t.v&&(i.ps[t.v]=S),t.i&&(i.ps[t.i]=S),e){var m=e[d],m=(t.k&&(i.ps[t.k]=d),t.v&&(i.ps[t.v]=m),t.i&&(i.ps[t.i]=l++),r?m[r]:s?V(v,s,i):t.k?d:m);if(m!==S){t.k&&(i.ps[t.k]=m);let r=n[A],e=a[m];if(e){if(e.age==o)continue;let t=e.t[A],s=e.s!=r;s&&r&&!e.s[z].skip&&(r[z].skip=1,r=(p.el=r)[z].t[A],H(p,i,e=>e!=r,ve),s=e.s!=(r=p[P])),p.el=e.s,p.el[z].skip=0,H(Oa({},p,{}),i,e=>e!=t),H(p,i,e=>e!=t,({p:e,el:t})=>{s&&e[L](t,r)}),s?p[P]=r:r=p[P],e.age=o}else p.el=v,me(p,i),p.el=n[A],e=a[m]={age:o,s:p.el},H(p,i,e=>e!=r);e.s[z].t=e.t=n=r?r[J]:u[I]}}K(a).filter(e=>a[e].age!=o)[_](e=>{be({el:a[e].s},a[e].t[A],f),delete a[e]}),p[P]=n[A]}}else{e=a[D]("if");var l=r,c=e,o=i,{p:h,el:b}=l;if(!c||V(b,c,o)){let e,t=l[P],s=ve;b[z].fi?(t=b[z].fi[A],(e=(e=b[D](G))&&V(b,"`"+e+"`",o))&&b[z].u!=e&&(he(l,o),me(Oa({},l,{el:b,next:t}),o))):(me(l,o),s=he),l.el=b[A],H(l,o,e=>e!=t),H(l,o,ue,s),b[z].fi=t?t[J]:h[I]}else he(l,o)}return}}{var g=r;var y=i;c=n;let p=g["el"],s=p[z],a=s.vs||(s.vs=[]),f=s.ps;if(!f){f=s.ps={ps:[]};if(g.cp){ce[++B]={as:c,ps:f};p[Z]("z-d",B)}c[_](n=>{let o=p[D](n);if(ae.test(n)||ne(o)){let s=le.exec(n),r=s[7],i=s[5],a=s[6],l=i?i!="."||!r?(r=ZData.ss(r),W):ee:r;l=ye[l]||l;if(l){let e=s[8]&&M(s[8],".")||[];let t={a:n,k:a?S:l==ee||!e[O]("camel")?l:ge(l),b:s[4]&&3||s[2]&&2||(s[1]||i||a)&&1||S,m:i&&r?[r,...e]:e,e:a?`${ge(l)}({e:this,v:${o||true},m:{${e.map(e=>e+":1").join()}}})`:o,A:s[3]||e[O]("attr")};if(!t.b||i=="!")t.e="`"+t.e+"`";f.ps.push(t);t.b&&p[C](n)}}else ZData.ss(n,o)});let e,t;if((e=p.firstChild)&&e==p.lastChild&&e.nodeType==3&&ne(t=e.nodeValue))f.ps.push({k:N,e:"`"+t+"`",m:[]})}if(!g.cp){let i=0,t=s=>{if("*"==s.k)for(var e in s.K=V(p,s.e,y,s)||{})t(Oa({},s,{k:e,e:s.K[e],E:1,f:S}));else if(3==s.b)$e(g,s,y);else{let t=s.e;s.E||(t=V(p,t,y,s,s.k?S:1),s.k)||(s.e=S);var r=s.m[O]("number");if(s.k&&a[i]!==t&&(ke(p,s,r&&p.u&&R(t,"string")?t[T](/[^\d.-]/g,""):t===S?"":t,a[i]),a[i]=t),2==s.b){if(!s.b2){t="this."+s.k,s.k==W&&s.m[j]&&(t+="[`"+s.m[0]+"`]");let e="text"==p.type?X:Y;s.m[O](X)?e=X:s.m[O](Y)&&(e=Y),s.m[O]("trim")&&(t+=".trim()"),r&&(t="this.u?this.u.replace(/1/,"+t+"):parseFloat("+t+")");r="=this."+z+".vs["+i+"]=";t=/==/.test(s.e)?t+"&&("+s.e[T](/==+/,r)+")":s.e+r+t,s.b2=Oa({},s,{e:t,k:e,ev:e,f:S})}$e(g,s.b2,y)}i++}};f.ps[_](t)}}H({cp:e,p:a,el:a[E]},i)}},H=(e,t,s,r)=>{for(;e.el&&(!s||s(e.el));e.el=e[P])e[P]=e.el[A],r&&!r(e,t)||de(e,t)},ue=e=>e.hasAttribute("else"),ve=()=>0,me=({p:e,el:t,next:s,n:r},i,a)=>{(r=t[z].node)||(r=(r=t[D](G))&&(t[z].u=r=V(t,"`"+r+"`",i))&&(r=i.r[h](r)||(a=o(i.r[f],v))&&a[h](r))&&r.content||t.content,t[z].u||(t[z].node=r),H({cp:1,p:r,el:r[E]}));for(let l=r[E];l;l=l[A])r=l.cloneNode(!0),e[L](r,s)},he=(e,t)=>{var s;e.el[z]&&e.el[z].fi&&(s=e.el[z].fi[A],e.el[z].fi=S,e.el=e[P],be(e,s,t))},be=(e,t,s)=>{H(e,s,e=>e!=t,({el:e})=>{e[m]()})},ge=e=>e[T](c,(e,t)=>t.toUpperCase()),ye={css:W,text:N,html:"innerHTML"},ke=(s,e,r,i)=>{if(e.k==ee){if(e.m[j]){let t=""===e.e||r;r={},e.m[_](e=>{e.endsWith("-")?(r[e+t]=1,i&&(r[e+i]=0)):r[e]=t})}let t=s.classList;if(!Array.isArray(r)){if(R(r)){for(var a in r)r[a]?t.add(a):t[m](a);return}r=r?M(r):[]}r[_](e=>t.add(e))}else e.k==W&&(e.m[j]&&(r=1==e.m[j]?{[e.m[0]]:r}:{[e.m[0]]:r&&e.m[1]}),R(r))?K(r)[_](e=>{!1===r[e]?s[W].removeProperty(e):"-"==e[0]?s[W].setProperty(e,r[e]):s[W][e]=r[e]}):e.A?!1===r?s[C](e.k):s[Z](e.k,r):s[e.k]=r},b=(s,r)=>{let i;return(...e)=>{let t=this;i=(i=r?clearTimeout(i):i)||setTimeout(()=>{i=S,s.apply(t,e)},r)}},$e=({el:n},t,o)=>{let{a:p,k:f,e:c,ev:s,m:d}=t;if(!n[z][p]){let i=d[O]("window")?window:d[O]("document")||d[O]("out")?F:n,a=e=>{if(!(d[O]("self")&&n!=e.target||d[O]("out")&&n.contains(e.target))){if(f[Q]("key")||f[Q]("mouse")||f.endsWith("click")){for(var t of d){t=re.exec(t);if(t&&(t[3]||t[4])){t=t[3]||t[4]&&"meta";if(!t||!e[t+"Key"])return}}var s=d.filter(e=>!re.test(e));if(1==s[j])if(f[Q]("key")&&e.key){var r=s[0][T](oe,"");if(({space:" ",slash:"/",gt:">",eq:"="}[r]||r)!=(e.key.toLowerCase()[T](oe,"")||" "))return}else if(["left","mid","right"][e.button]!=s[0])return}return d[O]("prevent")&&e.preventDefault(),d[O]("stop")&&e.stopPropagation(),d[O]("once")&&i.removeEventListener(f,a,l),V(n,c,Oa({},o,{ps:Oa({},n[z][p],{$el:o.r})}))}},e=d.indexOf("debounce");0<=e&&(e=d[e+1],t=re.exec(e),e=t&&t[1]?t[2]?+t[1]:1e3*t[1]:250,a=b(a,e));let l={capture:d[O]("capture"),passive:d[O]("passive")};i[se](f,a,l),s&&!n[e="fireChange"]&&(n[e]=()=>fe(n,s))}n[z][p]=Oa({},o.ps,{})},xe={},we=(e,t,s,r)=>{s=r&&r.f||xe[s+=e]||(xe[s]=new Function(["$2D",...t],"var R3$;with($2D){R3$="+e+"};return R3$"));return r&&!r.f&&(r.f=s),s},V=(e,t,s,r,i)=>t&&De(()=>l(t)?t.call(e,s.r):(t=we(t,K(s.ps),K(s.ps).join(","),r).call(e,s.d,...a(s.ps)),i&&l(t)?t(i):t),{el:e,exp:t}),ze=(e,t,s)=>console.warn(`E ${k}: ${s} [${t}]`,e),De=(e,{el:t,exp:s})=>{try{var r=e();return r instanceof Promise?r.catch(e=>ze(t,s,e)):r}catch(e){ze(t,s,e)}},Ze=(e,s,r,t,i,a)=>{s=s||F.body;let l,n=[],o,p="",f,c=F[y](k),d=((l=s[D]("z-i"))||s[Z]("z-i",l=++g),b(()=>{--u<0&&(u=0),n[j]&&n.shift()()}));c[ye.html]=e[T](/<!--[^]*?-->/g,"")[T](/^z-data\s*/,()=>a=1)[T](/<(script)([^>]*)>([^]*?)<\/\1>/gi,(e,t,r,i)=>{var s=r.match(/src\s*=\s*(?:'([^']+)|"([^"]+)|(\S+))/);if((r=s&&(s[1]||s[2]||s[3]))&&!te(`script[src="${r}"]`)[j]||i){let s=F[y]("script"),t=(e,t)=>(o=()=>(F.body[L](s,S),e&&e()),t?o():n.push(o));s[Z](x,""),r?ZData.get?n.push(()=>ZData.get(r).then(e=>(s[N]=e,t(d,1)))):(s.src=r,s.onload=s.onerror=d,t()):a&&!p?p=i:(s[N]=i,t(d))}return""})[T](/(<style[^>@]*>)([^]*?)(?=<\/style>)/gi,(e,t,s)=>t+s[T](/\s*([^{}]+)(?=\{)/g,(e,t)=>/^[@\d]|^(from|to)\b/.test(t)?t:M(t,/\s*,\s*/).map(e=>e[T](/^(\[z-i=.*?\] )?(.*)/,(e,t,s)=>`[z-i="${l}"] `+s)).join(","))),f=c[h](v)||c[E],a&&p&&f[Z](k,`args=>{${p[T](/\bexport\s+default(?=\s*\{)/,"return")}}`),f&&t&&(f[w]=t),n.push(()=>{for(let e=c[E],t=e&&e[A];e;t=(e=t)&&t[A])s[L](e,r);i&&r&&r[m](),d()}),n.push(()=>f&&q(f)),u+=n[j],d()},Ce=e=>e[z]&&e[z].ob&&e[z].ob.disconnect(),Ee=e=>{let t=(e[z]||(e[z]={})).ob||(e[z].ob=new MutationObserver(r=>{if(!u)if(e==F.body){if(r[j]<99){let e=1;for(let t=0,s;t<r[j];t++)e=e&&(o(s=r[t].target)||!o(s,v)&&!s[h](v));if(e)return}Pe()}else q(e)}));ZData.nobserve||b(()=>t.observe(e,{childList:!0,subtree:!0}))},Pe=b(()=>Ae(S,1)),Ae=(e,t)=>{t||++i,++u,Ce(F.body),te(v)[_](e=>o(e)||q(e)),--u,Ee(F.body)},Le={};return F[se]("DOMContentLoaded",Ae),{start:Ae,loadHTML:Ze,on:(e,t)=>((Le[e]=Le[e]||[]).push(t),ZData),call:(e,t)=>(Le[e]||[])[_](e=>e(t)),ss:e=>e,deb:b}})();null==Element.prototype.getAttributeNames&&(Element.prototype.getAttributeNames=function(){for(var t=this.attributes,e=t.length,r=new Array(e),n=0;n<e;n++)r[n]=t[n].name;return r});NodeList.prototype.forEach||(NodeList.prototype.forEach=Array.prototype.forEach);


--------------------------------------------------------------------------------
/README-cn.md:
--------------------------------------------------------------------------------
  1 | # z-data
  2 | 
  3 | Z-data 是一个超轻量级的零配置嵌入式前端框架.
  4 | 
  5 | [[English](./README-en.md)] [[中文](./README-cn.md)]
  6 | 
  7 | # 1. 特性
  8 | 
  9 | - 没有虚拟 DOM
 10 | - 零配置零依赖, 无需编译
 11 | - 极简, 超轻量级
 12 | - H5 模板技术, 支持 for/if/else/use 等
 13 | - 模板支持多根
 14 | - 支持双向数据绑定和事件 
 15 | - 嵌入式, 可以和其他框架无缝嵌入
 16 | - 更多语法糖, 特别对 class 和 style 友好
 17 | - 鼓励配合 tailwind 以 H5 DOM 为中心
 18 | 
 19 | # 2. 示例
 20 | 
 21 | ```html
 22 | <div z-data="{name:'hello-world.html',items:{i:1,j:2,k:3}}"
 23 |      #background=`silver`
 24 | >
 25 |     <template for='k:v,i in items' key=k>
 26 |         <template if=!i>
 27 |             <div :text=name
 28 |                  :style={fontSize:`200%`}
 29 |                  #color=`#fa0a`
 30 |             ></div>
 31 |             <div class=t0
 32 |                  :class={t1:true}
 33 |                  .t2
 34 |                  :k=k
 35 |             >[if !i] i=${i}</div>
 36 |         </template>
 37 |         <template else if='k=="j"'>
 38 |             <div :css.font-size=`120%`>[if k=="j"] k=${k}</div>
 39 |         </template>
 40 |         <template else>
 41 |             <div #font-weight=`bold`>[else] k=${k}</div>
 42 |         </template>
 43 |     </template>
 44 | </div>
 45 | ```
 46 | 
 47 | 在线 demo
 48 | 
 49 | * https://codepen.io/funlang/pen/NWdOQye
 50 | 
 51 | TodoMVC:
 52 | 
 53 | * https://codepen.io/funlang/pen/ExZOGJy
 54 | 
 55 | 复杂数据绑定
 56 | 
 57 | * https://codepen.io/funlang/pen/OJWrJep
 58 | 
 59 | 一个表单示例:
 60 | 
 61 | * https://funlang.org/z-data/?url=./test/z-data-form-demo.html
 62 | 
 63 | z-cloak example:
 64 | 
 65 | ```html
 66 | z-data
 67 | <div z-cloak :z-cloak.attr=false>z-cloak example</div>
 68 | 
 69 | <style>
 70 |   [z-cloak] {
 71 |     display: none;
 72 |   }
 73 | </style>
 74 | ```
 75 | 
 76 | ## 2.1. z-data studio
 77 | 
 78 | 可以在线创建/调试/预览 z-data 代码
 79 | 
 80 | * https://funlang.org/z-data/
 81 | 
 82 | # 3. 用法
 83 | 
 84 | ## 3.1. 安装
 85 | 
 86 | - CDN https://cdn.jsdelivr.net/gh/Funlang/z-data@main/dist/z-data.min.js
 87 | 
 88 |   ```html
 89 |   <script src=//cdn.jsdelivr.net/gh/Funlang/z-data@main/dist/z-data.min.js></script>
 90 |   ```
 91 | 
 92 | ## 3.2. 作用域
 93 | 
 94 |   - z-data 属性创建 ZData 作用域
 95 | 
 96 |     ```html
 97 |     <tag z-data=...></tag>
 98 |     ```
 99 |     z-data 支持一个 init 函数, 在组件初始化时执行
100 | 
101 |     ```html
102 |     <tag z-data=... init=...></tag>
103 |     ```
104 | 
105 |     z-data 表达式可以是一个函数表达式, 如:
106 | 
107 |     ```html
108 |     <tag z-data="(args=>{
109 |         // some codes ...
110 |         return {
111 |           // some props ...
112 |         }
113 |       })()"></tag>
114 | 
115 |     <tag z-data="args=>{
116 |         // some codes ...
117 |         return {
118 |           // some props ...
119 |         }
120 |       }"></tag>
121 |     ```
122 | 
123 |     z-data HTML 模块文件 (文件开头是 z-data)
124 |     
125 |     ```html
126 |     z-data
127 |     <tag init=...></tag>
128 | 
129 |     <script>
130 |       // some codes ...
131 |       return {
132 |         // some props ...
133 |       }
134 |     </script>
135 |     ```
136 | 
137 |   - z-none 关闭 ZData 作用域, 其内部节点 ZData 会跳过
138 | 
139 |     ```html
140 |     <tag z-none>
141 |       ...
142 |     </tag>
143 |     ```
144 | 
145 |   - 与其他框架共存
146 | 
147 |     在 ZData 根节点用类似以下的方式处理 (x-ignore 改为其他框架关闭作用域的属性名)
148 |     ```html
149 |     <tag z-data=... x-ignore></tag>
150 |     ```
151 |     在其他框架根节点加 z-none 即可
152 | 
153 | ## 3.3. 模板
154 | 
155 |   - template for
156 | 
157 |     ```html
158 |     <template for='k:v,i in ...' key=...></template>
159 |     ```
160 |     ZData 依赖 key, 如果没有指定 key, 则优先选用 k 做 key, 否则用 v 做 key 键
161 |     k : v , i 可以部分可选, 如:
162 | 
163 |     ```html
164 |     <template for='k:v,i in items'></template>
165 |     <template for='  v   in items'></template>
166 |     <template for='k:    in items'></template>
167 |     <template for='   ,i in items'></template>
168 |     <template for='k:v   in items'></template>
169 |     <template for='  v,i in items'></template>
170 |     <template for=items></template>
171 |     ```
172 | 
173 |   - template if/else
174 | 
175 |     ```html
176 |     <template if=...></template>
177 |     <template else if=...></template>
178 |     <template else></template>
179 |     ```
180 | 
181 |   - template use
182 | 
183 |     ```html
184 |     <z z-none>
185 |         <template id=t1>
186 |             <div>template id = t1</div>
187 |         </template>
188 |     </z>
189 | 
190 |     <template use=#t1></template>
191 |     ```
192 | 
193 | ## 3.4. 绑定
194 | 
195 |   - : 用来做属性绑定, 其中 :: 是双向绑定
196 | 
197 |     ```html
198 |     <tag :attr-name1=... ::attr-name2=...></tag>
199 |     ```
200 | 
201 | ### 3.4.1. :text :html
202 | 
203 |   :text :html 分别对应 textContent 和 innerHTML
204 | 
205 | ### 3.4.2. :class
206 | 
207 |   :class 支持 [] {} 和 字符串三种, 这些 classname 会按顺序合并处理
208 | 
209 | ### 3.4.3. :class 简写
210 | 
211 | :class 支持 :class.name1.name2=...
212 |   ```
213 |   可以简写为 .name1.name2=...
214 |   如果 classname 后面为 -, 且返回值不是 boolean, 则将其值加入到 classname, 如:
215 |     .p-=1 则 classList 里会增加 p-1
216 |   ```
217 | 
218 | ### 3.4.4. :style
219 | 
220 | :style 支持 :css 别名, 支持 {} 和字符串两种, 字符串会按顺序覆盖
221 | 
222 | ### 3.4.5. :style 简写
223 | 
224 | :style 支持 :style.name.value=...
225 |   ```
226 |   :style.name=value / :css.name=value
227 |   :style.name.value=条件 / :css.name.value=...
228 |   可以简写为 ..name 和 #name, 以及 !name=string-value, 如下:
229 |     ..width=`100px`
230 |     #border-width=`4px`
231 |     !border-width=4px
232 |     #--a-css-var=`'${theCssVarValue}'`
233 |   ```
234 | 
235 | #### 3.4.5.1 ZData.ss(s)
236 | 
237 | ```
238 | ZData.ss = (s) => AShorthandMap[s] || s;
239 | ```
240 | 
241 | ### 3.4.6. !!! 特别注意
242 | 
243 | #### 3.4.6.1. : :: @ . .. \#
244 | 
245 | 后面的值全部都是 js 表达式, 可以是 js 变量, 或者是字符串, 字符串要用 ' " ` 套住
246 | 
247 | #### 3.4.6.2. ${...}
248 | 
249 | 非绑定的属性值中含有 \${...}, 会自动解析成一个字符串, 相当于 \`...${...}...`
250 | 
251 | #### 3.4.6.3. !
252 | 
253 | ! 与 含有 ${} 的属性值类似, 会自动解析成 :css.style-name=\`string-value`
254 | 
255 | ### 3.4.7. attr
256 | 
257 | :xxx.attr 表示为可视 attribute 属性, 否则默认为不可见 prop 属性
258 | 
259 | :xxx.attr === false 表示为 boolean attribute 属性
260 | 
261 | #### 3.4.7.1. attr 简写
262 | ```
263 | :!tag-attr  -> :tag-attr.attr
264 | ::!tag-attr -> ::tag-attr.attr
265 | ```
266 | ### 3.4.8. camel
267 | 
268 | :xxx.camel 支持驼峰表示法
269 | 
270 | ::value=propName, ::style.value=propName, ::css.value=propName
271 |   ```
272 |   其中 propName 只支持驼峰表示法, DOM 属性(包括 style)可以增加 .camel 修饰符
273 |   双向绑定默认在 change 中触发回写行为, 只有 input text 同时在 input 中触发回写
274 |   可以增加 .input / .change 强制在 input / change 中回写
275 |   支持 .trim / .number 修饰符
276 |   ```
277 |   ```
278 |   目前有些属性如 style.value 修改, 不会自动触发响应式, 需要在当前执行 el 执行 el.fireChange()
279 |   ```
280 | 
281 | ### 3.4.9. input type='radio'
282 | ```
283 | ::checked=opt==this.value
284 | 
285 | 注: opt 是一个 data 内的属性变量名
286 | ```
287 | 
288 | ## 3.5. 事件
289 | 
290 | @ 用来绑定事件, 支持 modifiers
291 | 
292 | ### 3.5.1. 全局
293 | 
294 | ```
295 | camel     事件名驼峰表示法
296 | prevent   preventDefault
297 | stop      stopPropagation
298 | debounce  debounce mode, follow a time optional, such as
299 |           debounce.750ms, debounce.2s, default 250ms
300 | capture   capture mode
301 | once      once mode, run once only
302 | passive   passive mode
303 | ```
304 | 
305 | ### 3.5.2. 范围
306 | 
307 | ```
308 | self      tag only
309 | out       tag not
310 | window
311 | document
312 | ```
313 | 
314 | ### 3.5.3. 键鼠
315 | 
316 | ```
317 | shift
318 | ctrl
319 | alt
320 | meta      or cmd
321 | ```
322 | 
323 | ### 3.5.4. 键盘
324 | ```
325 | <key>     enter, escape, space, f1 etc., details refer to:
326 |           https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values
327 | alias:  space: " ", slash: /, gt: >, eq: =
328 | ```
329 | 
330 | ### 3.5.5. 鼠标
331 | ```
332 | <button>  left, mid, right
333 | ```
334 | 
335 | ## 3.6. 动态属性/事件和自定义指令
336 | 
337 | ### 3.6.1. 动态属性
338 | 
339 |     :*={...}
340 |     :*.attr={...}
341 | 
342 |   e.g.:
343 | 
344 |     :*="{
345 |       min: '1',
346 |       max: '100'
347 |     }"
348 | 
349 | ### 3.6.2. 动态事件
350 | 
351 |     @*={...}
352 | 
353 |   e.g.:
354 | 
355 |     @*="{
356 |       input: 'console.log(event)',
357 |       keydown: 'console.log(event)'
358 |     }"
359 | 
360 | ### 3.6.3. 自定义指令
361 | 
362 |     z-d-...=...
363 | 
364 |   e.g.:
365 | 
366 |     z-d-rules-of-validate="[
367 |       val => !!val || 'Name is required!',
368 |       val => val.length > 5 || 'The field need 5 or more characters',
369 |     ]"
370 | 
371 |   会翻译成调用如下形式的函数
372 | 
373 |     rulesOfValidate({
374 |       e: el,
375 |       v: val, // attr value of z-d-rules-of-validate
376 |       m: modifiers
377 |     })
378 | 
379 | ## 3.7. 变量
380 | 
381 | ### 3.7.1. $el
382 | 
383 | \$el 组件根节点
384 | 
385 | ### 3.7.2. \$el.$data
386 | 
387 | \$el.\$data 组件的包装 data 对象
388 | 
389 | ### 3.7.3. ZData.nobserve (default false)
390 | 
391 | ```
392 | no observe DOM for dynamic creating z-data node
393 |   use ZData.loadHTML(), so observe DOM is not needed.
394 | ```
395 | 
396 | ## 3.8. 函数
397 | 
398 | ### 3.8.1. ZData.proxy()
399 | 
400 | 在 z-data 获取 data 数据时, 用 ZData.proxy() 包装返回, 以使数据获得响应式
401 | 
402 | ### 3.8.2. ZData.loadHTML(html, p, before, args)
403 | 
404 | 动态加载 html, p - 需要插入的父节点(默认 body), before - 需要插入该子节点之前
405 | 
406 | * html 内含有 script 的, 需要用此种方式加载, 否则可以用 :html=... 的方式加载
407 | 
408 | ### 3.8.3. el.fireChange()
409 | 
410 | 在 z-data 之外修改节点 style, 如果是双向绑定, 需要调用该节点的 .fireChange()
411 | 
412 | ### 3.8.4. $emit(el, name, detail)
413 | 
414 | 向 DOM 节点 el 发出名为 name 的事件, 携带 detail 参数
415 | 
416 | ### 3.8.5. ZData.deb(fn, ms)
417 | 
418 | 延迟运行
419 | Debounce
420 | 
421 | ## 3.9. 组件
422 | 
423 | ### 3.9.1. z-comp
424 | 
425 | z-comp 为 ZData 组件
426 | 
427 | ```html
428 | <tag z-comp=...></tag>
429 | ```
430 | 
431 | ### 3.9.2. 组件地址
432 | 
433 | z-comp 可以是一个 ./ 相对路径, 或者是一个 http(s): 的网络路径
434 | 
435 | ```html
436 | <tag z-comp=./z-comp-2.html></tag>
437 | <tag z-comp=https://funlang.org/zdata/test/z-comp-2.html></tag>
438 | ```
439 | z-comp 还可以是一个 Promise 函数, 用来加载组件代码
440 | 
441 | ```html
442 | <tag z-comp="load_z_comp('z-comp-2')"></tag>
443 | ```
444 | 
445 | ### 3.9.3. 组件加载器
446 | 
447 | z-comp 支持 z:// 协议插件, ZData.get 函数存在时, z:// 插件生效
448 | 
449 | ```
450 | 注意: ZData.get 是一个 Promise 函数, 返回类似于 fetch(url).then(res => res.text()) 之后的部分
451 | ```
452 | ```
453 | 定义并加载插件:
454 | document.addEventListener("DOMContentLoaded", () => setTimeout(() => ZData.get = ...))
455 | 
456 | 应用 ZData.get 加载 table-v1.5.2 组件
457 | <z- z-comp=z://table-v1.5.2></z->
458 | ```
459 | 
460 | ### 3.9.4. 组件占位符
461 | 
462 | z-comp 可以选择保留 / 删除组件占位符, z-xxx 或者含有 del 属性的, 删除占位符
463 | 
464 | ```html
465 | remove the placeholder tag:
466 | <z-comp  z-comp=https://funlang.org/zdata/test/z-comp-2.html></z-comp>
467 | <div del z-comp=https://funlang.org/zdata/test/z-comp-2.html></div>
468 | ```
469 | ```html
470 | keep the placeholder tag:
471 | <div z-comp=https://funlang.org/zdata/test/z-comp-2.html></div>
472 | ```
473 | 
474 | ### 3.9.5. 组件参数
475 | 
476 | ```html
477 | <tag z-comp=... args=...></tag>
478 | ```
479 | 在组件内部, 用 args.xxx 来使用传进来的参数, 形如:
480 | ```html
481 | <div z-data @mouseover.document=$el.textContent=event.target&&(event.target.title||(event.target.closest('[title]')||{}).title)||''
482 | #color=args.color #background=args.bgcolor !height=100% !padding=8px
483 | ></div> 
484 | ```
485 | 
486 | ### 3.9.6. z-comp demo:
487 | * https://codepen.io/funlang/pen/ExZBPJL
488 | * https://codepen.io/funlang/pen/RwKzaOo
489 | 
490 | # 4. 浏览器兼容性
491 | 
492 | -  `z-data.js`, `z-data.min.js`
493 |   ```
494 |   2017: Chrome 61, Firefox 55, Opera 48, Safari 11, iOS 11, Android 8
495 |   ```
496 | 
497 | -  `z-data.min.es2015.js`, `z-data.min.all.js`
498 |   ```
499 |   2016: Chrome 49, Firefox 44, Opera 36, Safari 10, iOS 10, Android 7
500 |   ```
501 | 
502 | # 5. 加入我们
503 | 
504 | 欢迎加入 z-data 项目, 一起工作, Enjoy!
505 | 


--------------------------------------------------------------------------------
/CHANGE.txt:
--------------------------------------------------------------------------------
  1 | 
  2 | 2023-09-09
  3 |   * json2css()
  4 |     + filter, backdrop-filter
  5 | 
  6 | 2023-09-08
  7 |   * json2css()
  8 |     + transform
  9 | 
 10 | 2023-04-07
 11 |   dist for
 12 |     Chrome 49, Firefox 44, Opera 36, iOS 10, Android 7
 13 | 
 14 |   -  z-data.js, z-data.min.js
 15 |      2017: Chrome 61, Firefox 55, Opera 48
 16 | 
 17 |   -  z-data.min.es2015.js, z-data.min.all.js
 18 |      2016: Chrome 49, Firefox 44, Opera 36, iOS 10, Android 7
 19 | 
 20 | 2023-04-06
 21 |   Chrome 61+, Firefox 55+, Opera 48+, ES2018
 22 | 
 23 |   - z-data.min.es2015.js
 24 |     Chrome 49+, Firefox 44+, Opera 36+, iOS 10+, Android 7+
 25 |   - z-data.min.all.js
 26 |     Chrome 49+, Firefox 47+, Opera 36+, iOS 10+, Android 7+
 27 |   - z-data.min.all.es5.js
 28 |     Chrome 49+, Firefox 43+, Opera 36+, iOS 10+, Android 7+
 29 | 
 30 | 2023-03-31
 31 |   * z-data.min.all.es5.js
 32 |     Chrome 49+, Firefox 43+, Opera 36+, iOS 10+, Android 6+
 33 | 
 34 | 2023-03-29
 35 |   * z-data.min.all.js for es2015 (es6)
 36 |     Chrome 54+, Firefox 50+, Opera 41+, iOS 10+, Android 7+
 37 | 
 38 | 2022-11-06
 39 |   * setAttrs.fn()
 40 |     + , ps.k ? nil : 1
 41 |       supports z-d- inner closure function
 42 | 
 43 | 2022-11-05
 44 |   * tryEval()
 45 |     exp && ...
 46 |   * setAttrs.fn()
 47 |     + , ps.k || (ps.e = nil)
 48 |       call only once (for z-d-...)
 49 | 
 50 | 2022-10-30
 51 |   + custom directive, z-d-...=...
 52 |     * re_bind, re_attr, setAttrs()
 53 | 
 54 | 2022-10-17
 55 |   * :! and .attr
 56 |     ps.A
 57 | 
 58 | 2022-10-16
 59 |   + syntax sugar to .attr
 60 |     :!tag-attr  -> :tag-attr.attr
 61 |     ::!tag-attr -> ::tag-attr.attr
 62 | 
 63 | 2022-10-15
 64 |   * goAnode()/146,+147
 65 |     support template in svg
 66 | 
 67 | 2022-09-09
 68 |   + .deb(fn, ms), debounce
 69 | 
 70 | 2022-08-13
 71 |   * fix @xxx.out
 72 | 
 73 | 2022-08-03
 74 |   * fix bug for empty z-data file
 75 | 
 76 | 2022-05-16
 77 |   * Object.keys(...).forEach -> for (...in...)
 78 | 
 79 | 2022-05-07
 80 |   * cb.i --Date.now()-> Math.random()
 81 | 
 82 | 2022-05-06
 83 |   * loadHTML()
 84 |     * fix for style local (ignore list)
 85 | 
 86 | 2022-04-26
 87 |   * expand()
 88 |     * template use (else)
 89 |       DONT cache
 90 | 
 91 | 2022-04-15
 92 |   + attr handler (ZData.ss(name, value))
 93 |     attr atomic css on demand
 94 |       <div m1 hover=m2 a-hover=m3 a^hover=m4 a+hover=m5px a~not-hover=m6pt after=m7 p8 mt9%></div>
 95 |   * setEvent()
 96 |     event this -> current element (from e.target)
 97 |   + atomic css rules
 98 | 
 99 | 2022-04-11
100 |   * setValue(), fix issue for .xxx-=yyy
101 | 
102 | 2022-04-10
103 |   * observe(), fix issue
104 | 
105 | 2022-04-09
106 |   * loadHTML() and start()
107 |     load / start optimized
108 |   * goFor()
109 |     fix - key DUPLICATE !!!
110 |   * goAnode() and setAttrs()
111 |     fix - nodeCache[]
112 | 
113 | 2022-04-08
114 |   + $emit(el, name, detail)
115 |   * liteProxy
116 |     performance optimized
117 | 
118 | 2022-04-06
119 |   * ZData.ss(s) for style shorthand
120 |     -> compile time
121 | 
122 | 2022-04-05
123 |   + ZData.ss(s) for style shorthand
124 | 
125 | 2022-04-03
126 |   * loadHTML()
127 |     * fix bug for style local (ignore list)
128 |       prefix with @, \d%
129 | 
130 | 2022-04-02
131 |   * loadHTML()
132 |     insert HTML after all .js on load
133 |     load js with ZData.get()
134 | 
135 | 2022-03-28
136 |   * z-data html module
137 |     - remove z-data=$... support
138 |     + export default {...} --replaced-> return {...}
139 | 
140 | 2022-03-27
141 |   * z-data expression
142 |     can be a function expression
143 |     * initComponent() and tryEval()
144 |   + z-data html module (begin with z-data)
145 |     * loadHTML()
146 | 
147 | 2022-03-25
148 |   * setAttrs().fn() for *
149 | 
150 | 2022-03-19
151 |   * function events
152 |   fns: {
153 |     fn($el) {
154 |       event // the event ctx
155 |       this // the event element
156 |       $el // z-data root element
157 |     }
158 |   }
159 | 
160 | 2022-03-12
161 |   * z-json
162 |     onStringify(), {} --changed-> new WeakMap()
163 |     + json2css()
164 | 
165 | 2022-03-11
166 |   * z-json
167 |     onStringify(), duplicate object ignored
168 | 
169 | 2022-03-07
170 |   * z-json
171 |     + qs2json(), json2qs()
172 | 
173 | 2022-03-04
174 |   * liteProxy
175 |     + proxy chain back again
176 |     ! proxy chain + cbs
177 |   * loadHTML()
178 |     load script one by one
179 | 
180 | 2022-03-03
181 |   * liteProxy
182 |     + delete data-aware
183 |       delete obj[prop];
184 | 
185 | 2022-03-01
186 |   + z-pen\to-es2015.fun
187 | 
188 | 2022-02-28
189 |   * template use
190 |     DONT cache
191 |     * goIf(), expand()
192 | 
193 | 2022-02-27
194 |   * liteProxy
195 |     * CHANGE proxy chain (proxy -> proxy... -> target) TO proxy handler.cs [cb1, cb2...]
196 | 
197 | 2022-02-24
198 |   * goNodes()
199 |     * cbIf(args) -> cbIf(el)
200 |   * goFor()
201 |     + goNodes() before insert
202 | 
203 | 2022-01-26
204 |   * ES2018 => ES2015
205 |   * { ...x, y, z: z } => Object.assign({}, x, {y , z: z})
206 |     (\{)[\s\r\n]*\.\.\.([\w.]+),?\s*(([^{}]+|\{[^{}]+\})*\})
207 |     ->
208 |     Object.assign({},$2,$1$3)
209 | 
210 |   - z-data.min.es2015.js
211 | 
212 |     Chrome 54+, Firefox 50+, Opera 41+
213 | 
214 | 2021-10-22
215 |   * setAttrs(), dynamic props/attrs/events supported
216 |     :*={...}
217 |     :*.attr={...}
218 |     @*={...}
219 | 
220 | 2021-10-21
221 |   * expand()
222 |   * re_modifiers / setEvent()
223 |     * .away -> .out
224 |     - .super
225 | 
226 | 2021-10-15
227 |   * setValue()
228 |     value: undefined -> ""
229 | 
230 | 2021-10-12
231 |   + unit to .number (input)
232 | 
233 | 2021-09-28
234 |   * fix bug for :: changed value not in vs[i] cache
235 | 
236 | 2021-09-22
237 |   * fix bug for key event (autocomplete list)
238 | 
239 | 2021-09-15
240 |   - remove :xxx.attr .bool
241 |     :xxx.attr.bool -> :xxx.attr (removeAttribute when false)
242 | 
243 | 2021-09-13
244 |   * load z-comp (fix bug for fetch twice)
245 | 
246 | 2021-09-12
247 |   + .on(name, fn)
248 |   + .call(name, args)
249 | 
250 | 2021-09-10
251 |   * remove z-data string (to el._z) after init
252 |   * remove bind attrs after init
253 | 
254 | 2021-09-09
255 |   * loadHTML()
256 |     replace scope of style for scoped [z-i...
257 | 
258 | 2021-09-08~09
259 |   * loadHTML()
260 |     ignore scope style for scoped [z-i...
261 | 
262 | 2021-09-08
263 |   + modifier bool, for .attr modifier
264 |     :xxx.attr.bool xxx is a boolean attribute
265 | 
266 | 2021-09-05
267 |   * loadHTML()
268 |     <style @> DONT be scoped
269 | 
270 | 2021-09-04~05
271 |   - this.checked && -> v &&
272 |   * template use
273 |     seek the template (use selector) from the z-data comp and then to up z-data for extend template builtin
274 | 
275 | 2021-09-02
276 |   ! refactory code
277 |     className -> classList
278 | 
279 | 2021-08-27
280 |   ! refactory code
281 | 
282 | 2021-08-26
283 |   * template use
284 |     + support ${...}
285 |     * selector (e.g.: #t1)
286 | 
287 | 2021-07-04
288 |   * manual
289 |   + v1.0 released
290 | 
291 | 2021-07-01
292 |   + template use
293 | 
294 | 2021-06-11~12
295 |   * proxy to compatible with Vue
296 |   * reactive with Vue
297 |     Object.defineProperty(__vue__, prop, {
298 |         set(newValue) {
299 |             vthis._data[prop] = me.xxx = newValue;
300 |         }
301 |     });
302 | 
303 | 2021-06-11
304 |   * removeAttribute after compile
305 | 
306 | 2021-06-10~11
307 |   * loadHTML, check loaded script [src=...]
308 | 
309 | 2021-06-09
310 |   + style property
311 |     --* -> setProperty
312 | 
313 | 2021-06-04~05
314 |   + .attr modifier
315 |     * setValue()
316 | 
317 | 2021-06-04
318 |   * proxy
319 |     detect proxy via cb.id and DONT new Proxy duplicate again !!!
320 |   * key in for
321 |     support [{name: 'key1', ...}] and {key1: {...}} both
322 |       key=/^\d*$/.test(k)?field.name:k
323 | 
324 | 2021-06-03
325 |   * fix bug - if in for
326 |     in if
327 |       rename .last -> .fi
328 |     in for
329 |       rename .head -> .from
330 |       rename .last -> .to
331 | 
332 | 2021-06-01
333 |   * browser compatible test and fixes
334 |     Chrome 61+, Firefox 55+, Opera 48+
335 |     - Polyfill.js 之后 (Element.prototype.getAttributeNames)
336 |       Chrome 60+, Firefox 55+, Opera 47+
337 | 
338 | 2021-05-31
339 |   * browser compatible test and fixes
340 |     Chrome 61+, Firefox 55+, Opera 48+
341 | 
342 | 2021-05-28
343 |   * minor fixes
344 |     for debounce()
345 |     for z-data error in script
346 | 
347 | 2021-05-27
348 |   * proxy to compatible with Vue
349 | 
350 | 2021-05-26
351 |   + ::checked=opt==this.value
352 |     and add @change=this.checked&&(opt=this.value) automatically
353 | 
354 | 2021-05-25
355 |   * z-comp args
356 |     use args.xxx instead of xxx
357 |   * no log (for production environment)
358 | 
359 | 2021-05-23
360 |   cdn to jsdelivr
361 |   + script module supported
362 |     * loadHTML()
363 |       + z-data=$xxx -> z-data=$xxx_...
364 |       local names
365 | 
366 | 2021-05-22
367 |   * z-comp
368 |     + z-comp args
369 |   * loadHTML()
370 |     + args
371 | 
372 | 2021-05-21
373 |   * variables
374 |     - $event
375 |       use "event" directly
376 |     + this
377 |       in event handler (and :: data bind)
378 | 
379 | 2021-05-19
380 |   * try catch {}
381 |     + (e)
382 | 
383 | 2021-05-14
384 |   + ZData.nobserve (default false)
385 |     no observe
386 |   * observe()
387 |     querySelector('[z-data]') in child sub tree
388 | 
389 | 2021-05-06
390 |   + z:// protocol add-in for z-comp
391 |     ZData.get is the add-in Promise function
392 | 
393 | 2021-05-05
394 |   * minor fixes (key modifiers, @keyframes: 1%, 2%,... {})
395 |   + mouse event modifiers (left, mid, right)
396 |   * key event modifiers (>, =) as gt, eq
397 | 
398 | 2021-05-04
399 |   * loadHTML(), <style> module supported
400 | 
401 | 2021-05-03
402 |   * loadHTML(), <script src=... supported
403 | 
404 | 2021-05-02
405 |   + z-data studio (z-pen)
406 | 
407 | 2021-05-01
408 |   * performance optimized
409 |   * fix bug - template for nesting for
410 |     remove line:  env2.vs = Obj_values(env2.ps);
411 |   + !style-name=string-value
412 |     EQ
413 |     #style-name=`string-value`
414 | 
415 | 2021-04-30
416 |   * fix bug - cache event closure
417 |   * DOM observe optimized
418 |   + shift, alt, ctrl, meta modifiers to *click event
419 |   + z-comp 组件
420 | 
421 | 2021-04-28
422 |   + ZData.proxy()
423 |   * template for bug (moveable)
424 |   * env2 = {...env} bug, -> env2 = {...env, ps: {...env.ps}}
425 |   + 双向绑定时 .trim / .number 修饰符
426 | 
427 | 2021-04-27
428 |   * template z-data 根节点支持
429 |   z-data 和 z-template 分开立项
430 | 
431 | 2021-04-26
432 |   * template clone optimized
433 |   * template for optimized
434 | 
435 | 2021-04-25
436 |   + template pre-compile
437 | 
438 | 2021-04-23
439 |   + ZData.loadHTML()
440 | 
441 | 2021-04-22
442 |   + DOM MutationObserver
443 |   + TodoMVC
444 |   .debounce 支持
445 | 
446 | 2021-04-21
447 |   z-data init 支持
448 |   数据修改监控简单版支持
449 |   $el.$data 支持
450 | 
451 | 2021-04-20
452 |   ::style.value=... 双向绑定支持
453 |   ::css.value=...   双向绑定支持
454 |   支持 input values <=> style values <=> data values
455 |         属性编辑器         图形设计器         数据存储
456 |   + el.fireChange() 支持
457 |   $event 支持
458 | 
459 | 2021-04-19
460 |   .camel 支持
461 |   @event 支持
462 |   ::value=... 双向绑定支持
463 |   $el 支持
464 | 
465 | 2021-04-18
466 |   性能优化告一段落 (插入 1万条数据维持在 五六百毫秒, 更新 一百多毫秒)
467 |   写 CHANGE.txt
468 |   写 README.cn.txt
469 |   发布 z-data 0.1, z-template 1.0
470 | 
471 | 2021-04-17
472 |   继续优化性能 (尝试第三方案)
473 | 
474 | 2021-04-16
475 |   继续优化性能 (尝试第二方案)
476 | 
477 | 2021-04-15
478 |   优化性能 (超过 Alpine), 优化 minify 和 语法糖
479 | 
480 | 2021-04-14
481 |   支持 template if/else
482 |   测性能 https://github.com/krausest/js-framework-benchmark
483 | 
484 | 2021-04-13
485 |   支持 class 和 style 简写语法
486 |   z-data 和 z-template 分开启动
487 | 
488 | 2021-04-12
489 |   凌晨 1:59 提交第一份代码
490 |   支持 template for, : 和 ${...} 属性名/值(包括文本内容)
491 | 
492 | 2021-04-11
493 |   z-data 项目启动
494 | ----------------
495 | EOF
496 | 


--------------------------------------------------------------------------------
/www/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html><head><meta http-equiv=content-type content=text/html;charset=utf-8><meta name=viewport content=width=device-width,initial-scale=1><title>z-data studio</title><meta name=author content="Wisdom ZHANG"><meta name=description content="z-data studio, to develop, debug and preview z-data apps and components"><meta http-equiv=X-UA-Compatible content=IE=Edge,chrome=1><link rel=stylesheet href=./res/style.css><style>#fullscreen,#fullscreen_mobile{background:linear-gradient(to left,black,black) left top no-repeat,linear-gradient(to bottom,black,black) left top no-repeat,linear-gradient(to left,black,black) right top no-repeat,linear-gradient(to bottom,black,black) right top no-repeat,linear-gradient(to left,black,black) left bottom no-repeat,linear-gradient(to bottom,black,black) left bottom no-repeat,linear-gradient(to left,black,black) right bottom no-repeat,linear-gradient(to left,black,black) right bottom no-repeat;background-size:2px 5px,5px 2px,2px 5px,5px 2px}svg.z-data:hover path.p--{transform:rotate(1800turn);transition:transform 180s}svg.z-data:hover path.p-z{transform:rotate(-900turn);transition:transform 180s}button{cursor:pointer;color:#555;padding:3.5px 10.5px;margin:0 1px;border:1px outset transparent;border-radius:25%;font-size:105%;outline:none}button:hover{color:#111;border:1px outset #fff;background-color:#f8f8f8}button:active{border-style:inset}.line-numbers:not(.active-line-number)>span:not([title$="0"],[title$="5"],[title="1"],:hover){opacity:.3;display:inline-block;transform:scale(.7)}#fullscreen_mobile{display:none}@media only screen and (max-width:1024px){*{}#fullscreen,[title="GitHub Repo"],c[z-data],.sidebar{display:none}#fullscreen_mobile{display:inline-block}#preview{width:unset !important}.monaco-scrollable-element{left:24px !important;width:100% !important;-webkit-overflow-scrolling:touch}.line-numbers{width:24px !important;font-size:80%}}@media only screen and (max-width:768px){*{}}main.preview #editor{display:none}</style><link rel=stylesheet href=./res/split.css><script src=./res/split.js></script><script src=./res/uglifyjs.js></script><script src=./res/polyfill.js></script><script src=./z-data.min.js></script><script src=./z-minifier.min.js></script><script src=https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.13.13/beautify.min.js></script><script src=https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.13.13/beautify-css.min.js></script><script src=https://beautifytools.com/js/js-beautify/js/lib/beautify-html.js></script></head><body title="[?#]url=URL or ?[html=]HTML or ?:clipboard:"><main z-data=app() !display=flex !flex-direction=column !height=100% !gap=1px .preview=preview><button @click=run() !position=absolute !bottom=2px !left=2px !z-index=1 #display.none=top==window title="f9 to run">run <u !font-size=75%>[F9]</u></button><div !background-color=#f4f4f4 !color=#555 !box-shadow="2px 0 4px #aaa" !padding=6px #display.none=top!=window !white-space=nowrap !overflow-x=auto !overflow-y=hidden><a href=https://funlang.org/z-data/ title="z-data logo" !display=inline-block !height=36px !width=100px !margin="-18px 0"><svg z-zone class=z-data viewBox="-30 0 252 70" style=width:100%;height:100%;transform:translate(10px,6px)><path d="m 27.756078,75.757339 -26.7020497,0 0,-6.246093 12.6093017,-31.816039 -11.9066162,0 0,-7.261084 24.7891832,0 0,6.12898 -12.804491,32.011229 14.014672,0 z" style="fill:#fa0;transform-origin:13px 52px" class=p-z></path><path d="m 45.832909,55.847916 -15.8885,0 0,-6.285131 15.8885,0 z" style="fill:#7a0;transform-origin:38px 52px" class=p--></path><path d="m 73.748583,75.757339 -8.393188,0 -0.936914,-1.522485 c -1.89987,1.431397 -4.059975,2.147094 -6.480322,2.147095 -2.836776,-1e-6 -5.250629,-0.663648 -7.241565,-1.990942 -1.990944,-1.327293 -2.986415,-3.136055 -2.986413,-5.426294 l 0,-32.557763 c -2e-6,-1.925837 0.787266,-3.454827 2.361804,-4.586975 1.574531,-1.132059 3.480889,-1.698111 5.719079,-1.698156 3.070984,4.5e-5 5.361216,0.559591 6.870703,1.678637 l 0,-12.02373 11.086816,0 z m -11.086816,-8.471264 0,-28.146459 c -1.6e-5,-1.327257 -0.637638,-1.990903 -1.912866,-1.990942 -1.301283,3.9e-5 -1.951917,0.689711 -1.951904,2.069018 l 0,28.068383 c -1.3e-5,1.379353 0.650621,2.069025 1.951904,2.069019 1.275228,6e-6 1.91285,-0.689666 1.912866,-2.069019 z" style=fill:#0ae class=p-d></path><path d="m 102.40254,75.757339 -9.8376,0 0,-1.756713 c -0.83283,1.587549 -3.21415,2.381322 -7.14397,2.381323 -6.06392,-1e-6 -9.095875,-2.368309 -9.095874,-7.104932 l 0,-9.095873 c -10e-7,-2.029963 0.735216,-3.799688 2.205652,-5.30918 1.47043,-1.50945 4.430815,-3.396289 8.881164,-5.660522 2.576499,-1.301242 3.864754,-2.342256 3.864771,-3.123047 l 0,-6.71455 c -1.7e-5,-1.48341 -0.637638,-2.225132 -1.912866,-2.225171 -1.457435,3.9e-5 -2.186145,1.808801 -2.186133,5.426294 -1.2e-5,0.650667 0.03903,1.613605 0.117114,2.888818 0.104089,1.275273 0.15614,2.238212 0.156153,2.888818 l -10.735474,0 0,-9.056835 c -1e-6,-6.115924 4.42431,-9.173905 13.272949,-9.17395 8.276051,4.5e-5 12.414084,3.188152 12.414114,9.56433 z m -11.125857,-8.471264 0,-11.672387 c -2.550502,0.624629 -3.825745,1.769745 -3.825732,3.435351 l 0,8.237036 c -1.3e-5,1.379353 0.663634,2.069025 1.990942,2.069019 1.223177,6e-6 1.834773,-0.689666 1.83479,-2.069019 z" style=fill:#0ae class=p-a></path><path d="m 127.07461,75.757339 -7.02686,0 c -5.02291,0 -8.02884,-0.754735 -9.0178,-2.264208 -0.98897,-1.509469 -1.48345,-4.411297 -1.48344,-8.705493 l 0,-27.638964 -4.95784,0 0,-6.714551 4.95784,0 0,-9.134911 11.12585,0 0,9.134911 6.01186,0 0,6.714551 -6.01186,0 0,27.560888 c -2e-5,1.327304 0.39687,2.218673 1.19066,2.674108 0.79376,0.455453 2.53095,0.683175 5.21159,0.683167 z" style=fill:#0ae class=p-t></path><path d="m 155.49433,75.757339 -9.8376,0 0,-1.756713 c -0.83282,1.587549 -3.21415,2.381322 -7.14396,2.381323 -6.06393,-1e-6 -9.09588,-2.368309 -9.09588,-7.104932 l 0,-9.095873 c 0,-2.029963 0.73522,-3.799688 2.20565,-5.30918 1.47043,-1.50945 4.43082,-3.396289 8.88117,-5.660522 2.5765,-1.301242 3.86475,-2.342256 3.86477,-3.123047 l 0,-6.71455 c -2e-5,-1.48341 -0.63764,-2.225132 -1.91287,-2.225171 -1.45743,3.9e-5 -2.18614,1.808801 -2.18613,5.426294 -10e-6,0.650667 0.039,1.613605 0.11711,2.888818 0.10409,1.275273 0.15614,2.238212 0.15616,2.888818 l -10.73548,0 0,-9.056835 c 0,-6.115924 4.42431,-9.173905 13.27295,-9.17395 8.27605,4.5e-5 12.41408,3.188152 12.41411,9.56433 z m -11.12585,-8.471264 0,-11.672387 c -2.5505,0.624629 -3.82575,1.769745 -3.82573,3.435351 l 0,8.237036 c -2e-5,1.379353 0.66363,2.069025 1.99094,2.069019 1.22318,6e-6 1.83477,-0.689666 1.83479,-2.069019 z" style=fill:#0ae class=p-a></path></svg></a><button @click=runDemo() title="new a z-data comp">new</button><button @click=format() title="[F8] format the html/css/js" @keyup.f8.document=format()>format <u !font-size=75%>[F8]</u></button><button @click=minify() title="minify the html/css/js">minify</button><button @click=save() title="[Ctrl-S] save to localStorage" @keydown.ctrl.s.document.stop.prevent=save()>save</button><button @click=run() title="run the z-data app" @keyup.f9.document=run()>run <u !font-size=75%>[F9]</u></button><c !font-size=80%>|</c><button @click=demo() title="open the built-in demos">demo <u :text=demo1?1:2 !font-size=75%></u></button><c z-data !color=#aaa !margin-left=8px !font-size=80% !white-space=nowrap !text-overflow=ellipsis @mouseover.document='$el.textContent=this&&(this.title||(this.closest("[title]")||{}).title)||""'></c><a href=https://github.com/Funlang/z-data target=_blank title="GitHub Repo" !float=right !margin=4px><svg z-none height=16 width=16 viewBox="0 0 16 16"><path fill-rule=evenodd d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><b id=fullscreen !float=right !width=14px !height=14px !margin=6px !cursor=pointer @click=fullScreen(event) title="Fullscreen preview (Ctrl+ to new tab)"></b><b id=fullscreen_mobile !width=14px !height=14px !margin=6px !cursor=pointer @click=fullScreen2()></b></div><div !display=flex #flex-grow=1 !gap=0 !overflow-y=hidden :data-flex-splitter-horizontal.attr='1024<window.outerWidth&&""' :data-flex-splitter-vertical.attr='window.outerWidth<=1024&&""' @keyup.alt.z=toggleWrap() @beforeunload.window=window.fromclipboard&&navigator.clipboard.writeText(editor.getValue())><div class=sidebar !width=0 !background-color=#f4f4f4 !box-shadow="2px 0 4px #aaa" #display.none=top!=window></div><div z-none id=editor style="border:1px solid #ccc;flex-grow:1;flex-shrink:1;overflow:hidden" title="edit the code, f9 to run, f12 and debugger to debug"></div><div role=separator title="resize the panels" @pointerup='window.db.save("preview-width",this.nextElementSibling.style.width)'></div><iframe id=preview src=./preview.html #flex-grow=1 !flex-shrink=1 !overflow-y=hidden #width='window.db.get("preview-width")||"55%"' !font-family=consolas !border=0 title="run the z-data app in this preview panel"></iframe></div></main><z- z-none><script src=https://cdn.jsdelivr.net/npm/monaco-editor@0.31.1/min/vs/loader.js></script><script src=https://unpkg.com/emmet-monaco-es/dist/emmet-monaco.min.js></script><script src=./res/html.min.js></script><script>window.$=e=>document.querySelector(e),require.config({paths:{vs:"https://cdn.jsdelivr.net/npm/monaco-editor@0.31.1/min/vs"}}),require(["vs/editor/editor.main"],function(){var e=window.langid="lang_zdata";monaco.languages.register({id:e}),monaco.languages.setLanguageConfiguration(e,lang_conf),monaco.languages.setMonarchTokensProvider(e,lang_zdata),emmetMonaco.emmetHTML(monaco,["html",e]),window.editor=monaco.editor.create($("#editor"),{value:"",language:e,automaticLayout:!0,wordWrap:"off",formatOnType:!1,formatOnPaste:!1,scrollbar:{verticalScrollbarSize:2},minimap:{enabled:1024<window.outerWidth,maxColumn:60,renderCharacters:!1,showSlider:"always"},lineNumbers:e=>e==editor._modelData.model._tokens._len?e:`<span title=${e}>${e}</span>`});try{var t=document.location.href.match(/([\?#])(?:(?:(url)|html)=)?(.+)$/);if(t)if(t[2])fetch(window.unescape(t[3])).then(e=>e.text()).then(e=>editor.setValue(e));else if(window.fromclipboard=":clipboard:"==t[3]){let t=()=>{try{navigator.clipboard.readText().then(e=>editor.setValue(e))}catch(e){setTimeout(t,1e3)}};t()}else editor.setValue(window.unescape(t[3]))}catch(e){}}),window.db={dbs:localStorage.getItem("dbs")?JSON.parse(localStorage.getItem("dbs")):{},save(e,t){this.dbs[e]=t,localStorage.setItem("dbs",JSON.stringify(this.dbs))},get(e){return this.dbs[e]},ids(){return Object.keys(this.dbs)}},window.app=()=>ZData.proxy({example:`
 2 | <template z-data>
 3 |   <style>
 4 |     * { font-size: 24px }
 5 |   </style>
 6 |   <div !padding=4px !color=#05f>
 7 |     z-data component demo
 8 |   </div>
 9 |   <z-
10 |    z-comp=https://funlang.org/zdata/test/z-cats-3.html
11 |   ></z->
12 | </template>
13 | `,demo1:!0,preview:!1,demo(){this.demo1?fetch(this.example.match(/https:[^ ]+/)[0]).then(e=>e.text()).then(e=>{this.runDemo(e)}):this.runDemo(this.example),this.demo1=!this.demo1},runDemo(e){e=e||`<!@id: demo-1>
14 | <!@name: a demo>
15 | <!@desc: a demo sample>
16 | <!@tags: z-data, demo>
17 | <!@author: author>
18 | <!@copyright: copyright>
19 | 
20 | `,editor.setValue(e),editor.setScrollLeft(0),editor.setScrollTop(0),this.run(e)},run(e){$("#preview").contentDocument.head.querySelectorAll("style:not([keep]),script:not([keep])").forEach(e=>e.remove());let t=$("#preview").contentDocument.body;t.removeAttribute("minify"),t.innerHTML="",t.shadowRoot&&(t.shadowRoot.innerHTML=""),e=e||editor.getValue(),$("#preview").contentWindow.ZData.loadHTML(e,t)},format(){let n=[],l=0,e=editor.getValue();e=e.replace(/((^ *)<(\w+) @inline[^>]*>)([^]*?)(\2<\/\3)/gm,(e,t,o,i,a,r)=>(n[l++]=a,t+r)),e=e.replace(/\b(z-data=')(\s*\{[^']+)(')/g,(e,t,o,i)=>t+js_beautify(o)+i).replace(/\b(z-data=")(\s*\{[^"]+)(")/g,(e,t,o,i)=>t+js_beautify(o)+i).replace(/\b(z-data=)(\{[^'"](?:[^'\s>]+|"[^"]")+)/g,(e,t,o)=>t+"'"+js_beautify(o)+"'"),e=html_beautify(e,{wrap_line_length:80,indent_size:2}),l=0,e=e.replace(/((^ *)<(\w+) @inline[^>]*>)([^]*?)(<\/\3)/gm,(e,t,o,i,a,r)=>t+n[l++]+o+r);var t=editor.getScrollLeft(),o=editor.getScrollTop(),i=editor.getPosition(),a=editor.getSelection();editor.setValue(e),editor.setScrollLeft(t),editor.setScrollTop(o),editor.setPosition(i),editor.setSelection(a)},minify(){let e=$("#preview").contentDocument.body;e.setAttribute("minify","");var t,o={},i=editor.getValue();e.innerText=t=window.minify(i,o),e.title=`source: ${i.length}, minify: ${t.length} (${t.length/i.length*100>>0}%)\n${JSON.stringify(o,void 0,2)}`},save(){var e={},t=editor.getValue(),o=window.minify(t,e);db.save(e.id,{set:e,code:t,mini:o})},toggleWrap(){editor.updateOptions({wordWrap:this.wrap?"on":"off"}),this.wrap=!this.wrap},fullScreen(e){if(e.ctrlKey)return window.open(document.location.href.replace(/(index\.html)?[\?#]/,"preview.html#"));let t=$("#preview");document.fullscreenElement?document.exitFullscreen():t.requestFullscreen()},fullScreen2(){this.preview=!this.preview}})</script></z-></body></html>


--------------------------------------------------------------------------------
/dist/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html><head><meta http-equiv=content-type content=text/html;charset=utf-8><meta name=viewport content=width=device-width,initial-scale=1><title>z-data studio</title><meta name=author content="Wisdom ZHANG"><meta name=description content="z-data studio, to develop, debug and preview z-data apps and components"><meta http-equiv=X-UA-Compatible content=IE=Edge,chrome=1><link rel=stylesheet href=./res/style.css><style>#fullscreen,#fullscreen_mobile{background:linear-gradient(to left,black,black) left top no-repeat,linear-gradient(to bottom,black,black) left top no-repeat,linear-gradient(to left,black,black) right top no-repeat,linear-gradient(to bottom,black,black) right top no-repeat,linear-gradient(to left,black,black) left bottom no-repeat,linear-gradient(to bottom,black,black) left bottom no-repeat,linear-gradient(to left,black,black) right bottom no-repeat,linear-gradient(to left,black,black) right bottom no-repeat;background-size:2px 5px,5px 2px,2px 5px,5px 2px}svg.z-data:hover path.p--{transform:rotate(1800turn);transition:transform 180s}svg.z-data:hover path.p-z{transform:rotate(-900turn);transition:transform 180s}button{cursor:pointer;color:#555;padding:3.5px 10.5px;margin:0 1px;border:1px outset transparent;border-radius:25%;font-size:105%;outline:none}button:hover{color:#111;border:1px outset #fff;background-color:#f8f8f8}button:active{border-style:inset}.line-numbers:not(.active-line-number)>span:not([title$="0"],[title$="5"],[title="1"],:hover){opacity:.3;display:inline-block;transform:scale(.7)}#fullscreen_mobile{display:none}@media only screen and (max-width:1024px){*{}#fullscreen,[title="GitHub Repo"],c[z-data],.sidebar{display:none}#fullscreen_mobile{display:inline-block}#preview{width:unset !important}.monaco-scrollable-element{left:24px !important;width:100% !important;-webkit-overflow-scrolling:touch}.line-numbers{width:24px !important;font-size:80%}}@media only screen and (max-width:768px){*{}}main.preview #editor{display:none}</style><link rel=stylesheet href=./res/split.css><script src=./res/split.js></script><script src=./res/uglifyjs.js></script><script src=./res/polyfill.js></script><script src=./z-data.min.js></script><script src=./z-minifier.min.js></script><script src=https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.13.13/beautify.min.js></script><script src=https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.13.13/beautify-css.min.js></script><script src=https://beautifytools.com/js/js-beautify/js/lib/beautify-html.js></script></head><body title="[?#]url=URL or ?[html=]HTML or ?:clipboard:"><main z-data=app() !display=flex !flex-direction=column !height=100% !gap=1px .preview=preview><button @click=run() !position=absolute !bottom=2px !left=2px !z-index=1 #display.none=top==window title="f9 to run">run <u !font-size=75%>[F9]</u></button><div !background-color=#f4f4f4 !color=#555 !box-shadow="2px 0 4px #aaa" !padding=6px #display.none=top!=window !white-space=nowrap !overflow-x=auto !overflow-y=hidden><a href=https://funlang.org/z-data/ title="z-data logo" !display=inline-block !height=36px !width=100px !margin="-18px 0"><svg z-zone class=z-data viewBox="-30 0 252 70" style=width:100%;height:100%;transform:translate(10px,6px)><path d="m 27.756078,75.757339 -26.7020497,0 0,-6.246093 12.6093017,-31.816039 -11.9066162,0 0,-7.261084 24.7891832,0 0,6.12898 -12.804491,32.011229 14.014672,0 z" style="fill:#fa0;transform-origin:13px 52px" class=p-z></path><path d="m 45.832909,55.847916 -15.8885,0 0,-6.285131 15.8885,0 z" style="fill:#7a0;transform-origin:38px 52px" class=p--></path><path d="m 73.748583,75.757339 -8.393188,0 -0.936914,-1.522485 c -1.89987,1.431397 -4.059975,2.147094 -6.480322,2.147095 -2.836776,-1e-6 -5.250629,-0.663648 -7.241565,-1.990942 -1.990944,-1.327293 -2.986415,-3.136055 -2.986413,-5.426294 l 0,-32.557763 c -2e-6,-1.925837 0.787266,-3.454827 2.361804,-4.586975 1.574531,-1.132059 3.480889,-1.698111 5.719079,-1.698156 3.070984,4.5e-5 5.361216,0.559591 6.870703,1.678637 l 0,-12.02373 11.086816,0 z m -11.086816,-8.471264 0,-28.146459 c -1.6e-5,-1.327257 -0.637638,-1.990903 -1.912866,-1.990942 -1.301283,3.9e-5 -1.951917,0.689711 -1.951904,2.069018 l 0,28.068383 c -1.3e-5,1.379353 0.650621,2.069025 1.951904,2.069019 1.275228,6e-6 1.91285,-0.689666 1.912866,-2.069019 z" style=fill:#0ae class=p-d></path><path d="m 102.40254,75.757339 -9.8376,0 0,-1.756713 c -0.83283,1.587549 -3.21415,2.381322 -7.14397,2.381323 -6.06392,-1e-6 -9.095875,-2.368309 -9.095874,-7.104932 l 0,-9.095873 c -10e-7,-2.029963 0.735216,-3.799688 2.205652,-5.30918 1.47043,-1.50945 4.430815,-3.396289 8.881164,-5.660522 2.576499,-1.301242 3.864754,-2.342256 3.864771,-3.123047 l 0,-6.71455 c -1.7e-5,-1.48341 -0.637638,-2.225132 -1.912866,-2.225171 -1.457435,3.9e-5 -2.186145,1.808801 -2.186133,5.426294 -1.2e-5,0.650667 0.03903,1.613605 0.117114,2.888818 0.104089,1.275273 0.15614,2.238212 0.156153,2.888818 l -10.735474,0 0,-9.056835 c -1e-6,-6.115924 4.42431,-9.173905 13.272949,-9.17395 8.276051,4.5e-5 12.414084,3.188152 12.414114,9.56433 z m -11.125857,-8.471264 0,-11.672387 c -2.550502,0.624629 -3.825745,1.769745 -3.825732,3.435351 l 0,8.237036 c -1.3e-5,1.379353 0.663634,2.069025 1.990942,2.069019 1.223177,6e-6 1.834773,-0.689666 1.83479,-2.069019 z" style=fill:#0ae class=p-a></path><path d="m 127.07461,75.757339 -7.02686,0 c -5.02291,0 -8.02884,-0.754735 -9.0178,-2.264208 -0.98897,-1.509469 -1.48345,-4.411297 -1.48344,-8.705493 l 0,-27.638964 -4.95784,0 0,-6.714551 4.95784,0 0,-9.134911 11.12585,0 0,9.134911 6.01186,0 0,6.714551 -6.01186,0 0,27.560888 c -2e-5,1.327304 0.39687,2.218673 1.19066,2.674108 0.79376,0.455453 2.53095,0.683175 5.21159,0.683167 z" style=fill:#0ae class=p-t></path><path d="m 155.49433,75.757339 -9.8376,0 0,-1.756713 c -0.83282,1.587549 -3.21415,2.381322 -7.14396,2.381323 -6.06393,-1e-6 -9.09588,-2.368309 -9.09588,-7.104932 l 0,-9.095873 c 0,-2.029963 0.73522,-3.799688 2.20565,-5.30918 1.47043,-1.50945 4.43082,-3.396289 8.88117,-5.660522 2.5765,-1.301242 3.86475,-2.342256 3.86477,-3.123047 l 0,-6.71455 c -2e-5,-1.48341 -0.63764,-2.225132 -1.91287,-2.225171 -1.45743,3.9e-5 -2.18614,1.808801 -2.18613,5.426294 -10e-6,0.650667 0.039,1.613605 0.11711,2.888818 0.10409,1.275273 0.15614,2.238212 0.15616,2.888818 l -10.73548,0 0,-9.056835 c 0,-6.115924 4.42431,-9.173905 13.27295,-9.17395 8.27605,4.5e-5 12.41408,3.188152 12.41411,9.56433 z m -11.12585,-8.471264 0,-11.672387 c -2.5505,0.624629 -3.82575,1.769745 -3.82573,3.435351 l 0,8.237036 c -2e-5,1.379353 0.66363,2.069025 1.99094,2.069019 1.22318,6e-6 1.83477,-0.689666 1.83479,-2.069019 z" style=fill:#0ae class=p-a></path></svg></a><button @click=runDemo() title="new a z-data comp">new</button><button @click=format() title="[F8] format the html/css/js" @keyup.f8.document=format()>format <u !font-size=75%>[F8]</u></button><button @click=minify() title="minify the html/css/js">minify</button><button @click=save() title="[Ctrl-S] save to localStorage" @keydown.ctrl.s.document.stop.prevent=save()>save</button><button @click=run() title="run the z-data app" @keyup.f9.document=run()>run <u !font-size=75%>[F9]</u></button><c !font-size=80%>|</c><button @click=demo() title="open the built-in demos">demo <u :text=demo1?1:2 !font-size=75%></u></button><c z-data !color=#aaa !margin-left=8px !font-size=80% !white-space=nowrap !text-overflow=ellipsis @mouseover.document='$el.textContent=this&&(this.title||(this.closest("[title]")||{}).title)||""'></c><a href=https://github.com/Funlang/z-data target=_blank title="GitHub Repo" !float=right !margin=4px><svg z-none height=16 width=16 viewBox="0 0 16 16"><path fill-rule=evenodd d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><b id=fullscreen !float=right !width=14px !height=14px !margin=6px !cursor=pointer @click=fullScreen(event) title="Fullscreen preview (Ctrl+ to new tab)"></b><b id=fullscreen_mobile !width=14px !height=14px !margin=6px !cursor=pointer @click=fullScreen2()></b></div><div !display=flex #flex-grow=1 !gap=0 !overflow-y=hidden :data-flex-splitter-horizontal.attr='1024<window.outerWidth&&""' :data-flex-splitter-vertical.attr='window.outerWidth<=1024&&""' @keyup.alt.z=toggleWrap() @beforeunload.window=window.fromclipboard&&navigator.clipboard.writeText(editor.getValue())><div class=sidebar !width=0 !background-color=#f4f4f4 !box-shadow="2px 0 4px #aaa" #display.none=top!=window></div><div z-none id=editor style="border:1px solid #ccc;flex-grow:1;flex-shrink:1;overflow:hidden" title="edit the code, f9 to run, f12 and debugger to debug"></div><div role=separator title="resize the panels" @pointerup='window.db.save("preview-width",this.nextElementSibling.style.width)'></div><iframe id=preview src=./preview.html #flex-grow=1 !flex-shrink=1 !overflow-y=hidden #width='window.db.get("preview-width")||"55%"' !font-family=consolas !border=0 title="run the z-data app in this preview panel"></iframe></div></main><z- z-none><script src=https://cdn.jsdelivr.net/npm/monaco-editor@0.31.1/min/vs/loader.js></script><script src=https://unpkg.com/emmet-monaco-es/dist/emmet-monaco.min.js></script><script src=./res/html.min.js></script><script>window.$=e=>document.querySelector(e),require.config({paths:{vs:"https://cdn.jsdelivr.net/npm/monaco-editor@0.31.1/min/vs"}}),require(["vs/editor/editor.main"],function(){var e=window.langid="lang_zdata";monaco.languages.register({id:e}),monaco.languages.setLanguageConfiguration(e,lang_conf),monaco.languages.setMonarchTokensProvider(e,lang_zdata),emmetMonaco.emmetHTML(monaco,["html",e]),window.editor=monaco.editor.create($("#editor"),{value:"",language:e,automaticLayout:!0,wordWrap:"off",formatOnType:!1,formatOnPaste:!1,scrollbar:{verticalScrollbarSize:2},minimap:{enabled:1024<window.outerWidth,maxColumn:60,renderCharacters:!1,showSlider:"always"},lineNumbers:e=>e==editor._modelData.model._tokens._len?e:`<span title=${e}>${e}</span>`});try{var t=document.location.href.match(/([\?#])(?:(?:(url)|html)=)?(.+)$/);if(t)if(t[2])fetch(window.unescape(t[3])).then(e=>e.text()).then(e=>editor.setValue(e));else if(window.fromclipboard=":clipboard:"==t[3]){let t=()=>{try{navigator.clipboard.readText().then(e=>editor.setValue(e))}catch(e){setTimeout(t,1e3)}};t()}else editor.setValue(window.unescape(t[3]))}catch(e){}}),window.db={dbs:localStorage.getItem("dbs")?JSON.parse(localStorage.getItem("dbs")):{},save(e,t){this.dbs[e]=t,localStorage.setItem("dbs",JSON.stringify(this.dbs))},get(e){return this.dbs[e]},ids(){return Object.keys(this.dbs)}},window.app=()=>ZData.proxy({example:`
 2 | <template z-data>
 3 |   <style>
 4 |     * { font-size: 24px }
 5 |   </style>
 6 |   <div !padding=4px !color=#05f>
 7 |     z-data component demo
 8 |   </div>
 9 |   <z-
10 |    z-comp=https://funlang.org/zdata/test/z-cats-3.html
11 |   ></z->
12 | </template>
13 | `,demo1:!0,preview:!1,demo(){this.demo1?fetch(this.example.match(/https:[^ ]+/)[0]).then(e=>e.text()).then(e=>{this.runDemo(e)}):this.runDemo(this.example),this.demo1=!this.demo1},runDemo(e){e=e||`<!@id: demo-1>
14 | <!@name: a demo>
15 | <!@desc: a demo sample>
16 | <!@tags: z-data, demo>
17 | <!@author: author>
18 | <!@copyright: copyright>
19 | 
20 | `,editor.setValue(e),editor.setScrollLeft(0),editor.setScrollTop(0),this.run(e)},run(e){$("#preview").contentDocument.head.querySelectorAll("style:not([keep]),script:not([keep])").forEach(e=>e.remove());let t=$("#preview").contentDocument.body;t.removeAttribute("minify"),t.innerHTML="",t.shadowRoot&&(t.shadowRoot.innerHTML=""),e=e||editor.getValue(),$("#preview").contentWindow.ZData.loadHTML(e,t)},format(){let n=[],l=0,e=editor.getValue();e=e.replace(/((^ *)<(\w+) @inline[^>]*>)([^]*?)(\2<\/\3)/gm,(e,t,o,i,a,r)=>(n[l++]=a,t+r)),e=e.replace(/\b(z-data=')(\s*\{[^']+)(')/g,(e,t,o,i)=>t+js_beautify(o)+i).replace(/\b(z-data=")(\s*\{[^"]+)(")/g,(e,t,o,i)=>t+js_beautify(o)+i).replace(/\b(z-data=)(\{[^'"](?:[^'\s>]+|"[^"]")+)/g,(e,t,o)=>t+"'"+js_beautify(o)+"'"),e=html_beautify(e,{wrap_line_length:80,indent_size:2}),l=0,e=e.replace(/((^ *)<(\w+) @inline[^>]*>)([^]*?)(<\/\3)/gm,(e,t,o,i,a,r)=>t+n[l++]+o+r);var t=editor.getScrollLeft(),o=editor.getScrollTop(),i=editor.getPosition(),a=editor.getSelection();editor.setValue(e),editor.setScrollLeft(t),editor.setScrollTop(o),editor.setPosition(i),editor.setSelection(a)},minify(){let e=$("#preview").contentDocument.body;e.setAttribute("minify","");var t,o={},i=editor.getValue();e.innerText=t=window.minify(i,o),e.title=`source: ${i.length}, minify: ${t.length} (${t.length/i.length*100>>0}%)\n${JSON.stringify(o,void 0,2)}`},save(){var e={},t=editor.getValue(),o=window.minify(t,e);db.save(e.id,{set:e,code:t,mini:o})},toggleWrap(){editor.updateOptions({wordWrap:this.wrap?"on":"off"}),this.wrap=!this.wrap},fullScreen(e){if(e.ctrlKey)return window.open(document.location.href.replace(/(index\.html)?[\?#]/,"preview.html#"));let t=$("#preview");document.fullscreenElement?document.exitFullscreen():t.requestFullscreen()},fullScreen2(){this.preview=!this.preview}})</script></z-></body></html>


--------------------------------------------------------------------------------
/README-en.md:
--------------------------------------------------------------------------------
  1 | # z-data
  2 | 
  3 | Z-data is an extremely lightweight zero configuration embedded mini front-end framework.
  4 | 
  5 | [[English](./README-en.md)] [[中文](./README-cn.md)]
  6 | 
  7 | # 1. Features:
  8 | 
  9 | - Without VDOM
 10 | - Zero configuration zero dependency, no compile time
 11 | - Extremely simple and lightweight, minify ~ 8K, gzipped < 5K
 12 | - H5 template supports for/if/else/use
 13 | - Template supports multi-roots
 14 | - Data dual-binding and events
 15 | - Embedded, run with other front-end frameworks (such as Vue) together easily
 16 | - Useful syntax sugars, friendly for class and style
 17 | - Run with tailwind, supports production with H5 DOM inline
 18 | 
 19 | # 2. Examples:
 20 | 
 21 | ```html
 22 | <div z-data="{name:'hello-world.html',items:{i:1,j:2,k:3}}"
 23 |      #background=`silver`
 24 | >
 25 |     <template for='k:v,i in items' key=k>
 26 |         <template if=!i>
 27 |             <div :text=name
 28 |                  :style={fontSize:`200%`}
 29 |                  #color=`#fa0a`
 30 |             ></div>
 31 |             <div class=t0
 32 |                  :class={t1:true}
 33 |                  .t2
 34 |                  :k=k
 35 |             >[if !i] i=${i}</div>
 36 |         </template>
 37 |         <template else if='k=="j"'>
 38 |             <div :css.font-size=`120%`>[if k=="j"] k=${k}</div>
 39 |         </template>
 40 |         <template else>
 41 |             <div #font-weight=`bold`>[else] k=${k}</div>
 42 |         </template>
 43 |     </template>
 44 | </div>
 45 | ```
 46 | 
 47 | Online demo:
 48 | 
 49 | * https://codepen.io/funlang/pen/NWdOQye
 50 | 
 51 | TodoMVC:
 52 | 
 53 | * https://codepen.io/funlang/pen/ExZOGJy
 54 | 
 55 | Data bindings for complex data:
 56 | 
 57 | * https://codepen.io/funlang/pen/OJWrJep
 58 | 
 59 | z-data form demo:
 60 | 
 61 | * https://funlang.org/z-data/?url=./test/z-data-form-demo.html
 62 | 
 63 | z-cloak example:
 64 | 
 65 | ```html
 66 | z-data
 67 | <div z-cloak :z-cloak.attr=false>z-cloak example</div>
 68 | 
 69 | <style>
 70 |   [z-cloak] {
 71 |     display: none;
 72 |   }
 73 | </style>
 74 | ```
 75 | 
 76 | ## 2.1. z-data studio
 77 | 
 78 | Online IDE for creating/debugging/previewing z-data code/app/comp
 79 | 
 80 | * https://funlang.org/z-data/
 81 | 
 82 | # 3. Usage:
 83 | 
 84 | ## 3.1. Install
 85 | 
 86 | - CDN https://cdn.jsdelivr.net/gh/Funlang/z-data@main/dist/z-data.min.js
 87 | 
 88 |   ```html
 89 |   <script src=//cdn.jsdelivr.net/gh/Funlang/z-data@main/dist/z-data.min.js></script>
 90 |   ```
 91 | 
 92 | ## 3.2. Scope
 93 | 
 94 |   - z- z-data attribute launch a ZData scope
 95 |     ```html
 96 |     <tag z-data=...></tag>
 97 |     ```
 98 | 
 99 |     z-data supports an init function, will run when initialization
100 | 
101 |     ```html
102 |     <tag z-data=... init=...></tag>
103 |     ```
104 | 
105 |     z-data expression can be a function expression, e.g.:
106 | 
107 |     ```html
108 |     <tag z-data="(args=>{
109 |         // some codes ...
110 |         return {
111 |           // some props ...
112 |         }
113 |       })()"></tag>
114 | 
115 |     <tag z-data="args=>{
116 |         // some codes ...
117 |         return {
118 |           // some props ...
119 |         }
120 |       }"></tag>
121 |     ```
122 | 
123 |     z-data html module (begin with z-data)
124 |     
125 |     ```html
126 |     z-data
127 |     <tag init=...></tag>
128 | 
129 |     <script>
130 |       // some codes ...
131 |       return {
132 |         // some props ...
133 |       }
134 |     </script>
135 |     ```
136 | 
137 |   - z-none stop the ZData scope, all inner tags will be ignored with ZData
138 | 
139 |     ```html
140 |     <tag z-none>
141 |       ...
142 |     </tag>
143 |     ```
144 | 
145 |   - Run with another framework together
146 | 
147 |     add x-ignore attribute to the root tag of ZData (x-ignore and other name of the 3rd framework):
148 |     ```html
149 |     <tag z-data=... x-ignore></tag>
150 |     ```
151 |     add z-none to other tag will skip ZData process
152 | 
153 | ## 3.3. template
154 | 
155 |   - template for
156 | 
157 |     ```html
158 |     <template for='k:v,i in ...' key=...></template>
159 |     ```
160 |     ZData is key needed, if key specified, the k will be key, or the v will be key
161 |     k : v , i is optional for some var, e.g.:
162 | 
163 |     ```html
164 |     <template for='k:v,i in items'></template>
165 |     <template for='  v   in items'></template>
166 |     <template for='k:    in items'></template>
167 |     <template for='   ,i in items'></template>
168 |     <template for='k:v   in items'></template>
169 |     <template for='  v,i in items'></template>
170 |     <template for=items></template>
171 |     ```
172 | 
173 |   - template if/else
174 | 
175 |     ```html
176 |     <template if=...></template>
177 |     <template else if=...></template>
178 |     <template else></template>
179 |     ```
180 | 
181 |   - template use
182 | 
183 |     ```html
184 |     <z z-none>
185 |         <template id=t1>
186 |             <div>template id = t1</div>
187 |         </template>
188 |     </z>
189 | 
190 |     <template use=#t1></template>
191 |     ```
192 | 
193 | ## 3.4. data binding
194 | 
195 |   - : directive a data binding, :: directive a data dual-binding (like modal in some framework)
196 | 
197 |     ```html
198 |     <tag :attr-name1=... ::attr-name2=...></tag>
199 |     ```
200 | 
201 | ### 3.4.1. :text :html
202 | 
203 |   :text :html for textContent and innerHTML
204 | 
205 | ### 3.4.2. :class
206 | 
207 |   :class supports [] {} and string, these will be combine to the classname in order
208 | 
209 | ### 3.4.3. :class shorthand
210 | 
211 | :class supports :class.name1.name2=...
212 |   ```
213 |   the shorthand is .name1.name2=...
214 |   if classname ends with -, and not return boolean, the value will be append to classname, e.g.:
215 |     .p-=1 causes p-1 added to classList
216 |   ```
217 | 
218 | ### 3.4.4. :style
219 | 
220 | :style supports :css shorthand, supports {} and string, the style property will be overwrite in order
221 | 
222 | ### 3.4.5. :style shorthand
223 | 
224 | :style supports :style.name.value=...
225 |   ```
226 |   :style.name=value / :css.name=value
227 |   :style.name.value=condition / :css.name.value=...
228 |   the shorthand is ..name and #name, and !name=string-value, as below:
229 |     ..width=`100px`
230 |     #border-width=`4px`
231 |     !border-width=4px
232 |     #--a-css-var=`'${theCssVarValue}'`
233 |   ```
234 | 
235 | #### 3.4.5.1 ZData.ss(s)
236 | 
237 | ```
238 | ZData.ss = (s) => AShorthandMap[s] || s;
239 | ```
240 | 
241 | ### 3.4.6. !!! Warning:
242 | 
243 | #### 3.4.6.1. : :: @ . .. \#
244 | 
245 | Attribute value is a js expression, supports js variable, or string, string must quoted with ' " `
246 | 
247 | #### 3.4.6.2. ${...}
248 | 
249 | builtin attributes with \${...} in their values, will be paused as a string expression, to \`...${...}...`
250 | 
251 | #### 3.4.6.3. !
252 | 
253 | ! will be compiled to :css.style-name=\`string-value`
254 | 
255 | ### 3.4.7. attr
256 | 
257 | :xxx.attr will be attribute, or default are prop (property)
258 | 
259 | :xxx.attr === false will be boolean attribute
260 | 
261 | #### 3.4.7.1. attr shorthand
262 | ```
263 | :!tag-attr  -> :tag-attr.attr
264 | ::!tag-attr -> ::tag-attr.attr
265 | ```
266 | ### 3.4.8. camel
267 | 
268 | :xxx.camel supports camel attributes or properties
269 | 
270 | ::value=propName, ::style.value=propName, ::css.value=propName
271 |   ```
272 |   propName is camel only, DOM attribute/property(includes style) supports .camel modifier
273 |   dual-binding will fire change event default, only input type=text will fire input event default
274 |   .input / .change modifier will force the input / change event
275 |   .trim / .number modifier will deal the value to trim or number
276 |   ```
277 |   ```
278 |   style.value updated will not reactive automatically, must execute el.fireChange() manually in el
279 |   ```
280 | 
281 | ### 3.4.9. input type='radio'
282 | ```
283 | ::checked=opt==this.value
284 | 
285 | Note: opt is prop name in data
286 | ```
287 | 
288 | ## 3.5. event
289 | 
290 | @ to bind events, supports modifiers
291 | 
292 | ### 3.5.1. Global modifier
293 | 
294 | ```
295 | camel     a-camel-name -> aCamelName
296 | prevent   preventDefault
297 | stop      stopPropagation
298 | debounce  debounce mode, follow a time optional, such as
299 |           debounce.750ms, debounce.2s, default 250ms
300 | capture   capture mode
301 | once      once mode, run once only
302 | passive   passive mode
303 | ```
304 | 
305 | ### 3.5.2. Scope modifier
306 | 
307 | ```
308 | self      tag only
309 | out       tag not
310 | window
311 | document
312 | ```
313 | 
314 | ### 3.5.3. Keyboard and mouse modifier
315 | 
316 | ```
317 | shift
318 | ctrl
319 | alt
320 | meta      or cmd
321 | ```
322 | 
323 | ### 3.5.4. Keyboard modifier
324 | ```
325 | <key>     enter, escape, space, f1 etc., details refer to:
326 |           https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values
327 | alias:  space: " ", slash: /, gt: >, eq: =
328 | ```
329 | 
330 | ### 3.5.5. Mouse modifier
331 | ```
332 | <button>  left, mid, right
333 | ```
334 | 
335 | ## 3.6. Dynamic props / events and custom directive
336 | 
337 | ### 3.6.1. Dynamic props/attrs
338 | 
339 |     :*={...}
340 |     :*.attr={...}
341 | 
342 |   e.g.:
343 | 
344 |     :*="{
345 |       min: '1',
346 |       max: '100'
347 |     }"
348 | 
349 | ### 3.6.2. Dynamic events
350 | 
351 |     @*={...}
352 | 
353 |   e.g.:
354 | 
355 |     @*="{
356 |       input: 'console.log(event)',
357 |       keydown: 'console.log(event)'
358 |     }"
359 | 
360 | ### 3.6.3. Custom directive
361 | 
362 |     z-d-...=...
363 | 
364 |   e.g.:
365 | 
366 |     z-d-rules-of-validate="[
367 |       val => !!val || 'Name is required!',
368 |       val => val.length > 5 || 'The field need 5 or more characters',
369 |     ]"
370 | 
371 |   will be reformed and apply to
372 | 
373 |     rulesOfValidate({
374 |       e: el,
375 |       v: val, // attr value of z-d-rules-of-validate
376 |       m: modifiers
377 |     })
378 | 
379 | ## 3.7. Variables
380 | 
381 | ### 3.7.1. $el
382 | 
383 | $el z-data root element
384 | 
385 | ### 3.7.2. \$el.$data
386 | 
387 | \$el.\$data the z-data data object
388 | 
389 | ### 3.7.3. ZData.nobserve (default false)
390 | 
391 | ```
392 | no observe DOM for dynamic creating z-data node
393 |   use ZData.loadHTML(), so observe DOM is not needed.
394 | ```
395 | 
396 | ## 3.8. Function
397 | 
398 | ### 3.8.1. ZData.proxy()
399 | 
400 | Reactive to the z-data data object, return ZData.proxy() wrapper, and it will reactive when change manual
401 | 
402 | ### 3.8.2. ZData.loadHTML(html, p, before, args)
403 | 
404 | Dynamic load html, p - the parent element(default body), before - insert before
405 | 
406 | * html have script, must run loadHTML. Or you can use :html=... to load html properly
407 | 
408 | ### 3.8.3. el.fireChange()
409 | 
410 | Change el style out of z-data, for dual-binding, needs to call .fireChange()
411 | 
412 | ### 3.8.4. $emit(el, name, detail)
413 | 
414 | Dispatch an event (name) with detail param to el DOM Element 
415 | 
416 | ### 3.8.5. ZData.deb(fn, ms)
417 | 
418 | Debounce
419 | 
420 | ## 3.9. Component
421 | 
422 | ### 3.9.1. z-comp
423 | 
424 | z-comp is a ZData component
425 | 
426 | ```html
427 | <tag z-comp=...></tag>
428 | ```
429 | 
430 | ### 3.9.2. z-comp URL
431 | 
432 | z-comp may equal a ./ relative path, or a http(s): resource
433 | 
434 | ```html
435 | <tag z-comp=./z-comp-2.html></tag>
436 | <tag z-comp=https://funlang.org/zdata/test/z-comp-2.html></tag>
437 | ```
438 | z-comp may be a Promise function, then return a z-comp code
439 | 
440 | ```html
441 | <tag z-comp="load_z_comp('z-comp-2')"></tag>
442 | ```
443 | 
444 | ### 3.9.3. z-comp loader ZData.get
445 | 
446 | z-comp supports z:// protocol plugin, ZData.get is exists, z:// will be work
447 | 
448 | ```
449 | Note: ZData.get is a Promise function, return like fetch(url).then(res => res.text()) rest part
450 | ```
451 | ```
452 | define and load the plugin:
453 | document.addEventListener("DOMContentLoaded", () => setTimeout(() => ZData.get = ...))
454 | 
455 | and apply ZData.get to load table-v1.5.2 component
456 | <z- z-comp=z://table-v1.5.2></z->
457 | ```
458 | 
459 | ### 3.9.4. z-comp placeholder
460 | 
461 | z-comp supports keep / remove the placeholder tag, z-xxx or del attribute, then remove itself
462 | 
463 | ```html
464 | remove the placeholder tag:
465 | <z-comp  z-comp=https://funlang.org/zdata/test/z-comp-2.html></z-comp>
466 | <div del z-comp=https://funlang.org/zdata/test/z-comp-2.html></div>
467 | ```
468 | ```html
469 | keep the placeholder tag:
470 | <div z-comp=https://funlang.org/zdata/test/z-comp-2.html></div>
471 | ```
472 | 
473 | ### 3.9.5. z-comp args
474 | 
475 | ```html
476 | <tag z-comp=... args=...></tag>
477 | ```
478 | and use args.xxx to get the args props, e.g.:
479 | ```html
480 | <div z-data @mouseover.document=$el.textContent=event.target&&(event.target.title||(event.target.closest('[title]')||{}).title)||''
481 | #color=args.color #background=args.bgcolor !height=100% !padding=8px
482 | ></div> 
483 | ```
484 | 
485 | ### 3.9.6. z-comp demo:
486 | * https://codepen.io/funlang/pen/ExZBPJL
487 | * https://codepen.io/funlang/pen/RwKzaOo
488 | 
489 | # 4. Browser compatibles
490 | 
491 | -  `z-data.js`, `z-data.min.js`
492 |   ```
493 |   2017: Chrome 61, Firefox 55, Opera 48, Safari 11, iOS 11, Android 8
494 |   ```
495 | 
496 | -  `z-data.min.es2015.js`, `z-data.min.all.js`
497 |   ```
498 |   2016: Chrome 49, Firefox 44, Opera 36, Safari 10, iOS 10, Android 7
499 |   ```
500 | 
501 | # 5. JOIN US
502 | 
503 | Welcome to join z-data project, a front-end framework for future, Enjoy!
504 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # z-data
  2 | 
  3 | Z-data 是一个超轻量级的零配置嵌入式前端框架.
  4 | Z-data is an extremely lightweight zero configuration embedded mini front-end framework.
  5 | 
  6 | [[English](./README-en.md)] [[中文](./README-cn.md)]
  7 | 
  8 | # 1. 特性 | Features:
  9 | 
 10 | - 没有虚拟 DOM | Without VDOM
 11 | - 零配置零依赖, 无需编译 | Zero configuration zero dependency, no compile time
 12 | - 极简, 超轻量级 | Extremely simple and lightweight, minify ~ 8K, gzipped < 5K
 13 | - H5 模板技术, 支持 for/if/else/use 等 | H5 template supports for/if/else/use
 14 | - 模板支持多根 | Template supports multi-roots
 15 | - 支持双向数据绑定和事件  | Data dual-binding and events
 16 | - 嵌入式, 可以和其他框架无缝嵌入 | Embedded, run with other front-end frameworks (such as Vue) together easily
 17 | - 更多语法糖, 特别对 class 和 style 友好 | Useful syntax sugars, friendly for class and style
 18 | - 鼓励配合 tailwind 以 H5 DOM 为中心 | Run with tailwind, supports production with H5 DOM inline
 19 | 
 20 | # 2. 示例 | Examples:
 21 | 
 22 | ```html
 23 | <div z-data="{name:'hello-world.html',items:{i:1,j:2,k:3}}"
 24 |      #background=`silver`
 25 | >
 26 |     <template for='k:v,i in items' key=k>
 27 |         <template if=!i>
 28 |             <div :text=name
 29 |                  :style={fontSize:`200%`}
 30 |                  #color=`#fa0a`
 31 |             ></div>
 32 |             <div class=t0
 33 |                  :class={t1:true}
 34 |                  .t2
 35 |                  :k=k
 36 |             >[if !i] i=${i}</div>
 37 |         </template>
 38 |         <template else if='k=="j"'>
 39 |             <div :css.font-size=`120%`>[if k=="j"] k=${k}</div>
 40 |         </template>
 41 |         <template else>
 42 |             <div #font-weight=`bold`>[else] k=${k}</div>
 43 |         </template>
 44 |     </template>
 45 | </div>
 46 | ```
 47 | 
 48 | 在线 demo | Online demo:
 49 | 
 50 | * https://codepen.io/funlang/pen/NWdOQye
 51 | 
 52 | TodoMVC:
 53 | 
 54 | * https://codepen.io/funlang/pen/ExZOGJy
 55 | 
 56 | 复杂数据绑定 | Data bindings for complex data:
 57 | 
 58 | * https://codepen.io/funlang/pen/OJWrJep
 59 | 
 60 | 一个表单示例 | z-data form demo:
 61 | 
 62 | * https://funlang.org/z-data/?url=./test/z-data-form-demo.html
 63 | 
 64 | z-cloak example:
 65 | 
 66 | ```html
 67 | z-data
 68 | <div z-cloak :z-cloak.attr=false>z-cloak example</div>
 69 | 
 70 | <style>
 71 |   [z-cloak] {
 72 |     display: none;
 73 |   }
 74 | </style>
 75 | ```
 76 | 
 77 | ## 2.1. z-data studio
 78 | 
 79 | 可以在线创建/调试/预览 z-data 代码
 80 | Online IDE for creating/debugging/previewing z-data code/app/comp
 81 | 
 82 | * https://funlang.org/z-data/
 83 | 
 84 | # 3. 用法 | Usage:
 85 | 
 86 | ## 3.1. 安装 | Install
 87 | 
 88 | - CDN https://cdn.jsdelivr.net/gh/Funlang/z-data@main/dist/z-data.min.js
 89 | 
 90 |   ```html
 91 |   <script src=//cdn.jsdelivr.net/gh/Funlang/z-data@main/dist/z-data.min.js></script>
 92 |   ```
 93 | 
 94 | ## 3.2. 作用域 | Scope
 95 | 
 96 |   - z-data 属性创建 ZData 作用域 | z-data attribute launch a ZData scope
 97 |   
 98 |     ```html
 99 |     <tag z-data=...></tag>
100 |     ```
101 | 
102 |     z-data 支持一个 init 函数, 在组件初始化时执行
103 |     z-data supports an init function, will run when initialization
104 | 
105 |     ```html
106 |     <tag z-data=... init=...></tag>
107 |     ```
108 | 
109 |     z-data 表达式可以是一个函数表达式, 如:
110 |     z-data expression can be a function expression, e.g.:
111 | 
112 |     ```html
113 |     <tag z-data="(args=>{
114 |         // some codes ...
115 |         return {
116 |           // some props ...
117 |         }
118 |       })()"></tag>
119 | 
120 |     <tag z-data="args=>{
121 |         // some codes ...
122 |         return {
123 |           // some props ...
124 |         }
125 |       }"></tag>
126 |     ```
127 | 
128 |     z-data HTML 模块文件 (文件开头是 z-data) | z-data html module (begin with z-data)
129 | 
130 |     ```html
131 |     z-data
132 |     <tag init=...></tag>
133 | 
134 |     <script>
135 |       // some codes ...
136 |       return {
137 |         // some props ...
138 |       }
139 |     </script>
140 |     ```
141 | 
142 |   - z-none 关闭 ZData 作用域, 其内部节点 ZData 会跳过 | z-none stop the ZData scope, all inner tags will be ignored with ZData
143 | 
144 |     ```html
145 |     <tag z-none>
146 |       ...
147 |     </tag>
148 |     ```
149 | 
150 |   - 与其他框架共存 | Run with another framework together
151 | 
152 |     在 ZData 根节点用类似以下的方式处理 (x-ignore 改为其他框架关闭作用域的属性名)
153 |     add x-ignore attribute to the root tag of ZData (x-ignore and other name of the 3rd framework):
154 |     ```html
155 |     <tag z-data=... x-ignore></tag>
156 |     ```
157 |     在其他框架根节点加 z-none 即可
158 |     add z-none to other tag will skip ZData process
159 | 
160 | ## 3.3. 模板 | template
161 | 
162 |   - template for
163 | 
164 |     ```html
165 |     <template for='k:v,i in ...' key=...></template>
166 |     ```
167 |     ZData 依赖 key, 如果没有指定 key, 则优先选用 k 做 key, 否则用 v 做 key 键
168 |     k : v , i 可以部分可选, 如:
169 |     ZData is key needed, if key specified, the k will be key, or the v will be key
170 |     k : v , i is optional for some var, e.g.:
171 | 
172 |     ```html
173 |     <template for='k:v,i in items'></template>
174 |     <template for='  v   in items'></template>
175 |     <template for='k:    in items'></template>
176 |     <template for='   ,i in items'></template>
177 |     <template for='k:v   in items'></template>
178 |     <template for='  v,i in items'></template>
179 |     <template for=items></template>
180 |     ```
181 | 
182 |   - template if/else
183 | 
184 |     ```html
185 |     <template if=...></template>
186 |     <template else if=...></template>
187 |     <template else></template>
188 |     ```
189 | 
190 |   - template use
191 | 
192 |     ```html
193 |     <z z-none>
194 |         <template id=t1>
195 |             <div>template id = t1</div>
196 |         </template>
197 |     </z>
198 | 
199 |     <template use=#t1></template>
200 |     ```
201 | 
202 | ## 3.4. 绑定 | data binding
203 | 
204 |   - : 用来做属性绑定, 其中 :: 是双向绑定 | : directive a data binding, :: directive a data dual-binding (like modal in some framework)
205 | 
206 |     ```html
207 |     <tag :attr-name1=... ::attr-name2=...></tag>
208 |     ```
209 | 
210 | ### 3.4.1. :text :html
211 | 
212 |   :text :html 分别对应 textContent 和 innerHTML
213 |   :text :html for textContent and innerHTML
214 | 
215 | ### 3.4.2. :class
216 | 
217 |   :class 支持 [] {} 和 字符串三种, 这些 classname 会按顺序合并处理
218 |   :class supports [] {} and string, these will be combine to the classname in order
219 | 
220 | ### 3.4.3. :class 简写 | :class shorthand
221 | 
222 | :class 支持 :class.name1.name2=...
223 | :class supports :class.name1.name2=...
224 |   ```
225 |   可以简写为 .name1.name2=...
226 |   如果 classname 后面为 -, 且返回值不是 boolean, 则将其值加入到 classname, 如:
227 |     .p-=1 则 classList 里会增加 p-1
228 |   ```
229 |   ```
230 |   the shorthand is .name1.name2=...
231 |   if classname ends with -, and not return boolean, the value will be append to classname, e.g.:
232 |     .p-=1 causes p-1 added to classList
233 |   ```
234 | 
235 | ### 3.4.4. :style
236 | 
237 | :style 支持 :css 别名, 支持 {} 和字符串两种, 字符串会按顺序覆盖
238 | :style supports :css shorthand, supports {} and string, the style property will be overwrite in order
239 | 
240 | ### 3.4.5. :style 简写 | :style shorthand
241 | 
242 | :style 支持 :style.name.value=...
243 | :style supports :style.name.value=...
244 |   ```
245 |   :style.name=value / :css.name=value
246 |   :style.name.value=条件 / :css.name.value=...
247 |   可以简写为 ..name 和 #name, 以及 !name=string-value, 如下:
248 |     ..width=`100px`
249 |     #border-width=`4px`
250 |     !border-width=4px
251 |     #--a-css-var=`'${theCssVarValue}'`
252 |   ```
253 |   ```
254 |   :style.name=value / :css.name=value
255 |   :style.name.value=condition / :css.name.value=...
256 |   the shorthand is ..name and #name, and !name=string-value, as below:
257 |     ..width=`100px`
258 |     #border-width=`4px`
259 |     !border-width=4px
260 |     #--a-css-var=`'${theCssVarValue}'`
261 |   ```
262 | 
263 | #### 3.4.5.1 ZData.ss(s)
264 | 
265 | ```
266 | ZData.ss = (s) => AShorthandMap[s] || s;
267 | ```
268 | 
269 | ### 3.4.6. !!! 特别注意 | !!! Warning:
270 | 
271 | #### 3.4.6.1. : :: @ . .. \#
272 | 
273 | 后面的值全部都是 js 表达式, 可以是 js 变量, 或者是字符串, 字符串要用 ' " ` 套住
274 | 
275 | Attribute value is a js expression, supports js variable, or string, string must quoted with ' " `
276 | 
277 | #### 3.4.6.2. ${...}
278 | 
279 | 非绑定的属性值中含有 \${...}, 会自动解析成一个字符串, 相当于 \`...${...}...`
280 | 
281 | builtin attributes with \${...} in their values, will be paused as a string expression, to \`...${...}...`
282 | 
283 | #### 3.4.6.3. !
284 | 
285 | ! 与 含有 ${} 的属性值类似, 会自动解析成 :css.style-name=\`string-value`
286 | 
287 | ! will be compiled to :css.style-name=\`string-value`
288 | 
289 | ### 3.4.7. attr
290 | 
291 | :xxx.attr 表示为可视 attribute 属性, 否则默认为不可见 prop 属性
292 | :xxx.attr will be attribute, or default are prop (property)
293 | 
294 | :xxx.attr === false 表示为 boolean attribute 属性
295 | :xxx.attr === false will be boolean attribute
296 | 
297 | #### 3.4.7.1. attr 简写 | attr shorthand
298 | ```
299 | :!tag-attr  -> :tag-attr.attr
300 | ::!tag-attr -> ::tag-attr.attr
301 | ```
302 | ### 3.4.8. camel
303 | 
304 | :xxx.camel 支持驼峰表示法
305 | :xxx.camel supports camel attributes or properties
306 | 
307 | ::value=propName, ::style.value=propName, ::css.value=propName
308 |   ```
309 |   其中 propName 只支持驼峰表示法, DOM 属性(包括 style)可以增加 .camel 修饰符
310 |   双向绑定默认在 change 中触发回写行为, 只有 input text 同时在 input 中触发回写
311 |   可以增加 .input / .change 强制在 input / change 中回写
312 |   支持 .trim / .number 修饰符
313 |   ```
314 |   ```
315 |   目前有些属性如 style.value 修改, 不会自动触发响应式, 需要在当前执行 el 执行 el.fireChange()
316 |   ```
317 |   ```
318 |   propName is camel only, DOM attribute/property(includes style) supports .camel modifier
319 |   dual-binding will fire change event default, only input type=text will fire input event default
320 |   .input / .change modifier will force the input / change event
321 |   .trim / .number modifier will deal the value to trim or number
322 |   ```
323 |   ```
324 |   style.value updated will not reactive automatically, must execute el.fireChange() manually in el
325 |   ```
326 | 
327 | ### 3.4.9. input type='radio'
328 | ```
329 | ::checked=opt==this.value
330 | 
331 | 注: opt 是一个 data 内的属性变量名
332 | Note: opt is prop name in data
333 | ```
334 | 
335 | ## 3.5. 事件 | event
336 | 
337 | @ 用来绑定事件, 支持 modifiers
338 | @ to bind events, supports modifiers
339 | 
340 | ### 3.5.1. 全局 | Global modifier
341 | 
342 | ```
343 | camel     事件名驼峰表示法 | a-camel-name -> aCamelName
344 | prevent   preventDefault
345 | stop      stopPropagation
346 | debounce  debounce mode, follow a time optional, such as
347 |           debounce.750ms, debounce.2s, default 250ms
348 | capture   capture mode
349 | once      once mode, run once only
350 | passive   passive mode
351 | ```
352 | 
353 | ### 3.5.2. 范围 | Scope modifier
354 | 
355 | ```
356 | self      tag only
357 | out       tag not
358 | window
359 | document
360 | ```
361 | 
362 | ### 3.5.3. 键鼠 | Keyboard and mouse modifier
363 | 
364 | ```
365 | shift
366 | ctrl
367 | alt
368 | meta      or cmd
369 | ```
370 | 
371 | ### 3.5.4. 键盘 | Keyboard modifier
372 | ```
373 | <key>     enter, escape, space, f1 etc., details refer to:
374 |           https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values
375 | alias:  space: " ", slash: /, gt: >, eq: =
376 | ```
377 | 
378 | ### 3.5.5. 鼠标 | Mouse modifier
379 | ```
380 | <button>  left, mid, right
381 | ```
382 | ## 3.6. 动态属性/事件和自定义指令 | Dynamic props / events and custom directive
383 | 
384 | ### 3.6.1. 动态属性 | Dynamic props/attrs
385 | 
386 |     :*={...}
387 |     :*.attr={...}
388 | 
389 |   e.g.:
390 | 
391 |     :*="{
392 |       min: '1',
393 |       max: '100'
394 |     }"
395 | 
396 | ### 3.6.2. 动态事件 | Dynamic events
397 | 
398 |     @*={...}
399 | 
400 |   e.g.:
401 | 
402 |     @*="{
403 |       input: 'console.log(event)',
404 |       keydown: 'console.log(event)'
405 |     }"
406 | 
407 | ### 3.6.3. 自定义指令 | Custom directive
408 | 
409 |     z-d-...=...
410 | 
411 |   e.g.:
412 | 
413 |     z-d-rules-of-validate="[
414 |       val => !!val || 'Name is required!',
415 |       val => val.length > 5 || 'The field need 5 or more characters',
416 |     ]"
417 | 
418 |   会翻译成调用如下形式的函数 | will be reformed and apply to
419 | 
420 |     rulesOfValidate({
421 |       e: el,
422 |       v: val, // attr value of z-d-rules-of-validate
423 |       m: modifiers
424 |     })
425 | 
426 | ## 3.7. 变量 | Variables
427 | 
428 | ### 3.7.1. $el
429 | 
430 | \$el 组件根节点
431 | $el z-data root element
432 | 
433 | ### 3.7.2. \$el.$data
434 | 
435 | \$el.\$data 组件的包装 data 对象
436 | \$el.\$data the z-data data object
437 | 
438 | ### 3.7.3. ZData.nobserve (default false)
439 | 
440 | ```
441 | no observe DOM for dynamic creating z-data node
442 |   use ZData.loadHTML(), so observe DOM is not needed.
443 | ```
444 | 
445 | ## 3.8. 函数 | Function
446 | 
447 | ### 3.8.1. ZData.proxy()
448 | 
449 | 在 z-data 获取 data 数据时, 用 ZData.proxy() 包装返回, 以使数据获得响应式
450 | 
451 | Reactive to the z-data data object, return ZData.proxy() wrapper, and it will reactive when change manual
452 | 
453 | ### 3.8.2. ZData.loadHTML(html, p, before, args)
454 | 
455 | 动态加载 html, p - 需要插入的父节点(默认 body), before - 需要插入该子节点之前
456 | 
457 | Dynamic load html, p - the parent element(default body), before - insert before
458 | 
459 | * html 内含有 script 的, 需要用此种方式加载, 否则可以用 :html=... 的方式加载
460 | * html have script, must run loadHTML. Or you can use :html=... to load html properly
461 | 
462 | ### 3.8.3. el.fireChange()
463 | 
464 | 在 z-data 之外修改节点 style, 如果是双向绑定, 需要调用该节点的 .fireChange()
465 | Change el style out of z-data, for dual-binding, needs to call .fireChange()
466 | 
467 | ### 3.8.4. $emit(el, name, detail)
468 | 
469 | 向 DOM 节点 el 发出名为 name 的事件, 携带 detail 参数
470 | Dispatch an event (name) with detail param to el DOM Element 
471 | 
472 | ### 3.8.5. ZData.deb(fn, ms)
473 | 
474 | 延迟运行
475 | Debounce
476 | 
477 | ## 3.9. 组件 | Component
478 | 
479 | ### 3.9.1. z-comp
480 | 
481 | z-comp 为 ZData 组件
482 | z-comp is a ZData component
483 | 
484 | ```html
485 | <tag z-comp=...></tag>
486 | ```
487 | 
488 | ### 3.9.2. 组件地址 | z-comp URL
489 | 
490 | z-comp 可以是一个 ./ 相对路径, 或者是一个 http(s): 的网络路径
491 | z-comp may equal a ./ relative path, or a http(s): resource
492 | 
493 | ```html
494 | <tag z-comp=./z-comp-2.html></tag>
495 | <tag z-comp=https://funlang.org/zdata/test/z-comp-2.html></tag>
496 | ```
497 | z-comp 还可以是一个 Promise 函数, 用来加载组件代码
498 | z-comp may be a Promise function, then return a z-comp code
499 | 
500 | ```html
501 | <tag z-comp="load_z_comp('z-comp-2')"></tag>
502 | ```
503 | 
504 | ### 3.9.3. 组件加载器 | z-comp loader ZData.get
505 | 
506 | z-comp 支持 z:// 协议插件, ZData.get 函数存在时, z:// 插件生效
507 | z-comp supports z:// protocol plugin, ZData.get is exists, z:// will be work
508 | 
509 | ```
510 | 注意: ZData.get 是一个 Promise 函数, 返回类似于 fetch(url).then(res => res.text()) 之后的部分
511 | ```
512 | ```
513 | Note: ZData.get is a Promise function, return like fetch(url).then(res => res.text()) rest part
514 | ```
515 | ```
516 | 定义并加载插件:
517 | document.addEventListener("DOMContentLoaded", () => setTimeout(() => ZData.get = ...))
518 | 
519 | 应用 ZData.get 加载 table-v1.5.2 组件
520 | <z- z-comp=z://table-v1.5.2></z->
521 | ```
522 | ```
523 | define and load the plugin:
524 | document.addEventListener("DOMContentLoaded", () => setTimeout(() => ZData.get = ...))
525 | 
526 | and apply ZData.get to load table-v1.5.2 component
527 | <z- z-comp=z://table-v1.5.2></z->
528 | ```
529 | 
530 | ### 3.9.4. 组件占位符 | z-comp placeholder
531 | 
532 | z-comp 可以选择保留 / 删除组件占位符, z-xxx 或者含有 del 属性的, 删除占位符
533 | z-comp supports keep / remove the placeholder tag, z-xxx or del attribute, then remove itself
534 | 
535 | ```html
536 | remove the placeholder tag:
537 | <z-comp  z-comp=https://funlang.org/zdata/test/z-comp-2.html></z-comp>
538 | <div del z-comp=https://funlang.org/zdata/test/z-comp-2.html></div>
539 | ```
540 | ```html
541 | keep the placeholder tag:
542 | <div z-comp=https://funlang.org/zdata/test/z-comp-2.html></div>
543 | ```
544 | 
545 | ### 3.9.5. 组件参数 | z-comp args
546 | 
547 | ```html
548 | <tag z-comp=... args=...></tag>
549 | ```
550 | 在组件内部, 用 args.xxx 来使用传进来的参数, 形如:
551 | and use args.xxx to get the args props, e.g.:
552 | ```html
553 | <div z-data @mouseover.document=$el.textContent=event.target&&(event.target.title||(event.target.closest('[title]')||{}).title)||''
554 | #color=args.color #background=args.bgcolor !height=100% !padding=8px
555 | ></div> 
556 | ```
557 | 
558 | ### 3.9.6. z-comp demo:
559 | * https://codepen.io/funlang/pen/ExZBPJL
560 | * https://codepen.io/funlang/pen/RwKzaOo
561 | 
562 | # 4. 浏览器兼容性 | Browser compatibles
563 | 
564 | -  `z-data.js`, `z-data.min.js`
565 |   ```
566 |   2017: Chrome 61, Firefox 55, Opera 48, Safari 11, iOS 11, Android 8
567 |   ```
568 | 
569 | -  `z-data.min.es2015.js`, `z-data.min.all.js`
570 |   ```
571 |   2016: Chrome 49, Firefox 44, Opera 36, Safari 10, iOS 10, Android 7
572 |   ```
573 | 
574 | # 5. 加入我们 | JOIN US
575 | 
576 | 欢迎加入 z-data 项目, 一起工作, Enjoy!
577 | Welcome to join z-data project, a front-end framework for future, Enjoy!
578 | 


--------------------------------------------------------------------------------
/dist/z-data.min.all.js:
--------------------------------------------------------------------------------
1 | const ZData=(()=>{var i,a=0,U=0,h=0,u=0,e="Attribute",t="Element",r=t+"Sibling",s=t+"Child";const w="z-data",$="z-comp",x="z-none",f="init",k="args",G="use",S="_z_d",m=`[${w}]`,j="get"+e,z="set"+e,D="remove",K=D+e,O="first"+s,V="last"+s,X="previous"+r,Z="next",N=Z+r,v="create"+t,d="parent"+t,E="insertBefore",M="forEach",A="includes",L="length",y="startsWith",C=(e,t=/ +/)=>e.trim().split(t),_="replace",P="textContent",Y="input",Q="change",ee="class",F="style",b="querySelector",R=document,te=(e,t=R)=>t[b+"All"](e),l=(e,t=`[${x}]`)=>e.closest(t),re="addEventListener",T=Object.keys,n=Object.values||(t=>T(t).map(e=>t[e])),q=Object.assign,c="deleteProperty",J=(e,t="object")=>typeof e==t,o=e=>J(e,"function"),W=void 0,se=/^(?:camel|prevent|stop|debounce|(\d+)(?:(m?)s)|capture|once|passive|self|out|window|document|(shift|ctrl|alt|meta)|(cmd))$/,ae=/^(?:\s*(?:(\w+)\s*:\s*)?(\w*)(?:\s*,\s*(\w+))?\s+in\s+)?(.+)$/,ne=/^[:@.#!].|^z-d-/,oe=/^(?:(:)(:?)(!?)|(@)|([.#!])|(z-d-))?([^.]*)(?:[.]([^.].*))?$/,ie=e=>e&&0<=e.indexOf("${")&&e.indexOf("`")<0,le=/[-_ ]+/g,p=/-([a-z])/g,fe=new WeakMap,de=(t,r)=>{if(!t||!J(t)||o(t)||t.__ob__||t._isVue||!delete t[r.i])return t;{let e=fe.get(t);if(e||((e={s:{},set(e,t,r,s){for(var a in this.s)this.s[a].set(e,t,r,s);return!0},[c](e,t){let r,s=!0;for(r in this.s)s=this.s[r][c](e,t)&&s;return s}}).p=new Proxy(t,e),fe.set(t,e).set(e.p,e)),!e.s[r.i])for(var s in e.s[r.i]=r,t)try{t[s]=i(t[s],r)}catch(e){}return e.p}},ce=(e,t,r)=>e.dispatchEvent(new CustomEvent(t,{detail:r,bubbles:!0})),H=(t,r)=>{if(!t[S]||!(a<=t[S].age||t[S].ing)){(t[S]||(t[S]={})).age=a,t[S].ing=(t[S].ing||0)+1,r=r&&(t[S].env=r)||t[S].env||{ps:{$emit:ce},d:{}};var e=e=>{u++,De(R.body),ue({p:t[d],el:t},q({},r,{d:t[S].zd,r:t}),e||a),u--,Oe(R.body)};let o=g(e);var s=t[S].zd;if(!s){let n={i:S+Math.random(),set(e,t,r,s,a){o();try{a||(e[t]=i(r,n))}catch(e){}return!0},[c](e,t){return t!=this.i&&(o(),delete e[t])}};i=window.ZDataProxy||de,ZData.proxy=e=>i(e,n),s=B(t,t[j](w),r,W,t[k]||{})||{},t.$data=t[S].zd=s=i(s,n),t[z](w,""),t[k]&&(s[k]=t[k]),B(t,t[j](f),q({},r,{d:s}))}e(1),t[S].ing--}},pe={},ue=(t,s,d)=>{let{p:r,el:a,cp:n}=t,e;let o=(i=a[S]||(a[S]={})).as||(i.as=(e=pe[a[j]("z-d")])?(i.ps=e.ps,e.as):a.getAttributeNames());if(!o[A](x)){if(!n){let e;if(d===W&&o[A](w))return H(a,s);if(o[A]($)&&(e=a[j]($))){try{a[K]($),(/^([.\/]|https?:)/.test(e)?fetch(e).then(e=>e.text()):/^z:/.test(e)&&ZData.get?ZData.get(e):B(a,e,s)).then(e=>{var t=B(a,a[j](k),s);"-"==a.tagName[1]||o[A]("del")?ze(e,r,a,t,1):ze(e,a,W,t)}).catch(be)}catch(n){}return}if("template"==a.localName){if(a.content||(a.content=R.createDocumentFragment())[E](a[O],W),e=a[j]("for")){var f=t,c=(i=e,s);if(d=ae.exec(i)){var p,{p:u,el:m}=f;let e=B(m,d[4],c),t={k:d[1],v:d[2],i:d[3]},a=q({},c,{ps:q({},c.ps,{})}),r=m[j]("key"),s=r&&C(r,"."),n=m[S].ns||(m[S].ns={}),o=0,i=m,l=m[S].age=(m[S].age||0)+1;for(p in s=s&&2==s[L]&&s[0]==t.v&&s[1],t.k&&(a.ps[t.k]=W),t.v&&(a.ps[t.v]=W),t.i&&(a.ps[t.i]=W),e){var b=e[p];if(t.k&&(a.ps[t.k]=p),t.v&&(a.ps[t.v]=b),t.i&&(a.ps[t.i]=o++),(b=s?b[s]:r?B(m,r,a):t.k?p:b)!==W){t.k&&(a.ps[t.k]=b);let s=i[N],e=n[b];if(e){if(e.age==l)continue;let t=e.t[N],r=e.s!=s;r&&s&&!e.s[S].skip&&(s[S].skip=1,s=(f.el=s)[S].t[N],I(f,a,e=>e!=s,be),r=e.s!=(s=f[Z])),f.el=e.s,f.el[S].skip=0,I(q({},f,{}),a,e=>e!=t),I(f,a,e=>e!=t,({p:e,el:t})=>{r&&e[E](t,s)}),r?f[Z]=s:s=f[Z],e.age=l}else f.el=m,ge(f,a),f.el=i[N],e=n[b]={age:l,s:f.el},I(f,a,e=>e!=s);e.s[S].t=e.t=i=s?s[X]:u[V]}}T(n).filter(e=>n[e].age!=l)[M](e=>{ve({el:n[e].s},n[e].t[N],c),delete n[e]}),f[Z]=i[N]}}else{var i=t,d=e=a[j]("if"),l=s,{p:g,el:h}=i;if(!d||B(h,d,l)){let e,t=i[Z],r=be;h[S].fi?(t=h[S].fi[N],(e=(e=h[j](G))&&B(h,"`"+e+"`",l))&&h[S].u!=e&&(he(i,l),ge(q({},i,{el:h,next:t}),l))):(ge(i,l),r=he),i.el=h[N],I(i,l,e=>e!=t),I(i,l,me,r),h[S].fi=t?t[X]:g[V]}else he(i,l)}return}}{var v=t,y=s;d=o;let l=v.el,r=l[S],n=r.vs||(r.vs=[]),f=r.ps;if(!f){f=r.ps={ps:[]},v.cp&&(pe[++U]={as:d,ps:f},l[z]("z-d",U)),d[M](n=>{var o,i=l[j](n);if(ne.test(n)||ie(i)){let e=oe.exec(n),t=e[7],r=e[5],s=e[6],a=r?"."==r&&t?ee:(t=ZData.ss(t),F):t;(a=we[a]||a)&&(o=e[8]&&C(e[8],".")||[],(o={a:n,k:s?W:a!=ee&&o[A]("camel")?ye(a):a,b:(e[4]?3:e[2]&&2)||(e[1]||r||s?1:W),m:r&&t?[t,...o]:o,e:s?`${ye(a)}({e:this,v:${i||!0},m:{${o.map(e=>e+":1").join()}}})`:i,A:e[3]||o[A]("attr")}).b&&"!"!=r||(o.e="`"+o.e+"`"),f.ps.push(o),o.b)&&l[K](n)}else ZData.ss(n,i)});let e,t;(e=l.firstChild)&&e==l.lastChild&&3==e.nodeType&&ie(t=e.nodeValue)&&f.ps.push({k:P,e:"`"+t+"`",m:[]})}if(!v.cp){let a=0,t=r=>{if("*"==r.k)for(var e in r.K=B(l,r.e,y,r)||{})t(q({},r,{k:e,e:r.K[e],E:1,f:W}));else if(3==r.b)$e(v,r,y);else{let t=r.e;r.E||(t=B(l,t,y,r,r.k?W:1),r.k)||(r.e=W);var s=r.m[A]("number");if(r.k&&n[a]!==t&&(((r,e,s,a)=>{if(e.k==ee){if(e.m[L]){let t=""===e.e||s;s={},e.m[M](e=>{e.endsWith("-")?(s[e+t]=1,a&&(s[e+a]=0)):s[e]=t})}let t=r.classList;if(!Array.isArray(s)){if(J(s)){for(var n in s)s[n]?t.add(n):t[D](n);return}s=s?C(s):[]}s[M](e=>t.add(e))}else e.k==F&&(e.m[L]&&(s=1==e.m[L]?{[e.m[0]]:s}:{[e.m[0]]:s&&e.m[1]}),J(s))?T(s)[M](e=>{!1===s[e]?r[F].removeProperty(e):"-"==e[0]?r[F].setProperty(e,s[e]):r[F][e]=s[e]}):e.A?!1===s?r[K](e.k):r[z](e.k,s):r[e.k]=s})(l,r,s&&l.u&&J(t,"string")?t[_](/[^\d.-]/g,""):t===W?"":t,n[a]),n[a]=t),2==r.b){if(!r.b2){t="this."+r.k,r.k==F&&r.m[L]&&(t+="[`"+r.m[0]+"`]");let e="text"==l.type?Y:Q;r.m[A](Y)?e=Y:r.m[A](Q)&&(e=Q),r.m[A]("trim")&&(t+=".trim()"),s&&(t="this.u?this.u.replace(/1/,"+t+"):parseFloat("+t+")"),s="=this."+S+".vs["+a+"]=",t=/==/.test(r.e)?t+"&&("+r.e[_](/==+/,s)+")":r.e+s+t,r.b2=q({},r,{e:t,k:e,ev:e,f:W})}$e(v,r.b2,y)}a++}};f.ps[M](t)}}I({cp:n,p:a,el:a[O]},s)}},I=(e,t,r,s)=>{for(;e.el&&(!r||r(e.el));e.el=e[Z])e[Z]=e.el[N],s&&!s(e,t)||ue(e,t)},me=e=>e.hasAttribute("else"),be=()=>0,ge=({p:e,el:t,next:r,n:s},a,n)=>{(s=t[S].node)||(s=(s=t[j](G))&&(t[S].u=s=B(t,"`"+s+"`",a))&&(s=a.r[b](s)||(n=l(a.r[d],m))&&n[b](s))&&s.content||t.content,t[S].u||(t[S].node=s),I({cp:1,p:s,el:s[O]}));for(let o=s[O];o;o=o[N])s=o.cloneNode(!0),e[E](s,r)},he=(e,t)=>{var r;e.el[S]&&e.el[S].fi&&(r=e.el[S].fi[N],e.el[S].fi=W,e.el=e[Z],ve(e,r,t))},ve=(e,t,r)=>{I(e,r,e=>e!=t,({el:e})=>{e[D]()})},ye=e=>e[_](p,(e,t)=>t.toUpperCase()),we={css:F,text:P,html:"innerHTML"},g=(r,s)=>{let a;return(...e)=>{let t=this;a=(a=s?clearTimeout(a):a)||setTimeout(()=>{a=W,r.apply(t,e)},s)}},$e=({el:i},t,l)=>{let{a:f,k:d,e:c,ev:r,m:p}=t;if(!i[S][f]){let a=p[A]("window")?window:p[A]("document")||p[A]("out")?R:i,n=e=>{if(!(p[A]("self")&&i!=e.target||p[A]("out")&&i.contains(e.target))){if(d[y]("key")||d[y]("mouse")||d.endsWith("click")){for(var t of p)if((t=se.exec(t))&&(t[3]||t[4])&&(!(t=t[3]||t[4]&&"meta")||!e[t+"Key"]))return;var r=p.filter(e=>!se.test(e));if(1==r[L])if(d[y]("key")&&e.key){var s=r[0][_](le,"");if(({space:" ",slash:"/",gt:">",eq:"="}[s]||s)!=(e.key.toLowerCase()[_](le,"")||" "))return}else if(["left","mid","right"][e.button]!=r[0])return}return p[A]("prevent")&&e.preventDefault(),p[A]("stop")&&e.stopPropagation(),p[A]("once")&&a.removeEventListener(d,n,o),B(i,c,q({},l,{ps:q({},i[S][f],{$el:l.r})}))}},e=p.indexOf("debounce"),o=(0<=e&&(e=p[e+1],t=se.exec(e),e=t&&t[1]?t[2]?+t[1]:1e3*t[1]:250,n=g(n,e)),{capture:p[A]("capture"),passive:p[A]("passive")});a[re](d,n,o),r&&!i[e="fireChange"]&&(i[e]=()=>ce(i,r))}i[S][f]=q({},l.ps,{})},xe={},ke=(e,t,r,s)=>(r=s&&s.f||xe[r+=e]||(xe[r]=new Function(["$2D",...t],"var R3$;with($2D){R3$="+e+"};return R3$")),s&&!s.f&&(s.f=r),r),B=(e,t,r,s,a)=>t&&je(()=>o(t)?t.call(e,r.r):(t=ke(t,T(r.ps),T(r.ps).join(","),s).call(e,r.d,...n(r.ps)),a&&o(t)?t(a):t),{el:e,exp:t}),Se=(e,t,r)=>console.warn(`E ${w}: ${r} [${t}]`,e),je=(e,{el:t,exp:r})=>{try{var s=e();return s instanceof Promise?s.catch(e=>Se(t,r,e)):s}catch(e){Se(t,r,e)}},ze=(e,r,s,t,a,n)=>{r=r||R.body;let o,i=[],l,f="",d,c=R[v](w),p=((o=r[j]("z-i"))||r[z]("z-i",o=++h),g(()=>{--u<0&&(u=0),i[L]&&i.shift()()}));c[we.html]=e[_](/<!--[^]*?-->/g,"")[_](/^z-data\s*/,()=>n=1)[_](/<(script)([^>]*)>([^]*?)<\/\1>/gi,(e,t,s,a)=>{var r=s.match(/src\s*=\s*(?:'([^']+)|"([^"]+)|(\S+))/);if((s=r&&(r[1]||r[2]||r[3]))&&!te(`script[src="${s}"]`)[L]||a){let r=R[v]("script"),t=(e,t)=>(l=()=>(R.body[E](r,W),e&&e()),t?l():i.push(l));r[z](x,""),s?ZData.get?i.push(()=>ZData.get(s).then(e=>(r[P]=e,t(p,1)))):(r.src=s,r.onload=r.onerror=p,t()):n&&!f?f=a:(r[P]=a,t(p))}return""})[_](/(<style[^>@]*>)([^]*?)(?=<\/style>)/gi,(e,t,r)=>t+r[_](/\s*([^{}]+)(?=\{)/g,(e,t)=>/^[@\d]|^(from|to)\b/.test(t)?t:C(t,/\s*,\s*/).map(e=>e[_](/^(\[z-i=.*?\] )?(.*)/,(e,t,r)=>`[z-i="${o}"] `+r)).join(","))),d=c[b](m)||c[O],n&&f&&d[z](w,`args=>{${f[_](/\bexport\s+default(?=\s*\{)/,"return")}}`),d&&t&&(d[k]=t),i.push(()=>{for(let e=c[O],t=e&&e[N];e;t=(e=t)&&t[N])r[E](e,s);a&&s&&s[D](),p()}),i.push(()=>d&&H(d)),u+=i[L],p()},De=e=>e[S]&&e[S].ob&&e[S].ob.disconnect(),Oe=e=>{let t=(e[S]||(e[S]={})).ob||(e[S].ob=new MutationObserver(s=>{if(!u)if(e==R.body){if(s[L]<99){let e=1;for(let t=0,r;t<s[L];t++)e=e&&(l(r=s[t].target)||!l(r,m)&&!r[b](m));if(e)return}Ze()}else H(e)}));ZData.nobserve||g(()=>t.observe(e,{childList:!0,subtree:!0}))},Ze=g(()=>Ne(W,1)),Ne=(e,t)=>{t||++a,++u,De(R.body),te(m)[M](e=>l(e)||H(e)),--u,Oe(R.body)},Ee={};return R[re]("DOMContentLoaded",Ne),{start:Ne,loadHTML:ze,on:(e,t)=>((Ee[e]=Ee[e]||[]).push(t),ZData),call:(e,t)=>(Ee[e]||[])[M](e=>e(t)),ss:e=>e,deb:g}})(),zJSON=(null==Element.prototype.getAttributeNames&&(Element.prototype.getAttributeNames=function(){for(var e=this.attributes,t=e.length,r=new Array(t),s=0;s<t;s++)r[s]=e[s].name;return r}),NodeList.prototype.forEach||(NodeList.prototype.forEach=Array.prototype.forEach),{onStringify:(e,t)=>{if(e&&"object"==typeof e&&!t.get(e)&&t.set(e,1))for(var r in e){var s=e[r];"function"==typeof s?e[r]={"@type":"function","@text":s.toString()}:zJSON.onStringify(s,t)}return e},onParse:obj=>{if(obj&&"object"==typeof obj)for(var i in obj){let o=obj[i];if(o&&"object"==typeof o)if("function"==o["@type"]&&"@text"in o){let s=zJSON.fn(o["@text"]);obj[i]=eval(s)}else zJSON.onParse(o)}return obj},fn:e=>e.replace(/^ *(function )? *(\w+) *(\([^]*$)/,(e,t,r,s)=>"(()=>"+(t||"function"!=r?"function ":"")+r+s+")()"),init(){let r=JSON.parse,s=JSON.stringify;JSON.parseEx=(e,t)=>zJSON.onParse(r(e,t)),JSON.stringifyEx=(e,t,r)=>s(zJSON.onStringify(e,new WeakMap),t,r)}});function yaqsmini(e,a){return a?1==a?e.replace(/^(?:(\d+)(?:\)|(])))?(.*)/gm,(e,t,r,s)=>(a=(t=(t=r?a.match(new RegExp(`^('[^']+' +|"[^"]+" +|[^ ]+ +){${t}}`))[0].length:t)?+t:0)?a.slice(0,t)+s:s," ".repeat(t)+s)):e.replace(/^(   +)?(.*)$/gm,(e,t,r)=>{var s;return t?(s=(t=a.slice(0,t.length)).replace(/'[^']+' +|"[^"]+" +|[^ ]+ +/g,".").length,a=t+r,s+"]"+r):a=e}):e.replace(/^   +/gm,e=>e.length+")")}function yaqs(e){let s;return e.replace(/\\n[ \n]/g,"\n").replace(/^.*$/gm,e=>s=e.replace(/^ +|^(\d+)(?:\)|(]))/,(e,t,r)=>s.slice(0,r?s.match(new RegExp(`^('[^']+' +|"[^"]+" +|[^ ]+ +){${t}}`))[0].length:t?+t:e.length).replace(/^-(?=\s+)/,">")).replace(/([^ :=])( +([^ '"]*|'[^']*'|"[^"]*"))$/,"$1:$2")).replace(/\n/g,";")}function qs2json(e,o=".",i="",l=!1){let f=(e,t)=>"object"==typeof e&&/^[->]$/.test(t)?e.length-("-"!=t?1:0):t,d=/^\s*[-0]\s/.test(e)?[]:{};return e.replace(/^[#? ]+| +$/,"").split(/\s*[&;]\s*/).forEach(r=>{let[s,a]=r.split(/\s*[=:]\s*/,2);if(s){a=r.slice(s.length).replace(/^\s*[=:]\s*/,"")||i,a=/^-?(\d*\.)?\d+$/.test(a)?+a:a.replace(/^"([^"]+)"$|^'([^']+)'$/,(e,t,r)=>t||r||""),l&&/^\/.+\/$/.test(a)&&(a={$regex:a.slice(1,-1)});r=(s=(s=s.replace(/"([^"]+)"|'([^']+)'/g,(e,t,r)=>(t||r||"").replace(/ +/g,o).replace(new RegExp(`[${o}]`,"g"),'"'))).replace(/ +/g,o).split(o)).slice(-1)[0].replace(/"/g,o);let e=d;for(let t=0;t<s.length-1;t++){var n=s[t].replace(/"/g,o),n=f(e,n);e=e[n]?"object"==typeof e[n]?e[n]:e[n]={"":e[n]}:e[n]=/^[-0]$/.test(s[t+1])?[]:{}}r=f(e,r),e[r]={true:!0,false:!1,undefined:"","{}":{},"[]":[]}[a],void 0===e[r]&&(e[r]=a)}}),d}function json2qs(e,s="&",a="=",n=".",o){const i=(e,t)=>" "==n&&"string"==typeof e&&(t?/ /:/ |^-?(\d*\.)?\d+$/).test(e)?'"'+e+'"':e;let l=(t,r="")=>e&&Object.keys(t).map(e=>"object"!=typeof t[e]||o&&o(e,t[e],1)||!Object.keys(t[e]).length&&!o?(e?r+i(e,1).replace(/[A-Z]/g,e=>o?"-"+e.toLowerCase():e):r.slice(0,-1))+a+(o&&o(e,t[e])||(void 0===t[e]?"":Array.isArray(t[e])?"[]":"object"==typeof t[e]?"{}":i(t[e]))):l(t[e],r+i(e,1)+n)).join(s)||"";return l(e)}function json2yaqs(e,n){const o=e=>e.match(/"[^"]+"|'[^']+'|[^ ]+/g);return json2qs(e,"\n"," "," ").replace(/^.+$/gm,t=>{let r=t;if(n){var s=o(n),a=o(t);for(let e=0;e<s.length;e++)if(s[e]!=a[e]){0<e&&(r=e+"]"+t.slice(s.slice(0,e).join(" ").length+1));break}}return n=t,r})}function css2json(e){return qs2json(e,"-")}function json2css(t,e){if(e){let e="";for(var r in t)e=(e+=r+"{")+json2css(t[r],"@"==r[0])+"}";return e}return json2qs(t,";",":","-",(e,t,r)=>/(^transform|\bfilter)$/.test(e)&&t&&Object.keys(t).length&&(r||json2qs(t,") ","(")+")"))}function sig(e,t){const r="12345678qwertyuioplkjhgfdsazxcvbnmMNBVCXZASDFGHJKLPOIUYTREWQ";let s=0;for(let n=0;n<e.length;n++)s=31*s%0xfffffffffff0+e.charCodeAt(n);s=(s%0xfeeffeeffef00000).toString();let a=t||s;return a=a.replace(/./g,function(e){return t?r.indexOf(e)%10:r[10*(6*Math.random()|0)+e.charCodeAt(0)-48]}),t?s==a:a}function runIf(e,t,r){let s=()=>setTimeout(()=>(t()?e:s)(),r);s()}try{ZData.get=top.ZData&&top.ZData.get||(r=>{let s=top.__z_data_cache__||(top.__z_data_cache__={});return s[r]||(s[r]=new Promise(e=>{var t=/^z:/.test(r)?"/page?id="+r.replace(/^z:\/*/,""):r;fetch(t).then(e=>e.text()).then(t=>{s[r]=new Promise(e=>t&&e(t)),t&&e(t)})}))})}catch(e){console.warn(e.message)}const ZDataStyle={csss:{},cache:{},add(e){!function e(t,r){for(var s in t)r[s]&&"object"==typeof r[s]?e(t[s],r[s]):r[s]=t[s]}(e,this.csss),(this.updateLater||(this.updateLater=function(r){let s;return(...e)=>{let t=this;s=s||setTimeout(()=>{s=void 0,r.apply(t,e)})}}(function(t){var r=json2css(t.csss,1);if(r!=t.old){t.old=r;let e=document.querySelector("style#z-data-ss");e||((e=document.createElement("style")).id="z-data-ss",e.setAttribute("keep",""),document.head.insertBefore(e,null)),e.textContent=r}})))(this)},namedGroup(e,t){var r={};for(let s=0;s<t.length;s++)r[t[s]]=e[s+1];return r},env:{PM:{p:"padding",m:"margin"},HW:{h:"height",w:"width"},XN:{x:"max",n:"min"},LTRB:{l:"left",t:"top",r:"right",b:"bottom"},FSLH:{font:"font-size",lh:"line-height",gap:"gap",gapr:"row-gap",gapc:"column-gap",brad:"border-radius"},OOZ:{op:"opacity",ord:"order",z:"z-index"},POS:{pos:"position",d:"display",cs:"cursor",v:"visibility",ws:"white-space",us:"user-select",pe:"pointer-events"},OF:{o:"overflow"},COLOR:{b:"background",c:"color"},IF:(e,t,r="-",s="")=>e?r+(t[e]||e)+s:"",NUMS:(e,t)=>/^--/.test(e)?`var(${e})`:""+(t?e:e/4)+(t||"rem"),MINW:{sm:640,s:640,md:768,m:768,lg:1024,l:1024,xl:1280,"2xl":1536,xxl:1536}},pattern:/^(?:(sm?|md?|lg?|xl|[2x]xl|print):)?(?:((p|m)(l|t|r|b)?(-?(?:\d*\.)?\d+|--\w+)(\w+|%)?)|(([pm])x(\S*))|(([pm])y(\S*))|((x|n)?(h|w)(-?(?:\d*\.)?\d+|--\w+)(\w+|%)?)|((font|lh|gap|gapr|gapc|brad)(-?(?:\d*\.)?\d+|--\w+)(\w+|%)?)|((l|t|r|b)(-?(?:\d*\.)?\d+|--\w+)(\w+|%)?)|((op|ord|z)(-?(?:\d*\.)?\d+|--\w+))|((pos|d|cs|v|ws|us|pe)-([\w\-]+))|((o)(x|y)?-(\w+))|((content)(-\S+)?)|((b|c)(#[0-9a-fA-F]+|--\w+))|((brad)(l|t|r|b)(l|t|r|b)(-?(?:\d*\.)?\d+|--\w+)(\w+|%)?)|((brad)([tb])(\S*)))$/,patterns:["media","rule16","pm16","side16","num16","unit16","rule17","pm17","any17","rule18","pm18","any18","rule19","xn19","hw19","num19","unit19","rule20","fslh20","num20","unit20","rule21","side21","num21","unit21","rule22","ooz22","num22","rule23","pos23","value23","rule24","of24","xy24","value24","rule25","name25","value25","rule26","name26","color26","rule27","a27","side27","sidE27","num27","unit27","rule28","a28","side28","any28"],monaco:/\b(?:(?:sm?|md?|lg?|xl|[2x]xl|print):)?(?:(?:(?!not)\w+)(?:[-+~\^]))?(?:not-)?(?:hover|focus(?:-\w+)?|active|after|before|(?:first|last)(?:-\w+)*)=|\b(?:bd|bl|bt|br|bb|bg|a|al|font|flex|grid|mask)=(?:'[^']+'|"[^"]+"|[^\s>]+)?|\b(?:(?:sm?|md?|lg?|xl|[2x]xl|print):)?(?:(?:p|m)(?:l|t|r|b)?(?:-?(?:\d*\.)?\d+|--\w+)(?:\w+|%)?|(?:[pm])x(?:[^\s>]*)|(?:[pm])y(?:[^\s>]*)|(?:x|n)?(?:h|w)(?:-?(?:\d*\.)?\d+|--\w+)(?:\w+|%)?|(?:font|lh|gap|gapr|gapc|brad)(?:-?(?:\d*\.)?\d+|--\w+)(?:\w+|%)?|(?:l|t|r|b)(?:-?(?:\d*\.)?\d+|--\w+)(?:\w+|%)?|(?:op|ord|z)(?:-?(?:\d*\.)?\d+|--\w+)|(?:pos|d|cs|v|ws|us|pe)-(?:[\w\-]+)|(?:o)(?:x|y)?-(?:\w+)|(?:content)(?:-[^\s>]+)?|(?:b|c)(?:#[0-9a-fA-F]+|--\w+)|(?:brad)(?:l|t|r|b)(?:l|t|r|b)(?:-?(?:\d*\.)?\d+|--\w+)(?:\w+|%)?|(?:brad)(?:[tb])(?:[^\s>]*))|[!#][\w\-]+/,monacos:[],media:/^(?:(sm?|md?|lg?|xl|[2x]xl|print):)?(?:((?!not)\w+)([-+~\^]))?(not-)?(hover|focus(?:-\w+)?|active|after|before|(?:first|last)(?:-\w+)*)$|^(bd|bl|bt|br|bb|bg|a|al|font|flex|grid|mask)$/,medias:["media","before","to","not","after","group"],targets:{rule16:"${PM[pm]}${IF(side,LTRB,'-','')}:${NUMS(num,unit)}",rule17:"> ${pm}l${any} ${pm}r${any}",rule18:"> ${pm}t${any} ${pm}b${any}",rule19:"${IF(xn,XN,'','-')}${HW[hw]}:${NUMS(num,unit)}",rule20:"${FSLH[fslh]}:${NUMS(num,unit)}",rule21:"${LTRB[side]}:${NUMS(num,unit)}",rule22:"${OOZ[ooz]}:${/^--/.test(num) ? `var(${num})` : num > 1 && ooz == 'op' ? num / 100 : num}",rule23:"${POS[pos]}:${value}",rule24:"${OF[of]}${IF(xy,{},'-','')}:${value}",rule25:"${name}:'${value ? value.slice(1) : ''}'",rule26:"${COLOR[name]}:${/^--/.test(color) ? `var(${color})` : color}",rule27:"border-${LTRB[side]}-${LTRB[sidE]}-radius:${NUMS(num,unit)}",rule28:"> brad${side}l${any} brad${side}r${any}"}};function flowid(e){e=String(e||0);var t=(new Date).format("yymmddhhnnsszzzrr");let r=0,s=t+e;for(let a=0;a<s.length;a++)r=31*r%0xfffffffffff0+s.charCodeAt(a);return t+(r="qwertyuioplkjhgfdsazxcvbnmMNBVCXZASDFGHJKLPOIUYTREWQ"[r%52])+e}function snowid(i,l=1656565656565){const f="snowid-9_qertyuplkjhgfazxcvbmMNBVCXZASDFGHJKLPOIUYTREWQ123456780";i%=1024;let d=0;return{id:()=>{let e=Date.now();e<=d&&(e=d+1),d=e,e-=l;var r,t=i<<2,s=63&t;let a="",n=0;for(r of[[t,2],[e,7]]){let e=r[0],t=r[1];for(;t--;){var o=63&e;e>>=6,a=f[o]+a,n=7*n%127+o}}return a=a.slice(0,-1)+f[s+n&3]},toTime:r=>{if(9==r.length){let e=0;for(let t=0;t<7;t++)e=(e<<6)+f.indexOf(r[t]);return new Date(e+l)}}}}ZData.ss=(s,v,args={})=>{let{after,before,attr,media,preview,ret}=args;if(after=after||"",before=before||"",attr=attr||"",void 0===v)return{pos:"position",z:"z-index",d:"display",o:"overflow",ox:"overflow-x",oy:"overflow-y",l:"left",t:"top",r:"right",b:"bottom",w:"width",h:"height",nw:"min-width",nh:"min-height",xh:"max-height",xw:"max-width",lh:"line-height",p:"padding",pl:"padding-left",pt:"padding-top",pr:"padding-right",pb:"padding-bottom",m:"margin",ml:"margin-left",mt:"margin-top",mr:"margin-right",mb:"margin-bottom",v:"visibility",c:"color",bg:"background",bv:"backface-visibility",op:"opacity",bd:"border",bl:"border-left",bt:"border-top",br:"border-right",bb:"border-bottom",bc:"border-color",bs:"border-style",bw:"border-width",blc:"border-left-color",bls:"border-left-style",blw:"border-left-width",btc:"border-top-color",bts:"border-top-style",brc:"border-right-color",brs:"border-right-style",brw:"border-right-width",btw:"border-top-width",bbc:"border-bottom-color",bbs:"border-bottom-style",bbw:"border-bottom-width",brad:"border-radius",btlr:"border-top-left-radius",btrr:"border-top-right-radius",bblr:"border-bottom-left-radius",bbrr:"border-bottom-right-radius",shadow:"box-shadow",g:"grid",f:"flex",fb:"flex-basis",fd:"flex-direction",fg:"flex-grow",fs:"flex-shrink",fw:"flex-wrap",ord:"order",ac:"align-content",ai:"align-items",as:"align-self",al:"align",jc:"justify-content",ta:"text-align",va:"vertical-align",ws:"white-space",td:"text-decoration",a:"animation",tf:"transform",pe:"pointer-events",us:"user-select"}[s]||s;{const key=[s,v,after,before,attr,media].join(",");if(ZDataStyle.cache[key])return ZDataStyle.cache[key];if(""===v){const{env,pattern,patterns,namedGroup,targets}=ZDataStyle;return s.split(/\s+/).forEach(s=>s.replace(pattern,(...args)=>{const names=namedGroup(args,patterns),name=Object.keys(names).find(e=>names[e]&&/^rule\d+$/.test(e)),target=targets[name];if(target){let vars={};for(var k in names){let nk=k.replace(/\d+$/,"");void 0===names[k]&&nk in vars||(vars[nk]=names[k])}vars=Object.assign({},vars,Object.assign({},env,{}));let css=eval("with(vars)`"+target+"`");if(ret)return ret.push(css);">"==css[0]&&(css=ZData.ss(css.replace(/^> */,""),v,{ret:[]})),attr=attr||`[${CSS.escape(s)}=""]`,css=css.split(":"),css={[""+before+attr+after]:{[css[0]]:css.slice(1).join(":")}},names.media&&(media=names.media),media&&(media=env.MINW[media]?`@media (min-width: ${env.MINW[media]}px)`:"@media "+media,css={[media]:css}),preview||ZDataStyle.add(css),ZDataStyle.cache[key]=json2css(css,1)}})),ret?ret.join(";"):ZDataStyle.cache[key]}{const{media:pattern,medias,namedGroup}=ZDataStyle;let after,before,media,group;return s.replace(pattern,(...e)=>{e=namedGroup(e,medias);e.group?(group={[`[${s}="${v}"]`]:{[ZData.ss(s)]:css2json(v)}},preview||ZDataStyle.add(group)):(e.after&&(after=":"+e.after,e.not)&&(after=":not("+after+")"),e.before&&(before="["+e.before+'=""]',after&&(before+=after,after=""),before+={"-":" ","^":">"}[e.to]||e.to),e.media&&(media=e.media))}),group?json2css(group,1):after||before||media?ZData.ss(v,"",{after:after,before:before,attr:`[${CSS.escape(s)}="${v}"]`,media:media,preview:preview}):""}}},Date.prototype.format=(()=>{let l=1;return function(e,t,r,s){if(!e)return"";let a=this,n=(t&&(a=new Date(a.setDate(a.getDate()+t))),{y:(a=r?new Date(a.setHours(a.getHours()+r)):a).getFullYear(),m:a.getMonth()+1,d:a.getDate(),w:a.getDay(),h:a.getHours(),n:a.getMinutes(),s:a.getSeconds(),z:a.getMilliseconds(),r:(l++,s?Math.random()+""+l:l),v:e=>{let t=0;for(let r=0;r<e.length;r++)t=13*t%0xfffffffff0+e.charCodeAt(r);return t%11%10}}),o,i=e.replace(/([ymdwhnszrv])\1*/g,function(e,t){return"r"==t&&s?String(n[t]).slice(-(l%s+1)):"v"==t?(o=!0,""):s?n[t]:String(1e9+n[t]).slice(-e.length)});return o&&(i+=n.v(i)),i}})();


--------------------------------------------------------------------------------
/src/z-data.js:
--------------------------------------------------------------------------------
  1 | // Copyright (c) 2021 zwd@funlang.org
  2 | const ZData = (() => {
  3 |     var age = 0, cps = 0, ids = 0, updating = 0, proxy;
  4 | 
  5 |     const Attribute = "Attribute", Element = "Element", ElementSibling = Element + "Sibling", ElementChild = Element + "Child";
  6 | 
  7 |     const zdata = "z-data",  zcomp = "z-comp", znone = "z-none";
  8 |     const zinit = "init",    zargs = "args";
  9 |     const zfor  = "for",     zkey  = "key";
 10 |     const zif   = "if",      zelse = "else";
 11 |     const zuse  = "use",      _z_d = "_z_d",   qdata = `[${zdata}]`;
 12 | 
 13 |     const getAttribute    = "get"  + Attribute;
 14 |     const setAttribute    = "set"  + Attribute, remoVe = "remove";
 15 |     const removeAttribute = remoVe + Attribute;
 16 |     const firstEL  = "first"       + ElementChild;
 17 |     const lastEL   = "last"        + ElementChild;
 18 |     const prevEL   = "previous"    + ElementSibling, nexT = "next";
 19 |     const nextEL   = nexT          + ElementSibling;
 20 |     const createEl = "create"      + Element;
 21 |     const parentEL = "parent"      + Element;
 22 | 
 23 |     const insert = "insertBefore";
 24 |     const forEach = "forEach";
 25 |     const includes = "includes";
 26 |     const length = "length";
 27 |     const startsWith = "startsWith";
 28 |     const split = (s, d = / +/) => s.trim().split(d);
 29 |     const replace = "replace";
 30 |     const textC = "textContent";
 31 |     const input = "input";
 32 |     const change = "change";
 33 |     const c_lass = "class";
 34 |     const s_tyle = "style";
 35 |     const querySelector = "querySelector";
 36 |     const $ocument = document;
 37 |     const $ = (selector, el = $ocument) => el[querySelector+"All"](selector);
 38 |     const closest = (el, selector = `[${znone}]`) =>  el.closest(selector);
 39 |     const addEventListener = "addEventListener";
 40 |     const Obj_keys = Object.keys;
 41 |     const Obj_values = Object.values;
 42 |     const is_object = (obj, t = "object") => typeof obj == t;
 43 |     const is_function = (obj) => is_object(obj, "function");
 44 |     const nil = undefined;
 45 | 
 46 |     const re_ms = /^(?:camel|prevent|stop|debounce|(\d+)(?:(m?)s)|capture|once|passive|self|out|window|document|(shift|ctrl|alt|meta)|(cmd))$/;
 47 |     const re_for = /^(?:\s*(?:(\w+)\s*:\s*)?(\w*)(?:\s*,\s*(\w+))?\s+in\s+)?(.+)$/;
 48 |     const re_bind = /^[:@.#!].|^z-d-/;
 49 |     const re_attr = /^(?:(:)(:?)(!?)|(@)|([.#!])|(z-d-))?([^.]*)(?:[.]([^.].*))?$/;
 50 |     const $e_text = (s) => s && s.indexOf("${") >= 0 && s.indexOf("`") < 0;
 51 |     const re_kebab = /[-_ ]+/g;
 52 |     const re_2camel = /-([a-z])/g;
 53 | 
 54 |     const proxies = new WeakMap();
 55 |     const liteProxy = (obj, cb) => {
 56 |         if (obj && is_object(obj) && !is_function(obj) && !obj.__ob__ && !obj._isVue && (delete obj[cb.i])) {
 57 |             let cs = proxies.get(obj); //return new Proxy(obj, cb);
 58 |             if (!cs) {
 59 |                 cs = {
 60 |                     s: {},
 61 |                     set(obj, prop, value, rec) {
 62 |                         for (let c in this.s) this.s[c].set(obj, prop, value, rec);
 63 |                         return true;
 64 |                     },
 65 |                     deleteProperty(obj, prop) {
 66 |                         let c, ret = true;
 67 |                         for (c in this.s) ret = this.s[c].deleteProperty(obj, prop) && ret;
 68 |                         return ret;
 69 |                     }
 70 |                 }
 71 |                 cs.p = new Proxy(obj, cs);
 72 |                 proxies.set(obj, cs).set(cs.p, cs);
 73 |             }
 74 |             if (!cs.s[cb.i]) {
 75 |                 cs.s[cb.i] = cb;
 76 |                 for (let p in obj) try {
 77 |                     obj[p] = proxy(obj[p], cb);
 78 |                 } catch (e) {}
 79 |             }
 80 |             return cs.p;
 81 |         }
 82 |         return obj;
 83 |     };
 84 |     const $emit = (el, name, detail) => el.dispatchEvent(new CustomEvent(name, {detail, bubbles: true}));
 85 |     const initComponent = (el, env) => {
 86 |         if (el[_z_d] && (age <= el[_z_d].age || el[_z_d].ing)) return;
 87 |         (el[_z_d] || (el[_z_d] = {})).age = age;
 88 |         el[_z_d].ing = (el[_z_d].ing || 0) + 1;
 89 |         env = (env && (el[_z_d].env = env)) || el[_z_d].env || { ps: {$emit}, d: {} };
 90 |         let init = (self) => {
 91 |             updating++, stopObserve($ocument.body);
 92 |             goAnode({ p: el[parentEL], el }, { ...env, d: el[_z_d].zd, r: el }, self || age);
 93 |             updating--, observe($ocument.body);
 94 |         };
 95 |         let initLater = debounce(init);
 96 |         let zd = el[_z_d].zd;
 97 |         if (!zd) {
 98 |             let cb = {
 99 |                 i: _z_d + Math.random(),
100 |                 set(obj, prop, value, rec, zdataproxy) {
101 |                     initLater();
102 |                     try {
103 |                         if (!zdataproxy) obj[prop] = proxy(value, cb);
104 |                     } catch (e) {}
105 |                     return true;
106 |                 },
107 |                 deleteProperty(obj, prop) {
108 |                     return (prop != this.i) && (initLater(), delete obj[prop]);
109 |                 }
110 |             };
111 |             proxy = window.ZDataProxy || liteProxy;
112 |             ZData.proxy = (v) => proxy(v, cb);
113 |             zd = tryEval(el, el[getAttribute](zdata), env, nil, el[zargs] || {}) || {};
114 |             el.$data = el[_z_d].zd = zd = proxy(zd, cb);
115 |             el[setAttribute](zdata, "");
116 |             if (el[zargs]) zd[zargs] = el[zargs];
117 |             tryEval(el, el[getAttribute](zinit), { ...env, d: zd });
118 |         }
119 |         init(1);
120 |         el[_z_d].ing--;
121 |     };
122 | 
123 |     const nodeCache = {};
124 |     const goAnode = (args, env, self) => {
125 |         let { p, el, cp } = args, nc;
126 |         let zd = el[_z_d] || (el[_z_d] = {});
127 |         let attrs = zd.as || (zd.as = (nc = nodeCache[el[getAttribute]("z-d")]) ? (zd.ps = nc.ps, nc.as) : el.getAttributeNames());
128 |         if (attrs[includes](znone)) return;
129 | 
130 |         if (!cp) {
131 |             let exp, res;
132 |             if (self === nil && attrs[includes](zdata)) return initComponent(el, env);
133 |             else if (attrs[includes](zcomp) && (exp = el[getAttribute](zcomp))) {
134 |                 try {
135 |                     el[removeAttribute](zcomp);
136 |                     if (/^([.\/]|https?:)/.test(exp)) res = fetch(exp).then((res) => res.text());
137 |                     else if (/^z:/.test(exp) && ZData.get) res = ZData.get(exp);
138 |                     else res = tryEval(el, exp, env);
139 |                     res.then((html) => {
140 |                         let as = tryEval(el, el[getAttribute](zargs), env);
141 |                         if (el.tagName[1] == "-" || attrs[includes]("del")) loadHTML(html, p, el, as, 1);
142 |                         else loadHTML(html, el, nil, as);
143 |                     }).catch(nop);
144 |                 } catch (e) {}
145 |                 return;
146 |             } else if ("template" == el.localName) {
147 |                 el.content || (el.content = $ocument.createDocumentFragment())[insert](el[firstEL], nil);
148 |                 if ((exp = el[getAttribute](zfor))) {
149 |                     goFor(args, exp, env);
150 |                 } else if ((exp = el[getAttribute](zif)) || 1 /*attrs[includes](zelse)*/) {
151 |                     goIf(args, exp, env);
152 |                 }
153 |                 return;
154 |             }
155 |         }
156 |         setAttrs(args, env, attrs);
157 |         goNodes({ cp, p: el, el: (/*cp && el.content ||*/ el)[firstEL] }, env);
158 |     };
159 | 
160 |     const goNodes = (args, env, cbIf, cbDo) => {
161 |         for (; args.el && (!cbIf || cbIf(args.el)); args.el = args[nexT]) {
162 |             args[nexT] = args.el[nextEL];
163 |             if (!cbDo || cbDo(args, env)) goAnode(args, env);
164 |         }
165 |     };
166 | 
167 |     const isElse = (el) => el.hasAttribute(zelse);
168 |     const nop = () => 0;
169 |     const goIf = (args, exp, env) => {
170 |         let { p, el } = args;
171 |         if (!exp || tryEval(el, exp, env)) {
172 |             let n, next = args[nexT], op = nop;
173 |             if (el[_z_d].fi) {
174 |                 next = el[_z_d].fi[nextEL];
175 |                 (n=el[getAttribute](zuse)) && (n=tryEval(el,'`'+n+'`',env)) && (el[_z_d].u!=n)
176 |                     && (fold(args, env), expand({...args, el, next},env));
177 |             } else {
178 |                 expand(args, env);
179 |                 op = fold;
180 |             }
181 |             args.el = el[nextEL];
182 |             goNodes(args, env, (el) => el != next);
183 |             goNodes(args, env, isElse, op);
184 |             el[_z_d].fi = next ? next[prevEL] : p[lastEL];
185 |         } else fold(args, env);
186 |     };
187 | 
188 |     const expand = ({ p, el, next, n }, env, r) => {
189 |         if (!(n = el[_z_d].node)) {
190 |             n = (n=el[getAttribute](zuse)) && (el[_z_d].u=n=tryEval(el,'`'+n+'`',env)) && (
191 |                 n = env.r[querySelector](n) || (r=closest(env.r[parentEL], qdata))&&r[querySelector](n) ) && n.content || el.content;
192 |             el[_z_d].u || (el[_z_d].node = n);
193 |             goNodes({ cp: 1, p: n, el: n[firstEL] }); // compile
194 |         }
195 |         for (let c = n[firstEL]; c; c = c[nextEL]) {
196 |             n = c.cloneNode(true);
197 |             p[insert](n, next);
198 |         }
199 |     };
200 | 
201 |     const fold = (args, env) => {
202 |         if (args.el[_z_d] && args.el[_z_d].fi) {
203 |             let next = args.el[_z_d].fi[nextEL];
204 |             args.el[_z_d].fi = nil;
205 |             args.el = args[nexT];
206 |             remove(args, next, env);
207 |         }
208 |     };
209 | 
210 |     const remove = (args, next, env) => {
211 |         goNodes(args, env, (el) => el != next, ({el}) => { el[remoVe]() });
212 |     };
213 | 
214 |     const goFor = (args, exp, env) => {
215 |         let m = re_for.exec(exp);
216 |         if (!m) return;
217 |         let { p, el } = args;
218 |         let items = tryEval(el, m[4], env),
219 |             kvi = { k: m[1], v: m[2], i: m[3] },
220 |             env2 = { ...env, ps: { ...env.ps } },
221 |             akey = el[getAttribute](zkey),
222 |             id = akey && split(akey, "."),
223 |             keys = el[_z_d].ns || (el[_z_d].ns = {}),
224 |             i = 0,
225 |             cur = el,
226 |             age = (el[_z_d].age = (el[_z_d].age || 0) + 1);
227 |         id = id && id[length] == 2 && id[0] == kvi.v && id[1];
228 |         if (kvi.k) env2.ps[kvi.k] = nil;
229 |         if (kvi.v) env2.ps[kvi.v] = nil;
230 |         if (kvi.i) env2.ps[kvi.i] = nil;
231 |         for (let k in items /*of Obj_keys(items)*/) {
232 |             let v = items[k];
233 |             if (kvi.k) env2.ps[kvi.k] = k;
234 |             if (kvi.v) env2.ps[kvi.v] = v;
235 |             if (kvi.i) env2.ps[kvi.i] = i++;
236 |             let key = id ? v[id] : akey ? tryEval(el, akey, env2) : kvi.k ? k : v;
237 |             if (key === nil) continue; // key IS NIL !!!
238 |             if (kvi.k) env2.ps[kvi.k] = key;
239 | 
240 |             let next = cur[nextEL];
241 |             let curNode = keys[key];
242 |             if (curNode) {
243 |                 if (curNode.age == age) continue; // key DUPLICATE !!!
244 |                 let lastNext = curNode.t[nextEL];
245 |                 let moveable = curNode.s != next;
246 |                 if (moveable && next && !curNode.s[_z_d].skip) {
247 |                     next[_z_d].skip = 1;
248 |                     args.el = next;
249 |                     next = next[_z_d].t[nextEL];
250 |                     goNodes(args, env2, (el) => el != next, nop);
251 |                     moveable = curNode.s != (next = args[nexT]);
252 |                 }
253 |                 args.el = curNode.s;
254 |                 args.el[_z_d].skip = 0;
255 |                 goNodes({...args}, env2, (el) => el != lastNext);
256 |                 goNodes(args, env2, (el) => el != lastNext, ({p, el}) => { moveable && p[insert](el, next) });
257 |                 moveable ? (args[nexT] = next) : (next = args[nexT]);
258 |                 curNode.age = age;
259 |             } else {
260 |                 args.el = el;
261 |                 expand(args, env2);
262 |                 args.el = cur[nextEL];
263 |                 curNode = keys[key] = { age, s: args.el };
264 |                 goNodes(args, env2, (el) => el != next);
265 |             }
266 |             curNode.s[_z_d].t = curNode.t = cur = next ? next[prevEL] : p[lastEL];
267 |         }
268 |         // remove ...
269 |         Obj_keys(keys)
270 |             .filter((k) => keys[k].age != age)
271 |             [forEach]((k) => {
272 |                 remove({ el: keys[k].s }, keys[k].t[nextEL], env);
273 |                 delete keys[k];
274 |             });
275 |         args[nexT] = cur[nextEL];
276 |     };
277 | 
278 |     const toCamel = (name) => name[replace](re_2camel, (m, c) => c.toUpperCase());
279 |     const attrMaps = { css: s_tyle, text: textC, html: "innerHTML" };
280 |     const setAttrs = (args, env, attrNames) => {
281 |         let { el } = args,
282 |             zd = el[_z_d],
283 |             vs = zd.vs || (zd.vs = []);
284 |         let props = zd.ps;
285 |         if (!props) {
286 |             props = zd.ps = { ps: [] };
287 |             if (args.cp) {
288 |                 nodeCache[++cps] = { as: attrNames, ps: props };
289 |                 el[setAttribute]("z-d", cps);
290 |             }
291 |             attrNames[forEach]((a) => {
292 |                 let v = el[getAttribute](a);
293 |                 if (re_bind.test(a) || $e_text(v)) {
294 |                     let ms = re_attr.exec(a), // 1-bind 2 3-attr 4-event 5-class/css 6-zd- 7-name 8-modifiers
295 |                         name = ms[7], m5 = ms[5], m6 = ms[6],
296 |                         k = m5 ? (m5 != "." || !name ? (name = ZData.ss(name), s_tyle) : c_lass) : name; // key/name
297 |                     k = attrMaps[k] || k;
298 |                     if (k) {
299 |                         let modifiers = ms[8] && split(ms[8], ".") || [];
300 |                         let ps = {
301 |                             a,
302 |                             k: m6 ? nil : k == c_lass || !modifiers[includes]("camel") ? k : toCamel(k),
303 |                             b: (ms[4] && 3) || (ms[2] && 2) || ((ms[1] || m5 || m6) && 1) || nil, // bind 1 2, event 4
304 |                             m: m5 && name ? [name, ...modifiers] : modifiers, // modifiers
305 |                             e: m6 ? `${toCamel(k)}({e:this,v:${v||true},m:{${modifiers.map(a=>a+':1').join()}}})` : v, // exp
306 |                             A: ms[3] || modifiers[includes]("attr"),
307 |                         };
308 |                         if (!ps.b || m5 == "!") ps.e = "`" + ps.e + "`";
309 |                         props.ps.push(ps);
310 |                         ps.b && el[removeAttribute](a);
311 |                     }
312 |                 } else ZData.ss(a, v);
313 |             });
314 |             let f, t;
315 |             if ((f = el.firstChild) && f == el.lastChild && f.nodeType == 3 && $e_text((t = f.nodeValue))) {
316 |                 props.ps.push({
317 |                     k: textC,
318 |                     e: "`" + t + "`",
319 |                     m: [],
320 |                 });
321 |             }
322 |         }
323 |         if (args.cp) return;
324 |         let i = 0;
325 |         let fn = (ps) => {
326 |             if (ps.k == "*") for (let k in (ps.K = tryEval(el, ps.e, env, ps) || {})) fn({...ps, k, e: ps.K[k], E: 1, f: nil});
327 |             else if (ps.b == 3) setEvent(args, ps, env);
328 |             else {
329 |                 let v = ps.e;
330 |                 ps.E || (v = tryEval(el, v, env, ps, ps.k ? nil : 1), ps.k || (ps.e = nil));
331 |                 let num = ps.m[includes]("number");
332 |                 if (ps.k && vs[i] !== v) {
333 |                     setValue(el, ps, num && el.u && is_object(v, "string") ? v[replace](/[^\d.-]/g, "") : v === nil ? "" : v, vs[i]);
334 |                     vs[i] = v;
335 |                 }
336 |                 if (ps.b == 2) {
337 |                     if (!ps.b2) {
338 |                         v = "this." + ps.k;
339 |                         if (ps.k == s_tyle && ps.m[length]) v += "[`" + ps.m[0] + "`]";
340 |                         let event = el.type == "text" ? input : change;
341 |                         if (ps.m[includes](input)) event = input;
342 |                         else if (ps.m[includes](change)) event = change;
343 |                         if (ps.m[includes]("trim")) v += ".trim()";
344 |                         if (num) v = "this.u?this.u.replace(/1/," + v + "):parseFloat(" + v + ")";
345 |                         let vi = "=this." + _z_d + ".vs[" + i + "]=";
346 |                         v = /==/.test(ps.e) ? v + "&&(" + ps.e[replace](/==+/, vi) + ")" : ps.e + vi + v
347 |                         ps.b2 = { ...ps, e: v, k: event, ev: event, f: nil };
348 |                     }
349 |                     setEvent(args, ps.b2, env);
350 |                 }
351 |                 i++;
352 |             }
353 |         };
354 |         props.ps[forEach](fn);
355 |     };
356 | 
357 |     const setValue = (el, ps, value, old) => {
358 |         if (ps.k == c_lass) {
359 |             if (ps.m[length]) {
360 |                 let v = ps.e === "" ? true : value;
361 |                 value = {};
362 |                 ps.m[forEach]((name) => {
363 |                     if (name.endsWith("-")) {
364 |                         value[name + v] = 1;
365 |                         old &&  (value[name + old] = 0);
366 |                     } else value[name] = v;
367 |                 });
368 |             }
369 |             let cl = el.classList;
370 |             if (Array.isArray(value)) {
371 |             } else if (is_object(value)) {
372 |                 for (let name in value) value[name] ? cl.add(name) : cl[remoVe](name);
373 |                 return;
374 |             } else value = value ? split(value) : [];
375 |             value[forEach]((name) => cl.add(name));
376 |         } else {
377 |             if (ps.k == s_tyle) {
378 |                 if (ps.m[length]) {
379 |                     if (ps.m[length] == 1) value = { [ps.m[0]]: value };
380 |                     else value = { [ps.m[0]]: value && ps.m[1] };
381 |                 }
382 |                 if (is_object(value)) {
383 |                     Obj_keys(value)[forEach]((name) => {
384 |                         if (value[name] === false) el[s_tyle].removeProperty(name);
385 |                         else name[0] == "-" ? el[s_tyle].setProperty(name, value[name]) : el[s_tyle][name] = value[name];
386 |                     });
387 |                     return;
388 |                 }
389 |             }
390 |             ps.A ? value === false ? el[removeAttribute](ps.k) : el[setAttribute](ps.k, value) : el[ps.k] = value;
391 |         }
392 |     };
393 | 
394 |     const debounce = (fn, ms) => {
395 |         let timer;
396 |         return (...args) => {
397 |             let me = this;
398 |             let ifn = () => {
399 |                 timer = nil;
400 |                 fn.apply(me, args);
401 |             };
402 |             ms && (timer = clearTimeout(timer));
403 |             timer || (timer = setTimeout(ifn, ms));
404 |         };
405 |     };
406 | 
407 |     const setEvent = ({ el }, ps, env) => {
408 |         let { a: key, k: name, e: exp, ev, m: ms } = ps;
409 |         if (!el[_z_d][key]) {
410 |             let target = ms[includes]("window") ? window : ms[includes]("document") || ms[includes]("out") ? $ocument : el;
411 |             let fn = (e) => {
412 |                 if (ms[includes]("self") && el != e.target) return;
413 |                 if (ms[includes]("out") && el.contains(e.target)) return;
414 |                 // key and mouse (ctrl, alt, shift, meta, cmd)
415 |                 if (name[startsWith]("key") || name[startsWith]("mouse") || name.endsWith("click")) {
416 |                     for (let modifier of ms) {
417 |                         let m = re_ms.exec(modifier);
418 |                         if (m && (m[3] || m[4])) {
419 |                             let key = m[3] || (m[4] && "meta");
420 |                             if (!key || !e[key + "Key"]) return;
421 |                         }
422 |                     }
423 |                     let keys = ms.filter((m) => !re_ms.test(m));
424 |                     if (keys[length] == 1) {
425 |                         if (name[startsWith]("key") && e.key) {
426 |                             let key = keys[0][replace](re_kebab, "");
427 |                             key = { space: " ", slash: "/", gt: ">", eq: "=" }[key] || key;
428 |                             if (key != (e.key.toLowerCase()[replace](re_kebab, "") || " ")) return;
429 |                         } else if (["left", "mid", "right"][e.button] != keys[0]) return;
430 |                     }
431 |                 }
432 |                 if (ms[includes]("prevent")) e.preventDefault();
433 |                 if (ms[includes]("stop")) e.stopPropagation();
434 |                 if (ms[includes]("once")) target.removeEventListener(name, fn, options);
435 |                 return tryEval(el, exp, {...env, ps: {...el[_z_d][key], $el: env.r}});
436 |             };
437 |             // debounce
438 |             let i = ms.indexOf("debounce");
439 |             if (i >= 0) {
440 |                 i = ms[i + 1];
441 |                 let m = re_ms.exec(i);
442 |                 i = m && m[1] ? (m[2] ? +m[1] : m[1] * 1000) : 250;
443 |                 fn = debounce(fn, i);
444 |             }
445 |             let options = {
446 |                 capture: ms[includes]("capture"),
447 |                 passive: ms[includes]("passive"),
448 |             };
449 |             target[addEventListener](name, fn, options);
450 |             ev && !el[i='fireChange'] && (el[i] = () => $emit(el, ev));
451 |         }
452 |         el[_z_d][key] = {...env.ps};
453 |     };
454 | 
455 |     const Functions = {};
456 |     const newFun = (exp, ks, k, ps) => {
457 |         let f = (ps && ps.f) || Functions[(k += exp)] ||
458 |             (Functions[k] = new Function(["$2D", ...ks], "var R3$;with($2D){R3$=" + exp + "};return R3$"));
459 |         ps && !ps.f && (ps.f = f);
460 |         return f;
461 |     };
462 |     const tryEval = (el, exp, env, ps, args) => {
463 |         return exp && tryCatch(
464 |             () => {
465 |                 if (is_function(exp)) return exp.call(el, env.r);
466 |                 exp = newFun(exp, Obj_keys(env.ps), Obj_keys(env.ps).join(','), ps).call(el, env.d, ...Obj_values(env.ps));
467 |                 return args && is_function(exp) ? exp(args) : exp;
468 |             },
469 |             { el, exp }
470 |         );
471 |     };
472 | 
473 |     const error = (el, exp, e) => console.warn(`E ${zdata}: ${e} [${exp}]`, el);
474 |     const tryCatch = (cb, { el, exp }) => {
475 |         try {
476 |             let value = cb();
477 |             return value instanceof Promise ? value.catch((e) => error(el, exp, e)) : value;
478 |         } catch (e) {
479 |             error(el, exp, e);
480 |         }
481 |     };
482 | 
483 |     const loadHTML = (html, p, before, args, del, zdatahtml) => {
484 |         p || (p = $ocument.body);
485 |         let id, fn = [], f1, script = '', $el, el = $ocument[createEl](zdata);
486 |         if (!(id = p[getAttribute]("z-i"))) p[setAttribute]("z-i", (id = ++ids));
487 |         let fns = debounce(() => {
488 |             --updating < 0 && (updating = 0);
489 |             fn[length] && fn.shift()();
490 |         });
491 |         el[attrMaps["html"]] = html[replace](/<!--[^]*?-->/g, "")[replace](/^z-data\s*/, ()=>zdatahtml=1)
492 |           [replace](/<(script)([^>]*)>([^]*?)<\/\1>/gi, ($0, $1, src, s) => {
493 |             let m = src.match(/src\s*=\s*(?:'([^']+)|"([^"]+)|(\S+))/);
494 |             src = m && (m[1] || m[2] || m[3]);
495 |             if ((!src || $(`script[src="${src}"]`)[length]) && !s) return "";
496 |             let e = $ocument[createEl]("script");
497 |             let fi = (f, run) => (f1 = () => ($ocument.body[insert](e, nil), f&&f()), run ? f1() : fn.push(f1));
498 |             e[setAttribute](znone, "");
499 |             if (src) {
500 |                 if (ZData.get) fn.push(() => ZData.get(src).then(s => (e[textC] = s, fi(fns, 1))));
501 |                 else {
502 |                     e.src = src;
503 |                     e.onload = e.onerror = fns;
504 |                     fi();
505 |                 }
506 |             } else if (zdatahtml && !script) {
507 |                 script = s;
508 |             } else {
509 |                 e[textC] = s;
510 |                 fi(fns);
511 |             }
512 |             return "";
513 |         })[replace](/(<style[^>@]*>)([^]*?)(?=<\/style>)/gi, ($0, s1, s) => {
514 |             return s1 + s[replace](/\s*([^{}]+)(?=\{)/g, ($0, names) => {
515 |                 if (/^[@\d]|^(from|to)\b/.test(names)) return names; // @keyframes or [z-i=...
516 |                 return split(names, /\s*,\s*/).map((n) => n[replace](/^(\[z-i=.*?\] )?(.*)/, ($0,$1,$2)=>`[z-i="${id}"] `+$2)).join(",");
517 |             });
518 |         });
519 |         $el = el[querySelector](qdata) || el[firstEL];
520 |         if (zdatahtml && script) $el[setAttribute](zdata, `args=>{${script[replace](/\bexport\s+default(?=\s*\{)/, 'return')}}`);
521 |         if ($el && args) $el[zargs] = args;
522 |         fn.push(() => {
523 |             for (let e = el[firstEL], n = e && e[nextEL]; e; e = n, n = n && n[nextEL]) p[insert](e, before);
524 |             del && before && before[remoVe]();
525 |             fns();
526 |         });
527 |         fn.push(()=>$el && initComponent($el)); // startLater, ()=>$el && initComponent($el)
528 |         updating += fn[length];
529 |         fns();
530 |     };
531 | 
532 |     const stopObserve = (el) => el[_z_d] && el[_z_d].ob && el[_z_d].ob.disconnect();
533 |     const observe = (el) => {
534 |         let ob = (el[_z_d] || (el[_z_d] = {})).ob ||
535 |             (el[_z_d].ob = new MutationObserver((ms) => {
536 |                 if (updating) return;
537 |                 if (el == $ocument.body) {
538 |                     if (ms[length] < 99 /* How Many ??? */) {
539 |                         let ignore = 1;
540 |                         for (let i = 0, t; i < ms[length]; i++) {
541 |                             ignore = ignore && (closest(t = ms[i].target) || !closest(t, qdata) && !t[querySelector](qdata));
542 |                         }
543 |                         if (ignore) return;
544 |                     }
545 |                     startLater();
546 |                 } else initComponent(el);
547 |             }));
548 |         ZData.nobserve || debounce(() => ob.observe(el, { childList: true, subtree: true }));
549 |     };
550 | 
551 |     const startLater = debounce(() => start(nil, 1));
552 |     const start = (e, onlyObserve) => {
553 |         onlyObserve || ++age, ++updating;
554 |         stopObserve($ocument.body);
555 |         $(qdata)[forEach]((el) => closest(el) || initComponent(el));
556 |         --updating;
557 |         observe($ocument.body);
558 |     };
559 | 
560 |     const ons = {};
561 |     const on = (name, fn) => ((ons[name] = ons[name] || []).push(fn), ZData);
562 |     const call = (name, args) => (ons[name] || [])[forEach]((fn) => fn(args));
563 | 
564 |     $ocument[addEventListener]("DOMContentLoaded", start);
565 |     return { start, loadHTML, on, call, ss:s=>s, deb: debounce };
566 | })();
567 | 


--------------------------------------------------------------------------------
/dist/res/moloader.min.js:
--------------------------------------------------------------------------------
1 | "use strict";var define,AMDLoader,_amdLoaderGlobal=this,_commonjsGlobal="object"==typeof global?global:{};!function(e){e.global=_amdLoaderGlobal;var t=(Object.defineProperty(r.prototype,"isWindows",{get:function(){return this._detect(),this._isWindows},enumerable:!1,configurable:!0}),Object.defineProperty(r.prototype,"isNode",{get:function(){return this._detect(),this._isNode},enumerable:!1,configurable:!0}),Object.defineProperty(r.prototype,"isElectronRenderer",{get:function(){return this._detect(),this._isElectronRenderer},enumerable:!1,configurable:!0}),Object.defineProperty(r.prototype,"isWebWorker",{get:function(){return this._detect(),this._isWebWorker},enumerable:!1,configurable:!0}),r.prototype._detect=function(){this._detected||(this._detected=!0,this._isWindows=r._isWindows(),this._isNode="undefined"!=typeof module&&!!module.exports,this._isElectronRenderer="undefined"!=typeof process&&void 0!==process.versions&&void 0!==process.versions.electron&&"renderer"===process.type,this._isWebWorker="function"==typeof e.global.importScripts)},r._isWindows=function(){return!!("undefined"!=typeof navigator&&navigator.userAgent&&0<=navigator.userAgent.indexOf("Windows"))||"undefined"!=typeof process&&"win32"===process.platform},r);function r(){this._detected=!1,this._isWindows=!1,this._isNode=!1,this._isElectronRenderer=!1,this._isWebWorker=!1}e.Environment=t}(AMDLoader=AMDLoader||{}),function(r){var n=function(e,t,r){this.type=e,this.detail=t,this.timestamp=r};r.LoaderEvent=n;var e=(t.prototype.record=function(e,t){this._events.push(new n(e,t,r.Utilities.getHighPerformanceTimestamp()))},t.prototype.getEvents=function(){return this._events},t);function t(e){this._events=[new n(1,"",e)]}r.LoaderEventRecorder=e;o.prototype.record=function(e,t){},o.prototype.getEvents=function(){return[]},o.INSTANCE=new o,e=o;function o(){}r.NullLoaderEventRecorder=e}(AMDLoader=AMDLoader||{}),function(e){var t=(n.fileUriToFilePath=function(e,t){if(t=decodeURI(t).replace(/%23/g,"#"),e){if(/^file:\/\/\//.test(t))return t.substr(8);if(/^file:\/\//.test(t))return t.substr(5)}else if(/^file:\/\//.test(t))return t.substr(7);return t},n.startsWith=function(e,t){return e.length>=t.length&&e.substr(0,t.length)===t},n.endsWith=function(e,t){return e.length>=t.length&&e.substr(e.length-t.length)===t},n.containsQueryString=function(e){return/^[^\#]*\?/gi.test(e)},n.isAbsolutePath=function(e){return/^((http:\/\/)|(https:\/\/)|(file:\/\/)|(\/))/.test(e)},n.forEachProperty=function(e,t){if(e){var r=void 0;for(r in e)e.hasOwnProperty(r)&&t(r,e[r])}},n.isEmpty=function(e){var t=!0;return n.forEachProperty(e,function(){t=!1}),t},n.recursiveClone=function(e){if(!e||"object"!=typeof e||e instanceof RegExp||!Array.isArray(e)&&Object.getPrototypeOf(e)!==Object.prototype)return e;var r=Array.isArray(e)?[]:{};return n.forEachProperty(e,function(e,t){r[e]=t&&"object"==typeof t?n.recursiveClone(t):t}),r},n.generateAnonymousModule=function(){return"===anonymous"+n.NEXT_ANONYMOUS_ID+++"==="},n.isAnonymousModule=function(e){return n.startsWith(e,"===anonymous")},n.getHighPerformanceTimestamp=function(){return this.PERFORMANCE_NOW_PROBED||(this.PERFORMANCE_NOW_PROBED=!0,this.HAS_PERFORMANCE_NOW=e.global.performance&&"function"==typeof e.global.performance.now),(this.HAS_PERFORMANCE_NOW?e.global.performance:Date).now()},n.NEXT_ANONYMOUS_ID=1,n.PERFORMANCE_NOW_PROBED=!1,n.HAS_PERFORMANCE_NOW=!1,n);function n(){}e.Utilities=t}(AMDLoader=AMDLoader||{}),function(a){function r(e){if(e instanceof Error)return e;var t=new Error(e.message||String(e)||"Unknown Error");return e.stack&&(t.stack=e.stack),t}a.ensureError=r;var o=(n.validateConfigurationOptions=function(e){var t;return"string"!=typeof(e=e||{}).baseUrl&&(e.baseUrl=""),"boolean"!=typeof e.isBuild&&(e.isBuild=!1),"object"!=typeof e.paths&&(e.paths={}),"object"!=typeof e.config&&(e.config={}),void 0===e.catchError&&(e.catchError=!1),void 0===e.recordStats&&(e.recordStats=!1),"string"!=typeof e.urlArgs&&(e.urlArgs=""),"function"!=typeof e.onError&&(e.onError=function(e){if("loading"===e.phase)return console.error('Loading "'+e.moduleId+'" failed'),console.error(e),console.error("Here are the modules that depend on it:"),void console.error(e.neededBy);"factory"===e.phase&&(console.error('The factory method of "'+e.moduleId+'" has thrown an exception'),console.error(e))}),Array.isArray(e.ignoreDuplicateModules)||(e.ignoreDuplicateModules=[]),0<e.baseUrl.length&&(a.Utilities.endsWith(e.baseUrl,"/")||(e.baseUrl+="/")),"string"!=typeof e.cspNonce&&(e.cspNonce=""),void 0===e.preferScriptTags&&(e.preferScriptTags=!1),Array.isArray(e.nodeModules)||(e.nodeModules=[]),e.nodeCachedData&&"object"==typeof e.nodeCachedData&&("string"!=typeof e.nodeCachedData.seed&&(e.nodeCachedData.seed="seed"),("number"!=typeof e.nodeCachedData.writeDelay||e.nodeCachedData.writeDelay<0)&&(e.nodeCachedData.writeDelay=7e3),!e.nodeCachedData.path||"string"!=typeof e.nodeCachedData.path)&&((t=r(new Error("INVALID cached data configuration, 'path' MUST be set"))).phase="configuration",e.onError(t),e.nodeCachedData=void 0),e},n.mergeConfigurationOptions=function(e,t){void 0===e&&(e=null);var r=a.Utilities.recursiveClone((t=void 0===t?null:t)||{});return a.Utilities.forEachProperty(e,function(e,t){"ignoreDuplicateModules"===e&&void 0!==r.ignoreDuplicateModules?r.ignoreDuplicateModules=r.ignoreDuplicateModules.concat(t):"paths"===e&&void 0!==r.paths?a.Utilities.forEachProperty(t,function(e,t){return r.paths[e]=t}):"config"===e&&void 0!==r.config?a.Utilities.forEachProperty(t,function(e,t){return r.config[e]=t}):r[e]=a.Utilities.recursiveClone(t)}),n.validateConfigurationOptions(r)},n);function n(){}a.ConfigurationOptionsUtil=o;var e=(t.prototype._createIgnoreDuplicateModulesMap=function(){this.ignoreDuplicateModulesMap={};for(var e=0;e<this.options.ignoreDuplicateModules.length;e++)this.ignoreDuplicateModulesMap[this.options.ignoreDuplicateModules[e]]=!0},t.prototype._createNodeModulesMap=function(){this.nodeModulesMap=Object.create(null);for(var e=0,t=this.options.nodeModules;e<t.length;e++){var r=t[e];this.nodeModulesMap[r]=!0}},t.prototype._createSortedPathsRules=function(){var r=this;this.sortedPathsRules=[],a.Utilities.forEachProperty(this.options.paths,function(e,t){Array.isArray(t)?r.sortedPathsRules.push({from:e,to:t}):r.sortedPathsRules.push({from:e,to:[t]})}),this.sortedPathsRules.sort(function(e,t){return t.from.length-e.from.length})},t.prototype.cloneAndMerge=function(e){return new t(this._env,o.mergeConfigurationOptions(e,this.options))},t.prototype.getOptionsLiteral=function(){return this.options},t.prototype._applyPaths=function(e){for(var t,r=0,n=this.sortedPathsRules.length;r<n;r++)if(t=this.sortedPathsRules[r],a.Utilities.startsWith(e,t.from)){for(var o=[],i=0,s=t.to.length;i<s;i++)o.push(t.to[i]+e.substr(t.from.length));return o}return[e]},t.prototype._addUrlArgsToUrl=function(e){return a.Utilities.containsQueryString(e)?e+"&"+this.options.urlArgs:e+"?"+this.options.urlArgs},t.prototype._addUrlArgsIfNecessaryToUrl=function(e){return this.options.urlArgs?this._addUrlArgsToUrl(e):e},t.prototype._addUrlArgsIfNecessaryToUrls=function(e){if(this.options.urlArgs)for(var t=0,r=e.length;t<r;t++)e[t]=this._addUrlArgsToUrl(e[t]);return e},t.prototype.moduleIdToPaths=function(e){if(!0===this.nodeModulesMap[e]||this.options.amdModulesPattern instanceof RegExp&&!this.options.amdModulesPattern.test(e))return this.isBuild()?["empty:"]:["node|"+e];if(a.Utilities.endsWith(e,".js")||a.Utilities.isAbsolutePath(e))a.Utilities.endsWith(e,".js")||a.Utilities.containsQueryString(e)||(e+=".js"),t=[e];else for(var t,r=0,n=(t=this._applyPaths(e)).length;r<n;r++)this.isBuild()&&"empty:"===t[r]||(a.Utilities.isAbsolutePath(t[r])||(t[r]=this.options.baseUrl+t[r]),a.Utilities.endsWith(t[r],".js")||a.Utilities.containsQueryString(t[r])||(t[r]=t[r]+".js"));return this._addUrlArgsIfNecessaryToUrls(t)},t.prototype.requireToUrl=function(e){return a.Utilities.isAbsolutePath(e)||(e=this._applyPaths(e)[0],a.Utilities.isAbsolutePath(e)||(e=this.options.baseUrl+e)),this._addUrlArgsIfNecessaryToUrl(e)},t.prototype.isBuild=function(){return this.options.isBuild},t.prototype.isDuplicateMessageIgnoredFor=function(e){return this.ignoreDuplicateModulesMap.hasOwnProperty(e)},t.prototype.getConfigForModule=function(e){if(this.options.config)return this.options.config[e]},t.prototype.shouldCatchError=function(){return this.options.catchError},t.prototype.shouldRecordStats=function(){return this.options.recordStats},t.prototype.onError=function(e){this.options.onError(e)},t);function t(e,t){var r,n;this._env=e,this.options=o.mergeConfigurationOptions(t),this._createIgnoreDuplicateModulesMap(),this._createNodeModulesMap(),this._createSortedPathsRules(),""===this.options.baseUrl&&(this.options.nodeRequire&&this.options.nodeRequire.main&&this.options.nodeRequire.main.filename&&this._env.isNode&&(r=this.options.nodeRequire.main.filename,n=Math.max(r.lastIndexOf("/"),r.lastIndexOf("\\")),this.options.baseUrl=r.substring(0,n+1)),this.options.nodeMain&&this._env.isNode&&(r=this.options.nodeMain,n=Math.max(r.lastIndexOf("/"),r.lastIndexOf("\\")),this.options.baseUrl=r.substring(0,n+1)))}a.Configuration=e}(AMDLoader=AMDLoader||{}),function(_){var t=(n.prototype.load=function(e,t,r,n){var o,i=this;this._scriptLoader||(this._env.isWebWorker?this._scriptLoader=new a:this._env.isElectronRenderer?(o=e.getConfig().getOptionsLiteral().preferScriptTags,this._scriptLoader=o?new s:new d(this._env)):this._env.isNode?this._scriptLoader=new d(this._env):this._scriptLoader=new s);n={callback:r,errorback:n};this._callbackMap.hasOwnProperty(t)?this._callbackMap[t].push(n):(this._callbackMap[t]=[n],this._scriptLoader.load(e,t,function(){return i.triggerCallback(t)},function(e){return i.triggerErrorback(t,e)}))},n.prototype.triggerCallback=function(e){var t=this._callbackMap[e];delete this._callbackMap[e];for(var r=0;r<t.length;r++)t[r].callback()},n.prototype.triggerErrorback=function(e,t){var r=this._callbackMap[e];delete this._callbackMap[e];for(var n=0;n<r.length;n++)r[n].errorback(t)},n),s=(r.prototype.attachListeners=function(e,t,r){function n(){e.removeEventListener("load",o),e.removeEventListener("error",i)}var o=function(e){n(),t()},i=function(e){n(),r(e)};e.addEventListener("load",o),e.addEventListener("error",i)},r.prototype.load=function(e,t,r,n){if(/^node\|/.test(t)){var o=e.getConfig().getOptionsLiteral(),i=v(e.getRecorder(),o.nodeRequire||_.global.nodeRequire),s=t.split("|"),a=null;try{a=i(s[1])}catch(e){return void n(e)}e.enqueueDefineAnonymousModule([],function(){return a}),r()}else/html\.js$/.test(t)?(o=e.getConfig().getOptionsLiteral().trustedTypesPolicy,fetch(t).then(function(e){if(200!==e.status)throw new Error(e.statusText);return e.text()}).then(function(e){e=e.replace(/\[\/"\(\[\^"\]\*\)"\/,".*?"attribute.name"\]/g,`[/(=)(\\s*)("(?:[^"]*?)"|'(?:[^']*?)'|[^\\s>]+)/,['delimiter','','attribute.value']],[/([:.@!#]*)([\\w\\-]+)/,['attribute.value','attribute.name']]`)+`
2 |  //# sourceURL=`+t,(o?self.eval(o.createScript("",e)):new Function(e)).call(self),r()}).then(void 0,n)):((s=document.createElement("script")).setAttribute("async","async"),s.setAttribute("type","text/javascript"),this.attachListeners(s,r,n),(n=e.getConfig().getOptionsLiteral().trustedTypesPolicy)&&(t=n.createScriptURL(t)),s.setAttribute("src",t),(e=e.getConfig().getOptionsLiteral().cspNonce)&&s.setAttribute("nonce",e),document.getElementsByTagName("head")[0].appendChild(s))},r),a=(e.prototype.load=function(e,t,r,n){var o=e.getConfig().getOptionsLiteral().trustedTypesPolicy,e=/^((http:)|(https:)|(file:))/.test(t)&&t.substring(0,self.origin.length)!==self.origin;if(!/html\.js$/.test(t)&&e)try{o&&(t=o.createScriptURL(t)),importScripts(t),r()}catch(e){n(e)}else fetch(t).then(function(e){if(200!==e.status)throw new Error(e.statusText);return e.text()}).then(function(e){e=e.replace(/\[\/"\(\[\^"\]\*\)"\/,".*?"attribute.name"\]/g,`[/(=)(\\s*)("(?:[^"]*?)"|'(?:[^']*?)'|[^\\s>]+)/,['delimiter','','attribute.value']],[/([:.@!#]*)([\\w\\-]+)/,['attribute.value','attribute.name']]`)+`
3 |  //# sourceURL=`+t,(o?self.eval(o.createScript("",e)):new Function(e)).call(self),r()}).then(void 0,n)},e),d=(g.prototype._init=function(e){this._didInitialize||(this._didInitialize=!0,this._fs=e("fs"),this._vm=e("vm"),this._path=e("path"),this._crypto=e("crypto"))},g.prototype._initNodeRequire=function(e,u){var l,c,h=u.getConfig().getOptionsLiteral().nodeCachedData;function p(r){function e(e){return r.require(e)}var n=r.constructor;return(e.resolve=function(e,t){return n._resolveFilename(e,r,!1,t)}).paths=function(e){return n._resolveLookupPaths(e,r)},e.main=process.mainModule,e.extensions=n._extensions,e.cache=n._cache,e}h&&!this._didPatchNodeRequire&&(this._didPatchNodeRequire=!0,l=this,(c=e("module")).prototype._compile=function(e,t){var r=c.wrap(e.replace(/^#!.*/,"")),n=u.getRecorder(),o=l._getCachedDataPath(h,t),i={filename:t};try{var s=l._fs.readFileSync(o),a=s.slice(0,16);i.cachedData=s.slice(16),n.record(60,o)}catch(e){n.record(61,o)}var d=new l._vm.Script(r,i),e=d.runInThisContext(i),s=l._path.dirname(t),n=p(this),s=[this.exports,n,this,t,s,process,_commonjsGlobal,Buffer],s=e.apply(this.exports,s);return l._handleCachedData(d,r,o,!i.cachedData,u),l._verifyCachedData(d,r,o,a,u),s})},g.prototype.load=function(o,e,i,s){var a=this,t=o.getConfig().getOptionsLiteral(),r=v(o.getRecorder(),t.nodeRequire||_.global.nodeRequire),d=t.nodeInstrumenter||function(e){return e};this._init(r),this._initNodeRequire(r,o);var n=o.getRecorder();if(/^node\|/.test(e)){var u=e.split("|"),l=null;try{l=r(u[1])}catch(e){return void s(e)}o.enqueueDefineAnonymousModule([],function(){return l}),i()}else{e=_.Utilities.fileUriToFilePath(this._env.isWindows,e);var c=this._path.normalize(e),h=this._getElectronRendererScriptPathOrUri(c),p=Boolean(t.nodeCachedData),f=p?this._getCachedDataPath(t.nodeCachedData,e):void 0;this._readSourceAndCachedData(c,f,n,function(e,t,r,n){e?s(e):(e=t.charCodeAt(0)===g._BOM?g._PREFIX+t.substring(1)+g._SUFFIX:g._PREFIX+t+g._SUFFIX,e=d(e,c),t=a._createAndEvalScript(o,e,{filename:h,cachedData:r},i,s),a._handleCachedData(t,e,f,p&&!r,o),a._verifyCachedData(t,e,f,n,o))})}},g.prototype._createAndEvalScript=function(e,t,r,n,o){var i=e.getRecorder();i.record(31,r.filename);var s=new this._vm.Script(t,r),a=s.runInThisContext(r),d=e.getGlobalAMDDefineFunc(),u=!1,t=function(){return u=!0,d.apply(null,arguments)};return t.amd=d.amd,a.call(_.global,e.getGlobalAMDRequireFunc(),t,r.filename,this._path.dirname(r.filename)),i.record(32,r.filename),u?n():o(new Error("Didn't receive define call in "+r.filename+"!")),s},g.prototype._getElectronRendererScriptPathOrUri=function(e){if(!this._env.isElectronRenderer)return e;var t=e.match(/^([a-z])\:(.*)/i);return t?"file:///"+(t[1].toUpperCase()+":"+t[2]).replace(/\\/g,"/"):"file://"+e},g.prototype._getCachedDataPath=function(e,t){var r=this._crypto.createHash("md5").update(t,"utf8").update(e.seed,"utf8").update(process.arch,"").digest("hex"),t=this._path.basename(t).replace(/\.js$/,"");return this._path.join(e.path,t+"-"+r+".code")},g.prototype._handleCachedData=function(t,r,n,e,o){var i=this;t.cachedDataRejected?this._fs.unlink(n,function(e){o.getRecorder().record(62,n),i._createAndWriteCachedData(t,r,n,o),e&&o.getConfig().onError(e)}):e&&this._createAndWriteCachedData(t,r,n,o)},g.prototype._createAndWriteCachedData=function(t,r,n,o){var i=this,e=Math.ceil(o.getConfig().getOptionsLiteral().nodeCachedData.writeDelay*(1+Math.random())),s=-1,a=0,d=void 0,u=function(){setTimeout(function(){d=d||i._crypto.createHash("md5").update(r,"utf8").digest();var e=t.createCachedData();0===e.length||e.length===s||5<=a||(e.length<s?u():(s=e.length,i._fs.writeFile(n,Buffer.concat([d,e]),function(e){e&&o.getConfig().onError(e),o.getRecorder().record(63,n),u()})))},e*Math.pow(4,a++))};u()},g.prototype._readSourceAndCachedData=function(e,r,n,t){var o,i,s,a,d;r?(s=i=o=void 0,a=2,d=function(e){e?t(e):0==--a&&t(void 0,o,i,s)},this._fs.readFile(e,{encoding:"utf8"},function(e,t){o=t,d(e)}),this._fs.readFile(r,function(e,t){!e&&t&&0<t.length?(s=t.slice(0,16),i=t.slice(16),n.record(60,r)):n.record(61,r),d()})):this._fs.readFile(e,{encoding:"utf8"},t)},g.prototype._verifyCachedData=function(e,t,r,n,o){var i=this;!n||e.cachedDataRejected||setTimeout(function(){var e=i._crypto.createHash("md5").update(t,"utf8").digest();n.equals(e)||(o.getConfig().onError(new Error("FAILED TO VERIFY CACHED DATA, deleting stale '"+r+"' now, but a RESTART IS REQUIRED")),i._fs.unlink(r,function(e){e&&o.getConfig().onError(e)}))},Math.ceil(5e3*(1+Math.random())))},g._BOM=65279,g._PREFIX="(function (require, define, __filename, __dirname) { ",g._SUFFIX=`
4 | });`,g);function g(e){this._env=e,this._didInitialize=!1,this._didPatchNodeRequire=!1}function e(){}function r(){}function n(e){this._env=e,this._scriptLoader=null,this._callbackMap={}}function v(t,r){if(r.__$__isRecorded)return r;function e(e){t.record(33,e);try{return r(e)}finally{t.record(34,e)}}return e.__$__isRecorded=!0,e}_.ensureRecordedNodeRequire=v,_.createScriptLoader=function(e){return new t(e)}}(AMDLoader=AMDLoader||{}),function(i){var d=(t._normalizeModuleId=function(e){for(var t=e,r=/\/\.\//;r.test(t);)t=t.replace(r,"/");for(t=t.replace(/^\.\//g,""),r=/\/(([^\/])|([^\/][^\/\.])|([^\/\.][^\/])|([^\/][^\/][^\/]+))\/\.\.\//;r.test(t);)t=t.replace(r,"/");return t=t.replace(/^(([^\/])|([^\/][^\/\.])|([^\/\.][^\/])|([^\/][^\/][^\/]+))\/\.\.\//,"")},t.prototype.resolveModule=function(e){return i.Utilities.isAbsolutePath(e)||(i.Utilities.startsWith(e,"./")||i.Utilities.startsWith(e,"../"))&&(e=t._normalizeModuleId(this.fromModulePath+e)),e},t.ROOT=new t(""),t);function t(e){var t=e.lastIndexOf("/");this.fromModulePath=-1!==t?e.substr(0,t+1):""}i.ModuleIdResolver=d;var h=(o._safeInvokeFunction=function(e,t){try{return{returnedValue:e.apply(i.global,t),producedError:null}}catch(e){return{returnedValue:null,producedError:e}}},o._invokeFactory=function(e,t,r,n){return e.isBuild()&&!i.Utilities.isAnonymousModule(t)?{returnedValue:null,producedError:null}:e.shouldCatchError()?this._safeInvokeFunction(r,n):{returnedValue:r.apply(i.global,n),producedError:null}},o.prototype.complete=function(e,t,r){this._isComplete=!0;var n=null;this._callback&&("function"==typeof this._callback?(e.record(21,this.strId),n=(r=o._invokeFactory(t,this.strId,this._callback,r)).producedError,e.record(22,this.strId),n||void 0===r.returnedValue||this.exportsPassedIn&&!i.Utilities.isEmpty(this.exports)||(this.exports=r.returnedValue)):this.exports=this._callback),n&&((n=i.ensureError(n)).phase="factory",n.moduleId=this.strId,this.error=n,t.onError(n)),this.dependencies=null,this._callback=null,this._errorback=null,this.moduleIdResolver=null},o.prototype.onDependencyError=function(e){return this._isComplete=!0,this.error=e,!!this._errorback&&(this._errorback(e),!0)},o.prototype.isComplete=function(){return this._isComplete},o);function o(e,t,r,n,o,i){this.id=e,this.strId=t,this.dependencies=r,this._callback=n,this._errorback=o,this.moduleIdResolver=i,this.exports={},this.error=null,this.exportsPassedIn=!1,this.unresolvedDependenciesCount=this.dependencies.length,this._isComplete=!1}i.Module=h;var s=(r.prototype.getMaxModuleId=function(){return this._nextId},r.prototype.getModuleId=function(e){var t=this._strModuleIdToIntModuleId.get(e);return void 0===t&&(t=this._nextId++,this._strModuleIdToIntModuleId.set(e,t),this._intModuleIdToStrModuleId[t]=e),t},r.prototype.getStrModuleId=function(e){return this._intModuleIdToStrModuleId[e]},r),c=(e.EXPORTS=new e(0),e.MODULE=new e(1),e.REQUIRE=new e(2),e);function e(e){this.id=e}function r(){this._nextId=0,this._strModuleIdToIntModuleId=new Map,this._intModuleIdToStrModuleId=[],this.getModuleId("exports"),this.getModuleId("module"),this.getModuleId("require")}i.RegularDependency=c;var u=function(e,t,r){this.id=e,this.pluginId=t,this.pluginParam=r};i.PluginDependency=u;var n=(l.prototype.reset=function(){return new l(this._env,this._scriptLoader,this._defineFunc,this._requireFunc,this._loaderAvailableTimestamp)},l.prototype.getGlobalAMDDefineFunc=function(){return this._defineFunc},l.prototype.getGlobalAMDRequireFunc=function(){return this._requireFunc},l._findRelevantLocationInStack=function(e,t){for(var r=function(e){return e.replace(/\\/g,"/")},n=r(e),o=t.split(/\n/),i=0;i<o.length;i++){var s=o[i].match(/(.*):(\d+):(\d+)\)?$/);if(s){var a=s[1],d=s[2],u=s[3],s=Math.max(a.lastIndexOf(" ")+1,a.lastIndexOf("(")+1);if((a=r(a=a.substr(s)))===n){u={line:parseInt(d,10),col:parseInt(u,10)};return 1===u.line&&(u.col-="(function (require, define, __filename, __dirname) { ".length),u}}}throw new Error("Could not correlate define call site for needle "+e)},l.prototype.getBuildInfo=function(){if(!this._config.isBuild())return null;for(var e=[],t=0,r=0,n=this._modules2.length;r<n;r++){var o,i,s,a=this._modules2[r];a&&(o=this._buildInfoPath[a.id]||null,i=this._buildInfoDefineStack[a.id]||null,s=this._buildInfoDependencies[a.id],e[t++]={id:a.strId,path:o,defineLocation:o&&i?l._findRelevantLocationInStack(o,i):null,dependencies:s,shim:null,exports:a.exports})}return e},l.prototype.getRecorder=function(){return this._recorder||(this._config.shouldRecordStats()?this._recorder=new i.LoaderEventRecorder(this._loaderAvailableTimestamp):this._recorder=i.NullLoaderEventRecorder.INSTANCE),this._recorder},l.prototype.getLoaderEvents=function(){return this.getRecorder().getEvents()},l.prototype.enqueueDefineAnonymousModule=function(e,t){if(null!==this._currentAnnonymousDefineCall)throw new Error("Can only have one anonymous define call per script file");var r=null;this._config.isBuild()&&(r=new Error("StackLocation").stack||null),this._currentAnnonymousDefineCall={stack:r,dependencies:e,callback:t}},l.prototype.defineModule=function(e,t,r,n,o,i){var s=this;void 0===i&&(i=new d(e));var a=this._moduleIdProvider.getModuleId(e);this._modules2[a]?this._config.isDuplicateMessageIgnoredFor(e)||console.warn("Duplicate definition of module '"+e+"'"):(i=new h(a,e,this._normalizeDependencies(t,i),r,n,i),this._modules2[a]=i,this._config.isBuild()&&(this._buildInfoDefineStack[a]=o,this._buildInfoDependencies[a]=(i.dependencies||[]).map(function(e){return s._moduleIdProvider.getStrModuleId(e.id)})),this._resolve(i))},l.prototype._normalizeDependency=function(e,t){if("exports"===e)return c.EXPORTS;if("module"===e)return c.MODULE;if("require"===e)return c.REQUIRE;var r=e.indexOf("!");if(0<=r){var n=t.resolveModule(e.substr(0,r)),o=t.resolveModule(e.substr(r+1)),r=this._moduleIdProvider.getModuleId(n+"!"+o),n=this._moduleIdProvider.getModuleId(n);return new u(r,n,o)}return new c(this._moduleIdProvider.getModuleId(t.resolveModule(e)))},l.prototype._normalizeDependencies=function(e,t){for(var r=[],n=0,o=0,i=e.length;o<i;o++)r[n++]=this._normalizeDependency(e[o],t);return r},l.prototype._relativeRequire=function(e,t,r,n){if("string"==typeof t)return this.synchronousRequire(t,e);this.defineModule(i.Utilities.generateAnonymousModule(),t,r,n,null,e)},l.prototype.synchronousRequire=function(e,t){void 0===t&&(t=new d(e));t=this._normalizeDependency(e,t),t=this._modules2[t.id];if(!t)throw new Error("Check dependency list! Synchronous require cannot resolve module '"+e+"'. This is the first mention of this module!");if(!t.isComplete())throw new Error("Check dependency list! Synchronous require cannot resolve module '"+e+"'. This module has not been resolved completely yet.");if(t.error)throw t.error;return t.exports},l.prototype.configure=function(e,t){var r=this._config.shouldRecordStats();this._config=t?new i.Configuration(this._env,e):this._config.cloneAndMerge(e),this._config.shouldRecordStats()&&!r&&(this._recorder=null)},l.prototype.getConfig=function(){return this._config},l.prototype._onLoad=function(e){var t;null!==this._currentAnnonymousDefineCall&&(t=this._currentAnnonymousDefineCall,this._currentAnnonymousDefineCall=null,this.defineModule(this._moduleIdProvider.getStrModuleId(e),t.dependencies,t.callback,null,t.stack))},l.prototype._createLoadError=function(e,t){var r=this,n=this._moduleIdProvider.getStrModuleId(e),e=(this._inverseDependencies2[e]||[]).map(function(e){return r._moduleIdProvider.getStrModuleId(e)}),t=i.ensureError(t);return t.phase="loading",t.moduleId=n,t.neededBy=e,t},l.prototype._onLoadError=function(e,t){var r=this._createLoadError(e,t);this._modules2[e]||(this._modules2[e]=new h(e,this._moduleIdProvider.getStrModuleId(e),[],function(){},function(){},null));for(var n=[],o=0,i=this._moduleIdProvider.getMaxModuleId();o<i;o++)n[o]=!1;var s=!1,a=[];for(a.push(e),n[e]=!0;0<a.length;){var d=a.shift(),u=this._modules2[d];u&&(s=u.onDependencyError(r)||s);var l=this._inverseDependencies2[d];if(l)for(o=0,i=l.length;o<i;o++){var c=l[o];n[c]||(a.push(c),n[c]=!0)}}s||this._config.onError(r)},l.prototype._hasDependencyPath=function(e,t){var r=this._modules2[e];if(!r)return!1;for(var n=[],o=0,i=this._moduleIdProvider.getMaxModuleId();o<i;o++)n[o]=!1;var s=[];for(s.push(r),n[e]=!0;0<s.length;){var a=s.shift().dependencies;if(a)for(o=0,i=a.length;o<i;o++){var d=a[o];if(d.id===t)return!0;var u=this._modules2[d.id];u&&!n[d.id]&&(n[d.id]=!0,s.push(u))}}return!1},l.prototype._findCyclePath=function(e,t,r){if(e===t||50===r)return[e];var n=this._modules2[e];if(!n)return null;var o=n.dependencies;if(o)for(var i=0,s=o.length;i<s;i++){var a=this._findCyclePath(o[i].id,t,r+1);if(null!==a)return a.push(e),a}return null},l.prototype._createRequire=function(n){function e(e,t,r){return o._relativeRequire(n,e,t,r)}var o=this;return e.toUrl=function(e){return o._config.requireToUrl(n.resolveModule(e))},e.getStats=function(){return o.getLoaderEvents()},e.hasDependencyCycle=function(){return o._hasDependencyCycle},e.config=function(e,t){o.configure(e,t=void 0===t?!1:t)},e.__$__nodeRequire=i.global.nodeRequire,e},l.prototype._loadModule=function(n){var e,o,i,s,a=this;this._modules2[n]||this._knownModules2[n]||(this._knownModules2[n]=!0,e=this._moduleIdProvider.getStrModuleId(n),o=this._config.moduleIdToPaths(e),this._env.isNode&&(-1===e.indexOf("/")||/^@[^\/]+\/[^\/]+$/.test(e))&&o.push("node|"+e),i=-1,(s=function(e){if(++i>=o.length)a._onLoadError(n,e);else{var t=o[i],r=a.getRecorder();if(a._config.isBuild()&&"empty:"===t)return a._buildInfoPath[n]=t,a.defineModule(a._moduleIdProvider.getStrModuleId(n),[],null,null,null),void a._onLoad(n);r.record(10,t),a._scriptLoader.load(a,t,function(){a._config.isBuild()&&(a._buildInfoPath[n]=t),r.record(11,t),a._onLoad(n)},function(e){r.record(12,t),s(e)})}})(null))},l.prototype._loadPluginDependency=function(e,t){var r,n=this;this._modules2[t.id]||this._knownModules2[t.id]||(this._knownModules2[t.id]=!0,(r=function(e){n.defineModule(n._moduleIdProvider.getStrModuleId(t.id),[],e,null,null)}).error=function(e){n._config.onError(n._createLoadError(t.id,e))},e.load(t.pluginParam,this._createRequire(d.ROOT),r,this._config.getOptionsLiteral()))},l.prototype._resolve=function(e){var t=this,r=e.dependencies;if(r)for(var n=0,o=r.length;n<o;n++){var i=r[n];if(i!==c.EXPORTS)if(i!==c.MODULE)if(i!==c.REQUIRE){var s,a=this._modules2[i.id];if(a&&a.isComplete()){if(a.error)return void e.onDependencyError(a.error);e.unresolvedDependenciesCount--}else this._hasDependencyPath(i.id,e.id)?(this._hasDependencyCycle=!0,console.warn("There is a dependency cycle between '"+this._moduleIdProvider.getStrModuleId(i.id)+"' and '"+this._moduleIdProvider.getStrModuleId(e.id)+"'. The cyclic path follows:"),(s=this._findCyclePath(i.id,e.id,0)||[]).reverse(),s.push(i.id),console.warn(s.map(function(e){return t._moduleIdProvider.getStrModuleId(e)}).join(` => 
5 | `)),e.unresolvedDependenciesCount--):(this._inverseDependencies2[i.id]=this._inverseDependencies2[i.id]||[],this._inverseDependencies2[i.id].push(e.id),i instanceof u?(s=this._modules2[i.pluginId])&&s.isComplete()?this._loadPluginDependency(s.exports,i):((s=this._inversePluginDependencies2.get(i.pluginId))||this._inversePluginDependencies2.set(i.pluginId,s=[]),s.push(i),this._loadModule(i.pluginId)):this._loadModule(i.id))}else e.unresolvedDependenciesCount--;else e.unresolvedDependenciesCount--;else e.exportsPassedIn=!0,e.unresolvedDependenciesCount--}0===e.unresolvedDependenciesCount&&this._onModuleComplete(e)},l.prototype._onModuleComplete=function(e){var t=this,r=this.getRecorder();if(!e.isComplete()){var n=e.dependencies,o=[];if(n)for(var i=0,s=n.length;i<s;i++){var a=n[i];a!==c.EXPORTS?a!==c.MODULE?a!==c.REQUIRE?(a=this._modules2[a.id],o[i]=a?a.exports:null):o[i]=this._createRequire(e.moduleIdResolver):o[i]={id:e.strId,config:function(){return t._config.getConfigForModule(e.strId)}}:o[i]=e.exports}e.complete(r,this._config,o);var d=this._inverseDependencies2[e.id];if(this._inverseDependencies2[e.id]=null,d)for(i=0,s=d.length;i<s;i++){var u=d[i],u=this._modules2[u];u.unresolvedDependenciesCount--,0===u.unresolvedDependenciesCount&&this._onModuleComplete(u)}var l=this._inversePluginDependencies2.get(e.id);if(l){this._inversePluginDependencies2.delete(e.id);for(i=0,s=l.length;i<s;i++)this._loadPluginDependency(e.exports,l[i])}}},l);function l(e,t,r,n,o){void 0===o&&(o=0),this._env=e,this._scriptLoader=t,this._loaderAvailableTimestamp=o,this._defineFunc=r,this._requireFunc=n,this._moduleIdProvider=new s,this._config=new i.Configuration(this._env),this._hasDependencyCycle=!1,this._modules2=[],this._knownModules2=[],this._inverseDependencies2=[],this._inversePluginDependencies2=new Map,this._currentAnnonymousDefineCall=null,this._recorder=null,this._buildInfoPath=[],this._buildInfoDefineStack=[],this._buildInfoDependencies=[]}i.ModuleManager=n}(AMDLoader=AMDLoader||{}),function(t){function r(e,t,r){"string"!=typeof e&&(r=t,t=e,e=null),"object"==typeof t&&Array.isArray(t)||(r=t,t=null),t=t||["require","exports","module"],e?o.defineModule(e,t,r,null,null):o.enqueueDefineAnonymousModule(t,r)}var n=new t.Environment,o=null;r.amd={jQuery:!0};function e(e,t){o.configure(e,t=void 0===t?!1:t)}function i(){if(1===arguments.length){if(arguments[0]instanceof Object&&!Array.isArray(arguments[0]))return void e(arguments[0]);if("string"==typeof arguments[0])return o.synchronousRequire(arguments[0])}if(2!==arguments.length&&3!==arguments.length||!Array.isArray(arguments[0]))throw new Error("Unrecognized require call");o.defineModule(t.Utilities.generateAnonymousModule(),arguments[0],arguments[1],arguments[2],null)}function s(){var e;void 0===t.global.require&&"undefined"==typeof require||"function"==typeof(e=t.global.require||require)&&"function"==typeof e.resolve&&(e=t.ensureRecordedNodeRequire(o.getRecorder(),e),t.global.nodeRequire=e,i.nodeRequire=e,i.__$__nodeRequire=e),n.isNode&&!n.isElectronRenderer?(module.exports=i,require=i):(n.isElectronRenderer||(t.global.define=r),t.global.require=i)}i.config=e,i.getConfig=function(){return o.getConfig().getOptionsLiteral()},i.reset=function(){o=o.reset()},i.getBuildInfo=function(){return o.getBuildInfo()},i.getStats=function(){return o.getLoaderEvents()},i.define=function(){return r.apply(null,arguments)},t.init=s,"function"==typeof t.global.define&&t.global.define.amd||(o=new t.ModuleManager(n,t.createScriptLoader(n),r,i,t.Utilities.getHighPerformanceTimestamp()),void 0!==t.global.require&&"function"!=typeof t.global.require&&i.config(t.global.require),(define=function(){return r.apply(null,arguments)}).amd=r.amd,"undefined"==typeof doNotInitLoader&&s())}(AMDLoader=AMDLoader||{});


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