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
| Name | Type | Description |
|---|---|---|
props | ComponentProps | The 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
| Name | Type | Default value | Description |
|---|---|---|---|
record | ToggleableClassNameRecord | undefined | The CSS class record to which to add the new classes. The record will be mutated as classes are added. |
classesToAdd | string | ToggleableClassNameRecord | Iterable<string> | undefined | The CSS classes to add to the record, as a space-delimited class string, an iterable of individual class names, or a ToggleableClassNameRecord. |
allowOverwrite | boolean | true | Whether to allow the new classes to overwrite existing entries in the CSS class record. Defaults to true. |
filter? | (cssClass: string) => boolean | undefined | A 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
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
| Name | Type | Description |
|---|---|---|
setToBind | MutableSubscribableSet<string> | The set to bind. |
classesToSubscribe | SubscribableSet<string> | A set of CSS classes to which to subscribe. |
reservedClasses | Iterable<string> | An iterable of reserved classes. |
Returns
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
| Name | Type | Description |
|---|---|---|
setToBind | MutableSubscribableSet<string> | The set to bind. |
classesToSubscribe | ToggleableClassNameRecord | A record of CSS classes to which to subscribe. |
reservedClasses | Iterable<string> | An iterable of reserved classes. |
Returns
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
| Name | Type | Description |
|---|---|---|
setToBind | MutableSubscribableSet<string> | The set to bind. |
classesToSubscribe | ToggleableClassNameRecord | SubscribableSet<string> | A set or record of CSS classes to which to subscribe. |
reservedClasses | Iterable<string> | An iterable of reserved classes. |
Returns
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
| Name | Type | Description |
|---|---|---|
mapToBind | MutableSubscribableMap<string, string> | The map to bind. |
stylesToSubscribe | SubscribableMap<string, string> | A key-value map of CSS styles to which to subscribe. |
reservedStyles | Iterable<string> | An iterable of reserved styles. |
Returns
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
| Name | Type | Description |
|---|---|---|
mapToBind | MutableSubscribableMap<string, string> | The map to bind. |
stylesToSubscribe | ObjectSubject<Record<string, any>> | An ObjectSubject of CSS styles to which to subscribe. |
reservedStyles | Iterable<string> | An iterable of reserved styles. |
Returns
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
| Name | Type | Description |
|---|---|---|
mapToBind | MutableSubscribableMap<string, string> | The map to bind. |
stylesToSubscribe | StyleRecord | A record of CSS styles to which to subscribe. |
reservedStyles | Iterable<string> | An iterable of reserved styles. |
Returns
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
| Name | Type | Description |
|---|---|---|
mapToBind | MutableSubscribableMap<string, string> | The set to bind. |
stylesToSubscribe | StyleRecord | SubscribableMap<string, string> | ObjectSubject<Record<string, any>> | A set or record of CSS classes to which to subscribe. |
reservedStyles | Iterable<string> | An iterable of reserved classes. |
Returns
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
| Name | Type |
|---|---|
T | extends "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 |
P | extends ComponentProps |
Parameters
| Name | Type | Description |
|---|---|---|
type | T | The DOM element tag that will be built. |
props | null | P | The properties to apply to the DOM element. |
...children | DisplayChildren[] | 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
| Name | Type | Description |
|---|---|---|
parent | VNode | The parent VNode. |
children | DisplayChildren[] | 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
| Name | Type | Description |
|---|---|---|
defaultValue | T | The 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
| Name | Type |
|---|---|
T | extends HTMLElement | SVGElement | DisplayComponent<any, any> |
Returns
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
| Name | Type | Description |
|---|---|---|
content | string | number | The content to create a node for. |
Returns
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
| Name | Type | Description |
|---|---|---|
classString | string | A space-delimited CSS class string. |
filter? | (cssClass: string) => boolean | A 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
| Name | Type | Description |
|---|---|---|
element | null | HTMLElement | SVGElement | The 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
| Name | Type | Default value | Description |
|---|---|---|---|
node | VNode | undefined | The node to render. |
element | null | HTMLElement | SVGElement | undefined | The DOM element to render to. |
position | RenderPosition | RenderPosition.In | The 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
| Name | Type | Description |
|---|---|---|
node | VNode | The node to render. |
element | null | HTMLElement | SVGElement | The 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
| Name | Type | Description |
|---|---|---|
node | VNode | The node to render. |
element | null | HTMLElement | SVGElement | The 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
| Name | Type | Description |
|---|---|---|
root | VNode | The 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
| Name | Type | Description |
|---|---|---|
node | VNode | The node to visit. |
visitor | (node: VNode) => boolean | The 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