Skip to main content

suiweb

Type Aliases​

CreateElementFunction​

Ƭ CreateElementFunction<T>: (type: keyof HTMLElementTagNameMap | (props?: Record<string, unknown>) => T, props: Props | null, ...children: (T | Primitive)[]) => T

Type parameters​

NameType
TFiber

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​
NameTypeDescription
typekeyof HTMLElementTagNameMap | (props?: Record<string, unknown>) => TThe type can either be a HTML tag or a function, which returns an element.
propsProps | nullThe 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.ts:171

Fiber​

Ƭ Fiber: StaticFiber | FunctionalFiber

A Fiber can be either a StaticFiber or a FunctionalFiber.

Defined in​

fiber.ts:6

FiberFunction​

Ƭ FiberFunction: (props?: Props) => Fiber

Type declaration​

▸ (props?): Fiber

The FiberFunction of a FunctionalFiber, which returns a Fiber.

Parameters​
NameType
props?Props
Returns​

Fiber

Defined in​

fiber.ts:97

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​

fiber.ts:73

Primitive​

Ƭ Primitive: string | number | bigint | boolean | symbol | null | undefined

Defined in​

utils.ts:1

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​

fiber.ts:117

SjdonElement​

Ƭ SjdonElement: [SjdonElementType, ...(SjdonElementOrPrimitive | Props)[]]

A SjdonElement is an array containing at least one element. The first element is of type SjdonElementType and specifies the type of the SjdonElement. The other elements are either children or props of the element. Chidren can be either a complete SjdonElement or a Primitive. Props are always an object of type Props.

Example

// a heading 1 with no content
const minimalElement: SjdonElement = ['h1']
// a div containing a text and a paragraph
const elementWithChildren: SjdonElement = ['div', 'Test', ['p', 'Hello World!']]
// a button with specified onclick props and a text child.
const elementWithProps: SjdonElement = [
  'button',
  { onclick: () => console.log('Button clicked!') },
  'Click me!'
]

Defined in​

sjdon.ts:49

SjdonElementFunction​

Ƭ SjdonElementFunction<T>: (props?: T & { children?: SjdonElementOrPrimitive[] }) => SjdonElement

Type parameters​

NameType
TRecord<string, unknown>

Type declaration​

▸ (props?): SjdonElement

A SjdonElementFunction takes in props as a parameter and returns a SjdonElement.

Parameters​
NameTypeDescription
props?T & { children?: SjdonElementOrPrimitive[] }The props of the element. Children are automatically passed via the reserved children property.
Returns​

SjdonElement

Defined in​

sjdon.ts:15

SjdonElementOrPrimitive​

Ƭ SjdonElementOrPrimitive: SjdonElement | Primitive

A SjdonElementOrPrimitive is either a SjdonElement or a Primitive.

Defined in​

sjdon.ts:27

SjdonElementType​

Ƭ SjdonElementType: keyof HTMLElementTagNameMap | SjdonElementFunction

The type of a SjdonElement, which is specified in the first element of the array. It can either be a HTML tag or a SjdonElementFunction.

Defined in​

sjdon.ts:9

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​

NameTypeDescription
childrenMap<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 | TextThe reference to the DOM node which this fiber represents. Is only set when the fiber is rendered.
propsReadonly<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
typeStaticFiberTypeThe type of the static fiber. It is either a html tag or a custom tag for text or placeholder nodes.

Defined in​

fiber.ts:14

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​

fiber.ts:43

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​

fiber.ts:144

Functions​

createElement​

▸ createElement(type, props, ...children): Fiber

The SuiWeb implementation of the generic CreateElementFunction, which creates a Fiber.

Parameters​

NameTypeDescription
typekeyof HTMLElementTagNameMap | (props?: Record<string, unknown>) => FiberIf the type is a HTML tag, a StaticFiber is created. If it's a function, a FunctionalFiber is created.
propsnull | PropsThe props of the element.
...children(Primitive | Fiber)[]The children of the element.

Returns​

Fiber

The created Fiber, either a StaticFiber or a FunctionalFiber.

Defined in​

fiber.ts:171

parseSjdon​

▸ parseSjdon<T>(param0, create): T

Parses a SjdonElement with all its children and creates a fiber tree. Uses the createElement function to create all fibers.

Type parameters​

Name
T

Parameters​

NameTypeDescription
param0SjdonElementThe SjdonElement which should be parsed.
createCreateElementFunction<T>The function which is used to create the elements. It works properly with the SuiWeb implementation createElement, but also other implementations, like React.createElement, could be used. Note, however, that this is only partially supported, as the typing don't match and the props are not fully compatible.

Returns​

T

The root element of the tree containing all children.

Defined in​

sjdon.ts:94

render​

▸ render(fiber, container): void

Renders the given fiber and its children to the DOM in the given container. Note that all children of the container will be removed from the DOM, before the fiber and its children are rendered.

Parameters​

NameTypeDescription
fiberFiberThe fiber which should be rendered.
containerHTMLElementThe container in which the fiber should be rendered.

Returns​

void

Defined in​

render.ts:15

useEffect​

▸ useEffect(action, dependencies?): void

The function useEffect can be used in a functional component to execute an action, after a component has been rendered. By specifying dependencies, calling the function can be further restricted, to only call action under specific contidtions.

Example

const Counter = () => {
    const [count, setCount] = useState(0)

    // `action` is called after every render.
    useEffect(() => console.log('Counter changed.')) // no dependencies defined

    // `action` is called after every render, if the value of `count`
    // changed since the last render.
    useEffect(() => console.log('Counter changed.'), [count]) // specific dependency defined

    // `action` is called only after the first render.
    useEffect(() => console.log('Counter changed.'), []) // empty array dependency

    return <button onClick={() => setCount(count + 1)}>{`Count: ${count}`}</button>
}

Parameters​

NameTypeDescription
action() => voidThe action to execute after rendering the component.
dependencies?unknown[]Defines the dependencies that decide on execution of action. action will only be called if any of the value in the dependencies has changed since the last render of the component. Pass an empty array ([]) to only run action on the first render. Pass undefined (or leave away the parameter) to run action on every render.

Returns​

void

Defined in​

hooks.ts:91

useState​

▸ useState<T>(initialValue): [T, (newValue: T) => void]

The function useState can be used inside a functional component to capture state between re-rerenders. State values should never be mutated directly, but always updated via the returned setState function (2nd element in the array). This will trigger a re-render of the FunctionalFiber and its subtree (children).

Example

const Counter = () => {
    const [count, setCount] = useState(0)
    return <button onClick={() => setCount(count + 1)}>{`Count: ${count}`}</button>
}

Type parameters​

Name
T

Parameters​

NameTypeDescription
initialValueTThe initial value the state should have.

Returns​

[T, (newValue: T) => void]

An array containing the state as the first element and the setState function as the second element.

Defined in​

hooks.ts:37