feat: enable switching workspace storage in web

[CompuIves]

This is a more... controversial PR. In CodeSandbox I want to add the ability to seamless switch between workspaces, without refreshing. To enable this, I need to call switch on the StorageService, but workspace switching was never implemented for the web storage service! I implemented it in VSCode, and I verified that this works really well, but I also realise that this will make upgrades in the future harder.

The first approach I tried was copying all the code from the existing storage service in our code base, and making the changes there, but not enough services/utilities are exposed to do this. I'm happy to discuss other approaches.

[CompuIves]

Perhaps I could even try opening a PR to VSCode to support this 😂

[CompuIves]

Let's see 😇

microsoft/vscode#198594

[CGNonofr]

How do you use it in your code?

[CompuIves]

Whenever a user switch between a project, we don't reload the window. That's because we allow people to already type in the editor, and in the background we create the new project and then apply those changes. Purely UX reasoning.

We do want the new workspace storage to apply to the new project though, so whenever the project changes, we do this:

  runWithLatestMonacoConfig(async (config) => {
    return config.pitcher.onInstanceChanged(({ instanceId }) => {
      const workspaceIdentifier = monacoConfigToWorkspaceIdentifier(
        config,
        instanceId,
      );

      const storageService = StandaloneServices.get(IStorageService);
      storageService.switch(workspaceIdentifier, true).then(() => {
        reinitializeWorkspace(workspaceIdentifier);
      });
    });
  });

[CGNonofr]

Whenever a user switch between a project, we don't reload the window. That's because we allow people to already type in the editor, and in the background we create the new project and then apply those changes. Purely UX reasoning.

We do want the new workspace storage to apply to the new project though, so whenever the project changes, we do this:

  runWithLatestMonacoConfig(async (config) => {
    return config.pitcher.onInstanceChanged(({ instanceId }) => {
      const workspaceIdentifier = monacoConfigToWorkspaceIdentifier(
        config,
        instanceId,
      );

      const storageService = StandaloneServices.get(IStorageService);
      storageService.switch(workspaceIdentifier, true).then(() => {
        reinitializeWorkspace(workspaceIdentifier);
      });
    });
  });

How do you update the workspace in the workspace/configuration service?

[CGNonofr]

In the meantime, instead of changing the vscode impl, what about extending it into a SwitchableBrowserStorageService?

[CompuIves]

In the meantime, instead of changing the vscode impl, what about extending it into a SwitchableBrowserStorageService?

So I would extend the original BrowserStorageService and expose that? I think that's what I tried initially, but I need to change some fields of the class it's extending from, and that's not possible.

How do you update the workspace in the workspace/configuration service?

That's what reinitializeWorkspace does, or at least I was assuming that this would do this as it removes the current workspace directory and adds a new one in its place.

[CGNonofr]

Ok it seems harmless anyway, please resolve the conflicts and let's merge it!

We really need a better way to handle that vscode patch though, separating each change with an explanation. I'm not sure that's the best solution...

[CompuIves]

We really need a better way to handle that vscode patch though, separating each change with an explanation. I'm not sure that's the best solution...

Yeah, I was thinking about this as well. Maybe we can do something like this? I love that they say per patch why the patch is there.

[CompuIves]

Rebased!

[CGNonofr]

We really need a better way to handle that vscode patch though, separating each change with an explanation. I'm not sure that's the best solution...

Yeah, I was thinking about this as well. Maybe we can do something like this? I love that they say per patch why the patch is there.

How do they manage it?