Bug: Mux player duplicate render / frozen TemplateObject array not unique per call site

[luwes]

Related tagged template spec change
tc39/ecma262#840

Which Mux Elements/Packages has a bug?

• mux-player

Which browser(s) are you using?

Chrome 108.0.5359.98
didn't affect Firefox and Safari in my tests

Which operating system(s) are you using?

MacOS

How are you using Mux Elements?

npm

---

I finally reproduced this bug locally, one of the hardest bugs I've had the pleasure to diagnose 😅

It turns out it is unrelated to any JS framework, Nuxt nope, Mithril nope. It's reproducible with vanilla JS..
I think it's a Chrome only bug, at least I can only repro it there.

The bug is that the result of our html tagged template does not always return the same frozen TemplateObject array invalidating the WeakMap cache and causing a new DOM fragment to be appended in the shadow root of the player.

elements/packages/mux-player/src/template.ts

Lines 12 to 17 in 308e9a7

	export const template = (props: MuxTemplateProps) => html`
	<style>
	${cssStr}
	</style>
	${content(props)}
	`;

elements/packages/mux-player/src/html.ts

Lines 134 to 144 in 77d0386

	if (renderedTemplates.get(element) !== template) {
	renderedTemplates.set(element, template);
	const instance = new TemplateInstance(template, this.values, this.processor);
	renderedTemplateInstances.set(element, instance);
	if (element instanceof NodeTemplatePart) {
	element.replace(...instance.children);
	} else {
	element.appendChild(instance);
	}
	return;
	}

For some reason the frozen TemplateObject array is not unique per call site under a big amount of memory pressure in Chrome.

I could finally reproduce it by adding the app.js file of the ijf.org Judo website which is a huge JS file and adding logic to change the playback id on the fly with Mithril.js. I reproduced it twice by luck, after that nada couldn't reproduce it for another hour or something tried everything. Then thought maybe it's related to some memory increase thing and randomly added this rainbow spiral (https://luwes.github.io/sinuous-rainbow-spiral/) to the Mux player vanilla demo (https://elements-demo-vanilla-mux.vercel.app/mux-player.html) First setting the amount to 2000 for increased memory usage and voila could reproduce it like 50% of the time 🥹

[luwes]

I confirmed that the TemplateObject array actually changes by using a regular Map and see if there is a "duplicate" key entry, same array values and this was the case.

[luwes]

Update: seems garbage collection is not the culprit, since the old array is still in memory.
It just doesn't return the same frozen array per call site under some conditions.

[dylanjha]

We were able to reproduce this in some isolated cases. We have a patch in 1.5 that we're hoping is a permanent fix.

Going to go ahead and close this and let's re-open if it comes up again