Refactor defaultHTML to accept options object

Hugo-RM · Hugo-RM · commit f53f7b0aa2f7 · 2025-11-03T05:50:27.000Z
Convert defaultHTML from a constant string to a function that accepts
an options object for version and add-on library configuration. This
enables URL parameter parsing for library selection.

Maintains backward compatibility - calling defaultHTML() with no
arguments produces the same output as before.
diff --git a/client/modules/IDE/reducers/files.js b/client/modules/IDE/reducers/files.js
@@ -32,7 +32,7 @@ export const initialState = () => {
     },
     {
       name: 'index.html',
-      content: defaultHTML,
+      content: defaultHTML(),
       id: b,
       _id: b,
       fileType: 'file',
diff --git a/server/domain-objects/createDefaultFiles.js b/server/domain-objects/createDefaultFiles.js
@@ -8,11 +8,35 @@ function draw() {
   background(220);
 }`;
 
-export const defaultHTML = `<!DOCTYPE html>
+export function defaultHTML({
+  version = currentP5Version,
+  sound = true,
+  preload = false,
+  shapes = false,
+  data = false
+} = {}) {
+  const soundURL = version.startsWith('2.')
+    ? `https://cdn.jsdelivr.net/npm/p5.sound@0.2.0/dist/p5.sound.min.js`
+    : `https://cdnjs.cloudflare.com/ajax/libs/p5.js/${version}/addons/p5.sound.min.js`;
+
+  const libraries = [
+    `<script src="https://cdn.jsdelivr.net/npm/p5@${version}/lib/p5.js"></script>`,
+    sound ? `<script src="${soundURL}"></script>` : '',
+    preload
+      ? `<script src="https://cdn.jsdelivr.net/npm/p5.js-compatibility@0.1.2/src/preload.js"></script>`
+      : '',
+    shapes
+      ? `<script src="https://cdn.jsdelivr.net/npm/p5.js-compatibility@0.1.2/src/shapes.js"></script>`
+      : '',
+    data
+      ? `<script src="https://cdn.jsdelivr.net/npm/p5.js-compatibility@0.1.2/src/data.js"></script>`
+      : ''
+  ].join('\n    ');
+
+  return `<!DOCTYPE html>
 <html lang="en">
   <head>
-    <script src="https://cdn.jsdelivr.net/npm/p5@${currentP5Version}/lib/p5.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/p5@${currentP5Version}/lib/addons/p5.sound.min.js"></script>
+    ${libraries}
     <link rel="stylesheet" type="text/css" href="style.css">
     <meta charset="utf-8" />
 
@@ -24,6 +48,7 @@ export const defaultHTML = `<!DOCTYPE html>
   </body>
 </html>
 `;
+}
 
 export const defaultCSS = `html, body {
   margin: 0;
@@ -37,7 +62,7 @@ canvas {
 export default function createDefaultFiles() {
   return {
     'index.html': {
-      content: defaultHTML
+      content: defaultHTML()
     },
     'style.css': {
       content: defaultCSS

Original file line number	Diff line number	Diff line change
`@@ -32,7 +32,7 @@ export const initialState = () => {`
`32`	`32`	`},`
`33`	`33`	`{`
`34`	`34`	`name: 'index.html',`
`35`		`- content: defaultHTML,`
	`35`	`+ content: defaultHTML(),`
`36`	`36`	`id: b,`
`37`	`37`	`_id: b,`
`38`	`38`	`fileType: 'file',`