rionite
    TypeScript icon, indicating that this package has built-in type declarations

    0.42.24 • Public • Published

    Rionite

    Реактивная обёртка над custom-elements.

    Установка

    npm install cellx rionite --save
    

    Пример

    <hello-user name="Matroskin"></hello-user>
    
    <script src="...">
    
    import { BaseComponent, Component, Param } from 'rionite';
    
    @Component({
        template: 'Hello, {paramName}!'
    })
    class HelloUser extends BaseComponent {
        @Param
    	paramName: string;
    
        connected() {
            // Сработает при появлении элемента `<hello-world>` в документе.
            // `this.element` — ссылка на появившийся элемент.
            // Отличное место для добавления обработчиков событий.
        },
    
        disconnected() {
            // Сработает при удалении элемента `<hello-world>` из документа.
            // Не забыть снять добавленные обработчики событий.
        }
    }
    
    </script>

    Элемент в приведённом примере отрендерится в следующий вид:

    <hello-user name="Matroskin" class="HelloUser">Hello, Matroskin!</hello-user>

    Имя компонента добавляется в css-класс элемента, это необходимо для наследования стилей — имя тега элемента у наследуемого компонента будет другим, но оба имени добавятся в css-класс элемента:

    <hello-super-user name="Matroskin" class="HelloUser HelloSuperUser">Hello, Matroskin!</hello-super-user>

    Таким образом стили элемента родительского компонента применятся и к элементу наследуемого компонента. В дальнейшем можно доопределить их:

    .HelloSuperUser {
        color: red;
    
        & .HelloUser__someInnerElement {
            font-width: bold;
        }
    }

    Стили элемента лучше назначать на css-класс элемента. На тег элемента обычно назначаются стили которые должны применяться к нему пока он не отрендерился, например, для скрытия передаваемого содержимого:

    <style>
    super-select {
        display: none;
    }
    
    .SuperSelect {
        display: inline-block;
    }
    </style>
    
    <super-select>
        <super-select-option>1</super-select-option>
        <super-select-option>2</super-select-option>
        <super-select-option>3</super-select-option>
    </super-select>

    Конструкции вида {name} — это привязки данных — биндинги. Они будут автоматически обновляться в разметке при изменении соответствующих свойств. Сами свойства для этого должно быть реактивным и создаваться с помощью cellx-а:

    <simple-counter></simple-counter>
    
    <script src="...">
    
    import { Observable } from 'cellx-decorators';
    import { BaseComponent, Component } from 'rionite';
    
    @Component({
        template: `
            div {
                'value: {value}'
            }
    
            button (on-click=_onButtonClick) {
                'value++'
            }
        `
    })
    class SimpleCounter extends BaseComponent {
        @Observable
    	value = 0;
    
        _onButtonClick() {
            this.value++;
        }
    }
    
    </script>

    Для управления потоком в шаблоне используются компоненты RnIfThen, RnIfElse и RnRepeat.

    TODO:

    • formatters
    • больше про RnIfThen, RnIfElse и RnRepeat
    • callbacks и movedElement
    • удаление атрибута биндингом
    • component vs element

    Benchmarks

    js-repaint-perfs

    Keywords

    none

    Install

    npm i rionite

    DownloadsWeekly Downloads

    6

    Version

    0.42.24

    License

    MIT

    Unpacked Size

    687 kB

    Total Files

    110

    Last publish

    Collaborators

    • riim