From 6553861a6cc338e8dfd63be47d5b6d8442301578 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Wed, 18 Dec 2024 17:34:29 +0100 Subject: [PATCH] :zap: Update rumext version Mainly for usability and performance improvements --- frontend/deps.edn | 4 +- .../main/ui/components/context_menu_a11y.cljs | 4 +- .../app/main/ui/components/radio_buttons.cljs | 14 ++- .../src/app/main/ui/ds/controls/input.cljs | 10 +- frontend/src/app/main/ui/ds/storybook.cljs | 9 +- frontend/src/app/main/ui/workspace.cljs | 4 +- .../app/main/ui/workspace/context_menu.cljs | 2 +- .../app/main/ui/workspace/right_header.cljs | 3 +- .../src/app/main/ui/workspace/sidebar.cljs | 113 ++++++++++-------- .../main/ui/workspace/sidebar/history.cljs | 2 +- .../app/main/ui/workspace/sidebar/layers.cljs | 2 +- .../main/ui/workspace/sidebar/options.cljs | 25 ++-- .../options/menus/layout_container.cljs | 2 +- .../sidebar/options/menus/layout_item.cljs | 25 ++-- .../main/ui/workspace/sidebar/versions.cljs | 3 +- 15 files changed, 118 insertions(+), 104 deletions(-) diff --git a/frontend/deps.edn b/frontend/deps.edn index 67e2de069..a64a3d5ba 100644 --- a/frontend/deps.edn +++ b/frontend/deps.edn @@ -20,8 +20,8 @@ :git/url "https://github.com/funcool/beicon.git"} funcool/rumext - {:git/tag "v2.15" - :git/sha "28783a7" + {:git/tag "v2.18" + :git/sha "b6e8f45" :git/url "https://github.com/funcool/rumext.git"} instaparse/instaparse {:mvn/version "1.5.0"} diff --git a/frontend/src/app/main/ui/components/context_menu_a11y.cljs b/frontend/src/app/main/ui/components/context_menu_a11y.cljs index 04475e7c2..546cec563 100644 --- a/frontend/src/app/main/ui/components/context_menu_a11y.cljs +++ b/frontend/src/app/main/ui/components/context_menu_a11y.cljs @@ -52,8 +52,6 @@ (sm/lazy-validator schema:option)) (mf/defc context-menu* - {::mf/props :obj} - [{:keys [show on-close options selectable selected top left fixed min-width origin width] :as props}] @@ -90,7 +88,7 @@ (on-close))) props - (mf/spread props :on-close on-local-close) + (mf/spread-props props {:on-close on-local-close}) ids (mf/with-memo [levels] diff --git a/frontend/src/app/main/ui/components/radio_buttons.cljs b/frontend/src/app/main/ui/components/radio_buttons.cljs index 17a3fe594..c51aa6ab4 100644 --- a/frontend/src/app/main/ui/components/radio_buttons.cljs +++ b/frontend/src/app/main/ui/components/radio_buttons.cljs @@ -87,10 +87,16 @@ (dom/blur! input)))) context-value - (mf/spread props - :on-change on-change' - :encode-fn encode-fn - :decode-fn decode-fn)] + (mf/spread-object props + ;; We pass a special metadata for disable + ;; key casing transformation in this + ;; concrete case, because this component + ;; uses legacy mode and props are in + ;; kebab-case style + ^{::mf/transform false} + {:on-change on-change' + :encode-fn encode-fn + :decode-fn decode-fn})] [:& (mf/provider context) {:value context-value} [:div {:class (dm/str class " " (stl/css :radio-btn-wrapper)) diff --git a/frontend/src/app/main/ui/ds/controls/input.cljs b/frontend/src/app/main/ui/ds/controls/input.cljs index 0df0c0c6d..963fe93e6 100644 --- a/frontend/src/app/main/ui/ds/controls/input.cljs +++ b/frontend/src/app/main/ui/ds/controls/input.cljs @@ -30,11 +30,11 @@ (let [ref (or ref (mf/use-ref)) type (d/nilv type "text") props (mf/spread-props props - :class (stl/css-case - :input true - :input-with-icon (some? icon)) - :ref ref - :type type) + {:class (stl/css-case + :input true + :input-with-icon (some? icon)) + :ref ref + :type type}) on-icon-click (mf/use-fn diff --git a/frontend/src/app/main/ui/ds/storybook.cljs b/frontend/src/app/main/ui/ds/storybook.cljs index d503f3a8f..bec97b7b0 100644 --- a/frontend/src/app/main/ui/ds/storybook.cljs +++ b/frontend/src/app/main/ui/ds/storybook.cljs @@ -1,4 +1,3 @@ - ;; This Source Code Form is subject to the terms of the Mozilla Public ;; License, v. 2.0. If a copy of the MPL was not distributed with this ;; file, You can obtain one at http://mozilla.org/MPL/2.0/. @@ -16,9 +15,9 @@ {::mf/props :obj} [{:keys [children size style] :rest other}] (let [class (stl/css :story-grid) - size (or size 16) - style (or style {}) - style (mf/spread style :--component-grid-size (dm/str size "px")) + size (or size 16) + style (or style #js {}) + style (mf/spread-props style {"--component-grid-size" (dm/str size "px")}) props (mf/spread-props other {:class class :style style})] [:> "article" props children])) @@ -41,4 +40,4 @@ [{:keys [children] :rest other}] (let [class (stl/css :story-grid-row) props (mf/spread-props other {:class class})] - [:> "article" props children])) \ No newline at end of file + [:> "article" props children])) diff --git a/frontend/src/app/main/ui/workspace.cljs b/frontend/src/app/main/ui/workspace.cljs index 67a831f30..325834266 100644 --- a/frontend/src/app/main/ui/workspace.cljs +++ b/frontend/src/app/main/ui/workspace.cljs @@ -29,7 +29,7 @@ [app.main.ui.workspace.plugins] [app.main.ui.workspace.sidebar :refer [left-sidebar right-sidebar]] [app.main.ui.workspace.sidebar.collapsable-button :refer [collapsed-button]] - [app.main.ui.workspace.sidebar.history :refer [history-toolbox]] + [app.main.ui.workspace.sidebar.history :refer [history-toolbox*]] [app.main.ui.workspace.tokens.modals] [app.main.ui.workspace.tokens.modals.themes] [app.main.ui.workspace.viewport :refer [viewport]] @@ -100,7 +100,7 @@ (when (dbg/enabled? :history-overlay) [:div {:class (stl/css :history-debug-overlay)} [:button {:on-click #(st/emit! dw/reinitialize-undo)} "CLEAR"] - [:& history-toolbox]]) + [:> history-toolbox*]]) [:& viewport {:file file :wlocal wlocal diff --git a/frontend/src/app/main/ui/workspace/context_menu.cljs b/frontend/src/app/main/ui/workspace/context_menu.cljs index 8261cea2b..8e160a564 100644 --- a/frontend/src/app/main/ui/workspace/context_menu.cljs +++ b/frontend/src/app/main/ui/workspace/context_menu.cljs @@ -536,7 +536,7 @@ [{:keys [mdata]}] (let [{:keys [disable-booleans disable-flatten]} mdata shapes (mf/deref refs/selected-objects) - props (mf/spread-props + props (mf/props {:shapes shapes :disable-booleans disable-booleans :disable-flatten disable-flatten})] diff --git a/frontend/src/app/main/ui/workspace/right_header.cljs b/frontend/src/app/main/ui/workspace/right_header.cljs index 32d679fea..6cb9618e9 100644 --- a/frontend/src/app/main/ui/workspace/right_header.cljs +++ b/frontend/src/app/main/ui/workspace/right_header.cljs @@ -141,8 +141,7 @@ ;; --- Header Component -(mf/defc right-header - {::mf/wrap-props false} +(mf/defc right-header* [{:keys [file layout page-id]}] (let [file-id (:id file) diff --git a/frontend/src/app/main/ui/workspace/sidebar.cljs b/frontend/src/app/main/ui/workspace/sidebar.cljs index 13d978290..d22493f14 100644 --- a/frontend/src/app/main/ui/workspace/sidebar.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar.cljs @@ -20,16 +20,16 @@ [app.main.ui.hooks.resize :refer [use-resize-hook]] [app.main.ui.workspace.comments :refer [comments-sidebar*]] [app.main.ui.workspace.left-header :refer [left-header]] - [app.main.ui.workspace.right-header :refer [right-header]] + [app.main.ui.workspace.right-header :refer [right-header*]] [app.main.ui.workspace.sidebar.assets :refer [assets-toolbox]] [app.main.ui.workspace.sidebar.debug :refer [debug-panel]] [app.main.ui.workspace.sidebar.debug-shape-info :refer [debug-shape-info]] - [app.main.ui.workspace.sidebar.history :refer [history-toolbox]] + [app.main.ui.workspace.sidebar.history :refer [history-toolbox*]] [app.main.ui.workspace.sidebar.layers :refer [layers-toolbox]] - [app.main.ui.workspace.sidebar.options :refer [options-toolbox]] + [app.main.ui.workspace.sidebar.options :refer [options-toolbox*]] [app.main.ui.workspace.sidebar.shortcuts :refer [shortcuts-container]] [app.main.ui.workspace.sidebar.sitemap :refer [sitemap]] - [app.main.ui.workspace.sidebar.versions :refer [versions-toolbox]] + [app.main.ui.workspace.sidebar.versions :refer [versions-toolbox*]] [app.main.ui.workspace.tokens.sidebar :refer [tokens-sidebar-tab]] [app.util.debug :as dbg] [app.util.i18n :refer [tr]] @@ -189,82 +189,99 @@ is-history? (contains? layout :document-history) is-inspect? (= section :inspect) + dbg-shape-panel? (dbg/enabled? :shape-panel) + current-section* (mf/use-state :info) current-section (deref current-section*) - can-be-expanded? (or (dbg/enabled? :shape-panel) - (and (not is-comments?) - (not is-history?) - is-inspect? - (= current-section :code))) + can-be-expanded? + (or dbg-shape-panel? + (and (not is-comments?) + (not is-history?) + is-inspect? + (= current-section :code))) {:keys [on-pointer-down on-lost-pointer-capture on-pointer-move set-size size]} (use-resize-hook :code 276 276 768 :x true :right) - handle-change-section - (mf/use-callback + on-change-section + (mf/use-fn (fn [section] (reset! current-section* section))) on-close-history (mf/use-fn #(st/emit! (dw/remove-layout-flag :document-history))) - handle-expand - (mf/use-callback + on-expand + (mf/use-fn (mf/deps size) (fn [] (set-size (if (> size 276) 276 768)))) props - (mf/spread props - :on-change-section handle-change-section - :on-expand handle-expand) + (mf/spread-props props + {:on-change-section on-change-section + :on-expand on-expand})] - history-tab - (mf/html - [:article {:class (stl/css :history-tab)} - [:& history-toolbox {}]]) + [:> (mf/provider muc/sidebar) {:value :right} + [:aside + {:class (stl/css-case :right-settings-bar true + :not-expand (not can-be-expanded?) + :expanded (> size 276)) - versions-tab - (mf/html - [:article {:class (stl/css :versions-tab)} - [:& versions-toolbox {}]])] + :id "right-sidebar-aside" + :data-testid "right-sidebar" + :data-size (str size) + :style {"--width" (if can-be-expanded? (dm/str size "px") "276px")}} - [:& (mf/provider muc/sidebar) {:value :right} - [:aside {:class (stl/css-case :right-settings-bar true - :not-expand (not can-be-expanded?) - :expanded (> size 276)) - - :id "right-sidebar-aside" - :data-testid "right-sidebar" - :data-size (str size) - :style #js {"--width" (if can-be-expanded? (dm/str size "px") "276px")}} (when can-be-expanded? [:div {:class (stl/css :resize-area) :on-pointer-down on-pointer-down :on-lost-pointer-capture on-lost-pointer-capture :on-pointer-move on-pointer-move}]) - [:& right-header {:file file :layout layout :page-id page-id}] + + [:> right-header* + {:file file + :layout layout + :page-id page-id}] [:div {:class (stl/css :settings-bar-inside)} (cond - (dbg/enabled? :shape-panel) + dbg-shape-panel? [:& debug-shape-info] - (true? is-comments?) + is-comments? [:> comments-sidebar* {}] - (true? is-history?) - [:> tab-switcher* - {:tabs #js [#js {:label (tr "workspace.versions.tab.history") :id "history" :content versions-tab} - #js {:label (tr "workspace.versions.tab.actions") :id "actions" :content history-tab}] - :default-selected "history" - :class (stl/css :left-sidebar-tabs) - :action-button-position "end" - :action-button (mf/html [:> icon-button* {:variant "ghost" - :aria-label (tr "labels.close") - :on-click on-close-history - :icon "close"}])}] + is-history? + (let [history-tab + (mf/html + [:article {:class (stl/css :history-tab)} + [:> history-toolbox*]]) + + versions-tab + (mf/html + [:article {:class (stl/css :versions-tab)} + [:> versions-toolbox*]]) + + button + (mf/html + [:> icon-button* {:variant "ghost" + :aria-label (tr "labels.close") + :on-click on-close-history + :icon "close"}])] + + [:> tab-switcher* + {:tabs [{:label (tr "workspace.versions.tab.history") + :id "history" + :content versions-tab} + {:label (tr "workspace.versions.tab.actions") + :id "actions" + :content history-tab}] + :default-selected "history" + :class (stl/css :left-sidebar-tabs) + :action-button-position "end" + :action-button button}]) :else - [:> options-toolbox props])]]])) + [:> options-toolbox* props])]]])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/history.cljs b/frontend/src/app/main/ui/workspace/sidebar/history.cljs index 753c99c3c..d5eb76bc3 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/history.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/history.cljs @@ -320,7 +320,7 @@ (when @show-detail? [:& history-entry-details {:entry entry}])])) -(mf/defc history-toolbox +(mf/defc history-toolbox* [] (let [objects (mf/deref refs/workspace-page-objects) {:keys [items index]} (mf/deref workspace-undo) diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs b/frontend/src/app/main/ui/workspace/sidebar/layers.cljs index 9dd8d234a..491b86707 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/layers.cljs @@ -43,7 +43,7 @@ [{:keys [selected] :as props}] (let [pending-selected (mf/use-var selected) current-selected (mf/use-state selected) - props (mf/spread props :selected @current-selected) + props (mf/spread-object props {:selected @current-selected}) set-selected (mf/use-memo diff --git a/frontend/src/app/main/ui/workspace/sidebar/options.cljs b/frontend/src/app/main/ui/workspace/sidebar/options.cljs index ebf93ffb8..f8fd19e1a 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options.cljs @@ -129,9 +129,9 @@ :file-id file-id :shared-libs shared-libs}])])) -(mf/defc options-content +(mf/defc options-content* {::mf/memo true - ::mf/props :obj} + ::mf/private true} [{:keys [selected shapes shapes-with-children page-id file-id on-change-section on-expand]}] (let [objects (mf/deref refs/workspace-page-objects) permissions (mf/use-ctx ctx/permissions) @@ -202,20 +202,19 @@ ;; selected-objects-with-children are derefed always but they only ;; need on multiple selection in majority of cases -(mf/defc options-toolbox - {::mf/memo true - ::mf/props :obj} +(mf/defc options-toolbox* + {::mf/memo true} [{:keys [section selected on-change-section on-expand]}] (let [page-id (mf/use-ctx ctx/current-page-id) file-id (mf/use-ctx ctx/current-file-id) shapes (mf/deref refs/selected-objects) shapes-with-children (mf/deref refs/selected-shapes-with-children)] - [:& options-content {:shapes shapes - :selected selected - :shapes-with-children shapes-with-children - :file-id file-id - :page-id page-id - :section section - :on-change-section on-change-section - :on-expand on-expand}])) + [:> options-content* {:shapes shapes + :selected selected + :shapes-with-children shapes-with-children + :file-id file-id + :page-id page-id + :section section + :on-change-section on-change-section + :on-expand on-expand}])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs index 57cf42d9d..b1b1a1c7e 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs @@ -456,7 +456,7 @@ type (if (= type "multiple") :simple :multiple)] (on-type-change type)))) - props (mf/spread props {:on-change on-change})] + props (mf/spread-object props {:on-change on-change})] (mf/with-effect [] ;; on destroy component diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs index 681e879f3..21a5c5faf 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs @@ -43,8 +43,7 @@ [prop] (select-margins (= prop :m1) (= prop :m2) (= prop :m3) (= prop :m4))) -(mf/defc margin-simple - {::mf/props :obj} +(mf/defc margin-simple* [{:keys [value on-change on-blur]}] (let [m1 (:m1 value) m2 (:m2 value) @@ -103,8 +102,7 @@ :nillable true :value m2}]]])) -(mf/defc margin-multiple - {::mf/props :obj} +(mf/defc margin-multiple* [{:keys [value on-change on-blur]}] (let [m1 (:m1 value) m2 (:m2 value) @@ -182,14 +180,13 @@ :value m4}]]])) -(mf/defc margin-section - {::mf/props :obj - ::mf/private true +(mf/defc margin-section* + {::mf/private true ::mf/expect-props #{:value :type :on-type-change :on-change}} [{:keys [type on-type-change] :as props}] (let [type (d/nilv type :simple) on-blur (mf/use-fn #(select-margins false false false false)) - props (mf/spread props :on-blur on-blur) + props (mf/spread-props props {:on-blur on-blur}) on-type-change' (mf/use-fn @@ -206,10 +203,10 @@ [:div {:class (stl/css :inputs-wrapper)} (cond (= type :simple) - [:> margin-simple props] + [:> margin-simple* props] (= type :multiple) - [:> margin-multiple props])] + [:> margin-multiple* props])] [:button {:class (stl/css-case :margin-mode true @@ -500,10 +497,10 @@ (when is-layout-child? [:div {:class (stl/css :row)} - [:& margin-section {:value (:layout-item-margin values) - :type (:layout-item-margin-type values) - :on-type-change on-margin-type-change - :on-change on-margin-change}]]) + [:> margin-section* {:value (:layout-item-margin values) + :type (:layout-item-margin-type values) + :on-type-change on-margin-type-change + :on-change on-margin-change}]]) (when (or (= h-sizing :fill) (= v-sizing :fill)) diff --git a/frontend/src/app/main/ui/workspace/sidebar/versions.cljs b/frontend/src/app/main/ui/workspace/sidebar/versions.cljs index c8d8a55a4..8d893e55e 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/versions.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/versions.cljs @@ -226,14 +226,13 @@ :on-click handle-pin-snapshot} (tr "workspace.versions.button.pin")]]]])]]])) -(mf/defc versions-toolbox +(mf/defc versions-toolbox* [] (let [profiles (mf/deref refs/profiles) profile (mf/deref refs/profile) expanded (mf/use-state #{}) - {:keys [status data editing]} (mf/deref versions)