Current module view not available in newest interface

[dlong500]

I noticed within the last couple weeks or so that some open source projects that have set up examples via a CodeSandbox project and made use of the "current module view" feature so that the preview window will render the contents of the active editor (rather than just the project entry page) have stopped working and there is apparently no longer a toggle button for Project view vs Current module view.

I was able to find a workaround by disabling the Sandbox beta editor setting, but even that required opening a new window and going to the original URL for the projects in question as it appears that any CodeSandbox URL starting with https://codesandbox.io/p/ use the new interface no matter what the beta editor setting is. Also, if you aren't signed into CodeSandbox then it appears ALL URLs now forward to the new /p/ type URL structure.

Is the "current module view" going to be added to the latest interface? This is an important feature for open source projects as it avoids having to set up a separate CodeSandbox project for each demo.

See downshift-js/downshift#1570 for context with actual real world usage.

[JamesACS]

Hello @dlong500 With our new editor, you can specify the default file for the editor to open on in an embed using the src attribute - you can see this in the example in our docs. Does this solve the issue for you?

[dlong500]

@JamesACS Unfortunately that doesn't allow for a hosting a project with a bunch of examples so that you can easily switch between files. You'd have to create a separate embed for each demo which entails a lot of boilerplate and time to get set up (which kind of defeats the purpose of sites like CodeSandbox),

Also, ideally you would be able to use current module view in a sandbox project even without embedding the sandbox at all so the full interface is available (as you could in the previous interface).

Again, see the downshift project as a real world example. The sandbox for their example demos is:
https://codesandbox.io/s/github/kentcdodds/downshift-examples

Under the old interface (using current module view) you could simply open one of the example files in the editor, refresh the preview, and the file that is active in the editor would render. Switching to a different example was as easy as clicking on a different file.

[dlong500]

That's great! The only question I would have is will the query parameter persist when clicking on different modules within the project? As long as the parameter persists then I don't see a problem without a UI switch.

[dlong500]

@CompuIves The moduleview=1 query parameter works well, so thanks for that! One little issue, however, is that unless an external link already contains the parameter it would seem the only way to add it is with the user manually adding it. There appears to be no way to set the parameter with a link on an index page inside the codesandbox project, as the embedded preview window is sandboxed without the allow-top-navigation flag set. Is there a way to generate a link within a codesandbox that would add that parameter programatically to the top-level window? Another possibility might be if we could add an option for a codesandbox project to default to the module view.

Sorry to keep bugging you but I feel like we're 95% there. It's usable now but could cause a bit of friction with users needing to manually add the query parameter after reaching the codesandbox page.

[coreybruyere]

Running into the same issue. Not sure I understand where to use ?moduleview=1 param for viewing individual modules on downshift examples page. Care to provide some more info? Thanks

[dlong500]

If you are on the downshift codesandbox page using the newest interface the URL structure for a GitHub repository-based sandbox likely already has a file query parameter like so:
https://codesandbox.io/p/sandbox/github/kentcdodds/downshift-examples/tree/master/?file=%2Fsrc%2Findex.js
You can append another query parameter with an &, so it would become:
https://codesandbox.io/p/sandbox/github/kentcdodds/downshift-examples/tree/master/?file=%2Fsrc%2Findex.js&moduleview=1

At that point you can now navigate to the various example modules and the module view will persist (thus running the code in the preview pane).

[luancardosolc]

Thanks for tip @dlong500, it helped me so much!

[CompuIves]

Interesting, do you have the ability to change the sandbox contents? I think I can also enable it if a certain config is inside the sandbox.

…

On Thu, May 23 2024 at 12:20 AM, Davison Long < ***@***.*** > wrote: @CompuIves ( https://github.com/CompuIves ) The moduleview=1 query parameter works well, so thanks for that! One little issue, however, is that unless an external link already contains the parameter it would seem the only way to add it is with the user manually adding it. There appears to be no way to set the parameter with a link on an index page inside the codesandbox project, as the embedded preview window is sandboxed without the allow-top-navigation flag set. Is there a way to generate a link within a codesandbox that would add that parameter programatically to the top-level window? Another possibility might be if we could add an option for a codesandbox project to default to the module view. Sorry to keep bugging you but I feel like we're 95% there. It's usable now but could cause a bit of friction with users needing to manually add the query parameter after reaching the codesandbox page. — Reply to this email directly, view it on GitHub ( #8350 (reply in thread) ) , or unsubscribe ( https://github.com/notifications/unsubscribe-auth/AAEPKCESR372WKWWWKQZPCDZDUK4NAVCNFSM6AAAAABDOYXHWSVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4TKMRXGYZDE ). You are receiving this because you were mentioned. Message ID: <codesandbox/codesandbox-client/repo-discussions/8350/comments/9527622 @ github. com>

[dlong500]

I'm not a maintainer. I can submit a PR to the downshift-examples GitHub repo, but it doesn't look like there are codesandbox settings in the actual examples repo. I would hope the current downshift maintainer could update the sandbox settings if necessary.