efront 3.36.2 → 3.36.5

package/docs//347/273/204/344/273/266.xht

@@ -1,17 +1,31 @@
 <style>
     :scope {
         line-height: 1.2;
-        padding: 0 20px;
         display: block;
+        height: 100%;
+        width: 100%;
+    }
+
+    xmenu {
+        z-index: 2;
     }
 
+    [body] {
+        border-top: 42px solid transparent;
+        margin-top: -82px;
+        padding-top: 40px;
+        padding-bottom: 0 !important;
+        border-bottom: 46px solid transparent;
+    }
+
+
     p4 {
         line-height: 1.8;
         display: block;
         margin: 20px 0;
     }
 
-    p4 m{
+    p4 m {
         line-height: 1.2;
         display: inline-block;
         margin-right: 6px;
@@ -48,33 +62,107 @@
         padding: 2px 4px;
     }
 
+    [codearea] {
+        width: 100%;
+        height: 100%;
+    }
+
+    [codearea]>code {
+        overflow: auto;
+        width: 100%;
+        height: 100%;
+        padding: 10px 20px 600px 20px;
+        white-space: nowrap;
+        outline: none;
+    }
+
     markdown {
-        margin: 0 -20px;
+        margin: -6px -20px 0 -10px;
+    }
+
+    [foot]>button {
+        padding: 0 20px;
+    }
+
+    .result {
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        left: 0;
+        padding: 10px 20px;
+        border-top: 1px solid #333;
+        background: #fff;
+        display: block;
+        z-index: 1;
     }
 </style>
-<h2>
+<xmenu -src="(t,i) in tags" @active="saveTagIndex(i)"></xmenu>
+<h2 head>
     <span -bind="name"></span>
     <b -if="doc?.less" l>有样式表</b>
     <b -if="doc?.mark" w>有文档</b>
     <b -if="doc?.test" t>有测试代码</b>
 </h2>
-<container -if="doc?.url" .src="doc.url">
-</container>
-<p4 envs>
-    <span -if="envs?.length">
-        环境依赖项:&nbsp; <m -repeat="c in envs" -bind="c"> </m>
-    </span>
-    <span -else> 无环境依赖项 </span>
-</p4>
-<p4 imported>
-    <span -if="required?.length">
-        导入项:&nbsp;<m -repeat="c in required" -bind="c"></m>
-    </span>
-    <span -else>
-        无导入项
-    </span>
-</p4>
+<div body -if="tags[0].actived">
+    <container -if="doc?.url" .src="doc.url">
+    </container>
+    <p4 envs>
+        <span -if="envs?.length">
+            环境依赖项:&nbsp; <m -repeat="c in envs" -bind="c"> </m>
+        </span>
+        <span -else> 无环境依赖项 </span>
+    </p4>
+    <p4 imported>
+        <span -if="required?.length">
+            导入项:&nbsp;<m -repeat="c in required" -bind="c"></m>
+        </span>
+        <span -else>
+            无导入项
+        </span>
+    </p4>
+</div>
+<div body -elseif="tags[1].actived">
+    <div codearea #coder onkeyup="!event.isComposing&&updatecode()" onkeydown.tab="keytab(event)"></div>
+    <resultpad .result #coderesult></resultpad>
+</div>
+<div foot -if="tags[1].actived">
+    <a -if="doc?.test" @click="clearpad()">清理</a>
+    <a -if="doc?.test" @click="loadcode()">载入测试代码</a>
+    <btn @click="execute()">运行</btn>
+</div>
 <script>
+    var commaps = Object.create(null);
+    var initCommap = function (live) {
+        var commap = commaps[live];
+        if (!commap) {
+            commap = commaps[live] = Object.create(null);
+            var lives = data.getInstance("components");
+            if (live) {
+                lives = lives.slice().sort((a, b) => {
+                    if (a.name === live) return -1;
+                    return 0;
+                });
+                lives.forEach(a => {
+                    for (var c of a.children) {
+                        var name = c.name.replace(/\.[^\.]+$/, '');
+                        var real = `${a.name}$${name}`;
+                        if (!commap[name]) commap[name] = real;
+                        commap[real] = real;
+                    }
+                })
+            }
+        }
+        return commap;
+    };
+    var request = modules["get request"]();
+    modules["set request"](function (url, onload, onerror, version) {
+        if (!/[\*~]/.test(url)) return request(url, onload, onerror, version);
+        var name = url.replace(/[\*~][\s\S]*$/, '');
+        var live = url.slice(name.length + 1);
+        var commap = initCommap(live);
+        name = name.replace(/[^\/]+$/g, a => commap[a] || a);
+        return request(name, onload, onerror, version)
+    });
     var 分析 = lazy(async function (com, props) {
         if (props.mark) props.url = '/mark/coms/' + com.replace(/\.js$/i, '.md');
         scope.doc = props;
@@ -97,11 +185,231 @@
         scope.required = required;
         scope.envs = Object.keys(envs);
         render.refresh();
+        if (tags[1].actived) loadcode();
     });
-    var page = document.createElement("component");
+    var loadcode = async function () {
+        var modName = scope.name.replace(/\.js$/, '_test');
+        if (scope.doc.test) {
+            var xhr = await cross('get', "./components:" + modName + '.js');
+            var codetext = xhr.responseText;
+            var code = compile$scanner2(codetext);
+            var envs = code.envs;
+            var vars = code.vars;
+            var commName = modName.replace(/^[\s\S]*\//, '');
+            var lessName = commName + ".less", lessData;
+            var cssWrap = `css-` + +new Date;
+            if (scope.doc.test.indexOf(lessName) >= 0) {
+                lessData = await cross("get", "./components:" + modName + ".less");
+                lessData = compile$richcss(lessData.responseText, "." + cssWrap);
+                if (code.isExpressQueue()) {
+                    codetext = `return cless(${codetext},\`${lessData}\`,"${cssWrap}")`;
+                }
+                else {
+                    var entryName;
+                    if (vars.main) entryName = "main";
+                    else if (vars.Main) entryName = 'Main';
+                    else if (vars.MAIN) entryName = "MAIN";
+                    else if (vars[commName]) entryName = commName;
+                    if (entryName) codetext += `\r\nreturn cless(${entryName},\`${lessData}\`,"${cssWrap}")`;
+                }
+            }
+            else {
+                if (code.isExpressQueue()) codetext = "return " + codetext;
+                else if (vars.main) codetext += '\r\nreturn main';
+                else if (vars.Main) codetext += '\r\nreturn Main';
+                else if (vars.MAIN) codetext += "\r\nreturn MAIN";
+                else if (vars[modName]) codetext += "\r\nreturn " + modName;
+            }
+            var templateName = commName;
+            if (envs.template) templateName = 'template';
+            if (envs[templateName]) {
+                delete envs[templateName];
+                var template = await cross("get", './components:' + modName + ".html");
+                codetext = `var ${templateName}={toString(){return \`${template.responseText}\`}};\r\n` + codetext;
+            }
+            initcode(codetext);
+        }
+        else {
+            initcode('');
+        }
+        scope.codetext = scope.coder.innerText;
+        execute();
+    };
+    var blink = "\u0080";
+    var markAnchorOffset = function () {
+        var { anchorNode, anchorOffset } = document.getSelection();
+        if (!anchorNode || !scope.coder) return;
+        var [c] = scope.coder.children;
+        if (anchorNode.nodeType === 1) {
+            var node = document.createTextNode(blink);
+            anchorNode.insertBefore(node, anchorNode.childNodes[anchorOffset])
+        }
+        else if (anchorNode.nodeType === 3) {
+            anchorNode.nodeValue = anchorNode.nodeValue.slice(0, anchorOffset) + blink + anchorNode.nodeValue.slice(anchorOffset);
+        }
+    };
+    var unmarkAnchorOffset = function () {
+        var [c] = scope.coder.children;
+        var node = c.firstChild;
+        while (node) {
+            if (node.nodeType === 1) {
+                if (node.innerText.indexOf(blink) >= 0) {
+                    node = node.firstChild;
+                    continue;
+                }
+            }
+            else if (node.nodeType === 3) {
+                if (node.nodeValue.indexOf(blink) >= 0) break;
+            }
+            node = node.nextSibling;
+        }
+        if (node) {
+            var offset = node.nodeValue.indexOf(blink);
+            node.nodeValue = node.nodeValue.slice(0, offset) + node.nodeValue.slice(offset + 1);
+            document.getSelection().setBaseAndExtent(node, offset, node, offset);
+            if (!node.nodeValue) {
+                remove(node);
+            }
+        }
+    }
+    var getAnchorOffset = function () {
+        var { anchorNode, anchorOffset } = document.getSelection();
+        var [c] = scope.coder.children;
+        if (anchorNode === c || !anchorNode) return -anchorOffset;
+        var sibling = anchorNode.previousSibling ? anchorNode.previousSibling : anchorNode.parentNode.previousSibling;
+        while (sibling && sibling !== c) {
+            switch (sibling.nodeType) {
+                case 1:
+                    anchorOffset += sibling.innerText.length || 1;
+                    break;
+                case 3:
+                    anchorOffset += sibling.nodeValue.length;
+                    break;
+            }
+            sibling = sibling.previousSibling ? sibling.previousSibling : sibling.parentNode.previousSibling;
+        }
+        return anchorOffset;
+    };
+    var setAnchorOffset = function (anchorOffset) {
+        var [c] = scope.coder.children;
+        if (anchorOffset < 0) {
+            anchorOffset = -anchorOffset;
+            if (anchorOffset > c.childNodes.length) anchorOffset = c.childNodes.length;
+            return document.getSelection().setBaseAndExtent(c, anchorOffset, c, anchorOffset);
+        }
+        var offset = anchorOffset;
+        var child = c.firstChild;
+        while (child) {
+            var delta = 0;
+            switch (child.nodeType) {
+                case 1:
+                    delta = child.innerText.length || 1;
+                    break;
+                case 3:
+                    delta = child.nodeValue.length;
+                    break;
+            }
+            if (delta >= offset) {
+                if (child.nodeType === 1) {
+                    if (child.firstChild) {
+                        child = child.firstChild;
+                        continue;
+                    }
+                    offset -= 1;
+                    break;
+                }
+                break;
+            }
+            offset -= delta;
+            if (offset <= 0) break;
+            child = child.nextSibling;
+        }
+        if (!child) child = c, offset = c.childNodes.length;
+        return document.getSelection().setBaseAndExtent(child, offset, child, offset);
+    }
+    var initcode = function (innerText) {
+        try {
+            var colored = codetext("js", innerText, blink);
+        } catch { return; }
+        var innerHTML = scope.coder.innerHTML.replace(/\s*contenteditable\=[^\s\>]+/i, '');
+        if (innerHTML === colored) return;
+        var [c0] = scope.coder.children;
+        var contentLength = c0 ? innerText.length : 0;
+        var scrollTop = c0 ? c0.scrollTop : 0;
+        var scrollLeft = c0 ? c0.scrollLeft : 0;
+        scope.coder.innerHTML = colored;
+        var [c] = scope.coder.children;
+        c.scrollTop = scrollTop;
+        c.scrollLeft = scrollLeft;
+        c.contentEditable = true;
+    };
+    var updatecode = lazy(function () {
+        markAnchorOffset();
+        var innerText = scope.coder.innerText;
+        var trimspace = (_, a) => a ? "" : " ";
+        var trimreg = /[\s\u00a0\u2002\u0080]+([\}\{\;\[\]\(\)\,\>\<\+\-\*\&\^\/%!~:?])*/g;
+        unmarkAnchorOffset();
+        if (scope.codetext.replace(trimreg, trimspace).trim() === innerText.replace(trimreg, trimspace).trim()) return;
+        initcode(innerText);
+        unmarkAnchorOffset();
+        scope.codetext = scope.coder.innerText;
+    });
+    var execute = async function () {
+        try {
+            var live = /^([\s\S]+)\//.exec(scope.name);
+            if (live) live = live[1];
+            var commap = initCommap(live);
+            remove(scope.coderesult.childNodes);
+            var codetext = scope.codetext.replace(/[\u2002\u00a0]/g, ' ');
+            data.patchInstance("docscode", { codetext: codetext })
+            var code = compile$scanner2(codetext);
+            var envs = code.envs;
+            var argNames = Object.keys(envs);
+            var args = await Promise.all(argNames.map(a => init(a + "*" + live, null, { ["init*" + live]: init, ["put*" + live]: put, ["zimoli*" + live]: zimoli, ["appendChild*" + live]: appendChild, ["remove*" + live]: remove })));
+            var func = createFunction("", codetext, argNames, code.async, code.yield);
+            var res = func.apply(window, args);
+            if (isFunction(res)) {
+                res = res.call(res);
+            }
+            if (isElement(res) || isArray(res)) {
+                appendChild(scope.coderesult, res);
+            }
+        } catch (e) {
+            alert(String(e), 'error');
+            throw e;
+        }
+    };
+    var tags = [
+        { name: "简介" },
+        { name: "试试" }
+    ];
+    tags[data.getInstance("docscode").tagIndex | 0].actived = true;
+    var actived = tags.map(t => t.actived);
+    var xmenu = menu;
+    var page = view();
+    on("submit")(page, e => e.preventDefault());
     page.innerHTML = template;
     var scope = {
+        btn: button,
         container,
+        view,
+        tags,
+        a: button,
+        codetext: "",
+        xmenu: menu,
+        loadcode,
+        clearpad() {
+            remove(this.coderesult.childNodes);
+        },
+        execute,
+        updatecode,
+        saveTagIndex(i) {
+            data.setInstance("docscode", { tagIndex: i });
+            if (i === 1 && !scope.codetext) requestAnimationFrame(loadcode);
+        },
+        keytab(event) {
+            event.preventDefault();
+        }
     };
     render(page, scope);
     function main(name) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "efront",
-    "version": "3.36.2",
+    "version": "3.36.5",
     "description": "简化前端开发，优化web性能",
     "main": "public/efront.js",
     "directories": {