feat(frontend): initial work on react and rumext upgrade

frontend/deps.edn

@@ -1,13 +1,20 @@
 {:deps {org.clojure/clojurescript {:mvn/version "1.10.516"}
-        org.clojure/clojure {:mvn/version "1.10.0"}
+        org.clojure/clojure {:mvn/version "1.10.1"}
-        funcool/rumext {:mvn/version  "1.0.0"}
+        ;; funcool/rumext {:mvn/version  "1.0.0"}
         funcool/promesa {:mvn/version "2.0.0"}
         com.cognitect/transit-cljs {:mvn/version "0.8.239"}
-        rum/rum {:mvn/version "0.10.8" :exclusions [cljsjs/react cljsjs/react-dom]}
+        ;; rum/rum {:mvn/version "0.11.3" :exclusions [cljsjs/react cljsjs/react-dom]}
+
+        funcool/rumext {:git/url "https://github.com/funcool/rumext.git",
+                        :sha "3d598e749ba429eae6544e532fc9f81369b307f5"}
+
+        ;; cljsjs/react {:mvn/version "15.5.0-0"}
+        ;; cljsjs/react-dom {:mvn/version "15.5.0-0"}
+        ;; cljsjs/react-dom-server {:mvn/version "15.5.0-0"}
+        cljsjs/react {:mvn/version "16.8.6-0"}
+        cljsjs/react-dom {:mvn/version "16.8.6-0"}
+        cljsjs/react-dom-server {:mvn/version "16.8.6-0"}
 
-        cljsjs/react {:mvn/version "15.5.0-0"}
-        cljsjs/react-dom {:mvn/version "15.5.0-0"}
-        cljsjs/react-dom-server {:mvn/version "15.5.0-0"}
         environ/environ {:mvn/version "1.1.0"}
 
         funcool/beicon {:mvn/version "3.2.0"}
@@ -21,10 +28,13 @@
  {:dev
   {:extra-deps {com.bhauman/rebel-readline-cljs {:mvn/version "0.1.4"}
                 com.bhauman/rebel-readline {:mvn/version "0.1.4"}
-                com.bhauman/figwheel-main {:mvn/version "0.2.0"}
+                com.bhauman/figwheel-main {:mvn/version "0.2.1-SNAPSHOT"}
                 org.clojure/tools.namespace {:mvn/version "0.2.11"}
                 }
 
    :extra-paths ["test" "resources"]}
+
+  :repl {:main-opts  ["-m" "rebel-readline.main"]
+         :extra-deps {com.bhauman/rebel-readline {:mvn/version "0.1.4"}}}
   }}
 

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

@@ -5,8 +5,7 @@
 ;; Copyright (c) 2016 Andrey Antukh <niwi@niwi.nz>
 
 (ns uxbox.main.data.undo
-  (:require #_[cljs.pprint :as pp]
+  (:require [beicon.core :as rx]
-            [beicon.core :as rx]
             [potok.core :as ptk]
             [uxbox.main.data.pages :as udp]
             [uxbox.main.store :as st]))

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

@@ -376,11 +376,6 @@
               (vreset! last-point point)
               (st/emit! (insert-drawing-path-point point)))
 
-            (on-draw [[point ctrl? counter]]
-              (if ctrl?
-                (on-assisted-draw point counter)
-                (on-generic-draw point counter)))
-
             (on-generic-draw [point counter]
               (st/emit! (update-drawing-path-point counter point)))
 
@@ -391,6 +386,11 @@
                             (gpt/add $ @last-point))]
                 (st/emit! (update-drawing-path-point counter point))))
 
+            (on-draw [[point ctrl? counter]]
+              (if ctrl?
+                (on-assisted-draw point counter)
+                (on-generic-draw point counter)))
+
               (on-finish []
                 (st/emit! (finish-path-drawing)
                           (finish-drawing)))]

frontend/src/uxbox/main/repo/auth.cljs

@@ -17,7 +17,7 @@
 
 (defmethod request :fetch/token
   [type data]
-  (let [url (str url "/auth/token")]
+  (let [url (str url "/auth/login")]
     (send! {:url url
                 :method :post
                 :auth false

frontend/src/uxbox/main/repo/impl.cljs

@@ -7,6 +7,7 @@
 (ns uxbox.main.repo.impl
   (:require [clojure.walk :as walk]
             [beicon.core :as rx]
+            [cuerdas.core :as str]
             [uxbox.config :refer (url)]
             [uxbox.util.http :as http]
             [uxbox.util.storage :refer (storage)]
@@ -15,9 +16,10 @@
 
 (defn- conditional-decode
   [{:keys [body headers] :as response}]
-  (if (= (get headers "content-type") "application/transit+json")
+  (let [contentype (get headers "content-type")]
+    (if (str/starts-with? contentype "application/transit+json")
       (assoc response :body (t/decode body))
-    response))
+      response)))
 
 (defn- handle-http-status
   [{:keys [body status] :as response}]
@@ -28,11 +30,6 @@
 (def ^:private +headers+
   {"content-type" "application/transit+json"})
 
-(defn- auth-headers
-  []
-  (when-let [auth (:auth storage)]
-    {"authorization" (str "Token " (:token auth "no-token"))}))
-
 (defn- encode-query
   [params]
   (let [data (QueryData.)]
@@ -42,16 +39,16 @@
 (defn send!
   [{:keys [body headers auth method query url response-type]
     :or {auth true response-type :text}}]
-  (let [headers (merge {}
+  (let [headers (merge {"accept" "application/transit+json,*/*"}
                        (when (map? body) +headers+)
-                       headers
+                       headers)
-                       (when auth (auth-headers)))
         request {:method method
                  :url url
                  :headers headers
                  :query-string (when query (encode-query query))
                  :body (if (map? body) (t/encode body) body)}
-        options {:response-type response-type}]
+        options {:response-type response-type
+                 :credentials? true}]
     (->> (http/send! request options)
          (rx/map conditional-decode)
          (rx/mapcat handle-http-status))))

frontend/src/uxbox/main/repo/pages.cljs

@@ -19,8 +19,9 @@
 
 (defmethod request :fetch/pages-by-project
   [type {:keys [project] :as params}]
-  (let [url (str url "/projects/" project "/pages")]
+  (let [url (str url "/pages")
-    (send! {:method :get :url url})))
+        params {:project project}]
+    (send! {:method :get :url url :query params})))
 
 (defmethod request :fetch/page-history
   [type {:keys [page] :as params}]

frontend/src/uxbox/main/ui/dashboard/colors.cljs

@@ -138,8 +138,9 @@
      (when own?
        [:li {}
         [:a.btn-primary {:on-click #(st/emit! (dc/create-collection))} (tr "ds.colors-collection.new")]])
-     (mx/doseq [{:keys [id] :as coll} colls]
+     (for [coll colls]
-       (let [selected? (= (:id coll) selected)]
+       (let [id (:id coll)
+             selected? (= id selected)]
          (-> (nav-item coll selected?)
              (mx/with-key id))))]))
 
@@ -191,7 +192,7 @@
                     (on-select id))]
     [:ul.move-list {}
      [:li.title {} title]
-     (mx/doseq [{:keys [id name] :as coll} colls]
+     (for [{:keys [id name] :as coll} colls]
        [:li {:key (str id)}
         [:a {:on-click #(on-select % id)} name]])]))
 
@@ -281,7 +282,7 @@
     [:div.dashboard-grid-content {}
      [:div.dashboard-grid-row {}
       (when editable? (grid-form id))
-      (mx/doseq [color colors]
+      (for [color colors]
         (let [selected? (contains? selected color)]
           (-> (grid-item color selected?)
               (mx/with-key (str color)))))]]))

frontend/src/uxbox/main/ui/dashboard/icons.cljs

@@ -58,11 +58,11 @@
   (-> (l/in [:dashboard :icons])
       (l/derive st/state)))
 
-(def ^:private collections-ref
+(def collections-ref
   (-> (l/key :icons-collections)
       (l/derive st/state)))
 
-(def ^:private icons-ref
+(def icons-ref
   (-> (l/key :icons)
       (l/derive st/state)))
 
@@ -184,7 +184,7 @@
          (tr "ds.icons-collection.new")]])
      (when own?
        (nav-item nil (nil? selected)))
-     (mx/doseq [coll colls]
+     (for [coll colls]
        (let [selected? (= (:id coll) selected)]
          (-> (nav-item coll selected?)
              (mx/with-key (:id coll)))))]))
@@ -253,7 +253,7 @@
      [:li.title {} title]
      [:li {}
       [:a {:href "#" :on-click #(on-select % nil)} "Storage"]]
-     (mx/doseq [{:keys [id name] :as coll} colls]
+     (for [{:keys [id name] :as coll} colls]
        [:li {:key (str id)}
         [:a {:on-click #(on-select % id)} name]])]))
 
@@ -333,14 +333,14 @@
           (toggle-selection-shifted [event]
             (when (kbd/shift? event)
               (toggle-selection event)))
-          (on-key-down [event]
-            (when (kbd/enter? event)
-              (on-blur event)))
           (on-blur [event]
             (let [target (dom/event->target event)
                   name (dom/get-value target)]
               (st/emit! (di/update-opts :edition false)
                         (di/rename-icon id name))))
+          (on-key-down [event]
+            (when (kbd/enter? event)
+              (on-blur event)))
           (ignore-click [event]
             (dom/stop-propagation event)
             (dom/prevent-default event))
@@ -386,7 +386,7 @@
     [:div.dashboard-grid-content {}
      [:div.dashboard-grid-row {}
       (when editable? (grid-form id))
-      (mx/doseq [{:keys [id] :as icon} icons]
+      (for [{:keys [id] :as icon} icons]
         (let [edition? (= edition id)
               selected? (contains? selected id)]
           (-> (grid-item icon selected? edition?)
@@ -431,7 +431,7 @@
          [:select.input-select
           {:on-change on-ordering-change
            :value (pr-str ordering)}
-          (mx/doseq [[key value] (seq +ordering-options+)]
+          (for [[key value] (seq +ordering-options+)]
             (let [key (pr-str key)]
               [:option {:key key :value key} (tr value)]))]]
         ;; Search

frontend/src/uxbox/main/ui/dashboard/images.cljs

@@ -179,7 +179,7 @@
          (tr "ds.images-collection.new")]])
      (when own?
        (nav-item nil (nil? selected)))
-     (mx/doseq [coll collections]
+     (for [coll collections]
        (let [selected? (= (:id coll) selected)
              key (str (:id coll))]
          (-> (nav-item coll selected?)
@@ -256,7 +256,7 @@
      [:li.title {} title]
      [:li {}
       [:a {:href "#" :on-click #(on-select % nil)} "Storage"]]
-     (mx/doseq [{:keys [id name] :as coll} colls]
+     (for [{:keys [id name] :as coll} colls]
        [:li {:key (str id)}
         [:a {:on-click #(on-select % id)} name]])]))
 
@@ -378,7 +378,7 @@
      [:div.dashboard-grid-row {}
       (when editable?
         (grid-form id))
-      (mx/doseq [{:keys [id] :as image} images]
+      (for [{:keys [id] :as image} images]
         (let [edition? (= edition id)
               selected? (contains? selected id)]
           (-> (grid-item image selected? edition?)
@@ -423,7 +423,7 @@
          [:span {} (tr "ds.ordering")]
          [:select.input-select {:on-change on-ordering-change
                                 :value (pr-str ordering)}
-          (mx/doseq [[key value] (seq +ordering-options+)]
+          (for [[key value] (seq +ordering-options+)]
             (let [key (pr-str key)
                   label (tr value)]
               [:option {:key key :value key} label]))]]

frontend/src/uxbox/main/ui/dashboard/projects.cljs

@@ -101,7 +101,7 @@
          [:select.input-select
           {:on-change on-ordering-change
            :value (pr-str ordering)}
-          (mx/doseq [[key value] (seq +ordering-options+)]
+          (for [[key value] (seq +ordering-options+)]
             (let [key (pr-str key)]
               [:option {:key key :value key} (tr value)]))]]
         ;; Search
@@ -222,7 +222,7 @@
          [:div.grid-item.add-project
           {:on-click on-click}
           [:span {} (tr "ds.project-new")]]
-         (mx/doseq [item projects]
+         (for [item projects]
            (-> (grid-item item)
                (mx/with-key (:id item))))]]])))
 

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

@@ -51,7 +51,7 @@
         (assoc :stroke-dasharray (stroke-type->dasharray stroke-style))
         (dissoc :stroke-style))))
 
-(defn- extract-style-attrs
+(defn extract-style-attrs
   "Extract predefinet attrs from shapes."
   [shape]
   (-> (select-keys shape shape-style-attrs)

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

@@ -10,7 +10,7 @@
             [uxbox.main.geom :as geom]
             [uxbox.main.ui.shapes.common :as common]
             [uxbox.main.ui.shapes.attrs :as attrs]
-            [uxbox.util.data :refer [classnames]]
+            [uxbox.util.data :refer [classnames normalize-props]]
             [uxbox.util.geom.matrix :as gmt]
             [uxbox.util.geom.point :as gpt]
             [rumext.core :as mx :include-macros true]))
@@ -58,4 +58,4 @@
         attrs (merge props
                      (attrs/extract-style-attrs shape)
                      (select-keys shape [:cx :cy :rx :ry]))]
-    [:ellipse attrs]))
+    [:> :ellipse (normalize-props attrs)]))

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

@@ -76,13 +76,11 @@
                resize (gmt/multiply resize)
                displacement (gmt/multiply displacement))
 
-        moving? (boolean displacement)
+        moving? (boolean displacement)]
-        attrs {:id (str "shape-" id)
+    [:g {:id (str "shape-" id)
          :class (classnames :move-cursor moving?)
-               :transform (str xfmt)}]
+         :transform (str xfmt)}
-    [:g attrs
+     (for [item (reverse items)]
-     (for [item (reverse items)
-           :let [key (str item)]]
        (-> (factory item)
-           (mx/with-key key)))]))
+           (mx/with-key (str item))))]))
 

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

@@ -9,7 +9,7 @@
             [uxbox.main.refs :as refs]
             [uxbox.main.ui.shapes.common :as common]
             [uxbox.main.ui.shapes.attrs :as attrs]
-            [uxbox.util.data :refer [classnames]]
+            [uxbox.util.data :refer [classnames normalize-props]]
             [uxbox.util.geom.matrix :as gmt]
             [uxbox.util.geom.point :as gpt]
             [rumext.core :as mx :include-macros true]))
@@ -81,4 +81,4 @@
         props {:view-box view-box
                :id (str "shape-" id)
                :dangerouslySetInnerHTML {:__html content}}]
-    [:svg props]))
+    [:> :svg (normalize-props props)]))

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

@@ -14,7 +14,7 @@
             [uxbox.main.ui.shapes.common :as common]
             [uxbox.main.ui.shapes.attrs :as attrs]
             [uxbox.main.data.images :as udi]
-            [uxbox.util.data :refer [classnames]]
+            [uxbox.util.data :refer [classnames normalize-props]]
             [uxbox.util.geom.matrix :as gmt]
             [rumext.core :as mx :include-macros true]))
 
@@ -73,4 +73,4 @@
                :width width
                :height height}
         attrs (merge props (attrs/extract-style-attrs shape))]
-    [:image attrs]))
+    [:> :image (normalize-props attrs)]))

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

@@ -13,7 +13,7 @@
             [uxbox.main.data.shapes :as uds]
             [uxbox.main.ui.shapes.common :as common]
             [uxbox.main.ui.shapes.attrs :as attrs]
-            [uxbox.util.data :refer [classnames]]
+            [uxbox.util.data :refer [classnames normalize-props]]
             [uxbox.util.geom.matrix :as gmt]
             [uxbox.util.geom.point :as gpt]
             [rumext.core :as mx :include-macros true]))
@@ -84,5 +84,5 @@
                :fill "transparent"
                :stroke-width "20px"
                :d pdata}]
-       [:path attrs]]
+       [:> :path (normalize-props attrs)]]
-      [:path attrs])))
+      [:> :path (normalize-props attrs)])))

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

@@ -12,7 +12,7 @@
             [uxbox.util.geom.matrix :as gmt]
             [uxbox.util.geom.point :as gpt]
             [rumext.core :as mx :include-macros true]
-            [uxbox.util.data :refer [classnames]]
+            [uxbox.util.data :refer [classnames normalize-props]]
             [uxbox.util.dom :as dom]))
 
 ;; --- Rect Component
@@ -58,9 +58,9 @@
 
         props {:x x1 :y y1
                :id (str "shape-" id)
-               :class (classnames :move-cursor moving?)
+               :class-name (classnames :move-cursor moving?)
                :width width
                :height height
                :transform (str xfmt)}
         attrs (merge (attrs/extract-style-attrs shape) props)]
-    [:rect attrs]))
+    [:> :rect (normalize-props attrs)]))

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

@@ -106,6 +106,19 @@
   control pointer radius from 4 to 6."
   60)
 
+(mx/defc control-item
+  [{:keys [class on-mouse-down r cy cx]}]
+  [:circle {:class-name class
+            :on-mouse-down on-mouse-down
+            :r r
+            :style {:fillOpacity "1"
+                    :strokeWidth "1px"
+                    :vectorEffect "non-scaling-stroke"}
+            :fill "#31e6e0"
+            :stroke "#28c4d4"
+            :cx cx
+            :cy cy}])
+
 (mx/defc controls
   {:mixins [mx/static]}
   [{:keys [x1 y1 width height] :as shape} zoom on-mouse-down]
@@ -117,54 +130,51 @@
                   :stroke-dasharray (str (/ 5.0 zoom) "," (/ 5 zoom))
                   :style {:stroke "#333" :fill "transparent"
                           :stroke-opacity "1"}}]
-     [:circle.top
+
-      (merge +circle-props+
+     (control-item {:class "top"
-             {:on-mouse-down #(on-mouse-down :top %)
+                    :on-mouse-down #(on-mouse-down :top %)
                     :r (/ radius zoom)
                     :cx (+ x1 (/ width 2))
-              :cy (- y1 2)})]
+                    :cy (- y1 2)})
-     [:circle.right
+     (control-item {:on-mouse-down #(on-mouse-down :right %)
-      (merge +circle-props+
-             {:on-mouse-down #(on-mouse-down :right %)
                     :r (/ radius zoom)
                     :cy (+ y1 (/ height 2))
-              :cx (+ x1 width 1)})]
+                    :cx (+ x1 width 1)
-     [:circle.bottom
+                    :class "right"})
-      (merge +circle-props+
+
-             {:on-mouse-down #(on-mouse-down :bottom %)
+     (control-item {:on-mouse-down #(on-mouse-down :bottom %)
                     :r (/ radius zoom)
                     :cx (+ x1 (/ width 2))
-              :cy (+ y1 height 2)})]
+                    :cy (+ y1 height 2)
-     [:circle.left
+                    :class "bottom"})
-      (merge +circle-props+
+
-             {:on-mouse-down #(on-mouse-down :left %)
+     (control-item {:on-mouse-down #(on-mouse-down :left %)
                     :r (/ radius zoom)
                     :cy (+ y1 (/ height 2))
-              :cx (- x1 3)})]
+                    :cx (- x1 3)
-     [:circle.top-left
+                    :class "left"})
-      (merge +circle-props+
+
-             {:on-mouse-down #(on-mouse-down :top-left %)
+     (control-item {:on-mouse-down #(on-mouse-down :top-left %)
                     :r (/ radius zoom)
                     :cx x1
-              :cy y1})]
+                    :cy y1
-     [:circle.top-right
+                    :class "top-left"})
-      (merge +circle-props+
+
-             {:on-mouse-down #(on-mouse-down :top-right %)
+     (control-item {:on-mouse-down #(on-mouse-down :top-right %)
                     :r (/ radius zoom)
                     :cx (+ x1 width)
-              :cy y1})]
+                    :cy y1
-     [:circle.bottom-left
+                    :class "top-right"})
-      (merge +circle-props+
+     (control-item {:on-mouse-down #(on-mouse-down :bottom-left %)
-             {:on-mouse-down #(on-mouse-down :bottom-left %)
                     :r (/ radius zoom)
                     :cx x1
-              :cy (+ y1 height)})]
+                    :cy (+ y1 height)
-     [:circle.bottom-right
+                    :class "bottom-left"})
-      (merge +circle-props+
+     (control-item {:on-mouse-down #(on-mouse-down :bottom-right %)
-             {:on-mouse-down #(on-mouse-down :bottom-right %)
                     :r (/ radius zoom)
                     :cx (+ x1 width)
-              :cy (+ y1 height)})]]))
+                    :cy (+ y1 height)
+                    :class "bottom-right"})]))
 
 ;; --- Selection Handlers (Component)
 

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

@@ -123,7 +123,7 @@
               (let [content (dom/event->inner-text ev)]
                 (st/emit! (uds/update-text id content))))]
       [:foreignObject props
-       [:div {:style style
+       [:div {:style (normalize-props style)
               :ref "container"
               :on-input on-input
               :contentEditable true}]])))
@@ -167,15 +167,14 @@
 
         {:keys [x1 y1 width height] :as shape} (-> (geom/transform shape xfmt)
                                                    (geom/size))
-        moving? (boolean displacement)
+        moving? (boolean displacement)]
-        props {:x x1
+    [:foreignObject {:x x1
                      :y y1
                      :class (classnames :move-cursor moving?)
                      :id (str id)
                :ref "fobject"
                      :width width
-               :height height}]
+                     :height height}]))
-    [:foreignObject props]))
 
 ;; --- Text Shape Html
 

frontend/src/uxbox/main/ui/workspace/canvas.cljs

@@ -115,7 +115,7 @@
      (background metadata)
      [:svg.page-layout {}
       [:g.main {}
-       (mx/doseq [item (reverse (:shapes page))]
+       (for [item (reverse (:shapes page))]
          (-> (uus/shape item)
              (mx/with-key (str item))))
        (selection-handlers)

frontend/src/uxbox/main/ui/workspace/clipboard.cljs

@@ -32,7 +32,7 @@
             (udl/close!))]
     [:div.lightbox-body.clipboard {}
      [:div.clipboard-list {}
-      (mx/doseq [item (mx/react clipboard-ref)]
+      (for [item (mx/react clipboard-ref)]
         [:div.clipboard-item
          {:key (str (:id item))
           :on-click (partial on-paste item)}

frontend/src/uxbox/main/ui/workspace/colorpalette.cljs

@@ -79,7 +79,7 @@
        [:div.color-palette-actions
         [:select.input-select {:on-change select-collection
                                :value (pr-str (:id selected-coll))}
-         (mx/doseq [collection collections]
+         (for [collection collections]
            [:option {:key (str (:id collection))
                      :value (pr-str (:id collection))}
             (:name collection)])]
@@ -98,7 +98,7 @@
                                     :ref "color-palette-inside"
                                     :style {:position "relative"
                                             :right (str (* 86 offset) "px")}}
-         (mx/doseq [color colors]
+         (for [color colors]
            (-> (palette-item color)
                (mx/with-key color)))]]
 

frontend/src/uxbox/main/ui/workspace/download.cljs

@@ -122,7 +122,7 @@
          [:span.title {} "Download page"]
          [:p.info {} "Download a single page of your project in SVG."]
          [:select.input-select {:ref "page" :default-value (pr-str current)}
-          (mx/doseq [{:keys [id name]} pages]
+          (for [{:keys [id name]} pages]
             [:option {:value (pr-str id)} name])]
          [:a.btn-primary {:href "#" :on-click download-page} "Download page"]]
         [:div.content-col {}

frontend/src/uxbox/main/ui/workspace/images.cljs

@@ -109,7 +109,7 @@
   {:mixins [mx/static]}
   [images]
   [:div.library-content {}
-   (mx/doseq [image images]
+   (for [image images]
      (-> (image-item image)
          (mx/with-key (str (:id image)))))])
 
@@ -171,7 +171,7 @@
          [:select.input-select {:on-change on-coll-change}
           (when own?
             [:option {:value (pr-str nil)} "Storage"])
-          (doseq [coll colls]
+          (for [coll colls]
             (let [id (:id coll)
                   name (:name coll)]
               [:option {:key (str id) :value (pr-str id)} name]))]]

frontend/src/uxbox/main/ui/workspace/recent_colors.cljs

@@ -50,7 +50,7 @@
         [:span.color-th {:style {:background-color color}
                          :key color
                          :on-click (partial callback color)}])
-      (mx/doseq [i (range (- 5 (count colors)))]
+      (for [i (range (- 5 (count colors)))]
         [:span.color-th {:key (str "empty" i)}])
       [:span.color-th.palette-th {} i/picker]]]))
 

frontend/src/uxbox/main/ui/workspace/sidebar/drawtools.cljs

@@ -113,7 +113,7 @@
       [:span {} (tr "ds.draw-tools")]
       [:div.tool-window-close {:on-click close} i/close]]
      [:div.tool-window-content {}
-      (mx/doseq [[i props] (map-indexed vector tools)]
+      (for [[i props] (map-indexed vector tools)]
         (let [selected? (= drawing-tool (:shape props))]
           [:div.tool-btn.tooltip.tooltip-hover
            {:alt (tr (:help props))

frontend/src/uxbox/main/ui/workspace/sidebar/history.cljs

@@ -52,7 +52,7 @@
         show-more? (pos? min-version)
         load-more #(st/emit! (udh/load-more))]
     [:ul.history-content {}
-     (mx/doseq [item items]
+     (for [item items]
        (let [current? (= (:version item) (:version page))]
          (-> (history-item item selected current?)
              (mx/with-key (str (:id item))))))
@@ -67,7 +67,7 @@
   {:mixins [mx/static]}
   [{:keys [pinned selected] :as history}]
   [:ul.history-content {}
-   (mx/doseq [item (reverse (sort-by :version pinned))]
+   (for [item (reverse (sort-by :version pinned))]
      (let [selected? (= (:version item) selected)]
        (-> (history-item item selected?)
            (mx/with-key (str (:id item))))))])

frontend/src/uxbox/main/ui/workspace/sidebar/layers.cljs

@@ -275,7 +275,7 @@
          i/arrow-slide]]
        (if-not collapsed?
          [:ul {}
-          (mx/doseq [{:keys [id] :as shape} (map #(get shapes-map %) (:items item))]
+          (for [{:keys [id] :as shape} (map #(get shapes-map %) (:items item))]
             (if (= (:type shape) :group)
               (-> (layer-group shape selected)
                   (mx/with-key id))
@@ -356,7 +356,7 @@
       [:div.tool-window-close {:on-click close} i/close]]
      [:div.tool-window-content {}
       [:ul.element-list {}
-       (mx/doseq [{:keys [id] :as shape} (map #(get shapes-map %) (:shapes page))]
+       (for [{:keys [id] :as shape} (map #(get shapes-map %) (:shapes page))]
          (if (= (:type shape) :group)
            (-> (layer-group shape selected)
                (mx/with-key id))

frontend/src/uxbox/main/ui/workspace/sidebar/options.cljs

@@ -107,7 +107,7 @@
     [:div {}
      (when (> (count menus) 1)
        [:ul.element-icons {}
-        (mx/doseq [menu-id (get +menus-map+ (:type shape ::page))]
+        (for [menu-id (get +menus-map+ (:type shape ::page))]
           (let [menu (get +menus-by-id+ menu-id)
                 selected? (= active menu-id)]
             [:li#e-info {:on-click #(swap! local assoc :menu menu-id)

frontend/src/uxbox/main/ui/workspace/sidebar/sitemap.cljs

@@ -118,7 +118,7 @@
        [:span {} (:name project)]
        [:div.add-page {:on-click create} i/close]]
       [:ul.element-list {}
-       (mx/doseq [page pages]
+       (for [page pages]
          (let [active? (= (:id page) current)]
            (-> (page-item page (count pages) active?)
                (mx/with-key (:id page)))))]]]))

frontend/src/uxbox/util/data.cljs

@@ -154,6 +154,31 @@
                         []
                         (partition 2 params))))
 
+;; (defn normalize-attrs
+;;   [m]
+;;   (letfn [(transform [[k v]]
+;;             (cond
+;;               (or (= k :class) (= k :class-name))
+;;               ["className" v]
+
+;;               (or (keyword? k) (string? k))
+;;               [(str/camel (name k)) v]
+
+;;               :else
+;;               [k v]))
+;;           (walker [x]
+;;             (if (map? x)
+;;               (into {} (map tf) x)
+;;               x))]
+;;     (walk/postwalk walker m)))
+
+(defn normalize-props
+  [props]
+  (clj->js props :keyword-fn (fn [key]
+                               (if (or (= key :class) (= key :class-name))
+                                 "className"
+                                 (str/camel (name key))))))
+
 
 ;; (defmacro mirror-map [& fields]
 ;;   (let [keys# (map #(keyword (name %)) fields)

frontend/src/uxbox/util/http.cljs

@@ -59,10 +59,10 @@
     (.toString uri)))
 
 (defn- fetch
-  [{:keys [method url query-string query-params headers body] :as request}
+  [{:keys [method url query-string query headers body] :as request}
    {:keys [timeout credentials? response-type]
     :or {timeout 0 credentials? false response-type :text}}]
-  (let [uri (create-url url query-string query-params)
+  (let [uri (create-url url query-string query)
         headers (if headers (clj->js headers) #js {})
         method (translate-method method)
         xhr (doto (XhrIo.)

frontend/tools.clj

@@ -27,7 +27,7 @@
    :language-out :ecmascript5
    :closure-defines closure-defines
    :optimizations :none
-   :verbose true
+   :verbose false
    :static-fns false
    :pretty-print true
    :elide-asserts false})