Manual sync for Web IDE for client and server side evaluation

Description

When using client side evaluation (Codesandbox live preview) or server side evaluation (web terminal mirroring https://gitlab.com/gitlab-org/gitlab-ee/issues/5276), changes are automatically synced from the editor to the run time environment with a short debounce.

This can be frustrating because incomplete changes can break the live preview, or cause auto reload mechanisms to crash. For this reason most local editors allow users to control if changes are auto-saved or not. We should make it possible to configure this.

Further details

Considering the upcoming feature to mirroring changes made in the Web IDE to the Web Terminal (https://gitlab.com/gitlab-org/gitlab-ee/issues/5276), the "auto save" approach has some disadvantages:

  • Performance: It makes more network requests to mirror changes for potentially garbage input.
  • Performance: Some commands trigger expensive actions whenever files change (i.e. a webpack build, running the test suite). "auto save" will trigger these actions more frequently.
  • UX: For some developers, "manual save" is a strong preference and ingrained into their natural rhythm.
  • UX: When using file watching commands (i.e. test / build), it's helpful to reference the output while developing. In these scenarios "save" becomes very intentional. With "auto save", the output will automatically be replaced with a new one whenever the user stops typing, which encourages productivity, but may not produce the most thoughtful code 😉

Proposal

Add a new option Auto-save to development environment (on or off) for users to control how the Web IDE makes changes available to client/server side evaluation environments.

Auto-save to development environment

Editor contents will be saved to the development environment when the editor loses focus or is closed. Use the Save keyboard shortcut (CTRL+s, Command+s) to save your changes immediately.

Saving changes to the development environment will not commit them to the repository. Remember to commit your changes!

If neither client side evaluation or server side evaluation is available, we should indicate this setting has no effect.

Implementation ideas

Ok, but how do you propose we implement something like this?

The core of this implementation is simple. In the Web IDE, we will introduce a buffer, which is a middleman between the editor and the file content.

  • When "auto save" is on, the editor writes directly to our file content (existing behavior):
Editor Change -----> File Content
  • When "auto save" is off, the editor will write to the buffer. When the user manually saves, the buffer is written to the content and then deleted:
Editor Change -----> File Buffer

Save --------------> File Buffer -----> File Content + Delete Buffer
  • "Does a file have unsaved changes?" is computed by simply checking if the corresponding buffer exists.
Edited by James Ramsay (ex-GitLab)