Component definition

Components allow us to encapsulate functionality into an independent, isolated and reusable HTML element. This enable developers to split their app and UI into multiple chunks, as opposed to a big, intricate and interdependant whole.

Defining a Component

A component is simply a function. A function receiving a params object as sole argument, a function not expected to return anything.

Here's an example of the most minimal component that could be created:

export default () => {
    console.log('I am a component, whoot whoot!');
}

To help TypeScript users and provide better autocompletion, components can be wrapped in a defineComponent helper function:

import { defineComponent } from '@boyojs/boyo-core';

export default defineComponent(() => {
    console.log('I am a component, whoot whoot!');
});

Note that the defineComponent helper function does nothing more than return the closure that is passed in.

Component params

As stated above the component will receive an object as sole argument.

Here's a list of all the object's properties:

• app: The application instance (as returned by createApp) the component has been registered on.
• key: A uniquely generated string identifier for the given component instance.
• name: The name the component has been registered as.
• el: The HTML element the component is being mounted on.
• data: Null or the JSON.parse'd result of what was given to the o-data directive. More on o-data later.

Here's a minimal example of how the component params can be used:

import { defineComponent } from '@boyojs/boyo-core';

export default defineComponent(({ app, key, name, el, data }) => {
    console.log({ app, key, name, el, data });
});

Here's a simplified version of the component's signature:

type ComponentParams = {
    get app(): App;
    get key(): string;
    get name(): string;
    get el(): BoyoElement;
    get data(): unknown;
};

type ComponentCallback = (params: ComponentParams) => void | Promise<void>;