Persistent Playground: Sync between MEMFS and OPFS

[adamziel]

Description

#544 explores a full Emscripten OPFS filesystem backend, but
there is one last issue I may not be able to figure out before my
Sabbatical (June 26th - Sep 26th).

This PR attempts another approach I should be able to ship. Namely,
it synchronizes MEMFS changes to OPFS and restores them after a
page refresh.

The main idea is:

1. Keep track of all modified files
2. Only sync files on that list

OPFS is only supported in Chrome-based browsers at the moment like Edge, Android browser. Safari and Firefox users won't be able to benefit from this feature yet

Performance

• Full WordPress OPFS->MEMFS: ~340 ms
• Full WordPress MEMFS->OPFS: ~506 ms
• Typical sync MEMFS->OPFS: 2.5 ms

Other explored approaches

This approach failed:

1. Compare last modified time
2. Copy MEMFS files to OPFS if they were updated more recently

mtime doesn't bubble up through directories and comparing all files is too slow.

Screenshots

CleanShot.2023-06-13.at.10.47.30.1.mp4

Remaining work

• Fix crash on plugin upload
• Only apply PHP patches once
• Disable OPFS by default, add a worker setting to enable it
• Add a query parameter to enable OPFS
• Integrate the synchronizer without changing PHP internals
• Move it to @wp-playground/remote package
• Do not perform a full MEMFS->OPFS sync after the initial OPFS->MEMFS restore

Follow-up work

• Ensure multiple persistent Playground instances don't compete for OPFS storage – perhaps use a single SharedWorker to serve them? But that won't help with MEMFS. So maybe redirect to the scoped site or display an error message when another persistent tab is already active?
• Detect corrupt state (e.g. OPFS sync stopped in the middle) and tell the user what happened. Automatically recover when possible.
• Add a "reset persistent site" feature

cc @eliot-akira @dmsnell

[adamziel]

requestFileSystem support: