feat: compress the txs & query params

fixes: #45

package.json

@@ -24,6 +24,7 @@
     "@uiw/react-codemirror": "^4.22.1",
     "framer-motion": "^11.5.4",
     "highlight.js": "^11.10.0",
+    "lz-string": "^1.5.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-scripts": "^5.0.1",

src/cljs/xt_play/app.cljs

@@ -8,7 +8,8 @@
             [xt-play.model.query :as query]
             [xt-play.model.query-params :as query-params]
             [xt-play.model.tx-batch :as tx-batch]
-            [xt-play.view :as view]))
+            [xt-play.view :as view]
+            ["lz-string" :as lz-string]))
 
 (glogi-console/install!)
 
@@ -17,23 +18,31 @@
 
 ;; 'my.app.thing :trace  ;; Some namespaces you might want detailed logging
 
+(defn- decompress-params [{:keys [uri-version] :as query-params}]
+  (let [decompress (case uri-version
+                     "1" lz-string/decompressFromEncodedURIComponent
+                     ;; default
+                     js/atob)
+        maybe-decompress #(when % (decompress %))]
+    (-> query-params
+        (update :txs maybe-decompress)
+        (update :query maybe-decompress))))
+
 ;; TODO: Special case existing txs
 (defn- param-decode [s]
-  (let [txs (-> s js/atob js/JSON.parse (js->clj :keywordize-keys true))]
+  (let [txs (-> s js/JSON.parse (js->clj :keywordize-keys true))]
     (->> txs
          (map #(update % :system-time (fn [d] (when d (js/Date. d))))))))
 
 (rf/reg-event-fx
   ::init
   [(rf/inject-cofx ::query-params/get)]
   (fn [{:keys [query-params]} [_ xt-version]]
-    (let [{:keys [type txs query]} query-params
+    (let [{:keys [type txs query]} (decompress-params query-params)
           type (if type (keyword type) :sql)]
       {:db {:version xt-version
             :type type
-            :query (if query
-                     (js/atob query)
-                     (query/default type))}
+            :query (or query (query/default type))}
        :dispatch [::tx-batch/init
                   (if txs
                     (param-decode txs)

src/cljs/xt_play/model/client.cljs

@@ -5,7 +5,8 @@
             [xt-play.model.href :as href]
             [xt-play.model.query :as query]
             [xt-play.model.query-params :as query-params]
-            [xt-play.model.tx-batch :as tx-batch]))
+            [xt-play.model.tx-batch :as tx-batch]
+            ["lz-string" :as lz-string]))
 
 (rf/reg-event-db
   :hide-copy-tick
@@ -25,15 +26,16 @@
   :-> :copy-tick)
 
 (defn- param-encode [tx-batches]
-  (-> tx-batches clj->js js/JSON.stringify js/btoa))
+  (-> tx-batches clj->js js/JSON.stringify lz-string/compressToEncodedURIComponent))
 
 (rf/reg-event-fx
  :update-url
  (fn [{:keys [db]} _]
-   {::query-params/set {:version (:version db)
+   {::query-params/set {:uri-version "1"
+                        :version (:version db)
                         :type (name (:type db))
                         :txs (param-encode (tx-batch/batch-list db))
-                        :query (js/btoa (:query db))}}))
+                        :query (lz-string/compressToEncodedURIComponent (:query db))}}))
 
 (rf/reg-event-fx
   :dropdown-selection

yarn.lock

@@ -9527,6 +9527,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lz-string@npm:^1.5.0":
+  version: 1.5.0
+  resolution: "lz-string@npm:1.5.0"
+  bin:
+    lz-string: bin/bin.js
+  checksum: 1ee98b4580246fd90dd54da6e346fb1caefcf05f677c686d9af237a157fdea3fd7c83a4bc58f858cd5b10a34d27afe0fdcbd0505a47e0590726a873dc8b8f65d
+  languageName: node
+  linkType: hard
+
 "magic-string@npm:^0.25.0, magic-string@npm:^0.25.7":
   version: 0.25.9
   resolution: "magic-string@npm:0.25.9"
@@ -14666,6 +14675,7 @@ __metadata:
     "@uiw/react-codemirror": ^4.22.1
     framer-motion: ^11.5.4
     highlight.js: ^11.10.0
+    lz-string: ^1.5.0
     react: ^18.3.1
     react-dom: ^18.3.1
     react-scripts: ^5.0.1