Components

Reusable JavaScript logic is encapsulated in components via ES6 classes. You can create your own Oblik components by simply extending the base component:

import { Component } from 'oblik'

class MyComponent extends Component {
    // component logic...
}

# Lifecycle

There are three hooks in a component's lifecycle:

  1. create - when the component's constructor function is run
  2. init - when all child components have been created and initialized
  3. destroy - when the component is no longer needed on the page

In your components, you use hooks like this:

class MyComponent extends Component {
    create () {
        console.log('created')
    }

    init () {
        console.log('initialized')
    }

    destroy () {
        console.log('destroyed')
    }
}

And when you create an instance of your component:

let instance = new MyComponent() // 'created'
instance.$init()                 // 'initialized'

// later...

instance.$destroy()              // 'destroyed'

When using the Watcher, the code above is obsolete since components are managed automatically. Learn more about the Watcher.

# Properties

In its constructor function, each component accepts the following arguments:

class MyComponent extends Component { ... }
class MyChildComponent extends Component { ... }

let parentInstance = new MyComponent(document.body)
let childInstance = new MyChildComponent(
    document.querySelector('.foo'), // element
    { number: 42, text: 'test' },   // options
    parentInstance                  // parent
)

# $element

Holds a reference to the DOM element that is bound to the component:

class MyComponent extends Component {
    create () {
        console.log(this.$element) // HTMLElement
    }
}

let el = document.querySelector('.my-element')
let instance = new MyComponent(el)
instance.$element // el

# $options

Configuration object that is passed to the component.

# $parent

Reference to the parent component, if there is one.

Note: This is a reference to the parent component, not the DOM element. To get the element, use $parent.$element.

# Static properties

Properties like $element are present on component instances (objects created with the new keyword). Static properties are part of the component definition itself (the class declaration). Read about classes on MDN.

# components

Defines subcomponents for a given component:

class MySubcomponent extends Component { }

class MyComponent extends Component {
    static components = {
        foo: MySubcomponent
    }
}

# defaults

An object with default options for component instances:

class MyComponent extends Component {
    static defaults = {
        foo: 'bar',
        num: 42
    }
}

Any options you pass to a component will be merged with the defaults. For example, this instance:

let instance = new MyComponent(element, {
    test: 'hello'
})

...will have the following $options:

{
    foo: 'bar',
    num: 42,
    test: 'hello'
}

# Child references

Whenever a child is added, the parent receives a new property that holds a reference to it. The property name is based on the registered name for the child:

class MyComponent extends Component {
    static components = {
        foo: MySubcomponent
    }

    init () {
        this.$foo // the child component
        this.$foo.$element // the child's DOM element
    }
}

If you want to have multiple child components of the same type, all you need to do is initialize the child reference property with an empty array:

class MyComponent extends Component {
    static components = {
        foo: MySubcomponent
    }

    create () {
        this.$foo = []
    }

    init () {
        this.$foo.forEach(...)
    }
}

The $foo array will be updated accordingly when child components are added/removed.

← Watcher Accordion →