[HMR] `swap*` APIs show stale content when swapping back and forth multiple times

[nolanlawson]

The swapComponent/swapStyle/swapTemplate APIs do not work correctly in the following scenario (using swapStyle to illustrate):

/* initial state */ // works - A is rendered
swapStyle(a, b)     // works - B is rendered
swapStyle(b, a)     // works - A is rendered
swapStyle(a, b)     // does not work! A is still rendered

The reason for this is this line:

lwc/packages/@lwc/engine-core/src/framework/hot-swaps.ts

Line 187 in e7377d2

swappedStyleMap.set(oldStyle, newStyle);

The swappedStyleMap only ever grows – it never shrinks. So after swapping A and B a few times, we end up with the mappings:

A -> B
B -> A

Next, consider this code:

lwc/packages/@lwc/engine-core/src/framework/hot-swaps.ts

Lines 110 to 120 in e7377d2

	export function getStyleOrSwappedStyle(style: StylesheetFactory): StylesheetFactory {
	assertNotProd(); // this method should never leak to prod
	const visited: Set<StylesheetFactory> = new Set();
	while (swappedStyleMap.has(style) && !visited.has(style)) {
	visited.add(style);
	style = swappedStyleMap.get(style)!;
	}
	return style;
	}

There is a visited set to avoid infinite loops. However, if we have entries for both A -> B and B -> A, then calling this function with A will always return A. This is why the third swapStyle above doesn't work.

Related: #4115

Minimal repro: nolanlawson@3a135df

[nolanlawson]

This might not actually be an issue in practice, since our HMR implementation should re-evaluate the stylesheet function every time, not based on its string content. TBD.