2.16.3

learn/docs.js

@@ -461,17 +461,18 @@ function setScrollBehavior(behavior) {
 }
 
 let currentLoadedSectionId = '';
-function executeDataScripts(content) {
+async function executeDataScripts(content) {
 	const scripts = content.querySelectorAll('script[type="mini"]');
-	scripts.forEach((script) => {
+	for (let script of scripts) {
 		let scriptContent = script.innerHTML.slice(0, -1).replaceAll('\t', '  ').trim();
 		let id = 'editor-' + script.id.slice(7);
 		script.insertAdjacentHTML('beforebegin', `<div id="${id}" class="editor-container"></div>`);
-		new MiniEditor(id, scriptContent);
-	});
+		let mini = new MiniEditor(id, scriptContent);
+		await mini.init();
+	}
 }
 
-function updateMainContent(sectionId, sections, callback) {
+async function updateMainContent(sectionId, sections, callback) {
 	setScrollBehavior('auto');
 	const contentArea = document.getElementById('content');
 
@@ -494,11 +495,11 @@ function updateMainContent(sectionId, sections, callback) {
 		const section = sections[sectionId];
 		let htmlContent = `<div id="${sectionId}">${marked.marked(section.content)}</div>`;
 
-		Object.keys(section.subsections).forEach((subId) => {
+		for (let subId in section.subsections) {
 			const subsection = section.subsections[subId];
 			htmlContent += `<div id="${subId}">${marked.marked(subsection.content)}</div>`;
-		});
-		contentArea.innerHTML = htmlContent;
+		}
+		contentArea.insertAdjacentHTML('beforeend', htmlContent);
 
 		const navButtonsContainer = document.createElement('div');
 		navButtonsContainer.className = 'nav-buttons-container';
@@ -537,16 +538,15 @@ function updateMainContent(sectionId, sections, callback) {
 		currentLoadedSectionId = sectionId;
 		window.location.hash = sectionId;
 
-		if (typeof callback === 'function') {
-			requestAnimationFrame(callback);
-		}
-
 		addCopyButtons();
 		generateHeadings();
 		convertMarkdownLinksToNavigationButtons(sections);
-		executeDataScripts(contentArea);
-
+		await executeDataScripts(contentArea);
 		updateStickyHeader();
+
+		if (typeof callback === 'function') {
+			requestAnimationFrame(callback);
+		}
 	}
 	const savedTheme = localStorage.getItem('theme') || 'light';
 

learn/mini-editor.js

@@ -4,7 +4,6 @@ class MiniEditor {
 	constructor(containerId, script) {
 		this.containerId = containerId;
 		this.initialCode = script;
-		this.init();
 	}
 
 	async init() {
@@ -63,15 +62,15 @@ class MiniEditor {
 					tabSize: 2
 				});
 
-				this.editorReady = true;
-
 				if (!typeDefs) {
 					let res = await fetch('/q5.d.ts');
 					typeDefs = await res.text();
 				}
 
 				monaco.languages.typescript.javascriptDefaults.addExtraLib(typeDefs, '/q5.d.ts');
 
+				this.editorReady = true;
+
 				resolve();
 			});
 		});

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "q5",
-	"version": "2.16.2",
+	"version": "2.16.3",
 	"description": "A sequel to p5.js that's optimized for interactive art",
 	"author": "quinton-ashley",
 	"contributors": [

q5.d.ts

@@ -248,7 +248,7 @@ function draw() {
 	var deltaTime: number;
 
 	/** ⭐️
-	 * q5 uses the same preload system as Java Processing and p5.js v1
+	 * q5 uses the same preload system as p5.js v1
 	 * to load assets asynchronously, before the setup and draw
 	 * functions are run. It makes it very easy for users to
 	 * load many images, sounds, and other assets at the same time.