Most appropriate sections of the p5.js website?

Reference

What is your operating system?

Mac OS

Web browser and version

Firefox

Actual Behavior

If you open https://beta.p5js.org/reference/p5/arc/ and inspect element, the head tag has multiple p5 scripts:

• Each example in the p5 reference loaded in an <iframe> tag with the following source:

  p5.js-website/src/components/CodeEmbed/frame.tsx

  Line 31 in 8e571e8

  const wrapInMarkup = (code: CodeBundle) =>

• It might be because of this:

  p5.js-website/src/components/CodeEmbed/index.jsx

  Line 70 in 8e571e8

  const p5ScriptElement = document.createElement("script");

  • To make sure the p5 script is cached when multiple examples use it, a <script> tag is created on the main page (this triggers the browser/service worker to cache its contents) and then the contents is fetched (which uses the cache) and sent to each example here:

    p5.js-website/src/components/CodeEmbed/frame.tsx

    Line 134 in 8e571e8

    const p5ScriptText = await fetch(p5ScriptTag.src).then((res) =>

  • It looks like it doesn't check if that script tag already exists before making it, so every example creates a new tag
  • Maybe we just need to check if something with that id already exists on the page and only make a new tag if it's not already there?
  • Alternatively, we load and cache it without using a script tag at all (will a fetch() cache it?)

Expected Behavior

• Ideally, p5 is not loaded at all on the main page, and is just loaded in the example iframes.
• Whatever we do, in the browser dev tools network tab, we should only see the script being loaded over the internet once for the whole reference page -- it should be cached when subsequent examples use it.

Steps to reproduce

Open https://beta.p5js.org/reference/p5/arc/ and inspect element, then look at the head tag

Would you like to work on the issue?

Someone else can take this!