vleam/vue · vleam

and_computed

pub fn and_computed(
  watch_config: WatchConfig(
    a,
    NoImmediate,
    NoDeep,
    NoFlush,
    NoOnTrack,
    NoOnTrigger,
    NoOnce,
  ),
  computed: Computed(b),
) -> WatchConfig(
  a,
  NoImmediate,
  NoDeep,
  NoFlush,
  NoOnTrack,
  NoOnTrigger,
  NoOnce,
)

Add a computed value to a watch

 vue.watch_ref(first_name)
 |> vue.and_computed(last_name)
 |> vue.with_immediate(True)
 |> vue.with_listener(fn(_, _, _) {
   // ...
 })

and_function

</>

pub fn and_function(
  watch_config: WatchConfig(
    a,
    NoImmediate,
    NoDeep,
    NoFlush,
    NoOnTrack,
    NoOnTrigger,
    NoOnce,
  ),
  function: fn() -> b,
) -> WatchConfig(
  a,
  NoImmediate,
  NoDeep,
  NoFlush,
  NoOnTrack,
  NoOnTrigger,
  NoOnce,
)

Add a function to a watch

 vue.watch_ref(first_name)
 |> vue.and_function(last_name)
 |> vue.with_immediate(True)
 |> vue.with_listener(fn(_, _, _) {
   // ...
 })

and_plain

</>

pub fn and_plain(
  watch_config: WatchConfig(
    a,
    NoImmediate,
    NoDeep,
    NoFlush,
    NoOnTrack,
    NoOnTrigger,
    NoOnce,
  ),
  plain: b,
) -> WatchConfig(
  a,
  NoImmediate,
  NoDeep,
  NoFlush,
  NoOnTrack,
  NoOnTrigger,
  NoOnce,
)

Add a plain value to a watch

 vue.watch_ref(first_name)
 |> vue.and_plain(last_name)
 |> vue.with_immediate(True)
 |> vue.with_listener(fn(_, _, _) {
   // ...
 })

and_ref

</>

pub fn and_ref(
  watch_config: WatchConfig(
    a,
    NoImmediate,
    NoDeep,
    NoFlush,
    NoOnTrack,
    NoOnTrigger,
    NoOnce,
  ),
  ref: Ref(b),
) -> WatchConfig(
  a,
  NoImmediate,
  NoDeep,
  NoFlush,
  NoOnTrack,
  NoOnTrigger,
  NoOnce,
)

Add a ref value to a watch

 vue.watch_ref(first_name)
 |> vue.and_ref(last_name)
 |> vue.with_immediate(True)
 |> vue.with_listener(fn(_, _, _) {
   // ...
 })

and_shallow_ref

</>

pub fn and_shallow_ref(
  watch_config: WatchConfig(
    a,
    NoImmediate,
    NoDeep,
    NoFlush,
    NoOnTrack,
    NoOnTrigger,
    NoOnce,
  ),
  shallow_ref: ShallowRef(b),
) -> WatchConfig(
  a,
  NoImmediate,
  NoDeep,
  NoFlush,
  NoOnTrack,
  NoOnTrigger,
  NoOnce,
)

Add a shallow_ref value to a watch

 vue.watch_ref(first_name)
 |> vue.and_shallow_ref(last_name)
 |> vue.with_immediate(True)
 |> vue.with_listener(fn(_, _, _) {
   // ...
 })

computed

</>

pub fn computed(value: fn() -> a) -> Computed(a)

Define computed

computed_value

</>

pub fn computed_value(computed: Computed(a)) -> a

Get computed value

define_component

</>

pub fn define_component(
  components components: List(#(String, fn() -> Component)),
  directives directives: List(#(String, fn() -> Directive)),
  inherit_attrs inherit_attrs: Bool,
) -> ComponentBase(Nil, Nil, Nil)

Entrypoint for component definition. optionally piped to a with_n_props and/or with_n_nullable_props and/or with_emits functions, and must be finally piped to setup.

components is a list of #(component_name, fn() -> Component) tuples. There are three possible ways to gain access to components:

Using @external to refer to a component defined in Javascript
Importing a component defined in Gleam using this library
Using them without the need to refer them in define_component, either by gloabl definition with vue.component or by an auto-import mechanism similar to Nuxt’s

directives is a list of #(directive_name, fn() -> Directive) tuples.

inherit_attrs is a boolean, identical to Vue’s javascript configuration.

Example

import gleam/option.{None, Some}
import gleam/string
import vleam/vue.{
  type Component, NullableProp, Prop, define_component, setup,
  with_1_nullable_prop, with_1_prop,
}

import vleam_todo/models.{type Todo, type TodoError}

type InputEvent

// Import the default export from HelloWorld.vue
// This is technically an incorrect type, but it'll work. C'est la vie.
@external(javascript, "/src/components/HelloWorld.vue", "default")
fn hello_world_component() -> Component

// Also works for external packages, although @ sign has to be aliased
@external(javascript, "heroicons/vue/24/solid", "UserIcon")
fn user_icon() -> Component

// or you can predefine in TS/JS
@external(javascript, "/src/ffi.ts", "CheckIcon")
fn check_icon() -> #(String, fn() -> Component)

pub fn default_export() -> Component {
  define_component(
    [
      #("HelloWorld", hello_world_component),
      #("UserIcon", user_icon),
      check_icon(),
    ],
    [],
    False,
  )
  |> with_1_prop(
    Prop("initialName", None),
  )
  |> with_1_nullable_prop(
    Prop("greeting", Some("Hello, ")),
  )
  // Props are handed as Computed for reactivity. It's best practice to
  // always type them, as types aren't always inferred.
  |> setup(fn(
    required_props: #(Computed(String)),
    nullable_props: #(Computed(String)),
    _
  ) {
    let initial_name = props.0
    let greeting = props.1

    // Errors return from `setup` are thrown. This is just a demo, don't
    // throw on bad input, only on irrecoverable errors (which generally
    // should never occur in `setup` function)
    use <- bool.guard(
      {
        greeting
        |> vue.computed_value
        |> string.length
      }
      > 0,
      Error("Empty greeting"),
    )

    let change_count = vue.shallow_ref(0)
    let increment_count = fn() {
      change_count
      |> vue.shallow_ref_set(vue.shallow_ref_value(change_count) + 1)
    }

    let name =
      initial_name
      |> vue.computed_value
      |> vue.shallow_ref

    let change_name = fn(new_name) {
      name
      |> vue.shallow_ref_set(new_name)
    }
    let full_greeting =
      vue.computed(fn() {
        name
        |> vue.shallow_ref_value
        |> string.append(
          greeting
          |> vue.computed_value
        )

        increment_count()
      })

    // To return values to the template, the FFI expects an Ok() with a
    // tuple of object entries. The following is identical to Vue's:
    //
    // return {
    //   fullGreeting: full_greeting,
    //   changeName: change_name,
    //   changeCount: change_count,
    // };
    Ok(#(
      #("fullGreeting", full_greeting),
      #("changeName", change_name),
      #("changeCount", change_count),
    ))
  })
}

get_component

</>

pub fn get_component(
  vue_app: App,
  component_name: String,
) -> Result(Component, VueError)

Returns components that were registered using app.component

inject

</>

pub fn inject(key: String) -> Option(a)

inject_with_default

</>

pub fn inject_with_default(key: String, default: a) -> a

inject_with_factory

</>

pub fn inject_with_factory(key: String, factory: fn() -> a) -> a

next_tick

</>

pub fn next_tick() -> Promise(Nil)

vue.nextTick() https://vuejs.org/api/general.html#nexttick

next_tick_action

</>

pub fn next_tick_action(callback: fn() -> Nil) -> Promise(Nil)

on_activated

</>

pub fn on_activated(handler: fn() -> Nil) -> Nil

on_before_mount

</>

pub fn on_before_mount(handler: fn() -> Nil) -> Nil

on_before_unmount

</>

pub fn on_before_unmount(handler: fn() -> Nil) -> Nil

on_before_update

</>

pub fn on_before_update(handler: fn() -> Nil) -> Nil

on_deactivated

</>

pub fn on_deactivated(handler: fn() -> Nil) -> Nil

on_mounted

</>

pub fn on_mounted(handler: fn() -> Nil) -> Nil

on_track

</>

pub fn on_track(
  watch_config: WatchConfig(a, b, c, d, NoOnTrack, e, f),
  on_track: Option(fn(DebuggerEvent) -> Nil),
) -> WatchConfig(a, b, c, d, WithOnTrack, e, f)

Set the on_track callback on a watch

 vue.watch_ref(first_name)
 |> vue.and_computed(last_name)
 |> vue.on_track(fn(_) {
   // ...
 })
 |> vue.with_listener(fn(_, _, _) {
   // ...
 })

on_trigger

</>

pub fn on_trigger(
  watch_config: WatchConfig(a, b, c, d, e, NoOnTrigger, f),
  on_trigger: Option(fn(DebuggerEvent) -> Nil),
) -> WatchConfig(a, b, c, d, e, WithOnTrigger, f)

Set the on_trigger callback on a watch

 vue.watch_ref(first_name)
 |> vue.and_computed(last_name)
 |> vue.on_trigger(fn(_) {
   // ...
 })
 |> vue.with_listener(fn(_, _, _) {
   // ...
 })

on_unmounted

</>

pub fn on_unmounted(handler: fn() -> Nil) -> Nil

on_updated

</>

pub fn on_updated(handler: fn() -> Nil) -> Nil

provide

</>

pub fn provide(key: String, value: a) -> Nil

ref

</>

pub fn ref(initial_value: a) -> Ref(a)

Define a ref

ref_set

</>

pub fn ref_set(ref: Ref(a), value: a) -> Ref(a)

Set ref value

ref_value

</>

pub fn ref_value(value: Ref(a)) -> a

Get ref value

register_component

</>

pub fn register_component(
  vue_app: App,
  component_name: String,
  component: Component,
) -> App

Registers components using app.component

setup

</>

pub fn setup(
  base: ComponentBase(a, b, c),
  setup: fn(a, b, c) -> d,
) -> Component

Component setup function See define_component for a full example.

shallow_ref

</>

pub fn shallow_ref(value: a) -> ShallowRef(a)

Define a shallow ref

shallow_ref_set

</>

pub fn shallow_ref_set(
  ref: ShallowRef(a),
  value: a,
) -> ShallowRef(a)

Set shallow ref value

shallow_ref_value

</>

pub fn shallow_ref_value(a: ShallowRef(a)) -> a

Get shallow ref value

trigger_ref

</>

pub fn trigger_ref(ref: ShallowRef(a)) -> Nil

Trigger a shallow ref

watch2

</>

pub fn watch2(
  watches watches: #(
    WatchConfig(
      #(a),
      NoImmediate,
      NoDeep,
      NoFlush,
      NoOnTrack,
      NoOnTrigger,
      NoOnce,
    ),
    WatchConfig(
      #(b),
      NoImmediate,
      NoDeep,
      NoFlush,
      NoOnTrack,
      NoOnTrigger,
      NoOnce,
    ),
  ),
) -> WatchConfig(
  #(a, b),
  NoImmediate,
  NoDeep,
  NoFlush,
  NoOnTrack,
  NoOnTrigger,
  NoOnce,
)

Define a watcher for 2 “reflike” values. You can use and_ modifiers to add values to the watch, with_ modifiers to set options, and with_listener for the listen function.

 vue.watch2(#(
   watch_computed(last_name),
   watch_ref(last_name),
 ))
 |> vue.with_immediate(True)
 |> vue.with_listener(fn(values, old_values, _) {
   // this will fire on a change in `first_name` or `last_name`
   // values, old_values, is a tuple corresponding to the input
 })