:did-remount -> :will-remount, resolves #118

README.md

@@ -381,7 +381,7 @@ Here’s a full list of callbacks you can define in a mixin:
   :did-catch            ;; state, err, info ⇒ state
   :did-mount            ;; state            ⇒ state
   :after-render         ;; state            ⇒ state
-  :did-remount          ;; old-state, state ⇒ state
+  :will-remount         ;; old-state, state ⇒ state
   :should-update        ;; old-state, state ⇒ boolean
   :will-update          ;; state            ⇒ state
   :did-update           ;; state            ⇒ state

examples/rum/examples_page.clj

@@ -25,14 +25,14 @@
 
 (defn css [styles]
   (reduce
-    (fn [ret [selector styles]]
-      (str ret
-           (->> styles
-                (reduce-kv #(str %1 (name %2) ":" (->str %3) ";") "{")
-                (str (name selector)))
-           "}"))
-    ""
-    styles))
+   (fn [ret [selector styles]]
+     (str ret
+          (->> styles
+               (reduce-kv #(str %1 (name %2) ":" (->str %3) ";") "{")
+               (str (name selector)))
+          "}"))
+   ""
+   styles))
 
 (defn style [& v]
   [:style {:dangerouslySetInnerHTML {:__html (css v)}}])
@@ -44,51 +44,51 @@
    [:link {:href "https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap"
            :ref "stylesheet"}]
    (style
-     [:* {:box-sizing :border-box
-          :vertical-align :top
-          :text-rendering :optimizelegibility}]
-     ["tr, td, table, tbody" {:padding 0
-                              :margin 0
-                              :border-collapse :collapse}]
-     ["body, input, button" {:font "16px/20px 'Fira Code', sans-serif"}]
-     [:.example {:border "2px solid #ccc"
-                 :border-radius 2
-                 :padding 20
-                 :width 300
+    [:* {:box-sizing :border-box
+         :vertical-align :top
+         :text-rendering :optimizelegibility}]
+    ["tr, td, table, tbody" {:padding 0
+                             :margin 0
+                             :border-collapse :collapse}]
+    ["body, input, button" {:font "16px/20px 'Fira Code', sans-serif"}]
+    [:.example {:border "2px solid #ccc"
+                :border-radius 2
+                :padding 20
+                :width 300
+                :display :inline-block
+                :height 260
+                :margin "10px 5px"
+                :line-height "28px"}]
+    [:.example-title {:border-bottom "1px solid #ccc"
+                      :margin "-4px 0 20px"
+                      :line-height "30px"}]
+    [:dt {:width 130
+          :float :left}]
+    ["dt, dd" {:vertical-align :bottom
+               :line-height "36px"}]
+    [:input {:padding "6px 6px 2px"
+             :border "1px solid #CCC"}]
+    [:input:focus {:outline "2px solid #a3ccf7"}]
+    [:.bclock {:margin "-6px 0 0 -4px"}]
+    [".bclock td, .bclock th" {:height 25
+                               :font-size "12px"
+                               :font-weight :normal}]
+    [".bclock th" {:width 10}]
+    [".bclock td" {:width 25
+                   :border "4px solid white"}]
+    [:.bclock-bit {:background-color "#eee"}]
+    [".bclock .stats" {:text-align :left
+                       :padding-left 8}]
+    [:.artboard {:-webkit-user-select :none
+                 :line-height "10px"}]
+    [:.art-cell {:width 12
+                 :height 12
+                 :margin "0 1px 1px 0"
                  :display :inline-block
-                 :height 260
-                 :margin "10px 5px"
-                 :line-height "28px"}]
-     [:.example-title {:border-bottom "1px solid #ccc"
-                       :margin "-4px 0 20px"
-                       :line-height "30px"}]
-     [:dt {:width 130
-           :float :left}]
-     ["dt, dd" {:vertical-align :bottom
-                :line-height "36px"}]
-     [:input {:padding "6px 6px 2px"
-              :border "1px solid #CCC"}]
-     [:input:focus {:outline "2px solid #a3ccf7"}]
-     [:.bclock {:margin "-6px 0 0 -4px"}]
-     [".bclock td, .bclock th" {:height 25
-                                :font-size "12px"
-                                :font-weight :normal}]
-     [".bclock th" {:width 10}]
-     [".bclock td" {:width 25
-                    :border "4px solid white"}]
-     [:.bclock-bit {:background-color "#eee"}]
-     [".bclock .stats" {:text-align :left
-                        :padding-left 8}]
-     [:.artboard {:-webkit-user-select :none
-                  :line-height "10px"}]
-     [:.art-cell {:width 12
-                  :height 12
-                  :margin "0 1px 1px 0"
-                  :display :inline-block
-                  :background-color "#EEE"}]
-     [".artboard .stats" {:font-size "12px"
-                          :line-height "14px"
-                          :margin-top 8}])])
+                 :background-color "#EEE"}]
+    [".artboard .stats" {:font-size "12px"
+                         :line-height "14px"
+                         :margin-top 8}])])
 
 (defn example [title & children]
   [:.example
@@ -103,42 +103,42 @@
    (head)
    [:body
     (example "Timers"
-      [:#timer-static (as-html (timer-static/timer-static "Static" @core/*clock))]
-      [:#timer-reactive (as-html (timer-reactive/timer-reactive))])
+             [:#timer-static (as-html (timer-static/timer-static "Static" @core/*clock))]
+             [:#timer-reactive (as-html (timer-reactive/timer-reactive))])
     (example "Controls"
-      [:#controls (as-html (controls/controls))])
+             [:#controls (as-html (controls/controls))])
     (example "Reactive binary clock"
-      [:#binary-clock (as-html (binary-clock/binary-clock))])
+             [:#binary-clock (as-html (binary-clock/binary-clock))])
     (example "Reactive artboard"
-      [:#board-reactive (as-html (board-reactive/board-reactive))])
+             [:#board-reactive (as-html (board-reactive/board-reactive))])
     (example "BMI Calculator"
-      [:#bmi-calculator (as-html (bmi-calculator/bmi-calculator))])
+             [:#bmi-calculator (as-html (bmi-calculator/bmi-calculator))])
     (example "Form validation"
-      [:#form-validation])
+             [:#form-validation])
     (example "Inputs"
-      [:#inputs (as-html (inputs/inputs))])
+             [:#inputs (as-html (inputs/inputs))])
     (example "Refs"
-      [:#refs (as-html (refs/refs))])
+             [:#refs (as-html (refs/refs))])
     (example "Local state"
-      [:#local-state (as-html (local-state/local-state "Clicks count"))])
+             [:#local-state (as-html (local-state/local-state "Clicks count"))])
     (example "Keys"
-      [:#keys (as-html (keys/keys))])
+             [:#keys (as-html (keys/keys))])
     (example "Self-reference"
-      [:#self-reference (as-html (self-reference/self-reference [:a [:b [:c :d [:e] :g]]]))])
+             [:#self-reference (as-html (self-reference/self-reference [:a [:b [:c :d [:e] :g]]]))])
     (example "Contexts"
-      [:#context])
+             [:#context])
     (example "Custom Methods and Data"
-      [:#custom-props])
+             [:#custom-props])
     (example "Multiple Return"
-      [:#multiple-return (as-html (multiple-return/ulist (multiple-return/multiple-return)))])
+             [:#multiple-return (as-html (multiple-return/ulist (multiple-return/multiple-return)))])
     (example "Portals"
-      [:#portal-off-root]
-      [:#portal-root])
+             [:#portal-off-root]
+             [:#portal-root])
     (example "Error boundaries"
-      [:p "Server: " [:span#server-errors (as-html (errors/errors))]]
-      [:p "Client: " [:span#client-errors]])
+             [:p "Server: " [:span#server-errors (as-html (errors/errors))]]
+             [:p "Client: " [:span#client-errors]])
     (example "JavaScript components"
-      [:#js-components (as-html (js-components/mount! nil))])
+             [:#js-components (as-html (js-components/mount! nil))])
     [:script {:src "target/main.js"}]]])
 
 (defn -main [& args]

src/rum/core.cljs

@@ -24,11 +24,15 @@
     (gobj/set obj (name k) (clj->js v))))
 
 (defn- build-class [render mixins display-name]
-  (let [mixins (->> mixins (mapcat keys) set)]
-    (assert (set/subset? mixins rum.specs/mixins)
-            (str display-name " declares invalid mixin keys "
-                 (set/difference mixins rum.specs/mixins) ", "
-                 "did you mean one of " rum.specs/mixins)))
+  (when ^boolean goog.DEBUG
+    (let [mixins (->> mixins (mapcat keys) set)]
+      (assert (set/subset? mixins rum.specs/mixins)
+              (str display-name " declares invalid mixin keys "
+                   (set/difference mixins rum.specs/mixins) ", "
+                   "did you mean one of " rum.specs/mixins))
+      (->> (select-keys rum.specs/deprecated-mixins mixins)
+           vals
+           (run! #(.warn js/console %)))))
   (let [init           (collect   :init mixins)             ;; state props -> state
         will-mount     (collect* [:will-mount               ;; state -> state
                                   :before-render] mixins)   ;; state -> state
@@ -37,7 +41,8 @@
         wrapped-render (reduce #(%2 %1) render wrap-render)
         did-mount      (collect* [:did-mount                ;; state -> state
                                   :after-render] mixins)    ;; state -> state
-        did-remount    (collect   :did-remount mixins)      ;; old-state state -> state
+        will-remount    (collect* [:did-remount             ;; state -> state
+                                   :will-remount] mixins)   ;; old-state state -> state
         should-update  (collect   :should-update mixins)    ;; old-state state -> boolean
         will-update    (collect* [:will-update              ;; state -> state
                                   :before-render] mixins)   ;; state -> state
@@ -79,7 +84,7 @@
                          (let [old-state  @(state this)
                                state      (merge old-state
                                                  (gobj/get next-props ":rum/initial-state"))
-                               next-state (reduce #(%2 old-state %1) state did-remount)]
+                               next-state (reduce #(%2 old-state %1) state will-remount)]
             ;; allocate new volatile so that we can access both old and new states in shouldComponentUpdate
                            (.setState this #js {":rum/state" (volatile! next-state)})))))
 

src/rum/specs.cljc

@@ -2,6 +2,9 @@
 
 (def mixins
   #{:init :will-mount :before-render :wrap-render :did-mount
-    :after-render :did-remount :should-update :will-update
+    :after-render :did-remount :will-remount :should-update :will-update
     :did-update :did-catch :will-unmount :child-context
     :class-properties :static-properties :key-fn})
+
+(def deprecated-mixins
+  {:did-remount ":did-remount is deprecated and was renamed to :will-remount, semantics didn't change, it was always called in componentWillReceiveProps"})