[Performance] blobs created by preview are not revoked

p5.js version

No response

What is your operating system?

None

Web browser and version

Chrome 113.0.5672.93

Actual Behavior

Blob URLs generated by previous version of my code stay valid and usable even after changing the code.

Expected Behavior

All previous blobs should be revoked when generating the next version of the preview.

Steps to reproduce

This is moreso something that I noticed in the code itself, but I do have steps.

Steps:

1. Open a new sketch in the editor and hit the play button.
2. Inspect the source code and find the two active blob urls: there is one for iframe itself (the rendered html document) and another containing the source text of the sketch.js file.
3. Open these urls in a new tab or window.
4. Go back to the editor, change the source code, and hit play again. Observe the new preview.
5. Go the tabs with your old blobs and use the browser reload button. They still work! 😱
6. Close the editor window.
7. Reload the blobs again. They do not work anymore because a blob only lasts for the lifetime of the document that created it.

All blobs will get cleaned up eventually when the user closes the page so this is not catastrophic. We could revoke outdated blobs while the user is editing and reloading so that we aren't filling up memory unnecessarily. We are attempting to do this, but the code for that isn't quite right. We're revoking the url from a file.blobUrl property which has not actually been set.

The relevant entry point is preview generation and the file.blobUrl cleanup mentioned in the issue; start by tracing how the iframe and sketch.js blob URLs are created and replaced. Reproduce the reload steps in Chrome, then verify that outdated URLs are revoked on the next preview while the current preview still works.