Examples

Learn how to build your own registry by extending the base classes.

Creating a Plugin Registry

Here's how to create a simple plugin registry:

import { z } from 'zod';
import { BaseRegistry } from '@schema-engine/registry';
import type { BaseRegistration, ComponentMetadata } from '@schema-engine/registry';
 
// Define your plugin interface
interface PluginRegistration extends BaseRegistration {
	$type: string;
	schema: z.ZodType<unknown>;
	metadata: ComponentMetadata;
	execute: () => Promise<void>;
}
 
// Create your registry
class PluginRegistry extends BaseRegistry<string, PluginRegistration> {
	get registryName(): string {
		return 'Plugin';
	}
}
 
// Use it
const registry = new PluginRegistry();
 
registry.register({
	$type: 'my-plugin',
	schema: z.object({ enabled: z.boolean() }),
	metadata: {
		name: 'My Plugin',
		description: 'Does something useful',
	},
	execute: async () => {
		console.log('Plugin executed!');
	},
});
 
// Retrieve and execute
const plugin = registry.get('my-plugin');
if (plugin) {
	await plugin.execute();
}

Creating a Component Registry

For visual components that need a render method:

import React from 'react';
import { z } from 'zod';
import { ComponentRegistry } from '@schema-engine/registry';
import type { ComponentRegistration, ComponentMetadata } from '@schema-engine/registry';
 
// Define your component type
interface WidgetRegistration extends ComponentRegistration<string, unknown, { id: string }> {
	$type: string;
	schema: z.ZodType<unknown>;
	metadata: ComponentMetadata;
	render: (props: { id: string }) => JSX.Element;
}
 
// Create your registry
class WidgetRegistry extends ComponentRegistry<string, WidgetRegistration> {
	get registryName(): string {
		return 'Widget';
	}
}
 
// Use it
const widgets = new WidgetRegistry();
 
widgets.register({
	$type: 'card',
	schema: z.object({ title: z.string() }),
	metadata: {
		name: 'Card Widget',
		icon: 'card',
	},
	render: ({ id }) => <div id={id}>Card</div>,
});

Registering Schemas to Zod Registry

You can register all schemas to a Zod registry for validation tooling:

import { z } from 'zod';
 
const zodRegistry = z.registry();
 
registry.registerSchemas(zodRegistry, (item) => ({
	name: item.metadata.name,
	description: item.metadata.description,
}));