Solid-JS

The intention here will be to provide an overview of all bound functions and types from solid-js.

Depending on the level of motivation when I write this, and until I complete my SolidBase.DocGen, the level of detail varies. Best resource is to visit the solid-js docs.

In cases where we have 'unique' calls/signatures, that will be documented here and/or in the 'API Differences' section.

When drawing up a type signature, if referencing a component that takes children, the type will interface HtmlContainer. Otherwise interface HtmlElement.

Optional constructor properties/parameters are val declarations. An interface object uses member declarations.

Components which only take a specific signature or type of children will declare a val children.

Methods will use let to provide syntax highlighting. To provide overloads, they are actually static members on a type marked with [<AutoOpen>].

Signal

type Signal<'T> = Accessor<'T> * Setter<'T>

See createSignal

Accessor

type Accessor<'T> = unit -> 'T

Setter

Calling the setter updates the signal, triggering dependents to rerun (if the value actually changed).

type Setter<'T> = 'T -> unit

You can optionally .Invoke a setter to pass it a handler, which will be expected to provide the new value from the previous value.

There is an overload which resembles the normal behaviour too.

[<Extension; Erase>]
static member inline Invoke(setter: Setter<'T>, handler: 'T -> 'T): unit
[<Extension; Erase>]
static member inline Invoke(setter: Setter<'T>, value: 'T): unit

To access the new value that is set, you can use .InvokeAndGet.

[<Extension; Erase>]
static member inline InvokeAndGet(setter: Setter<'T>, handler: 'T -> 'T): 'T
[<Extension; Erase>]
static member inline InvokeAndGet(setter: Setter<'T>, value: 'T): 'T

Context

type Context<'T> = 'T -> ContextProvider
type ContextProvider = inherit HtmlContainer

Created by passing a JS.Pojo (recommended) to a createContext call as a type arg or value.

The default is set by calling the given Context function with the value.

The plugin transpiles the 'T -> ContextProvider function call with the identifier suffixed by .Provider as per the solid-js spec

Dynamic

type Dynamic<'T>() = interface HtmlElement

val component': TagValue

val componentAsString: string

Overload to component' accepting a string for native components.

For

type For<'T>() = interface HtmlElement

val each: 'T[]

The array of items that are accessible within the child function.

val fallback: HtmlElement

Fallback element to render while the list is loading.

val children: (item: 'T) -> (index: Accessor<int>) -> #HtmlElement

Similar to passing an array to an Array.mapi call. The array passed to each has each member acted on by the given function.

The parameters of the lambda are the item of the array, and a reactive getter for theindex of that item.

Use Index for the item to be a reactive getter instead.

Index

type Index<'T>() = interface HtmlElement

val each: 'T[]

val fallback: HtmlElement

val children: (item: Accessor<'T>) -> (index: int) -> #HtmlElement

NoHydration

type NoHydration() = interface FragmentNode

Show

type Show() = interface HtmlContainer

val when': bool

val fallback: HtmlElement

val keyed: bool

type Show<'T>() =
    interface HtmlElement
    interface ChildLambdaProvider<'T>

val when': 'T

Match

type Match() = interface HtmlContainer

val when': bool

Switch

type Switch() = interface HtmlElement

val children: Match

Suspense

type Suspense() = interface HtmlContainer

val fallback: HtmlElement

SuspenseList

type SuspenseList() = interface HtmlContainer

module SuspenseList =
    [<StringEnum>]
    type RevealOrder =
        | Forwards
        | Backwards
        | Together

val revealOrder: SuspenseList.RevealOrder

module SuspenseList =
    [<StringEnum>]
    type Tail =
        | Collapsed
        | Hidden

val tail: SuspenseList.Tail

val fallback: HtmlElement

Portal

type Portal() = interface HtmlContainer

val mount: Element

val useShadow: bool

val isSVG: bool

ErrorBoundary

type ErrorBoundary() = interface HtmlContainer

module ErrorBoundary =
    type Fallback = delegate of err: obj * reset: (unit -> unit) -> HtmlElement

val fallback: ErrorBoundary.Fallback

val plainFallback: HtmlElement

Overload for fallback which accepts a simple HtmlElement when you don't need to introspect the error or reset the boundary.

Functions

children

let children(value: unit -> #HtmlElement): Accessor<#HtmlElement>

mergeProps

let mergeProps([<ParamList>] values: 'T[]): 'T

splitProps

let splitProps(
    o: 'T,
    properties: string[],
    ?otherProperties: string[]
    ): 'T * 'T

render

let render(
    code: unit -> #HtmlElement,
    element: #Element
    ): unit

renderToString

let renderToString(fn: unit -> #HtmlElement): string

createSignal

let createSignal(
    value: 'T,
    ?equals: oldVal: 'T -> newVal: 'T -> bool,
    ?name: string,
    ?``internal``: bool
    ): Signal<'T>

See Signal<'T>

let myFunc () = console.log("myFunc")
let accessor,setter = createSignal(unbox<unit -> (unit -> unit)> myFunc)
let myNewFunc () = console.log("newFunc")
setter (fun () -> myNewFunc)

createMemo

let createMemo(value: unit -> 'T): Accessor<'T>

let createMemo(value: 'T -> 'T, initialValue: 'T): Accessor<'T>

open Partas.Solid.Experimental
memo { ... }

createEffect

let createEffect(effect: unit -> unit): unit

open Partas.Solid.Experimental
effect { ... }

let createEffect(
    effect: 'T -> 'T,
    initialValue: 'T
    ): unit

createContext

let createContext<'T>(?value: 'T): Context<'T>

See Context<'T>

useContext

let useContext(context: Context<'T>): 'T

See Context<'T>

createResource

let createResource(
    fetcher: unit -> JS.Promise<'T>,
    ?initialValue: 'T
    // Using Async<'T> will have Async.StartAsPromise injected
    ) = SolidResource<'T> * SolidResourceManager<'T>

// Fetcher only called when 'U is Some
let createResource(
    source: unit -> 'U option,
    fetcher: 'U -> JS.Promise<'T>,
    ?initialValue: 'T
    // Using Async<'T> will have Async.StartAsPromise injected
    ) = SolidResource<'T> * SolidResourceManager<'T>

let createResource(
    ?source: unit -> 'U option,
    fetcher: ResourceFetcher<'U option, 'T>,
    ?initialValue: 'T,
    ?name: string,
    ?deferStream: bool,
    ?onHydrated: (unit -> unit),
    ?ssrLoadFrom: string,
    ?storage: Signal<'T>
    ): SolidResource<'T> * SolidResourceManager<'T>

SolidResource

type SolidResource<'T> = interface

member current: 'T

member state: SolidResourceState

See SolidResourceState

member loading: bool

member error: exn option

member latest: 'T

Unlike current, it keeps the latest value while re-loading.

Will be undefined until first value has been loaded.

SolidResourceManager

type SolidResourceManager<'T> = interface

member mutate: 'T -> 'T

member refetch: unit -> JS.Promise<'T>

Can alternatively pass an argument to refetch which can be accessed by the handler if using the ResourceFetcher overload. See below.

[<Extension; Erase>]
static member refetchWith<'U, 'T>(this: SolidResourceManager<'T>, input: 'U): JS.Promise<'T>

SolidResourceState

type SolidResourceState

StringEnum with values:

| Unresolved

Hasn't started loading, no value yet.

| Pending

It's loading, no value yet.

| Ready

Finished loading, has value.

| Refreshing

It's reloading, latest has value.

| Errored

Finished loading with an error, no value.

ResourceFetcher

type ResourceFetcher<'U, 'T> = 'U -> ResourceFetcherInfo<'T> -> JS.Promise<'T>

Arguments that are available to consume within the handler. The first is the source signal (if any was provided, else null), and the second is an object with two properties: the previous value via _.value, and whether the fetcher was initiated by a refetch via _.refetching.

ResourceFetcherInfo

type ResourceFetcherInfo<'T> = interface

Used in the handler parameter of the createResource function if using the ResourceFetcher<'U, 'T> overload.

member value: 'T

Previous value.

member refetching: bool

Is true when fetcher was triggered using the refetch function.

If refetch is called with an argument, that argument is supplied instead of the boolean value.

Use _.refetchingWith helper if you are expecting this.

[<Extension; Erase>]
static member refetchingWith<'T>(this: ResourceFetcherInfo<_>): U2<'T, bool>

createRoot

let createRoot(
    // dispose fn
    fn: Action -> 'T
    ): 'T

createUniqueId

let createUniqueId(): string

createStore

let createStore(store: 'T): 'T * SolidStoreSetter<'T>

SolidStoreSetter

type SolidStoreSetter<'T> = interface

member Update: newValue 'T -> unit

Replace old store value with new value.

member Update: updater: ('T -> 'T) -> unit

Update store mapping the old value to a new value.

member UpdatePath: pathArgs: obj[] -> unit

Update store using native solid path syntax.

member Path: SolidStorePath<'T, 'T>

Access more convenient method of updating store items.

SolidStorePath

type SolidStorePath<'T, 'Value> = interface

member Setter: SolidStoreSetter<'T>

member Path: obj[]

member Map(map: 'Value -> 'Value2)

Chooses the store item that should be updated.

member Update(value: 'Value): unit

Update store item using new value

member Update(value: 'Value -> 'Value): unit

Update store item mapping old value to new value.

[<Extension; Erase>]
static member inline Item(
    this: SolidStorePath<'T, 'Value array>,
    index: int
    ): 'Value

Select store item by index

[<Extension; Erase>]
static member inline Find(
    this: SolidStorePath<'T, 'Value array>,
    predicate: 'Value -> bool
    ): 'Value

Select store item by predicate

type StoreValue = {
        MyValue: int
    }

let store,storeSetter = createStore<StoreValue>({ MyValue = 5 })
JS.console.log store // { MyValue: 5 }
storeSetter.Path.Map( _.MyValue ).Update(10)
JS.console.log store // { MyValue: 10 }

reconcile

let reconcile<'T, 'U>(value: 'T): ('U -> 'T)

produce

let produce<'T>(fn: 'T -> unit)

unwrap

let unwrap<'T>(item: 'T): 'T

batch

let batch<'T>(fn: unit -> 'T): 'T

open Partas.Solid.Experimental
batch { ... }

catchError

let catchError<'T>(
    tryFn: unit -> 'T,
    onError: obj -> unit
    ): 'T

onCleanup

let onCleanup(fn: unit -> unit): unit

open Partas.Solid.Experimental
cleanup { ... }

onMount

let onMount(fn: unit -> unit): unit

open Partas.Solid.Experimental
mount { ... }

useTransition

let useTransition(): (pending: unit -> bool) * (start: (unit -> unit) -> JS.Promise<unit>)

startTransition

let startTransition(): (start: (unit -> unit) -> JS.Promise<unit>)

untrack

let untrack<'T>(fn: Accessor<'T>): 'T

importComponent

let importComponent(path: string): JS.Promise<HtmlElement>

Use to dynamically import a component (in combination with lazy), where path is the relative path to the component declaring file.

The component must therefor be the default export of the file.

lazy

let lazy'(import: unit -> JS.Promise<HtmlElement>): HtmlElement

Component lazy loading. Use in combination with importComponent

createComputed

let createComputed<'T>(
    fn: 'T -> 'T,
    ?value: 'T
    ): unit

createComputed creates a new computation that immediately runs the given function in a tracking scope, thus automatically tracking its dependencies, and automatically reruns the function whenever the dependencies changes.

The function gets called with an argument equal to the value returned from the functions last execution, or on the first call, equal to the optional second argument.

The return value of the function is not otherwise exposed; in particular, createComputed has no return value.

createComputed is the most immediate form of reactivity in solid-js, and is most useful for building other reactive primitives.

For example, some other solid-js primitives are built from createComputed.

createDeferred

let createDeferred<'T>(
    source: unit -> 'T,
    ?timeoutMs: int,
    ?equals: (prev: 'T) -> (next: 'T) -> bool,
    ?name: string
    ): Accessor<'T>

Creates a readonly that only notifies downstream changes when the browser is idle.

createReaction

let createReaction(
    onInvalidate: unit -> unit
    ): (unit -> unit) -> unit

Sometimes it is useful to separate tracking from re-execution. This primitive registers a side-effect that is run the first time the expression wrapped by the returned tracking is notified of a change.

createRenderEffect

let createRenderEffect<'T>(
    fn: 'T -> 'T,
    ?value: 'T
    ): unit

A render effect is a computation similar to a regular effect, but differs in when solid-js schedules the first execution of the effect function.

While createEffect waits for the current rendering phase to be complete, createRenderEffect immediately calls the function. Thus the effect runs as DOM elements are being created and updated, but possibly before specific elements of interest have been created, and probably before those elements have been mounted.

In particular, refs will not be set before the initial effect call.

createSelector

let createSelector<'T, 'U>(
    source: unit -> 'T,
    ?fn: 'U -> 'T -> bool
    ): 'U -> bool

Creates a parameterised derived boolean signal selector(key) that indicates whether key is equal to the current value of the source signal.

These signals are optimised to notify each subscriber only when their key starts or stops matching the reactive source value (instead of every time key changes).

If you have n different subscribers with different keys, and the source value changes from a to b, then instead of all n subscribers updating, at most two subscribers will update:

The signal with key a will change to false.

The signal with key b will change to true.

Thus it reduces from n updates to 2 updates.

Useful for defining the selection state of several selectable elements.

mapArray

let mapArray<'T, 'U>(
    source: Accessor<'T[]>,
    fn: 'T -> Accessor<int> -> 'U
    ): Accessor<'U[]>

Reactive map helpers that caches each item by reference to avoid unnecessary recomputations. It only runs the mapping function once per value, and then moves or removes it as needed.

The index argument is a signal. The map function itself is not tracking.

indexArray

let indexArray<'T, 'U>(
    source: Accessor<'T[]>,
    fn: Accessor<'T> -> int -> 'U
    ): Accessor<'U[]>

Reactive helper that maps by index, similar to mapArray, but uses the index of the item in the array as the key for the mapping function.

This is useful when you want to map over an array and use the index as a key for each item, such as when rendering a list of items with unique keys.