Отрисовка

На текущий момент Chorda работает только с VDOM отрисовкой. Это значит, что на выходе формируется дерево из виртуальных узлов

Свойства VDOM

Пропсы виртуального DOM передаются черех опцию dom. Допустимые значения зависят от используемого отрисовщика

export default () => {
    return {
        dom: {
            // React
            className: 'custom',
            id: 'component-id'
        }
    }
}

Некоторые свойства используются очень часто, поэтому вынесены в отдельные опции-помощники

export default () => {
    return {
        css: 'my-custom-class',
        classes: {
            'my-class': true
        },
        styles: {
            margin: 0
        }
    }
}

Компоновка

Компоновка отвечает за создание VDOM узла из свойств и дочерних элементов

export default () => {
    return {
        items: ['1', '2', '3'],
        layout: defaultLayout
    }
}

Есть два стандартных вида компоновок: defaultLayout и passthruLayout

Тег и текст

Использование тега и текста имеет свои особенности

export default () => {
    return {
        tag: 'p',
        text: 'Привет!!!',
    }
}

Если нам нужен компонент, соответсвующий текстовому узлу, необходимо использовать значение tag равное false. В этом случаем компонент рендерится в TextNode, а не HTMLElement. Мы получим при отрисовке тот же DOM, что и в предыдущем примере, но тексту будет соответствовать уже собственный компонент со своим скоупом

export default () => {
    return {
        tag: 'p',
        templates: {
            inner: {
                tag: false,
                text: 'Привет!!!',
            }
        }
    }
}

Отключение отрисовки

В отличии от управления структурой, за отрисовку отвечает сам компонент. Если выставить опцию render в значение false, то компонент не будет выполнять отрисовку, но в то же время сам останется в дереве компонентов

export default () => {
    return {
        templates: {
            header: {
                styles: {
                    display: 'none' // компонент в DOM, но невидим
                }
            },
            body: {
                render: false // компонент исключен из DOM
            },
            footer: false, // компонент исключен из дерева компонентов
        }
    }
}