🐛 Fix missing key properties and react warnings

frontend/deps.edn

@@ -10,7 +10,7 @@
   funcool/beicon {:mvn/version "2021.07.05-1"}
   funcool/okulary {:mvn/version "2022.04.11-16"}
   funcool/potok {:mvn/version "2021.09.20-0"}
-  funcool/rumext {:mvn/version "2022.03.31-133"}
+  funcool/rumext {:mvn/version "2022.04.19-148"}
   funcool/tubax {:mvn/version "2021.05.20-0"}
 
   instaparse/instaparse {:mvn/version "1.4.10"}

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

@@ -405,7 +405,6 @@
         shape     (obj/get props "shape")
         elem-name (obj/get child "type")
         render-id (mf/use-ctx muc/render-ctx)]
-
     [:g {:id (dm/fmt "fills-%" (:id shape))}
      [:> elem-name (build-fill-props shape child render-id)]]))
 
@@ -434,12 +433,8 @@
 (mf/defc shape-custom-strokes
   {::mf/wrap-props false}
   [props]
-  (let [child     (obj/get props "children")
+  (let [children (obj/get props "children")
         shape    (obj/get props "shape")]
-
     [:*
-     [:& shape-fills {:shape shape}
+     [:& shape-fills {:shape shape} children]
-      child]
+     [:& shape-strokes {:shape shape} children]]))
-
-     [:& shape-strokes {:shape shape}
-      child]]))

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

@@ -7,6 +7,7 @@
 (ns app.main.ui.shapes.fills
   (:require
    [app.common.data :as d]
+   [app.common.data.macros :as dm]
    [app.common.geom.shapes :as gsh]
    [app.config :as cfg]
    [app.main.ui.shapes.attrs :as attrs]
@@ -55,10 +56,11 @@
                             (obj/set! "patternTransform" transform))]
 
         (for [[shape-index shape] (d/enumerate (or (:position-data shape) [shape]))]
-          [:*
+          [:* {:key (dm/str shape-index)}
            (for [[fill-index value] (-> (d/enumerate (:fills shape [])) reverse)]
              (when (some? (:fill-color-gradient value))
-               (let [props #js {:id (str "fill-color-gradient_" render-id "_" fill-index)
+               (let [props #js {:id (dm/str "fill-color-gradient_" render-id "_" fill-index)
+                                :key (dm/str fill-index)
                                 :gradient (:fill-color-gradient value)
                                 :shape shape}]
                  (case (d/name (:type (:fill-color-gradient value)))
@@ -66,12 +68,13 @@
                    "radial" [:> grad/radial-gradient props]))))
 
 
-           (let [fill-id (str "fill-" shape-index "-" render-id)]
+           (let [fill-id (dm/str "fill-" shape-index "-" render-id)]
              [:> :pattern (-> (obj/clone pattern-attrs)
                               (obj/set! "id" fill-id))
               [:g
                (for [[fill-index value] (-> (d/enumerate (:fills shape [])) reverse)]
                  [:> :rect (-> (attrs/extract-fill-attrs value render-id fill-index)
+                               (obj/set! "key" (dm/str fill-index))
                                (obj/set! "width" width)
                                (obj/set! "height" height))])
 

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

@@ -45,6 +45,7 @@
         (for [[index data] (d/enumerate position-data)]
           (when (some? (:fill-color-gradient data))
             [:& grad/gradient {:id (str "fill-color-gradient_" (get-gradient-id index))
+                               :key index
                                :attr :fill-color-gradient
                                :shape data}]))])
 
@@ -71,5 +72,5 @@
                                         (obj/set! "fill" (str "url(#fill-" index "-" render-id ")")))})
               shape (assoc shape :fills (:fills data))]
 
-          [:& shape-custom-strokes {:shape shape}
+          [:& shape-custom-strokes {:shape shape :key index}
            [:> :text props (:text data)]]))]]))

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

@@ -72,8 +72,8 @@
              #(rx/dispose! sem)))))
 
       (if (and render? (= shape (mf/ref-val prev-shape-ref)))
-        (mf/create-element component props)
+        (mf/jsx component props mf/undefined)
-        (mf/create-element frame-placeholder props)))))
+        (mf/jsx frame-placeholder props mf/undefined)))))
 
 ;; Draw the frame proper as a deferred component
 (defn deferred-frame-shape-factory

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

@@ -7,6 +7,7 @@
 (ns app.main.ui.workspace.sidebar.layers
   (:require
    [app.common.data :as d]
+   [app.common.data.macros :as dm]
    [app.common.pages.helpers :as cph]
    [app.common.uuid :as uuid]
    [app.main.data.workspace :as dw]
@@ -463,7 +464,7 @@
           [:span {:on-click toggle-search} i/search]]))
 
      [:div.tool-window-content {:on-scroll on-scroll}
-      [:& layers-tree-wrapper {:key (:id page)
+      [:& layers-tree-wrapper {:objects objects
-                               :objects objects
+                               :key (dm/str (:id page))
                                :search (:search-text @filter-state)
                                :filters (keys (:active-filters @filter-state))}]]]))

frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs

@@ -144,6 +144,7 @@
                                     :id (:fill-color-ref-id value)
                                     :file-id (:fill-color-ref-file value)
                                     :gradient (:fill-color-gradient value)}
+                            :key index
                             :index index
                             :title (tr "workspace.options.fill")
                             :on-change (on-change index)

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

@@ -8,6 +8,7 @@
   (:require
    [app.common.colors :as colors]
    [app.common.data :as d]
+   [app.common.data.macros :as dm]
    [app.common.geom.shapes :as gsh]
    [app.common.math :as mth]
    [app.main.ui.formats :as fmt]
@@ -117,7 +118,6 @@
         step (calculate-step-size zoom)
         clip-id (str "clip-rule-" (d/name axis))]
 
-    
     [:*
      (let [{:keys [x y width height]} (get-background-area vbox zoom axis)]
        [:rect {:x x :y y :width width :height height :style {:fill rules-background}}])
@@ -129,8 +129,6 @@
         (let [{:keys [x y width height]} (get-clip-area vbox zoom axis)]
           [:rect {:x x :y y :width width :height height}])]]
 
-      
-
       (let [{:keys [start end]} (get-rule-params vbox axis)
             minv (max start -100000)
             minv (* (mth/ceil (/ minv step)) step)
@@ -140,9 +138,8 @@
         (for [step-val (range minv (inc maxv) step)]
           (let [{:keys [text-x text-y line-x1 line-y1 line-x2 line-y2]}
                 (get-rule-axis step-val vbox zoom axis)]
-            [:* 
+            [:* {:key (dm/str "text-" (d/name axis) "-" step-val)}
-             [:text {:key (str "text-" (d/name axis) "-" step-val)
+             [:text {:x text-x
-                     :x text-x
                      :y text-y
                      :text-anchor "middle"
                      :dominant-baseline "middle"