Merge pull request #5491 from penpot/niwinz-rumext-update

⚡ Update rumext version
2025-03-23 05:01:23 -05:00 · 2025-01-07 15:04:27 +01:00 · 2025-01-07 15:04:27 +01:00 · 2d955a2256
commit 2d955a2256
parent f878003ab5 6553861a6c
15 changed files with 118 additions and 104 deletions
--- 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"}
--- 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]
--- 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))
--- 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
--- 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]))
+    [:> "article" props children]))
--- 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
--- 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})]
--- 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)

--- 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])]]]))
--- 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)
--- 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
--- 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}]))
--- 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
--- 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))
--- 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)