[app] Use hash to share data

Author: x0k

.changeset/lucky-olives-speak.md

@@ -0,0 +1,5 @@
+---
+"web": major
+---
+
+Use hash to share data

apps/web/src/main-page.svelte

@@ -20,6 +20,7 @@
   import { createPage } from "./lib/browser";
 
   import {
+    createShareUrl,
     fetchAsText,
     makeSource,
     resolveSource,
@@ -58,46 +59,23 @@
   }
 
   async function shareTable() {
-    const { value } = form;
-    if (value === undefined) {
+    const options = form.value;
+    if (options === undefined) {
       return;
     }
-    const url = new URL(window.location.href);
-    const { data } = source;
-    if (shareBehavior === ShareBehavior.CreateOnOpen) {
-      url.searchParams.set("createOnOpen", "true");
-    } else {
-      url.searchParams.delete("createOnOpen");
-    }
-    url.searchParams.set("options", compressor.compress(JSON.stringify(value)));
-    url.searchParams.set("data", data && compressor.compress(data));
-    const urlStr = url.toString();
-    copyTextToClipboard(urlStr)
-      .then(() => {
-        if (urlStr.length > 2000) {
-          window.alert("URL is too long");
-          // toast({
-          //   title: "URL is too long",
-          //   description:
-          //     "URL is copied to clipboard, but it's too long for a browsers",
-          //   status: "warning",
-          // });
-        } else {
-          window.alert("URL copied to the clipboard");
-          // toast({
-          //   title: "URL copied to clipboard",
-          //   status: "success",
-          // });
-        }
-      })
-      .catch((err): void => {
+    const sharedUrl = createShareUrl(compressor.compress, {
+      data: source.data,
+      options,
+      createOnOpen: shareBehavior === ShareBehavior.CreateOnOpen,
+    });
+    copyTextToClipboard(sharedUrl).then(
+      () => {
+        window.alert("URL copied to the clipboard");
+      },
+      (): void => {
         window.alert("Failed to copy URL to clipboard");
-        // toast({
-        //   title: "Failed to copy URL to clipboard",
-        //   status: "error",
-        //   description: String(err),
-        // });
-      });
+      }
+    );
   }
 
   let theme = $state<"light" | "dark" | "system">(
@@ -128,11 +106,6 @@
         })
         .catch((e) => {
           window.alert(String(e));
-          // toast({
-          //   title: "Error",
-          //   description: e,
-          //   status: "error",
-          // });
         });
     },
   });

apps/web/src/main.ts

@@ -5,13 +5,9 @@ import { isValidUrl } from "./lib/url";
 import MainPage from "./main-page.svelte";
 import DownloadTablePage from "./download-table-page.svelte";
 import HtmlTablePage from "./html-table-page.svelte";
-import {
-  OutputFormat,
-  type TransformConfig,
-  TransformPreset,
-} from "./core";
+import { OutputFormat, type TransformConfig, TransformPreset } from "./core";
 import { compressor, appWorker } from "./init";
-import { fetchAsText } from "./model";
+import { fetchAsText, type SharedData } from "./model";
 import "./app.css";
 
 const target = document.getElementById("app")!;
@@ -24,48 +20,43 @@ function page() {
     format: OutputFormat.HTML,
     paginate: false,
   };
-  const searchParams = new URLSearchParams(window.location.search);
-  if (searchParams.has("data")) {
-    try {
-      initialData = compressor.decompress(searchParams.get("data")!) || "";
-    } catch (error) {
-      console.error(error);
+  const hash = location.hash.substring(1);
+  if (hash !== "") {
+    const { data, options, createOnOpen }: SharedData = JSON.parse(
+      compressor.decompress(hash)
+    );
+    if (data) {
+      initialData = data;
     }
-  }
-  if (searchParams.has("options")) {
-    try {
-      initialOptions = JSON.parse(
-        compressor.decompress(searchParams.get("options")!)
-      );
-    } catch (error) {
-      console.error(error);
+    if (options) {
+      initialOptions = options;
     }
-  }
-  if (searchParams.get("createOnOpen") === "true") {
-    const table = isValidUrl(initialData)
-      ? fetchAsText(initialData).then((data) =>
-          appWorker.createTable({ data, config: initialOptions })
-        )
-      : appWorker.createTable({
-          data: initialData,
-          config: initialOptions,
-        });
-    switch (initialOptions.format) {
-      case OutputFormat.XLSX:
-        return mount(DownloadTablePage, {
-          target,
-          props: {
-            title: "table.xlsx",
-            content: table,
-          },
-        });
-      default:
-        return mount(HtmlTablePage, {
-          target,
-          props: {
-            content: table,
-          },
-        });
+    if (createOnOpen) {
+      const table = isValidUrl(initialData)
+        ? fetchAsText(initialData).then((data) =>
+            appWorker.createTable({ data, config: initialOptions })
+          )
+        : appWorker.createTable({
+            data: initialData,
+            config: initialOptions,
+          });
+      switch (initialOptions.format) {
+        case OutputFormat.XLSX:
+          return mount(DownloadTablePage, {
+            target,
+            props: {
+              title: "table.xlsx",
+              content: table,
+            },
+          });
+        default:
+          return mount(HtmlTablePage, {
+            target,
+            props: {
+              content: table,
+            },
+          });
+      }
     }
   }
   return mount(MainPage, {

apps/web/src/model.ts

@@ -5,7 +5,13 @@ import {
   ASCII_TABLE_FORMATS,
 } from "@json-table/core/block-to-ascii";
 
-import { OutputFormat, TransformPreset } from "./core";
+import { OutputFormat, TransformPreset, type TransformConfig } from "./core";
+
+export interface SharedData {
+  data: string;
+  options: TransformConfig;
+  createOnOpen: boolean;
+}
 
 export enum ShareBehavior {
   CreateOnOpen = "createOnOpen",
@@ -33,6 +39,16 @@ export type Source = {
     }
 );
 
+export function createShareUrl(
+  compress: (data: string) => string,
+  data: SharedData
+) {
+  const encoded = compress(JSON.stringify(data));
+  const url = new URL(location.href);
+  url.hash = encoded;
+  return url.toString();
+}
+
 export function makeSource(type: SourceType): Source {
   switch (type) {
     case SourceType.File: