Traverse

import { Traverse } from "@dpg.gg/core/renderer";

Overview

Вспомогательный класс Renderer, расширяемый системой плагинов, который отвечает за обработку схемы и генерацию Preact Virtual DOM элементов на ее основе.

const traverse = new Traverse();
const vdom = await traverse.build(schema);

Props

plugins

• Type: PluginManager

Изолированный для Traverse экземпляр Plugin Manager для расширения функционала

events

• Type: PropManager

Изолированный для Traverse экземпляр PropManager. Он отвечает за обработку событий, переданных в схеме в параметре events и связывает их с событиями Preact Virtual DOM элемента.

[
    {"element": "div", "events": {"click": "log"}, ... }
]

Можно расширять обработчик написанием middleware функций, например сопоставление ключей c EventEmitter

import { emitter } from "@dpg.gg/core/event";

traverse.events.use(async (ctx, next) => {
	const { value } = ctx;
	if (typeof value === "string") ctx.value = (...args: any) => emitter.emit(value, ...args);
	return next();
});

props

• Type: PropManager

Изолированный для Traverse экземпляр PropManager.

Принцип схож с events, однако он используется для обработки значений переданных в props параметре элемента схемы.

[
    { "element": "a", "props": { "href": "/map" }, ... },
    { "element": "a", "props": { "href": "/masterplan", "style": { "color": "red" } }, ... }
]

Он так же может быть расширен благодаря middleware, например для отладки:

traverse.props.use(({ name, value }, next) => {
	console.log("prop", name, value);
	return next();
});

Methods

use(...middlewares)

• Arg middlewares - принимает одну или несколько Middleware функций

Нужен для расширения базового поведения при выполнении build или run методов. Например назначение preact компонентов в зависимости от типа элемента:

renderer.traverse.use(async (node, next) => {
	if (node.element === "Router") {
		node.element = Router;
		node.props = { onChange: onRouterChange };
	}
	return next();
});

async run(node)

• Arg node: SchemaItem - Входной объект, который нужно обработать

Используется для вызова всех middleware, присвоенных к Traverse

Прямой необходимости в его использовании из вне нет, он автоматически выполняется при вызове метода build

async build(node)

• Arg node: SchemaItem - Входной объект, который нужно обработать

Формирует из схемы Preact Virtual DOM элемент, применяя к нему middlewares и обработчики свойств и событий

const node = await traverse.build(["hello", "world"]);