fix(polyfill): importing it beside another DOM (solid-js / DOMiNATIVE) (#168)

query-selector probes the global document for old IE as it is evaluated. With DOMiNATIVE's
undom-ng document already installed, `document.createElement('div')` has no getElementsByTagName
and importing the polyfill threw. The document is now hidden while query-selector loads, then put
back; the polyfill only runs it on xmldom trees, which do not need the probe.

querySelectorAll now searches the same XML tree as querySelector instead of the wrapper element.

__test__/query-selector.test.mjs: query-selector alone throws beside an undom-like document; the
polyfill's import does not, puts the document back, and still selects in xmldom trees.

Fixes #134

Author: triniwiz

packages/canvas-polyfill/DOM/Element.ts

@@ -1,7 +1,7 @@
 import { Node } from './Node';
 import { Frame, StackLayout, View, ViewBase } from '@nativescript/core';
 import setValue from 'set-value';
-import querySelector from 'query-selector';
+import querySelector from './querySelector';
 import { HTMLCollection } from './HTMLCollection';
 import { Canvas } from '@nativescript/canvas';
 import { domGetElementsByClassName, domGetElementsByTagName } from './domUtils';
@@ -303,9 +303,12 @@ export class Element extends Node {
 		return [];
 	}
 
+	private get __selectorContext() {
+		return (<any>this)._xmlDom?.documentElement ?? (<any>this)._xmlDom ?? this.__instance ?? this.nativeElement?.__domElement;
+	}
+
 	querySelector(selector: string) {
-		const context = (<any>this)._xmlDom?.documentElement ?? (<any>this)._xmlDom ?? this.__instance ?? this.nativeElement?.__domElement;
-		const selection = querySelector(selector, context);
+		const selection = querySelector(selector, this.__selectorContext);
 		if (Array.isArray(selection)) {
 			const item = selection[0];
 			if (item) {
@@ -327,7 +330,7 @@ export class Element extends Node {
 	}
 
 	querySelectorAll(selector: string) {
-		return querySelector(selector, this);
+		return querySelector(selector, this.__selectorContext);
 	}
 
 	getBoundingClientRect() {

packages/canvas-polyfill/DOM/XMLDocument.ts

@@ -1,6 +1,6 @@
 import { Document as Doc } from './Document';
 
-import querySelector from 'query-selector';
+import querySelector from './querySelector';
 
 import { SVGSVGElement } from './svg/SVGSVGElement';
 

packages/canvas-polyfill/DOM/querySelector.ts

@@ -0,0 +1,7 @@
+// The guard is evaluated first: see ./querySelectorGuard.
+import { restoreDocument } from './querySelectorGuard';
+import querySelector from 'query-selector';
+
+restoreDocument();
+
+export default querySelector;

packages/canvas-polyfill/DOM/querySelectorGuard.ts

@@ -0,0 +1,25 @@
+// query-selector probes the global `document` for old IE as it is evaluated. Another DOM's document
+// (undom-ng under DOMiNATIVE) fails that probe and the import throws, so ./querySelector hides it
+// until query-selector has loaded. Nothing it does later relies on the probe.
+const descriptor = Object.getOwnPropertyDescriptor(globalThis, 'document');
+let hidden = false;
+
+if (descriptor?.configurable) {
+	delete (globalThis as any).document;
+	hidden = true;
+} else if (descriptor?.writable) {
+	(globalThis as any).document = undefined;
+	hidden = true;
+}
+
+export function restoreDocument() {
+	if (!hidden) {
+		return;
+	}
+	hidden = false;
+	if (descriptor.configurable) {
+		Object.defineProperty(globalThis, 'document', descriptor);
+	} else {
+		(globalThis as any).document = descriptor.value;
+	}
+}

packages/canvas-polyfill/__test__/query-selector.test.mjs

@@ -0,0 +1,55 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { fileURLToPath } from 'node:url';
+import { build } from 'esbuild';
+import { DOMParser } from '@xmldom/xmldom';
+
+// As undom-ng installs under DOMiNATIVE (solid-js): a document whose elements have no
+// getElementsByTagName, which query-selector's import-time probe calls.
+function installForeignDocument() {
+	const foreign = {
+		createElement: (tag) => ({ nodeName: tag.toUpperCase(), childNodes: [], appendChild(node) { this.childNodes.push(node); return node; } }),
+		createComment: (data) => ({ nodeType: 8, data }),
+	};
+	globalThis.document = foreign;
+	return foreign;
+}
+
+const packageDir = fileURLToPath(new URL('..', import.meta.url));
+
+/** `source` bundled the way an app bundler would, from this package. */
+async function load(source) {
+	const { outputFiles } = await build({
+		stdin: { contents: source, resolveDir: packageDir, loader: 'ts' },
+		bundle: true,
+		format: 'esm',
+		write: false,
+		platform: 'neutral',
+		mainFields: ['module', 'main'],
+	});
+	return import('data:text/javascript;base64,' + Buffer.from(outputFiles[0].text).toString('base64') + '#' + Math.random());
+}
+
+const svg = new DOMParser().parseFromString('<svg xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="g"/></defs><rect class="a"/><rect/></svg>', 'image/svg+xml');
+
+test('query-selector on its own fails beside a foreign document', async () => {
+	installForeignDocument();
+	await assert.rejects(load("export { default } from 'query-selector';"), /getElementsByTagName/);
+	delete globalThis.document;
+});
+
+test('the polyfill loads query-selector beside a foreign document and puts it back', async () => {
+	const foreign = installForeignDocument();
+	const { default: querySelector } = await load("export { default } from './DOM/querySelector';");
+	assert.equal(globalThis.document, foreign);
+	assert.deepEqual(querySelector('#g', svg.documentElement).map((node) => node.nodeName), ['linearGradient']);
+	assert.equal(querySelector('rect', svg.documentElement).length, 2);
+	assert.equal(querySelector('rect.a', svg.documentElement).length, 1);
+	delete globalThis.document;
+});
+
+test('without a document nothing is installed', async () => {
+	delete globalThis.document;
+	await load("export { default } from './DOM/querySelector';");
+	assert.equal('document' in globalThis, false);
+});