feat: dalet renderer

package.json

@@ -13,7 +13,8 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@tauri-apps/api": "^1"
+    "@tauri-apps/api": "^1",
+    "@txtdot/dalet": "1.0.0-pre1"
   },
   "devDependencies": {
     "@iconify/svelte": "^4.0.2",

pnpm-lock.yaml

@@ -11,6 +11,9 @@ importers:
       '@tauri-apps/api':
         specifier: ^1
         version: 1.6.0
+      '@txtdot/dalet':
+        specifier: 1.0.0-pre1
+        version: 1.0.0-pre1
     devDependencies:
       '@iconify/svelte':
         specifier: ^4.0.2
@@ -427,6 +430,9 @@ packages:
     engines: {node: '>= 10'}
     hasBin: true
 
+  '@txtdot/dalet@1.0.0-pre1':
+    resolution: {integrity: sha512-dzEbI6wc8EmPH+WJD53h0IxOnfGL0S4Wx6P0sgKm+NTBolcWFMNuiz9c6j0uaUWsBpy/WHE3OyAAWcD4KUE6Hg==}
+
   '@types/cookie@0.6.0':
     resolution: {integrity: sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==}
 
@@ -1139,6 +1145,9 @@ packages:
     engines: {node: '>= 14'}
     hasBin: true
 
+  zod@3.23.8:
+    resolution: {integrity: sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==}
+
 snapshots:
 
   '@alloc/quick-lru@5.2.0': {}
@@ -1405,6 +1414,10 @@ snapshots:
       '@tauri-apps/cli-win32-ia32-msvc': 1.6.0
       '@tauri-apps/cli-win32-x64-msvc': 1.6.0
 
+  '@txtdot/dalet@1.0.0-pre1':
+    dependencies:
+      zod: 3.23.8
+
   '@types/cookie@0.6.0': {}
 
   '@types/estree@1.0.5': {}
@@ -2090,3 +2103,5 @@ snapshots:
   wrappy@1.0.2: {}
 
   yaml@2.5.0: {}
+
+  zod@3.23.8: {}

src/lib/components/BrowserWindow.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import type { Root } from "@txtdot/dalet";
+  import Block from "./Block.svelte";
+  import Renderer from "./DaletlRenderer/Renderer.svelte";
+
+  export let data: Root;
+  export let isLoading = false;
+</script>
+
+<Block className="browser-window">
+  {#if isLoading && data.length === 0}
+    <div>Loading...</div>
+  {:else if !isLoading && data.length === 0}
+    <div>No data</div>
+  {:else}
+    <Renderer {data} />
+  {/if}
+</Block>

src/lib/components/DaletlRenderer/BodyRenderer.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import type { Body } from "@txtdot/dalet";
+  import TagRenderer from "./TagRenderer.svelte";
+  import Element from "./tags/Element.svelte";
+
+  export let body: Body;
+</script>
+
+{#if typeof body === "string"}
+  <Element {body} />
+{:else if body !== null}
+  {#each body as tag}
+    <TagRenderer {tag} />
+  {/each}
+{/if}

src/lib/components/DaletlRenderer/Renderer.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import type { Root } from "@txtdot/dalet";
+  import TagRenderer from "./TagRenderer.svelte";
+
+  export let data: Root = [];
+</script>
+
+{#each data as tag}
+  <TagRenderer {tag} />
+{/each}

src/lib/components/DaletlRenderer/TagRenderer.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import type { Tag } from "@txtdot/dalet";
+  import Element from "./tags/Element.svelte";
+
+  export let tag: Tag;
+</script>
+
+{#if tag.id === 0}
+  <Element body={tag.body} />
+{/if}

src/lib/components/DaletlRenderer/tags/Element.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  import type { Body, Tag } from "@txtdot/dalet";
+  import BodyRenderer from "../BodyRenderer.svelte";
+
+  export let body: Body;
+</script>
+
+<section class="el"><BodyRenderer {body} /></section>

src/lib/components/Sidebar.svelte

@@ -0,0 +1,16 @@
+<script>
+  import { slide } from "svelte/transition";
+
+  import Block from "./Block.svelte";
+  import WindowControls from "./WindowControls.svelte";
+
+  export let sidebarOpen = true;
+</script>
+
+<Block className={`sidebar${sidebarOpen ? "" : " collapsed"}`} draggable>
+  {#if sidebarOpen}
+    <div transition:slide={{ axis: "x", duration: 100 }}>
+      <WindowControls />
+    </div>
+  {/if}
+</Block>

src/lib/components/TopBar.svelte

@@ -7,7 +7,6 @@
   import Block from "./Block.svelte";
   import Button from "./Button.svelte";
 
-  export let onSidebarToggle = () => {};
   export let onBack = () => {};
   export let onForward = () => {};
   export let onInput = () => {};
@@ -20,7 +19,7 @@
 
 <div class="top-bar">
   <Block className="flex">
-    <Button onClick={onSidebarToggle}>
+    <Button onClick={() => (sidebarOpen = !sidebarOpen)}>
       {#if sidebarOpen}
         <SidebarLeft />
       {:else}

src/routes/+page.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
   import "../app.css";
 
-  import Block from "$lib/components/Block.svelte";
   import TopBar from "$lib/components/TopBar.svelte";
-  import WindowControls from "$lib/components/WindowControls.svelte";
+  import Sidebar from "$lib/components/Sidebar.svelte";
-  import { slide } from "svelte/transition";
+  import BrowserWindow from "$lib/components/BrowserWindow.svelte";
+  import type { Root } from "@txtdot/dalet";
 
   let sidebarOpen = true;
+  let data: Root = [];
 
   document.addEventListener("keypress", (e: KeyboardEvent) => {
     const formElements = ["INPUT", "TEXTAREA", "SELECT", "OPTION"];
@@ -18,19 +19,10 @@
 </script>
 
 <div class="common-window" data-tauri-drag-region>
-  <Block className={`sidebar${sidebarOpen ? "" : " collapsed"}`} draggable>
+  <Sidebar bind:sidebarOpen />
-    {#if sidebarOpen}
-      <div transition:slide={{ axis: "x", duration: 100 }}>
-        <WindowControls />
-      </div>
-    {/if}
-  </Block>
 
   <div class="main-window">
-    <TopBar
+    <TopBar bind:sidebarOpen />
-      bind:sidebarOpen
+    <BrowserWindow {data} />
-      onSidebarToggle={() => (sidebarOpen = !sidebarOpen)}
-    />
-    <Block className="browser-window">Browser window</Block>
   </div>
 </div>