♻️ Ligtwheight refactor on view app (start new rumext facilities).

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

@@ -337,3 +337,17 @@
   [id metadata]
   {:pre [(uuid? id) (us/valid? ::udp/metadata metadata)]}
   (UpdateMetadata. id metadata))
+
+(defrecord OpenView [page-id]
+  ptk/WatchEvent
+  (watch [_ state s]
+    (let [page-id (get-in state [:workspace :page])]
+      (rx/of (udp/persist-page page-id))))
+
+  ptk/EffectEvent
+  (effect [_ state s]
+    (let [rval (rand-int 1000000)
+          page (get-in state [:pages page-id])
+          project (get-in state [:projects (:project page)])
+          url (str cfg/viewurl "?v=" rval "#/preview/" (:share-token project) "/" page-id)]
+      (js/open url "new tab" ""))))

frontend/src/uxbox/view.cljs

@@ -6,24 +6,23 @@
 
 (ns ^:figwheel-hooks uxbox.view
   (:require
-   [rumext.core :as mx :include-macros true]
-   [uxbox.config]
+   [rumext.core :as mx]
+   [rumext.alpha :as mf]
    [uxbox.util.dom :as dom]
    [uxbox.util.html.history :as html-history]
    [uxbox.util.i18n :as i18n :refer [tr]]
-   [uxbox.util.messages :as uum]
    [uxbox.util.router :as rt]
    [uxbox.view.locales.en :as en]
    [uxbox.view.locales.fr :as fr]
    [uxbox.view.store :as st]
-   [uxbox.view.ui :refer [app]]
+   [uxbox.view.ui :as ui]
    [uxbox.view.ui.lightbox :refer [lightbox]]
    [uxbox.view.ui.loader :refer [loader]]))
 
 (i18n/update-locales! (fn [locales]
                         (-> locales
-                            (assoc :en en/locales)
-                            (assoc :fr fr/locales))))
+                            (assoc "en" en/locales)
+                            (assoc "fr" fr/locales))))
 
 (declare reinit)
 
@@ -32,30 +31,6 @@
    (println "Locale changed from" old " to " new)
    (reinit)))
 
-(defn- on-error
-  "A default error handler."
-  [error]
-  (cond
-    ;; Network error
-    (= (:status error) 0)
-    (do
-      (st/emit! (uum/error (tr "errors.network")))
-      (js/console.error "Stack:" (.-stack error)))
-
-    ;; Something else
-    :else
-    (do
-      (st/emit! (uum/error (tr "errors.generic")))
-      (js/console.error "Stack:" (.-stack error)))))
-
-(set! st/*on-error* on-error)
-
-;; --- Routes
-
-(def routes
-  [["/preview/:token/:index" :view/viewer]
-   ["/not-found" :view/notfound]])
-
 (defn- on-navigate
   [router path]
   (let [match (rt/match router path)]
@@ -69,15 +44,15 @@
 
 (defn init-ui
   []
-  (let [router (rt/init routes)
+  (let [router (rt/init ui/routes)
         cpath (deref html-history/path)]
 
     (st/emit! #(assoc % :router router))
     (add-watch html-history/path ::view #(on-navigate router %4))
 
-    (mx/mount (app) (dom/get-element "app"))
-    (mx/mount (lightbox) (dom/get-element "lightbox"))
-    (mx/mount (loader) (dom/get-element "loader"))
+    (mf/mount (mf/element ui/app) (dom/get-element "app"))
+    (mf/mount (lightbox) (dom/get-element "lightbox"))
+    (mf/mount (loader) (dom/get-element "loader"))
 
     (on-navigate router cpath)))
 

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

@@ -73,23 +73,23 @@
 
 ;; --- Select Page
 
-(defrecord SelectPage [index]
+(defrecord SelectPage [id]
   ptk/WatchEvent
   (watch [_ state stream]
     (let [token (get-in state [:route :params :path :token])]
-      (rx/of (rt/nav :view/viewer {:token token :index index})))))
+      (rx/of (rt/nav :view/viewer {:token token :id id})))))
 
 (defn select-page
-  [index]
-  (SelectPage. index))
+  [id]
+  (SelectPage. id))
 
 ;; --- Go to Page
 
 (defrecord GoToPage [id]
   ptk/WatchEvent
   (watch [_ state stream]
-    (let [token (get-in state [:route :params :token])]
-      (rx/of (rt/navigate :view/viewer {:token token :index nil :id id})))))
+    (let [token (get-in state [:route :params :path :token])]
+      (rx/of (rt/nav :view/viewer {:token token :id id})))))
 
 (defn go-to-page
   [id]

frontend/src/uxbox/view/ui.cljs

@@ -5,35 +5,65 @@
 ;; Copyright (c) 2016-2017 Andrey Antukh <niwi@niwi.nz>
 
 (ns uxbox.view.ui
-  (:require [lentes.core :as l]
-            [potok.core :as ptk]
-            [uxbox.builtins.icons :as i]
-            [uxbox.view.store :as st]
-            [uxbox.view.ui.loader :refer [loader]]
-            [uxbox.view.ui.lightbox :refer [lightbox]]
-            [uxbox.view.ui.notfound :refer [notfound-page]]
-            [uxbox.view.ui.viewer :refer [viewer-page]]
-            [uxbox.util.router :as rt]
-            [uxbox.util.i18n :refer [tr]]
-            [uxbox.util.data :refer [parse-int]]
-            [uxbox.util.messages :as uum]
-            [rumext.core :as mx :include-macros true]
-            [uxbox.util.dom :as dom]))
+  (:require
+   [lentes.core :as l]
+   [potok.core :as ptk]
+   [rumext.core :as mx]
+   [rumext.alpha :as mf]
+   [uxbox.builtins.icons :as i]
+   [uxbox.util.data :refer [parse-int]]
+   [uxbox.util.dom :as dom]
+   [uxbox.util.i18n :refer [tr]]
+   [uxbox.util.messages :as uum]
+   [uxbox.util.router :as rt]
+   [uxbox.view.store :as st]
+   [uxbox.view.ui.lightbox :refer [lightbox]]
+   [uxbox.view.ui.loader :refer [loader]]
+   [uxbox.view.ui.notfound :refer [notfound-page]]
+   [uxbox.view.ui.viewer :refer [viewer-page]]))
+
+;; --- Error Handling
+
+(defn- on-error
+  "A default error handler."
+  [error]
+  (cond
+    ;; Network error
+    (= (:status error) 0)
+    (do
+      (st/emit! (uum/error (tr "errors.network")))
+      (js/console.error "Stack:" (.-stack error)))
+
+    ;; Something else
+    :else
+    (do
+      (st/emit! (uum/error (tr "errors.generic")))
+      (js/console.error "Stack:" (.-stack error)))))
+
+(set! st/*on-error* on-error)
+
+
+;; --- Routes
+
+(def routes
+  [["/preview/:token/:id" :view/viewer]
+   ["/not-found" :view/notfound]])
+
+;; --- Main App (Component)
 
 (def route-ref
   (-> (l/key :route)
       (l/derive st/state)))
 
-;; --- Main App (Component)
-
-(mx/defc app
-  {:mixins [mx/static mx/reactive]}
+(mf/defc app
+  {:wrap [mf/reactive*]}
   []
-  (let [route (mx/react route-ref)]
-    (prn "view$app" route)
+  (let [route (mf/deref route-ref)]
     (case (get-in route [:data :name])
       :view/notfound (notfound-page)
-      :view/viewer (let [{:keys [index token]} (get-in route [:params :path])]
-                     (viewer-page token (parse-int index 0)))
+      :view/viewer (let [{:keys [token id]} (get-in route [:params :path])]
+                     (mf/element viewer-page {:token token
+                                              :id (uuid id)
+                                              :key [token id]}))
       nil)))
 

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

@@ -6,15 +6,17 @@
 ;; Copyright (c) 2016-2017 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
 (ns uxbox.view.ui.viewer
-  (:require [lentes.core :as l]
-            [uxbox.builtins.icons :as i]
-            [uxbox.util.i18n :refer [tr]]
-            [rumext.core :as mx :include-macros true]
-            [uxbox.view.store :as st]
-            [uxbox.view.data.viewer :as dv]
-            [uxbox.view.ui.viewer.nav :refer [nav]]
-            [uxbox.view.ui.viewer.canvas :refer [canvas]]
-            [uxbox.view.ui.viewer.sitemap :refer [sitemap]]))
+  (:require
+   [rumext.alpha :as mf]
+   [uxbox.builtins.icons :as i]
+   [uxbox.util.i18n :refer [tr]]
+   [uxbox.util.data :refer [seek]]
+   [uxbox.view.data.viewer :as dv]
+   [uxbox.view.store :as st]
+   [uxbox.view.ui.viewer.canvas :refer [canvas]]
+   [uxbox.view.ui.viewer.nav :refer [nav]]
+   [uxbox.view.ui.viewer.sitemap :refer [sitemap]]
+   [lentes.core :as l]))
 
 ;; --- Refs
 
@@ -31,24 +33,17 @@
 
 ;; --- Component
 
-(defn- viewer-page-init
-  [own]
-  (let [[token] (::mx/args own)]
-    (st/emit! (dv/initialize token))
-    own))
-
-(mx/defc viewer-page
-  {:mixins [mx/static mx/reactive]
-   :init viewer-page-init
-   :key-fn vector}
-  [token index id]
-  (let [{:keys [project pages flags]} (mx/react state-ref)
-        sitemap? (contains? flags :sitemap)]
+(mf/defc viewer-page
+  {:wrap [mf/reactive*]}
+  [{:keys [token id]}]
+  (let [{:keys [project pages flags]} (mf/deref state-ref)]
+    (mf/use-effect
+     {:init #(st/emit! (dv/initialize token))})
     (when (seq pages)
       [:section.view-content
-       (when sitemap?
-         (sitemap project pages index))
-       (nav flags)
-       (canvas (if (nil? id)
-                 (nth pages index)
-                 (some #(= id (:id %)) pages)))])))
+       (when (contains? flags :sitemap)
+         [:& sitemap {:project project
+                      :pages pages
+                      :selected id}])
+       [:& nav {:flags flags}]
+       [:& canvas {:page (seek #(= id (:id %)) pages)}]])))

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

@@ -6,13 +6,14 @@
 ;; Copyright (c) 2016-2017 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
 (ns uxbox.view.ui.viewer.canvas
-  (:require [rumext.core :as mx :include-macros true]
-            [uxbox.view.ui.viewer.shapes :as shapes]))
+  (:require
+   [rumext.alpha :as mf]
+   [uxbox.view.ui.viewer.shapes :as shapes]))
 
 ;; --- Background (Component)
 
-(mx/defc background
-  {:mixins [mx/static]}
+(mf/defc background
+  {:wrap [mf/memo*]}
   [{:keys [background] :as metadata}]
   [:rect
    {:x 0 :y 0
@@ -24,15 +25,16 @@
 
 (declare shape)
 
-(mx/defc canvas
-  {:mixins [mx/static]}
-  [{:keys [metadata id] :as page}]
-  (let [{:keys [width height]} metadata]
-    [:div.view-canvas {:ref (str "canvas" id)}
+(mf/defc canvas
+  {:wrap [mf/memo*]}
+  [{:keys [page] :as props}]
+  (let [{:keys [metadata id]} page
+        {:keys [width height]} metadata]
+    [:div.view-canvas
      [:svg.page-layout {:width width
                         :height height}
-      (background metadata)
+      [:& background metadata]
       (for [id (reverse (:shapes page))]
         (-> (shapes/shape id)
-            (mx/with-key (str id))))]]))
+            (mf/with-key (str id))))]]))
 

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

@@ -6,16 +6,16 @@
 ;; Copyright (c) 2016-2017 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
 (ns uxbox.view.ui.viewer.nav
-  (:require [potok.core :as ptk]
-            [uxbox.builtins.icons :as i]
-            [rumext.core :as mx :include-macros true]
-            [uxbox.main.data.lightbox :as udl]
-            [uxbox.util.i18n :refer (tr)]
-            [uxbox.view.store :as st]
-            [uxbox.view.data.viewer :as dv]))
+  (:require
+   [rumext.alpha :as mf]
+   [uxbox.builtins.icons :as i]
+   [uxbox.main.data.lightbox :as udl]
+   [uxbox.util.i18n :refer (tr)]
+   [uxbox.view.data.viewer :as dv]
+   [uxbox.view.store :as st]))
 
-(mx/defc nav
-  [flags]
+(mf/defc nav
+  [{:keys [flags] :as props}]
   (let [toggle-sitemap #(st/emit! (dv/toggle-flag :sitemap))
         toggle-interactions #(st/emit! (dv/toggle-flag :interactions))
         sitemap? (contains? flags :sitemap)

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

@@ -8,25 +8,24 @@
 (ns uxbox.view.ui.viewer.sitemap
   (:require
    [lentes.core :as l]
-   [rumext.core :as mx :include-macros true]
+   [rumext.alpha :as mf]
    [uxbox.builtins.icons :as i]
    [uxbox.view.data.viewer :as dv]
    [uxbox.view.store :as st]))
 
-(mx/defc sitemap
-  {:mixins [mx/static mx/reactive]}
-  [project pages selected]
+(mf/defc sitemap
+  [{:keys [project pages selected] :as props}]
   (let [project-name (:name project)
         on-click #(st/emit! (dv/select-page %))]
     [:div.view-sitemap
      [:span.sitemap-title project-name]
      [:ul.sitemap-list
-      (for [[i page] (map-indexed vector pages)
-            :let [selected? (= i selected)
-                  id (:id page)]]
-        [:li {:class (when selected? "selected")
-              :on-click (partial on-click i)
-              :id (str "page-" id)
-              :key (str i)}
-         [:div.page-icon i/page]
-         [:span (:name page)]])]]))
+      (for [page pages]
+        (let [selected? (= (:id page) selected)
+              page-id (:id page)]
+          [:li {:class (when selected? "selected")
+                :on-click (partial on-click page-id)
+                :id (str "page-" page-id)
+                :key page-id}
+           [:div.page-icon i/page]
+           [:span (:name page)]]))]]))