keechma.ui-component — keechma 0.3.13

constructor cljs

(constructor opts)

Createas a UIComponent record. Accepts opts as the argument. opts is a map that can have the following params:

• :component-deps - Which child component is this component dependent on
• :subscription-deps - Which subscriptions is this component dependent on
• :topic - On which topic should this component send commands (to the controller)
• :renderer - A renderer function (Reagent component)

The UIComponent record is a way to list all the dependencies for a component. When the application is started each component's renderer function will be partiall applied with a verion of it's UIComponent that has the component and subscription dependencies resolved.

This allows you to write components that are completely decoupled from the rest of the application.

When you want to resolve injected component or subscription dependencies, you can use the functions defined on the UIComponent protocol:

(def render [ctx] ;; `ctx` is a UIComponent with resolved dependencies
  (let [child-component (component ctx :component-key)
        subscription (subscription ctx :subscription-key)])

(def component (constructor {:renderer render
                             :component-deps [:component-key]
                             :subscription-deps [:subscription-key]))

IUIComponent cljs protocol

IUIComponent protocol defines functions that can be called on the UIComponent records.

redirect cljs

(redirect this params)

(redirect this params replace?)

Redirects page to the URL generated from params

send-command cljs

(send-command this command)

(send-command this command args)

Sends a command to the controller.

subscription cljs

(subscription this key)

(subscription this key args)

Returns a subscription based on the key.

report cljs

(report this name payload)

(report this name payload path)

(report this name payload path severity)

router cljs

(router this)

Returns the router

current-route cljs

(current-route this)

Returns a current route data. It will use the :current-route-fn that is injected from the outside to return the data.

reroute cljs

(reroute this)

Restarts the route process. This is useful in combination with the :route-processor. In some cases route processor might use info from the app-db to determine the current route, which means that the value from the route processor might be different without the actual route change happening.

component cljs

(component this key)

Returns a component based on the key.

renderer cljs

(renderer this)

Returns a component renderer function that has the component record partially applied (ctx) as the first argument.

url cljs

(url this params)

Returns a URL based on the params. It will use the :url-fn that is injected from the outside to generate the URL based on the current app routes.

make-ex cljs

(make-ex msg)

resolve-component-dep cljs

See resolve-dep

resolve-dep cljs

(resolve-dep dep-kw coll-kw component key component-dep)

Resolves a dependency on the UIComponent record. Returns a new version of the record with the resolved dependency.

(def news-component (constructor {:component-deps [:user-profile :similar-news]
                                  :subscription-deps [:current-news :comments]}))

(resolve-dep :subscription-deps :subscriptions news-component :current-news (fn []...))
;; Returns a new version of the `news-component` with the :current-news subscription resolved

(resolve-dep :component-deps :components news-component :user-profile user-profile-component))
;; Returns a new version of the `news-component` with the :user-profile component resolved

Two shorthand functions are defined that allow you to omit first two arguments:

• resolve-subscription-dep - Resolves a subscription dependency
• resolve-component-dep - Resolves a component dependency

resolve-subscription-dep cljs

See resolve-dep.

system cljs

(system components)

(system components subscriptions)

Creates a component system.

Component system is a group of components that are interdependent. Each component system must define a :main component which will be returned from the system function.

system function resolves dependencies between components.

For example, let's say that your application consists of three components:

• layout
• sidebar
• chat room list

Layout is rendering the sidebar component and sidebar component is rendering the chat room list component.

Chat room list component has a subscription dependency on :chat-rooms which will return the list of chat rooms to render.

Usually you would either pass the chat rooms subscription from layout to sidebar to the chat room list component, or the chat room list component would have a dependency on a global :chat-rooms subscription.

Keechma allows you to avoid both of these problems:

• only the chat room list component will know about it's dependencies
• the dependencies will be injected from the outside by the system function

(defn layout-renderer [ctx] ;; ctx is `layout-component` record with resolved dependencies
[:div.main
[:div.sidebar [(component ctx :sidebar)]]]) ;; Resolve the `:sidebar` component

(def layout-component (constructor {:component-deps [:sidebar]
:renderer layout-renderer}))

(defn sidebar-renderer [ctx]
[:div.sidebar
[(component ctx :chat-room-list)]) ;; Resolve the `:chat-room-list` component

(def sidebar-component (constructor {:component-deps [:chat-room-list]
:renderer sidebar-renderer}))

(defn chat-room-list-renderer [ctx]
(let [chat-rooms (subscription ctx :chat-rooms)])) ;; Resolve the `:chat-rooms` subscription

(def chat-room-list-component (constructor {:subscription-deps [:chat-rooms]}))

(def main-component (system {:main layout-component ;; Map compnents to keys
:sidebar sidebar-component
:chat-room-list chat-room-list-component}
{:chat-rooms (fn [app-state-atom])})) ;; Map subscriptions to keys

In the example above main-component will be a Reagent component that can be mounted into the DOM, with all of the dependencies between components resolved.

system function provided everything that components need from the outside, and all of the components are reusable by design.

UIComponent cljs