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

lightview 1.7.2-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 (122) 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/docs/components/chart.html +17 -0
package/{components → docs/components}/components.js +31 -11
package/docs/components/contents.html +17 -0
package/docs/components/gantt-repl.html +61 -0
package/docs/components/gantt.html +42 -0
package/docs/components/gauge-repl.html +66 -0
package/docs/components/gauge.html +20 -0
package/docs/components/orgchart-repl.html +64 -0
package/docs/components/orgchart.html +41 -0
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/docs/components/timeline.html +44 -0
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/{components/chart/example.html → docs/examples/chart.html} +6 -4
package/docs/examples/counter.html +26 -0
package/{examples → docs/examples}/counter.test.mjs +0 -0
package/docs/examples/counter2.html +26 -0
package/{examples → docs/examples}/directives.html +20 -18
package/{examples → docs/examples}/foreign.html +1 -1
package/docs/examples/forgeinform.html +98 -0
package/docs/examples/form.html +61 -0
package/{examples → docs/examples}/gauge.html +4 -2
package/{examples → docs/examples}/invalid-template-literals.html +6 -4
package/{examples → docs/examples}/medium/remote.html +1 -1
package/docs/examples/message.html +18 -0
package/{examples → docs/examples}/nested.html +2 -2
package/docs/examples/object-bound-form.html +34 -0
package/{examples → docs/examples}/remote-server.js +0 -0
package/docs/examples/remote.html +34 -0
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/docs/examples/shared.html +41 -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 +22 -20
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 +499 -363
package/lightview.min.js +1 -0
package/lightview_good.js +1267 -0
package/lightview_optimized.js +1274 -0
package/package.json +7 -2
package/repl_hold.html +320 -0
package/test/basic.html +29 -17
package/test/basic.test.mjs +1 -11
package/test/extended.html +16 -19
package/types.js +118 -36
package/unsplash.key +1 -0
package/components/chart/chart.html +0 -15
package/components/chart.html +0 -81
package/components/gantt/example.html +0 -27
package/components/gantt/gantt.html +0 -34
package/components/gauge/example.html +0 -28
package/components/gauge/guage.html +0 -19
package/components/gauge.html +0 -57
package/components/timeline.html +0 -81
package/examples/chart.html +0 -66
package/examples/counter.html +0 -24
package/examples/forgeinform.html +0 -96
package/examples/form.html +0 -59
package/examples/message.html +0 -12
package/examples/object-bound-form.html +0 -32
package/examples/remote.html +0 -32
package/examples/sensors/index.html +0 -30
package/examples/todo.html +0 -38
package/examples/top.html +0 -10

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "lightview",
-  "version": "1.7.2b",
+  "version": "1.8.2",
   "description": "Small, simple, powerful web UI and micro front end creation ... Great ideas from Svelte, React, Vue and Riot combined.",
   "main": "lightview.js",
   "scripts": {
@@ -28,9 +28,14 @@
   "bugs": {
     "url": "https://github.com/anywhichway/lightview/issues"
   },
-  "homepage": "https://github.com/anywhichway/lightview#readme",
+  "homepage": "https://lightview.dev",
   "devDependencies": {
+    "@editorjs/editorjs": "^2.16.0",
+    "editorjs-inline-tool": "^0.4.0",
     "jest": "^27.5.1",
     "jest-puppeteer": "^6.1.0"
+  },
+  "dependencies": {
+    "froala-editor": "^4.0.11"
   }
 }

package/repl_hold.html ADDED Viewed

@@ -0,0 +1,320 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Lightview:REPL</title>
+        </head>
+<body>
+<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/default.min.css">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+<div id="content" style="flex:auto;min-height:100%;width:750px;max-width:750px;height:100%;border:1px solid;padding:10px;margin:0 auto">
+    <div style="display:flex;flex-direction:column;">
+        <div id="tabs" style="flex-grow:0;width:100%;border:1px;padding-bottom:5px;text-align:center">
+            <span style="padding-right:10px"><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"><label for="bodyhtml" l-on:click="${onTabClick}">HTML Body</label><input for="bodyhtml" value="${bodyhtmlPinned}" type="checkbox" l-on:click="${onPinClick}" checked></span>
+            <!--span style="padding-right:10px"><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"><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"><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"><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="display:none;margin:10px" class="language-html">&lt;head&gt;<slot name="head"></slot>&lt;/head&gt;</div>
+    <div id="bodyhtml" style="margin:10px" class="language-html">&lt;body&gt;<slot name="body"></slot>&lt;/body&gt;</div>
+    <!--textarea id="markdown" style="margin-right:2px;display:none">${markdown}</textarea-->
+    <div id="css" style="display:none;margin:10px" class="language-css">&lt;style&gt;<slot name="css"></slot>&lt;/style&gt;</div>
+    <div id="script" style="display:none;margin:10px" class="language-javascript">&lt;script&gt;<slot name="script"></slot>&lt;/script&gt;</div>
+    <iframe id="preview" style="max-width:99%;width:99%;margin:10px;display:none" src="./blank.html"></iframe>
+</div>
+<div style="width:100%;text-align:center">
+    <div style="padding:5px">${source}</div>
+    <button l-on:click="${doSave}">Save</button>&nbsp;&nbsp;
+    <button l-if="${!source.trim().startsWith('http')}" l-on:click="${doReset}">Reset</button>
+</div>
+<style id="style">
+    label:hover {
+        text-decoration: underline
+    }
+</style>
+<script id="lightview">
+    (document.currentComponent||(document.currentComponent=document.body)).mount = async function() {
+        const {CodeJar} = await import("https://cdn.jsdelivr.net/npm/codejar@3.6.0/codejar.min.js");
+        const turndownService = new TurndownService({
+            headingStyle: "atx",
+            codeBlockStyle: "fenced",
+            emDelimiter: "*"
+        });
+        turndownService.keep(() => true);
+        const {html, css, script} = await import("../types.js");
+        self.variables({
+            onTabClick: "function",
+            onPinClick: "function",
+            doSave: "function",
+            doReset: "function"
+        });
+        self.variables({
+            wysiwygPinned: "boolean",
+            bodyhtmlPinned: "boolean",
+            bodyhtml: html,
+            markdownPinned: "boolean",
+            markdown: "string",
+            cssPinned: "boolean",
+            cssText: css,
+            scriptPinned: "boolean",
+            scriptText: script,
+            headhtmlPinned: "boolean",
+            headhtml: html,
+            previewPinned: "boolean",
+            source: "string",
+        }, {reactive});
+        self.variables({
+            src: "string",
+        }, {imported});
+        bodyhtmlPinned = true;
+        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 parseFullHTML = (fullHTML) => {
+            const parser = new DOMParser(),
+                fragment = parser.parseFromString(fullHTML, "text/html"),
+                body_el = fragment?.querySelector("body"),
+                style_el = fragment?.querySelector("style"),
+                script_el = body_el?.querySelector("script");
+            if (style_el) {
+                cssText = style_el?.innerHTML.trim();
+                style_el.remove();
+            } else {
+                cssText = "";
+            }
+            if (script_el) {
+                scriptText = script_el?.innerHTML.trim(),
+                    script_el.remove();
+            } else {
+                scriptText = "";
+            }
+            headhtml = (fragment?.head.innerHTML || "").trim();
+            bodyhtml = body_el?.innerHTML.trim();
+        };
+        let fs,
+            url;
+        if (src) {
+            url = new URL(src, window.location.href);
+            fs = new LightningFS(url.hostname + "_repl").promises;
+            try {
+                parseFullHTML(await loadFromFile());
+            } catch (e) {
+                try {
+                    parseFullHTML(await loadFromServer());
+                } catch (e) {
+                    fullHTML = e.message;
+                }
+            }
+        } else {
+            url = new URL(window.location.href);
+            fs = new LightningFS(url.hostname + "_repl").promises;
+            bodyhtml = "";
+            headhtml = "";
+            scriptText = "";
+            cssText = "";
+        }
+        ;
+        // initialize variables
+        markdown = "";
+        const tabs = [...self.querySelectorAll("label[for]")]
+            .map((label) => {
+                const id = label.getAttribute("for");
+                return [id, self.getElementById(id), label];
+            });
+        const showTab = (targetid) => {
+            tabs.forEach(([id, el, label]) => {
+                if (id === targetid || self.varsProxy[`${id}Pinned`]) {
+                    el.style.display = "block";
+                } else if (!self.varsProxy[`${id}Pinned`]) {
+                    el.style.display = "none";
+                }
+            });
+        };
+        const hideTab = (targetid) => {
+            tabs.forEach(([id, el, label]) => {
+                if (id === targetid) el.style.display = "none";
+            });
+        };
+        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") break;
+                    throw e;
+                }
+            }
+            fs.writeFile(url.pathname, doPreview(), {encoding: "utf8"}, () => {
+            });
+            source = `IndexedDB://${url.hostname + "_repl"}${url.pathname}`;
+        };
+        doReset = async () => {
+            try {
+                await fs.unlink(url.pathname);
+            } catch (e) {
+            }
+            if (src) {
+                try {
+                    parseFullHTML(await loadFromServer());
+                    doPreview();
+                } catch (e) {
+                    previewEl.innerHTML = fullHTML = e.message;
+                }
+            } else {
+                bodyhtml = "";
+                headhtml = "";
+                scriptText = "";
+                cssText = "";
+                previewEl.innerHTML = "";
+            }
+        };
+        const doPreview = () => {
+            // not quite write, createComponent needs to be reworked to handle a head and import its links
+            /*const template = document.createElement("template");
+            template.innerHTML = bodyhtml +
+                "<style>" + cssText + "</style>" +
+                '<script id="lightview">' + scriptText + "<" + "/script>";
+            const component = window.customElements.get("x-preview");
+            if (component) {
+                component.setTemplateNode(template);
+            } else {
+                Lightview.createComponent("x-preview", template);
+            }
+            previewEl.innerHTML = "<x-preview></x-preview>";
+            return "<html><head>" + headhtml + "</head><body>" + template.innerHTML + "<body></html>"*/
+            const str =
+                    "<html>" +
+                    "<head>" + headhtml.replace("./lightview.js",new URL("./lightview.js",window.location.href).href) +" </head>" +
+                    "<body>" + bodyhtml +
+                    "<style>" + cssText + "</style>" +
+                    '<script id="lightview">debugger;' + scriptText + "<" + "/script>" +
+                    "</body>" +
+                    "</html>",
+                blob = new Blob([str], {type : 'text/html'}),
+                newurl = window.URL.createObjectURL(blob);
+            previewEl.src = newurl;
+        };
+        const tabsEl = self.getElementById("tabs"),
+            headhtmlEl = document.body.querySelector('[slot="head"]'),
+            bodyhtmlEl = document.body.querySelector('[slot="body"]'),
+            markdownEl = self.getElementById("markdown"),
+            cssEl = document.body.querySelector('[slot="css"]'),
+            scriptEl = document.body.querySelector('[slot="script"]'),
+            previewEl = self.getElementById("preview");
+        const highlight = (el,...args) => {
+            hljs.highlightElement(el,...args);
+        }
+        if(headhtmlEl) {
+            headhtmlEl.className = "language-html";
+            const bodyJar = CodeJar(headhtmlEl, highlight);
+            bodyJar.updateCode(headhtml);
+            bodyJar.onUpdate(code => {
+                headhtml = code;
+                doPreview();
+            })
+        }
+        if(bodyhtmlEl) {
+            bodyhtmlEl.className = "language-html";
+            const bodyJar = CodeJar(bodyhtmlEl, highlight);
+            bodyJar.updateCode(bodyhtml);
+            bodyJar.onUpdate(code => {
+                bodyhtml = code;
+                doPreview();
+            })
+        }
+        if(cssEl) {
+            cssEl.className = "language-css";
+            const bodyJar = CodeJar(cssEl, highlight);
+            bodyJar.updateCode(cssText);
+            bodyJar.onUpdate(code => {
+                cssText = code;
+                doPreview();
+            })
+        }
+        if(scriptEl) {
+            scriptEl.className = "language-javascript";
+            const bodyJar = CodeJar(scriptEl, highlight);
+            bodyJar.updateCode(scriptText);
+            bodyJar.onUpdate(code => {
+                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;
+            }
+        });*/
+        const initEditor = () => {
+        };
+        self.addEventListener("mounted", () => {
+            initEditor();
+            doPreview();
+        });
+    }
+</script>
+</body>
+</html>

package/test/basic.html CHANGED Viewed

@@ -5,10 +5,11 @@
     <title>Basic</title>
     <template id="x-test" name="joe" open="true" count=1 children='["mary"]' l-on:click="${bump}">
-        <span id="children">${children}</span>
+        <input id="iuntyped" value="${iuntyped}">
         <input id="idatetime" type="datetime" value="${idatetime}">
+        <span id="children">${children}</span>
         <span id="name">${name}</span>
         <span id="open">${open}</span>
         <span id="count">${count}</span>
@@ -18,7 +19,7 @@
         <span id="age">${age}</span>
         <span id="hamburger">${hamburger}</span>
-        <input id="iuntyped" value="${iuntyped}">
         <input id="itext" type="text" value="${itext}">
         <input id="itel" type="tel" value="${itel}">
         <input id="iemail" type="email" value="${iemail}">
@@ -32,16 +33,26 @@
         <input id="inumber" type="number" value="${inumber}">
         <input id="irange" type="range" value="${irange}">
         <input id="icheckbox" type="checkbox" value="${icheckbox}">
-        <script type="lightview/module">
-       // debugger;
-            self.variables({name:"string",open:"boolean",count:"number",children:Array},{imported,reactive});
-            self.variables({color:"string",checked:"boolean",age:"number",hamburger:Array},{exported,reactive});
-            self.variables({counter:"number"},{reactive});
-            self.variables({myshare:"number"},{shared});
+    </template>
+    <script>
+        document.getElementById("x-test").mount = async (self) => {
+            // debugger;
+            self.variables(
+                {
+                    shared:"function"
+                },
+                {
+                    constant: (await import("../types.js")).shared
+                }
+            );
+            self.variables({name: "string", open: "boolean", count: "number", children: Array}, {imported, reactive});
+            self.variables({color: "string", checked: "boolean", age: "number", hamburger: Array}, {
+                exported,
+                reactive
+            });
+            self.variables({counter: "number"}, {reactive});
+            self.variables({myshare: "number"}, {shared});
             color = "green";
             checked = true;
@@ -50,7 +61,8 @@
             counter = 0;
             myshare = 1;
-            self.addEventListener("connected", ({target}) => {
+            self.addEventListener("mounted", ({target}) => {
+                debugger;
                 iuntyped = "test";
                 itext = "test";
                 itel = "test";
@@ -63,7 +75,6 @@
                 inumber = 1;
                 irange = 1;
                 idatetime = new Date();
                 icheckbox = true;
@@ -74,13 +85,14 @@
                 counter++;
             };
-            addEventListener("change",({variableName,value}) => {
+            addEventListener("change", ({variableName, value}) => {
                 self[variableName] = value;
             });
-        </script>
-    </template>
+        }
+    </script>
     <script src="../lightview.js"></script>
     <script>
+        Lightview.createInputVariables = true;
         Lightview.createComponent("x-test",document.getElementById("x-test"));
     </script>
 </head>

package/test/basic.test.mjs CHANGED Viewed

@@ -1,15 +1,5 @@
 import 'expect-puppeteer';
-describe('Google', () => {
-    beforeAll(async () => {
-        await page.goto('https://google.com');
-    });
-    test('should be titled "Google"', async () => {
-        await expect(page.title()).resolves.toMatch('Google');
-    });
-});
 describe('Lightview - Variables', () => {
     beforeAll(async () => {
         await page.goto('http://localhost:8080/test/basic.html');
@@ -174,7 +164,7 @@ describe('Lightview - Variables', () => {
     });
     test('untyped input - iuntyped should be "test"', async () => {
-        const result = await page.evaluate(async () => {
+        const result = await page.evaluate(() => {
             const el = document.getElementById("test"),
                 result = el.getElementById("iuntyped")
             return result.getAttribute("value");

package/test/extended.html CHANGED Viewed

@@ -6,27 +6,24 @@
     <script src="../lightview.js?as=x-body"></script>
 </head>
 <body>
-<script type="lightview/module">
-const {array,boolean,number,object,string} = await import("../types.js");
+<script>
+    document.body.mount = async (self) => {
+        const {array,boolean,number,object,string} = await import("../types.js");
-self.variables({strictarray:array},{set:[]});
-self.variables({strictboolean:boolean},{set:true});
-self.variables({strictnumber:number},{set:0});
-self.variables({strictobject:object},{set:{}});
-self.variables({strictstring:string},{set:"test"});
-self.variables({extendedarray:array({required:true,minlength:2,maxlength:3})});
-self.variables({extendedboolean:boolean({required:true})});
-self.variables({extendednumber:number({required:true,min:1,max:4,step:2,allowNaN:false})});
-self.variables({extendedobject:object({required:true})});
-self.variables({extendedstring:string({required:true,minlength:2,maxlength:4})});
-self.variables({allowNaNnumber:number({min:null,max:null,step:null})});
-self.variables({noNaNnumber:number({allowNaN:false})});
-//debugger;
-//self.setVariableValue("extendedarray",[]);
-//console.log(typeof(extendedarray),extendedarray);
+        self.variables({strictarray:array},{set:[]});
+        self.variables({strictboolean:boolean},{set:true});
+        self.variables({strictnumber:number},{set:0});
+        self.variables({strictobject:object},{set:{}});
+        self.variables({strictstring:string},{set:"test"});
+        self.variables({extendedarray:array({required:true,minlength:2,maxlength:3})});
+        self.variables({extendedboolean:boolean({required:true})});
+        self.variables({extendednumber:number({required:true,min:1,max:4,step:2,allowNaN:false})});
+        self.variables({extendedobject:object({required:true})});
+        self.variables({extendedstring:string({required:true,minlength:2,maxlength:4})});
+        self.variables({allowNaNnumber:number({min:null,max:null,step:null})});
+        self.variables({noNaNnumber:number({allowNaN:false})});
+    }
 </script>
 </body>
 </html>