fulcro dynamic routing + code splitting

1_routing.cljs

(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!")))))))

2_about.cljs

(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)

3_app-state

 :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},

4_console.log

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"]