How to implement Recursive Block?

[GeorgeHulpoi]

Hello! I want to implement a recursive block.

export const HTMLElementBlock: Block = {
	slug: 'html-element',
	labels: {
		singular: 'HTML Element Block',
		plural: 'HTML Element Blocks',
	},
	interfaceName: 'HTMLElementBlock',
	fields: [
		{
			name: 'layout',
			type: 'blocks',
			blocks: [
				HTMLElementBlock,
				// rest of blocks
			],
		},
	],
};

The only problem is that I can't use the HTMLElementBlock before its declaration. How I am supposed to create a Recursive Block?

[GeorgeHulpoi]

I managed to resolve the issue with this code:

import { Block, Field } from 'payload/types';

type HTMLElementBlockType = (options?: {
	depth?: number;
}) => Block;

const block: HTMLElementBlockType = ({ depth = 0 } = {}) => {
	const layoutField: Field = {
		name: 'layout',
		type: 'blocks',
		blocks: [],
	};

	let o = {
		slug: 'html-element',
		labels: {
			singular: 'HTML Element Block',
			plural: 'HTML Element Blocks',
		},
		interfaceName: 'HTMLElementBlock',
		fields: [layoutField],
	};

	if (depth < 5) {
		layoutField.blocks.push(block({ depth: depth + 1 }));
	}

	return o;
};

export default block;