feat: better support for complex values

kitsonk · Oct 16, 2024 · 32accbe · 32accbe
1 parent 010344f
commit 32accbe
Show file tree

Hide file tree

Showing 14 changed files with 467 additions and 89 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,7 +1,7 @@
 {
   "deno.enable": true,
   "deno.lint": true,
-  "deno.unstable": ["kv_storage"],
+  "deno.unstable": ["kv"],
   "editor.defaultFormatter": "denoland.vscode-deno",
   "[typescriptreact]": {
     "editor.defaultFormatter": "denoland.vscode-deno"

diff --git a/_fresh.zip b/_fresh.zip
diff --git a/components/DialogAddEntry.tsx b/components/DialogAddEntry.tsx
@@ -16,6 +16,7 @@ import { CloseButton } from "./CloseButton.tsx";
 import { Dialog } from "./Dialog.tsx";
 import { Label } from "./Label.tsx";
 import { KvKey } from "./KvKey.tsx";
+import { KvKeyPartEditor } from "./KvKeyPartEditor.tsx";
 import { KvValueEditor } from "./KvValueEditor.tsx";
 
 export function DialogAddEntry(
@@ -117,31 +118,7 @@ export function DialogAddEntry(
             </h2>
             <KvKey value={currentKey} showRoot noLink />
           </div>
-          <div>
-            <Label for="key_part">Key Part</Label>
-            <input
-              type="text"
-              name="key_part"
-              id="key_part"
-              class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
-              placeholder="Key part name"
-              required
-            />
-          </div>
-          <div>
-            <Label for="key_part_type">Key Part Type</Label>
-            <select
-              id="key_part_type"
-              name="key_part_type"
-              class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
-            >
-              <option selected value="string">String</option>
-              <option value="number">Number</option>
-              <option value="bigint">BigInt</option>
-              <option value="boolean">Boolean</option>
-              <option value="Uint8Array">Uint8Array</option>
-            </select>
-          </div>
+          <KvKeyPartEditor />
           <KvValueEditor />
           <div>
             <Label for="expires_in">Expires In</Label>

diff --git a/components/KvEntry.tsx b/components/KvEntry.tsx
@@ -141,24 +141,22 @@ export function KvEntry(
               {value || meta ? "Update value..." : "Add value..."}
             </button>
           )}
+          <button
+            class="flex items-center justify-center font-bold text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 rounded-lg text-sm px-4 py-2 dark:bg-primary-600 dark:hover:bg-primary-700 focus:outline-none dark:focus:ring-primary-800"
+            type="button"
+            onClick={() => addEntryDialogOpen.value = true}
+          >
+            Add sub-entry...
+          </button>
           {value || meta
             ? (
-              <>
-                <button
-                  class="flex items-center justify-center font-bold text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 rounded-lg text-sm px-4 py-2 dark:bg-primary-600 dark:hover:bg-primary-700 focus:outline-none dark:focus:ring-primary-800"
-                  type="button"
-                  onClick={() => addEntryDialogOpen.value = true}
-                >
-                  Add sub-entry...
-                </button>
-                <button
-                  class="flex items-center justify-center font-bold text-white bg-primary-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 rounded-lg text-sm px-4 py-2 dark:bg-red-600 dark:hover:bg-red-700 focus:outline-none dark:focus:ring-red-800"
-                  type="button"
-                  onClick={() => deleteEntryDialogOpen.value = true}
-                >
-                  Delete entry
-                </button>
-              </>
+              <button
+                class="flex items-center justify-center font-bold text-white bg-primary-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 rounded-lg text-sm px-4 py-2 dark:bg-red-600 dark:hover:bg-red-700 focus:outline-none dark:focus:ring-red-800"
+                type="button"
+                onClick={() => deleteEntryDialogOpen.value = true}
+              >
+                Delete entry
+              </button>
             )
             : undefined}
         </div>

diff --git a/components/KvKeyPartEditor.tsx b/components/KvKeyPartEditor.tsx
@@ -0,0 +1,81 @@
+import { useComputed, useSignal } from "@preact/signals";
+
+import { Label } from "./Label.tsx";
+
+export function KvKeyPartEditor() {
+  const keyPartType = useSignal("string");
+  const keyPartEditor = useComputed(() => {
+    switch (keyPartType.value) {
+      case "bigint":
+        return (
+          <input
+            type="number"
+            name="key_part"
+            id="key_part"
+            class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
+            placeholder="Key part value"
+            required
+          />
+        );
+      case "number":
+        return (
+          <input
+            type="text"
+            name="key_part"
+            id="key_part"
+            pattern="-?\d+(\.\d+)?|-?Infinity|NaN"
+            class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
+            placeholder="Key part value"
+            required
+          />
+        );
+      case "boolean":
+        return (
+          <select
+            name="key_part"
+            id="key_part"
+            class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
+          >
+            <option selected value="true">true</option>
+            <option value="false">false</option>
+          </select>
+        );
+      default:
+        return (
+          <input
+            type="text"
+            name="key_part"
+            id="key_part"
+            class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
+            placeholder="Key part value"
+            required
+          />
+        );
+    }
+  });
+
+  return (
+    <>
+      <div>
+        <Label for="key_part">Key Part</Label>
+        {keyPartEditor}
+      </div>
+      <div>
+        <Label for="key_part_type">Key Part Type</Label>
+        <select
+          id="key_part_type"
+          name="key_part_type"
+          value={keyPartType}
+          onChange={(evt) => keyPartType.value = evt.currentTarget.value}
+          class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
+        >
+          <option selected value="string">String</option>
+          <option value="number">Number</option>
+          <option value="bigint">BigInt</option>
+          <option value="boolean">Boolean</option>
+          <option value="Uint8Array">Uint8Array</option>
+        </select>
+      </div>
+    </>
+  );
+}
diff --git a/components/KvValue.tsx b/components/KvValue.tsx
@@ -1,6 +1,10 @@
 import { type ComponentChildren } from "preact";
 import { type BlobMeta } from "@kitsonk/kv-toolbox/blob";
-import { type KvKeyJSON, type KvValueJSON } from "@kitsonk/kv-toolbox/json";
+import {
+  type KvKeyJSON,
+  type KvValueJSON,
+  toValue,
+} from "@kitsonk/kv-toolbox/json";
 import { highlightJson } from "$utils/highlight.ts";
 
 import { BlobViewer } from "./BlobViewer.tsx";
@@ -58,7 +62,7 @@ export function KvValue(
         color = "pink";
         children = <Display>{value.value}n</Display>;
         break;
-      case "Map":
+      case "json_map":
         label = "Map";
         color = "red";
         children = (
@@ -74,10 +78,10 @@ export function KvValue(
                 {value.value.map(([key, value]) => (
                   <tr class="odd:bg-gray-50 odd:dark:bg-gray-900">
                     <td>
-                      <pre><code>{JSON.stringify(key, undefined, "  ")}</code></pre>
+                      <pre><code>{JSON.stringify(toValue(key), undefined, "  ")}</code></pre>
                     </td>
                     <td>
-                      <pre><code>{JSON.stringify(value, undefined, "  ")}</code></pre>
+                      <pre><code>{JSON.stringify(toValue(value), undefined, "  ")}</code></pre>
                     </td>
                   </tr>
                 ))}
@@ -95,7 +99,7 @@ export function KvValue(
           </Display>
         );
         break;
-      case "Set":
+      case "json_set":
         label = "Set";
         color = "red";
         children = (
@@ -110,7 +114,7 @@ export function KvValue(
                 {value.value.map((item) => (
                   <tr class="odd:bg-gray-50 odd:dark:bg-gray-900">
                     <td>
-                      <pre><code>{JSON.stringify(item, undefined, "  ")}</code></pre>
+                      <pre><code>{JSON.stringify(toValue(item), undefined, "  ")}</code></pre>
                     </td>
                   </tr>
                 ))}
@@ -220,21 +224,21 @@ export function KvValue(
           </Display>
         );
         break;
-      case "Array":
-        label = value.type;
+      case "json_array":
+        label = "Array";
         color = "blue";
         children = (
           <Display>
-            <pre><code dangerouslySetInnerHTML={{ __html: highlightJson(value.value)}}></code></pre>
+            <pre><code dangerouslySetInnerHTML={{ __html: highlightJson(toValue(value))}}></code></pre>
           </Display>
         );
         break;
-      case "object":
-        label = "JSON";
+      case "json_object":
+        label = "Object";
         color = "blue";
         children = (
           <Display>
-            <pre><code dangerouslySetInnerHTML={{ __html: highlightJson(value.value) }}></code></pre>
+            <pre><code dangerouslySetInnerHTML={{ __html: highlightJson(toValue(value)) }}></code></pre>
           </Display>
         );
         break;

diff --git a/components/KvValueEditor.tsx b/components/KvValueEditor.tsx
@@ -1,7 +1,7 @@
 import { type BlobMeta } from "@kitsonk/kv-toolbox/blob";
-import { type KvValueJSON } from "@kitsonk/kv-toolbox/json";
+import { type KvValueJSON, toValue } from "@kitsonk/kv-toolbox/json";
 import { useComputed, useSignal } from "@preact/signals";
-import { isBlobMeta } from "$utils/kv.ts";
+import { isBlobMeta, replacer } from "$utils/kv.ts";
 
 import { EditorJson } from "./EditorJson.tsx";
 
@@ -47,11 +47,22 @@ function kvValueJSONToFormData(
         return [value.type, "null"];
       case "undefined":
         return [value.type, "undefined"];
-      case "Array":
-      case "Map":
-      case "Set":
-      case "object":
-        return [value.type, JSON.stringify(value.value, undefined, "  ")];
+      case "json_map":
+      case "json_set":
+        return [
+          value.type,
+          JSON.stringify(
+            [...(toValue(value) as Map<unknown, unknown> | Set<unknown>)],
+            replacer,
+            "  ",
+          ),
+        ];
+      case "json_array":
+      case "json_object":
+        return [
+          value.type,
+          JSON.stringify(toValue(value), replacer, "  "),
+        ];
       default:
         throw new TypeError(`Unexpected type: "${value.type}"`);
     }
@@ -181,8 +192,8 @@ export function KvValueEditor(
             onChange={(evt) => valueValue.value = evt.currentTarget.value}
           />
         );
-      case "Array":
-      case "object":
+      case "json_array":
+      case "json_object":
         return (
           <div class="max-h-48 overflow-auto max-w-3xl text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500">
             <EditorJson
@@ -252,10 +263,10 @@ export function KvValueEditor(
           <option value="number">Number</option>
           <option value="bigint">BigInt</option>
           <option value="boolean">Boolean</option>
-          <option value="object">JSON</option>
-          <option value="Array">Array</option>
-          <option value="Map">Map</option>
-          <option value="Set">Set</option>
+          <option value="json_object">JSON</option>
+          <option value="json_array">Array</option>
+          <option value="json_map">Map</option>
+          <option value="json_set">Set</option>
           <option value="RegExp">RegExp</option>
           <option value="KvU64">KvU64</option>
           <option value="Date">Date</option>

diff --git a/components/Markdown.tsx b/components/Markdown.tsx
@@ -1,5 +1,8 @@
 import { render } from "@deno/gfm";
 
+import "prismjs/components/prism-json.js";
+import "prismjs/components/prism-typescript.js";
+
 export function Markdown(
   { children: markdown, baseUrl, class: classCss = "" }: {
     children: string;

diff --git a/deno.json b/deno.json
@@ -17,18 +17,15 @@
   },
   "lint": { "rules": { "tags": ["fresh", "recommended"] } },
   "imports": {
-    "$fresh/": "https://deno.land/x/[email protected]/",
-    "preact": "https://esm.sh/[email protected]",
-    "preact/": "https://esm.sh/[email protected]/",
-    "preact-render-to-string": "https://esm.sh/*[email protected]",
-    "tailwindcss": "npm:[email protected]",
-    "tailwindcss/": "npm:/[email protected]/",
-    "tailwindcss/plugin": "npm:/[email protected]/plugin.js",
-    "@deno/gfm": "jsr:/@deno/[email protected]",
-    "@kitsonk/kv-toolbox": "jsr:/@kitsonk/[email protected]",
+    "$components/": "./components/",
+    "$fresh/": "https://deno.land/x/[email protected]/",
+    "$islands/": "./islands/",
+    "$utils/": "./utils/",
+    "@deno/gfm": "jsr:/@deno/[email protected]",
+    "@kitsonk/kv-toolbox": "jsr:/@kitsonk/[email protected]",
     "@oak/commons/": "jsr:/@oak/commons@~1/",
-    "@preact/signals": "https://esm.sh/*@preact/signals@1.2.2",
-    "@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.5.1",
+    "@preact/signals": "npm:/@preact/signals@1.3.0",
+    "@preact/signals-core": "npm:/@preact/signals-core@1.8.0",
     "@std/assert/": "jsr:/@std/assert@~1/",
     "@std/async/": "jsr:/@std/async@~1/",
     "@std/crypto/": "jsr:/@std/crypto@~1/",
@@ -38,9 +35,12 @@
     "@std/html/": "jsr:/@std/html@~1/",
     "@std/media-types/": "jsr:/@std/media-types@~1/",
     "@std/path/": "jsr:/@std/path@~1/",
-    "$components/": "./components/",
-    "$islands/": "./islands/",
-    "$utils/": "./utils/"
+    "object-inspect": "npm:object-inspect@^1.13.2",
+    "preact": "npm:/[email protected]",
+    "preact-render-to-string": "npm:/[email protected]",
+    "prismjs": "npm:/[email protected]",
+    "tailwindcss": "npm:/[email protected]",
+    "tailwindcss/plugin": "npm:/[email protected]/plugin.js"
   },
   "compilerOptions": { "jsx": "react-jsx", "jsxImportSource": "preact" },
   "exclude": ["**/_fresh/*"]