Rionite NPM | npm.io

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

@riim/next-uid cellx cellx-collections

@infinitebrahmanuniverse/nolb-rio @everything-registry/sub-chunk-2669 opal-components rionite-file-upload @mediacomm/opal-tree-select @mediacomm/opal-tree-tag-select @mediacomm/opal-form @mediacomm/opal-group @mediacomm/opal-icon @mediacomm/opal-input-mask @mediacomm/opal-input-validator @mediacomm/opal-loaded-list @mediacomm/opal-loader @mediacomm/opal-modal @mediacomm/opal-multirow @mediacomm/opal-multiselect @mediacomm/opal-notification @mediacomm/opal-popover @mediacomm/opal-radio-group @mediacomm/opal-router @mediacomm/opal-select @mediacomm/opal-select-validator @mediacomm/opal-share-button @mediacomm/opal-sign-button @mediacomm/opal-slider @mediacomm/opal-switch @mediacomm/opal-switch-menu @mediacomm/opal-tabs @mediacomm/opal-tag @mediacomm/opal-tag-select @mediacomm/opal-text-editor @mediacomm/opal-text-input @mediacomm/opal-text-input-validator @mediacomm/opal-tree-list @riim/opal-notification @riim/opal-popover @riim/opal-radio-group @riim/opal-router @riim/opal-select @riim/opal-select-validator @riim/opal-share-button @riim/opal-sign-button @riim/opal-slider @riim/opal-switch @riim/opal-switch-menu @riim/opal-tabs @riim/opal-tag @riim/opal-file-input @riim/opal-file-input-validator @riim/opal-file-upload @riim/opal-filtered-list @riim/opal-form @riim/opal-group @riim/opal-icon @riim/opal-input-mask @riim/opal-input-validator @riim/opal-loaded-list @riim/opal-loader @riim/opal-modal @riim/opal-multirow @riim/opal-multiselect @riim/opal-tag-select @riim/opal-text-editor @riim/opal-text-input @riim/opal-text-input-validator @riim/opal-tree-list @riim/opal-tree-select @riim/opal-tree-tag-select @riim/opal-utils @riim/opal-autosuggest @riim/opal-button @riim/opal-calendar @riim/opal-checkbox @riim/opal-components-common @riim/opal-date-input @riim/opal-dropdown @riim/opal-editable-text @riim/opal-file-attach @mediacomm/opal-autosuggest @mediacomm/opal-button @mediacomm/opal-calendar @mediacomm/opal-checkbox @mediacomm/opal-components-common @mediacomm/opal-date-input @mediacomm/opal-dropdown @mediacomm/opal-editable-text @mediacomm/opal-file-input @mediacomm/opal-file-input-validator @mediacomm/opal-filtered-list

2 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago