Lots of updates for DevTools

Still shaping up how devtools will look. Interesting with transitions. Sampling isn't really that ideal. No reason why we can't store the results in a persistent cache like indexeddb or cache api. Pull them on demand and only summarize the changes for lightning fast render views.
tbranyen · Apr 17, 2020 · a27844b · a27844b
1 parent 1442abb
commit a27844b
Show file tree

Hide file tree

Showing 31 changed files with 505 additions and 349 deletions.
diff --git a/README.md b/README.md
@@ -4,7 +4,7 @@
 [![Coverage
   Status](https://coveralls.io/repos/tbranyen/diffhtml/badge.svg?branch=master&service=github)](https://coveralls.io/github/tbranyen/diffhtml?branch=master)
 
-Stable version: 1.0.0-beta.14
+Latest version: 1.0.0-beta.14
 
 At its core, diffHTML is an extremely lightweight and optimized HTML parser and
 Virtual DOM specifically designed for modern web UIs. These interfaces can be

diff --git a/docs/api.html b/docs/api.html
@@ -39,19 +39,19 @@
 
 
 
-        <a href="index.html#hello-world" target><li>Hello world!</li></a>
+        <a href="index.html#core-features" target><li>Core features</li></a>
 
 
 
 
 
-        <a href="index.html#core-features" target><li>Core features</li></a>
+        <a href="index.html#getting-started" target><li>Getting started</li></a>
 
 
 
 
 
-        <a href="index.html#getting-the-source" target><li>Getting the source</li></a>
+        <a href="index.html#examples" target><li>Examples</li></a>
 
 
 
@@ -147,7 +147,7 @@
 
 
 
-        <a href="transitions.html#available-states" target><li>Available states</li></a>
+        <a href="transitions.html#states" target><li>States</li></a>
 
 
 
@@ -265,27 +265,15 @@
 
 
 
-        <a href="examples.html"><li class="header"><h4>Examples (Glitch)</h4></li></a>
-
-
-
-
-
-
-
-        <a href="https://glitch.com/edit/#!/diffhtml-helloworld" target="blank"><li>Hello World!</li></a>
-
-
-
 
 
-        <a href="https://glitch.com/edit/#!/diffhtml-clock" target="blank"><li>Clock</li></a>
+        <a href="devtools.html#install" target><li>Install</li></a>
 
 
 
 
 
-        <a href="https://glitch.com/edit/#!/diffhtml-todomvc" target="blank"><li>TodoMVC</li></a>
+        <a href="devtools.html#panels" target><li>Panels</li></a>
 
 
   </ul>

diff --git a/docs/components.html b/docs/components.html
@@ -39,19 +39,19 @@
 
 
 
-        <a href="index.html#hello-world" target><li>Hello world!</li></a>
+        <a href="index.html#core-features" target><li>Core features</li></a>
 
 
 
 
 
-        <a href="index.html#core-features" target><li>Core features</li></a>
+        <a href="index.html#getting-started" target><li>Getting started</li></a>
 
 
 
 
 
-        <a href="index.html#getting-the-source" target><li>Getting the source</li></a>
+        <a href="index.html#examples" target><li>Examples</li></a>
 
 
 
@@ -147,7 +147,7 @@
 
 
 
-        <a href="transitions.html#available-states" target><li>Available states</li></a>
+        <a href="transitions.html#states" target><li>States</li></a>
 
 
 
@@ -265,27 +265,15 @@
 
 
 
-        <a href="examples.html"><li class="header"><h4>Examples (Glitch)</h4></li></a>
-
-
-
-
-
-
-
-        <a href="https://glitch.com/edit/#!/diffhtml-helloworld" target="blank"><li>Hello World!</li></a>
-
-
-
 
 
-        <a href="https://glitch.com/edit/#!/diffhtml-clock" target="blank"><li>Clock</li></a>
+        <a href="devtools.html#install" target><li>Install</li></a>
 
 
 
 
 
-        <a href="https://glitch.com/edit/#!/diffhtml-todomvc" target="blank"><li>TodoMVC</li></a>
+        <a href="devtools.html#panels" target><li>Panels</li></a>
 
 
   </ul>

diff --git a/docs/devtools.html b/docs/devtools.html
@@ -39,19 +39,19 @@
 
 
 
-        <a href="index.html#hello-world" target><li>Hello world!</li></a>
+        <a href="index.html#core-features" target><li>Core features</li></a>
 
 
 
 
 
-        <a href="index.html#core-features" target><li>Core features</li></a>
+        <a href="index.html#getting-started" target><li>Getting started</li></a>
 
 
 
 
 
-        <a href="index.html#getting-the-source" target><li>Getting the source</li></a>
+        <a href="index.html#examples" target><li>Examples</li></a>
 
 
 
@@ -147,7 +147,7 @@
 
 
 
-        <a href="transitions.html#available-states" target><li>Available states</li></a>
+        <a href="transitions.html#states" target><li>States</li></a>
 
 
 
@@ -265,27 +265,15 @@
 
 
 
-        <a href="examples.html"><li class="header"><h4>Examples (Glitch)</h4></li></a>
-
 
 
-
-
-
-
-        <a href="https://glitch.com/edit/#!/diffhtml-helloworld" target="blank"><li>Hello World!</li></a>
+        <a href="devtools.html#install" target><li>Install</li></a>
 
 
 
 
 
-        <a href="https://glitch.com/edit/#!/diffhtml-clock" target="blank"><li>Clock</li></a>
-
-
-
-
-
-        <a href="https://glitch.com/edit/#!/diffhtml-todomvc" target="blank"><li>TodoMVC</li></a>
+        <a href="devtools.html#panels" target><li>Panels</li></a>
 
 
   </ul>
@@ -306,20 +294,34 @@ <h1>
 
         <hr></hr>
 
-        <section id="content"><h1>
-  <a href="https://github.com/tbranyen/diffhtml/tree/master/packages/diffhtml-devtools"><i style="margin-right: 10px" class="fa fa-github"></i></a>
-  DevTools
-</h1>
-
-<p><a name="#live-reload-server"></a></p>
+        <section id="content"><h1 id="devtools">DevTools</h1>
+<p><a name="install"></a></p>
+<hr></hr>
+<h2 id="a-hrefinstallinstalla"><a href="#install">Install</a></h2>
+<p>...</p>
+<p><a name="panels"></a></p>
+<hr></hr>
+<h2 id="a-hrefpanelspanelsa"><a href="#panels">Panels</a></h2>
+<p><a name="renders-panel"></a></p>
+<hr></hr>
+<h3 id="a-hrefrenders-panelrenders-panela"><a href="#renders-panel">Renders panel</a></h3>
+<p>...</p>
+<p><a name="mounts-panel"></a></p>
+<hr></hr>
+<h3 id="a-hrefmounts-panelmounts-panela"><a href="#mounts-panel">Mounts panel</a></h3>
+<p>...</p>
+<p><a name="middleware-panel"></a></p>
 <hr></hr>
-<h2 id="a-hreflive-reload-serverlive-reload-servera"><a href="#live-reload-server">Live Reload Server</a></h2>
-<p>TBD</p>
-<p><a name="#render-to-string"></a></p>
+<h3 id="a-hrefmiddleware-panelmiddleware-panela"><a href="#middleware-panel">Middleware panel</a></h3>
+<p>...</p>
+<p><a name="health-panel"></a></p>
 <hr></hr>
-<h2 id="a-hrefrender-to-stringrender-to-stringa"><a href="#render-to-string">Render to String</a></h2>
-<p>TBD</p>
+<h3 id="a-hrefhealth-panelhealth-panela"><a href="#health-panel">Health panel</a></h3>
+<p>...</p>
+<p><a name="settings-panel"></a></p>
 <hr></hr>
+<h3 id="a-hrefsettings-panelsettings-panela"><a href="#settings-panel">Settings panel</a></h3>
+<p>...</p>
 </section>
 
         <a href="https://github.com/tbranyen/diffhtml/edit/master/packages/diffhtml-website/pages/devtools.md" id="edit-on-github">

diff --git a/docs/index.html b/docs/index.html
@@ -39,19 +39,19 @@
 
 
 
-        <a href="index.html#hello-world" target><li>Hello world!</li></a>
+        <a href="index.html#core-features" target><li>Core features</li></a>
 
 
 
 
 
-        <a href="index.html#core-features" target><li>Core features</li></a>
+        <a href="index.html#getting-started" target><li>Getting started</li></a>
 
 
 
 
 
-        <a href="index.html#getting-the-source" target><li>Getting the source</li></a>
+        <a href="index.html#examples" target><li>Examples</li></a>
 
 
 
@@ -147,7 +147,7 @@
 
 
 
-        <a href="transitions.html#available-states" target><li>Available states</li></a>
+        <a href="transitions.html#states" target><li>States</li></a>
 
 
 
@@ -265,27 +265,15 @@
 
 
 
-        <a href="examples.html"><li class="header"><h4>Examples (Glitch)</h4></li></a>
-
-
-
-
-
 
 
-        <a href="https://glitch.com/edit/#!/diffhtml-helloworld" target="blank"><li>Hello World!</li></a>
+        <a href="devtools.html#install" target><li>Install</li></a>
 
 
 
 
 
-        <a href="https://glitch.com/edit/#!/diffhtml-clock" target="blank"><li>Clock</li></a>
-
-
-
-
-
-        <a href="https://glitch.com/edit/#!/diffhtml-todomvc" target="blank"><li>TodoMVC</li></a>
+        <a href="devtools.html#panels" target><li>Panels</li></a>
 
 
   </ul>
@@ -309,9 +297,7 @@ <h1>
         <section id="content"><p><strong>Welcome to diffHTML!</strong> A lightweight library for creating fast and reactive
 user interfaces using JavaScript. With diffHTML you can create applications,
 games, data visualizations, and much more in you web browser.</p>
-<p><a name="hello-world"></a></p>
-<hr></hr>
-<h2 id="a-hrefhello-worldhello-worlda"><a href="#hello-world">Hello world!</a></h2>
+<p>Here&#39;s a simple example to show what it&#39;s all about:</p>
 <pre><code class="language-js">import { innerHTML } from &#39;//diffhtml.org/es&#39;;
 
 innerHTML(document.body, `
@@ -329,9 +315,9 @@ <h2 id="a-hrefcore-featurescore-featuresa"><a href="#core-features">Core feature
 <li><span class="list-icon fa fa-codiepie"></span> Automatic memory management</li>
 <li><span class="list-icon fa fa-pencil"></span> Strict mode TypeScript via checkJS</li>
 </ul>
-<p><a name="getting-the-source"></a></p>
+<p><a name="getting-started"></a></p>
 <hr></hr>
-<h2 id="a-hrefgetting-the-sourcegetting-the-sourcea"><a href="#getting-the-source">Getting the source</a></h2>
+<h2 id="a-hrefgetting-startedgetting-starteda"><a href="#getting-started">Getting started</a></h2>
 <p><a name="node-module"></a></p>
 <h3 id="a-hrefnode-modulepackage-managera"><a href="#node-module">Package manager</a></h3>
 <div id="install"></div>
@@ -363,6 +349,26 @@ <h3 id="a-hrefes-moduleses-modulesa"><a href="#es-modules">ES modules</a></h3>
 <pre><code class="language-javascript">import { innerHTML } from &#39;https://unpkg.com/diffhtml?module&#39;;
 // or
 import { innerHTML } from &#39;https://diffhtml.org/es&#39;;</code></pre>
+<p><a name="examples"></a></p>
+<hr></hr>
+<h2 id="a-hrefexamplesexamplesa"><a href="#examples">Examples</a></h2>
+<h3 id="hello-world">Hello World</h3>
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">
+  <iframe src="https://glitch.com/embed/#!/embed/diffhtml-helloworld?path=hello-world.js&previewSize=40&attributionHidden=true&previewFirst=true&sidebarCollapsed=true" title="diffhtml-helloworld on Glitch" style="height: 100%; width: 100%; border: 0;">
+  </iframe>
+</div>
+
+<h3 id="clock">Clock</h3>
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">
+  <iframe src="https://glitch.com/embed/#!/embed/diffhtml-clock?path=script.js&previewSize=40&attributionHidden=true&previewFirst=true&sidebarCollapsed=true" title="diffhtml-clock on Glitch" style="height: 100%; width: 100%; border: 0;">
+  </iframe>
+</div>
+
+<h3 id="todomvc">TodoMVC</h3>
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">
+  <iframe src="https://glitch.com/embed/#!/embed/diffhtml-todomvc?path=lib/index.js&previewSize=40&attributionHidden=true&previewFirst=true&sidebarCollapsed=true" title="diffhtml-todomvc on Glitch" style="height: 100%; width: 100%; border: 0;">
+  </iframe>
+</div>
 </section>
 
         <a href="https://github.com/tbranyen/diffhtml/edit/master/packages/diffhtml-website/pages/index.md" id="edit-on-github">