Skip to content

Instantly share code, notes, and snippets.

@thosmos

thosmos/1_routing.cljs

Last active Feb 7, 2019
Embed
What would you like to do?
fulcro dynamic routing + code splitting
(defsc-route-target AboutPage [this props]
{:query [{:about-comp ['*]}]
:ident (fn [] [:PAGE/by-id :about])
:initial-state {:about-comp {}}
:route-segment (fn [] ["about"])
:route-cancelled (fn [_])
:will-enter (fn [reconciler route-params]
(if (get-in @st/pending-route [:about :is-loaded])
(dr/route-immediate [:PAGE/by-id :about])
(dr/route-deferred [:PAGE/by-id :about]
(fn []
(js/console.log "triggering load of :about")
(swap! st/pending-route assoc :about {:reconciler reconciler
:class AboutPage})
;; trigger a code load
(-> (loader/load "about")
(.then
(fn []
(js/console.log "module load succeeded"))
(fn [error]
(js/console.warn "about module failed to load" error))))))))
:will-leave (fn [_]
(js/console.log "Leaving about")
true)}
(do
(js/console.log "Render AboutPage")
(dom/div
(dom/h3 "AboutPage!")
(let [factory (some-> this (prim/get-query (prim/component->state-map this)) prim/query->ast1 :component prim/factory)]
(if factory
(do
(js/console.log "factory is present")
(factory (:about-comp props)))
(do
(js/console.log "no factory")
(cljs.pprint/pprint (some-> this prim/get-query prim/query->ast))
(js/console.log "about-comp props" (:about-comp props))
(dom/div "NO component!")))))))
(defsc AboutComp [this {:keys [about/hello]}]
{:query [:about/hello]}
(do
(js/console.log "Render AboutComp")
(segment
(header
"ABOUT COMP")
(message
hello))))
(fm/defmutation set-about-state [params]
(action [{:keys [state]}]
(swap! state assoc-in [:PAGE/by-id :about :about-comp :about/hello] "Hello from the About module!")
(swap! st/pending-route assoc-in [:about :is-loaded] true)))
(defn init-module []
(js/console.log ":about (init-module)!")
(let [{:keys [reconciler class is-loaded] :as info} (:about @st/pending-route)
app-state (prim/app-state reconciler)]
(if is-loaded
(js/console.error "already loaded!?!?")
(if-not info
(js/console.error "AboutComp was unable to find pending-route info!")
(do
(js/console.log "running :about code from " (str (dr/router-for-pending-target @app-state [:PAGE/by-id :about])))
(js/console.log "set-query on route-target")
(prim/set-query! reconciler class {:query [{:about-comp (prim/get-query AboutComp @app-state)}]})
(js/console.log "setting :about :is-loaded")
(prim/transact! reconciler `[(set-about-state)])
(js/console.log "about module loaded, calling target-ready")
(prim/transact! reconciler `[(dr/target-ready {:target [:PAGE/by-id :about]}) [:PAGE/by-id :about]])
(js/console.log "about code finished"))))))
;; initialize during module loading
(js/console.log "initializing :about module")
(init-module)
:fulcro.incubator.dynamic-routing/pending-route nil,
:fulcro.client.primitives/queries
{"threshold.client.routing/RootPageRouter"
{:query
[:fulcro.incubator.dynamic-routing/id
[:fulcro.incubator.ui-state-machines/asm-id :RootPageRouter]
{:fulcro.incubator.dynamic-routing/current-route
"threshold.client.routing/AboutPage"}],
:id "threshold.client.routing/RootPageRouter"},
"threshold.client.routing/AboutPage"
{:query [{:about-comp "threshold.client.ui.about/AboutComp"}],
:id "threshold.client.routing/AboutPage"},
"threshold.client.ui.about/AboutComp"
{:query [:about/hello], :id "threshold.client.ui.about/AboutComp"}},
:ui/locale :en,
:fulcro.inspect.core/app-uuid
#uuid "22322bb8-fd59-4b45-807c-7f9a50ec4286",
:fulcro.incubator.dynamic-routing/id
{:RootPageRouter
{:alt8 [:PAGE/by-id :four-oh-four],
:alt5 [:PAGE/by-id :privacy],
:alt1 [:PAGE/by-id :blog],
:fulcro.incubator.dynamic-routing/current-route
[:PAGE/by-id :about],
:alt0 [:PAGE/by-id :alternatives],
:fulcro.incubator.dynamic-routing/id :RootPageRouter,
:alt6 [:PAGE/by-id :contact],
:alt4 [:PAGE/by-id :terms],
:alt3 [:PAGE/by-id :faq],
:alt7 [:PAGE/by-id :media],
:alt2 [:PAGE/by-id :about]}},
:fulcro.incubator.ui-state-machines/asm-id
{:RootPageRouter
{:fulcro.incubator.ui-state-machines/asm-id :RootPageRouter,
:fulcro.incubator.ui-state-machines/state-machine-id
fulcro.incubator.dynamic-routing/RouterStateMachine,
:fulcro.incubator.ui-state-machines/active-state :failed,
:fulcro.incubator.ui-state-machines/ident->actor
{[:fulcro.incubator.dynamic-routing/id :RootPageRouter] :router},
:fulcro.incubator.ui-state-machines/actor->ident
{:router [:fulcro.incubator.dynamic-routing/id :RootPageRouter]},
:fulcro.incubator.ui-state-machines/active-timers
{:error-timer
{:fulcro.incubator.ui-state-machines/timeout 5000,
:fulcro.incubator.ui-state-machines/timer-id :error-timer,
:fulcro.incubator.ui-state-machines/js-timer {},
:fulcro.incubator.ui-state-machines/event-id :timeout!,
:fulcro.incubator.ui-state-machines/cancel-on {},
:fulcro.incubator.ui-state-machines/event-data {}},
:delay-timer
{:fulcro.incubator.ui-state-machines/timeout 100,
:fulcro.incubator.ui-state-machines/timer-id :delay-timer,
:fulcro.incubator.ui-state-machines/js-timer {},
:fulcro.incubator.ui-state-machines/event-id :waiting!,
:fulcro.incubator.ui-state-machines/cancel-on {},
:fulcro.incubator.ui-state-machines/event-data {}}},
:fulcro.incubator.ui-state-machines/local-storage
{:pending-path-segment nil, :target nil, :path-segment ["about"]}}},
:PAGE/by-id
{:index {:x 1},
:terms {:x 1},
:privacy {:x 1},
:four-oh-four {:x 1},
:alternatives {:x 1},
:faq {:x 1},
:blog {:x 1},
:contact {:x 1},
:media {:x 1},
:about {:about-comp {:about/hello "Hello from the About module!"}}},
:fulcro.client.network/status {:remote :idle},
util.cljs:187 Installing CLJS DevTools 0.9.10 and enabling features :formatters :hints :async
client.cljs:356 Installing Fulcro Inspect {}
development_preload.cljs:9 Turning logging to :all (in threshold.client.development-preload)
core.cljs:192 MAIN-FN
core.cljs:192 target :dev
goog.debug.console.js:203 [ 1.062s] [theta] "Root Render"
goog.debug.console.js:203 [ 1.066s] [theta] "Render AppView"
goog.debug.console.js:203 [ 1.115s] [fulcro.incubator.ui-state-machines] Attempt to get an ASM path [:fulcro.incubator.ui-state-machines/local-storage :pending-path-segment] for a state machine that is not in Fulcro state. ASM ID: :RootPageRouter
goog.debug.console.js:203 [ 1.130s] [theta] "BIDI match" {:handler :about} "for path" "/about"
goog.debug.console.js:203 [ 1.131s] [theta] "CHANGE ROUTE" ["about"]
routing.cljs:65 triggering load of :about
goog.debug.console.js:203 [ 1.174s] [goog.module.ModuleManager] Initiating module load: about
goog.debug.console.js:203 [ 1.175s] [goog.module.ModuleManager] Loading module(s): about
goog.debug.console.js:203 [ 1.176s] [goog.module.ModuleLoader] downloadModules ids:about uris:/js/cljs-runtime/threshold.client.ui.about.js,/js/cljs-runtime/shadow.module.about.append.js
goog.debug.console.js:203 [ 1.177s] [goog.net.BulkLoader] Starting load of code with 2 uris.
goog.debug.console.js:203 [ 1.208s] [theta] "Root Render"
goog.debug.console.js:203 [ 1.212s] [theta] "Render AppView"
goog.debug.console.js:203 [ 1.236s] [theta] "Render IndexPage"
routing.cljs:201 :router-updated :deferred :pending-path ["about"] :current-path null
goog.debug.console.js:203 [ 1.275s] [goog.net.BulkLoader] Received event "complete" for id 1 with uri /js/cljs-runtime/shadow.module.about.append.js
goog.debug.console.js:203 [ 1.278s] [goog.net.BulkLoader] Received event "complete" for id 0 with uri /js/cljs-runtime/threshold.client.ui.about.js
goog.debug.console.js:203 [ 1.280s] [goog.net.BulkLoader] All uris loaded.
goog.debug.console.js:203 [ 1.281s] [goog.module.ModuleLoader] Code loaded for module(s): about
goog.debug.console.js:203 [ 1.281s] [goog.module.ModuleLoader] evaluateCode ids:about
about.cljs:51 initializing :about module
about.cljs:28 :about (init-module)!
about.cljs:37 running :about code from :RootPageRouter
about.cljs:39 set-query on route-target
goog.debug.console.js:203 [ 1.309s] [theta] "Root Render"
goog.debug.console.js:203 [ 1.312s] [theta] "Render AppView"
goog.debug.console.js:203 [ 1.343s] [theta] "Render IndexPage"
routing.cljs:201 :router-updated :deferred :pending-path ["about"] :current-path null
about.cljs:42 setting :about :is-loaded
about.cljs:45 about module loaded, calling target-ready
about.cljs:48 about code finished
goog.debug.console.js:203 [ 1.364s] [goog.module.ModuleManager] Module loaded: about
routing.cljs:72 module load succeeded
VM19018:1 XHR finished loading: GET "http://localhost:3737/js/cljs-runtime/shadow.module.about.append.js".
VM19018:1 XHR finished loading: GET "http://localhost:3737/js/cljs-runtime/threshold.client.ui.about.js".
goog.debug.console.js:203 [ 1.526s] [theta] "Root Render"
goog.debug.console.js:203 [ 1.528s] [theta] "Render AppView"
routing.cljs:80 Render AboutPage
routing.cljs:86 factory is present
about.cljs:15 Render AboutComp
routing.cljs:201 :router-updated :deferred :pending-path null :current-path ["about"]
primitives.cljc:1760 [Violation] 'requestAnimationFrame' handler took 54ms
goog.debug.console.js:203 [ 1.676s] [theta] "Root Render"
goog.debug.console.js:203 [ 1.681s] [theta] "Render AppView"
routing.cljs:201 :router-updated :pending :pending-path null :current-path ["about"]
primitives.cljc:1760 [Violation] 'requestAnimationFrame' handler took 55ms
goog.debug.console.js:203 [ 6.476s] [theta] "Root Render"
goog.debug.console.js:203 [ 6.479s] [theta] "Render AppView"
routing.cljs:201 :router-updated :failed :pending-path null :current-path ["about"]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment