Опции

Приложение, реализованное с помощью Chorda, это одна большая конфигурация, состоящая из набора опций

Конфигурация

Конфигурация представляет собой простой типизированный Object

const options = {
    items: [
        tag: 'button',
    }, {
        tag: 'a',
    }]
}

Опции

Базовый набор опций не очень большой и разбит на три группы

Опции скоупа

• injections инжекторы скоупа
• defaults значения скоупа по умолчанию (описывают границы скоупа)
• reactions реакции компонента
• joints точки подключения
• events слушатели скоупа

Опции структуры

• items набор индексированных компонентов (Array)
• defaultItem базовая конфигурация индексированного компонента
• components набор именованных компонентов (Object)
• defaultComponent базовая конфигурация именованного компонента
• templates набор шаблонов именованных компонентов
• weight вес компонента
• itemFactory фабрика индексированных компонентов
• componentFactory фабрика именованных компонентов
• childFilter фильтр дочерних компонентов
• childSorter сортировщик дочерних компонентов

Опции отрисовки

• dom свойства виртуального DOM
• tag html тэг
• text тектовое содержимое
• html html содержимое в виде строки
• classes набор CSS классов
• css CSS класс ("сахар" для classes)
• styles набор CSS стилей
• layout компоновка
• render флаг отрисовки

caution

Если вы зададите лишние опции, то они будут проигнорированы

Смешивание

Chorda предлагает модификацию конфигураций через смешивание

Состав смеси

В состав смеси могут входить:

• HtmlOptions - простая конфигурация
• boolean - пустая (true) или игнорируемая (false) конфигурация
• Function - конфигурация по требованию (aka функциональный компонент)
• Promise - отложенная конфигурация

const mixedOptions = mix({name: 'myComponent'}, true, MyComponent, () => import('MyComponent'))

Слияние опций

Примеси не применяются сразу, они накапливаются и разрешаются по требованию. Как правило в момент применения

Слияние происходит по правилам, которые определены в классе компонента, в нашем случае это класс Html. Именно его экземпляры и будут составлять дерево компонентов

После слияния вложенные компоненты становятся примесями

mix({
    defaultItem: {
        tag: 'a'
    }
}, {
    defaultItem: {
        text: 'Hello'
    }
})

// после применения Html правил даст нам:

const opt = {
    defaultItem: mix({tag: 'a'}, {text: 'Hello'})
}

Декомпозиция

Поскольку конфигурации компонентов могут быть очень сложными, их стоит вынести в отдельные файлы

// Button.js
export default () => {
    return {
        tag: 'button'
    }
}

// Link.js
export default () => {
    return {
        tag: 'a'
    }
}

// App.js
import Link from "./Link"
import Button from "./Button"

const App = () => {
    return {
        items: [
            Button, 
            Link,
        ]
    }
}

const app = new Html(App())

tip

Важная особенность декларативности - дробление на компоненты не является необходимостью, оно лишь улучшает читаемость и упрощает переиспользование кода