redraw/dom

Types

ReferrerPolicy

Used in preloading functions.

pub type ReferrerPolicy {
  NoReferrerWhenDowngrade
  NoReferrer
  Origin
  OriginWhenCrossOrigin
  UnsafeUrl
}

Constructors

```
NoReferrerWhenDowngrade
```
```
NoReferrer
```
```
Origin
```
```
OriginWhenCrossOrigin
```
```
UnsafeUrl
```

Resource

</>

Used in preloading functions.

pub type Resource {
  Audio
  Document
  Embed
  Fetch
  Font
  Image
  Object
  Script
  Style
  Track
  Video
  Worker
}

Constructors

```
Audio
```
```
Document
```
```
Embed
```
```
Fetch
```
```
Font
```
```
Image
```
```
Object
```
```
Script
```
```
Style
```
```
Track
```
```
Video
```
```
Worker
```

Status

</>

Status returned by use_form_status.
Documentation

pub type Status {
  Status(
    pending: Bool,
    data: option.Option(form_data.FormData),
    method: String,
    action: option.Option(fn(form_data.FormData) -> Nil),
  )
}

Constructors

Status(
  pending: Bool,
  data: option.Option(form_data.FormData),
  method: String,
  action: option.Option(fn(form_data.FormData) -> Nil),
)

Values

create_portal

</>

pub fn create_portal(
  children: redraw.Component,
  root: String,
) -> Result(redraw.Component, Error)

Let you render some children into a different part of the DOM. Contrarily to JavaScript, create_portal returns a Result to avoid runtime error. Indeed, when the provided root does not exist in your HTML, create_portal fails. You should never assume create_portal will work out-of-the-box when you’re building a library. Otherwise, you could assert the resulting value in your application.

import redraw
import redraw/dom/client
import redraw/dom/html

pub fn main() {
  let assert Ok(root) = client.create_root("app")
  client.render(app)
}

fn app() {
  let modal = modal()
  use <- redraw.component__("App")
  let assert Ok(modal) = client.create_portal(modal, "modal")
  html.div([], [html.text("Hello World!"), modal])
}

fn modal() {
  use <- redraw.component__("Modal")
  html.div([], [html.text("Inside the modal!")])
}

Documentation

flush_sync

</>

pub fn flush_sync(callback: fn() -> Nil) -> Nil

Call flushSync to force React to flush any pending work and update the DOM synchronously. \

import redraw
import redraw/dom
import redraw/dom/events

type Action {
  Increment
  Decrement
}

fn counter() {
  use <- redraw.component__()
  let #(state, set_state) = redraw.set_state(0)
  let on_click = fn(type_: Action) {
    events.on_click(fn (event) {
      // Calling flush_sync forces the DOM to refresh.
      dom.flush_sync(fn () {
        set_state(case type_ {
          Increment -> state + 1
          Decrement -> state - 1
        })
      })
    })
  }
  html.div([], [
    html.div([], [html.text("-")]),
    html.div([], [html.text(int.to_string(state))]),
    html.div([], [html.text("+")]),
  ])
}

Most of the time, flushSync can be avoided. Use flushSync as last resort.

Documentation

preconnect

</>

pub fn preconnect(
  href: String,
  cross_origin cross_origin: option.Option(CrossOrigin),
) -> Nil

Let you eagerly connect to a server that you expect to load resources from.
Documentation

prefetch_dns

</>

pub fn prefetch_dns(href: String) -> Nil

Let you eagerly look up the IP of a server that you expect to load resources from.
Documentation

preinit

</>

pub fn preinit(
  uri: uri.Uri,
  as_ as_: As,
  precedence precedence: option.Option(String),
  cross_origin cross_origin: option.Option(CrossOrigin),
  integrity integrity: option.Option(String),
  nonce nonce: option.Option(String),
  fetch_priority fetch_priority: option.Option(String),
) -> Nil

Let you eagerly fetch and evaluate a stylesheet or external script.
Documentation

preinit_module

</>

pub fn preinit_module(
  uri: uri.Uri,
  cross_origin cross_origin: option.Option(CrossOrigin),
  integrity integrity: option.Option(String),
  nonce nonce: option.Option(String),
) -> Nil

Let you eagerly fetch and evaluate an ESM module.
Documentation

preload

</>

pub fn preload(
  uri: uri.Uri,
  as_ as_: Resource,
  cross_origin cross_origin: option.Option(CrossOrigin),
  referrer_policy referrer_policy: option.Option(ReferrerPolicy),
  integrity integrity: option.Option(String),
  type_ type_: option.Option(String),
  nonce nonce: option.Option(String),
  fetch_priority fetch_priority: option.Option(FetchPriority),
  image_src_set image_src_set: option.Option(String),
  image_sizes image_sizes: option.Option(String),
) -> Nil

Let you eagerly fetch a resource such as a stylesheet, font, or external script that you expect to use.
Documentation

preload_module

</>

pub fn preload_module(
  uri: uri.Uri,
  cross_origin cross_origin: option.Option(CrossOrigin),
  integrity integrity: option.Option(String),
  nonce nonce: option.Option(String),
) -> Nil

Let you eagerly fetch an ESM module that you expect to use.
Documentation

use_form_status

</>

pub fn use_form_status() -> Status

Give you status information of the last form submission.
Documentation