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

lightview 1.7.1-b → 1.8.1-b

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 (49) hide show

package/README.md +2 -2
package/components/chart/chart.html +7 -5
package/components/chart/example.html +3 -5
package/components/chart.html +67 -65
package/components/components.js +29 -9
package/components/gantt/example.html +2 -7
package/components/gantt/gantt.html +33 -26
package/components/gauge/example.html +1 -1
package/components/gauge/gauge.html +20 -0
package/components/gauge.html +47 -44
package/components/orgchart/example.html +25 -0
package/components/orgchart/orgchart.html +41 -0
package/components/repl/code-editor.html +64 -0
package/components/repl/editor.html +37 -0
package/components/repl/editorjs-inline-tool/index.js +3 -0
package/components/repl/editorjs-inline-tool/inline-tools.js +28 -0
package/components/repl/editorjs-inline-tool/tool.js +175 -0
package/components/repl/repl-with-wysiwyg.html +355 -0
package/components/repl/repl.html +345 -0
package/components/repl/sup.js +44 -0
package/components/repl/wysiwyg-repl.html +258 -0
package/components/timeline/example.html +33 -0
package/components/timeline/timeline.html +44 -0
package/examples/anchor.html +11 -0
package/examples/chart.html +22 -54
package/examples/counter.html +5 -3
package/examples/counter2.html +26 -0
package/examples/directives.html +19 -17
package/examples/forgeinform.html +45 -43
package/examples/form.html +22 -20
package/examples/gauge.html +2 -0
package/examples/invalid-template-literals.html +5 -3
package/examples/message.html +10 -4
package/examples/nested.html +1 -1
package/examples/object-bound-form.html +12 -10
package/examples/remote.html +17 -15
package/examples/shared.html +41 -0
package/examples/xor.html +21 -19
package/lightview.js +138 -90
package/package.json +7 -2
package/sites/client.html +48 -0
package/sites/index.html +247 -0
package/test/basic.html +17 -16
package/test/basic.test.mjs +0 -10
package/test/extended.html +17 -20
package/types.js +10 -1
package/unsplash.key +1 -0
package/components/gauge/guage.html +0 -19
package/examples/duration.html +0 -279

package/sites/index.html ADDED Viewed

@@ -0,0 +1,247 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Lightview:Sites</title>
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <script src="https://unpkg.com/turndown/dist/turndown.js"></script>
+    <script src="https://cdn.tiny.cloud/1/y2ts772rioh7s7bmlcosnef03zs6kpedu5ovw1sdfzslurej/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
+    <script src="https://unpkg.com/@isomorphic-git/lightning-fs"></script>
+    <script src="https://unpkg.com/isomorphic-git"></script>
+    <script src="https://unpkg.com/peerjs@1.3.2/dist/peerjs.min.js"></script>
+    <script type="module">
+        const fs = new LightningFS('my-app');
+        const files = await git.listFiles({ fs, dir: '/' });
+        console.log(files);
+        window.fs = fs.promises;
+    </script>
+    <script>
+        var server = new Peer("anywhichway1");
+        // on open will be launch when you successfully connect to PeerServer
+        server.on('open', (id) => {
+            console.log(id);
+        });
+        server.on("connection",(conn) => {
+            conn.on('data', async (data) => {
+                console.log('Received', data);
+                let content = await fs.readFile("/test.html",{encoding:"utf8"});
+                const client = server.connect(conn.peer);
+                client.on("open",() => {
+                    content += `<p>${new Date().toISOString()}</p>`
+                    client.send(content);
+                });
+            });
+            //const client = server.connect(conn.peer);
+        })
+    </script>
+    <script src="../lightview.js?as=x-body"></script>
+</head>
+<body style="display:flex;flex-direction:row;min-height:98vh;margin: 10px">
+<div style="width:200px;min-height:100%;border:1px solid;padding-left:10px;padding-bottom:10px">
+    <div style="width:100%;"><label for="hamburger" style="float:left" l-on:click="${onTabClick}">hamburger</label><br></br>Files</div>
+    <div id="files"></div>
+</div>
+<div id="content" style="flex:auto;min-height:100%;border:1px solid;padding:10px">
+    <div style="display:flex;flex-direction:column;min-height:100%">
+        <div id="tabs" style="flex-grow:0;width:100%;border:1px;padding-bottom:5px;display:none">
+            <label for="markdown" l-on:click="${onTabClick}">Markdown</label>
+            <label for="html" l-on:click="${onTabClick}">HTML</label>
+            <label for="css" l-on:click="${onTabClick}">Style</label>
+            <label for="script" l-on:click="${onTabClick}">Script</label>
+            <label for="head" l-on:click="${onTabClick}">Head</label>
+            <label for="preview" l-on:click="${onTabClick}">Preview</label>
+        </div>
+        <textarea id="markdown" style="flex-grow:1;padding-right:2px;;display:none">${bodyMarkdown}</textarea>
+        <textarea id="html" style="flex-grow:1;padding-right:2px;display:none">${bodyHTML}</textarea>
+        <textarea id="css" style="flex-grow:1;display:none">${cssText}</textarea>
+        <textarea id="script" style="flex-grow:1;display:none">${scriptText}</textarea>
+        <textarea id="head" style="flex-grow:1;display:none">${headText}</textarea>
+        <div id="preview" style="flex-grow:1;display:none"></div>
+        <div id="hamburger"  style="flex-grow:1;display:none">options</div>
+        <div id="wysiwyg" style="flex-grow:1;width:100%;border:1px solid">
+        </div>
+    </div>
+</div>
+<style id="style"></style>
+<script type="lightview/module">
+    const turndownService = new TurndownService({headingStyle:"atx",codeBlockStyle:"fenced",emDelimiter:"*"}),
+        fs = new LightningFS('my-app').promises;
+    turndownService.keep(() => true);
+    const {html,css,script} = await import("../types.js");
+    self.variables({
+        onTabClick:"function"
+    });
+    self.variables({
+        bodyMarkdown:html,
+        bodyHTML:html,
+        cssText:css,
+        scriptText:script,
+        headHTML:html
+    },{reactive});
+    let fragment;
+    try {
+        const fullHTML = await fs.readFile("/test.html",{encoding:"utf8"}),
+          parser = new DOMParser();
+        fragment = parser.parseFromString(fullHTML||"","text/html");
+    } catch(e) {
+    };
+    const body_el = fragment?.body,
+        style_el = fragment?.querySelector("style"),
+        script_el = fragment?.querySelector("script");
+    if(style_el) style_el.remove();
+    if(script_el) script_el.remove();
+    bodyHTML = body_el?.innerHTML || "";
+    bodyMarkdown = "";
+    cssText = style_el?.innerHTML || "";
+    scriptText = script_el?.innerHTML || "",
+    headHTML = fragment?.head.innerHTML || "";
+    const tabs = [...self.querySelectorAll("label[for]")]
+        .map((label) => {
+            const id = label.getAttribute("for");
+            return [id,self.getElementById(id),label];
+        });
+    onTabClick = (event) => {
+        const targetid = event.target.getAttribute("for");
+        tabs.forEach(([id,el,label]) => {
+            if(id===targetid) {
+                el.style.display = "unset";
+                label.style.borderBottom = "solid";
+            } else {
+                el.style.display = "none";
+                label.style.borderBottom = "none";
+            }
+        });
+        if(targetid==="preview") doPreview();
+    };
+    const doPreview = () => {
+        const template = document.createElement("template");
+        template.innerHTML = "<style>" + cssText + "</style>" + htmlEl.value + '<script type="lightview/module">' + 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>";
+        fs.writeFile("/test.html",template.innerHTML,{encoding:"utf8"},()=>{});
+    };
+    const wysywigEl = self.getElementById("wysiwyg"),
+        markdownEl = self.getElementById("markdown"),
+        htmlEl = self.getElementById("html"),
+        tabsEl = self.getElementById("tabs"),
+        styleEl = self.getElementById("style"),
+        previewEl = self.getElementById("preview");
+    let prevtext; // prevents indirect recursion
+    observe(() => {
+        const text = turndownService.turndown(bodyHTML).trim();
+        if(text && text!==prevtext) {
+            bodyMarkdown = markdownEl.innerHTML = prevtext = text;
+        }
+    });
+    let prevhtml; // prevents indirect recursion
+    observe(() => {
+        const html = marked.parse(bodyMarkdown).trim();
+        if(html && html!==prevhtml) {
+            bodyHTML =  htmlEl.innerText  = prevhtml = html;
+        }
+    });
+    observe(() => {
+        const dummy = cssText;
+        if(tinymce.activeEditor) {
+            tinymce.activeEditor.destroy();
+            initMCE();
+        }
+    });
+    let advEdit = false;
+    const toggleAdvEdit = () => {
+        advEdit = !advEdit;
+        if(advEdit) {
+            tabsEl.style.display = "unset";
+        } else {
+            tabsEl.style.display = "none";
+        }
+        tabs.forEach(([_,el,label]) => {
+            if(advEdit && el===markdownEl) {
+                el.style.display = "unset";
+                label.style.borderBottom = "solid";
+                return;
+            }
+            el.style.display = "none";
+            label.style.borderBottom = "none";
+        });
+        initMCE();
+    };
+    const initMCE = () => {
+        tinymce.init({
+            target: wysywigEl,
+            content_style: cssText,
+            setup: (editor) => {
+                editor.ui.registry.addButton('advancedEdit', {
+                  text: 'AdvEdit',
+                  onAction: () => {
+                    editor.destroy();
+                    toggleAdvEdit();
+                  }
+                });
+                editor.on("init",() => {
+                    observe(()=> {
+                        const html = editor.getContent();
+                        if(html !== bodyHTML) {
+                            editor.setContent(bodyHTML);
+                        }
+                    });
+                });
+                ["input","FormatApply","FormatRemove"]
+                    .forEach((event) => {
+                        editor.on(event,() => {
+                            const html = editor.getContent();
+                            if(!bodyHTML || (bodyHTML !== html)) {
+                                bodyHTML = htmlEl.innerText =  html;
+                            }
+                        });
+                    });
+            },
+            plugins: "a11ychecker advcode casechange export formatpainter image editimage linkchecker autolink lists checklist media mediaembed pageembed powerpaste searchreplace table advtable tableofcontents tinycomments tinymcespellchecker",
+            toolbar: "undo redo | addcomment showcomments | h1 h2 h3 h4 formatselect casechange bullist numlist checklist | advancedEdit",
+            toolbar_mode: "floating",
+            tinycomments_mode: "embedded",
+            tinycomments_author: "Author name",
+            removed_menuitems: 'fontsizes, fontformats, forecolor, backcolor, lineheight, inline, inserttable code undo redo',
+            style_formats: [
+              { title: 'Headings', items: [
+                    { title: 'Heading 1', format: 'h1' },
+                    { title: 'Heading 2', format: 'h2' },
+                    { title: 'Heading 3', format: 'h3' },
+                    { title: 'Heading 4', format: 'h4' },
+                    { title: 'Heading 5', format: 'h5' },
+                    { title: 'Heading 6', format: 'h6' }
+                  ]
+              }
+           ],
+           statusbar: false,
+           menu: {
+            format: {title: 'Format', items: 'bold italic underline strikethrough superscript subscript | codeformat blockformats align | removeformat'}
+           }
+        });
+    };
+    self.addEventListener("connected",() => {
+        initMCE();
+    });
+// format: remove fonts, line height, text color, background color formats.inline, formats.block.div and formats.blocks.pre, block.pre
+// view: remove source code
+</script>
+</body>
+</html>

package/test/basic.html CHANGED Viewed

@@ -5,10 +5,10 @@
     <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="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>
@@ -32,16 +32,18 @@
         <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 = (self) => {
+            // 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});
             color = "green";
             checked = true;
@@ -63,7 +65,6 @@
                 inumber = 1;
                 irange = 1;
                 idatetime = new Date();
                 icheckbox = true;
@@ -74,12 +75,12 @@
                 counter++;
             };
-            addEventListener("change",({variableName,value}) => {
+            addEventListener("change", ({variableName, value}) => {
                 self[variableName] = value;
             });
-        </script>
-    </template>
-    <script src="../lightview.js"></script>
+        }
+    </script>
+    <script src="../lightview2.js"></script>
     <script>
         Lightview.createComponent("x-test",document.getElementById("x-test"));
     </script>

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');

package/test/extended.html CHANGED Viewed

@@ -3,30 +3,27 @@
 <head>
     <meta charset="UTF-8">
     <title>Extended</title>
-    <script src="../lightview.js?as=x-body"></script>
+    <script src="../lightview2.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>

package/types.js CHANGED Viewed

@@ -356,6 +356,15 @@ const string = ({coerce=false, required = false,whenInvalid = ifInvalid, maxleng
     }
 }
+const html = (...args) => string(...args);
+html.safe = true;
+const css = (...args) => string(...args);
+css.safe = true;
+const script = (...args) => string(...args);
+script.safe = true;
 const validateSymbol  = function(value,variable) {
     if(value===undefined && variable.value===undefined) {
@@ -522,4 +531,4 @@ const remote = (config) => {
 const remoteGenerator = handleRemote;
-export {ValidityState,any,array,boolean,duration,number,object,remote,remoteGenerator,string,symbol,reviver}
+export {ValidityState,any,array,boolean,duration,number,object,remote,remoteGenerator,string,symbol,reviver,html,css,script}

package/unsplash.key ADDED Viewed

	@@ -0,0 +1 @@
1	+ nRe-dHABvjv2shxyvDFQd3Y9MPni77qBG9ImAVH0wig

package/components/gauge/guage.html DELETED Viewed

@@ -1,19 +0,0 @@
-<html>
-<head>
-    <meta charset="UTF-8">
-    <title>Lightview:Gauge</title>
-</head>
-<body>
-<div id="target"></div>
-<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
-<script src="https://unpkg.com/json5@^2.0.0/dist/index.min.js"></script>
-<script type="lightview/module">
-    const {chart} = await import("/components/components.js");
-    chart(self,{
-      packages:["corechart","gauge"],
-      columns:[{label:"Label",type:"string"},{label:"Value",type:"number"}],
-      type:"Gauge"
-    });
-</script>
-</body>
-</html>