This namespace contains utilities to do AJAX requests in a reacl-c application, based on cljs-ajax
.
At a glance, you first define requests with GET
, POST
and PUT
.
GET requests are usually there to get some data from a server and
display it to the user. Typically you want to use fetch
or a
variant of it to do that, or the lower level execute
. For
example:
(c/fragment (fetch (GET "/resource"))
(c/dynamic pr-str))
POST and PUT requests are typically sent in response to an action by
the user. The delivery
item and the deliver
action are made
to help with that:
(delivery
(dom/button
{:onclick #(c/return :action (deliver (PUT "/resource" {:body v})))}))
For details on the various options of the request constructors, see
the documentation
of cljs-ajax
.
Also see reacl-c-basics.ajax-test-util
for an easy way to
simulate server responses in unit tests.
This namespace contains utilities to do AJAX requests in a reacl-c application, based on `cljs-ajax`. At a glance, you first define requests with [[GET]], [[POST]] and [[PUT]]. GET requests are usually there to get some data from a server and display it to the user. Typically you want to use [[fetch]] or a variant of it to do that, or the lower level [[execute]]. For example: ``` (c/fragment (fetch (GET "/resource")) (c/dynamic pr-str)) ``` POST and PUT requests are typically sent in response to an action by the user. The [[delivery]] item and the [[deliver]] action are made to help with that: ``` (delivery (dom/button {:onclick #(c/return :action (deliver (PUT "/resource" {:body v})))})) ``` For details on the various options of the request constructors, see the documentation of [`cljs-ajax`](https://github.com/JulianBirch/cljs-ajax#getpostput). Also see [[reacl-c-basics.ajax-test-util]] for an easy way to simulate server responses in unit tests.
Utilities to help emulating server responses in unit tests.
Utilities to help emulating server responses in unit tests.
This namespace contains some convenience functions an macros based on cljss.
This namespace contains some convenience functions an macros based on [cljss](https://github.com/clj-commons/cljss).
A collection of various small utilities.
A collection of various small utilities.
Utility to delay state updates from items, which is sometimes useful for input elements.
Utility to delay state updates from items, which is sometimes useful for input elements.
This namespace contains replacements for the basic form elements (input, select, textbox) but with corresponding states.
The select
item also supports any kind of values for the
:value
attribute of option
s, not just strings.
Additionally, the new attributes :invalid
and :validate
are
supported for all of them, allowing for a declarative way to
use setCustomValidity
on the dom nodes.
An attribute :report-validity
can be set to true on input items
and form
to call reportValidity
on them on every state
change.
This namespace contains replacements for the basic form elements (input, select, textbox) but with corresponding states. The [[select]] item also supports any kind of values for the `:value` attribute of [[option]]s, not just strings. Additionally, the new attributes `:invalid` and `:validate` are supported for all of them, allowing for a declarative way to use `setCustomValidity` on the dom nodes. An attribute `:report-validity` can be set to true on input items and [[form]] to call `reportValidity` on them on every state change.
Utility to create specialized input fields via parsing of the native value.
Utility to create specialized input fields via parsing of the native value.
No vars found in this namespace.
Input types extend over the :type
attribute
of reacl-c-basics.forms.core/input
items, giving more control
over the data types of the state value, and to some extend over the
ui controls to enter those values. The type system defined here is
also extensible.
For example, you can ask the user for an integer via
(c/isolate-state 0
(core/input {:type types/integer}))
Input types extend over the `:type` attribute of [[reacl-c-basics.forms.core/input]] items, giving more control over the data types of the state value, and to some extend over the ui controls to enter those values. The type system defined here is also extensible. For example, you can ask the user for an integer via ``` (c/isolate-state 0 (core/input {:type types/integer})) ```
EXPERIMENTAL
Utilities for a more customized display of form validity.
Note: the basic validity of input fields can be defined with the
:invalid
and :validate
attribtues
of reacl-c-basics.forms.core/input
etc.
Note: the validation message for native validations (:pattern
,
:required
etc) can be modified by using setCustomValidity
in
:onInvalid
events depending on the validity
property.
For visual styling there are the :required
and :options
CSS
pseudo-classes, as well as :valid
and :invalid
.
For showing validation problems differently than the browser does by
default, use with-validity
and the derived
utils form-with-validity
or append-validity
.
To trigger the display of validation problems before submitting a
form, use report-validity!
.
See https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Constraint_validation
EXPERIMENTAL Utilities for a more customized display of form validity. Note: the basic validity of input fields can be defined with the `:invalid` and `:validate` attribtues of [[reacl-c-basics.forms.core/input]] etc. Note: the validation message for native validations (`:pattern`, `:required` etc) can be modified by using `setCustomValidity` in `:onInvalid` events depending on the `validity` property. For visual styling there are the `:required` and `:options` CSS pseudo-classes, as well as `:valid` and `:invalid`. For showing validation problems differently than the browser does by default, use [[with-validity]] and the derived utils [[form-with-validity]] or [[append-validity]]. To trigger the display of validation problems before submitting a form, use [[report-validity!]]. See https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Constraint_validation
Utilities to do CSS media queries and get notified when their results change, e.g. the user resized the window.
Utilities to do CSS media queries and get notified when their results change, e.g. the user resized the window.
Utilities for client side routing, i.e. multiple pages in a so called single page application.
The basic usage is to define routes and page functions, and the use a router component near the toplevel of your application to show different contents based on the current browser location URL:
(routes/defroutes my-app
(routes/defroute home "/"))
(html5-history-router {home (constantly "Hello World")})
Utilities for client side routing, i.e. multiple pages in a so called single page application. The basic usage is to define routes and page functions, and the use a router component near the toplevel of your application to show different contents based on the current browser location URL: ``` (routes/defroutes my-app (routes/defroute home "/")) (html5-history-router {home (constantly "Hello World")}) ```
Functions to help serving the client code in a ring server of a so called single page application for all routes handled on the client side.
After defining the routes (in a 'cljc' file):
(routes/defroutes my-app
(routes/defroute home "/"))
you can create a ring handler that serves the client html with a suitable ring response:
(-> handler
(wrap-client-routes my-app response))
Functions to help serving the client code in a ring server of a so called single page application for all routes handled on the client side. After defining the routes (in a 'cljc' file): ``` (routes/defroutes my-app (routes/defroute home "/")) ``` you can create a ring handler that serves the client html with a suitable ring response: ``` (-> handler (wrap-client-routes my-app response)) ```
Functions to define and use the routes in a client side routing application.
A typical usage would be to define the routes of an application in a
shared cljc
file, and use them with
a core/html5-history-router
in the client, and
with ring/wrap-client-routes
on the server side to deliver the
client code for all of these routes.
You can also call routes as a function, passing the defined path and query params, and get a 'href' back that be use in anchor tags to let the user navigate to the pages of the application.
Functions to define and use the routes in a client side routing application. A typical usage would be to define the routes of an application in a shared `cljc` file, and use them with a [[core/html5-history-router]] in the client, and with [[ring/wrap-client-routes]] on the server side to deliver the client code for all of these routes. You can also call routes as a function, passing the defined path and query params, and get a 'href' back that be use in anchor tags to let the user navigate to the pages of the application.
Programs are an abstraction over items, that have a dedicated result, and form an async monad.
You will usually start with an item that allows some user interactions when the program is 'running', like
(c/defn-item my-form [running?]
(dom/button {:disabled (not running?)
:onClick (fn [v _] (c/return :action "done"))}))
Then define a program that runs that
(defn-program my-program []
[res (await-action my-form)]
(show (dom/div res)))
And then add running this program into your application
(dom/div "My program:" (runner (my-program)))
Programs are an abstraction over items, that have a dedicated result, and form an async monad. You will usually start with an item that allows some user interactions when the program is 'running', like ``` (c/defn-item my-form [running?] (dom/button {:disabled (not running?) :onClick (fn [v _] (c/return :action "done"))})) ``` Then define a program that runs that ``` (defn-program my-program [] [res (await-action my-form)] (show (dom/div res))) ``` And then add running this program into your application ``` (dom/div "My program:" (runner (my-program))) ```
A Nubank workspaces card type for reacl-c.
A [Nubank workspaces](https://github.com/nubank/workspaces) card type for reacl-c.
cljdoc is a website building & hosting documentation for Clojure/Script libraries
× close