Module: fiber
Type Aliases
CreateElementFunction
Ƭ CreateElementFunction<T>: (type: keyof HTMLElementTagNameMap | (props?: Record<string, unknown>) => T, props: Props | null, ...children: (T | Primitive)[]) => T
Type parameters
| Name | Type |
|---|---|
T | Fiber |
Type declaration
▸ (type, props, ...children): T
A function which creates elements from a type, props and children.
Can be used with SJDON, but also standards like JSX.
It is in the same format as the React.createElement function so it could possibly
be interchanged. But note that the typings don't match exactly,
e.g., React.createElement can't handle all values of Props.
Parameters
| Name | Type | Description |
|---|---|---|
type | keyof HTMLElementTagNameMap | (props?: Record<string, unknown>) => T | The type can either be a HTML tag or a function, which returns an element. |
props | Props | null | The props of the element. If JSX is used instead of SJDON, it has to be made sure that the "special props" like style or key overlap enough with the Props. This should be the case for the properties style and key, but is not guaranteed for all props. To provide basic functionality, also JSX on<Event> event handlers are supported. |
...children | (T | Primitive)[] | The children of the element. |
Returns
T
The generated element.
Defined in
Fiber
Ƭ Fiber: StaticFiber | FunctionalFiber
A Fiber can be either a StaticFiber or a FunctionalFiber.
Defined in
FiberFunction
Ƭ FiberFunction: (props?: Props) => Fiber
Type declaration
▸ (props?): Fiber
The FiberFunction of a FunctionalFiber, which returns a Fiber.
Parameters
| Name | Type |
|---|---|
props? | Props |
Returns
Defined in
FunctionalFiber
Ƭ FunctionalFiber: { fiberFunction: FiberFunction ; functionProps: Readonly<Props> ; memorizedStates: unknown[] } & Partial<StaticFiber>
A FunctionalFiber represents an element, which is generated by a function call.
This generator-function is stored in the property fiberFunction and when the component
is re-rendered, the fiberFunction is called with functionalProps as argument.
In the fiberFunction, hooks can be called, whose values are stored in the memorizedStates array.
StaticFiber Properties
A FunctionalFiber contains all properties of a StaticFiber, but only as optionals.
The properties type, props and children, which define a StaticFiber,
are only assigned when the component is unwrapped i.e., its fiberFunction is called.
This happens during rendering, when the fiberFunction is called. The returned StaticFiber
will be merged into the FunctionalFiber and provide these three properties.
Defined in
Props
Ƭ Props: { children?: never ; key?: string | number | null ; style?: StyleProp } & Partial<Omit<HTMLElement, "style" | "children">> & Record<string, unknown>
The Props which a SuiWeb Fiber expects.
Defined in
StaticFiber
Ƭ StaticFiber: Object
A StaticFiber represents a static element in the DOM. It does not contain
a function and thus can't use hooks, so it will never trigger a re-render.
It is completely defined by its type, props and children.
Its domNode will be assigned when it is rendered to the DOM.
Type declaration
| Name | Type | Description |
|---|---|---|
children | Map<string, Fiber> | The children of the fiber are stored in a map where every child has a unique key. If no key is provided in the props of the corresponding child, a default key is used. |
domNode? | HTMLElement | Text | The reference to the DOM node which this fiber represents. Is only set when the fiber is rendered. |
props | Readonly<Props> | The props of the static fiber. These will be added to them DOM node when it is rendered. There are special props like key which serve their custom purpose and are not added to the DOM node. See isNormalProp |
type | StaticFiberType | The type of the static fiber. It is either a html tag or a custom tag for text or placeholder nodes. |
Defined in
StaticFiberType
Ƭ StaticFiberType: keyof HTMLElementTagNameMap | "TEXT_NODE" | "PLACEHOLDER_NODE"
The possible type of a StaticFiber.
Fibers with type TEXT_NODE or PLACEHOLDER_NODE will not be rendered
to the dom directly, but are treated specially instead.
Defined in
StyleProp
Ƭ StyleProp: string | Partial<CSSStyleDeclaration> | Partial<CSSStyleDeclaration>[]
The StyleProp is usally passed as the style property of the props.
It can either be:
- a CSS string which is set directly to style attribute.
- an object containing CSS properties in camelCase.
- an array of objects containing CSS properties in camcelCase.
Defined in
Functions
createElement
▸ createElement(type, props, ...children): Fiber
The SuiWeb implementation of the generic CreateElementFunction, which creates a Fiber.
Parameters
| Name | Type | Description |
|---|---|---|
type | keyof HTMLElementTagNameMap | (props?: Record<string, unknown>) => Fiber | If the type is a HTML tag, a StaticFiber is created. If it's a function, a FunctionalFiber is created. |
props | null | Props | The props of the element. |
...children | (Primitive | Fiber)[] | The children of the element. |
Returns
The created Fiber, either a StaticFiber or a FunctionalFiber.
Defined in
isFunctionalFiber
▸ isFunctionalFiber(object): object is FunctionalFiber
Determines if an object is of type FunctionalFiber.
Parameters
| Name | Type | Description |
|---|---|---|
object | unknown | The object to check. |
Returns
object is FunctionalFiber
true if the object is of type FunctionalFiber.
Defined in
isNormalProp
▸ isNormalProp(propName): boolean
Determines if the given propName is a normal prop which should be directly added to
the DOM node, or if it serves a custom purpose.
Currently there are three special props, namely children, style and key.
Parameters
| Name | Type | Description |
|---|---|---|
propName | string | The name of the prop to check. |
Returns
boolean
true if the given prop is a normal prop.
Defined in
isStaticFiber
▸ isStaticFiber(object): object is StaticFiber
Determines if an object is of type StaticFiber.
Parameters
| Name | Type | Description |
|---|---|---|
object | unknown | The object to check. |
Returns
object is StaticFiber
true if the object is of type StaticFiber.