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/comparedto.html ADDED Viewed

@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Lightview:ComparedTo</title>
+    <script src="./javascript/highlightjs.min.js"></script>
+    <script src="./javascript/marked.min.js"></script>
+    <script src="./javascript/utils.js"></script>
+    <style>
+        table { border: lightgray; border-style: solid; border-collapse: collapse; width: 100%}
+        thead th:nth-child(1) {
+            width: 15%;
+        }
+        thead th:nth-child(2) {
+            width: 17%;
+        }
+        thead th:nth-child(3) {
+            width: 17%;
+        }
+        thead th:nth-child(4) {
+            width: 17%;
+        }
+        thead th:nth-child(5) {
+            width: 17%;
+        }
+        thead th:nth-child(6) {
+            width: 17%;
+        }
+        th { text-align: left;  border: lightgray; border-style: solid; padding: 5px;  }
+        td { text-align: left;  border: lightgray; border-style: solid; padding: 5px;  }
+    </style>
+</head>
+<body>
+    <div class="markdown">
+|           |Lightview |Svelte   |Vue       |React     |Riot      |
+|-----------|----------|---------|----------|----------|----------|
+| *Size*    | 8.5K+        | 1.5K+       | 29K+        | 42K+        | 6.5K+        |
+| *Community Size*    | Tiny        | Large       | Very Large        | Very Large        | Medium        |
+| *Created*    | 2022 | 2015       | 2014        |    2011     | 2013        |
+| *Focus*    | Small to Medium Projects | Any       | Any        | Any        | Any        |
+| *Preprocessor*    | No        | Yes       | For Components        | Yes        | Yes        |
+| *DOM Updates*    | Dependency Tracker      | Dependency Tracker       | VDOM        | VDOM        | DOM Traversal        |
+| *Fully Reactive<sup>1</sup>*    | Yes        | Yes       | Yes        | No        | No        |
+| *Two Way Data Binding<sup>2</sup>*    | Optional        | No       | No        | No        | No        |
+| *Closeness To JavaScript<sup>3</sup>*    | 90%        | 95%       | 80%        | 60%        | 90%        |
+| *Basic Learning Curve<sup>4</sup>*    | Very Low        | Very Low       | Low        | High        | Very Low        |
+| *Power Use Learning Curve<sup>5</sup>*    | Moderate        | Moderate       | High        | Very High        | Low        |
+| *Officially Supported Router* | Future | Yes | Yes | No | Yes |
+| *Officially Supported State Management<sup>6</sup>* | Yes | Yes | Yes | No | ? |
+| *Officially Supported Transition Effects* | No | Yes | Yes | No | No |
+| *Officially Supported Components* | Yes | ? | ? | ? | ? |
+A version of the most [prevelant UI tool benchmark](https://krausest.github.io/js-framework-benchmark/current.html)
+from Krausest has yet to be published. Internal use of this benchmark shows the current performance of Lightview is close to
+that of Ember (sometimes faster, sometimes slower). It is often as fast or slightly faster than React and sometimes as fast as Vue.
+It is never as fast as Svelte. This should be adequate for many applications. Remember, it is not the
+number of users that impacts a UI library, it is the size and change rate of the DOM that needs to be updated. If
+you don't have thousands of nodes to update or changes of an extremely high frequency, then you should be able to deliver a
+good user experience with Lightview.
+1. Fully Reactive - Both React and Riot require you to instrument your application with some type of event handlers to
+propagate change. Lightview, Svelte, and Vue can propagate change automatically.
+2. Closeness To JavaScript - A rough approximation of how "traditional" your code can be and how few extra conventions you need to learn
+to be productive. In general, this relates to the use of state management, attribute directives, annotations, and language additions that
+can't be processed like regular JavaScript.
+3. Two-way data binding is much maligned. We do understand the issues of tracing data changes through a large application developed over an extended
+period of time by multiple-developers. That being said, Lightview works hard to prevent vicious cycles that creat hard to track bugs and is
+extraordinarily declarative. It is left to you to decide if you want to use two-way data binding. All variables can be monitored with a simple
+call to `addEventListener` without declaring them as `reactive`.
+4. The learning curves for React are shown as High and Very High due the need to learn JSX, the programming style required, and the need to
+use hooks or manage a fair number of lifecyle events directly. We know this may create some lash back, but we believe the extent of this
+need sometimes makes things as bad as un-restrained use of two-way data binding.
+5. Riot is listed as `Low` for power use learning curve because it does not provide a lot of extras. This is not to say it isn't powerful, Riot
+focuses on minimalistic simplicity. You can use the rest of JavaScript's native functionality to accomplish what you need.
+6. State in Lightview is managed with a combination of regular JavaScript objects and the variable functional types `imported`, `exported`, `observed`,
+`reactive`, `remote` and `shared`.
+    </div>
+    <script>
+        processMarkdown();
+    </script>
+</body>
+</html>

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

@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Lightview:Components:Basic Charts</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">
+## Basic Charts
+The basic chart component, `l-chart`, supports bar, pie, and column charts through configuration data provided as
+relaxed JSON in the tag contetn area.
+    </div>
+    <button class="nav-next"><a href="gantt-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="500px">
+        <div slot="headhtml"></div>
+        <div slot="bodyhtml"></div>
+        <div slot="script"></div>
+        <template slot="src">
+<l-head>
+    <link href="./chart.html" rel="module">
+    <script src="../javascript/lightview.js"></script>
+</l-head>
+<l-body>
+    <l-chart id="myPieChart" type="PieChart" style="height:500px;" title="How Much Pizza I Ate Last Night">
+        {
+        options: { },
+        columns: [
+        {label: "Topping", type: "string"},
+        {label: "Slices", type: "number"}
+        ],
+        rows: [
+        ["Mushrooms", 3],
+        ["Onions", 1],
+        ["Olives", 1],
+        ["Zucchini", 1],
+        ["Pepperoni", 2]
+        ]
+        }
+    </l-chart>
+</l-body>
+<script>
+    const el = document.getElementById("myPieChart");
+    el.addEventListener("initialized",() => {
+        const chart = el.chart;
+        chart.addRow(["Anchovies",1]);
+    });
+</script>
+        </template>
+    </l-repl>
+</div>
+<script>
+   processMarkdown();
+</script>
+</body>
+</html>

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

@@ -3,13 +3,13 @@
 <head>
     <meta charset="UTF-8">
     <title>Lightview:Component:Chart</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", this.componentBaseURI).href);
+        const {chart} = await import(new URL("./components.js", this.componentBaseURI).href);
         chart(self);
     }
 </script>

package/{components → docs/components}/components.js RENAMED Viewed

@@ -94,9 +94,9 @@ const chart = (self,{packages = ["corechart"],options={},columns=[],rows=[],type
         node.characterDataMutationCallback = callback;
         // resized charts if window resizes
         resizeObserver.observe(document.body);
-        self.dispatchEvent(new Event("mounted"));
+        self.dispatchEvent(new Event("initialized"));
     };
-    self.addEventListener("connected", ({target}) => {
+    self.addEventListener("mounted", ({target}) => {
         const gscript = document.createElement("script");
         gscript.setAttribute("src","https://www.gstatic.com/charts/loader.js");
         gscript.onload = () => {
@@ -106,7 +106,7 @@ const chart = (self,{packages = ["corechart"],options={},columns=[],rows=[],type
         self.appendChild(gscript);
     });
     const jscript = document.createElement("script");
-    jscript.setAttribute("src","https://unpkg.com/json5@^2.0.0/dist/index.min.js");
+    jscript.setAttribute("src","../javascript/json5.min.js");
     document.head.appendChild(jscript);
 }

package/docs/components/contents.html ADDED Viewed

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Ligtchview:Tutorial:Contents</title>
+</head>
+<body>
+<ul style="list-style:none;padding-inline-start: 10px">
+    <li><a href="./chart-repl.html">Basic Charts</a></li>
+    <li><a href="./gantt-repl.html">Gantt</a></li>
+    <li><a href="./orgchart-repl.html">Org Chart</a></li>
+    <li><a href="./timeline-repl.html">Timeline</a></li>
+    <li><a href="./gauge-repl.html">Gauge</a></li>
+    <li><a href="./repl-repl.html">REPL</a></li>
+</ul>
+</body>
+</html>

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

@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Lightview:Components:Gantt</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">
+## Gannt
+    </div>
+    <button class="nav-previous"><a href="chart-repl.html" target="content">Previous</a></button>
+    <button class="nav-next"><a href="orgchart-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="./gantt.html" rel="module">
+    <script src="../javascript/lightview.js"></script>
+</l-head>
+<l-body>
+    <l-gantt id="myChart" style="height:400px;" title="Research Project">
+        {
+        options: { },
+        rows: [
+            ['Research', 'Find sources',"2015-01-01", "2015-01-05", null,  100,  null],
+            ['Write', 'Write paper',null,"2015-01-09", "3d", 25, 'Research,Outline'],
+            ['Cite', 'Create bibliography',null, "2015-01-07","1d" , 20, 'Research'],
+            ['Complete', 'Hand in paper', null, "2015-01-10", "1d" , 0, 'Cite,Write'],
+            ['Outline', 'Outline paper', null, "2015-01-06", "1d" , 100, 'Research']
+        ]
+        }
+    </l-gantt>
+</l-body>
+<script>
+</script>
+        </template>
+    </l-repl>
+</div>
+<script>
+   processMarkdown();
+</script>
+</body>
+</html>

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

@@ -2,14 +2,14 @@
 <html>
 <head>
     <title>Lightview:Component:Gantt</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("../components.js"),
-            {duration} = await import("/types.js");
+        const {chart} = await import(new URL("./components.js", this.componentBaseURI).href),
+            {duration} = await import(new URL("../javascript/types.js", this.componentBaseURI).href);
         chart(self, {
             packages: ["gantt"],
             columns: [

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

@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Lightview:Components:Gauge</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">
+## Gauge
+    </div>
+    <button class="nav-previous"><a href="timeline-repl.html" target="content">Previous</a></button>
+    <button class="nav-next"><a href="repl-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="./gauge.html" rel="module">
+    <script src="../javascript/lightview.js"></script>
+</l-head>
+<l-body>
+    <l-gauge id="myChart" style="height:500px;" title="Server" hidden l-unhide>
+        {
+        options: {
+        },
+        rows: [
+            ['Memory', 80],
+            ['CPU', 55],
+            ['Network', 68]
+        ]
+        }
+    </l-gauge>
+</l-body>
+<script>
+    const el = document.getElementById("myChart");
+    el.addEventListener("initialized",() => {
+        chart = el.chart;
+        chart.addRow(["Storage",10]);
+    });
+</script>
+        </template>
+    </l-repl>
+</div>
+<script>
+   processMarkdown();
+</script>
+</body>
+</html>

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

@@ -2,13 +2,13 @@
 <head>
     <meta charset="UTF-8">
     <title>Lightview:Component:Gauge</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("../components.js");
+        const {chart} = await import(new URL("./components.js", this.componentBaseURI).href);
         chart(self, {
             packages: ["corechart", "gauge"],
             columns: [{label: "Label", type: "string"}, {label: "Value", type: "number"}],

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

@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Lightview:Components:Org Chart</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">
+## Org Chart
+    </div>
+    <button class="nav-previous"><a href="gantt-repl.html" target="content">Previous</a></button>
+    <button class="nav-next"><a href="timeline-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="./orgchart.html" rel="module">
+    <script src="../javascript/lightview.js"></script>
+</l-head>
+<l-body>
+    <l-orgchart id="myChart" style="height:500px;" title="My Org">
+        {
+        options: {
+            selectedStyle:"color:red"
+        },
+        // 4 columns in definition data name,title,manager,tooltip
+        rows: [
+            ["Mike","President","",""],
+            ["Jim","CFO","Mike",""],
+            ['Alice', 'Controller','Jim',""],
+            ['Bob', 'CIO', 'Mike',""],
+            ['Carol', 'Executive Assistant',"Mike",""]
+        ]
+        }
+    </l-orgchart>
+</l-body>
+<script>
+</script>
+        </template>
+    </l-repl>
+</div>
+<script>
+   processMarkdown();
+</script>
+</body>
+</html>

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

@@ -2,14 +2,14 @@
 <html>
 <head>
     <title>Lightview:Component:OrgChart</title>
-    <script src="https://unpkg.com/json5@^2.0.0/dist/index.min.js"></script>
+    <script src="../javascript/json5.min.js"></script>
 </head>
 <body>
 <link id="load-css-2" rel="stylesheet" type="text/css" href="https://www.gstatic.com/charts/51/css/orgchart/orgchart.css">
 <div id="target"></div>
 <script id="lightview">
     (document.currentComponent||(document.currentComponent=document.body)).mount = async function() {
-        const {chart} = await import("../components.js");
+        const {chart} = await import(new URL("./components.js", this.componentBaseURI).href);
         chart(self, {
             options: {allowHtml: true, allowCollapse: true},
             packages: ["orgchart"],

package/docs/components/repl-as-src.html ADDED Viewed

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <script src="../javascript/lightview.js?as=x-body"></script>
+</head>
+<body>
+    <div class="message">${message}</div>
+    <script id="lightview">
+        currentComponent.mount = function() {
+            this.variables({message:"string"},{set:"Hello world!"});
+        }
+    </script>
+    <style>
+        .message { font-size: large }
+    </style>
+</body>
+</html>

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

@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Lightview:Components:REPL</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">
+## REPL
+REPL itself is a component, `l-repl`.
+To the right you will see source similar to that used to define the REPL in the tab menu for this website.
+The REPL component has lots of configuration options, so you can use it to just display example code based on
+source files if you want or focus users on a specific aspect of the code.
+Try these steps to see the flexibility of `l-repl`:
+1. Delete the entire slot and its contents starting with `<template slot="src"> ... </template>`. You should now
+see a REPL with no content in each of the displayed areas.
+2. Paste `src="./repl-as-src.html"` as one of the attributes of the `l-repl`. You should now see the same code you
+saw to start with, except it is loaded from a file.
+3. Paste `readonly` as an attribute to the `l-repl`. Now, none of the code can be edited. also, the `Save` button in the
+frames section disappears. (You probably realized this by now, users can save their REPL edits to `IndexedDB` locally.  Next time
+they visit, the REPL will be in the same state it was left in ... unless it has been more than 10 days on IOS ... Apple
+auto clears `IndexedDB for lack of use ;-(.).
+4. Delete `readonly` from the `l-repl` (Ctrl-Z should work) and paste it as an attribute to "bodyhtml" slot. Now the body
+can't be edited. You can do this with the other slots also.
+5. Remove `previewpinned` so as not to distract the user with a preview unless it is requested.
+5. Assume you want to focus the user attention of the body and script without editing. Remove the
+slots "headhtml" and "css". Add "readonly" to the "script" slot, or the `l-repl`. Remove `previewheight`.
+Add `hidetabs` to the `l-repl`.
+One final note, if you want to use multiple script tags, then add `maintainbody` to the `l-repl` and your scripts will be
+left alone, otherwise, the `l-repl` assumes you only have one script.
+    </div>
+    <button class="nav-previous"><a href="gauge-repl.html" target="content">Previous</a></button>
+</div>
+<div class="repl">
+    <h2></h2>
+    <l-repl id="repl" style="min-height:95vh;min-width:600px;" previewpinned path="$location" previewheight="750px" maintainbody>
+        <div slot="headhtml"></div>
+        <div slot="bodyhtml"></div>
+        <div slot="script"></div>
+        <div slot="css"></div>
+        <template slot="src">
+<l-head>
+    <link href="./repl.html" rel="module">
+    <script src="../javascript/lightview.js"></script>
+</l-head>
+<l-body>
+    <l-repl id="repl" style="min-height:95vh;min-width:600px;" previewpinned previewheight="250px">
+        <div slot="headhtml"></div>
+        <div slot="bodyhtml"></div>
+        <div slot="script"></div>
+        <div slot="css"></div>
+        <template slot="src">
+<l-head>
+    <script src="../javascript/lightview.js?as=x-body"></script>
+</l-head>
+<l-body>
+    <div class="message">${message}</div>
+</l-body>
+<script id="lightview">
+    currentComponent.mount = function() {
+        this.variables({message:"string"},{set:"Hello world!"});
+    }
+</script>
+<style>
+    .message { font-size: large }
+</style>
+        </template>
+    </l-repl>
+</l-body>
+        </template>
+    </l-repl>
+</div>
+<script>
+   processMarkdown();
+</script>
+</body>
+</html>