⬆️ Move svg parsing to the frontend with Tubax

frontend/package.json

@@ -48,6 +48,7 @@
     "react-dom": "~17.0.1",
     "react-virtualized": "^9.22.3",
     "rxjs": "~7.0.1",
+    "sax": "^1.2.4",
     "source-map-support": "^0.5.16",
     "tdigest": "^0.1.1",
     "ua-parser-js": "^0.7.28",

frontend/shadow-cljs.edn

@@ -20,6 +20,7 @@
   [funcool/potok "4.0.0"]
   [funcool/promesa "6.0.0"]
   [funcool/rumext "2021.05.12-1"]
+  [funcool/tubax "2021.05.20-0"]
 
   [lambdaisland/uri "1.4.54"
    :exclusions [org.clojure/data.json]]

frontend/src/app/main/data/workspace/persistence.cljs

@@ -14,8 +14,8 @@
    [app.common.spec :as us]
    [app.common.uuid :as uuid]
    [app.main.data.dashboard :as dd]
-   [app.main.data.media :as di]
    [app.main.data.fonts :as df]
+   [app.main.data.media :as di]
    [app.main.data.messages :as dm]
    [app.main.data.workspace.changes :as dch]
    [app.main.data.workspace.common :as dwc]
@@ -39,7 +39,8 @@
    [clojure.set :as set]
    [cuerdas.core :as str]
    [potok.core :as ptk]
-   [promesa.core :as p]))
+   [promesa.core :as p]
+   [tubax.core :as tubax]))
 
 (declare persist-changes)
 (declare persist-sychronous-changes)
@@ -344,8 +345,12 @@
 
 (defn parse-svg
   [[name text]]
-  (->> (rp/query! :parsed-svg {:data text})
-       (rx/map #(assoc % :name name))))
+  (try
+    (->> (rx/of (-> (tubax/xml->clj text)
+                    (assoc :name name))))
+
+    (catch :default err
+      (rx/throw {:type :svg-parser}))))
 
 (defn fetch-svg [name uri]
   (->> (http/send! {:method :get :uri uri :mode :no-cors})

frontend/src/app/main/repo.cljs

@@ -110,14 +110,6 @@
                     :response-type :blob})
        (rx/mapcat handle-response)))
 
-(defmethod query :parsed-svg
-  [id params]
-  (->> (http/send! {:method :post
-                    :uri (u/join base-uri "api/rpc/query/" (name id))
-                    :body (http/transit-data params)})
-       (rx/map http/conditional-decode-transit)
-       (rx/mapcat handle-response)))
-
 (derive :upload-file-media-object ::multipart-upload)
 (derive :update-profile-photo ::multipart-upload)
 (derive :update-team-photo ::multipart-upload)

frontend/src/app/main/ui.cljs

@@ -240,6 +240,15 @@
      (js/console.error explain)))
   (js/console.groupEnd "Validation Error"))
 
+;; Error on parsing an SVG
+(defmethod ptk/handle-error :svg-parser
+  [error]
+  (ts/schedule
+   (st/emitf
+    (dm/show {:content "SVG is invalid or malformed"
+              :type :error
+              :timeout 3000}))))
+
 ;; This is a pure frontend error that can be caused by an active
 ;; assertion (assertion that is preserved on production builds). From
 ;; the user perspective this should be treated as internal error.

frontend/vendor/tubax/saxjs.cljs

@@ -0,0 +1,4 @@
+(ns tubax.saxjs
+  (:require ["sax" :as sax]))
+
+(goog/exportSymbol "sax" sax)

frontend/yarn.lock

@@ -4478,7 +4478,7 @@ sass@^1.32.8:
   dependencies:
     chokidar ">=3.0.0 <4.0.0"
 
-sax@~1.2.4:
+sax@^1.2.4, sax@~1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==