Listen to nested subcomponent render

Hello, first of all, thanks for the awesome work.

I’m developing a plugin using reef as a reactive UI renderer, and I have a nested component structure like so:

App->Component

The component is attached to App. I want to bind to Component’s render event to create a carousel inside it after it has been rendered. So far I’ve only found the base reef:render which is fired every time any template has been rendered, and results in errors because the Component has not rendered any html yet. How would I go about waiting for a specific template to finish rendering? I tried comparing reef:render event target but to no avail (it is also called every time even if the template is not going to be rendered).

Kind regards

[cferdinandi]

@Falkan3 Apologies, as I’m a bit confused here.

The reef:render event event fires on a specific element whenever that element’s content is re-rendered, and bubbles up to the window or document (just like other events like click do).

You can attach you event listener directly to the element you want to listen for renders inside.

let elem = document.querySelector('.my-carousel');
elem.addEventListener('reef:render', function (event) {
    console.log('The carousel was rendered!');
});

Historically, this was more complicated with nested components because the original element might get purged from the DOM, breaking the event listener, so I would recommend event delegation.

Today, you can now attach event listeners on specific elements using on* attributes in your template. Reef uses event delegation under-the-hood, and automatically handles when elements get added or removed from the DOM.

new Reef('#app', {
	data: {
		heading: 'Hello, world!'
	},
	template: function (props) {
		return `
			<h1>${props.heading}</h1>
			<div id="sub-component" onreef:render="onrender">
				${subcomponent.html()}
			</div>`;
	},
	listeners: {
		onrender: function (event) {
			// do something...
		}
	}
}).render();

[Falkan3]

It makes sense, I will try to simplify the logic, I separated the components because I wanted the code to me more modular and load on demand. Thank you for your time anyways.