Codesandbox-client: Feature: Multiple Module Open on Embed

[AureliaEffect]

🌈 Feature

In almost 100% of the cases that we want to embed a sandbox in another page, we want to focus our reader's attention on more than one file. Usually, it's two or three files. Unfortunately, when we embed, we have to choose a single file to open and then the reader must click the hamburger menu to see other files. Once they do, they must know which secondary file to look for and select it to open it.

We'd like to propose that the module query string param of the embed be enhanced to take more than one file path. When multiple values are provided, the editor will open up one tab for each file path, with tabs ordered according to the list. The first file from the list will have its tab selected so that its contents are visible.

This could be done by allowing multiple instance of the module key in the query string or allowing multiple paths to be specified using a separator like + or ,.

This is a high priority feature for us as it causes confusion amongst our site users when they encounter a sandbox both on our home page and within our documentation.

We'd be happy to assist with a PR if you can point us to the right place and provide some quick guidance. It's very important to our scenarios.

[EisenbergEffect]

To add further clarity, today we have this:

But we want to have this:

The only difference is that in the second case, we have not only the app.js tab visible, but also the app.html tab, which is a critical part of the demo.

[CompuIves]

Great feature request! I pushed a fix and will deploy it tomorrow morning.

[EisenbergEffect]

Wow. Super awesome! Can you provide some quick documentation on how to use it once you release? We'll take advantage immediately and would want to make sure we get it configured correctly.

[CompuIves]

This will work from tomorrow: (eg. ?module=/src/index.js,/src/styles.css)

[EisenbergEffect]

Excellent!

[CompuIves]

Deployed it! https://codesandbox.io/embed/new?module=/src/index.js,/src/styles.css

[Vheissu]

I just wanted to leave a comment and say how genuinely I am impressed with the speed in which this suggestion was taken on board and implemented. I am really proud to be a Codesandbox supporter and this is by far one of the greatest things to happen to development in a long time. @CompuIves

[EisenbergEffect]

Thanks again @CompuIves ! You can see the new feature in action on our home page here: https://aurelia.io/

[CompuIves]

Hah, that's awesome @EisenbergEffect!

Thank you @Vheissu, that's really motivating!

[ipraveen]

Deployed it! https://codesandbox.io/embed/new?module=/src/index.js,/src/styles.css

Looks like it doesn't work with Medium. I am trying to embed below URL
https://codesandbox.io/s/481l76l2x9?view=editor&module=/src/Todo/TodoController.js,/src/Todo/TodoList.js

But it doesn't take TodoController and TodoList on Tabs.
with a single module, things work
https://codesandbox.io/s/481l76l2x9?view=editor&module=/src/Todo/TodoController.js