rum.core — rum 0.11.2

build-defc clj/s

(build-defc render-body mixins display-name)

build-defcc clj/s

(build-defcc render-body mixins display-name)

build-defcs clj/s

(build-defcs render-body mixins display-name)

cursor clj/s

(cursor ref key & options)

Same as rum.core/cursor-in but accepts single key instead of path vector

cursor-in clj/s

(cursor-in ref path & {:as options})

Given atom with deep nested value and path inside it, creates an atom-like structure that can be used separately from main atom, but will sync changes both ways:

(def db (atom { :users { "Ivan" { :age 30 }}})) (def ivan (rum/cursor db [:users "Ivan"])) @ivan ;; => { :age 30 } (swap! ivan update :age inc) ;; => { :age 31 } @db ;; => { :users { "Ivan" { :age 31 }}} (swap! db update-in [:users "Ivan" :age] inc) ;; => { :users { "Ivan" { :age 32 }}} @ivan ;; => { :age 32 }

Returned value supports deref, swap!, reset!, watches and metadata. The only supported option is :meta

defc clj/s macro

(defc & body)

Defc does couple of things:

1. Wraps body into sablono/compile-html
2. Generates render function from that
3. Takes render function and mixins, builds React class from them
4. Using that class, generates constructor fn [args]->ReactElement
5. Defines top-level var with provided name and assigns ctor to it

(rum/defc label [t] [:div t])

;; creates React class ;; defines ctor fn (defn label [t] ...) => element

(label "text") ;; => returns React element built with label class

Usage:

 (defc name doc-string? [< mixins+]? [params*] render-body+)

defcc clj/s macro

(defcc & body)

Same as defc, but render will take additional first argument: react component

Usage:

 (defcc name doc-string? [< mixins+]? [comp params*] render-body+)

defcs clj/s macro

(defcs & body)

Same as defc, but render will take additional first argument: state

Usage:

 (defcs name doc-string? [< mixins+]? [state params*] render-body+)

derived-atom clj/s

Use this to create “chains” and acyclic graphs of dependent atoms. derived-atom will:

• Take N “source” refs
• Set up a watch on each of them
• Create “sink” atom
• When any of source refs changes:
  • re-run function f, passing N dereferenced values of source refs
  • reset! result of f to the sink atom
• return sink atom

(def *a (atom 0)) (def *b (atom 1)) (def *x (derived-atom [*a *b] ::key (fn [a b] (str a ":" b)))) (type *x) ;; => clojure.lang.Atom @*x ;; => 0:1 (swap! *a inc) @*x ;; => 1:1 (reset! *b 7) @*x ;; => 1:7

Arguments: refs - sequence of source refs key - unique key to register watcher, see clojure.core/add-watch f - function that must accept N arguments (same as number of source refs) and return a value to be written to the sink ref. Note: f will be called with already dereferenced values opts - optional. Map of: :ref - Use this as sink ref. By default creates new atom :check-equals? - Do an equality check on each update: (= @sink (f new-vals)). If result of f is equal to the old one, do not call reset!. Defaults to true. Set to false if calling = would be expensive

dom-node clj/s≠

clj

(dom-node s)

cljs

(dom-node state)

Given state, returns top-level DOM node. Can’t be called during render

extend! cljs

(extend! obj props)

hydrate cljs

(hydrate component node)

Hydrates server rendered DOM tree with provided component.

local clj/s≠

(local initial)

(local initial key)

cljs

Mixin constructor. Adds an atom to component’s state that can be used to keep stuff during component’s lifecycle. Component will be re-rendered if atom’s value changes. Atom is stored under user-provided key or under :rum/local by default

mount clj/s≠

clj

(mount c n)

cljs

(mount component node)

Add component to the DOM tree. Idempotent. Subsequent mounts will just update component

portal cljs

(portal component node)

Render component in a DOM node that might be ouside of current DOM hierarchy

react clj/s≠

clj

cljs

(react ref)

Works in conjunction with rum.core/reactive mixin. Use this function instead of deref inside render, and your component will subscribe to changes happening to the derefed atom.

reactive clj/s≠

cljs

Mixin. Works in conjunction with rum.core/react

ref clj/s≠

clj

(ref s k)

cljs

(ref state key)

Given state and ref handle, returns React component

ref-node clj/s≠

clj

(ref-node s k)

cljs

(ref-node state key)

Given state and ref handle, returns DOM node associated with ref

render-html clj

Main server-side rendering method. Given component, returns HTML string with static markup of that component. Serve that string to the browser and rum.core/mount same Rum component over it. React will be able to reuse already existing DOM and will initialize much faster

render-static-markup clj

Same as rum.core/render-html but returned string has nothing React-specific. This allows Rum to be used as traditional server-side template engine

request-render clj/s≠

clj

(request-render c)

cljs

(request-render component)

Schedules react component to be rendered on next animation frame

state clj/s≠

clj

(state c)

cljs

(state comp)

Given React component, returns Rum state associated with it

static clj/s≠

cljs

Mixin. Will avoid re-render if none of component’s arguments have changed. Does equality check (=) on all arguments

unmount clj/s≠

clj

(unmount c)

cljs

(unmount node)

Removes component from the DOM tree

with-key clj/s≠

clj

(with-key element key)

cljs

(with-key component key)

Adds React key to component

with-ref clj/s≠

clj

(with-ref element ref)

cljs

(with-ref component ref)

Adds React ref (string or callback) to component