(c/fragment (fetch (GET "/resource"))
            (c/dynamic pr-str))

(delivery
 (dom/button
  {:onclick #(c/return :action (deliver (PUT "/resource" {:body v})))}))

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})))}))
```

Note that all items cancel outstanding requests when they are
removed from the dom tree.

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.

This namespace contains some convenience functions an macros based
on [cljss](https://github.com/clj-commons/cljss).

A collection of various small utilities.

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.

Utility to create specialized input fields via parsing of the native value.

(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

Jobs allow you to define arbitrary and domain specific synchronous or
asynchronous side effects of your application, separate from their
implementation, and functions to execute and control them savely in
your application.

Utilities to do CSS media queries and get notified when their results
change, e.g. the user resized the window.

(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")})
```

(routes/defroutes my-app
  (routes/defroute home "/"))

(-> 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.

(c/defn-item my-form [running?]
  (dom/button {:disabled (not running?)
               :onClick (fn [v _] (c/return :action "done"))}))

(defn-program my-program []
  [res (await-action my-form)]
  (show (dom/div res)))

(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)))
```