From 48f4a63b6b702a7c91ab23c98038e2bbc0d88d59 Mon Sep 17 00:00:00 2001
From: Artemy Egorov <artegoser@gmail.com>
Date: Sun, 28 Jul 2024 22:39:55 +0300
Subject: [PATCH] feat: dalet renderer

---
 package.json                                  |  3 ++-
 pnpm-lock.yaml                                | 15 +++++++++++++
 src/lib/components/BrowserWindow.svelte       | 18 +++++++++++++++
 .../DaletlRenderer/BodyRenderer.svelte        | 15 +++++++++++++
 .../components/DaletlRenderer/Renderer.svelte | 10 +++++++++
 .../DaletlRenderer/TagRenderer.svelte         | 10 +++++++++
 .../DaletlRenderer/tags/Element.svelte        |  8 +++++++
 src/lib/components/Sidebar.svelte             | 16 ++++++++++++++
 src/lib/components/TopBar.svelte              |  3 +--
 src/routes/+page.svelte                       | 22 ++++++-------------
 10 files changed, 102 insertions(+), 18 deletions(-)
 create mode 100644 src/lib/components/BrowserWindow.svelte
 create mode 100644 src/lib/components/DaletlRenderer/BodyRenderer.svelte
 create mode 100644 src/lib/components/DaletlRenderer/Renderer.svelte
 create mode 100644 src/lib/components/DaletlRenderer/TagRenderer.svelte
 create mode 100644 src/lib/components/DaletlRenderer/tags/Element.svelte
 create mode 100644 src/lib/components/Sidebar.svelte

diff --git a/package.json b/package.json
index 7a2f3db..e30b309 100644
--- a/package.json
+++ b/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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 01a135f..8e43a44 100644
--- a/pnpm-lock.yaml
+++ b/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: {}
diff --git a/src/lib/components/BrowserWindow.svelte b/src/lib/components/BrowserWindow.svelte
new file mode 100644
index 0000000..55fe64c
--- /dev/null
+++ b/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>
diff --git a/src/lib/components/DaletlRenderer/BodyRenderer.svelte b/src/lib/components/DaletlRenderer/BodyRenderer.svelte
new file mode 100644
index 0000000..0dcda38
--- /dev/null
+++ b/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}
diff --git a/src/lib/components/DaletlRenderer/Renderer.svelte b/src/lib/components/DaletlRenderer/Renderer.svelte
new file mode 100644
index 0000000..4f8326c
--- /dev/null
+++ b/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}
diff --git a/src/lib/components/DaletlRenderer/TagRenderer.svelte b/src/lib/components/DaletlRenderer/TagRenderer.svelte
new file mode 100644
index 0000000..942494f
--- /dev/null
+++ b/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}
diff --git a/src/lib/components/DaletlRenderer/tags/Element.svelte b/src/lib/components/DaletlRenderer/tags/Element.svelte
new file mode 100644
index 0000000..aa2d7d5
--- /dev/null
+++ b/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>
diff --git a/src/lib/components/Sidebar.svelte b/src/lib/components/Sidebar.svelte
new file mode 100644
index 0000000..e8356e0
--- /dev/null
+++ b/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>
diff --git a/src/lib/components/TopBar.svelte b/src/lib/components/TopBar.svelte
index ff84c88..68fc069 100644
--- a/src/lib/components/TopBar.svelte
+++ b/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}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 4fd8a20..50aafac 100644
--- a/src/routes/+page.svelte
+++ b/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 { slide } from "svelte/transition";
+  import Sidebar from "$lib/components/Sidebar.svelte";
+  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>
-    {#if sidebarOpen}
-      <div transition:slide={{ axis: "x", duration: 100 }}>
-        <WindowControls />
-      </div>
-    {/if}
-  </Block>
+  <Sidebar bind:sidebarOpen />
 
   <div class="main-window">
-    <TopBar
-      bind:sidebarOpen
-      onSidebarToggle={() => (sidebarOpen = !sidebarOpen)}
-    />
-    <Block className="browser-window">Browser window</Block>
+    <TopBar bind:sidebarOpen />
+    <BrowserWindow {data} />
   </div>
 </div>