From this merged pull request:

• Isomorphic PHP, Isomorphic Blueprints #214

@wp-playground/blueprints will need to be smart about providing a Node.js polyfill for new DOMParser() and fetch().

Currently, the following browser globals are found in the blueprints package.

• DOMParser

  wordpress-playground/packages/playground/blueprints/src/lib/steps/common.ts

  Line 4 in a38fa9a

  return new DOMParser().parseFromString(response.text, 'text/html')!;

  Used in:
  • blueprints/src/lib/steps/install-theme.ts‎
  • blueprints/src/lib/steps/install-plugin.ts‎
• FormData

  • wordpress-playground/packages/playground/blueprints/src/lib/steps/install-theme.ts

    Lines 75 to 77 in a38fa9a

    	const themeFormData = new FormData(
    	themeFormPage.querySelector('.wp-upload-form')! as HTMLFormElement
    	) as any;

  • wordpress-playground/packages/playground/blueprints/src/lib/steps/install-plugin.ts

    Lines 72 to 74 in a38fa9a

    	const pluginFormData = new FormData(
    	pluginFormPage.querySelector('.wp-upload-form')! as HTMLFormElement
    	) as any;

• fetch

  wordpress-playground/packages/playground/blueprints/src/lib/resources.ts

  Line 215 in a38fa9a

  let response = await fetch(url);

Possible solution: Prepare a proxy module/package that exports native DOM API for the browser and jsdom for Node.js.

The closest NPM package I found was k0michi/isomorphic-dom, which uses the exports property in its package.json to define browser and server exports.

There's also fetch-shim which does the same for fetch and undici; however, this latter module is now in Node.js core as global fetch since v18 so it's no longer necessary. EDIT: Just learned that global FormData is also available since Node.js v18. So it's only DOMParser that needs to be polyfilled on the server side.