Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Web: Support mounting OPFS at arbitrary paths in Playground (#1479)
## Motivation for the change, related issues
We're hacking on a Markdown editor, and it can only be useful if there's
a way of editing local Markdown files. This PR provides just that.
## Implementation details
### `startPlaygroundWeb()` now accepts an `onBeforeBlueprint` callback
To mount the markdown files before the Blueprint runs, we added a way to
await user input in the flow. It's an async callback that
`startPlaygroundWeb()` will await before running the Blueprint. It's
used like this:
```ts
startPlaygroundWeb({
// ... options
async onBeforeBlueprint() {
if(!usingDirectoryHandle) return;
const directoryHandle = await handleFromUserInput;
await playground.bindOpfs({
opfs: directoryHandle,
mountpoint: '/wordpress/wp-content/markdown'
});
}
});
```
### Accepting a mountpoint in `playground.bindOpfs()`
It is now possible to pass an arbitrary mountpoint when binding a
DirectoryHandle to Playground's virtual filesystem. For example:
```ts
await playground.bindOpfs({
opfs: markdownDirectory,
mountpoint: '/wordpress/wp-content/markdown',
initialSyncDirection: 'opfs-to-memfs',
};
```
Here's the how the `bindOpfs` signature changed:
**Before:**
```ts
async bindOpfs(
opfs: FileSystemDirectoryHandle,
onProgress?: SyncProgressCallback
)
```
**After:**
```ts
async bindOpfs(
options: BindOpfsOptions,
onProgress?: SyncProgressCallback
)
```
You might wonder why is onProgress not a part of `options`. Great
question! That's because the `.bindOpfs` call is done in a top-level
page that embeds `remote.html` via an iframe and the arguments are
serialized and passed by the Comlink.js library. We do have handlers for
serializing functions, but not for serializing functions that are object
properties. This could be improved in the future, but for now onProgress
will remain a separate argument.
### Markdown modal
### Internal changes in Playground website
Part of the state is now managed using redux instead of React context.
There's still some context left to refactor, that would make a great
follow-up PR.
## Testing Instructions (or ideally a Blueprint)
* Go to Playground settings, select storage type device, select an empty
directory, confirm WordPress got copied there without any issues. Then
make some changes in WordPress, reload the page, confirm your changes
are still there.
* Go to the Markdown modal flow at
http://localhost:5400/website-server/?modal=mount-markdown-directory,
select a non-empty directory, confirm it's now mounted by running this
in your devtools and inspecting the resulting list:
```js
await playground.listFiles('/wordpress/wp-content/markdown');
```
---------
Co-authored-by: bgrgicak <[email protected]>- Loading branch information
