These docs describe the main branch, including unreleased changes. Read the 0.6.0 docs.

`@opentui/solid`

Every export of @opentui/solid in the main-branch source, from its type declarations. A version names the release that added an export after the module's first release.

Functions#

function _render(code: () => DomNode, root: DomNode): () => void: Added in 0.6.0Solid
function createDynamic<T extends ValidComponent>(component: () => T | undefined, props: ComponentProps<T>): JSX.Element: Solid
function createScrollbackWriter(node: SolidScrollbackNode, options?: SolidScrollbackWriterOptions): ScrollbackWriter: Renderer
function createSlot<TSlots extends SlotMap, TContext extends PluginContext = PluginContext>(registry: SlotRegistry<JSX.Element, TSlots, TContext>, options?: SolidSlotOptions): SolidSlotComponent<TSlots>: Solid
function createSlotNode(): SlotRenderable: Solid
function createSolidSlotRegistry<TSlots extends SlotMap, TContext extends PluginContext = PluginContext>(renderer: CliRenderer, context: TContext, options?: SlotRegistryOptions): SlotRegistry<JSX.Element, TSlots, TContext>: Solid
function Dynamic<T extends ValidComponent>(props: DynamicProps<T>): JSX.Element: Solid
function extend<T extends ComponentCatalogue>(objects: T): void: Solid
function getComponentCatalogue(): ComponentCatalogue: Solid
function Portal(props: { mount?: DomNode; ref?: (el: {}) => void; children: JSX.Element; }): JSX.Element: Solid
function removeNode(parent: DomNode, node: DomNode): void: Added in 0.6.0Solid
function Slot<TSlots extends SlotMap, TContext extends PluginContext = PluginContext, K extends keyof TSlots = keyof TSlots>(props: SolidSlotProps<TSlots, K, TContext>): JSX.Element: Solid
function writeSolidToScrollback(renderer: CliRenderer, node: SolidScrollbackNode, options?: SolidScrollbackWriterOptions): void: Renderer

Classes#

class BoldSpanRenderable extends TextModifierRenderableconstructor BoldSpanRenderable(options: any)

Solid

class ItalicSpanRenderable extends TextModifierRenderableconstructor ItalicSpanRenderable(options: any)

Solid

class LayoutSlotRenderable extends Renderableconstructor LayoutSlotRenderable(id: string, parent: SlotRenderable, layoutParent: Renderable)

Solid

method LayoutSlotRenderable.disposeWithoutSlotCascade(): void
method LayoutSlotRenderable.isCompatibleWith(layoutParent?: BaseRenderable): boolean
protected method LayoutSlotRenderable.destroySelf(): void0.6.0

class LineBreakRenderable extends SpanRenderableconstructor LineBreakRenderable(_ctx: RenderContext | null, options: TextNodeOptions)

Solid

method LineBreakRenderable.add(): number

class LinkRenderable extends SpanRenderableconstructor LinkRenderable(_ctx: RenderContext | null, options: LinkOptions)

Solid

class SlotRenderable extends SlotBaseRenderableconstructor SlotRenderable(id: string)

Solid

method SlotRenderable.destroy(): void
method SlotRenderable.didDestroySlotChild(child: BaseRenderable): void0.5.15
method SlotRenderable.didRemoveSlotChild(parent: BaseRenderable, child: BaseRenderable): void
method SlotRenderable.getSlotChild(parent: BaseRenderable): LayoutSlotRenderable | TextSlotRenderable
method SlotRenderable.getSlotChildForRemoval(parent: BaseRenderable): BaseRenderable | undefined
protected property SlotRenderable.destroyed: boolean
readonly property SlotRenderable.layoutNode: LayoutSlotRenderable | undefined
readonly property SlotRenderable.textNode: TextSlotRenderable | undefined

class TextSlotRenderable extends TextNodeRenderableconstructor TextSlotRenderable(id: string, parent?: SlotRenderable)

Solid

method TextSlotRenderable.destroy(): void
method TextSlotRenderable.destroyRecursively(): void0.6.0
method TextSlotRenderable.detachFromSlot(): void
method TextSlotRenderable.disposeWithoutSlotCascade(): void
protected property TextSlotRenderable.destroyed: boolean
protected property TextSlotRenderable.slotParent?: SlotRenderable

class UnderlineSpanRenderable extends TextModifierRenderableconstructor UnderlineSpanRenderable(options: any)

Solid

Interfaces#

interface LinkOptions extends TextNodeOptions

Solid

property LinkOptions.href: string

interface SolidScrollbackWriterOptions

Renderer

property SolidScrollbackWriterOptions.height?: number
property SolidScrollbackWriterOptions.rowColumns?: number
property SolidScrollbackWriterOptions.startOnNewLine?: boolean
property SolidScrollbackWriterOptions.trailingNewline?: boolean
property SolidScrollbackWriterOptions.width?: number

interface SolidSlotOptions

Solid

property SolidSlotOptions.pluginFailurePlaceholder?: (failure: PluginErrorEvent) => JSX.Element

interface UseKeyboardOptions

Solid

property UseKeyboardOptions.release?: boolean

Types#

type AsciiFontProps = ComponentProps<ASCIIFontOptions, ASCIIFontRenderable>: Overview
type BoxProps = ComponentProps<ContainerProps<BoxOptions>, BoxRenderable> & { focused?: boolean; }: Overview
type CodeProps = ComponentProps<CodeOptions, CodeRenderable>: Overview
type DomNode = BaseRenderable: Solid
type DynamicProps<T extends ValidComponent, P = ComponentProps<T>> = { [K in keyof P]: P[K]; } & { component: T | undefined; }: Solid
type ElementProps<TRenderable = unknown> = { ref?: Ref<TRenderable>; [eventName: `on:${string}`]: ((...args: any[]) => void) | undefined; }: Overview
type ExtendedComponentProps<TConstructor extends RenderableConstructor, TOptions = ExtractRenderableOptions<TConstructor>> = TOptions & { children?: JSX.Element; style?: Partial<Omit<TOptions, GetNonStyledProperties<TConstructor>>>; } & ElementProps<ExtractRenderable<TConstructor>>: Solid
type ExtendedIntrinsicElements<TComponentCatalogue extends Record<string, RenderableConstructor>> = { [TComponentName in keyof TComponentCatalogue]: ExtendedComponentProps<TComponentCatalogue[TComponentName]>; }: Solid
type GetNonStyledProperties<TConstructor> = TConstructor extends RenderableConstructor<TextRenderable> ? NonStyledProps | "content" : TConstructor extends RenderableConstructor<BoxRenderable> ? NonStyledProps | "title" | "bottomTitle" : TConstructor extends RenderableConstructor<ASCIIFontRenderable> ? NonStyledProps | "text" | "selectable" : TConstructor extends RenderableConstructor<InputRenderable> ? NonStyledProps | "minLength" | "maxLength" | "placeholder" | "value" : TConstructor extends RenderableConstructor<CodeRenderable> ? NonStyledProps | "content" | "filetype" | "syntaxStyle" | "treeSitterClient" : TConstructor extends RenderableConstructor<MarkdownRenderable> ? NonStyledProps | "content" | "syntaxStyle" | "treeSitterClient" | "conceal" | "renderNode" : TConstructor extends RenderableConstructor<ImageRenderable> ? NonStyledProps | "source" : NonStyledProps: Overview
type ImageProps = ComponentProps<ImageRenderableOptions, ImageRenderable>: Added in 0.5.0Overview
type InputProps = ComponentProps<InputRenderableOptions, InputRenderable> & { focused?: boolean; onInput?: (value: string) => void; onChange?: (value: string) => void; onSubmit?: (value: string) => void; }: Overview
type LinkProps = SpanProps & { href: string; }: Overview
type MarkdownProps = ComponentProps<MarkdownOptions, MarkdownRenderable>: Overview
type NonStyledProps = "id" | "buffered" | "live" | "enableLayout" | "selectable" | "renderAfter" | "renderBefore" | `on${string}`: Overview
type RenderableConstructor<TRenderable extends BaseRenderable = BaseRenderable> = new (ctx: RenderContext, options: any) => TRenderable: Solid
type ScrollBoxProps = ComponentProps<ContainerProps<ScrollBoxOptions>, ScrollBoxRenderable> & { focused?: boolean; stickyScroll?: boolean; stickyStart?: "bottom" | "top" | "left" | "right"; }: Overview
type SelectProps = ComponentProps<SelectRenderableOptions, SelectRenderable> & { focused?: boolean; onChange?: (index: number, option: SelectOption | null) => void; onSelect?: (index: number, option: SelectOption | null) => void; }: Overview
type SolidBoundSlotProps<TSlots extends SlotMap, K extends keyof TSlots> = { name: K; mode?: SlotMode; children?: JSX.Element; } & TSlots[K]: Solid
type SolidPlugin<TSlots extends SlotMap, TContext extends PluginContext = PluginContext> = Plugin<JSX.Element, TSlots, TContext>: Solid
type SolidRegistrySlotComponent<TSlots extends SlotMap, TContext extends PluginContext = PluginContext> = <K extends keyof TSlots>(props: SolidSlotProps<TSlots, K, TContext>) => JSX.Element: Solid
type SolidScrollbackNode = (ctx: ScrollbackRenderContext) => JSX.Element: Renderer
type SolidSlotComponent<TSlots extends SlotMap> = <K extends keyof TSlots>(props: SolidBoundSlotProps<TSlots, K>) => JSX.Element: Solid
type SolidSlotProps<TSlots extends SlotMap, K extends keyof TSlots, TContext extends PluginContext = PluginContext> = { registry: SlotRegistry<JSX.Element, TSlots, TContext>; name: K; mode?: SlotMode; children?: JSX.Element; pluginFailurePlaceholder?: (failure: PluginErrorEvent) => JSX.Element; } & TSlots[K]: Solid
type SpanProps = ComponentProps<{}, TextNodeRenderable> & { children?: TextChildren | Array<TextChildren>; }: Overview
type TabSelectProps = ComponentProps<TabSelectRenderableOptions, TabSelectRenderable> & { focused?: boolean; onChange?: (index: number, option: TabSelectOption | null) => void; onSelect?: (index: number, option: TabSelectOption | null) => void; }: Overview
type TextareaProps = ComponentProps<TextareaOptions, TextareaRenderable> & { focused?: boolean; onSubmit?: () => void; onContentChange?: (value: string) => void; onCursorChange?: (value: { line: number; visualColumn: number; }) => void; onKeyDown?: (event: KeyEvent) => void; onKeyPress?: (event: KeyEvent) => void; }: Overview
type TextNodeKey = (typeof textNodeKeys)[number]: Solid
type TextProps = ComponentProps<TextOptions, TextRenderable> & { children?: TextChildren | Array<TextChildren>; }: Overview
type TimeToFirstDrawProps = ExtendedComponentProps<typeof TimeToFirstDrawRenderable>: TimeToFirstDraw

Constants and variables#

const baseComponents: { box: typeof BoxRenderable; text: typeof TextRenderable; input: typeof InputRenderable; select: typeof SelectRenderable; textarea: typeof TextareaRenderable; ascii_font: typeof ASCIIFontRenderable; tab_select: typeof TabSelectRenderable; scrollbox: typeof ScrollBoxRenderable; code: typeof CodeRenderable; diff: typeof DiffRenderable; line_number: typeof LineNumberRenderable; markdown: typeof MarkdownRenderable; image: typeof ImageRenderable; span: typeof SpanRenderable; strong: typeof BoldSpanRenderable; b: typeof BoldSpanRenderable; em: typeof ItalicSpanRenderable; i: typeof ItalicSpanRenderable; u: typeof UnderlineSpanRenderable; br: typeof LineBreakRenderable; a: typeof LinkRenderable; }: Solid
const componentCatalogue: ComponentCatalogue: Solid
const createComponent: <T>(Comp: (props: T) => unknown, props: T) => BaseRenderable: Solid
const createElement: (tag: string) => BaseRenderable: Solid
const createTextNode: (value: string) => BaseRenderable: Solid
const effect: <T>(fn: (prev?: T) => T, init?: T) => void: Solid
const insert: <T>(parent: any, accessor: T | (() => T), marker?: any | null, initial?: any) => BaseRenderable: Solid
const insertNode: (parent: BaseRenderable, node: BaseRenderable, anchor?: BaseRenderable | undefined) => void: Solid
const memo: <T>(fn: () => T, equal: boolean) => () => T: Solid
const mergeProps: (...sources: unknown[]) => unknown: Solid
const onBlur: (callback: () => void) => void: Solid
const onFocus: (callback: () => void) => void: Solid
const onResize: (callback: (width: number, height: number) => void) => void: Solid
const render: (node: () => JSX.Element, rendererOrConfig?: CliRenderer | CliRendererConfig) => Promise<void>: Solid
const RenderableContext: Context<(() => RenderContext) | undefined>: Added in 0.6.0Solid
const RendererContext: Context<CliRenderer | undefined>: Solid
const setProp: <T>(node: BaseRenderable, name: string, value: T, prev?: T | undefined) => T: Solid
const spread: <T>(node: any, accessor: (() => T) | T, skipChildren?: boolean) => void: Solid
const testRender: (node: () => JSX.Element, renderConfig?: TestRendererOptions) => Promise<TestRendererSetup>: Solid
const textNodeKeys: readonly [ "span", "b", "strong", "i", "em", "u", "a" ]: Solid
const TimeToFirstDraw: (props: TimeToFirstDrawProps) => any: TimeToFirstDraw
const use: <A, T>(fn: (element: BaseRenderable, arg: A) => T, element: BaseRenderable, arg: A) => T: Solid
const useKeyboard: (callback: (key: KeyEvent) => void, options?: UseKeyboardOptions) => void: Solid
deprecated const useKeyHandler: (callback: (key: KeyEvent) => void, options?: UseKeyboardOptions) => void: DeprecatedSolid
const usePaste: (callback: (event: PasteEvent) => void) => void: Solid
const useRenderer: () => CliRenderer: Solid
const useSelectionHandler: (callback: (selection: Selection) => void) => void: Solid
const useTerminalDimensions: () => Accessor<{ width: number; height: number; }>: Solid
const useTimeline: (options?: TimelineOptions) => Timeline: Solid

Namespaces and re-exports#

namespace JSX

Solid

interface JSX.ElementChildrenAttribute
interface JSX.IntrinsicElements extends ExtendedIntrinsicElements<OpenTUIComponents>
property JSX.ElementChildrenAttribute.children: {}
property JSX.IntrinsicElements.a: LinkProps
property JSX.IntrinsicElements.ascii_font: AsciiFontProps
property JSX.IntrinsicElements.b: SpanProps
property JSX.IntrinsicElements.box: BoxProps
property JSX.IntrinsicElements.br: {}
property JSX.IntrinsicElements.code: CodeProps
property JSX.IntrinsicElements.em: SpanProps
property JSX.IntrinsicElements.i: SpanProps
property JSX.IntrinsicElements.image: ImageProps0.5.0
property JSX.IntrinsicElements.input: InputProps
property JSX.IntrinsicElements.markdown: MarkdownProps
property JSX.IntrinsicElements.scrollbox: ScrollBoxProps
property JSX.IntrinsicElements.select: SelectProps
property JSX.IntrinsicElements.span: SpanProps
property JSX.IntrinsicElements.strong: SpanProps
property JSX.IntrinsicElements.tab_select: TabSelectProps
property JSX.IntrinsicElements.text: TextProps
property JSX.IntrinsicElements.textarea: TextareaProps
property JSX.IntrinsicElements.u: SpanProps
type JSX.Element = SolidJSX.Element

index OpenTUIComponents[componentName: string]: RenderableConstructorinterface OpenTUIComponents

Solid

property OpenTUIComponents.time_to_first_draw: typeof TimeToFirstDrawRenderable

reexport SlotMode from "@opentui/core"

Solid