WIP: Version switcher

[davepagurek]

Here's an experiment to see what a version picker could look like on the web editor.

What works so far:

• Updating the version when index.html is edited seems stable and not super laggy!
• The logic of detecting a version only if we see exactly one script tag that we recognize seems to feel right

Screen.Recording.2025-02-06.at.8.24.27.PM.mov

What does not work so far, if I uncomment the code to actually replace the contents:

• After replacing, dom.documentElement.outerHTML doesn't have quite the same formatting as before (e.g. the DOCTYPE tag is gone) -- maybe there's another attribute I can use, need to experiment more
• Is there a good way to force CodeMirror to update when this happens? I have a commented-out attempt to replace its contents when the props change and are different than the current content, but this also has the effect of preventing people from typing.

Screen.Recording.2025-02-06.at.8.17.15.PM.mov

[welcome]

🎉 Thanks for opening this pull request! Please check out our contributing guidelines if you haven't already.

[davepagurek]

I made some updates to put the version settings in a modal! To do that, I mostly had to switch the tabs to being controlled instead of uncontrolled so that I could make an action that sets the starting tab.

Screen.Recording.2025-02-19.at.8.18.53.PM.mov

One thing that isn't quite handled yet is multiple p5.sound versions, that might take a bit more thought.

[davepagurek]

I looked into a few HTML parsing options using libraries, and.... none of them did a better job than the native DOMParser API at preserving whitespace (meaning: it doesn't do a great job.) So for now I'm just going to keep using the DOMParser API, and possibly if we want we can make it also run Tidy Code afterwards.

[davepagurek]

Another update! Now I'm detecting p5.sound versions, and offering a button to revert back if it was something non-default and we change it at all. This is stored in React state for the IDE view, so even if you close and open the preferences modal, the revert button will still be available.

Screen.Recording.2025-02-27.at.6.07.01.PM.mov

[ksen0]

Hi @davepagurek , just checked this out with @raclim !

What do think if the big button is not a button but an explanation of what happens if you click "on?" Right now looks like the big button reverts but the "On" button will update to a new version, which is a little unintuitive, so we were thinking about how to make it a bit more understandable.

What if there are still only "on" and "off" as clickable buttons, but in this special state, there's a (pink, obvious, bold?) text like "Want to turn this addon back on? The editor will use the original version you were using before turning it off!"

This is stored in React state for the IDE view, so even if you close and open the preferences modal, the revert button will still be available.

Sounds like this means if the user closes the tab and reopens, the information is lost? That seems fine for me, since then the basic idea of "go back to what you had before" is also very hard to remember and interpret.

[davepagurek]

What if there are still only "on" and "off" as clickable buttons, but in this special state, there's a (pink, obvious, bold?) text like "Want to turn this addon back on? The editor will use the original version you were using before turning it off!"

Agreed, that sounds like more intuitive behaviour. It does mean that old sketches wouldn't have an easy way to switch to using the new p5.sound.js, is that OK? I think that leads to the least confusion for now, and maybe in the future we could add a button like "Try the new p5.sound addon" once we or a contributor has the time to consider the UX edge cases.

Sounds like this means if the user closes the tab and reopens, the information is lost? That seems fine for me, since then the basic idea of "go back to what you had before" is also very hard to remember and interpret.

Right, exactly.

[davepagurek]

Here's an initial little animation to play when 2.0 is selected!

Screen.Recording.2025-03-11.at.1.27.15.PM.mov

[davepagurek]

Ok the p5.sound toggle now looks like this if you turned off a custom version, and toggling it back on restores it:

I've also made some UI updates to allow the long dropdown of versions to scroll, and detect p5.sound.min.js along with just .js.

Still to do before this is shippable:

• The version picker itself is pretty unstyled currently, it could look more like a dropdown
• Looks like there are some variations on the figma that use admonitions, @raclim do we want to switch to that?
• We have some description text missing too that we'll want to fill in