efront 3.36.2 → 3.36.3

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

@@ -1,8 +1,26 @@
 <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;
+    }
+
+    textarea {
+        outline: none;
+        white-space: nowrap;
     }
 
     p4 {
@@ -11,7 +29,7 @@
         margin: 20px 0;
     }
 
-    p4 m{
+    p4 m {
         line-height: 1.2;
         display: inline-block;
         margin-right: 6px;
@@ -48,32 +66,73 @@
         padding: 2px 4px;
     }
 
+    [codearea] {
+        width: 100%;
+        height: 100%;
+    }
+
+    [codearea]>code {
+        overflow: auto;
+        width: 100%;
+        height: 100%;
+        padding-bottom: 600px;
+        white-space: nowrap;
+    }
+
     markdown {
-        margin: 0 -20px;
+        margin: -6px -20px 0 -10px;
+    }
+
+    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="updatecode()"></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 分析 = lazy(async function (com, props) {
         if (props.mark) props.url = '/mark/coms/' + com.replace(/\.js$/i, '.md');
@@ -97,11 +156,178 @@
         scope.required = required;
         scope.envs = Object.keys(envs);
         render.refresh();
+        if (tags[1].actived) loadcode();
+    });
+    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 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) {
+                    child = child.firstChild;
+                    continue;
+                }
+                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) {
+        var colored = codetext("js", innerText);
+        var offset = getAnchorOffset();
+        var innerHTML = scope.coder.innerHTML.replace(/\s*contenteditable\=[^\s\>]+/i, '');
+        if (innerHTML === colored) return;
+        var [c0] = scope.coder.children;
+        var nodesCount = c0 ? c0.childNodes.length : 0;
+        scope.coder.innerHTML = colored;
+        var [c] = scope.coder.children;
+        if (nodesCount < c.childNodes.length) {
+            if (offset < 0) offset--;
+            else if (offset > 0) offset++;
+        }
+        c.contentEditable = true;
+        setAnchorOffset(offset);
+    };
+    var updatecode = lazy(function (event) {
+        var innerText = scope.coder.innerText;
+        if (scope.codetext.replace(/[\s\u00a0]+/g, ' ').trim() === innerText.replace(/[\s\u00a0]+/g, ' ').trim()) return;
+        initcode(innerText);
+        scope.codetext = scope.coder.innerText;
     });
-    var page = document.createElement("component");
+    var execute = async function () {
+        try {
+            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)));
+            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');
+        }
+    };
+    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();
     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) loadcode();
+        },
     };
     render(page, scope);
     function main(name) {

package/package.json

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