codesandbox/sandpack

Option to derive the `activeFile` via a URL param

andrico-anima opened this issue · 2 comments

andrico-anima commented

Tell us how you think we can improve Sandpack

When I click a file name via the file explorer, SandpackFileExplorer sets the current activeFile in the context.

As a result, the value is stored in memory and I have no way of sending a URL with the currently selected activeFile to a colleague.

This particularly useful for applications and sites built around Sandpack, like a web-based code editor.

This is the same behaviour that I've observed in CodeSandbox where the active file is set in the URL.

I would be interested to hear which of these proposed solutions the team would be interested in:

  1. Change the behaviour of the SandpackFileExplorer to set the value of the URL param. The SandpackContext listens for changes in the URL param, and sets the activeFile accordingly. Probably not ideal as the page could contain multiple instances of a Sandpack.
  2. Provide the SandboxContext with an option to write the activeFile to the URL param.
  3. Provide the SandpackFileExplorer with a prop to override the default selectFile function with one provided by the consumer of the component. The consumer could set the activeFile to the URL param. (They would have to wire up the rest of the logic in userland to subscribe to URL changes and update the context when it changes).
  4. Implement the entire flow in userland (which could be done in a few different ways).

What do you think?

None of the options feel like an ideal solution (save for maybe option 2), so I'm interested to hear what you all think

Packages affected

  • sandpack-client
  • sandpack-react
mehmetpekcan commented

I believe mutating consumer application URL state shouldn't be in the package logic since everyone may have different needs other than mutating URL params. Thats why I would pick your second option to manipulate URL param whenever an activeFile change. That would be best solution for that.

  • 👍2
andrico-anima commented

We ended up implementing the 4th option, where we listen to changes to the activeFile. It ended up working out fine for us, so I'm happy to close this issue unless anyone else feels like this behaviour should be handled within Sandpack