Renderer

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

import { Renderer, Traverse, PropManager, createRenderer, renderer } from "@dpg.gg/core/renderer";

Overview

Класс Renderer предназначен для работы со схемой. Он преобразовывает схему в готовый html код, который в последствии обрабатывается браузером и отображается как обычное SPA приложение.

Ядром процессов рендера является легковесная и прогрессивная библиотека preact.

Renderer основан на EventEmitter, поэтому можно использовать его для каких-либо взаимодействий с событиями.

Пример использования:

export { Renderer } from "@dpg.gg/core/renderer";

const renderer = new Renderer();
const schema = {
	/* ... */
};

renderer.render(schema, document.querySelector("#app"));

Props

plugins

• Type: PluginManager

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

traverse

• Type: Traverse

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

events

• Type: PropManager

Ссылка для traverse.events

Можно использовать для написания middleware функций, например:

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

renderer.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.props, принцип использования схож с events

Methods

render(schema, root)

• Arg schema - SchemaItem | SchemaItem[]
• Arg root - HTMLElement

Основной метод который переводит schema в Virtual DOM и в последствии "отрисовывает" в реальный DOM внутрь переданного root.

renderer.render(["Hello", "World"], document.body);

once, on, off, emit

Это методы прослушивателя события, подробнее можно посмотреть на соответствующей странице EventEmitter

renderer.once("error", console.error);
renderer.on("log", console.log);
renderer.emit("log", "Hello world!");
renderer.emit("error", "Crash");

Events

render

Базовое событие render которое вызывается после успешного выполнения Traverse и отрисовки:

renderer.on("render", () => console.log("App is rendered"));