SuperDebug looks a bit better now when there is no css styling on the page.

Author: ciscoheat

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Array-level errors weren't typed correctly when changing the cardinality of an array field in the schema (for example with `nonempty`).
+- SuperDebug looks a bit better now when there is no css styling on the page.
 
 ## [1.5.2] - 2023-08-15
 

src/lib/client/SuperDebug.svelte

@@ -257,23 +257,25 @@
 
 {#if display}
   <div class="super-debug" style={themeStyle}>
-    <div
-      class="super-debug--status {label === ''
-        ? 'absolute inset-x-0 top-0'
-        : ''}"
-    >
-      <div class="super-debug--label">{label}</div>
-      {#if status}
-        <div
-          class:info={$page.status < 200}
-          class:success={$page.status >= 200 && $page.status < 300}
-          class:redirect={$page.status >= 300 && $page.status < 400}
-          class:error={$page.status >= 400}
-        >
-          {$page.status}
-        </div>
-      {/if}
-    </div>
+    {#if label || status}
+      <div
+        class="super-debug--status {label === ''
+          ? 'absolute inset-x-0 top-0'
+          : ''}"
+      >
+        <div class="super-debug--label">{label}</div>
+        {#if status}
+          <div
+            class:info={$page.status < 200}
+            class:success={$page.status >= 200 && $page.status < 300}
+            class:redirect={$page.status >= 300 && $page.status < 400}
+            class:error={$page.status >= 400}
+          >
+            {$page.status}
+          </div>
+        {/if}
+      </div>
+    {/if}
     <pre
       class="super-debug--pre {label === '' ? 'pt-4' : 'pt-0'}"
       bind:this={ref}><code class="super-debug--code"
@@ -352,6 +354,7 @@
   .super-debug--status {
     display: flex;
     padding: 1em;
+    padding-bottom: 0;
     justify-content: space-between;
     font-family: Inconsolata, Monaco, Consolas, 'Lucida Console',
       'Courier New', Courier, monospace;
@@ -378,8 +381,8 @@
   .super-debug pre {
     color: var(--sd-code-default, var(--sd-vscode-code-default, #999));
     background-color: var(--_sd-bg-color);
-    margin-bottom: 0px;
     font-size: 1em;
+    padding: 1em 0 0 1em;
   }
 
   .info {
@@ -455,25 +458,29 @@
   }
 
   .super-debug pre::-webkit-scrollbar-track {
+    border-radius: 12px;
     background-color: var(
       --sd-sb-track-color,
       var(--sd-vscode-sb-track-color, hsl(0, 0%, 40%, 0.2))
     );
   }
   .super-debug:is(:focus-within, :hover) pre::-webkit-scrollbar-track {
+    border-radius: 12px;
     background-color: var(
       --sd-sb-track-color-focus,
       var(--sd-vscode-sb-track-color-focus, hsl(0, 0%, 50%, 0.2))
     );
   }
 
   .super-debug pre::-webkit-scrollbar-thumb {
+    border-radius: 12px;
     background-color: var(
       --sd-sb-thumb-color,
       var(--sd-vscode-sb-thumb-color, hsl(217, 50%, 50%, 0.5))
     );
   }
   .super-debug:is(:focus-within, :hover) pre::-webkit-scrollbar-thumb {
+    border-radius: 12px;
     background-color: var(
       --sd-sb-thumb-color-focus,
       var(--sd-vscode-sb-thumb-color-focus, hsl(217, 50%, 50%))

src/routes/superforms-plain/+page.server.ts

@@ -0,0 +1,22 @@
+import { message, superValidate } from '$lib/server';
+import { schema } from './schema';
+import { fail } from '@sveltejs/kit';
+
+export const load = async () => {
+  const form = await superValidate(schema);
+  return { form };
+};
+
+export const actions = {
+  default: async ({ request }) => {
+    const formData = await request.formData();
+    console.log(formData);
+
+    const form = await superValidate(formData, schema);
+    console.log('POST', form);
+
+    if (!form.valid) return fail(400, { form });
+
+    return message(form, 'Posted OK!');
+  }
+};

src/routes/superforms-plain/+page.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import { superForm } from '$lib/client';
+  import type { PageData } from './$types';
+  import SuperDebug from '$lib/client/SuperDebug.svelte';
+  import { schema } from './schema';
+  import { onMount } from 'svelte';
+
+  export let data: PageData;
+
+  const { form, errors, tainted, message, enhance } = superForm(data.form, {
+    //dataType: 'json',
+    //validators: schema
+  });
+
+  onMount(() => {
+    document.querySelector('head link[href="./sakura.css"]')?.remove();
+  });
+</script>
+
+<SuperDebug data={{ $form, $errors, $tainted }} status={false} />
+
+{#if $message}<h4>{$message}</h4>{/if}
+
+<form method="POST" use:enhance>
+  <label>
+    Name: <input name="name" bind:value={$form.name} />
+    {#if $errors.name}<span class="invalid">{$errors.name}</span>{/if}
+  </label>
+  <div>
+    <button>Submit</button>
+  </div>
+</form>
+
+<style lang="scss">
+  form {
+    margin: 2rem 0;
+
+    input {
+      background-color: #dedede;
+    }
+
+    .invalid {
+      color: crimson;
+    }
+  }
+</style>

src/routes/superforms-plain/schema.ts

@@ -0,0 +1,5 @@
+import { z } from 'zod';
+
+export const schema = z.object({
+  name: z.string().min(1)
+});