Updating Multiple Properties at Once about reef

[mouse0270]

Here is an modified example of one of your examples to show this issue, if you look at the console, you'll see its called twice and not batched together.

https://codepen.io/mouse0270/pen/LYJdJLB?editors=1111

[Sh1eld]

@mouse0270 (responding to the edit)

https://reefjs.com/api/#lifecycle-events
https://reefjs.com/advanced/#batch-rendering

document.addEventListener('reef:render', function (event) {
	console.log('The UI was just updated inside this element.');
	console.log(event.target);
        if (event.target && event.target.closest('.myElement')) {
        
       }
});

Let me know if this doesn't answer your question. One method to achieve your desired outcome is to leverage event propagation to watch for a specific component being rendered.

[mouse0270]

@mouse0270 (responding to the edit)

https://reefjs.com/api/#lifecycle-events https://reefjs.com/advanced/#batch-rendering

document.addEventListener('reef:render', function (event) {
	console.log('The UI was just updated inside this element.');
	console.log(event.target);
        if (event.target && event.target.closest('.myElement')) {
        
       }
});

Let me know if this doesn't answer your question. One method to achieve your desired outcome is to leverage event propagation to watch for a specific component being rendered.

the problem with reef:render is that it triggers when any component renders, I wanted an event similar to how store works

document.addEventListener('reef:render-Action', async (event) => { ... });

I basically solved this issue by doing

// Refresh Select Pickers when Reactive Components are Rendered
document.addEventListener('reef:render', function (event) {
	// Create Control Specific Render Functions
	const id = event.target.id.replace('component', '');
	event.target.dispatchEvent(new CustomEvent(`reef:render-${id}`, {
		bubbles: true,
		detail: CONTROLS[id]
	}));
});

But this really only works because of how I setup my components.

[cferdinandi]

@mouse0270 Forgive me, as I haven't had a full cup of coffee yet today (☕️), but if I understand what you're saying correctly...

The reef.store() method fires multiple times when several pieces of data contained it are updated, not that reef.render() renders the UI multiple times in response, correct?

[mouse0270]

Yes, so for example document.addEventListener('reef:store-cart', function () { ... }); would fire on each update to the store.

cart.push('shirt');
cart.push('pants');

This would cause the conde inside of reef:store-cart event to be fired twice, once for each push. However... document.addEventListener('reef:render', function (event) { ... }); only gets fired once. But the problem is that reef:render has no way to attach itself to a specific component. It gets called when any component renders.

I think reef:render is what I am looking for, as I want to run code once the component is done updating and not once the store is updated. But reef:render doesn't currently have component specific event listeners. Which in my example, you can see I sorta of got around, but it would be nice to have an official way to bind an event listener when a specific component renders.

[mouse0270]

Basically I think this boils down to, I'd like to make a feature request, so that we can have an official event listener for specific components.... so basically we could do something like this

let {store, component} = reef;

// Use a custom event name
let wizards = store([], 'wizards');
let mages = store([], 'mages');

// Create a template
function template () {
	return `
		<ul>
			${wizards.map(function (wizard) {
				return `<li>${wizard}</li>`;
			}).join('')}
		</ul>`;
}
// Create a template
function template2 () {
	return `
		<ul>
			${mages.map(function (mage) {
				return `<li>${mage}</li>`;
			}).join('')}
		</ul>`;
}

component('#app', template, {stores: ['wizards']});

// Use a custom name AND allow on* events
component('#app2', template2, {stores: ['mages'], events: true});

// Log whenever an element is rendered into
document.addEventListener('reef:render', function (event) {
	console.log('The UI was just updated a component.');
	console.log(event.target);
});

// Log whenever an element is rendered into
document.addEventListener('reef:render-app', function (event) {
	console.log('The UI was just for the #app component.');
	console.log(event.target);
});

// Log whenever an element is rendered into
document.addEventListener('reef:render-app2', function (event) {
	console.log('The UI was just for the #app2 component.');
	console.log(event.target);
});

[cferdinandi]

@mouse0270 Thanks, that clarifies things!

So yes, the rendering is batched, not the updating. You'll want to listen for reef:render events. The event is actually emitted on the parent element that the component renders into, so you can narrow what you listen to that way.

Using your example above, you can do this today...

// Log whenever an element is rendered into
document.querySelector('#app').addEventListener('reef:render-app', function (event) {
	console.log('The UI was just for the #app component.');
	console.log(event.target);
});

// Log whenever an element is rendered into
document.querySelector('#app2').addEventListener('reef:render-app2', function (event) {
	console.log('The UI was just for the #app2 component.');
	console.log(event.target);
});

You could also do this...

// Log whenever an element is rendered into
document.addEventListener('reef:render-app', function (event) {
	if (event.target.matches('#app')) {
		console.log('The UI was just for the #app component.');
	}
	if (event.target.matches('#app2') {
		console.log('The UI was just for the #app2 component.');
	}
	console.log(event.target);
});

Hope that helps!

[mouse0270]

Awe. I didn't realize the event was rendered on the component. I believe you mean as reef:render-app isn't valid.

// Log whenever an element is rendered into
document.querySelector('#app').addEventListener('reef:render', function (event) {
	console.log('The UI was just for the #app component.');
	console.log(event.target);
});

// Log whenever an element is rendered into
document.querySelector('#app2').addEventListener('reef:render', function (event) {
	console.log('The UI was just for the #app2 component.');
	console.log(event.target);
});

That also works just fine, is it stated anywhere in the docs that the reef:render is triggered on the component? Did I just miss this? I really thought I read though the documents fairly well. but its a small thing I could be missing that.

[cferdinandi]

Yea, it says it here: https://reefjs.com/api/#lifecycle-events

reef:render is emitted on a component element when reef renders a UI update

[mouse0270]

Yup, just something small that I missed. Well call this closed. haha