Merge pull request #59 from p5cljs-editor/dev

fix bug #57

CHANGELOG.md

@@ -1,3 +1,6 @@
+## 0.14.2
+- fix bug #57 where the setup and draw functions continue to persist even after
+  stop
 ## 0.14.1
 - add longer run time for a test case that takes longer to run
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "p5-cljs-web-editor",
   "private": true,
-  "version": "0.14.1",
+  "version": "0.14.2",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/App.integration.test.jsx

@@ -196,5 +196,27 @@ describe('App integration test', () => {
 		expect(await page.$eval('#editor-console', e => e.children[0].children.length))
 			.toBe(0)
 	})
+	it('tests that user state is clean between sketches', async () => {
+		await page.click('.cm-editor')
+		await page.keyboard.down('Control')
+		await page.keyboard.press('KeyA')
+		await page.keyboard.up('Control')
+		await page.keyboard.press('Backspace')
+		await page.keyboard.type('(defn setup[] (println "HELLO"))')
+		await page.click('#run-btn')
+		expect(await page.$eval('#editor-console', e => e.children[0].children.length))
+			.toBe(1)
+
+		await page.click('.cm-editor')
+		await page.keyboard.down('Control')
+		await page.keyboard.press('KeyA')
+		await page.keyboard.up('Control')
+		await page.keyboard.press('Backspace')
+		await page.keyboard.type('(println "hello")')
+		await page.click('#run-btn')
+		expect(await page.$eval('#editor-console', e => e.children[0].children.length))
+			.toBe(1)
+
+	})
 
 })

src/components/Editor.jsx

@@ -1,7 +1,7 @@
 import CodeMirror from '@uiw/react-codemirror'
 import { clojure } from '@nextjournal/lang-clojure'
 import { useEffect, useState } from 'react'
-import { clearWindowGlobals, p5Methods, assignWindowGlobals, createP5ScriptTag, removeElementById } from '../lib/p5'
+import { clearWindowGlobals, p5Methods, assignWindowGlobals, removeElementById, clearCljsUserGlobals } from '../lib/p5'
 import { useSearchParams } from 'react-router-dom'
 import { defaultSketch, compile } from '../lib/cljs'
 import { encode, decode } from "../lib/compression"
@@ -13,7 +13,6 @@ import EditorConsole from './EditorConsole'
 const Editor = ({ setMethods }) => {
 	const [source, setSource] = useState("")
 	const [urlParams, setUrlParams] = useSearchParams();
-	const [error, setError] = useState(null);
 	const [consoleOpen, setConsoleOpen] = useState(false);
 	const [logs, setLogs] = useState([])
 	const [numErrors, setNumErrors] = useState(0)
@@ -56,9 +55,7 @@ const Editor = ({ setMethods }) => {
 			document.getElementById('editor').appendChild(script)
 
 			assignWindowGlobals()
-			setError("")
 		} else {
-			setError(compileResult.cause.message)
 			console.error(compileResult.cause.message)
 		}
 
@@ -93,6 +90,9 @@ const Editor = ({ setMethods }) => {
 	}
 
 	function stop() {
+		if (window.cljs.user) {
+			clearCljsUserGlobals()
+		}
 		clearWindowGlobals();
 		removeElementById("defaultCanvas0")
 	}

src/lib/p5/index.js

@@ -47,13 +47,23 @@ export function clearWindowGlobals() {
 	}))
 }
 
+/**
+ * Sets all cljs.user functions (e.g. setup, draw) back to undefined
+ */
+export function clearCljsUserGlobals() {
+	Object.keys(window.cljs.user).forEach(key => {
+		window.cljs.user[key] = undefined;
+	})
+}
+
+
 /**
  * Creates a script element with P5 CDN and returns it.
  * @returns {string} html literal
  */
-export function createP5ScriptTag(){
+export function createP5ScriptTag() {
 	const script = document.createElement("script")
-	script.setAttribute("id","p5-cdn")
+	script.setAttribute("id", "p5-cdn")
 	script.setAttribute("src", "https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.min.js")
 	return script;
 }
@@ -62,9 +72,9 @@ export function createP5ScriptTag(){
  * Removes an element from the DOM if it exists.
  * @param {string} id - id of the element to be removed from the dom
  */
-export function removeElementById(id){
+export function removeElementById(id) {
 	let elt = document.getElementById(id)
-	if(elt){
+	if (elt) {
 		elt.remove()
 	}
 }