Components

Basic Concepts

Components are the building blocks of Jet.

They can be small and reusable, or large and nested like an app structure.
You create components with the com() function:

com({
  name: 'my-content',
  data: { title: 'Welcome!},
  tpl() {
    return `<h1>{{title }}</h1>`;
  }
});

Component Main Properties

It’s a quick guede, some special properties are discribed in separate articles

name

Defines the custom tag name (e.g. my-app).
Usege in htnl or inside another component:

<my-component></my-component>

data

An object of reactive properties.
Each value becomes this.key inside the component.

data: { title: 'My App' } // → this.title

tpl

The component’s template – it’s a main property where you render component’s code. Click here for more details

methods

Functions used inside your component.
You can call them with this.methodName().

Component Lifecycle

You can add any logic of componet loading(It depends at the what) using any of properties

Add any example

Note: All Lifecycle properties should be a function
Add any example

Component Types

Jet.Js has component types:

1. General
2. Special components, which are:

• Components with slots
• Wrap Components

General is most used, so no sense to describe them here as all documentation about it.

Special componets are useful when you want to add any outside data, for example in dynamic php file.

/////example

Components with slots

Jet.jscan receive dynamic content through property slots: true or slots: array . This lets you insert content into your components

There are two modes for using slots:

1. Named Slot – Object Mode

Use property slots: true, in your compoment.
Add slot elements with the `name attribute to create an object where each key is the slot

Example:

<my-card>
    <slot name="title">Hello!</slot>
    <slot name="content">This is the content.</slot>
</my-card>

Jet automatically creates properties by model ‘this.slots.slot_name’ which you can use in your component.

com({
    name: 'my-card',
    slots: true,
    tpl() {
        return html`
            <h1>{{slots.title}}</h1>
            <p>{{slots.content}}</p>
        `;
    },
    mount() {
        console.log(this.slots);
        // → { title: 'Hello!', content: 'This is the content.' }
    }
});

2. Array Slot Mode

You should add property slots: 'array', in your compoment.
If you set slots: ‘array’, Jet will treat every <slot> inside your component as an item in an array.

There

A. Simple strings (default behavior):

<faq-section>
    <slot>Question 1</slot>
    <slot>Question 2</slot>
</faq-section>

Component code

com({
    name: 'faq-section',
    slots: 'array',
    tpl() {
        return html`
            <ul>
                <template j-for="slots">
                    <li>[e]</li>
                </template>
            </ul>
        `;
    }
});

Result:

//live example