@nil-/xit 0.4.12 → 0.4.14

package/test/Frame.svelte

@@ -1,63 +1,103 @@
-<script lang="ts">import { xit } from "..";
-import { get } from "svelte/store";
-let {
-  decoder,
-  selected = -1,
-  load
-} = $props();
-let { signals, values, load_frame_data, load_frame_ui } = xit();
-const frame_info = async (tag, decoder2) => {
-  const { values: values2, unsub } = await load_frame_data("frame_info", tag);
-  const load2 = async (key) => {
-    const v = values2.json(key, [], {
-      decode: decoder2,
-      encode: () => {
-        return new Uint8Array();
-      }
+<script lang="ts">
+    import { xit, type CoDec, type Action } from "..";
+    import { get } from "svelte/store";
+
+    import type { Snippet } from "svelte";
+
+    type ActionItem = {
+        name: string;
+        action: Action<HTMLElement>;
+        url: (tag: string) => string;
+    };
+
+    type Props = {
+        decoder: CoDec<any>["decode"];
+        selected?: number;
+        load: Snippet<
+            [
+                {
+                    tags: string[];
+                    inputs: ActionItem[];
+                    outputs: ActionItem[];
+                }
+            ]
+        >;
+    };
+
+    let { decoder, selected = $bindable(-1), load }: Props = $props();
+
+    let { signals, values, load_frame_data, load_frame_ui } = xit();
+
+    const frame_info = async (tag: string, decoder: CoDec<any>["decode"]) => {
+        const { values, unsub } = await load_frame_data("frame_info", tag);
+        const load = async (key: string) => {
+            const v = values.json(key, [] as string[], {
+                decode: decoder,
+                encode: () => {
+                    return new Uint8Array();
+                }
+            });
+            return Promise.all(
+                get(v)
+                    .map((v) => {
+                        const [frame_id, mark, g] = v.split(":");
+                        if (g !== "V") {
+                            return;
+                        }
+                        if (mark === "T") {
+                            return load_frame_ui(frame_id, tag).then((f) => {
+                                return {
+                                    name: frame_id,
+                                    action: f,
+                                    url: (tag) => `/?frame=${frame_id}&tag=${tag}`
+                                } satisfies ActionItem;
+                            });
+                        } else if (mark === "U") {
+                            return load_frame_ui(frame_id).then((f) => {
+                                return {
+                                    name: frame_id,
+                                    action: f,
+                                    url: (tag) => `/?frame=${frame_id}`
+                                } satisfies ActionItem;
+                            });
+                        }
+                    })
+                    .filter((v) => v != null)
+            );
+        };
+        const [inputs, outputs] = await Promise.all([load("inputs"), load("outputs")]);
+        unsub();
+        return { inputs, outputs };
+    };
+
+    const tags = values.json("tags", [] as string[], {
+        decode: decoder,
+        encode: () => new Uint8Array()
     });
-    return Promise.all(
-      get(v).map((v2) => {
-        const [frame_id, mark, g] = v2.split(":");
-        if (g !== "V") {
-          return;
-        }
-        if (mark === "T") {
-          return load_frame_ui(frame_id, tag).then((f) => {
-            return { name: frame_id, action: f };
-          });
-        } else if (mark === "U") {
-          return load_frame_ui(frame_id).then((f) => {
-            return { name: frame_id, action: f };
-          });
+
+    if ($tags.length > 0) {
+        selected = 0;
+    }
+
+    const finalize = signals.string("finalize");
+
+    let a_inputs = $state([] as ActionItem[]);
+    let a_outputs = $state([] as ActionItem[]);
+    let title = $derived(selected > $tags.length ? "" : $tags[selected]);
+    const update = async (v: number) => {
+        a_inputs = [];
+        a_outputs = [];
+        const t = $tags;
+        if (0 <= v && v < t.length) {
+            const { inputs, outputs } = await frame_info(t[v], decoder);
+            a_inputs = inputs;
+            a_outputs = outputs;
         }
-      }).filter((v2) => v2 != null)
-    );
-  };
-  const [inputs, outputs] = await Promise.all([load2("inputs"), load2("outputs")]);
-  unsub();
-  return { inputs, outputs };
-};
-const tags = values.json("tags", [], {
-  decode: decoder,
-  encode: () => new Uint8Array()
-});
-const finalize = signals.string("finalize");
-let a_inputs = $state([]);
-let a_outputs = $state([]);
-let title = $derived(selected > $tags.length ? "" : $tags[selected]);
-const update = async (v) => {
-  a_inputs = [];
-  a_outputs = [];
-  const t = $tags;
-  if (0 <= v && v < t.length) {
-    const { inputs, outputs } = await frame_info(t[v], decoder);
-    a_inputs = inputs;
-    a_outputs = outputs;
-  }
-};
-$effect(() => {
-  update(selected);
-});
+    };
+
+    $effect(() => {
+        update(selected);
+    });
 </script>
 
 <svelte:head>

package/test/Frame.svelte.d.ts

@@ -3,8 +3,9 @@ import type { Snippet } from "svelte";
 type ActionItem = {
     name: string;
     action: Action<HTMLElement>;
+    url: (tag: string) => string;
 };
-type $$ComponentProps = {
+type Props = {
     decoder: CoDec<any>["decode"];
     selected?: number;
     load: Snippet<[
@@ -15,6 +16,6 @@ type $$ComponentProps = {
         }
     ]>;
 };
-declare const Frame: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const Frame: import("svelte").Component<Props, {}, "selected">;
 type Frame = ReturnType<typeof Frame>;
 export default Frame;

package/test/Main.svelte

@@ -1,22 +1,18 @@
-<script lang="ts">import TestFrame from "./Frame.svelte";
-import Split from "../components/layouts/Split.svelte";
-import Scrollable from "../components/layouts/Scrollable.svelte";
-import { config } from "$xit/config.js";
-let { children } = $props();
-let selected = $state(-1);
+<script lang="ts">
+    import TestFrame from "./Frame.svelte";
+    import Split from "../components/layouts/Split.svelte";
+    import Scrollable from "../components/layouts/Scrollable.svelte";
+
+    import type { Snippet } from "svelte";
+
+    import { config } from "$xit/config.js";
+
+    let { children }: { children?: Snippet<[string]> } = $props();
+
+    let selected = $state(-1);
 </script>
 
-{#snippet combo(tags: string[])}
-    <div class="combo">
-        <select bind:value={selected}>
-            {#each tags as id, i}
-                <option value={i}>{id}</option>
-            {/each}
-        </select>
-    </div>
-{/snippet}
-
-<TestFrame decoder={config.codec.decode} {selected}>
+<TestFrame decoder={config.codec.decode} bind:selected>
     {#snippet load({ tags, inputs, outputs })}
         <Scrollable>
             <Split vertical offset={200}>
@@ -30,11 +26,21 @@ let selected = $state(-1);
                     </Scrollable>
                 {/snippet}
                 {#snippet side_b()}
-                    {@render combo(tags)}
+                    <div class="combo">
+                        <select bind:value={selected}>
+                            {#each tags as id, i}
+                                <option value={i}>{id}</option>
+                            {/each}
+                        </select>
+                    </div>
+                    {#if 0 <= selected && selected < tags.length }
                     {@render children?.(tags[selected])}
-                    {#each inputs as { name }}
-                        <a href={`/?frame=${name}&tag=${tags[selected]}`} target="_blank">{name}</a>
-                    {/each}
+                        <div style="display: flex; flex-direction: column;">
+                            {#each inputs as { name, url }}
+                                <a href={url(tags[selected])} target="_blank">{name}</a>
+                            {/each}
+                        </div>
+                    {/if}
                 {/snippet}
             </Split>
         </Scrollable>