✨ Upgrade rumext and add some examples of syntax sugar.

common/src/app/common/geom/shapes/transforms.cljc

@@ -546,7 +546,6 @@
 
 (defn transform-selrect
   [selrect {:keys [displacement resize-transform-inverse resize-vector resize-origin resize-vector-2 resize-origin-2]}]
- 
   ;; FIXME: Improve Performance
   (let [resize-transform-inverse (or resize-transform-inverse (gmt/matrix))
 

frontend/deps.edn

@@ -9,7 +9,7 @@
   funcool/beicon {:mvn/version "2021.07.05-1"}
   funcool/okulary {:mvn/version "2020.04.14-0"}
   funcool/potok {:mvn/version "2021.09.20-0"}
-  funcool/rumext {:mvn/version "2021.05.12-1"}
+  funcool/rumext {:mvn/version "2022.01.20.128"}
   funcool/tubax {:mvn/version "2021.05.20-0"}
 
   instaparse/instaparse {:mvn/version "1.4.10"}

frontend/src/app/main/render.cljs

@@ -227,31 +227,25 @@
         include-metadata? (mf/use-ctx export/include-metadata-ctx)
 
         modifier
-        (mf/use-memo
-         (mf/deps (:x frame) (:y frame))
-         (fn []
-           (-> (gpt/point (:x frame) (:y frame))
-               (gpt/negate)
-               (gmt/translate-matrix))))
+        (mf/with-memo [(:x frame) (:y frame)]
+          (-> (gpt/point (:x frame) (:y frame))
+              (gpt/negate)
+              (gmt/translate-matrix)))
 
         objects
-        (mf/use-memo
-         (mf/deps frame-id objects modifier)
-         (fn []
-           (let [update-fn #(assoc-in %1 [%2 :modifiers :displacement] modifier)]
-             (->> (cp/get-children frame-id objects)
-                  (into [frame-id])
-                  (reduce update-fn objects)))))
+        (mf/with-memo [frame-id objects modifier]
+          (let [update-fn #(assoc-in %1 [%2 :modifiers :displacement] modifier)]
+            (->> (cp/get-children frame-id objects)
+                 (into [frame-id])
+                 (reduce update-fn objects))))
 
         frame
-        (mf/use-memo
-         (mf/deps modifier)
-         (fn [] (assoc-in frame [:modifiers :displacement] modifier)))
+        (mf/with-memo [modifier]
+          (assoc-in frame [:modifiers :displacement] modifier))
 
         wrapper
-        (mf/use-memo
-         (mf/deps objects)
-         (fn [] (frame-wrapper-factory objects)))
+        (mf/with-memo [objects]
+          (frame-wrapper-factory objects))
 
         width  (* (:width frame) zoom)
         height (* (:height frame) zoom)

frontend/src/app/main/ui.cljs

@@ -29,7 +29,8 @@
 
 (mf/defc on-main-error
   [{:keys [error] :as props}]
-  (mf/use-effect (st/emitf (rt/assign-exception error)))
+  (mf/with-effect
+    (st/emit! (rt/assign-exception error)))
   [:span "Internal application error"])
 
 (mf/defc main-page

frontend/src/app/main/ui/confirm.cljs

@@ -51,17 +51,15 @@
            (st/emit! (modal/hide))
            (on-cancel props)))]
 
-    (mf/use-effect
-     (fn []
-       (let [on-keydown
-             (fn [event]
-               (when (k/enter? event)
-                 (dom/prevent-default event)
-                 (dom/stop-propagation event)
-                 (st/emit! (modal/hide))
-                 (on-accept props)))
-             key (events/listen js/document EventType.KEYDOWN on-keydown)]
-         #(events/unlistenByKey key))))
+    (mf/with-effect
+      (letfn [(on-keydown [event]
+                (when (k/enter? event)
+                  (dom/prevent-default event)
+                  (dom/stop-propagation event)
+                  (st/emit! (modal/hide))
+                  (on-accept props)))]
+        (->> (events/listen js/document EventType.KEYDOWN on-keydown)
+             (partial events/unlistenByKey))))
 
     [:div.modal-overlay
      [:div.modal-container.confirm-dialog

frontend/src/app/main/ui/dashboard.cljs

@@ -92,10 +92,8 @@
 
     (hooks/use-shortcuts ::dashboard sc/shortcuts)
 
-    (mf/use-effect
-     (mf/deps team-id)
-     (fn []
-       (st/emit! (dd/initialize {:id team-id}))))
+    (mf/with-effect [team-id]
+      (st/emit! (dd/initialize {:id team-id})))
 
     [:& (mf/provider ctx/current-team-id) {:value team-id}
      [:& (mf/provider ctx/current-project-id) {:value project-id}

frontend/src/app/main/ui/render.cljs

@@ -78,28 +78,24 @@
         vbox (str/join " " coords)
 
         frame-wrapper
-        (mf/use-memo
-         (mf/deps objects)
-         #(render/frame-wrapper-factory objects))
+        (mf/with-memo [objects]
+          (render/frame-wrapper-factory objects))
 
         group-wrapper
-        (mf/use-memo
-         (mf/deps objects)
-         #(render/group-wrapper-factory objects))
+        (mf/with-memo [objects]
+          (render/group-wrapper-factory objects))
 
         shape-wrapper
-        (mf/use-memo
-         (mf/deps objects)
-         #(render/shape-wrapper-factory objects))
+        (mf/with-memo [objects]
+          (render/shape-wrapper-factory objects))
 
         text-shapes
         (->> objects
              (filter (fn [[_ shape]] (= :text (:type shape))))
              (mapv second))]
 
-    (mf/use-effect
-     (mf/deps width height)
-     #(dom/set-page-style {:size (str (mth/ceil width) "px "
+    (mf/with-effect [width height]
+      (dom/set-page-style {:size (str (mth/ceil width) "px "
                                       (mth/ceil height) "px")}))
 
     [:& (mf/provider embed/context) {:value false}
@@ -148,20 +144,19 @@
 (mf/defc render-object
   [{:keys [file-id page-id object-id render-texts?] :as props}]
   (let [objects (mf/use-state nil)]
-    (mf/use-effect
-     (mf/deps file-id page-id object-id)
-     (fn []
-       (->> (rx/zip
-             (repo/query! :font-variants {:file-id file-id})
-             (repo/query! :trimmed-file {:id file-id :page-id page-id :object-id object-id}))
-            (rx/subs
-             (fn [[fonts {:keys [data]}]]
-               (when (seq fonts)
-                 (st/emit! (df/fonts-fetched fonts)))
-               (let [objs (get-in data [:pages-index page-id :objects])
-                     objs (adapt-root-frame objs object-id)]
-                 (reset! objects objs)))))
-       (constantly nil)))
+
+    (mf/with-effect [file-id page-id object-id]
+      (->> (rx/zip
+            (repo/query! :font-variants {:file-id file-id})
+            (repo/query! :trimmed-file {:id file-id :page-id page-id :object-id object-id}))
+           (rx/subs
+            (fn [[fonts {:keys [data]}]]
+              (when (seq fonts)
+                (st/emit! (df/fonts-fetched fonts)))
+              (let [objs (get-in data [:pages-index page-id :objects])
+                    objs (adapt-root-frame objs object-id)]
+                (reset! objects objs)))))
+      (constantly nil))
 
     (when @objects
       [:& object-svg {:objects @objects
@@ -172,14 +167,13 @@
 (mf/defc render-sprite
   [{:keys [file-id component-id] :as props}]
   (let [file (mf/use-state nil)]
-    (mf/use-effect
-     (mf/deps file-id)
-     (fn []
-       (->> (repo/query! :file {:id file-id})
-            (rx/subs
-             (fn [result]
-               (reset! file result))))
-       (constantly nil)))
+
+    (mf/with-effect [file-id]
+      (->> (repo/query! :file {:id file-id})
+           (rx/subs
+            (fn [result]
+              (reset! file result))))
+      (constantly nil))
 
     (when @file
       [:*

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

@@ -117,29 +117,23 @@
         layout  (mf/deref refs/workspace-layout)]
 
     ;; Setting the layout preset by its name
-    (mf/use-effect
-     (mf/deps layout-name)
-     (fn []
-       (st/emit! (dw/setup-layout layout-name))))
+    (mf/with-effect [layout-name]
+      (st/emit! (dw/setup-layout layout-name)))
 
-    (mf/use-effect
-     (mf/deps project-id file-id)
-     (fn []
-       (st/emit! (dw/initialize-file project-id file-id))
-       (fn []
-         (st/emit! ::dwp/force-persist
-                   (dw/finalize-file project-id file-id)))))
+    (mf/with-effect [project-id file-id]
+      (st/emit! (dw/initialize-file project-id file-id))
+      (fn []
+        (st/emit! ::dwp/force-persist
+                  (dw/finalize-file project-id file-id))))
 
     ;; Close any non-modal dialog that may be still open
-    (mf/use-effect
-     (fn [] (st/emit! dm/hide)))
+    (mf/with-effect
+      (st/emit! dm/hide))
 
     ;; Set properly the page title
-    (mf/use-effect
-     (mf/deps (:name file))
-     (fn []
-       (when (:name file)
-         (dom/set-html-title (tr "title.workspace" (:name file))))))
+    (mf/with-effect [(:name file)]
+      (when (:name file)
+        (dom/set-html-title (tr "title.workspace" (:name file)))))
 
     [:& (mf/provider ctx/current-file-id) {:value (:id file)}
      [:& (mf/provider ctx/current-team-id) {:value (:team-id project)}