Add crypto to Polyfills improving Blueprint compatibility for Node

[sejas]

• Similar to Polyfills for Node.js v18 and JSDOM runtimes #875
• Related to wp-now: ReferenceError: DOMParser is not defined while installing the plugin playground-tools#113

What is this PR doing?

It imports the native library crypto and makes it globally available in the runtime.

What problem is it solving?

When using blueprints that install plugins or themes, it generates a random folder using crypto`. That library is available in the browsers by default, but for node we need to import it.

Note that it do not install any dependency since Crypto is already built in NodeJS, but it's not imported by default.
I decided to use node:crypto which has webcrypto and will be a better match. It's available sine Node v15.

The other alternative is normal crypto https://nodejs.org/docs/latest-v14.x/api/crypto.html, which also has crypto.randomUUID. It's available since Node v14.

How is the problem addressed?

It adds a new Polyfill for crypto.

Testing Instructions

1. Comment the first line import './crypto'; on packages/php-wasm/node-polyfills/src/lib/crypto.spec.ts
2. Run npx nx test php-wasm-node-polyfills
3. Observe the tests fail
4. Uncomment first line import './crypto'; on packages/php-wasm/node-polyfills/src/lib/crypto.spec.ts
5. Run npx nx test php-wasm-node-polyfills
6. Observe the tests pass

[adamziel]

To fix the e2e failure you might need to add node:crypto to external in packages/php-wasm/node/vite.config.ts

[sejas]

@adamziel , thanks for the pointer ! 🙏

Updated! 927a6b3

[adamziel]

Hm maybe I was wrong. It seems to dislike the node: prefix. What if you import from just crypto instead of node:crypto?

[adamziel]

Thank you @sejas!

[sejas]

@adamziel , this fix seems to not be working when the JS is in NPM package.

The "transpiled" JS is like:
node_modules/@wp-playground/blueprints/index.js

typeof crypto > "u" && import("./__vite-browser-external-2447137e.js").then((e) => {
  global.crypto = e;
});

Where ./__vite-browser-external-2447137e.js:

const e = {};
export {
  e as default
};

It shouldn't import from ./__vite-browser-external-2447137e.js , but instead from crypto. 🤔 .
Do you have in mind any possible solution?

Should we pivot and use a custom plain function, instead of crypto.randomUUID. I've seen it's just used a couple of times to create a temporal file. Nothing that needs to be super secure. A simple new Date().getTime() should be enough to create a unique file.

Should we use a third party library?

Should be handled on node clients directly?

[adamziel]

Yeah let’s pivot to a custom randomString() function, we could move the one that’s already implemented to generate WP secrets@php-wasm/utils

[adamziel]

wordpress-playground/packages/playground/remote/src/lib/utils.ts

Line 1 in c265d61

export function randomString(length: number) {

[sejas]

I'll prepare a PR 🤞