DOMParser doesn't exist in headless/non-browser environments

[jfelsinger]

First, thanks for the good work, most recent release is really awesome.

I just pulled the latest version to check out the new features, and headless mode, but map loading on the server-side (node) looks to be broken because the parser is using DOMParser which unfortunately isn't available outside the browser.

Environment

• browsers and versions: Node JS v20
• operating system:
• Tiled plugin version: 0.29.0-alpha.1
• Excalibur versions: Latest

Current Workaround

None yet, I'm looking at some light-weight server-side DOM parser implementations like Happy-Dom, Cheerio, or JSDOM; and a way to use them within the parsing pipeline just within a node env.

[eonarheim]

@jfelsinger Ope! Thanks for the issue! I should have checked DOMParser worked in node 🤦!

I'll look into this today to see if there's an easy polyfill I can sub in.

[eonarheim]

On the surface JSDOM looks like it might be the most drop-in...

Also xmldom, which is a bit smaller https://npmjs.com/package/xmldom

[jfelsinger]

I was looking at xmldom, but it looks like it only supports up to the DOM level 2 spec, which doesn't have querySelector or querySelectorAll.

[jfelsinger]

I implemented this on a forked branch with JSDOM as an optional dep if you want to check it out. It shouldn't add JSDOM to the bundle, or change the bundle for the browser, but if on node, it'll use JSDOM if it's available, so any node consumer should just have to do npm i jsdom and it'll work.

I had to change a couple other things other than including the parser, because I noticed that, despite the headless option, images were still trying to be loaded, causing some errors.

This is working at least for my project, both in browser and node, but might need a little cleaning-up. (If you want I can clean it up and make a proper PR)

https://github.com/excaliburjs/excalibur-tiled/compare/main...jfelsinger:excalibur-tiled:node-parsing?expand=1

[eonarheim]

@jfelsinger wow! Thanks for digging in to the headless work! JSDOM definitely seems like the right touch, we can add documentation to that effect.

I'd love a PR, let's do it!