Skip to main content

Namespace: FSComponent

The FS component namespace.

Namespaces

Functions

EmptyHandler

EmptyHandler(): void

An empty callback handler.

Returns

void

Defined in

src/sdk/components/FSComponent.ts:1190


Fragment

Fragment(props): DisplayChildren[] | undefined

A fragment of existing elements with no specific root.

Parameters

NameTypeDescription
propsComponentPropsThe fragment properties.

Returns

DisplayChildren[] | undefined

The fragment children.

Defined in

src/sdk/components/FSComponent.ts:333


addCssClassesToRecord

addCssClassesToRecord(record, classesToAdd, allowOverwrite?, filter?): ToggleableClassNameRecord

Adds CSS classes to a ToggleableClassNameRecord.

Parameters

NameTypeDefault valueDescription
recordToggleableClassNameRecordundefinedThe CSS class record to which to add the new classes. The record will be mutated as classes are added.
classesToAddstring | ToggleableClassNameRecord | Iterable<string>undefinedThe CSS classes to add to the record, as a space-delimited class string, an iterable of individual class names, or a ToggleableClassNameRecord.
allowOverwritebooleantrueWhether to allow the new classes to overwrite existing entries in the CSS class record. Defaults to true.
filter?(cssClass: string) => booleanundefinedA function which filters the classes to add. For each class, the function should return true if the class should be included in the record and false otherwise.

Returns

ToggleableClassNameRecord

The mutated CSS class record, after the new classes have been added.

Defined in

src/sdk/components/FSComponent.ts:962


bindCssClassSet

bindCssClassSet(setToBind, classesToSubscribe, reservedClasses): Subscription

Binds a MutableSubscribableSet to a subscribable set of CSS classes. CSS classes added to and removed from the subscribed set will also be added to and removed from the bound set, with the exception of a set of reserved classes. The presence or absence of any of the reserved classes in the bound set is not affected by the subscribed set.

Parameters

NameTypeDescription
setToBindMutableSubscribableSet<string>The set to bind.
classesToSubscribeSubscribableSet<string>A set of CSS classes to which to subscribe.
reservedClassesIterable<string>An iterable of reserved classes.

Returns

Subscription

The newly created subscription to the subscribed CSS class set.

Defined in

src/sdk/components/FSComponent.ts:828

bindCssClassSet(setToBind, classesToSubscribe, reservedClasses): Subscription[]

Binds a MutableSubscribableSet to a record of CSS classes. CSS classes toggled in the record will also be added to and removed from the bound set, with the exception of a set of reserved classes. The presence or absence of any of the reserved classes in the bound set is not affected by the subscribed record.

Parameters

NameTypeDescription
setToBindMutableSubscribableSet<string>The set to bind.
classesToSubscribeToggleableClassNameRecordA record of CSS classes to which to subscribe.
reservedClassesIterable<string>An iterable of reserved classes.

Returns

Subscription[]

The newly created subscriptions to the CSS class record.

Defined in

src/sdk/components/FSComponent.ts:842

bindCssClassSet(setToBind, classesToSubscribe, reservedClasses): Subscription | Subscription[]

Binds a MutableSubscribableSet to a subscribable set or a record of CSS classes. CSS classes toggled in subscribed set or record will also be added to and removed from the bound set, with the exception of a set of reserved classes. The presence or absence of any of the reserved classes in the bound set is not affected by the subscribed set or record.

Parameters

NameTypeDescription
setToBindMutableSubscribableSet<string>The set to bind.
classesToSubscribeToggleableClassNameRecord | SubscribableSet<string>A set or record of CSS classes to which to subscribe.
reservedClassesIterable<string>An iterable of reserved classes.

Returns

Subscription | Subscription[]

The newly created subscription to the CSS class set, or an array of new subscriptions to the CSS class record.

Defined in

src/sdk/components/FSComponent.ts:858


bindStyleMap

bindStyleMap(mapToBind, stylesToSubscribe, reservedStyles): Subscription

Binds a MutableSubscribableMap to a subscribable map of CSS styles. Modifications to the CSS styles in the subscribed map will be reflected in the bound map, with the exception of a set of reserved styles. The values of any of the reserved styles in the bound map is not affected by the subscribed map.

Parameters

NameTypeDescription
mapToBindMutableSubscribableMap<string, string>The map to bind.
stylesToSubscribeSubscribableMap<string, string>A key-value map of CSS styles to which to subscribe.
reservedStylesIterable<string>An iterable of reserved styles.

Returns

Subscription

The newly created subscription to the subscribed CSS style map.

Defined in

src/sdk/components/FSComponent.ts:1003

bindStyleMap(mapToBind, stylesToSubscribe, reservedStyles): Subscription

Binds a MutableSubscribableMap to an ObjectSubject of CSS styles. Modifications to the CSS styles in the subject will be reflected in the bound map, with the exception of a set of reserved styles. The values of any of the reserved styles in the bound map is not affected by the subscribed subject.

Parameters

NameTypeDescription
mapToBindMutableSubscribableMap<string, string>The map to bind.
stylesToSubscribeObjectSubject<Record<string, any>>An ObjectSubject of CSS styles to which to subscribe.
reservedStylesIterable<string>An iterable of reserved styles.

Returns

Subscription

The newly created subscription to the CSS style ObjectSubject.

Defined in

src/sdk/components/FSComponent.ts:1017

bindStyleMap(mapToBind, stylesToSubscribe, reservedStyles): Subscription[]

Binds a MutableSubscribableMap to a record of CSS styles. Modifications to the CSS styles in the record will be reflected in the bound map, with the exception of a set of reserved styles. The values of any of the reserved styles in the bound map is not affected by the subscribed record.

Parameters

NameTypeDescription
mapToBindMutableSubscribableMap<string, string>The map to bind.
stylesToSubscribeStyleRecordA record of CSS styles to which to subscribe.
reservedStylesIterable<string>An iterable of reserved styles.

Returns

Subscription[]

The newly created subscriptions to the CSS style record.

Defined in

src/sdk/components/FSComponent.ts:1031

bindStyleMap(mapToBind, stylesToSubscribe, reservedStyles): Subscription | Subscription[]

Binds a MutableSubscribableSet to a subscribable set or a record of CSS classes. CSS classes toggled in subscribed set or record will also be added to and removed from the bound set, with the exception of a set of reserved classes. The presence or absence of any of the reserved classes in the bound set is not affected by the subscribed set or record.

Parameters

NameTypeDescription
mapToBindMutableSubscribableMap<string, string>The set to bind.
stylesToSubscribeStyleRecord | SubscribableMap<string, string> | ObjectSubject<Record<string, any>>A set or record of CSS classes to which to subscribe.
reservedStylesIterable<string>An iterable of reserved classes.

Returns

Subscription | Subscription[]

The newly created subscription to the CSS class set, or an array of new subscriptions to the CSS class record.

Defined in

src/sdk/components/FSComponent.ts:1047


buildComponent

buildComponent<T, P>(type, props, ...children): VNode | null

Builds a JSX based FSComponent.

Type parameters

NameType
Textends "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "search" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "svg" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | DisplayComponentFactory<P, []> | FragmentFactory
Pextends ComponentProps

Parameters

NameTypeDescription
typeTThe DOM element tag that will be built.
propsnull | PThe properties to apply to the DOM element.
...childrenDisplayChildren[]Any children of this DOM element.

Returns

VNode | null

The JSX VNode for the component or element.

Defined in

src/sdk/components/FSComponent.ts:345


createChildNodes

createChildNodes(parent, children): VNode[] | null

Creates the collection of child VNodes.

Parameters

NameTypeDescription
parentVNodeThe parent VNode.
childrenDisplayChildren[]The JSX children to convert to nodes.

Returns

VNode[] | null

A collection of child VNodes.

Defined in

src/sdk/components/FSComponent.ts:522


createContext

createContext<T>(defaultValue): Context<T>

Creates a new context to hold data for passing to child components.

Type parameters

Name
T

Parameters

NameTypeDescription
defaultValueTThe default value of this context.

Returns

Context<T>

A new context.

Defined in

src/sdk/components/FSComponent.ts:774


createRef

createRef<T>(): NodeReference<T>

Creates a component or element node reference.

Type parameters

NameType
Textends HTMLElement | SVGElement | DisplayComponent<any, any>

Returns

NodeReference<T>

A new component or element node reference.

Defined in

src/sdk/components/FSComponent.ts:765


createStaticContentNode

createStaticContentNode(content): VNode

Creates a static content VNode.

Parameters

NameTypeDescription
contentstring | numberThe content to create a node for.

Returns

VNode

A static content VNode.

Defined in

src/sdk/components/FSComponent.ts:573


parseCssClassesFromString

parseCssClassesFromString(classString, filter?): string[]

Parses a space-delimited CSS class string into an array of CSS classes.

Parameters

NameTypeDescription
classStringstringA space-delimited CSS class string.
filter?(cssClass: string) => booleanA function which filters parsed classes. For each class, the function should return true if the class should be included in the output array and false otherwise.

Returns

string[]

An array of CSS classes derived from the specified CSS class string.

Defined in

src/sdk/components/FSComponent.ts:814


remove

remove(element): void

Remove a previously rendered element. Currently, this is just a simple wrapper so that all of our high-level "component maniuplation" state is kept in the FSComponent API, but it's not doing anything other than a simple remove() on the element. This can probably be enhanced.

Parameters

NameTypeDescription
elementnull | HTMLElement | SVGElementThe element to remove.

Returns

void

Defined in

src/sdk/components/FSComponent.ts:755


render

render(node, element, position?): void

Renders a VNode to a DOM element.

Parameters

NameTypeDefault valueDescription
nodeVNodeundefinedThe node to render.
elementnull | HTMLElement | SVGElementundefinedThe DOM element to render to.
positionRenderPositionRenderPosition.InThe RenderPosition to put the item in.

Returns

void

Defined in

src/sdk/components/FSComponent.ts:587


renderAfter

renderAfter(node, element): void

Render a node after a DOM element.

Parameters

NameTypeDescription
nodeVNodeThe node to render.
elementnull | HTMLElement | SVGElementThe element to render after.

Returns

void

Defined in

src/sdk/components/FSComponent.ts:744


renderBefore

renderBefore(node, element): void

Render a node before a DOM element.

Parameters

NameTypeDescription
nodeVNodeThe node to render.
elementnull | HTMLElement | SVGElementThe element to render boeore.

Returns

void

Defined in

src/sdk/components/FSComponent.ts:735


shallowDestroy

shallowDestroy(root): void

Traverses a VNode tree in depth-first order and destroys the first DisplayComponent encountered in each branch of the tree.

Parameters

NameTypeDescription
rootVNodeThe root of the tree to traverse.

Returns

void

Defined in

src/sdk/components/FSComponent.ts:1176


visitNodes

visitNodes(node, visitor): void

Visits VNodes with a supplied visitor function within the given children tree.

Parameters

NameTypeDescription
nodeVNodeThe node to visit.
visitor(node: VNode) => booleanThe visitor function to inspect VNodes with. Return true if the search should stop at the visited node and not proceed any further down the node's children.

Returns

void

Defined in

src/sdk/components/FSComponent.ts:784