Try Install Learn Blog API Packages GitHub
Pages

Global Components

Components can be declared as global , which means:

  • globally accessible
  • they are only rendered once
  • rendered automatically alongside the Main component

Why are they useful?

There are some UI features that requires one global entity that other entities can interact with from anywhere, for example notifications or modals.

What does it look like in practice?

Below you can find a basic implementation of a confirmation modal.

global component ConfirmModal {
  state callback : Function(Promise(Never, Void)) = Promise.never
  state message : String = ""
  state open : Bool = false

  style base {
    background: rgba(0,0,0,0.8);
    color: white;

    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    top: 0;

    justify-content: center;
    flex-direction: column;
    align-items: center;
    display: flex;
  }

  fun show (
    message : String,
    callback : Function(Promise(Never, Void))
  ) : Promise(Never, Void) {
    next
      {
        callback = callback,
        message = message,
        open = true
      }
  }

  fun handleClick : Promise(Never, Void) {
    sequence {
      callback()
      next { open = false }
    }
  }

  fun render : Html {
    if (open) {
      <div::base>
        <{ message }>

        <button onClick={handleClick}>
          "OK"
        </button>
      </div>
    } else {
      <></>
    }
  }
}

component Main {
  fun handleClick : Promise(Never, Void) {
    ConfirmModal.show("Hello There!", Promise.never)
  }

  fun render : Html {
    <div onClick={handleClick}>
      "Click ME!"
    </div>
  }
}