fulcro-css routing problem example.

about.cljc

(ns foo.about
  (:require
   [fulcro-css.css :as css]
   [fulcro.client.core :as fulcro-client]
   [om.dom :as dom]
   [om.next :as om :refer [defui]]))

(defui ^:once Index
  static fulcro-client/InitialAppState
  (initial-state [comp-class params] {:page :about
                                      :app/title "Bar"})
  static css/CSS
  (local-rules [this] [[:.about-item {:font-weight "bold"}]])
  (include-children [this] [])
  static om/IQuery
  (query
    [this]
    [:page :app/title])
  Object
  (render
    [this]
    (let [{:keys [app/title]} (om/props this)
          {:keys [about-item]} (css/get-classnames Index)]
      (dom/div #js {:class about-item} (str "Title: " title)))))

index.cljc

(ns foo.index
  (:require
   [fulcro-css.css :as css]
   [fulcro.client.core :as fulcro-client]
   [om.dom :as dom]
   [om.next :as om :refer [defui]]))

(defui ^:once Index
  static fulcro-client/InitialAppState
  (initial-state [comp-class params] {:page :index
                                      :app/title "Foo"})
  static css/CSS
  (local-rules [this] [[:.item {:font-weight "bold"}]])
  (include-children [this] [])
  static om/IQuery
  (query
    [this]
    [:page :app/title])
  Object
  (render
    [this]
    (let [{:keys [app/title]} (om/props this)
          {:keys [item]} (css/get-classnames Index)]
      (dom/div #js {:class item} (str "Title: " title)))))

root.cljc

(ns foo.root
  (:require
    [foo.router :refer [routing-tree]]
    [foo.root-router :refer [RootRouter root-router-factory]]
    [fulcro.client.core :as fulcro-client]
    [fulcro-css.css :as css]
    [om.dom :as dom]
    [om.next :as om]))

(om/defui ^:once Root
  static fulcro-client/InitialAppState
  (initial-state
    [comp-class params]
    (merge
      routing-tree
      {:router/root (fulcro-client/get-initial-state RootRouter {})}))
  static css/CSS
  (local-rules [this] [])
  (include-children [this] []) ;; How to include Index and About here without directly referencing them?
  static om/IQuery
  (query
    [this]
    [:ui/react-key
     {:router/root (om/get-query RootRouter)}])
  Object
  (render
    [this]
    (let [{:keys [ui/react-key router/root] :as props} (om/props this)]
      (dom/div #js {:key react-key}
        (root-router-factory root)))))

(css/upsert-css "foo-app" Root)

root_router.cljc

(ns foo.root-router
  (:require
   [fulcro.client.routing :refer [defrouter]]
   [foo.about :refer [About]]
   [foo.index :refer [Index]]
   [om.next :as om]))

(defrouter RootRouter :router/root
  (ident [this props] [(:page props) :root])
  :index Index
  :about About)

(defonce root-router-factory (om/factory RootRouter))

router.cljc

(ns foo.router
  (:require
   [fulcro.client.routing :as routing]))

(defonce routing-tree
  (routing/routing-tree
    (routing/make-route
      :index
      [(routing/router-instruction :router/root [:index :root])])
    (routing/make-route
      :about
      [(routing/router-instruction :router/root [:about :root])])
    ))