Functions, primitive values and some macros to define new items.
Functions, primitive values and some macros to define new items.
(add-state initial lens item)
Adds new state that the given item can access, via a lens on the
the tuple of states [outer inner]
, where the initial value for
inner
state is initial
. Note that the resulting item has only
outer
as its state.
Adds new state that the given item can access, via a lens on the the tuple of states `[outer inner]`, where the initial value for `inner` state is `initial`. Note that the resulting item has only `outer` as its state.
(call f & args)
Calls an event handler function f
, which should be a function
returned from calling the bind
function of a with-bind
item. Note that this returns a special return
value, which you
must return from another event handler, and which you can combine
with local state changes via merge-returned
.
Calls an event handler function `f`, which should be a function returned from calling the `bind` function of a [[with-bind]] item. Note that this returns a special [[return]] value, which you must return from another event handler, and which you can combine with local state changes via [[merge-returned]].
(cleanup f)
Returns an item that evaluates (f state)
when it is being removed
from the item tree, and emits the return
value that that must
return.
Returns an item that evaluates `(f state)` when it is being removed from the item tree, and emits the [[return]] value that that must return.
(const-effect v)
Returns an effect that does nothing, with the given value as its result.
Returns an effect that does nothing, with the given value as its result.
(def-item name & item)
A macro to define items. This is not much different than the
standard def
macro of Clojure, but it attaches the name of the var
to the item, which can be helpful in testing and debugging
utilities (see named
).
(def-item submit-button
(dom/button {:type "submit"}))
Additionally, a schema can be specified similar to [[core.schema/def]]. That schema does specify which state values are allowed for the defined item:
(def-item checkbox :- s/Bool
(dom/input {:type "checkbox" ...}))
A macro to define items. This is not much different than the standard `def` macro of Clojure, but it attaches the name of the var to the item, which can be helpful in testing and debugging utilities (see [[named]]). ``` (def-item submit-button (dom/button {:type "submit"})) ``` Additionally, a schema can be specified similar to [[core.schema/def]]. That schema does specify which state values are allowed for the defined item: ``` (def-item checkbox :- s/Bool (dom/input {:type "checkbox" ...})) ```
(defn-effect name args & body)
A macro similar to defn, that defines a new effect.
(defn-effect my-effect [arg]
(change-the-world! args))
Calling it returns an effect action, which can be returned by an item as an action. The body of the effect then executed later, when side effects on some external entity are safe.
A macro similar to defn, that defines a new effect. ``` (defn-effect my-effect [arg] (change-the-world! args)) ``` Calling it returns an effect action, which can be returned by an item as an action. The body of the effect then executed later, when side effects on some external entity are safe.
(defn-item name params & body)
A macro like [[clojure.core/defn]] to define abstractions over items, with optional schema annotations similar to [[schema.core/defn]].
(defn-item col [w :- s/Int & content]
(apply dom/div {:class (str "col-" w)} content))
The schema of the state that the returned item expects can also be specified like this:
(defn-item username :- s/Str []
(with-state-as name
(dom/div "Username:" name)))
Note that this does not specify the schema of the return value of the defined function, which is always an item.
Another alternative defines the returned items to be static
,
which means they do not depend on their state:
(defn-item menu-item :static [href]
(dom/a {:href href}))
In all cases, the name of the var is attached to the returned items, which
can be helpful in testing and debugging utilities (see named
).
A macro like [[clojure.core/defn]] to define abstractions over items, with optional schema annotations similar to [[schema.core/defn]]. ``` (defn-item col [w :- s/Int & content] (apply dom/div {:class (str "col-" w)} content)) ``` The schema of the state that the returned item expects can also be specified like this: ``` (defn-item username :- s/Str [] (with-state-as name (dom/div "Username:" name))) ``` Note that this does not specify the schema of the return value of the defined function, which is always an item. Another alternative defines the returned items to be [[static]], which means they do not depend on their state: ``` (defn-item menu-item :static [href] (dom/a {:href href})) ``` In all cases, the name of the var is attached to the returned items, which can be helpful in testing and debugging utilities (see [[named]]).
(defn-subscription name deliver! args & body)
A macro to define the integration of an external source of actions, that needs an imperative way to 'inject' actions into an application. This could be an interval timer, for example:
(defn-subscription interval-timer deliver! [ms]
(let [id (.setInterval js/window (fn [] (deliver! (js/Date.))) ms)]
(fn []
(.clearInterval js/window id))))
With this definition, you can use (interval-timer 1000)
as an
item in your application. That item will be invisible, but
will emit a JavaScript Date
object as an action every second.
Note that deliver!
can be called directly in the body of
defn-subscription
to emit some actions immediately, or it can be called later from
an asynchronous context. Also note that the body is evaluated as
soon as the subscription item is mounted into your application, and
that it must result in a function with no arguments, which is called
when the item is removed from the application afterwards.
A schema annotation is possible after the name of the deliver function, to document and validate the action values emitted by the subscription item:
(defn-subscription window-width ^:always-validate deliver! :- s/Int []
(let [id (.setInterval js/window (fn [] (deliver! js/window.innerWidth)) 100)]
(fn []
(.clearInterval js/window id))))
A macro to define the integration of an external source of actions, that needs an imperative way to 'inject' actions into an application. This could be an interval timer, for example: ``` (defn-subscription interval-timer deliver! [ms] (let [id (.setInterval js/window (fn [] (deliver! (js/Date.))) ms)] (fn [] (.clearInterval js/window id)))) ``` With this definition, you can use `(interval-timer 1000)` as an item in your application. That item will be invisible, but will emit a JavaScript `Date` object as an action every second. Note that `deliver!` can be called directly in the body of `defn-subscription` to emit some actions immediately, or it can be called later from an *asynchronous context*. Also note that the body is evaluated as soon as the subscription item is mounted into your application, and that it must result in a function with no arguments, which is called when the item is removed from the application afterwards. A schema annotation is possible after the name of the deliver function, to document and validate the action values emitted by the subscription item: ``` (defn-subscription window-width ^:always-validate deliver! :- s/Int [] (let [id (.setInterval js/window (fn [] (deliver! js/window.innerWidth)) 100)] (fn [] (.clearInterval js/window id)))) ```
(deref ref)
Returns a runner specific value, which might be a native dom
element backing an item at runtime for example. See with-ref
for
a description of references.
Returns a runner specific value, which might be a native dom element backing an item at runtime for example. See [[with-ref]] for a description of references.
(dynamic f & args)
Returns a dynamic item, which looks and behaves like the item
returned from (f state & args)
, which is evaluated each time the
state changes.
Returns a dynamic item, which looks and behaves like the item returned from `(f state & args)`, which is evaluated each time the state changes.
(effect f & args)
Returns an effect action, which, when run, calls the given function
with the given arguments. The result of that function is ignored,
unless you use execute-effect
, or return a return
value with new actions or messages.
Returns an effect action, which, when run, calls the given function with the given arguments. The result of that function is ignored, unless you use [[execute-effect]], or return a [[return]] value with new actions or messages.
An invisible item with no behavior.
An invisible item with no behavior.
(execute-effect eff & [f])
Returns an item that executes the given effect once, optionally
feeding its result into (f state result)
, which must return
a return
value.
Note that you can execute an effect also by using (return :action effect)
, if the result of the effect is irrelevant.
Returns an item that executes the given effect once, optionally feeding its result into `(f state result)`, which must return a [[return]] value. Note that you can execute an effect also by using `(return :action effect)`, if the result of the effect is irrelevant.
(finalize ret)
An invisible item that 'emits' the given return
value once as
a cleanup after the item was used somewhere in the component tree.
An invisible item that 'emits' the given [[return]] value once as a cleanup after the item was used somewhere in the component tree.
(fmap-effect eff f & args)
Returns an effect like eff
, whose result is f applied to the
result of the given effect.
Returns an effect like `eff`, whose result is f applied to the result of the given effect.
(focus lens item)
Returns an item that focuses the outer state, to the part of it
that item
shall see, via the given lens. Otherwise behaves and
looks the same.
Returns an item that focuses the outer state, to the part of it that `item` shall see, via the given *lens*. Otherwise behaves and looks the same.
(forward-messages f & args)
Returns an item like (f ref & args)
where ref
is a reference
to which any messages sent to the returned item is forwarded
to. You must use refer
to define which item that is further
down in the item.
Returns an item like `(f ref & args)` where `ref` is a reference to which any messages sent to the returned item is forwarded to. You must use [[refer]] to define which item that is further down in the item.
(fragment & children)
Returns a container item consisting of the given child items.
Returns a container item consisting of the given child items.
(handle-action item f)
Handles actions emitted by given item, by evaluating (f state action)
for each
of them. That must return the result of calling return
with
either a new state, and maybe one or more other actions (or the
given action unchanged).
Handles actions emitted by given item, by evaluating `(f state action)` for each of them. That must return the result of calling [[return]] with either a new state, and maybe one or more other actions (or the given action unchanged).
(handle-error item f)
Creates an error boundary around the given item. When the rendering
of e
throws an exception, then (f state error)
is evaluated, and must
result in an return
value. Note that exceptions in functions
like handle-action
, are not catched by this. See try-catch
for a higher level construct to handle errors.
Creates an error boundary around the given item. When the rendering of `e` throws an exception, then `(f state error)` is evaluated, and must result in an [[return]] value. Note that exceptions in functions like [[handle-action]], are not catched by this. See [[try-catch]] for a higher level construct to handle errors.
(handle-message f item)
Handles the messages sent to the the resulting item (either
via reacl-c.main/send-message!
or return
), by calling (f state message)
,
which must return a return
value. The resulting item
otherwise looks and behaves exactly like the given one.
Handles the messages sent to the the resulting item (either via [[reacl-c.main/send-message!]] or [[return]]), by calling `(f state message)`, which must return a [[return]] value. The resulting item otherwise looks and behaves exactly like the given one.
(handle-state-change item f)
Returns an item like the given item, but when a state change is
emitted by item
, then (f prev-state new-state)
is evaluated,
which must return a return
value. By careful with this, as item
usually expect that their changes to the state are eventually
successful.
Returns an item like the given item, but when a state change is emitted by `item`, then `(f prev-state new-state)` is evaluated, which must return a [[return]] value. By careful with this, as item usually expect that their changes to the state are eventually successful.
(init ret)
An invisible item that 'emits' the given return
value once as
an initialization.
An invisible item that 'emits' the given [[return]] value once as an initialization.
(isolate-state initial-state item)
Hides the state of the given item as a local state, resulting in an item with an arbitrary state that is inaccessible for it.
Hides the state of the given item as a local state, resulting in an item with an arbitrary state that is inaccessible for it.
(item? v)
Returns true if is an item, and false otherwise.
Returns true if is an item, and false otherwise.
A unique value for the state in a return
value, representing that the state should not be changed.
A unique value for the state in a [[return]] value, representing that the state should not be changed.
(keyed item key)
Adds an arbitrary identifier to the given item, which will be used to optimize rendering of it in a list of children of a container item.
Adds an arbitrary identifier to the given item, which will be used to optimize rendering of it in a list of children of a container item.
(lifecycle init finish)
Returns an invisible item, that calls init
each time the item is
used at a place in the component hierarchy, including every change
of state or the init
function itself subsequently. The finish
function is called when the item is no longer used at that
place. Both functions must return a return
value specifying what
to do.
Returns an invisible item, that calls `init` each time the item is used at a place in the component hierarchy, including every change of state or the `init` function itself subsequently. The `finish` function is called when the item is no longer used at that place. Both functions must return a [[return]] value specifying what to do.
(local-state initial item)
Returns an item which looks like the given item, with state outer
,
where the given item must take a tuple state [outer inner]
, and
initial
is an intial value for the inner state, which can then be
changed by the item independantly from the outer state.
Returns an item which looks like the given item, with state `outer`, where the given item must take a tuple state `[outer inner]`, and `initial` is an intial value for the inner state, which can then be changed by the item independantly from the outer state.
(map-actions item f)
Returns an item that emits actions (f action)
, for each
action emitted by item
, and otherwise looks an behaves exacly
the same. If (f action)
is nil, then the original action is kept,
allowing for f
to be a map of the actions to replace.
Returns an item that emits actions `(f action)`, for each action emitted by `item`, and otherwise looks an behaves exacly the same. If `(f action)` is nil, then the original action is kept, allowing for `f` to be a map of the actions to replace.
(map-effects item f)
Returns an item that emits actions (f effect)
, for each effect
actionemitted by
item, and otherwise looks an behaves exacly the same. If
(f effect)is nil, then the original effect action is kept, allowing for
f` to be a map of the effects to replace. This
also works for composed effects with seq-effects
or par-effects
, such that the effects used in there are mapped
too.
Returns an item that emits actions `(f effect)`, for each effect action` emitted by `item`, and otherwise looks an behaves exacly the same. If `(f effect)` is nil, then the original effect action is kept, allowing for `f` to be a map of the effects to replace. This also works for composed effects with [[seq-effects]] or [[par-effects]], such that the effects used in there are mapped too.
(map-messages f item)
Returns an item like the given one, that transforms all messages sent to
it though (f msg)
, before they are forwarded to item
.
Returns an item like the given one, that transforms all messages sent to it though `(f msg)`, before they are forwarded to `item`.
(merge-returned & rets)
Merges multiple return
values into one. Actions and
messages are concatenated. If more than one contains a new
state, the right-most state value is used.
Merges multiple [[return]] values into one. Actions and messages are concatenated. If more than one contains a new state, the right-most state value is used.
(monitor-state item f & args)
When e changes its state, (f old-state new-state & args)
is
evaluted for side effects. Note that this is only called when the
item changes its state 'by itself', not if the state was changed
somewhere upwards in the item tree an is only passed down to the
resulting item.
When e changes its state, `(f old-state new-state & args)` is evaluted for side effects. Note that this is only called when the item changes its state 'by itself', not if the state was changed somewhere upwards in the item tree an is only passed down to the resulting item.
(name-id s)
Generates a fresh unique value that can be used to generate named
items via named
. Note that calling this twice with the same name
returns different values. Use defonce
to stabilize an id for hot
code reloads.
Generates a fresh unique value that can be used to generate named items via [[named]]. Note that calling this twice with the same name returns different values. Use `defonce` to stabilize an id for hot code reloads.
(named name-id item)
Returns an item that looks and works exactly like the given item,
but with has a user defined name, that appears and can be used in
testing and debugging utilities. Use name-id
to generate a
unique name object. See def-item
and defn-item
for more
convenient ways to create named items.
Returns an item that looks and works exactly like the given item, but with has a user defined name, that appears and can be used in testing and debugging utilities. Use [[name-id]] to generate a unique name object. See [[def-item]] and [[defn-item]] for more convenient ways to create named items.
An effect action that does nothing and returns nil.
An effect action that does nothing and returns nil.
(once f & [cleanup-f])
Returns an item that evaluates (f state)
and emits the return
value that it must return initially. On subsequent state updates,
f
is called too, but the returned return
value is only emitted
if it different than last time. In other words, the same return
value is emitted only once. The optional (cleanup-f state)
is
evaluated, when the item is removed from the item tree afterwards.
Note that if you return a modified state, you must be careful to not cause an endless loop of updates.
Returns an item that evaluates `(f state)` and emits the [[return]] value that it must return initially. On subsequent state updates, `f` is called too, but the returned [[return]] value is only emitted if it different than last time. In other words, the same [[return]] value is emitted only once. The optional `(cleanup-f state)` is evaluated, when the item is removed from the item tree afterwards. Note that if you return a modified state, you must be careful to not cause an endless loop of updates.
(par-effects eff & effs)
Compose effects, which are run in 'parallel' (i.e. in no particular order), into one effect that results in a sequence of the results of the individual effects.
Compose effects, which are run in 'parallel' (i.e. in no particular order), into one effect that results in a sequence of the results of the individual effects.
(redirect-messages ref item)
Return an item like the given one, but that handles all messages sent to it by redirecting them to the item specified by the given reference.
Return an item like the given one, but that handles all messages sent to it by redirecting them to the item specified by the given reference.
(ref-let bindings & body)
A macro that defines some names to refer to the given items, which allows the names to be used as message target in the body.
For example, to create an item that redirects messages to one of its children based on some criteria, you can write:
(ref-let [child-1 (my-item-1 ...)
child-2 (my-item-2 ...)]
(handle-message (fn [_ msg]
(if (is-for-child-1? msg)
(return :message [child-1 msg])
(return :message [child-2 msg])))
(div child-1 child-2)))
A macro that defines some names to refer to the given items, which allows the names to be used as message target in the body. For example, to create an item that redirects messages to one of its children based on some criteria, you can write: ``` (ref-let [child-1 (my-item-1 ...) child-2 (my-item-2 ...)] (handle-message (fn [_ msg] (if (is-for-child-1? msg) (return :message [child-1 msg]) (return :message [child-2 msg]))) (div child-1 child-2))) ```
(ref-let* items f & args)
Returns an item, that calls f with a list and the given arguments, where the list consists of the given items, but modified in a way that makes them usable as message targets.
Returns an item, that calls f with a list and the given arguments, where the list consists of the given items, but modified in a way that makes them usable as message targets.
(refer item ref)
Returns an item identical to the given item, but with the given
reference assigned. Note that the returned item cannot be used more
than once. See with-ref
for a description of references.
This should only be used for messaging, but prefer ref-let for that.
To get access to native DOM elements, set the :ref
attribute of
items in the [[reacl-c/dom]] namespace.
Returns an item identical to the given item, but with the given reference assigned. Note that the returned item cannot be used more than once. See [[with-ref]] for a description of references. This should only be used for messaging, but prefer ref-let for that. To get access to native DOM elements, set the `:ref` attribute of items in the [[reacl-c/dom]] namespace.
(return :state state :action action :message [target message])
Creates a value to be used for example in the function
passed to handle-action
. All arguments are optional:
:state
means that the item changes its state to the given value:action
means that the given action is emitted by the item:message
means that the given message is sent to the given target (a reference or a item with a reference assigned).If no :state
option is used, the state of the item will not
change. :state
must occur at most once, :message
and :action
can
be specified multiple times.
Creates a value to be used for example in the function passed to [[handle-action]]. All arguments are optional: - `:state` means that the item changes its state to the given value - `:action` means that the given action is emitted by the item - `:message` means that the given message is sent to the given target (a reference or a item with a reference assigned). If no `:state` option is used, the state of the item will not change. `:state` must occur at most once, `:message` and `:action` can be specified multiple times.
A lens over a list of the actions contained in a return
value.
A lens over a list of the actions contained in a [[return]] value.
A lens over a list of the messages contained in a return
value, as tuples [target message]
.
A lens over a list of the messages contained in a [[return]] value, as tuples `[target message]`.
A lens over the state contained in a return
value. No
state is represented by the unique value keep-state
.
A lens over the state contained in a [[return]] value. No state is represented by the unique value [[keep-state]].
(returned? v)
Returns whether the given value is a return
value.
Returns whether the given value is a [[return]] value.
(seq-effects eff & fs)
Sequentially compose two or more effects. The first argument must be an effect action, and the following must be functions that are called with the result of the previous one and must return a new effect action.
Sequentially compose two or more effects. The first argument must be an effect action, and the following must be functions that are called with the result of the previous one and must return a new effect action.
(static f & args)
Returns an item that is always like (f & args)
, independant of
state changes. The item returned by f
must not access state nor
change it.
Returns an item that is always like `(f & args)`, independant of state changes. The item returned by `f` must not access state nor change it.
(subscription f & args)
Returns an item that emits actions according to the given
function f
. Each time the retuned item is used, f
will be called
with a side-effectful deliver!
function which takes the action to
emit, and f
must return a stop
function of no arguments. You can
call deliver!
immediately once or multiple times, and you may also
do some kind of registration at an asynchronous library or native
browser api, and use deliver!
to inform your application about the
results later, once or multiple times. But when the stop
function
is called, you must prevent any more calls to deliver!
.
Returns an item that emits actions according to the given function `f`. Each time the retuned item is used, `f` will be called with a side-effectful `deliver!` function which takes the action to emit, and `f` must return a `stop` function of no arguments. You can call `deliver!` immediately once or multiple times, and you may also do some kind of registration at an asynchronous library or native browser api, and use `deliver!` to inform your application about the results later, once or multiple times. But when the `stop` function is called, you must prevent any more calls to `deliver!`.
(try-catch try-item catch-item)
Returns an item that looks an works the same as the item
try-item
, until an error is thrown during its rendering. After
that catch-item
is rendered instead, with a state of the combined
outer state and the error - [state-of-e error]
. The catch-item
will usually be interactive, for example, displaying the error (and
the relevant part of the state) to the user, and offer a button to
reset the error to nil
and maybe fix the state, after which
try-item
is showed again.
Returns an item that looks an works the same as the item `try-item`, until an error is thrown during its rendering. After that `catch-item` is rendered instead, with a state of the combined outer state and the error - `[state-of-e error]`. The `catch-item` will usually be interactive, for example, displaying the error (and the relevant part of the state) to the user, and offer a button to reset the error to `nil` and maybe fix the state, after which `try-item` is showed again.
(validation-boundary item validate!)
Returns an item that forms a state validation boundary around the given item,
where (validate! state :up)
is evaluated for side effects when a
state change is flowing out of then item upwards, and (validate! state :down)
is evaluated for side effects when a new state is
being pushed down.
Returns an item that forms a state validation boundary around the given item, where `(validate! state :up)` is evaluated for side effects when a state change is flowing out of then item upwards, and `(validate! state :down)` is evaluated for side effects when a new state is being pushed down.
(with-bind f)
Returns an item that will call f
with a bind
function, which
should return an item then. The bind
function can then be used, to
bind an event handler function to operate on the state of the
returned item, even if it is used on a dom element with a different
state, or it can also be triggered directly via call
from a
handler function with a different state.
Note: reacl-c.dom/defn-dom
does this binding automatically, so
you usually don't have to use this yourself.
Returns an item that will call `f` with a `bind` function, which should return an item then. The `bind` function can then be used, to bind an event handler function to operate on the state of the returned item, even if it is used on a dom element with a different state, or it can also be triggered directly via [[call]] from a handler function with a different state. Note: [[reacl-c.dom/defn-dom]] does this binding automatically, so you usually don't have to use this yourself.
(with-message-target handle-msg f & args)
Returns an item like ´(f target & args), where
targetis a reference that can be used as a message target, which are then handled by a call to
(handle-msg state msg)`, which must return
a return
value.
Returns an item like ´(f target & args)`, where `target` is a reference that can be used as a message target, which are then handled by a call to `(handle-msg state msg)`, which must return a [[return]] value.
(with-ref f & args)
Creates an item identical to the one returned from (f ref & args)
, where ref
is a fresh reference. A reference should be
assigned to one of the items below via refer
. You can use it
as the target of a (return :message [target msg])
for example.
Creates an item identical to the one returned from `(f ref & args)`, where `ref` is a fresh *reference*. A reference should be assigned to one of the items below via [[refer]]. You can use it as the target of a `(return :message [target msg])` for example.
(with-refs n f & args)
Returns an item that calls f with a list of n
references and any
remaining args. See with-ref
.
Returns an item that calls f with a list of `n` references and any remaining args. See [[with-ref]].
(with-state-as binding-form & body)
Returns an item that can look differently depending on its current state.
The basic form is
(with-state-as foo
(dom/div (pr-str foo)))
where foo
is bound to the current state of the returned item.
The binding form can optionally be followed by a schema.core annotation:
(with-state-as foo :- s/Str
(dom/div foo))
The binding form can also use destructuring
(with-state-as {name :name}
(dom/div name))
If the binding form is a vector, the second part of the state can be declared to be local to the body item of the form:
(with-state-as [outer inner :local ""]
(dom/div (str outer "->" inner)))
Note that the state of the inner item (the div
in this case), will
be a tuple (see local-state
) of both outer and inner state, and
that the state of the item created by with-state-as
is just the first
part of that tuple. The expression after :local
is the initial
value of the local state.
Returns an item that can look differently depending on its current state. The basic form is ``` (with-state-as foo (dom/div (pr-str foo))) ``` where `foo` is bound to the current state of the returned item. The binding form can optionally be followed by a schema.core annotation: ``` (with-state-as foo :- s/Str (dom/div foo)) ``` The binding form can also use destructuring ``` (with-state-as {name :name} (dom/div name)) ``` If the binding form is a vector, the second part of the state can be declared to be local to the body item of the form: ``` (with-state-as [outer inner :local ""] (dom/div (str outer "->" inner))) ``` Note that the state of the inner item (the `div` in this case), will be a tuple (see [[local-state]]) of both outer and inner state, and that the state of the item created by `with-state-as` is just the first part of that tuple. The expression after `:local` is the initial value of the local state.
cljdoc is a website building & hosting documentation for Clojure/Script libraries
× close