Schema

Schema представляет собой коллекцию элементов, которые будут "отрисованы" по мере работы Renderer

SchemaItem

• SchemaElement | string

Объект схемы может быть строкой или объектом с определенным набором правил

[
	"Hello",
	{ "element": "a", "props": { "href": "/" }, "children": ["Earth"] },
	{ "element": "a", "props": { "href": "/dubai" }, "children": ["Dubai"] },
	{ "element": "a", "props": { "href": "/masterplan" }, "children": ["Masterplan"] },
	{ "element": "a", "props": { "href": "/fp/1" }, "children": ["Floorplan"] },
	"World"
]

SchemaElement

В SchemaElement есть 4 предопределенных ключа которые обрабатываются "из коробки"

{
	"element": "a", // tag
	"props": { "href": "/link/to/page" }, // attrs
	"events": { "click": someAction }, // events
	"children": ["Link"] // Children nodes
	// ...
}

element ^required

• string

Обязательный параметр, который определяет используемый html тэг (a, div, header, p и т.д.).

Для веб компонентов используется тот же принцип, но изначально их нужно зарегистрировать, например через менеджер ресурсов и WebComponent Loader, после чего можно будет передавать кастомный тэг в element

props ^optional

• Record<string, any>

Опциональный параметр, который принимает объект с аттрибутами для элемента.

[
	{
		element: "a",
		props: { href: "/link/to" }, 
	},
	{
		element: "img",
		props: { src: "/logo.jpg", alt: "logo" }, 
	},
];

Через данный параметр можно задавать data- аттрибуты, стили и любые другие аттрибуты, включая кастомные для WebComponents

events ^optional

• Record<string, any>

Опциональный параметр который присваивает прослушиватели событий к элементу по заданному ключу

{
	"element": "div",
	"events": { "click": (e) => console.log('click', e) }, 
}

children ^optional

• Array<SchemaItem>

Опциональный параметр который принимает массив из строк и/или объектов схемы. Текущий объект будет являться родителем для всех потомков указанных в этом параметре.

{
	"element": "a",
	"props": { "href": "/" },
	"children": ["Earth"] 
},

[custom] ^optional

Если вам нужно расширить набор ключей и обработчиков, то можно это реализовать благодаря системе Middleware в Traverse, например:

// ...
const schema = [
	// ...
	{ element: "s3cret", code: "MySuperS3cretString" }, 
	// ...
];
// ...
renderer.traverse.use((node, next) => {
	if (node.element === "s3cret") {
		node.element = "span"; 
		node.children = [node.code.replace(node.code.slice(0, -2), "*******")]; 
	} 
	return next();
}); 
// ...