feat(frontend): add many adaptations to rumext breaking changes

frontend/src/uxbox/main.cljs

@@ -68,7 +68,7 @@
 (defn- on-navigate
   [router path]
   (let [match (rt/match router path)]
-    (prn "on-navigate" path match)
+    ;; (prn "on-navigate" path match)
     (cond
       (and (= path "") (nil? match))
       (html-history/set-path! "/dashboard/projects")

frontend/src/uxbox/main/data/workspace.cljs

@@ -5,31 +5,31 @@
 ;; Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
 
 (ns uxbox.main.data.workspace
-  (:require [cljs.spec.alpha :as s]
-            [beicon.core :as rx]
-            [potok.core :as ptk]
-            [uxbox.main.store :as st]
-            [uxbox.main.constants :as c]
-            [uxbox.main.lenses :as ul]
-            [uxbox.main.workers :as uwrk]
-            [uxbox.main.data.projects :as dp]
-            [uxbox.main.data.pages :as udp]
-            [uxbox.main.data.shapes :as uds]
-            [uxbox.main.data.icons :as udi]
-            [uxbox.main.data.shapes-impl :as shimpl]
-            [uxbox.main.data.lightbox :as udl]
-            [uxbox.main.data.history :as udh]
-            [uxbox.main.data.workspace.scroll :as wscroll]
-            [uxbox.main.data.workspace.drawing :as wdrawing]
-            [uxbox.main.data.workspace.selrect :as wselrect]
-            [uxbox.main.data.workspace.ruler :as wruler]
-            [uxbox.util.uuid :as uuid]
-            [uxbox.util.spec :as us]
-            [uxbox.util.forms :as sc]
-            [uxbox.util.geom.point :as gpt]
-            [uxbox.util.time :as dt]
-            [uxbox.util.math :as mth]
-            [uxbox.util.data :refer (index-of)]))
+  (:require
+   [beicon.core :as rx]
+   [potok.core :as ptk]
+   [uxbox.main.store :as st]
+   [uxbox.main.constants :as c]
+   [uxbox.main.lenses :as ul]
+   [uxbox.main.workers :as uwrk]
+   [uxbox.main.data.projects :as dp]
+   [uxbox.main.data.pages :as udp]
+   [uxbox.main.data.shapes :as uds]
+   [uxbox.main.data.icons :as udi]
+   [uxbox.main.data.shapes-impl :as shimpl]
+   [uxbox.main.data.lightbox :as udl]
+   [uxbox.main.data.history :as udh]
+   [uxbox.main.data.workspace.scroll :as wscroll]
+   [uxbox.main.data.workspace.drawing :as wdrawing]
+   [uxbox.main.data.workspace.selrect :as wselrect]
+   [uxbox.main.data.workspace.ruler :as wruler]
+   [uxbox.util.uuid :as uuid]
+   [uxbox.util.spec :as us]
+   [uxbox.util.forms :as sc]
+   [uxbox.util.geom.point :as gpt]
+   [uxbox.util.time :as dt]
+   [uxbox.util.math :as mth]
+   [uxbox.util.data :refer (index-of)]))
 
 ;; --- Expose inner functions
 

frontend/src/uxbox/main/ui.cljs

@@ -31,12 +31,6 @@
    [uxbox.util.router :as rt]
    [uxbox.util.timers :as ts]))
 
-;; --- Refs
-
-(def route-ref
-  (-> (l/key :route)
-      (l/derive st/state)))
-
 ;; --- Routes
 
 (def routes
@@ -59,56 +53,53 @@
 
 ;; --- Main App (Component)
 
-(mx/defc app
-  {:mixins [mx/reactive]}
-  []
-  (let [route (mx/react route-ref)]
-    (case (get-in route [:data :name])
-      :auth/login (auth/login-page)
-      :auth/register (auth/register-page)
-      :auth/recovery-request (auth/recovery-request-page)
+(defn- parse-dashboard-params
+  [route section]
+  (let [{:keys [id type]} (get-in route [:params :query])
+        id (cond
+             (str/digits? id) (parse-int id)
+             (uuid-str? id) (uuid id)
+             :else nil)
+        type (when (str/alpha? type) (keyword type))]
+    {:section section
+     :id id
+     :type type}))
 
-      :auth/recovery
-      (let [token (get-in route [:params :path :token])]
-        (auth/recovery-page token))
 
-      :dashboard/projects (dashboard/projects-page)
-      :settings/profile (settings/profile-page)
-      :settings/password (settings/password-page)
-      :settings/notifications (settings/notifications-page)
-      ;; ;; :dashboard/elements (dashboard/elements-page)
+(mx/def app
+  :mixins [mx/reactive]
 
-      :dashboard/icons
-      (let [{:keys [id type]} (get-in route [:params :query])
-            id (cond
-                 (str/digits? id) (parse-int id)
-                 (uuid-str? id) (uuid id)
-                 :else nil)
-            type (when (str/alpha? type) (keyword type))]
-        (dashboard/icons-page type id))
+  :init
+  (fn [own props]
+    (assoc own ::route-ref (l/derive (l/key :route) st/state)))
 
-      :dashboard/images
-      (let [{:keys [id type]} (get-in route [:params :query])
-            id (cond
-                 (str/digits? id) (parse-int id)
-                 (uuid-str? id) (uuid id)
-                 :else nil)
-            type (when (str/alpha? type) (keyword type))]
-        (dashboard/images-page type id))
+  :render
+  (fn [own props]
+    (let [route (mx/react (::route-ref own))]
+      (case (get-in route [:data :name])
+        :auth/login (auth/login-page)
+        :auth/register (auth/register-page)
+        :auth/recovery-request (auth/recovery-request-page)
 
-      :dashboard/colors
-      (let [{:keys [id type]} (get-in route [:params :query])
-            type (when (str/alpha? type) (keyword type))
-            id (cond
-                 (str/digits? id) (parse-int id)
-                 (uuid-str? id) (uuid id)
-                 :else nil)]
-        (dashboard/colors-page type id))
+        :auth/recovery
+        (let [token (get-in route [:params :path :token])]
+          (auth/recovery-page token))
 
-      :workspace/page
-      (let [projectid (uuid (get-in route [:params :path :project]))
-            pageid (uuid (get-in route [:params :path :page]))]
-        (workspace projectid pageid))
+        :settings/profile (settings/profile-page)
+        :settings/password (settings/password-page)
+        :settings/notifications (settings/notifications-page)
 
-      nil
-      )))
+        :dashboard/projects (dashboard/dashboard {:section :projects})
+        :dashboard/icons (-> (parse-dashboard-params route :icons)
+                             (dashboard/dashboard))
+        :dashboard/images (-> (parse-dashboard-params route :images)
+                              (dashboard/dashboard))
+        :dashboard/colors (-> (parse-dashboard-params route :colors)
+                              (dashboard/dashboard))
+        :workspace/page
+        (let [project (uuid (get-in route [:params :path :project]))
+              page (uuid (get-in route [:params :path :page]))]
+          (workspace {:project project :page page}))
+
+        nil
+        ))))

frontend/src/uxbox/main/ui/auth/login.cljs

@@ -89,7 +89,7 @@
 
 (mx/defc login-page
   {:mixins [mx/static (fm/clear-mixin st/store :login)]
-   :will-mount (fn [own]
+   :init (fn [own]
                  (when @st/auth-ref
                    (st/emit! (rt/navigate :dashboard/projects)))
                  own)}

frontend/src/uxbox/main/ui/auth/recovery.cljs

@@ -2,23 +2,24 @@
 ;; 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/.
 ;;
-;; Copyright (c) 2015-2017 Andrey Antukh <niwi@niwi.nz>
 ;; Copyright (c) 2015-2017 Juan de la Cruz <delacruzgarciajuan@gmail.com>
+;; Copyright (c) 2015-2019 Andrey Antukh <niwi@niwi.nz>
 
 (ns uxbox.main.ui.auth.recovery
-  (:require [cljs.spec.alpha :as s :include-macros true]
-            [lentes.core :as l]
-            [cuerdas.core :as str]
-            [uxbox.builtins.icons :as i]
-            [uxbox.main.store :as st]
-            [uxbox.main.data.auth :as uda]
-            [uxbox.main.ui.messages :refer [messages-widget]]
-            [uxbox.main.ui.navigation :as nav]
-            [uxbox.util.i18n :refer (tr)]
-            [uxbox.util.dom :as dom]
-            [uxbox.util.forms :as fm]
-            [rumext.core :as mx :include-macros true]
-            [uxbox.util.router :as rt]))
+  (:require
+   [cljs.spec.alpha :as s :include-macros true]
+   [cuerdas.core :as str]
+   [lentes.core :as l]
+   [rumext.core :as mx :include-macros true]
+   [uxbox.builtins.icons :as i]
+   [uxbox.main.data.auth :as uda]
+   [uxbox.main.store :as st]
+   [uxbox.main.ui.messages :refer [messages-widget]]
+   [uxbox.main.ui.navigation :as nav]
+   [uxbox.util.dom :as dom]
+   [uxbox.util.forms :as fm]
+   [uxbox.util.i18n :refer (tr)]
+   [uxbox.util.router :as rt]))
 
 (def form-data (fm/focus-data :recovery st/state))
 (def form-errors (fm/focus-errors :recovery st/state))
@@ -64,15 +65,15 @@
 
 ;; --- Recovery Page
 
-(defn- recovery-page-will-mount
+(defn- recovery-page-init
   [own]
-  (let [[token] (:rum/args own)]
+  (let [[token] (::mx/args own)]
     (st/emit! (uda/validate-recovery-token token))
     own))
 
 (mx/defc recovery-page
   {:mixins [mx/static (fm/clear-mixin st/store :recovery)]
-   :will-mount recovery-page-will-mount}
+   :init recovery-page-init}
   [token]
   [:div.login
    [:div.login-body

frontend/src/uxbox/main/ui/colorpicker.cljs

@@ -102,7 +102,7 @@
 
 (mx/defcs colorpicker
   {:mixins [mx/static (mx/local)]}
-  [{:keys [rum/local] :as own} & {:keys [value on-change theme]
+  [{:keys [::mx/local] :as own} & {:keys [value on-change theme]
                                   :or {value "#d4edfb" theme :default}}]
   (let [value-rgb (color/hex->rgb value)
         classes (case theme

frontend/src/uxbox/main/ui/lightbox.cljs

@@ -33,7 +33,7 @@
     (when (dom/equals? parent current)
       (udl/close!))))
 
-(defn- lightbox-will-mount
+(defn- lightbox-init
   [own]
   (let [key (events/listen js/document
                            EventType.KEYDOWN
@@ -47,7 +47,7 @@
 
 (mx/defcs lightbox
   {:mixins [mx/reactive]
-   :will-mount lightbox-will-mount
+   :init lightbox-init
    :will-unmount lightbox-will-umount}
   [own]
   (let [data (mx/react lightbox-ref)

frontend/src/uxbox/main/ui/shapes/image.cljs

@@ -31,10 +31,10 @@
 
 (mx/defcs image-component
   {:mixins [mx/static mx/reactive]
-   :will-mount (fn [own]
+   :init (fn [own]
                  ;; TODO: maybe do it conditionally
                  ;; (only fetch when it's not fetched)
-                 (when-let [id (-> own :rum/args first :image)]
+                 (when-let [id (-> own ::mx/props first :image)]
                    (st/emit! (udi/fetch-image id)))
                  own)}
   [own {:keys [id image] :as shape}]

frontend/src/uxbox/main/ui/shapes/selection.cljs

@@ -120,7 +120,6 @@
             :cy cy}])
 
 (mx/defc controls
-  {:mixins [mx/static]}
   [{:keys [x1 y1 width height] :as shape} zoom on-mouse-down]
   (let [radius (if (> (max width height) handler-size-threshold) 6.0 4.0)]
     [:g.controls
@@ -226,7 +225,6 @@
     (controls selection zoom on-click)))
 
 (mx/defc single-selection-handlers
-  {:mixins [mx/static]}
   [{:keys [id] :as shape} zoom]
   (let [on-click #(do (dom/stop-propagation %2)
                       (start-resize %1 #{id} shape))
@@ -247,35 +245,37 @@
                           :stroke-opacity "0.5"
                           :fill "transparent"}}]]))
 
-(mx/defc selection-handlers
-  {:mixins [mx/reactive mx/static]}
-  []
-  (let [shapes (mx/react selected-shapes-ref)
-        modifiers (mx/react selected-modifers-ref)
-        ;; Edition is a workspace global flag
-        ;; because only one shape can be on
-        ;; the edition mode.
-        edition? (mx/react refs/selected-edition)
-        zoom (mx/react refs/selected-zoom)
-        num (count shapes)
-        {:keys [id type] :as shape} (first shapes)]
-    (cond
-      (zero? num)
-      nil
+(mx/def selection-handlers
+  :mixins [mx/reactive mx/static]
+  :render
+  (fn [own props]
+    (let [shapes (mx/react selected-shapes-ref)
+          modifiers (mx/react selected-modifers-ref)
+          ;; Edition is a workspace global flag
+          ;; because only one shape can be on
+          ;; the edition mode.
+          edition? (mx/react refs/selected-edition)
+          zoom (mx/react refs/selected-zoom)
+          num (count shapes)
+          {:keys [id type] :as shape} (first shapes)]
 
-      (> num 1)
-      (multiple-selection-handlers shapes modifiers zoom)
+      (cond
+        (zero? num)
+        nil
 
-      (and (= type :text) edition?)
-      (-> (assoc shape :modifiers (get modifiers id))
-          (text-edition-selection-handlers zoom))
+        (> num 1)
+        (multiple-selection-handlers shapes modifiers zoom)
 
-      (= type :path)
-      (if (= @refs/selected-edition (:id shape))
-        (path-edition-selection-handlers shape zoom)
+        (and (= type :text) edition?)
         (-> (assoc shape :modifiers (get modifiers id))
-            (single-selection-handlers zoom)))
+            (text-edition-selection-handlers zoom))
 
-      :else
-      (-> (assoc shape :modifiers (get modifiers id))
-          (single-selection-handlers zoom)))))
+        (= type :path)
+        (if (= @refs/selected-edition (:id shape))
+          (path-edition-selection-handlers shape zoom)
+          (-> (assoc shape :modifiers (get modifiers id))
+              (single-selection-handlers zoom)))
+
+        :else
+        (-> (assoc shape :modifiers (get modifiers id))
+            (single-selection-handlers zoom))))))

frontend/src/uxbox/main/ui/shapes/text.cljs

@@ -106,7 +106,7 @@
 
 (defn- text-shape-edit-did-mount
   [own]
-  (let [[shape] (:rum/args own)
+  (let [[shape] (::mx/props own)
         dom (mx/ref-node own "container")]
     (set! (.-textContent dom) (:content shape ""))
     (.focus dom)
@@ -140,25 +140,15 @@
 
 (defn text-shape-wrapper-did-mount
   [own]
-  (let [[shape] (:rum/args own)
+  (let [[shape] (::mx/props own)
         dom (mx/ref-node own "fobject")
         html (dom/render-to-html (text-shape-html shape))]
     (set! (.-innerHTML dom) html))
     own)
 
-(defn text-shape-wrapper-did-remount
-  [old own]
-  (let [[old-shape] (:rum/args old)
-        [shape] (:rum/args own)]
-    (when (not= shape old-shape)
-      (let [dom (mx/ref-node own "fobject")
-            html (dom/render-to-html (text-shape-html shape))]
-        (set! (.-innerHTML dom) html)))
-    own))
-
 (mx/defc text-shape-wrapper
   {:did-mount text-shape-wrapper-did-mount
-   :did-remount text-shape-wrapper-did-remount}
+   :key-fn #(pr-str %1)}
   [{:keys [id modifiers] :as shape}]
   (let [{:keys [displacement resize]} modifiers
         xfmt (cond-> (gmt/matrix)
@@ -188,7 +178,7 @@
 (mx/defc text-shape
   {:mixins [mx/static]
    :did-mount text-shape-wrapper-did-mount
-   :did-remount text-shape-wrapper-did-remount}
+   :key-fn #(pr-str %1)}
   [{:keys [id content modifiers] :as shape}]
   (let [{:keys [displacement resize]} modifiers
         xfmt (cond-> (gmt/matrix)

frontend/src/uxbox/main/ui/users.cljs

@@ -2,20 +2,21 @@
 ;; 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/.
 ;;
-;; Copyright (c) 2016 Andrey Antukh <niwi@niwi.nz>
+;; Copyright (c) 2016-2019 Andrey Antukh <niwi@niwi.nz>
 
 (ns uxbox.main.ui.users
-  (:require [cuerdas.core :as str]
-            [lentes.core :as l]
-            [potok.core :as ptk]
-            [uxbox.main.store :as st]
-            [uxbox.main.data.auth :as da]
-            [uxbox.main.data.lightbox :as udl]
-            [uxbox.builtins.icons :as i]
-            [uxbox.main.ui.navigation :as nav]
-            [uxbox.util.i18n :refer (tr)]
-            [uxbox.util.router :as rt]
-            [rumext.core :as mx :include-macros true]))
+  (:require
+   [cuerdas.core :as str]
+   [lentes.core :as l]
+   [potok.core :as ptk]
+   [rumext.core :as mx :include-macros true]
+   [uxbox.builtins.icons :as i]
+   [uxbox.main.data.auth :as da]
+   [uxbox.main.data.lightbox :as udl]
+   [uxbox.main.store :as st]
+   [uxbox.main.ui.navigation :as nav]
+   [uxbox.util.i18n :refer (tr)]
+   [uxbox.util.router :as rt]))
 
 ;; --- User Menu
 
@@ -46,7 +47,7 @@
   {:mixins [mx/static mx/reactive (mx/local {:open false})]}
   [own]
   (let [profile (mx/react profile-ref)
-        local (:rum/local own)
+        local (::mx/local own)
         photo (if (str/empty? (:photo profile ""))
                 "/images/avatar.jpg"
                 (:photo profile))]

frontend/src/uxbox/view/ui/lightbox.cljs

@@ -39,7 +39,7 @@
     (when (dom/equals? parent current)
       (udl/close!))))
 
-(defn- lightbox-will-mount
+(defn- lightbox-init
   [own]
   (let [key (events/listen js/document
                            EventType.KEYDOWN
@@ -53,7 +53,7 @@
 
 (mx/defcs lightbox
   {:mixins [mx/reactive]
-   :will-mount lightbox-will-mount
+   :init lightbox-init
    :will-unmount lightbox-will-umount}
   [own]
   (let [data (mx/react lightbox-ref)

frontend/src/uxbox/view/ui/viewer.cljs

@@ -31,24 +31,16 @@
 
 ;; --- Component
 
-(defn- viewer-page-will-mount
+(defn- viewer-page-init
   [own]
-  (let [[token] (:rum/args own)]
+  (let [[token] (::mx/args own)]
     (st/emit! (dv/initialize token))
     own))
 
-(defn- viewer-page-did-remount
-  [oldown own]
-  (let [[old-token] (:rum/args oldown)
-        [new-token] (:rum/args own)]
-    (when (not= old-token new-token)
-      (st/emit! (dv/initialize new-token)))
-    own))
-
 (mx/defc viewer-page
   {:mixins [mx/static mx/reactive]
-   :will-mount viewer-page-will-mount
-   :did-remount viewer-page-did-remount}
+   :init viewer-page-init
+   :key-fn vector}
   [token index id]
   (let [{:keys [project pages flags]} (mx/react state-ref)
         sitemap? (contains? flags :sitemap)]

frontend/src/uxbox/view/ui/viewer/shapes.cljs

@@ -36,7 +36,7 @@
 (defn- interactions-wrapper-did-mount
   [own]
   (let [dom (mx/dom-node own)
-        shape (first (:rum/args own))
+        shape (first (::mx/args own))
         evnts (itx/build-events shape)
         keys (reduce (fn [acc [evt callback]]
                        (conj acc (events/listen dom evt callback)))
@@ -81,8 +81,8 @@
 
 (mx/defc image-shape-wrapper
   {:mixins [mx/static mx/reactive]
-   :will-mount (fn [own]
-                 (when-let [image-id (-> own :rum/args first :image)]
+   :init (fn [own]
+                 (when-let [image-id (-> own ::mx/args first :image)]
                    (st/emit! (udv/fetch-image image-id)))
                  own)}
   [{:keys [image] :as item}]