search

WordPress / wordpress-playground

Run WordPress in the browser via WebAssembly PHP
https://w.org/playground/
GNU General Public License v2.0
1.64k stars 258 forks source link

Doc: Explain what are isomorphic packages #505

Open adamziel opened 1 year ago

adamziel commented 1 year ago

Most playground packages aim to run both in the browser and in Node.js. Let's find a good place in the documentation to talk about that and discuss the upsides (like portability) and downsides (like inability to use browser– or node– specific APIs). Let's also share a few examples of isomorphic and non-isomorphic code.

eliot-akira commented 1 year ago

Another term I've seen used is "universal", for JavaScript modules that can run in the browser and server side.

The concept will probably come up again in relation to Blueprint steps. Currently, the importFile step uses DOMParser to interact with WP Importer's admin screens, which means it's not universal/isomorphic - it doesn't run in Node.js without importing JSDOM. Rewriting it to be universal is not trivial, but the end result will likely be more efficient to call WP Importer's functions directly instead of navigating HTML/DOM structure.

That makes me wonder how prevalent browser-specific code will be in user-written blueprints.

I think people are hearing more about isomorphic or non-isomorphic code in relation to React server/client components and Next.js use client directive. I wonder what are the similarities and differences.

adamziel commented 1 year ago

Currently, the importFile step uses DOMParser to interact with WP Importer's admin screens

I'd love to get rid of the DOMParser dependency. Ideally it would only call PHP code. An ideal rewrite would just call the same functions as the importer. Here's a few other ideas, just for fun:

I don't love either so calling the importer functions it is for now

That makes me wonder how prevalent browser-specific code will be in user-written blueprints.

Good question! At the moment, I'm not sure whether it is even possible to put anything browser-specific in a custom blueprint. Can you think of anything?

Think people are hearing more about isomorphic or non-isomorphic code in relation to React server/client components and Next.js use client directive. I wonder what are the similarities and differences.

That's a good one. I'll toy with this idea for a bit.