Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110<script module lang="ts"> import { tv } from "tailwind-variants";
const treeRow = tv({ slots: { root: "pt-1 pr-4 pb-8 pl-1.5", row: "group my-0.5 inline-flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-foreground-default transition-colors hover:bg-background-subtle", icon: "size-4 shrink-0 text-foreground-placeholder transition-colors group-hover:text-foreground-default", name: "truncate select-none", children: "ml-4 border-l border-border-subtle pl-2" }, variants: { kind: { dir: { row: "cursor-pointer list-none", name: "text-foreground-muted group-hover:text-inherit" }, file: { row: "flex items-center gap-2" } } } });
interface TreeDir { type: "dir"; name: string; path: string; children: TreeNode[]; }
interface TreeFile { type: "file"; name: string; path: string; }
type TreeNode = TreeDir | TreeFile;
const buildTree = (paths: string[]): TreeNode[] => { const roots: TreeNode[] = []; const dirs: Record<string, TreeDir> = Object.create(null); for (const path of paths) { const parts = path.split("/"); let siblings = roots; let prefix = ""; for (const dir of parts.slice(0, -1)) { prefix = prefix ? `${prefix}/${dir}` : dir; let node = dirs[prefix]; if (!node) { node = { type: "dir", name: dir, path: prefix, children: [] }; dirs[prefix] = node; siblings.push(node); } siblings = node.children; } siblings.push({ type: "file", name: parts.at(-1) ?? path, path }); } return roots; };</script>
<script lang="ts"> import File from "$icon/file"; import Folder from "$icon/folder"; import FolderOpen from "$icon/folder-open";
interface Props { // full slash-separated paths. anchors point at `#file-<path>` files: { name: string }[]; }
let { files }: Props = $props();
const tree = $derived(buildTree(files.map((file) => file.name)));
let closed = $state<Record<string, boolean>>({});
const dir = treeRow({ kind: "dir" }); const file = treeRow({ kind: "file" });</script>
{#snippet nodes(list: TreeNode[])} {#each list as node (node.path)} {#if node.type === "dir"} {@const open = !closed[node.path]} <details {open} ontoggle={(e) => (closed[node.path] = !e.currentTarget.open)}> <summary class={dir.row()}> {#if open} <FolderOpen class={dir.icon()} aria-hidden="true" /> {:else} <Folder class={dir.icon()} aria-hidden="true" /> {/if} <span class={dir.name()}>{node.name}</span> </summary> <div class={dir.children()}> {@render nodes(node.children)} </div> </details> {:else} <a href="#file-{node.path}" class={file.row()}> <File class={file.icon()} aria-hidden="true" /> <span class={file.name()}>{node.name}</span> </a> {/if} {/each}{/snippet}
<div class={dir.root()}> {@render nodes(tree)}</div>