refactor: Upgrade svelvet

examples/websocket-relay/relay-app/package.json

@@ -32,13 +32,11 @@
     "tailwindcss": "^3.3.1",
     "tslib": "^2.4.1",
     "typescript": "^5.0.0",
-    "vite": "^4.2.0",
+    "vite": "^4.4.2",
     "vitest": "^0.25.3"
   },
   "type": "module",
   "dependencies": {
-    "@zerodevx/svelte-json-view": "^1.0.3",
-    "clipboard-copy": "^4.0.1",
-    "svelvet": "github:bgins/Svelvet#custom-for-homestar"
+    "svelvet": "8.1.0"
   }
 }

examples/websocket-relay/relay-app/src/app.css

@@ -12,3 +12,9 @@
   font-weight: 400;
   src: url("/IBMPlexMono-Regular.ttf") format("truetype");
 }
+
+
+/* Svelvet */
+.label-wrapper .default-label {
+  @apply font-sans text-xs !important;
+}

examples/websocket-relay/relay-app/src/components/WorkflowDetail.svelte

@@ -1,49 +1,50 @@
 <script lang="ts">
-  import { JsonView } from "@zerodevx/svelte-json-view";
-  import { slide } from "svelte/transition";
-  import { quartOut } from "svelte/easing";
+    // import { JsonView } from "@zerodevx/svelte-json-view";
+    import { slide } from "svelte/transition";
+    import { quartOut } from "svelte/easing";
 
-  import { workflowOneJson, workflowTwoJson } from "$lib/workflow";
+    // import { workflowOneJson, workflowTwoJson } from "../lib/workflow";
+    // import * as workflows from "$lib/workflow";
 </script>
 
 <div
-  transition:slide={{ delay: 50, duration: 500, easing: quartOut }}
-  class="absolute w-screen h-[calc(100vh-48px)] top-12 z-50 bg-white"
+    transition:slide={{ delay: 50, duration: 500, easing: quartOut }}
+    class="absolute w-screen h-[calc(100vh-48px)] top-12 z-50 bg-white"
 >
-  <div class="w-full h-full grid grid-flow-col grid-cols-2">
-    <div class="p-4 overflow-y-auto scrollbar-hide">
-      <div class="text-lg uppercase font-medium">Workflow One</div>
-      <div class="jsonview">
-        <JsonView json={workflowOneJson} />
-      </div>
+    <div class="w-full h-full grid grid-flow-col grid-cols-2">
+        <div class="p-4 overflow-y-auto scrollbar-hide">
+            <div class="text-lg uppercase font-medium">Workflow One</div>
+            <div class="jsonview">
+                <!-- <JsonView json={workflowOneJson} /> -->
+            </div>
+        </div>
+        <div class="p-4 overflow-y-auto scrollbar-hide">
+            <div class="text-lg uppercase font-medium">Workflow Two</div>
+            <div class="jsonview">
+                <!--  <JsonView json={workflowTwoJson} /> -->
+            </div>
+        </div>
     </div>
-    <div class="p-4 overflow-y-auto scrollbar-hide">
-      <div class="text-lg uppercase font-medium">Workflow Two</div>
-      <div class="jsonview">
-        <JsonView json={workflowTwoJson} />
-      </div>
-    </div>
-  </div>
 </div>
 
 <style>
-  .jsonview {
-    font-family: "IBM Plex Mono";
-    font-size: 14px;
-    --jsonBorderLeft: 1px solid #ddd;
-    --jsonValStringColor: #6649f8;
-    --jsonValNumberColor: #0f9162;
-    --jsonValColor: #a6163a;
-  }
+    .jsonview {
+        font-family: "IBM Plex Mono";
+        font-size: 14px;
+        --jsonBorderLeft: 1px solid #ddd;
+        --jsonValStringColor: #6649f8;
+        --jsonValNumberColor: #0f9162;
+        --jsonValColor: #a6163a;
+    }
 
-  /* Hide scrollbar for Chrome, Safari and Opera */
-  .scrollbar-hide::-webkit-scrollbar {
-    display: none;
-  }
+    /* Hide scrollbar for Chrome, Safari and Opera */
+    .scrollbar-hide::-webkit-scrollbar {
+        display: none;
+    }
 
-  /* Hide scrollbar for IE, Edge and Firefox */
-  .scrollbar-hide {
-    -ms-overflow-style: none; /* IE and Edge */
-    scrollbar-width: none; /* Firefox */
-  }
+    /* Hide scrollbar for IE, Edge and Firefox */
+    .scrollbar-hide {
+        -ms-overflow-style: none; /* IE and Edge */
+        scrollbar-width: none; /* Firefox */
+    }
 </style>

examples/websocket-relay/relay-app/src/components/controls/TaskValue.svelte

@@ -1,56 +1,56 @@
 <script lang="ts">
-  import clipboardCopy from "clipboard-copy";
-  import { quintIn } from "svelte/easing";
-  import { fade } from "svelte/transition";
+    // import clipboardCopy from "clipboard-copy";
+    import { quintIn } from "svelte/easing";
+    import { fade } from "svelte/transition";
 
-  import Check from "$components/icons/Check.svelte";
-  import CopyIcon from "$components/icons/Copy.svelte";
+    import Check from "$components/icons/Check.svelte";
+    import CopyIcon from "$components/icons/Copy.svelte";
 
-  export let label: string;
-  export let val: string | null;
+    export let label: string;
+    export let val: string | null;
 
-  let state: "copy" | "check" = "copy";
+    let state: "copy" | "check" = "copy";
 
-  async function copy(val: string | null) {
-    if (!val) return;
+    async function copy(val: string | null) {
+        if (!val) return;
 
-    await clipboardCopy(val);
-    state = "check";
+        // await clipboardCopy(val);
+        state = "check";
 
-    setTimeout(() => {
-      state = "copy";
-    }, 2000);
-  }
+        setTimeout(() => {
+            state = "copy";
+        }, 2000);
+    }
 </script>
 
 <div class="grid grid-flow-row pl-1 pt-1.5 text-sm text-slate-700">
-  <span class="flex flex-row items-center gap-1 w-52">
-    {label}
-    {#if val}
-      {#if state === "copy"}
-        <span
-          class="cursor-pointer"
-          on:click={() => copy(val)}
-          on:keypress={() => copy(val)}
-          in:fade={{ duration: 80, easing: quintIn }}
-          out:fade={{ duration: 40, easing: quintIn }}
-        >
-          <CopyIcon />
-        </span>
-      {:else}
-        <span out:fade={{ duration: 40, easing: quintIn }}>
-          <Check />
-        </span>
-      {/if}
-    {/if}
-  </span>
-  <span class="val text-xs font-light">{val}</span>
+    <span class="flex flex-row items-center gap-1 w-52">
+        {label}
+        {#if val}
+            {#if state === "copy"}
+                <span
+                    class="cursor-pointer"
+                    on:click={() => copy(val)}
+                    on:keypress={() => copy(val)}
+                    in:fade={{ duration: 80, easing: quintIn }}
+                    out:fade={{ duration: 40, easing: quintIn }}
+                >
+                    <CopyIcon />
+                </span>
+            {:else}
+                <span out:fade={{ duration: 40, easing: quintIn }}>
+                    <Check />
+                </span>
+            {/if}
+        {/if}
+    </span>
+    <span class="val text-xs font-light">{val}</span>
 </div>
 
 <style>
-  .val {
-    width: 13rem;
-    word-wrap: break-word;
-    display: inline-block;
-  }
+    .val {
+        width: 13rem;
+        word-wrap: break-word;
+        display: inline-block;
+    }
 </style>

examples/websocket-relay/relay-app/src/components/node/Edge.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import { Edge } from "svelvet";
+
+  export let arrowDirection: string = 'left'
+</script>
+
+<Edge let:path labelColor="white">
+	<defs>
+		<marker
+			id="arrow"
+			viewBox="0 0 10 10"
+			refX="11"
+			refY="5"
+			markerWidth="6"
+			markerHeight="6"
+			orient="auto-start-reverse"
+      fill="#000000"
+		>
+			<path d="M 0 0 L 10 5 L 0 10 z" />
+		</marker>
+	</defs>
+	<path
+		d={path}
+    {...(arrowDirection === 'right' ? { 'marker-end': "url(#arrow)" } : { 'marker-start': "url(#arrow)" })}
+	/>
+</Edge>
+
+<style>
+  path {
+    stroke: #000000;
+    stroke-width: 2px;
+  }
+</style>

examples/websocket-relay/relay-app/src/components/node/Node.svelte

@@ -0,0 +1,123 @@
+<script lang="ts">
+  import { Anchor, Node } from "svelvet";
+  import type { CSSColorString } from "svelvet";
+
+  import { base64CatStore, edgeStore, firstWorkflowToRunStore } from "../../stores";
+  import type { Position } from "$lib/node";
+  import type { Task } from "$lib/task";
+  import Edge from "./Edge.svelte";
+
+  export let base64Cat: string = $base64CatStore;
+  export let bgColor: CSSColorString = "white";
+  export let borderColor: CSSColorString = "transparent";
+  export let dimensions = {
+    height: 150,
+    width: 150,
+  };
+  export let label = "Default Node";
+  export let tempcat = false;
+  export let id: string;
+  export let position: Position;
+  export let task: Task | null = null;
+
+  const matchingEdge = $edgeStore.find((edge) => edge?.target === id)
+</script>
+
+<Node
+  {id}
+  {...dimensions}
+  {bgColor}
+  {borderColor}
+  {label}
+  {position}
+>
+  <div class="relative w-full h-full">
+    {#if task === null}
+      {#if !tempcat}
+        <img
+          src={`data:image/png;base64,${base64Cat}`}
+          draggable="false"
+          alt="A cat in space chilling on a synth."
+        />
+        <Anchor
+          id="1-east"
+          multiple
+          invisible
+          direction="east"
+          dynamic
+        />
+      {:else}
+        <img
+          src={`data:image/png;base64,${base64Cat}`}
+          draggable="false"
+          alt="A cat in space chilling on a synth."
+        />
+        <Anchor
+          id={`${id}-west`}
+          multiple
+          invisible
+          direction="west"
+          connections={[["1", "1-east"]]}
+          dynamic
+        >
+          <Edge slot="edge" />
+        </Anchor>
+      {/if}
+    {:else if task.status === "replayed"}
+      <img
+        src={`data:image/png;base64,${task.receipt?.out[1]}`}
+        draggable="false"
+        style="filter: opacity(75%)"
+        alt={`A cat image after a ${task.operation} performed by Homestar. The operation was replayed.`}
+      />
+      {#if matchingEdge}
+        <!-- If difference between `target` and `source` is greater than 1, we're breaking to a new row, so we'll use north/south directions -->
+        {#if (matchingEdge.target - matchingEdge.source) > 1}
+          <Anchor
+            id={`${id}-north`}
+            multiple
+            invisible
+            direction="north"
+            connections={[[`${matchingEdge.source}`, `${matchingEdge.source}-south`]]}
+            edgeLabel={matchingEdge.label}
+            dynamic
+          >
+            <Edge slot="edge" />
+          </Anchor>
+        {:else}
+          <Anchor
+            id={`${id}-west`}
+            multiple
+            invisible
+            direction="west"
+            connections={[[`${matchingEdge.source}`, `${matchingEdge.source}-east`]]}
+            edgeLabel={matchingEdge.label}
+            dynamic
+          >
+            <Edge slot="edge" />
+          </Anchor>
+        {/if}
+      {/if}
+    {:else}
+      <img
+        src={`data:image/png;base64,${task.receipt?.out[1]}`}
+        draggable="false"
+        alt={`A cat image after a ${task.operation} performed by Homestar`}
+      />
+    {/if}
+    <Anchor
+      id={`${id}-east`}
+      multiple
+      invisible
+      direction="east"
+      dynamic
+    />
+    <Anchor
+      id={`${id}-south`}
+      multiple
+      invisible
+      direction="south"
+      dynamic
+    />
+  </div>
+</Node>

examples/websocket-relay/relay-app/src/lib/node.ts

@@ -0,0 +1,4 @@
+export type Position = {
+  x: number;
+  y: number;
+};