From dea8894610cd2b5e91b476cfd8145b5475679744 Mon Sep 17 00:00:00 2001 From: Juho Teperi Date: Wed, 23 Sep 2020 13:12:00 +0300 Subject: [PATCH 1/6] Clean re-frame example initialization --- examples/frontend-re-frame/project.clj | 2 +- .../frontend-re-frame/resources/public/index.html | 3 --- .../src/cljs/frontend_re_frame/core.cljs | 15 ++++++++------- 3 files changed, 9 insertions(+), 11 deletions(-) diff --git a/examples/frontend-re-frame/project.clj b/examples/frontend-re-frame/project.clj index 88819135..1d5422b0 100644 --- a/examples/frontend-re-frame/project.clj +++ b/examples/frontend-re-frame/project.clj @@ -33,7 +33,7 @@ {:builds [{:id "dev" :source-paths ["src/cljs"] - :figwheel {:on-jsload "frontend-re-frame.core/mount-root"} + :figwheel true :compiler {:main frontend-re-frame.core :output-to "resources/public/js/compiled/app.js" :output-dir "resources/public/js/compiled/out" diff --git a/examples/frontend-re-frame/resources/public/index.html b/examples/frontend-re-frame/resources/public/index.html index c17ffaac..be5fed2a 100644 --- a/examples/frontend-re-frame/resources/public/index.html +++ b/examples/frontend-re-frame/resources/public/index.html @@ -2,12 +2,9 @@ - -
- diff --git a/examples/frontend-re-frame/src/cljs/frontend_re_frame/core.cljs b/examples/frontend-re-frame/src/cljs/frontend_re_frame/core.cljs index 0da5910c..e0b4c10d 100644 --- a/examples/frontend-re-frame/src/cljs/frontend_re_frame/core.cljs +++ b/examples/frontend-re-frame/src/cljs/frontend_re_frame/core.cljs @@ -11,8 +11,10 @@ (re-frame/reg-event-db ::initialize-db - (fn [_ _] - {:current-route nil})) + (fn [db _] + (if db + db + {:current-route nil}))) (re-frame/reg-event-fx ::navigate @@ -141,13 +143,12 @@ (enable-console-print!) (println "dev mode"))) -(defn mount-root [] +(defn init [] (re-frame/clear-subscription-cache!) + (re-frame/dispatch-sync [::initialize-db]) + (dev-setup) (init-routes!) ;; Reset routes on figwheel reload (reagent/render [router-component {:router router}] (.getElementById js/document "app"))) -(defn ^:export init [] - (re-frame/dispatch-sync [::initialize-db]) - (dev-setup) - (mount-root)) +(init) From 0c85b3d54b6c0d633dda277e63cbc7b2da8df2df Mon Sep 17 00:00:00 2001 From: Juho Teperi Date: Wed, 23 Sep 2020 13:14:01 +0300 Subject: [PATCH 2/6] Reindent re-frame example code --- .../src/cljs/frontend_re_frame/core.cljs | 55 +++++++++---------- 1 file changed, 25 insertions(+), 30 deletions(-) diff --git a/examples/frontend-re-frame/src/cljs/frontend_re_frame/core.cljs b/examples/frontend-re-frame/src/cljs/frontend_re_frame/core.cljs index e0b4c10d..4b0fd837 100644 --- a/examples/frontend-re-frame/src/cljs/frontend_re_frame/core.cljs +++ b/examples/frontend-re-frame/src/cljs/frontend_re_frame/core.cljs @@ -9,32 +9,27 @@ ;;; Events ;;; -(re-frame/reg-event-db - ::initialize-db - (fn [db _] - (if db - db - {:current-route nil}))) +(re-frame/reg-event-db ::initialize-db + (fn [db _] + (if db + db + {:current-route nil}))) -(re-frame/reg-event-fx - ::navigate - (fn [db [_ & route]] - ;; See `navigate` effect in routes.cljs - {::navigate! route})) +(re-frame/reg-event-fx ::navigate + (fn [db [_ & route]] + {::navigate! route})) -(re-frame/reg-event-db - ::navigated - (fn [db [_ new-match]] - (let [old-match (:current-route db) - controllers (rfc/apply-controllers (:controllers old-match) new-match)] - (assoc db :current-route (assoc new-match :controllers controllers))))) +(re-frame/reg-event-db ::navigated + (fn [db [_ new-match]] + (let [old-match (:current-route db) + controllers (rfc/apply-controllers (:controllers old-match) new-match)] + (assoc db :current-route (assoc new-match :controllers controllers))))) ;;; Subscriptions ;;; -(re-frame/reg-sub - ::current-route - (fn [db] - (:current-route db))) +(re-frame/reg-sub ::current-route + (fn [db] + (:current-route db))) ;;; Views ;;; @@ -57,10 +52,10 @@ ;;; Effects ;;; ;; Triggering navigation from events. -(re-frame/reg-fx - ::navigate! - (fn [route] - (apply rfe/push-state route))) + +(re-frame/reg-fx ::navigate! + (fn [route] + (apply rfe/push-state route))) ;;; Routes ;;; @@ -106,15 +101,15 @@ (def router (rf/router - routes - {:data {:coercion rss/coercion}})) + routes + {:data {:coercion rss/coercion}})) (defn init-routes! [] (js/console.log "initializing routes") (rfe/start! - router - on-navigate - {:use-fragment true})) + router + on-navigate + {:use-fragment true})) (defn nav [{:keys [router current-route]}] [:ul From 390cdb1e4e551b5b255063ca623443ada8e38809 Mon Sep 17 00:00:00 2001 From: Juho Teperi Date: Wed, 23 Sep 2020 13:15:30 +0300 Subject: [PATCH 3/6] Rename some re-frame effects/events --- .../src/cljs/frontend_re_frame/core.cljs | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/examples/frontend-re-frame/src/cljs/frontend_re_frame/core.cljs b/examples/frontend-re-frame/src/cljs/frontend_re_frame/core.cljs index 4b0fd837..49d2c12e 100644 --- a/examples/frontend-re-frame/src/cljs/frontend_re_frame/core.cljs +++ b/examples/frontend-re-frame/src/cljs/frontend_re_frame/core.cljs @@ -15,9 +15,9 @@ db {:current-route nil}))) -(re-frame/reg-event-fx ::navigate +(re-frame/reg-event-fx ::push-state (fn [db [_ & route]] - {::navigate! route})) + {:push-state route})) (re-frame/reg-event-db ::navigated (fn [db [_ new-match]] @@ -38,7 +38,7 @@ [:h1 "This is home page"] [:button ;; Dispatch navigate event that triggers a (side)effect. - {:on-click #(re-frame/dispatch [::navigate ::sub-page2])} + {:on-click #(re-frame/dispatch [::push-state ::sub-page2])} "Go to sub-page 2"]]) (defn sub-page1 [] @@ -53,7 +53,7 @@ ;; Triggering navigation from events. -(re-frame/reg-fx ::navigate! +(re-frame/reg-fx :push-state (fn [route] (apply rfe/push-state route))) From 5651b4648a791b71787fdb65fc431e5bc44dca39 Mon Sep 17 00:00:00 2001 From: Juho Teperi Date: Wed, 23 Sep 2020 13:25:11 +0300 Subject: [PATCH 4/6] Fix reitit.frontend.easy not correctly removing old event listeners In 0.5.0 rfe start! fn started using first on-navigate callback to get the reference to History instance, so that user on-navigate can use rfe functions that need this reference. History implementations called on-navigate with the instance without event listeners set, so when stop! was called listeners weren't removed. --- .../src/reitit/frontend/history.cljs | 20 +++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/modules/reitit-frontend/src/reitit/frontend/history.cljs b/modules/reitit-frontend/src/reitit/frontend/history.cljs index 0128bcee..84ec5141 100644 --- a/modules/reitit-frontend/src/reitit/frontend/history.cljs +++ b/modules/reitit-frontend/src/reitit/frontend/history.cljs @@ -26,11 +26,14 @@ (let [path (-get-path this)] (when (or (= goog.events.EventType.POPSTATE (.-type e)) (not= @last-fragment path)) - (-on-navigate this path))))] + (-on-navigate this path)))) + ;; rfe start! uses first on-navigate call to store the + ;; instance so it has to see the instance with listeners. + this (assoc this + :popstate-listener (gevents/listen js/window goog.events.EventType.POPSTATE handler false) + :hashchange-listener (gevents/listen js/window goog.events.EventType.HASHCHANGE handler false))] (-on-navigate this (-get-path this)) - (assoc this - :popstate-listener (gevents/listen js/window goog.events.EventType.POPSTATE handler false) - :hashchange-listener (gevents/listen js/window goog.events.EventType.HASHCHANGE handler false)))) + this)) (-stop [this] (gevents/unlistenByKey popstate-listener) (gevents/unlistenByKey hashchange-listener) @@ -115,11 +118,12 @@ (when (.hasFragment uri) (str "#" (.getFragment uri))))] (.pushState js/window.history nil "" path) - (-on-navigate this path))))))] + (-on-navigate this path)))))) + this (assoc this + :listen-key (gevents/listen js/window goog.events.EventType.POPSTATE handler false) + :click-listen-key (gevents/listen js/document goog.events.EventType.CLICK ignore-anchor-click))] (-on-navigate this (-get-path this)) - (assoc this - :listen-key (gevents/listen js/window goog.events.EventType.POPSTATE handler false) - :click-listen-key (gevents/listen js/document goog.events.EventType.CLICK ignore-anchor-click)))) + this)) (-on-navigate [this path] (on-navigate (rf/match-by-path router path) this)) (-stop [this] From 58f9871747296e0267dd795ae0cd1d4047a90b29 Mon Sep 17 00:00:00 2001 From: Juho Teperi Date: Wed, 23 Sep 2020 14:08:30 +0300 Subject: [PATCH 5/6] Test rfe start! --- test/cljs/reitit/frontend/easy_test.cljs | 28 ++++++++++++++++++++---- 1 file changed, 24 insertions(+), 4 deletions(-) diff --git a/test/cljs/reitit/frontend/easy_test.cljs b/test/cljs/reitit/frontend/easy_test.cljs index f97652a2..7def2701 100644 --- a/test/cljs/reitit/frontend/easy_test.cljs +++ b/test/cljs/reitit/frontend/easy_test.cljs @@ -12,6 +12,8 @@ ["foo" ::foo] ["bar/:id" ::bar]])) +;; TODO: Only tests fragment history, also test HTML5? + (deftest easy-history-routing-test (when browser (gevents/removeAll js/window goog.events.EventType.POPSTATE) @@ -24,7 +26,8 @@ (fn on-navigate [match history] (let [url (rfh/-get-path history)] (case (swap! n inc) - 1 (do (is (= "/" url) + 1 (do (is (some? (:popstate-listener history))) + (is (= "/" url) "start at root") (rfe/push-state ::foo)) 2 (do (is (= "/foo" url) @@ -41,7 +44,24 @@ (.back js/window.history)) 6 (do (is (= "/" url) "go back after replace state") - (rfh/stop! @rfe/history) - (done)) - (is false "extra event")))) + + ;; Reset to ensure old event listeners aren't called + (rfe/start! router + (fn on-navigate [match history] + (let [url (rfh/-get-path history)] + (case (swap! n inc) + 7 (do (is (= "/" url) + "start at root") + (rfe/push-state ::foo)) + 8 (do (is (= "/foo" url) + "push-state") + (rfh/stop! @rfe/history) + (done)) + (do + (is false (str "extra event 2" {:n @n, :url url})) + (done))))) + {:use-fragment true})) + (do + (is false (str "extra event 1" {:n @n, :url url})) + (done))))) {:use-fragment true}))))) From c4afca9417f4a6d0e666c4e5595e5e18dd66ee35 Mon Sep 17 00:00:00 2001 From: Juho Teperi Date: Sat, 26 Sep 2020 16:54:35 +0300 Subject: [PATCH 6/6] Update CHANGELOG.md --- CHANGELOG.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 50a06d39..738df37d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,6 +12,14 @@ We use [Break Versioning][breakver]. The version numbers follow a `.