Быстрый старт

tip

Проще всего начать с React в качестве рендерера

Устанавливаем зависимости

# chorda
npm i @chorda/core
# react
npm i @chorda/react react react-dom

Создаем дерево компонентов

Создаем и отрисовываем дерево компонентов

import { Html, attach, buildHtmlOptions, buildHtmlContext } from "@chorda/core"
import { createReactRenderer } from "@chorda/react"


// 1. создаем конфигурацию приложения
const createApp = () => {
    return {
        tag: 'span',
        text: 'Hello!'
    }
}

// 2. создаем дерево компонентов
const html = new Html(
    buildHtmlOptions(createApp()),
    buildHtmlContext(createReactRenderer())
)

// 3. подключаем компоненты к DOM дереву
attach(html, () => document.getElementById('root'))

И что мы сделали?

Создание конфигурации

Создаем декларативное описание компонента или дерева компонентов. Это описание и есть наша конфигурация

Создание дерева компонентов

Конфигурация может быть задана несколькими способами, их необходимо интерпретировать и собрать в итоговый набор опций, который понимает компонент Html. Это выполняется методом buildHtmlOptions.

Кроме опций требуется минимальный набор переменных (контекст), который инициализируется методом buildHtmlContext.

При создании корневого компонента в очередь патчей сразу же помещаются новые задания. Наши компоненты с этого момента готовы загружать данные и обрабатывать внешние события

Подключение к DOM

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

А дальше?

Теперь мы можем создавать наше веб-приложение только за счет расширения конфигурации

const createApp = () => {
    return {
        tag: 'span',
        text: 'Hello!',
        templates: {
            icon: {
                css: 'icon',
                tag: 'i'
            }
        }
    }
}

info

Можно продолжить в CodeSandbox