From fcdae270b74f00e61951aae36515f5943c5b7c17 Mon Sep 17 00:00:00 2001
From: Yanick Champoux <yanick@babyl.ca>
Date: Mon, 24 Apr 2023 11:47:38 -0400
Subject: [PATCH] conflagrate exports

---
 src/lib/actions/clipboard.js                  | 27 +++++++++
 src/lib/store/api.ts                          | 10 +++-
 src/params/outputFormat.js                    |  4 ++
 src/routes/export/+layout.svelte              |  1 +
 .../export/[format=outputFormat]/+page.js     |  6 ++
 .../export/[format=outputFormat]/+page.svelte | 21 +++++++
 .../Serialized.svelte}                        | 20 +++----
 src/routes/export/yaml/+page.svelte           | 60 -------------------
 8 files changed, 74 insertions(+), 75 deletions(-)
 create mode 100644 src/lib/actions/clipboard.js
 create mode 100644 src/params/outputFormat.js
 create mode 100644 src/routes/export/[format=outputFormat]/+page.js
 create mode 100644 src/routes/export/[format=outputFormat]/+page.svelte
 rename src/routes/export/{json/+page.svelte => [format=outputFormat]/Serialized.svelte} (66%)
 delete mode 100644 src/routes/export/yaml/+page.svelte

diff --git a/src/lib/actions/clipboard.js b/src/lib/actions/clipboard.js
new file mode 100644
index 0000000..410fc52
--- /dev/null
+++ b/src/lib/actions/clipboard.js
@@ -0,0 +1,27 @@
+// stolen from svelte-copy-clipboard-action
+
+export function clipboard(node, { trigger = "click", text = "" } = {}) {
+    const handle = async (e) => {
+        await navigator.clipboard.writeText(text).then(
+            () =>
+                node.dispatchEvent(
+                    new CustomEvent("copied", { detail: { clipboard: text } })
+                ),
+            (e) =>
+                node.dispatchEvent(new CustomEvent("error", { detail: { error: e } }))
+        );
+    };
+
+    node.addEventListener(trigger, handle, true);
+
+    return {
+        update: (params) => {
+            if (params.trigger !== undefined) trigger = params.trigger;
+
+            if (params.text !== undefined) text = params.text;
+        },
+        destroy() {
+            node.removeEventListener(trigger, handle, true);
+        },
+    };
+}
diff --git a/src/lib/store/api.ts b/src/lib/store/api.ts
index ff43570..997ec61 100644
--- a/src/lib/store/api.ts
+++ b/src/lib/store/api.ts
@@ -1,5 +1,6 @@
 import ship from "./ship";
 import { browser } from "$app/environment";
+import { writable } from "svelte/store";
 
 export type Api = ReturnType<typeof ship.createStore>;
 
@@ -14,12 +15,17 @@ export const createApi = () => {
 
   api.dispatch.restore(state);
 
+  const svelteStore = writable(state);
+
   if (browser) {
     api.subscribe(() => {
-      console.log("saving...", api.getState());
-      localStorage.setItem("ship", JSON.stringify(api.getState()));
+      const state = api.getState();
+      svelteStore.set(state);
+      localStorage.setItem("ship", JSON.stringify(state));
     });
   }
 
+  api.svelteStore = svelteStore;
+
   return api;
 };
diff --git a/src/params/outputFormat.js b/src/params/outputFormat.js
new file mode 100644
index 0000000..4c040ea
--- /dev/null
+++ b/src/params/outputFormat.js
@@ -0,0 +1,4 @@
+/** @type {import('@sveltejs/kit').ParamMatcher} */
+export function match(param) {
+    return ["json", "yaml"].includes(param);
+}
diff --git a/src/routes/export/+layout.svelte b/src/routes/export/+layout.svelte
index d561c3c..45a92fd 100644
--- a/src/routes/export/+layout.svelte
+++ b/src/routes/export/+layout.svelte
@@ -1,4 +1,5 @@
 <nav class="m l left">
+  <!-- set them as active -->
   <a href="/export/json">
     <i>output</i>
     <span>json</span>
diff --git a/src/routes/export/[format=outputFormat]/+page.js b/src/routes/export/[format=outputFormat]/+page.js
new file mode 100644
index 0000000..96002e4
--- /dev/null
+++ b/src/routes/export/[format=outputFormat]/+page.js
@@ -0,0 +1,6 @@
+/** @type {import('./$types').PageLoad} */
+export function load({ params }) {
+  return {
+    format: params.format,
+  };
+}
diff --git a/src/routes/export/[format=outputFormat]/+page.svelte b/src/routes/export/[format=outputFormat]/+page.svelte
new file mode 100644
index 0000000..40ced7a
--- /dev/null
+++ b/src/routes/export/[format=outputFormat]/+page.svelte
@@ -0,0 +1,21 @@
+<Serialized data={serializedShip} format={data.format} />
+
+<script>
+  import { getContext } from "svelte";
+
+  import Serialized from "./Serialized.svelte";
+
+  const api = getContext("api");
+
+  let shipData = api.svelteStore;
+  export let data;
+
+  const serialize = async (data, format) => {
+    if (format === "json") return JSON.stringify(data, null, 2);
+
+    return import("yaml").then(({ stringify }) => stringify(data));
+  };
+
+  let serializedShip;
+  $: serialize($shipData, data.format).then((s) => (serializedShip = s));
+</script>
diff --git a/src/routes/export/json/+page.svelte b/src/routes/export/[format=outputFormat]/Serialized.svelte
similarity index 66%
rename from src/routes/export/json/+page.svelte
rename to src/routes/export/[format=outputFormat]/Serialized.svelte
index 63b1e12..b2f5d07 100644
--- a/src/routes/export/json/+page.svelte
+++ b/src/routes/export/[format=outputFormat]/Serialized.svelte
@@ -1,25 +1,21 @@
 <article>
   <nav>
     <button
-      use:clipboard={{ text: shipJson }}
+      use:clipboard={{ text: data }}
       on:copied={copied}
       on:error={copyError}>{copyLabel} <i>content_paste</i></button
     >
     <button on:click={handleSave}>download <i>download</i></button>
   </nav>
-  <pre><code>{shipJson}</code></pre>
+  <pre><code>{data}</code></pre>
   <a hidden {href} {download} bind:this={fileDownload} />
 </article>
 
 <script>
-  import { getContext } from "svelte";
-  import { clipboard } from "svelte-copy-clipboard-action";
+  import { clipboard } from "$lib/actions/clipboard.js";
 
-  // TODO copy
-  const api = getContext("api");
-
-  let shipData = api.getState();
-  api.subscribe(() => (shipDate = api.getState()));
+  export let data = "Loading...";
+  export let format;
 
   let copyLabel = "clipboard";
 
@@ -33,10 +29,8 @@
     setTimeout(() => (copyLabel = "clipboard"), 2000);
   };
 
-  $: shipJson = JSON.stringify(shipData, null, 2);
-
-  $: href = "data:text/plain;charset=utf-8," + encodeURIComponent(shipJson);
-  $: download = (shipData?.identification?.shipClass || "ship") + ".json";
+  $: href = "data:text/plain;charset=utf-8," + encodeURIComponent(data);
+  $: download = (data?.identification?.shipClass || "ship") + "." + format;
 
   let fileDownload;
 
diff --git a/src/routes/export/yaml/+page.svelte b/src/routes/export/yaml/+page.svelte
deleted file mode 100644
index 959c0f6..0000000
--- a/src/routes/export/yaml/+page.svelte
+++ /dev/null
@@ -1,60 +0,0 @@
-<article>
-  <nav>
-    <button
-      use:clipboard={{ text: shipJson }}
-      on:copied={copied}
-      on:error={copyError}>{copyLabel} <i>content_paste</i></button
-    >
-    <button on:click={handleSave}>download <i>download</i></button>
-  </nav>
-  <pre><code>{shipJson}</code></pre>
-  <a hidden {href} {download} bind:this={fileDownload} />
-</article>
-
-<script>
-  import { getContext } from "svelte";
-  import { clipboard } from "svelte-copy-clipboard-action";
-  import { stringify } from "yaml";
-
-  // TODO copy
-  const api = getContext("api");
-
-  let shipData = api.getState();
-  api.subscribe(() => (shipDate = api.getState()));
-
-  let copyLabel = "clipboard";
-
-  const copied = () => {
-    copyLabel = "copied!";
-    setTimeout(() => (copyLabel = "clipboard"), 2000);
-  };
-
-  const copyError = () => {
-    copyLabel = "error copying";
-    setTimeout(() => (copyLabel = "clipboard"), 2000);
-  };
-
-  $: shipJson = stringify(shipData, null, 2);
-
-  $: href = "data:text/plain;charset=utf-8," + encodeURIComponent(shipJson);
-  $: download = (shipData?.identification?.shipClass || "ship") + ".yml";
-
-  let fileDownload;
-
-  function handleSave() {
-    fileDownload?.click();
-  }
-</script>
-
-<style>
-  article {
-    background-color: var(--primary-container);
-  }
-  button {
-    font-size: var(--font-scale-10);
-  }
-  nav {
-    position: absolute;
-    right: 5em;
-  }
-</style>