[Documentation] Playground Documentation: Mount Data

[juanmaguitar]

My experience trying to run the snippets at Mount Data has been a bit frustrating. For example, I haven't been able to test this snippet:

window.showDirectoryPicker().then(function (directoryHandle) {
	window.parent.postMessage({
		type: 'mount-directory-handle',
		directoryHandle,
		mountpoint: '/wordpress/wp-content/uploads/markdown/',
	});
});

• How can I use directoryHandle returned by the promise to mount a local folder on a client got doing const client = await startPlaygroundWeb({...})

• What's window.parent.postMessage for? It seems to be a way to communicate with web workers at remote.html but this is not documented anywhere. Shouldn't this window.parent.postMessage be run somehow from remote.html (as it's meant to be triggered from a child iframe?

If I do this

window.playgroundMountDirectory = async () => {
        const directoryHandle = await window.showDirectoryPicker()
        console.log(client.mount);
        console.log(directoryHandle);
        console.assert(!window.parent, '⚠️ window.parent is empty')
        window.parent.postMessage({
          type: 'mount-directory-handle',
          directoryHandle,
          mountpoint: '/wordpress/wp-content/uploads/custom/',
        });
        const mounted = await client.listFiles('/wordpress/wp-content/uploads/custom/')
        console.log(mounted);
        console.assert(mounted.length > 0, '⚠️ Mounted directory is empty')
      }

I get this

In that section, there's also a section and an example of Mount Browser's OPFS Storage. I'm missing in this section a brief introduction of what OPFS. AFAIU setting OPFS storage would persist changes across storage.

I have also tested the OPFS snippet and it's not persisting any changes in the content or plugins installations. Shouldn't it?

cc: @fellyph

[fellyph]

Thanks @juanmaguitar for the feedback, I will take a look at it.