Added collapsible prop to SuperDebug.

Fixes #248

Author: ciscoheat

CHANGELOG.md

@@ -5,13 +5,17 @@ Headlines: Added, Changed, Deprecated, Removed, Fixed, Security
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [1.5.4] - 2023-08-17
+## [1.6.0] - 2023-08-18
 
 ### Fixed
 
 - Client-side validation wasn't resetted properly, when a component containing a form was destroyed and mounted again.
 - Removed debug statement left from 1.5.3
 
+### Added
+
+- [SuperDebug](https://superforms.rocks/super-debug) now has a `collapsible` prop, that will make the component collapsible on a per-route basis.
+
 ## [1.5.3] - 2023-08-16
 
 ### Fixed

src/lib/client/SuperDebug.svelte

@@ -1,4 +1,5 @@
 <script>
+  import { browser } from '$app/environment';
   import { page } from '$app/stores';
   import { readable, get } from 'svelte/store';
 
@@ -99,6 +100,46 @@
    */
   export let theme = 'default';
 
+  ///// Collapse behavior ///////////////////////////////////////////
+
+  /**
+   * Will show a collapse bar at the bottom of the component, that can be used to hide and show the output.
+   *
+   * Default is `false`.
+   */
+  export let collapsible = false;
+
+  let collapsed = false;
+  if (browser && collapsible) setCollapse();
+
+  /**
+   * @param {boolean|undefined} status
+   */
+  function setCollapse(status = undefined) {
+    let data;
+    const route = $page.route.id ?? '';
+    try {
+      data = JSON.parse(sessionStorage.SuperDebug);
+      if (!('collapsed' in data)) data.collapsed = {};
+      data.collapsed[route] =
+        status === undefined ? data.collapsed[route] ?? false : status;
+    } catch {
+      data = {
+        collapsed: {
+          [route]: false
+        }
+      };
+    }
+
+    if (status !== undefined) {
+      sessionStorage.SuperDebug = JSON.stringify(data);
+    }
+
+    collapsed = data.collapsed[route];
+  }
+
+  ///////////////////////////////////////////////////////////////////
+
   /**
    * @param {unknown} json
    * @returns {string}
@@ -278,6 +319,7 @@
     {/if}
     <pre
       class="super-debug--pre {label === '' ? 'pt-4' : 'pt-0'}"
+      class:hidden={collapsed}
       bind:this={ref}><code class="super-debug--code"
         ><slot
           >{#if assertPromise($debugData, raw, promise)}{#await $debugData}<div
@@ -290,6 +332,24 @@
               )}{/await}{:else}{@html syntaxHighlight($debugData)}{/if}</slot
         ></code
       ></pre>
+    {#if collapsible}
+      <button
+        on:click={() => setCollapse(!collapsed)}
+        class="super-debug--collapse"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="20"
+          height="20"
+          viewBox="0 0 24 24"
+          class:rotated={collapsed}
+          ><path
+            fill="currentColor"
+            d="M4.08 11.92L12 4l7.92 7.92l-1.42 1.41l-5.5-5.5V22h-2V7.83l-5.5 5.5l-1.42-1.41M12 4h10V2H2v2h10Z"
+          /></svg
+        >
+      </button>
+    {/if}
   </div>
 {/if}
 
@@ -340,6 +400,15 @@
     padding-top: 1em;
   }
 
+  .hidden {
+    height: 0;
+    overflow: hidden;
+  }
+
+  .rotated {
+    transform: rotate(180deg);
+  }
+
   .super-debug {
     --_sd-bg-color: var(
       --sd-bg-color,
@@ -351,6 +420,24 @@
     overflow: hidden;
   }
 
+  .super-debug--collapse {
+    display: block;
+    width: 100%;
+    color: rgba(255, 255, 255, 0.25);
+    background-color: rgba(255, 255, 255, 0.15);
+    padding: 5px 0;
+    display: flex;
+    justify-content: center;
+    border-color: transparent;
+    margin: 0;
+    padding: 3px 0;
+  }
+
+  .super-debug--collapse:is(:hover) {
+    color: rgba(255, 255, 255, 0.35);
+    background-color: rgba(255, 255, 255, 0.25);
+  }
+
   .super-debug--status {
     display: flex;
     padding: 1em;
@@ -382,7 +469,8 @@
     color: var(--sd-code-default, var(--sd-vscode-code-default, #999));
     background-color: var(--_sd-bg-color);
     font-size: 1em;
-    padding: 1em 0 0 1em;
+    margin-bottom: 0;
+    padding: 1em 0 1em 1em;
   }
 
   .info {

src/routes/super-debug/+page.svelte

@@ -103,7 +103,7 @@
   <section>
     <h4>SuperDebug with label</h4>
     <p>Label is useful when using multiple instance of SuperDebug.</p>
-    <SuperDebug label="Sample User" data={$form} />
+    <SuperDebug label="Sample User" data={$form} collapsible />
   </section>
   <section>
     <h4>SuperDebug without status</h4>
@@ -167,7 +167,7 @@
   <section>
     <h4>SuperDebug displaying $page data</h4>
     <p>Svelte's <code>$page</code> data in all its glory.</p>
-    <SuperDebug label="$page data" data={$page} />
+    <SuperDebug label="$page data" data={$page} collapsible />
   </section>
 
   <section>