core/components.ts

Documentation of Weblabs Components

Brief

This docs section will follow a generic style, since all the functions of this file are identical and returns a specific WebLabs Element corelating to native HTML Elements.

export function <GenericHTMLComponent>(...children: WebLabsChild[]): WebLabsElement

Where the GenericHTMLComponent is all the active and under used HTML Components.

If you want to learn more about each HTML component, which is identical in Weblabs too, you can visit this page: https://developer.mozilla.org/en-US/docs/Web/HTML/Element

Each of the generic component has some method, which we will cover one by one.

.id(id: string)

The method .id(id: string) takes a string and set the id to the given string

.class( ...classnames: string[] )

The method .class(...classnames: string[]) accept a list of string that are classnames to be assigned to the component

.dynamicClass<stateType>(...)

The method .dynamicClass<stateType>(value: () => string, dependency: state<stateType>) is simillar to .class() method, except it depends on a state to build the value function and dynamically update that very specific classname.

The functionality is same as .classList.replace() so all the exception applies here too.

.prop(name: string, value: string)

The method .prop(name: string, value: string) creates a new property or attribute of name name to the component/elemement we are working with

.dynamicProp<stateType>(...)

The method .dynamicProp<stateType>(name: string, value: Function, dependency: state<stateType>) is simillar to the .prop() method, except it depends on a state to re-create the value function and update dynamically the given property for a component

.event(name: string, callback: Function)

The method .event(name: string, callback: Function) is used to assign events to components. It is identical to .addEventListener() method and takes the very same arguments as it.

.ref(state: state<any>)

The method ref(state: state<any>) is used to store the reference to the component it was called on, that can be later modified without requiring the $() method, and it will break nothing, it will work just fine.

.onRemove(callback: Function)

The method .onRemove(callback: Function) is a lifecycle method meant to run the callback when the component is removed from the DOM.

This was the end of it! Thank you for staying this long!