⚡ Don't use data-uris for resources

frontend/src/app/main/ui/shapes/custom_stroke.cljs

@@ -16,7 +16,6 @@
    [app.config :as cf]
    [app.main.ui.context :as muc]
    [app.main.ui.shapes.attrs :as attrs]
-   [app.main.ui.shapes.embed :as embed]
    [app.main.ui.shapes.gradients :as grad]
    [app.util.object :as obj]
    [cuerdas.core :as str]
@@ -212,7 +211,6 @@
                            :shape shape}
         stroke-image  (:stroke-image stroke)
         uri           (when stroke-image (cf/resolve-file-media stroke-image))
-        embed         (embed/use-data-uris [uri])
 
         stroke-width  (case (:stroke-alignment stroke :center)
                         :center (/ (:stroke-width stroke 0) 2)
@@ -229,7 +227,7 @@
 
         w             (+ (dm/get-prop selrect :width) (* 2 stroke-margin))
         h             (+ (dm/get-prop selrect :height) (* 2 stroke-margin))
-        image-props   #js {:href (get embed uri uri)
+        image-props   #js {:href uri
                            :preserveAspectRatio "xMidYMid slice"
                            :width 1
                            :height 1

frontend/src/app/main/ui/shapes/fills.cljs

@@ -9,9 +9,8 @@
    [app.common.data :as d]
    [app.common.data.macros :as dm]
    [app.common.geom.shapes :as gsh]
-   [app.config :as cfg]
+   [app.config :as cf]
    [app.main.ui.shapes.attrs :as attrs]
-   [app.main.ui.shapes.embed :as embed]
    [app.main.ui.shapes.gradients :as grad]
    [app.util.object :as obj]
    [rumext.v2 :as mf]))
@@ -40,29 +39,24 @@
 
         uri        (cond
                      (some? metadata)
-                     (cfg/resolve-file-media metadata)
+                     (cf/resolve-file-media metadata)
 
                      (some? image)
-                     (cfg/resolve-file-media image))
+                     (cf/resolve-file-media image))
 
         uris       (into [uri]
                      (comp
                        (keep :fill-image)
-                       (map cfg/resolve-file-media))
+                       (map cf/resolve-file-media))
                      fills)
 
-        embed       (embed/use-data-uris uris)
         transform   (gsh/transform-str shape)
 
-        ;; When true the image has not loaded yet
-        loading?    (not-any? (partial contains? embed) uris)
-
         pat-props   #js {:patternUnits "userSpaceOnUse"
                          :x x
                          :y y
                          :width width
-                         :height height
+                         :height height}
-                         :data-loading loading?}
 
         pat-props   (if (= :path type)
                      (obj/set! pat-props "patternTransform" transform)
@@ -96,9 +90,9 @@
                               :height height
                               :style style}]
                (if (:fill-image value)
-                 (let [uri (cfg/resolve-file-media (:fill-image value))
+                 (let [uri (cf/resolve-file-media (:fill-image value))
                        image-props #js {:id (dm/str "fill-image-" render-id "-" fill-index)
-                                        :href (get embed uri uri)
+                                        :href (get uris uri uri)
                                         :preserveAspectRatio "xMidYMid slice"
                                         :width width
                                         :height height

frontend/src/app/main/ui/shapes/text/fontfaces.cljs

@@ -9,22 +9,12 @@
    [app.common.data :as d]
    [app.common.files.helpers :as cfh]
    [app.main.fonts :as fonts]
-   [app.main.ui.shapes.embed :as embed]
    [app.util.object :as obj]
    [beicon.core :as rx]
    [clojure.set :as set]
    [cuerdas.core :as str]
    [rumext.v2 :as mf]))
 
-(defn replace-embeds
-  "Replace into the font-faces of a CSS the URL's that are present in `embed-data` by its
-  data-uri"
-  [css urls embed-data]
-  (letfn [(replace-url [css url]
-            (str/replace css url (get embed-data url url)))]
-    (->> urls
-         (reduce replace-url css))))
-
 (defn use-fonts-css
   "Hook that retrieves the CSS of the fonts passed as parameter"
   [fonts]
@@ -64,31 +54,10 @@
   {::mf/wrap-props false
    ::mf/wrap [#(mf/memo' % (mf/check-props ["fonts"]))]}
   [props]
-
   (let [fonts (obj/get props "fonts")
-
         ;; Fetch its CSS fontfaces
-        fonts-css (use-fonts-css fonts)
+        fonts-css (use-fonts-css fonts)]
-
+    [:style fonts-css]))
-        ;; Extract from the CSS the URL's to embed
-        fonts-urls (mf/use-memo
-                    (mf/deps fonts-css)
-                    #(fonts/extract-fontface-urls fonts-css))
-
-        ;; Calculate the data-uris for these fonts
-        fonts-embed (embed/use-data-uris fonts-urls)
-
-        loading? (some? (d/seek #(not (contains? fonts-embed %)) fonts-urls))
-
-        ;; Creates a style tag by replacing the urls with the data uri
-        style (replace-embeds fonts-css fonts-urls fonts-embed)]
-
-    (cond
-      (d/not-empty? style)
-      [:style {:data-loading loading?} style]
-
-      (d/not-empty? fonts)
-      [:style {:data-loading true}])))
 
 (defn shape->fonts
   [shape objects]

frontend/src/app/main/ui/workspace/shapes/frame.cljs

@@ -18,7 +18,6 @@
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.context :as ctx]
-   [app.main.ui.shapes.embed :as embed]
    [app.main.ui.shapes.frame :as frame]
    [app.main.ui.shapes.shape :refer [shape-container]]
    [app.main.ui.workspace.shapes.common :refer [check-shape-props]]
@@ -44,9 +43,8 @@
                          (refs/children-objects shape-id))
             childs     (mf/deref childs-ref)]
 
-        [:& (mf/provider embed/context) {:value true}
          [:& shape-container {:shape shape :ref ref :disable-shadows? (cfh/is-direct-child-of-root? shape)}
-          [:& frame-shape {:shape shape :childs childs}]]]))))
+          [:& frame-shape {:shape shape :childs childs}]]))))
 
 (defn check-props
   [new-props old-props]

frontend/src/app/main/ui/workspace/viewport.cljs

@@ -18,7 +18,6 @@
    [app.main.ui.context :as ctx]
    [app.main.ui.hooks :as ui-hooks]
    [app.main.ui.measurements :as msr]
-   [app.main.ui.shapes.embed :as embed]
    [app.main.ui.shapes.export :as use]
    [app.main.ui.workspace.shapes :as shapes]
    [app.main.ui.workspace.shapes.text.editor :as editor]
@@ -329,11 +328,10 @@
 
       [:& (mf/provider ctx/current-vbox) {:value vbox'}
        [:& (mf/provider use/include-metadata-ctx) {:value (dbg/enabled? :show-export-metadata)}
-        [:& (mf/provider embed/context) {:value true}
          ;; Render root shape
          [:& shapes/root-shape {:key page-id
                                 :objects base-objects
-                                :active-frames @active-frames}]]]]]
+                                :active-frames @active-frames}]]]]
 
      [:svg.viewport-controls
       {:xmlns "http://www.w3.org/2000/svg"