npm - lightview - Versions diffs - 1.8.1-b → 1.8.2 - Mend

lightview 1.8.1-b → 1.8.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (126) hide show

package/README.md +15 -16
package/docs/CNAME +1 -0
package/docs/api.html +674 -0
package/docs/blank.html +10 -0
package/docs/comparedto.html +89 -0
package/docs/components/chart-repl.html +69 -0
package/{components/chart → docs/components}/chart.html +2 -2
package/{components → docs/components}/components.js +3 -3
package/docs/components/contents.html +17 -0
package/docs/components/gantt-repl.html +61 -0
package/{components/gantt → docs/components}/gantt.html +3 -3
package/docs/components/gauge-repl.html +66 -0
package/{components/gauge → docs/components}/gauge.html +2 -2
package/docs/components/orgchart-repl.html +64 -0
package/{components/orgchart → docs/components}/orgchart.html +2 -2
package/docs/components/repl-as-src.html +17 -0
package/docs/components/repl-repl.html +95 -0
package/docs/components/repl.html +527 -0
package/docs/components/timeline-repl.html +72 -0
package/{components/timeline → docs/components}/timeline.html +2 -2
package/docs/components.html +14 -0
package/docs/css/highlightjs.min.css +9 -0
package/docs/css/tutorial.css +35 -0
package/docs/examples/anchor.html +11 -0
package/{examples → docs/examples}/chart.html +2 -2
package/{examples → docs/examples}/counter.html +1 -1
package/{examples → docs/examples}/counter.test.mjs +0 -0
package/{examples → docs/examples}/counter2.html +1 -1
package/{examples → docs/examples}/directives.html +1 -1
package/{examples → docs/examples}/foreign.html +1 -1
package/{examples → docs/examples}/forgeinform.html +1 -1
package/{examples → docs/examples}/form.html +1 -1
package/{examples → docs/examples}/gauge.html +2 -2
package/{examples → docs/examples}/invalid-template-literals.html +1 -1
package/{examples → docs/examples}/medium/remote.html +1 -1
package/{examples → docs/examples}/message.html +0 -0
package/{examples → docs/examples}/nested.html +1 -1
package/{examples → docs/examples}/object-bound-form.html +0 -0
package/{examples → docs/examples}/remote-server.js +0 -0
package/{examples → docs/examples}/remote.html +2 -2
package/{examples → docs/examples}/remote.json +0 -0
package/{examples → docs/examples}/scratch.html +1 -1
package/docs/examples/sensors/index.html +44 -0
package/{examples → docs/examples}/sensors/sensor-server.js +0 -0
package/{examples → docs/examples}/shared.html +0 -0
package/{examples → docs/examples}/template.html +1 -1
package/{examples → docs/examples}/timeline.html +2 -2
package/docs/examples/todo.html +40 -0
package/docs/examples/top.html +10 -0
package/{examples → docs/examples}/types.html +1 -1
package/{examples → docs/examples}/xor.html +1 -1
package/docs/examples.html +25 -0
package/docs/index.html +44 -0
package/docs/javascript/codejar.min.js +8 -0
package/docs/javascript/highlightjs.min.js +1173 -0
package/docs/javascript/isomorphic-git.js +9 -0
package/docs/javascript/json5.min.js +1 -0
package/docs/javascript/lightning-fs.js +1 -0
package/docs/javascript/lightview.js +1285 -0
package/docs/javascript/marked.min.js +6 -0
package/docs/javascript/peerjs.min.js +70 -0
package/docs/javascript/turndown.js +973 -0
package/docs/javascript/types.js +606 -0
package/docs/javascript/utils.js +45 -0
package/docs/lightview.html +63 -0
package/docs/old_index.html +965 -0
package/docs/old_index.md +1132 -0
package/docs/slidein.html +51 -0
package/docs/tutorial/0-getting-started.html +67 -0
package/docs/tutorial/1-intro-to-variables.html +103 -0
package/docs/tutorial/10-template-components.html +80 -0
package/docs/tutorial/11-linked-components.html +76 -0
package/docs/tutorial/12-imported-components.html +67 -0
package/docs/tutorial/13-input-binding.html +94 -0
package/docs/tutorial/14-automatic-variable-creation.html +74 -0
package/docs/tutorial/15-form-binding.html +110 -0
package/docs/tutorial/16-if-directive.html +60 -0
package/docs/tutorial/17-loop-directives.html +83 -0
package/docs/tutorial/18-sanitizing-and-escaping-input.html +79 -0
package/docs/tutorial/2-imported-and-exported-variables.html +80 -0
package/docs/tutorial/3-data-types.html +89 -0
package/docs/tutorial/4-extended-data-types.html +83 -0
package/docs/tutorial/5-extended-functional-types.html +96 -0
package/docs/tutorial/5.1-extended-functional-types.html +79 -0
package/docs/tutorial/5.2-extended-functional-types.html +70 -0
package/docs/tutorial/6-conventional-javascript.html +75 -0
package/docs/tutorial/7-monitoring-with-observers.html +107 -0
package/docs/tutorial/8-event-listeners.html +65 -0
package/docs/tutorial/9-intro-to-components.html +91 -0
package/docs/tutorial/contents.html +32 -0
package/docs/tutorial/my-component.html +29 -0
package/docs/tutorial/remote-value.json +4 -0
package/docs/websiterepl.html +46 -0
package/lightview.js +430 -340
package/lightview.min.js +1 -0
package/lightview_good.js +1267 -0
package/lightview_optimized.js +1274 -0
package/package.json +1 -1
package/repl_hold.html +320 -0
package/test/basic.html +15 -4
package/test/basic.test.mjs +1 -1
package/test/extended.html +1 -1
package/types.js +109 -36
package/components/chart/example.html +0 -32
package/components/chart.html +0 -83
package/components/gantt/example.html +0 -22
package/components/gauge/example.html +0 -28
package/components/gauge.html +0 -60
package/components/orgchart/example.html +0 -25
package/components/repl/code-editor.html +0 -64
package/components/repl/editor.html +0 -37
package/components/repl/editorjs-inline-tool/index.js +0 -3
package/components/repl/editorjs-inline-tool/inline-tools.js +0 -28
package/components/repl/editorjs-inline-tool/tool.js +0 -175
package/components/repl/repl-with-wysiwyg.html +0 -355
package/components/repl/repl.html +0 -345
package/components/repl/sup.js +0 -44
package/components/repl/wysiwyg-repl.html +0 -258
package/components/timeline/example.html +0 -33
package/components/timeline.html +0 -81
package/examples/anchor.html +0 -11
package/examples/sensors/index.html +0 -30
package/examples/todo.html +0 -38
package/examples/top.html +0 -10
package/sites/client.html +0 -48
package/sites/index.html +0 -247

package/docs/components/repl.html ADDED Viewed

@@ -0,0 +1,527 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Lightview:REPL</title>
+    <style>
+        .hljs[slot] { padding: 5px; }
+    </style>
+</head>
+<body>
+<link rel="stylesheet" href="../css/highlightjs.min.css" export>
+<script src="../javascript/lightning-fs.js"></script>
+<script src="../javascript/isomorphic-git.js"></script>
+<script src="../javascript/highlightjs.min.js"></script>
+<script src="../javascript/turndown.js"></script>
+<div id="content" style="flex:auto;min-width:500px;border:1px solid;padding:10px;margin-top:1em;margin-bottom:1em; auto;overflow:auto;font-size:smaller">
+    <div style="display:flex;flex-direction:column;">
+        <div l-if="${!hidetabs}" id="tabs" style="flex-grow:0;width:100%;border:1px;padding-bottom:5px;text-align:center" hidden>
+            <span style="padding-right:10px" for="headhtml"><label for="headhtml" l-on:click="${onTabClick}">HTML Head</label><input for="headhtml" value="${headhtmlPinned}" type="checkbox"  l-on:click="${onPinClick}"></span>
+            <span style="padding-right:10px" for="bodyhtml"><label for="bodyhtml" l-on:click="${onTabClick}">HTML Body</label><input for="bodyhtml" value="${bodyhtmlPinned}" type="checkbox" l-on:click="${onPinClick}"></span>
+            <!--span style="padding-right:10px" for="markdown"><label for="markdown" l-on:click="${onTabClick}">Markdown (Body)</label><input for="markdown" value="${markdownPinned}" type="checkbox" l-on:click="${onPinClick}"></span-->
+            <span style="padding-right:10px" for="css"><label for="css" l-on:click="${onTabClick}">Style</label><input for="css" value="${cssPinned}" type="checkbox" l-on:click="${onPinClick}"></span>
+            <span style="padding-right:10px" for="script"><label for="script" l-on:click="${onTabClick}">Script</label><input for="script" value="${scriptPinned}" type="checkbox" l-on:click="${onPinClick}"></span>
+            <span style="padding-right:10px" for="preview"><label for="preview" l-on:click="${onTabClick}">Preview</label><input for="preview" value="${previewPinned}" type="checkbox" l-on:click="${onPinClick}"></span>
+        </div>
+    </div>
+    <div id="headhtml" style="margin:10px" class="language-html"><slot name="headhtml"></slot></div>
+    <div id="bodyhtml" style="margin:10px" class="language-html"><slot name="bodyhtml"></slot></div>
+    <!--textarea id="markdown" style="margin-right:2px;">${markdown}</textarea-->
+    <div id="css" style="margin:10px" class="language-css"><slot name="css"></slot></div>
+    <div id="script" style="margin:10px" class="language-javascript"><slot name="script"></slot></div>
+    <iframe id="preview" style="height:${previewheight||'150px'};max-width:99%;width:99%;" hidden></iframe>
+</div>
+<div l-if="${editable}" style="width:100%;text-align:center">
+    <div style="padding:5px">${source}</div>
+    <button l-on:click="${doSave}">Save</button>&nbsp;&nbsp;
+    <button l-if="${canReset}" l-on:click="${doReset}">Reset</button>
+</div>
+<style>
+    label:hover {
+        text-decoration: underline
+    }
+    slot[name=headhtml]:not([hidden])::before { content: "<head>" }
+    slot[name=headhtml]:not([hidden])::after { content: "</head>" }
+    slot[name=bodyhtml]:not([hidden])::before { content: "<body${bodyattributes ? ' ' + bodyattributes : ''}>" }
+    slot[name=bodyhtml]:not([hidden])::after { content: "</body>" }
+    slot[name=css]:not([hidden])::before { content: "<style>" }
+    slot[name=css]:not([hidden])::after { content: "< /style>" }
+    slot[name=script]:not([hidden])::before { content: "<script ${scriptattributes}>" }
+    slot[name=script]:not([hidden])::after { content: "</script>" }
+</style>
+<script id="lightview">
+    (document.currentComponent||(document.currentComponent=document.body)).mount = async function() {
+        let CJ
+        try {
+            const {CodeJar} = await import(new URL("../javascript/codejar.min.js", this.componentBaseURI).href);
+            CJ = CodeJar;
+        } catch {
+        }
+        let turndownService;
+        try {
+            turndownService = new TurndownService({
+                headingStyle: "atx",
+                codeBlockStyle: "fenced",
+                emDelimiter: "*"
+            });
+            turndownService.keep(() => true);
+        } catch(e) {
+        }
+        const {html, css, script} = await import(new URL("../javascript/types.js", this.componentBaseURI).href);
+        self.variables({
+            onTabClick: "function",
+            onPinClick: "function",
+            doSave: "function",
+            doReset: "function"
+        });
+        self.variables({
+            wysiwygPinned: "boolean",
+            headhtmlPinned: "boolean",
+            headhtml: html,
+            bodyhtmlPinned: "boolean",
+            bodyhtml: html,
+            bodyattributes:"string",
+            markdownPinned: "boolean",
+            markdown: "string",
+            cssPinned: "boolean",
+            cssText: css,
+            scriptPinned: "boolean",
+            scriptText: script,
+            scriptattributes:"string",
+            source: "string",
+            canReset: "boolean",
+            editable: "boolean"
+        }, {reactive});
+        self.variables({
+            previewPinned: "boolean"
+        },{imported,reactive});
+        self.variables({
+            src: "string",
+            path: "string",
+            hidetabs: "boolean",
+            maintainbody: "boolean",
+            contentbackground:"string",
+            readonly: "boolean",
+            previewheight: "string"
+        }, {imported});
+        bodyhtmlPinned = true;
+        canReset = false;
+        bodyattributes = "";
+        scriptattributes = "";
+        editable = false;
+        const getPath = () => {
+            if(path==="$location" || path==null) return source = window.location.pathname;
+            return source = path;
+        }
+        const trimContent = (text) => {
+            let result = text;
+            if(result[0]==="\n") result = result.substring(1);
+            while(result[result.length-1]==="\n") result = result.substring(0,result.length-1);
+            return result;
+        }
+        const loadFromFile = async () => {
+            const html = await fs.readFile(url.pathname, {encoding: "utf8"});
+            source = `IndexedDB://${url.hostname + "_repl"}${url.pathname}`;
+            return html;
+        };
+        const loadFromServer = async () => {
+            const response = await fetch(url.href);
+            const html = await response.text();
+            source = url.href;
+            return html;
+        };
+        const loadFromTemplate = () => {
+            const templateEl = this.querySelector('[slot="src"]');
+            if(templateEl) {
+                const template = document.createElement("div");
+                template.innerHTML = templateEl.innerHTML;
+                return template;
+            }
+        }
+        const initFromTemplate = (template) => {
+            head_el = document.createElement("head");
+            body_el = document.createElement("body");
+            if(template) {
+                const head = template.querySelector("l-head");
+                if(head) {
+                    headhtml = trimContent(head.innerHTML || "");
+                    [...head.attributes].forEach((attr) => head_el.setAttribute(attr.name,attr.value));
+                } else {
+                    headhtml = "";
+                }
+                style_el = template.querySelector("style");
+                if(style_el) {
+                    cssText = trimContent(style_el.innerText);
+                    style_el.remove();
+                } else {
+                    style_el = document.createElement("style");
+                    cssText = "";
+                }
+                script_el = template.querySelector('script:not([src*="lightview.js"])');
+                if(script_el && script_el.parentElement===template) {
+                    scriptText = trimContent(script_el.innerText);
+                    script_el.remove();
+                } else {
+                    script_el = document.createElement("script");
+                    scriptText = "";
+                }
+                const body = template.querySelector("l-body");
+                if(body) {
+                    bodyhtml = trimContent(body.innerHTML);
+                    [...body.attributes].forEach((attr) => body_el.setAttribute(attr.name,attr.value))
+                } else {
+                    bodyhtml = "";
+                }
+            } else {
+                script_el = document.createElement("script");
+                style_el = document.createElement("style");
+                bodyhtml = "";
+                headhtml = "";
+                scriptText = "";
+                cssText = "";
+            }
+            body_el.appendChild(style_el);
+            body_el.appendChild(script_el);
+            bodyattributes = "";
+            [...body_el.attributes].forEach((attr) => bodyattributes = bodyattributes + " " + attr.name + '=\\"' + attr.value + '\\"');
+            scriptattributes = "";
+            [...script_el.attributes].forEach((attr) => scriptattributes = scriptattributes + " " + attr.name + '=\\"' + attr.value + '\\"');
+        }
+        let head_el,
+            body_el,
+            style_el,
+            script_el;
+        const parseFullHTML = (fullHTML) => {
+            const parser = new DOMParser(),
+                fragment = parser.parseFromString(fullHTML, "text/html");
+                head_el = fragment?.head,
+                body_el = fragment?.body,
+                style_el = fragment?.body.querySelector("style"),
+                script_el = fragment?.body.querySelector("script:not([src])");
+            if(!maintainbody) {
+                if (style_el) {
+                    cssText = trimContent(style_el?.innerHTML);
+                    style_el.remove();
+                } else {
+                    cssText = "";
+                }
+                if (script_el) {
+                    scriptText = trimContent(script_el?.innerHTML);
+                    script_el.remove();
+                } else {
+                    scriptText = "";
+                }
+            }
+            headhtml = trimContent(head_el?.innerHTML || "");
+            bodyhtml = trimContent(body_el?.innerHTML);
+            if(style_el && body_el) body_el.appendChild(style_el);
+            if(script_el && body_el) body_el.appendChild(script_el);
+        };
+        let fs,
+            url;
+        if (src) {
+            url = new URL(src,document.baseURI); // , document.baseURI
+            if(typeof(LightningFS)!=="undefined") {
+                fs = new LightningFS(url.hostname + "_repl").promises;
+            }
+            try {
+                parseFullHTML(await loadFromFile());
+                canReset = true;
+            } catch (e) {
+                try {
+                    parseFullHTML(await loadFromServer());
+                } catch (e) {
+                    fullHTML = e.message;
+                }
+            }
+        } else {
+            url = new URL(getPath(),document.baseURI);
+            if(typeof(LightningFS)!=="undefined") {
+                fs = new LightningFS(url.hostname + "_repl").promises;
+            }
+            try {
+                parseFullHTML(await loadFromFile());
+                canReset = true;
+            } catch (e) {
+                initFromTemplate(loadFromTemplate());
+            }
+        };
+        // initialize variables
+        markdown = "";
+        const tabs = [...self.querySelectorAll("span[for]")]
+            .map((span) => {
+                const id = span.getAttribute("for");
+                if(id==="preview") {
+                    const el = self.getElementById(id);
+                    if(previewPinned) el.removeAttribute("hidden");
+                    return [id, el];
+                }
+                const slot = self.querySelector(`[slot="${id}"]`);
+                if(slot) {
+                    if(slot.hasAttribute("hidden")) self.querySelector(`slot[name="${id}"]`)?.setAttribute("hidden","");
+                    else {
+                        self.varsProxy[`${id}Pinned`] = true;
+                        self.querySelector(`slot[name="${id}"]`)?.setAttribute("checked","");
+                    }
+                } else {
+                    self.querySelector(`slot[name="${id}"]`)?.setAttribute("hidden","");
+                    span.style.display = "none";
+                }
+                return [id, slot];
+            }).filter(([id, slot]) => slot!=null);
+        const showTab = (targetid) => {
+            tabs.forEach(([id, el, label]) => {
+                if (id === targetid || self.varsProxy[`${id}Pinned`]) {
+                    el.removeAttribute("hidden");
+                    self.querySelector(`slot[name="${id}"]`)?.removeAttribute("hidden");
+                } else if (!self.varsProxy[`${id}Pinned`]) {
+                    el.setAttribute("hidden","");
+                    self.querySelector(`slot[name="${id}"]`)?.setAttribute("hidden","");
+                }
+            });
+        };
+        const hideTab = (targetid) => {
+            tabs.forEach(([id, el, label]) => {
+                if (id === targetid) {
+                    el.setAttribute("hidden","");
+                    self.querySelector(`slot[name="${id}"]`)?.setAttribute("hidden","");
+                }
+            });
+        };
+        const replaceEntities = (el) => {
+            [...el.childNodes].forEach((node) => {
+                if(node.nodeType===Node.TEXT_NODE) {
+                    if(["&lt;","&gt;","&amp;"].some((entity) => node.data.includes(entity))) {
+                        node.data = node.data.replaceAll(/&lt;/g,"<")
+                            .replaceAll(/&gt;/g,">")
+                            .replaceAll(/&amp;/g,"&");
+                    }
+                } else if(node.nodeType===Node.ELEMENT_NODE) {
+                    replaceEntities(node);
+                }
+            })
+        };
+        onTabClick = (event) => {
+            showTab(event.target.getAttribute("for"))
+        }
+        onPinClick = (event) => {
+            const id = event.target.getAttribute("for"),
+                checked = self.varsProxy[`${id}Pinned`] = event.target.checked;
+            if (checked) onTabClick(event);
+            else hideTab(id);
+        };
+        doSave = async () => {
+            const parts = url.pathname.split("/");
+            let dir = "";
+            parts.shift();
+            parts.pop();
+            for (const part of parts) {
+                dir = dir + "/" + part;
+                try {
+                    await fs.mkdir(dir);
+                } catch (e) {
+                    if (e.message === "EEXIST") continue;
+                    throw e;
+                }
+            }
+            await fs.writeFile(url.pathname, doPreview(), {encoding: "utf8"}, () => {
+            });
+            source = `IndexedDB://${url.hostname + "_repl"}${url.pathname}`;
+            canReset = true;
+        };
+        doReset = async () => {
+            originalHTML = null;
+            try {
+                await fs.unlink(url.pathname);
+            } catch (e) {
+            }
+            if (src) {
+                try {
+                    parseFullHTML(await loadFromServer());
+                    source = url.href;
+                    createEditor();
+                } catch (e) {
+                    previewEl.innerHTML = fullHTML = e.message;
+                }
+            } else {
+                try {
+                    initFromTemplate(loadFromTemplate());
+                    source = getPath();
+                    createEditor();
+                } catch (e) {
+                    previewEl.innerHTML = fullHTML = e.message;
+                }
+            }
+            canReset = false;
+        };
+        const content = self.getElementById("content");
+        let originalHTML;
+        const doPreview = () => {
+            head_el.innerHTML = `<base href=\"${document.baseURI}\"></base>` + trimContent(headhtml); //
+            body_el.innerHTML = trimContent(bodyhtml);
+            if(!maintainbody) {
+                style_el.innerText = trimContent(cssText);
+                script_el.innerHTML = "currentComponent ||= document.body;" + trimContent(scriptText);
+                body_el.appendChild(style_el);
+                body_el.appendChild(script_el);
+                style_el.innerText = style_el.innerText.replaceAll(/<br>/g,"\n");
+            }
+            const str = "<html>" + head_el.outerHTML + body_el.outerHTML + "</html>",
+                blob = new Blob([str], {type : 'text/html'}),
+                newurl = window.URL.createObjectURL(blob);
+            if(originalHTML) canReset = originalHTML!=str;
+            else originalHTML = str;
+            previewEl.src = newurl;
+            content.style.minWidth = self.style.minWidth;
+            content.style.maxWidth = self.style.maxWidth;
+            //content.style.width = tabs.reduce((min,tab) => Math.max(min,tab[1].clientWidth),0)+"px";
+            return str;
+        };
+        const tabsEl = self.getElementById("tabs"),
+            headhtmlEl = self.querySelector('[slot="headhtml"]'),
+            bodyhtmlEl = self.querySelector('[slot="bodyhtml"]'),
+            markdownEl = self.getElementById("markdown"),
+            cssEl = self.querySelector('[slot="css"]'),
+            scriptEl = self.querySelector('[slot="script"]'),
+            previewEl = self.getElementById("preview");
+        const highlight = (el,...args) => {
+            hljs.highlightElement(el,...args);
+        }
+        const setCode = (el,code,language) => {
+            const pre = document.createElement("pre"),
+                div = document.createElement("div");
+            pre.style.margin = "5px";
+            div.className = `language-${language}`;
+            div.innerText = trimContent(code).replaceAll(/\n/g,"|newline|");
+            hljs.highlightElement(div);
+            pre.innerHTML = div.innerHTML.replaceAll(/\|newline\|/g,"\n");
+            while(el.lastChild) el.lastChild.remove();
+            replaceEntities(el);
+            el.append(pre);
+        }
+        if(headhtmlEl) {
+            headhtmlEl.className = "language-html";
+            if(headhtmlEl.hasAttribute("readonly") || readonly) {
+                setCode(headhtmlEl,headhtml,"html");
+            } else {
+                editable = true;
+                const bodyJar = CJ(headhtmlEl, highlight);
+                bodyJar.updateCode(headhtml);
+                replaceEntities(headhtmlEl);
+                bodyJar.onUpdate(code => {
+                    replaceEntities(headhtmlEl);
+                    headhtml = code;
+                    doPreview();
+                })
+            }
+        }
+        const createEditor = () => {
+            if (bodyhtmlEl) {
+                bodyhtmlEl.className = "language-html";
+                if (bodyhtmlEl.hasAttribute("readonly") || readonly) {
+                    setCode(bodyhtmlEl, bodyhtml, "html");
+                } else {
+                    editable = true;
+                    const bodyJar = CJ(bodyhtmlEl, highlight);
+                    bodyJar.updateCode(bodyhtml);
+                    replaceEntities(bodyhtmlEl);
+                    bodyJar.onUpdate(code => {
+                        replaceEntities(bodyhtmlEl);
+                        bodyhtml = code;
+                        doPreview();
+                    });
+                }
+            }
+            if (cssEl) {
+                cssEl.className = "language-css";
+                if (cssEl.hasAttribute("readonly") || readonly) {
+                    setCode(cssEl, cssText, "css");
+                    //cssEl.innerText = cssText;
+                } else {
+                    editable = true;
+                    const bodyJar = CJ(cssEl, highlight);
+                    bodyJar.updateCode(cssText);
+                    bodyJar.onUpdate(code => {
+                        cssText = code;
+                        doPreview();
+                    });
+                }
+            }
+            if (scriptEl) {
+                scriptEl.className = "language-javascript";
+                if (scriptEl.hasAttribute("readonly") || readonly) {
+                    setCode(scriptEl, scriptText, "javascript");
+                    //scriptEl.innerText = scriptText;
+                } else {
+                    editable = true;
+                    const bodyJar = CJ(scriptEl, highlight);
+                    bodyJar.updateCode(scriptText);
+                    replaceEntities(scriptEl);
+                    bodyJar.onUpdate(code => {
+                        replaceEntities(scriptEl);
+                        scriptText = code;
+                        doPreview();
+                    });
+                }
+            }
+            doPreview();
+        }
+        /*let prevmarkdown; // prevents indirect recursion
+        observe(() => {
+            const text = turndownService.turndown(bodyhtml).trim();
+            if (text && text !== prevtext) {
+                markdown = markdownEl.innerHTML = prevmarkdown = text;
+            }
+        });
+        let prevbodyhtml; // prevents indirect recursion
+        observe(() => {
+            const html = marked.parse(markdown).trim();
+            if (html && html !== prevbodyhtml) {
+                bodyhtml = bodyhtmlEl.innerText = prevbodyhtml = html;
+            }
+        });*/
+        self.addEventListener("mounted", () => {
+            tabsEl.removeAttribute("hidden");
+            if(contentbackground) content.style.background = contentbackground;
+            createEditor();
+        });
+    }
+</script>
+</body>
+</html>

package/docs/components/timeline-repl.html ADDED Viewed

@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Lightview:Components:Timeline</title>
+    <link href="../css/tutorial.css" rel="stylesheet">
+    <link href="../slidein.html" rel="module">
+    <link href="repl.html" rel="module">
+    <script src="../javascript/highlightjs.min.js"></script>
+    <script src="../javascript/marked.min.js"></script>
+    <script src="../javascript/utils.js"></script>
+</head>
+<body class="tutorial-body">
+<script src="../javascript/lightview.js"></script>
+<div class="tutorial-instructions">
+    <l-slidein src="./contents.html" class="toc"></l-slidein>
+    <div class="markdown">
+## Timeline
+    </div>
+    <button class="nav-previous"><a href="orgchart-repl.html" target="content">Previous</a></button>
+    <button class="nav-next"><a href="gauge-repl.html" target="content">Next</a></button>
+</div>
+<div class="repl">
+    <h2></h2>
+    <l-repl id="repl" style="min-height:95vh;min-width:600px;" previewpinned path="$location" previewheight="400px">
+        <div slot="headhtml"></div>
+        <div slot="bodyhtml"></div>
+        <div slot="script"></div>
+        <template slot="src">
+<l-head>
+    <link href="./timeline.html" rel="module">
+    <script src="../javascript/lightview.js"></script>
+</l-head>
+<l-body>
+    <l-timeline title="Presidents">
+        {
+            options: { showRowLabels: false },
+            rows: [
+                [ '1', 'George Washington','1789-03-30', '1797-2-04' ],
+                [ '2', 'John Adams',        '1797-02-04',  '1801-02-04' ],
+                [ '3', 'Thomas Jefferson',  '1801-02-04',  '1809-02-04']
+            ]
+        }
+    </l-timeline>
+    <l-timeline title="Presidents and Vice Presidents">
+        {
+            options: {  },
+            rows: [
+                [ 'President', 'George Washington','1789-03-30', '1797-2-04' ],
+                [ 'President', 'John Adams',        '1797-02-04',  '1801-02-04' ],
+                [ 'President', 'Thomas Jefferson',  '1801-02-04',  '1809-02-04'],
+                [ 'Vice President', 'John Adams','1789-03-21', '1797-02-04'],
+                [ 'Vice President', 'Thomas Jefferson','1797-02-04', '1801-02-04'],
+                [ 'Vice President', 'Aaron Burr','1801-02-04', '1805-02-04']
+            ]
+        }
+    </l-timeline>
+</l-body>
+<script>
+</script>
+        </template>
+    </l-repl>
+</div>
+<script>
+   processMarkdown();
+</script>
+</body>
+</html>

package/{components/timeline → docs/components}/timeline.html RENAMED Viewed

@@ -2,13 +2,13 @@
 <html>
 <head>
     <title>Lightview:Component:Timeline</title>
+    <script src="../javascript/json5.min.js"></script>
 </head>
 <body>
 <div id="target"></div>
-<script src="https://unpkg.com/json5@^2.0.0/dist/index.min.js"></script>
 <script id="lightview">
     (document.currentComponent||(document.currentComponent=document.body)).mount = async function() {
-        const {chart} = await import(new URL("../components.js", window.location.href).href);
+        const {chart} = await import(new URL("./components.js", this.componentBaseURI).href);
         chart(self, {
             packages: ["timeline"],
             columns: [

package/docs/components.html ADDED Viewed

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Lightview: Components</title>
+</head>
+<body>
+<h2>Chart Components</h2>
+<ul>
+    <li><a href="./components/chart/repl.html">Bar, Pie, Column</a></li>
+    <li><a href="./components/gantt/example.html">Gannt</a></li>
+</ul>
+</body>
+</html>

package/docs/css/highlightjs.min.css ADDED Viewed

@@ -0,0 +1,9 @@
+/*!
+  Theme: Default
+  Description: Original highlight.js style
+  Author: (c) Ivan Sagalaev <maniac@softwaremaniacs.org>
+  Maintainer: @highlightjs/core-team
+  Website: https://highlightjs.org/
+  License: see project LICENSE
+  Touched: 2021
+*/pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{background:#f3f3f3;color:#444}.hljs-comment{color:#697070}.hljs-punctuation,.hljs-tag{color:#444a}.hljs-tag .hljs-attr,.hljs-tag .hljs-name{color:#444}.hljs-attribute,.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-name,.hljs-selector-tag{font-weight:700}.hljs-deletion,.hljs-number,.hljs-quote,.hljs-selector-class,.hljs-selector-id,.hljs-string,.hljs-template-tag,.hljs-type{color:#800}.hljs-section,.hljs-title{color:#800;font-weight:700}.hljs-link,.hljs-operator,.hljs-regexp,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-symbol,.hljs-template-variable,.hljs-variable{color:#ab5656}.hljs-literal{color:#695}.hljs-addition,.hljs-built_in,.hljs-bullet,.hljs-code{color:#397300}.hljs-meta{color:#1f7199}.hljs-meta .hljs-string{color:#38a}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}

package/docs/css/tutorial.css ADDED Viewed

@@ -0,0 +1,35 @@
+.toc {
+    position:fixed;
+    background:white;
+    overflow-y:hidden;
+    overflow-x:hidden;
+    border:1px solid;
+    margin-right:5px;
+    margin-left: 0px;
+    height:100%;
+    min-width:10px;
+    max-width:250px;
+    top:0px;
+    bottom:0px;
+}
+.markdown {
+    margin-left:20px
+}
+.tutorial-body {
+    display:flex;
+    margin: 0px;
+    overflow: auto;
+}
+.tutorial-instructions {
+    margin-right:10px;
+    min-width: 500px
+}
+.nav-previous {
+    float:left;
+    margin-left:20px
+}
+.nav-next {
+    float:right;
+}