componentMap

This is a global Component Map that holds the state of all currently mounted Components

The global store of ComponentId, for internal-use only.

Used internally freshComponentId to allocate new ComponentId on mount.

This is used to demarcate the ROOT of a page. This ID will *never* exist in the components map.

Component state, data associated with the lifetime of a Component

The set of child ComponentIds a component currently has mounted (the _componentChildren field of ComponentState).

Placeholder passed to a Props constructor when only the resulting SomeComponent's types (model / props / action) are needed, not a real props value — e.g. to recover the action type for decoding. Safe because every Props built by mount_ / mountWithProps / (+>) is lazy in its props argument, so applying it never forces this.

Used for unidirectional BTS -> MTS communication

dmj: This only runs on the MTS.

Dispatch a main-thread (MTS) event on the Haskell layer.

Invoked synchronously by the MTS delegator (see ts/miso/native/mts/context.ts) with a { componentId, staticKey, event, target } object. Recovers the event handler by its StaticKey, runs it against the owning component's Sink to install its decode+dispatch closure on a scratch node, then invokes that closure with the live event and target DOMRef. No BTS round-trip — the handler runs entirely on the main thread, and its update/effects run there (the scheduler suppresses the redraw; see scheduler).

N.B. unsafeLookupStaticPtr recovers the handler at the component's action type. This is sound because the (componentId, staticKey) pair is emitted together from the same component's setAttrs; the handler's action unifies with the sink's via the quantified components CAF (no unsafeCoerce).

Dispatches a COMPONENT lifecycle message (BTS → MTS) on the "Miso.components" channel. No-op for components without a StaticKey (e.g. the root), since the MTS locates the component via unsafeLookupStaticPtr.

Dispatches an EFFECT message carrying a serialized action across the Lynx thread boundary on the "Miso.effects" channel:

• MTS → BTS when called on the main thread (mts).
• BTS → MTS when called on the background thread (bts).

A no-op on plain web builds (neither mts nor bts).

Global variable to hold the scheduler thread

N.B. undefined is safe here, it will always get populated. Also, we use this in cleanup when interactive mode (GHCi) is detected in that circumstance schedulerThread will always be populated. It's an invariant.

Helper function for cleanly destroying a Component

Helper to drop all lifecycle and mounting hooks if defined.

Convenience function to write inline javascript.

Prefer this function over the use of eval.

This function takes as arguments a JavaScript object and makes the keys available in the function body.

data Person = Person { name :: MisoString, age :: Int }
  deriving stock (Generic)
  deriving anyclass (ToJSVal, ToObject)

logNameGetAge :: Person -> IO Int
logNameGetAge = inline
  """
  console.log(name, name);
  return age;
  """

Event

Diff two virtual DOMs

Flush is used to force a draw of the render tree. This is currently only used when targeting platforms other than the browser (like mobile).

Fails silently if the element is not found.

Analogous to document.querySelector(# + id).select().

Set property on object

Type that holds an Image.

Retrieve a single cookie by name from the CookieStore API.

The successful callback receives a null JSVal when no cookie with that name exists. The errorful callback receives the error message string.

See https://developer.mozilla.org/en-US/docs/Web/API/CookieStore/get

Since: 1.13.0.0

Retrieve all cookies from the CookieStore API.

See https://developer.mozilla.org/en-US/docs/Web/API/CookieStore/getAll

Since: 1.13.0.0

Set a cookie via the CookieStore API.

See https://developer.mozilla.org/en-US/docs/Web/API/CookieStore/set

Since: 1.13.0.0

Delete a cookie by name via the CookieStore API.

See https://developer.mozilla.org/en-US/docs/Web/API/CookieStore/delete

Since: 1.13.0.0

Delete a cookie by options object via the CookieStore API.

See https://developer.mozilla.org/en-US/docs/Web/API/CookieStore/delete

Since: 1.13.0.0

The Date type

Date conversion function to produce a locale

Retrieves current milliseconds from Date

Retrieves current seconds from Date

Calls a function on a JSVal

Example usage:

callFunction domRef "focus" ()
callFunction domRef "setSelectionRange" (0, 3, "none")

A synchronous callback

A synchronous callback with a single argument

A synchronous callback with two arguments

A asynchronous callback

A asynchronous callback with one argument

A asynchronous callback with two arguments

List of possible content types that are available for use with the fetch API

Type returned from a fetch request

Retrieve JSON via Fetch API

Basic GET of JSON using Fetch API, will be expanded upon.

See https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

Blob

FormData

ArrayBuffer

Uint8Array

Retrieve high resolution time stamp

See https://developer.mozilla.org/en-US/docs/Web/API/Performance/now Lynx's *background* thread realm has no performance global at all - only the main thread does - so the obvious performance.now() throws cannot read property now of undefined there. Everything that timestamps from the BTS goes through here, including gesture handling like double-tap detection, so that throw took real features down rather than merely losing precision. Falls back to Date.now(), which every realm has.

Outputs a message to the web console

See https://developer.mozilla.org/en-US/docs/Web/API/Console/log

Console logging of JavaScript strings.

Console-logging of JSVal

Outputs an error message to the web console

See https://developer.mozilla.org/en-US/docs/Web/API/Console/error

Console logging of JavaScript strings.

Outputs a warning message to the web console

See https://developer.mozilla.org/en-US/docs/Web/API/Console/warn

Console logging of JavaScript strings.

Returns an Element object representing the element whose id property matches the specified string.

See https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

Fails silently if the element is not found.

Analogous to document.getElementById(id).focus().

Fails silently if the element is not found.

Analogous to document.getElementById(id).blur()

Fails silently if the element is not found.

Analogous to document.querySelector(# + id).setSelectionRange(start, end, 'none').

Calls the alert() function.

Get a property of a JSVal

Example usage:

Just (value :: String) <- fromJSVal =<< getProperty domRef "value"

Marshalling of JSVal, useful for getProperty

Removes a child node from a parent node.

Calls miso.drawingContext.removeChild(parent, child).

Since: 1.9.0.0

Appends a style_ element containing CSS to head_

addStyle "body { background-color: green; }"

<head><style>body { background-color: green; }</style></head>

Appends a StyleSheet link_ element to head_ The link_ tag will contain a URL to a CSS file.

addStyleSheet "https://cdn.jsdelivr.net/npm/todomvc-common@1.0.5/base.min.css"

<head><link href="https://cdn.jsdelivr.net/npm/todomvc-common@1.0.5/base.min.css" ref="stylesheet"></head>

Appends a <script> element to head_

addSrc "https://example.com/script.js"

Appends a script_ element containing JS to head_

addScript False "function () { alert('hi'); }"

Appends a script_ element containing a JS import map.

addScript "{ \"import\" : { \"three\" : \"url\" } }"

Used to select a drawing context. Users can override the default DOM renderer by implementing their own Context, and exporting it to the global scope. This opens the door to different rendering engines, ala miso-lynx.

Retrieves the width (in pixels) of the browser window viewport including if rendered, the vertical scrollbar.

See https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth

Retrieves the height (in pixels) of the browser window viewport including, if rendered, the horizontal scrollbar.

See https://developer.mozilla.org/en-US/docs/Web/API/Window/innerHeight

Calls the location.reload() function.

Smart constructor for building a Image w/ src_ Attribute.

Smart constructor for a Date

Fetch next sibling DOM node

Since: 1.9.0.0

Fetch previous sibling DOM node

Since: 1.9.0.0

Simulates a click event

button & click ()

Since: 1.9.0.0

Sets the .value property on a DOMRef.

Useful for resetting the value property on an input element.

  setValue domRef ("" :: MisoString)

When working with <input type="file">, this is useful for extracting out the selected files.

  update (InputClicked inputElement) = withSink $ \sink -> do
     files_ <- files inputElement
     forM_ files_ $ \file -> sink (Upload file)
  update (Upload file) = do
     fetch "https://localhost:8080/upload" "POST" (Just file) []
       Successful Errorful

Since: 1.9.0.0

Navigator function to query the current online status of the user's computer

See navigator.onLine

Returns True when executing on the Lynx background thread (BTS), False on the main thread or in a web build.

Backed by miso.onBTS(), which uses the BACKGROUND compile-time define injected by rspeedy. In web builds where BACKGROUND is undefined the function safely returns false.

Since: 1.13.0.0

Returns True when executing on the Lynx main thread (MTS), False on the background thread and in web builds.

Since: 1.13.0.0

Returns (mts, bts, web): whether the current execution context is the Lynx main thread, Lynx background thread, or a plain web build.

Since: 1.13.0.0

File

URLSearchParams

FileReader

Smart constructor for building a FileReader

Register an event listener on given target.

Removes an event listener from given target.

Invokes document.dispatchEvent

  update ChangeTheme = io_ $ do
    themeEvent <- newEvent "basecoat:theme"
    dispatchEvent themeEvent

Creates a new Event

  update ChangeTheme = io_ $ do
    themeEvent <- newEvent "basecoat:theme"
    dispatchEvent themeEvent

Creates a new Event

  update ToggleSidebar = io_ $ do
    themeEvent <- newCustomEvent "basecoat:sidebar"
    dispatchEvent themeEvent

Prevent default event behavior

Stop propagation of events

Calls document.getElementById(id).scrollIntoView()

Calls document.documentElement.requestFullscreen(), falling back to webkitRequestFullscreen for Safari.

Uses the splitmix function to generate a PRNG.

Uses the 'Math.random()' function.

Get Camera on user's device

https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

Copy clipboard

https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

Reads the device position via navigator.geolocation.getCurrentPosition.

Since: 1.13.0.0

Initialize event delegation from a mount point.

Copies DOM pointers into virtual dom entry point into isomorphic javascript

See hydration)

Registers an event listener on window

Removes an event listener from window

Convert a JavaScript object to JSON JSONified representation of events

Retrieves a reference to document body.

See https://developer.mozilla.org/en-US/docs/Web/API/Document/body

Retrieves a reference to the document.

See https://developer.mozilla.org/en-US/docs/Web/API/Document

Retrieves a reference to the drawing context.

This is a miso specific construct used to provide an identical interface for both native (iOS / Android, etc.) and browser environments.

Retrieves a reference to the hydration context.

This is a miso specific construct used to provide an identical interface for both native (iOS / Android, etc.) and browser environments.

Retrieves a reference to the event context.

This is a miso specific construct used to provide an identical interface for both native (iOS / Android, etc.) and browser environments.

Retrieves a reference to the renderer's "head" mount.

Calls miso.drawingContext.getHead().

Note: custom renderers should implement this method.

Since: 1.9.0.0

Establishes a WebSocket connection

Closes an open WebSocket.

Since: 1.13.0.0

Sends a payload over an open WebSocket.

Since: 1.13.0.0

Opens a Server-Sent Events connection and wires up its callbacks.

Since: 1.13.0.0

Closes an open Server-Sent Events connection.

Since: 1.13.0.0

Register a listener for cookieStore change events. Returns the Function handle needed to remove the listener later.

When the CookieStore API is unavailable (e.g. Firefox, insecure contexts) no listener is registered and an inert Function handle is returned.

Remove a previously registered cookieStore change listener.

When the CookieStore API is unavailable this is a no-op.

Populate the classList Set on the virtual DOM.

Used to update the JavaScript reference post-diff.

Uses the first element of 'crypto.getRandomValues()'.