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,7 +5,7 @@
 ;; Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
 
 (ns uxbox.main.data.workspace
-  (:require [cljs.spec.alpha :as s]
+  (:require
    [beicon.core :as rx]
    [potok.core :as ptk]
    [uxbox.main.store :as st]

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,10 +53,29 @@
 
 ;; --- Main App (Component)
 
-(mx/defc app
+(defn- parse-dashboard-params
-  {:mixins [mx/reactive]}
+  [route section]
-  []
+  (let [{:keys [id type]} (get-in route [:params :query])
-  (let [route (mx/react route-ref)]
+        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}))
+
+
+(mx/def app
+  :mixins [mx/reactive]
+
+  :init
+  (fn [own props]
+    (assoc own ::route-ref (l/derive (l/key :route) st/state)))
+
+  :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)
@@ -72,43 +85,21 @@
         (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)
-
-      :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))
-
-      :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))
-
-      :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))
 
+        :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 [projectid (uuid (get-in route [:params :path :project]))
+        (let [project (uuid (get-in route [:params :path :project]))
-            pageid (uuid (get-in route [:params :path :page]))]
+              page (uuid (get-in route [:params :path :page]))]
-        (workspace projectid pageid))
+          (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,22 +2,23 @@
 ;; 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]
+  (:require
-            [lentes.core :as l]
+   [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.store :as st]
    [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.i18n :refer (tr)]
    [uxbox.util.dom :as dom]
    [uxbox.util.forms :as fm]
-            [rumext.core :as mx :include-macros true]
+   [uxbox.util.i18n :refer (tr)]
    [uxbox.util.router :as rt]))
 
 (def form-data (fm/focus-data :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,9 +245,10 @@
                           :stroke-opacity "0.5"
                           :fill "transparent"}}]]))
 
-(mx/defc selection-handlers
+(mx/def selection-handlers
-  {:mixins [mx/reactive mx/static]}
+  :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
@@ -259,6 +258,7 @@
           zoom (mx/react refs/selected-zoom)
           num (count shapes)
           {:keys [id type] :as shape} (first shapes)]
+
       (cond
         (zero? num)
         nil
@@ -278,4 +278,4 @@
 
         :else
         (-> (assoc shape :modifiers (get modifiers id))
-          (single-selection-handlers zoom)))))
+            (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]
+  (:require
+   [cuerdas.core :as str]
    [lentes.core :as l]
    [potok.core :as ptk]
-            [uxbox.main.store :as st]
+   [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.builtins.icons :as i]
+   [uxbox.main.store :as st]
    [uxbox.main.ui.navigation :as nav]
    [uxbox.util.i18n :refer (tr)]
-            [uxbox.util.router :as rt]
+   [uxbox.util.router :as rt]))
-            [rumext.core :as mx :include-macros true]))
 
 ;; --- 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
+   :init viewer-page-init
-   :did-remount viewer-page-did-remount}
+   :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]
+   :init (fn [own]
-                 (when-let [image-id (-> own :rum/args first :image)]
+                 (when-let [image-id (-> own ::mx/args first :image)]
                    (st/emit! (udv/fetch-image image-id)))
                  own)}
   [{:keys [image] :as item}]