Use the File System Access API to edit a local style

[josxha]

User Story

As a style developer, I want to create incremental changes to a map style and version control them in git. The current development process allows me to upload a local style and modify it, after that I need to download it and replace it with the obsolete version of the style in the version controled directory. I would prefer to open and edit my local style directly from my file system to prevent any manual replacement.

Possible Solution

This functionality is possible by using the File System API, in more particular the FileSystemFileHandle.

async function writeFile(fileHandle, contents) {
  // Create a FileSystemWritableFileStream to write to.
  const writable = await fileHandle.createWritable();

  // Write the contents of the file to the stream.
  await writable.write(contents);

  // Close the file and write the contents to disk.
  await writable.close();
}

This relatively new API is supported by all major browsers. A nice example use of this functioanlity has been implemented by https://app.diagrams.net/.

Loosly Related

• issue/910: Fix CORS warning for localhost #939
• Style Development for unpublished, or private or local styles #954

[HarelM]

I think you can use the docker image to achieve this functionality along with the desktop version, can't you?

[josxha]

@HarelM Yes this is indeed possible by using a local instance of Maputnik. Although, if moving the downloaded file to the correct directory is a workaround, setting up a local deployment seems to me like a workaround as well. I'm not saying that those are not valid options, but that the File System API might be a better solution.

[HarelM]

It might be and you are welcome to explore it, but the fact is that there is a solution to what you want to achieve, so this is a really nice to have if you'd ask me.
I never said anything about a workaround...

[josxha]

Created a pull request in #965 👍

[josxha]

Implemented in #965