Minor performance enhancement on str concat opetations

And proper stringify of :key prop of react components
This commit is contained in:
Andrey Antukh 2022-02-24 23:45:24 +01:00 committed by Alonso Torres
parent f05518e357
commit 4c00c8f3ec
11 changed files with 55 additions and 46 deletions

View file

@ -6,6 +6,7 @@
(ns app.main.ui.components.select (ns app.main.ui.components.select
(:require (:require
[app.common.data.macros :as dm]
[app.common.uuid :as uuid] [app.common.uuid :as uuid]
[app.main.ui.components.dropdown :refer [dropdown]] [app.main.ui.components.dropdown :refer [dropdown]]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
@ -39,10 +40,10 @@
[:ul.custom-select-dropdown [:ul.custom-select-dropdown
(for [[index item] (map-indexed vector options)] (for [[index item] (map-indexed vector options)]
(cond (cond
(= :separator item) [:hr {:key (str (:id @state) "-" index)}] (= :separator item) [:hr {:key (dm/str (:id @state) "-" index)}]
:else (let [[value label] (as-key-value item)] :else (let [[value label] (as-key-value item)]
[:li.checked-element [:li.checked-element
{:key (str (:id @state) "-" index) {:key (dm/str (:id @state) "-" index)
:class (when (= value (-> @state :current-value)) "is-selected") :class (when (= value (-> @state :current-value)) "is-selected")
:on-click (select-item value)} :on-click (select-item value)}
[:span.check-icon i/tick] [:span.check-icon i/tick]

View file

@ -7,11 +7,12 @@
(ns app.main.ui.dashboard.sidebar (ns app.main.ui.dashboard.sidebar
(:require (:require
[app.common.data :as d] [app.common.data :as d]
[app.common.data.macros :as dm]
[app.common.spec :as us] [app.common.spec :as us]
[app.config :as cf] [app.config :as cf]
[app.main.data.dashboard :as dd] [app.main.data.dashboard :as dd]
[app.main.data.events :as ev] [app.main.data.events :as ev]
[app.main.data.messages :as dm] [app.main.data.messages :as msg]
[app.main.data.modal :as modal] [app.main.data.modal :as modal]
[app.main.data.users :as du] [app.main.data.users :as du]
[app.main.refs :as refs] [app.main.refs :as refs]
@ -99,7 +100,7 @@
on-drop-success on-drop-success
(mf/use-callback (mf/use-callback
(mf/deps (:id item)) (mf/deps (:id item))
(st/emitf (dm/success (tr "dashboard.success-move-file")) (st/emitf (msg/success (tr "dashboard.success-move-file"))
(dd/go-to-files (:id item)))) (dd/go-to-files (:id item))))
on-drop on-drop
@ -172,7 +173,7 @@
[:form.sidebar-search [:form.sidebar-search
[:input.input-text [:input.input-text
{:key :images-search-box {:key "images-search-box"
:id "search-input" :id "search-input"
:type "text" :type "text"
:placeholder (tr "dashboard.search-placeholder") :placeholder (tr "dashboard.search-placeholder")
@ -213,11 +214,11 @@
[:span.team-text (tr "dashboard.your-penpot")]] [:span.team-text (tr "dashboard.your-penpot")]]
(for [team (remove :is-default (vals teams))] (for [team (remove :is-default (vals teams))]
[:* {:key (:id team)} [:li.team-name {:on-click (partial team-selected (:id team))
[:li.team-name {:on-click (partial team-selected (:id team))} :key (dm/str (:id team))}
[:span.team-icon [:span.team-icon
[:img {:src (cf/resolve-team-photo-url team)}]] [:img {:src (cf/resolve-team-photo-url team)}]]
[:span.team-text {:title (:name team)} (:name team)]]]) [:span.team-text {:title (:name team)} (:name team)]])
[:hr] [:hr]
[:li.action {:on-click on-create-clicked :data-test "create-new-team"} [:li.action {:on-click on-create-clicked :data-test "create-new-team"}
@ -247,13 +248,13 @@
(fn [{:keys [code] :as error}] (fn [{:keys [code] :as error}]
(condp = code (condp = code
:no-enough-members-for-leave :no-enough-members-for-leave
(rx/of (dm/error (tr "errors.team-leave.insufficient-members"))) (rx/of (msg/error (tr "errors.team-leave.insufficient-members")))
:member-does-not-exist :member-does-not-exist
(rx/of (dm/error (tr "errors.team-leave.member-does-not-exists"))) (rx/of (msg/error (tr "errors.team-leave.member-does-not-exists")))
:owner-cant-leave-team :owner-cant-leave-team
(rx/of (dm/error (tr "errors.team-leave.owner-cant-leave"))) (rx/of (msg/error (tr "errors.team-leave.owner-cant-leave")))
(rx/throw error))) (rx/throw error)))
@ -442,7 +443,7 @@
(for [item pinned-projects] (for [item pinned-projects]
[:& sidebar-project [:& sidebar-project
{:item item {:item item
:key (:id item) :key (dm/str (:id item))
:id (:id item) :id (:id item)
:team-id (:id team) :team-id (:id team)
:selected? (= (:id item) (:id project))}])] :selected? (= (:id item) (:id project))}])]

View file

@ -9,6 +9,7 @@
[app.common.geom.point :as gpt] [app.common.geom.point :as gpt]
[app.common.logging :as log] [app.common.logging :as log]
[app.main.refs :as refs] [app.main.refs :as refs]
[app.main.ui.context :as ctx]
[app.util.dom :as dom] [app.util.dom :as dom]
[app.util.storage :refer [storage]] [app.util.storage :refer [storage]]
[rumext.alpha :as mf])) [rumext.alpha :as mf]))
@ -23,7 +24,7 @@
(defn use-resize-hook (defn use-resize-hook
[key initial min-val max-val axis negate? resize-type] [key initial min-val max-val axis negate? resize-type]
(let [current-file-id (mf/deref refs/current-file-id) (let [current-file-id (mf/use-ctx ctx/current-file-id)
size-state (mf/use-state (or (get-in @storage [::saved-resize current-file-id key]) initial)) size-state (mf/use-state (or (get-in @storage [::saved-resize current-file-id key]) initial))
parent-ref (mf/use-ref nil) parent-ref (mf/use-ref nil)

View file

@ -7,11 +7,11 @@
(ns app.main.ui.measurements (ns app.main.ui.measurements
(:require (:require
[app.common.data :as d] [app.common.data :as d]
[app.common.data.macros :as dm]
[app.common.geom.point :as gpt] [app.common.geom.point :as gpt]
[app.common.geom.shapes :as gsh] [app.common.geom.shapes :as gsh]
[app.common.math :as mth] [app.common.math :as mth]
[app.common.uuid :as uuid] [app.common.uuid :as uuid]
[cuerdas.core :as str]
[rumext.alpha :as mf])) [rumext.alpha :as mf]))
;; ------------------------------------------------ ;; ------------------------------------------------
@ -97,7 +97,7 @@
(mf/defc size-display [{:keys [selrect zoom]}] (mf/defc size-display [{:keys [selrect zoom]}]
(let [{:keys [x y width height]} selrect (let [{:keys [x y width height]} selrect
size-label (str/fmt "%s x %s" (mth/round width) (mth/round height)) size-label (dm/str (mth/round width) " x " (mth/round height))
rect-height (/ size-display-height zoom) rect-height (/ size-display-height zoom)
rect-width (/ (if (<= (count size-label) 9) rect-width (/ (if (<= (count size-label) 9)
@ -201,7 +201,7 @@
center-y (+ y1 (/ (- y2 y1) 2)) center-y (+ y1 (/ (- y2 y1) 2))
distance (gpt/distance (gpt/point x1 y1) (gpt/point x2 y2))] distance (gpt/distance (gpt/point x1 y1) (gpt/point x2 y2))]
(when-not (mth/almost-zero? distance) (when-not (mth/almost-zero? distance)
[:g.distance-line {:key (str "line-%s-%s-%s-%s" x1 y1 x2 y2)} [:g.distance-line {:key (dm/str "line-" x1 "-" y1 "-" x2 "-" y2)}
[:line [:line
{:x1 x1 {:x1 x1
:y1 y1 :y1 y1
@ -214,7 +214,7 @@
{:x center-x {:x center-x
:y center-y :y center-y
:zoom zoom :zoom zoom
:distance (str (mth/round distance) "px") :distance (dm/str (mth/round distance) "px")
:bounds bounds}]]))))) :bounds bounds}]])))))
(mf/defc selection-guides [{:keys [bounds selrect zoom]}] (mf/defc selection-guides [{:keys [bounds selrect zoom]}]

View file

@ -7,6 +7,7 @@
(ns app.main.ui.shapes.bool (ns app.main.ui.shapes.bool
(:require (:require
[app.common.data :as d] [app.common.data :as d]
[app.common.data.macros :as dm]
[app.common.geom.shapes :as gsh] [app.common.geom.shapes :as gsh]
[app.main.ui.hooks :refer [use-equal-memo]] [app.main.ui.hooks :refer [use-equal-memo]]
[app.main.ui.shapes.export :as use] [app.main.ui.shapes.export :as use]
@ -45,4 +46,4 @@
[:> "penpot:bool" {} [:> "penpot:bool" {}
(for [item (->> (:shapes shape) (mapv #(get childs %)))] (for [item (->> (:shapes shape) (mapv #(get childs %)))]
[:& shape-wrapper {:shape item [:& shape-wrapper {:shape item
:key (:id item)}])])]))) :key (dm/str (:id item))}])])])))

View file

@ -6,6 +6,7 @@
(ns app.main.ui.shapes.frame (ns app.main.ui.shapes.frame
(:require (:require
[app.common.data.macros :as dm]
[app.main.ui.shapes.attrs :as attrs] [app.main.ui.shapes.attrs :as attrs]
[app.util.object :as obj] [app.util.object :as obj]
[debug :refer [debug?]] [debug :refer [debug?]]
@ -13,12 +14,12 @@
(defn frame-clip-id (defn frame-clip-id
[shape render-id] [shape render-id]
(str "frame-clip-" (:id shape) "-" render-id)) (dm/str "frame-clip-" (:id shape) "-" render-id))
(defn frame-clip-url (defn frame-clip-url
[shape render-id] [shape render-id]
(when (= :frame (:type shape)) (when (= :frame (:type shape))
(str "url(#" (frame-clip-id shape render-id) ")"))) (dm/str "url(#" (frame-clip-id shape render-id) ")")))
(mf/defc frame-clip-def (mf/defc frame-clip-def
[{:keys [shape render-id]}] [{:keys [shape render-id]}]
@ -33,7 +34,7 @@
(let [shape (obj/get props "shape")] (let [shape (obj/get props "shape")]
(when (:thumbnail shape) (when (:thumbnail shape)
[:image.frame-thumbnail [:image.frame-thumbnail
{:id (str "thumbnail-" (:id shape)) {:id (dm/str "thumbnail-" (:id shape))
:xlinkHref (:thumbnail shape) :xlinkHref (:thumbnail shape)
:x (:x shape) :x (:x shape)
:y (:y shape) :y (:y shape)
@ -63,5 +64,5 @@
(for [item childs] (for [item childs]
[:& shape-wrapper {:shape item [:& shape-wrapper {:shape item
:key (:id item)}])]))) :key (dm/str (:id item))}])])))

View file

@ -7,6 +7,7 @@
(ns app.main.ui.shapes.gradients (ns app.main.ui.shapes.gradients
(:require (:require
[app.common.data :as d] [app.common.data :as d]
[app.common.data.macros :as dm]
[app.common.geom.matrix :as gmt] [app.common.geom.matrix :as gmt]
[app.common.geom.point :as gpt] [app.common.geom.point :as gpt]
[app.common.geom.shapes :as gsh] [app.common.geom.shapes :as gsh]
@ -42,7 +43,7 @@
[:> :linearGradient props [:> :linearGradient props
(for [{:keys [offset color opacity]} (:stops gradient)] (for [{:keys [offset color opacity]} (:stops gradient)]
[:stop {:key (str id "-stop-" offset) [:stop {:key (dm/str id "-stop-" offset)
:offset (or offset 0) :offset (or offset 0)
:stop-color color :stop-color color
:stop-opacity opacity}])])) :stop-opacity opacity}])]))
@ -90,7 +91,7 @@
(add-metadata gradient))] (add-metadata gradient))]
[:> :radialGradient props [:> :radialGradient props
(for [{:keys [offset color opacity]} (:stops gradient)] (for [{:keys [offset color opacity]} (:stops gradient)]
[:stop {:key (str id "-stop-" offset) [:stop {:key (dm/str id "-stop-" offset)
:offset (or offset 0) :offset (or offset 0)
:stop-color color :stop-color color
:stop-opacity opacity}])])) :stop-opacity opacity}])]))
@ -101,7 +102,8 @@
(let [attr (obj/get props "attr") (let [attr (obj/get props "attr")
shape (obj/get props "shape") shape (obj/get props "shape")
id (obj/get props "id") id (obj/get props "id")
id (or id (str (name attr) "_" (mf/use-ctx muc/render-ctx))) id' (mf/use-ctx muc/render-ctx)
id (or id (dm/str (name attr) "_" id'))
gradient (get shape attr) gradient (get shape attr)
gradient-props #js {:id id gradient-props #js {:id id
:gradient gradient :gradient gradient

View file

@ -6,6 +6,7 @@
(ns app.main.ui.shapes.group (ns app.main.ui.shapes.group
(:require (:require
[app.common.data.macros :as dm]
[app.main.ui.context :as muc] [app.main.ui.context :as muc]
[app.main.ui.shapes.mask :refer [mask-url clip-url mask-factory]] [app.main.ui.shapes.mask :refer [mask-url clip-url mask-factory]]
[app.util.object :as obj] [app.util.object :as obj]
@ -49,7 +50,7 @@
(for [item childs] (for [item childs]
[:& shape-wrapper {:shape item [:& shape-wrapper {:shape item
:key (:id item)}])]])))) :key (dm/str (:id item))}])]]))))

View file

@ -6,6 +6,7 @@
(ns app.main.ui.shapes.svg-raw (ns app.main.ui.shapes.svg-raw
(:require (:require
[app.common.data.macros :as dm]
[app.common.geom.shapes :as gsh] [app.common.geom.shapes :as gsh]
[app.main.ui.shapes.attrs :as usa] [app.main.ui.shapes.attrs :as usa]
[app.util.object :as obj] [app.util.object :as obj]
@ -102,12 +103,12 @@
svg-root? svg-root?
[:& svg-root {:shape shape} [:& svg-root {:shape shape}
(for [item childs] (for [item childs]
[:& shape-wrapper {:shape item :key (:id item)}])] [:& shape-wrapper {:shape item :key (dm/str (:id item))}])]
svg-tag? svg-tag?
[:& svg-element {:shape shape} [:& svg-element {:shape shape}
(for [item childs] (for [item childs]
[:& shape-wrapper {:shape item :key (:id item)}])] [:& shape-wrapper {:shape item :key (dm/str (:id item))}])]
svg-leaf? svg-leaf?
content content

View file

@ -103,7 +103,7 @@
(st/emit! (dw/finalize-page page-id)))))) (st/emit! (dw/finalize-page page-id))))))
(when (mf/deref trimmed-page-ref) (when (mf/deref trimmed-page-ref)
[:& workspace-content {:key page-id [:& workspace-content {:key (dm/str page-id)
:file file :file file
:layout layout}])) :layout layout}]))
@ -153,7 +153,7 @@
(if (and (and file project) (if (and (and file project)
(:initialized file)) (:initialized file))
[:& workspace-page {:key (str "page-" page-id) [:& workspace-page {:key (dm/str "page-" page-id)
:page-id page-id :page-id page-id
:file file :file file
:layout layout}] :layout layout}]

View file

@ -111,8 +111,8 @@
:right "M 6.5 0 l -12 0 l 6 -6 m -6 6 l 6 6" :right "M 6.5 0 l -12 0 l 6 -6 m -6 6 l 6 6"
nil) nil)
:open-url (str "M1 -5 L 3 -7 L 7 -3 L 1 3 L -1 1" :open-url (dm/str "M1 -5 L 3 -7 L 7 -3 L 1 3 L -1 1"
"M-1 5 L -3 7 L -7 3 L -1 -3 L 1 -1") "M-1 5 L -3 7 L -7 3 L -1 -3 L 1 -1")
nil) nil)
inv-zoom (/ 1 zoom)] inv-zoom (/ 1 zoom)]
@ -232,14 +232,14 @@
:fill "var(--color-black)" :fill "var(--color-black)"
:fill-opacity 0.3 :fill-opacity 0.3
:stroke-width 1 :stroke-width 1
:d (str "M" marker-x " " marker-y " " :d (dm/str "M" marker-x " " marker-y " "
"h " width " " "h " width " "
"v " height " " "v " height " "
"h -" width " z" "h -" width " z"
"M" marker-x " " marker-y " " "M" marker-x " " marker-y " "
"l " width " " height " " "l " width " " height " "
"M" marker-x " " (+ marker-y height) " " "M" marker-x " " (+ marker-y height) " "
"l " width " -" height " ")}] "l " width " -" height " ")}]
[:circle {:cx (+ marker-x (/ width 2)) [:circle {:cx (+ marker-x (/ width 2))
:cy (+ marker-y (/ height 2)) :cy (+ marker-y (/ height 2))
:r 8 :r 8
@ -279,7 +279,7 @@
selected? (contains? selected (:id shape)) selected? (contains? selected (:id shape))
level (calc-level index (:interactions shape))] level (calc-level index (:interactions shape))]
(when-not selected? (when-not selected?
[:& interaction-path {:key (str (:id shape) "-" index) [:& interaction-path {:key (dm/str (:id shape) "-" index)
:index index :index index
:level level :level level
:orig-shape shape :orig-shape shape
@ -307,7 +307,7 @@
(get objects (:destination interaction))) (get objects (:destination interaction)))
level (calc-level index (:interactions shape))] level (calc-level index (:interactions shape))]
[:* [:*
[:& interaction-path {:key (str (:id shape) "-" index) [:& interaction-path {:key (dm/str (:id shape) "-" index)
:index index :index index
:level level :level level
:orig-shape shape :orig-shape shape
@ -321,14 +321,14 @@
(= (:overlay-pos-type interaction) :manual)) (= (:overlay-pos-type interaction) :manual))
(if (and (some? move-overlay-to) (if (and (some? move-overlay-to)
(= move-overlay-index index)) (= move-overlay-index index))
[:& overlay-marker {:key (str "pos" (:id shape) "-" index) [:& overlay-marker {:key (dm/str "pos" (:id shape) "-" index)
:index index :index index
:orig-shape shape :orig-shape shape
:dest-shape dest-shape :dest-shape dest-shape
:position move-overlay-to :position move-overlay-to
:objects objects :objects objects
:hover-disabled? hover-disabled?}] :hover-disabled? hover-disabled?}]
[:& overlay-marker {:key (str "pos" (:id shape) "-" index) [:& overlay-marker {:key (dm/str "pos" (:id shape) "-" index)
:index index :index index
:orig-shape shape :orig-shape shape
:dest-shape dest-shape :dest-shape dest-shape