duplicate loads of the DOM shim leads to an infinite rendering issue

[thescientist13]

Summary

Not sure the exact cause why, but very similar to #144 , as part of refactoring down Greenwood towards Single File Executables noticed in this demo PR that given a very specific set of steps

1. Load products page (SSR page)
2. Load home page and click load products (API route)
3. Load search page and search, e.g. phone (API route)
4. Load products page

• Expected: page would load like in step 1
• Actual: custom element initialization keeps happening until eventually the API we're calling gives up and stops return data

greenwood-sfe-ssr-infinite-loop.mov

Details

As you can see above, renderToString gets called and then initializeCustomElement happens almost 100 times and finally the upsteam API just gives up

We should probably include this as part of #145.

I also wonder wonder why over multiple loads this would be an issue, but not presumably defining something like HTMLElement wouldn't error out? Node should cache modules, which would explain the HTMLElement behavior at least but not the observed behavior seen here. 🤷‍♂️

---

Spoiler alert, a solution was found that involved making the DOM Shim a bit more idempotent which seemed to make the issue go away

// before
globalThis.addEventListener = noop;
globalThis.document = new Document();
globalThis.customElements = new CustomElementsRegistry();
globalThis.HTMLElement = HTMLElement;

// after
globalThis.addEventListener = globalThis.addEventListener ?? noop;
globalThis.document = globalThis.document ?? new Document();
globalThis.customElements = globalThis.customElements ?? new CustomElementsRegistry();
globalThis.HTMLElement = globalThis.HTMLElement ?? HTMLElement;