Merge pull request #58 from p5cljs-editor/dev

implement console feature

CHANGELOG.md

@@ -1,3 +1,10 @@
+## 0.14.1
+- add longer run time for a test case that takes longer to run
+
+## 0.14.0
+### New Features
+- there is now a console!
+
 ## 0.13.1
 - the about page now points to the github page
 - move tutorial.md to root of repo

package.json

@@ -1,7 +1,7 @@
 {
   "name": "p5-cljs-web-editor",
   "private": true,
-  "version": "0.13.1",
+  "version": "0.14.1",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -17,6 +17,7 @@
     "@nextjournal/lang-clojure": "^1.0.0",
     "@testing-library/react": "^14.0.0",
     "@uiw/react-codemirror": "^4.20.0",
+    "console-feed": "^3.5.0",
     "fflate": "^0.8.0",
     "framer-motion": "^10.12.16",
     "highlight.js": "^11.8.0",

src/App.integration.test.jsx

@@ -151,5 +151,50 @@ describe('App integration test', () => {
 
 		style = await page.$eval('#defaultCanvas0', e => e.getAttribute("style"))
 		expect(style).toBe("width: 400px; height: 400px;")
+	}, 10000)
+
+	it('tests that the console toggleable', async () => {
+		await expect(page.$('#editor-console')).resolves.toBeTruthy()
+		const height = await page.$eval('#editor-console', e => e.offsetHeight)
+		expect(height).toBe(0)
+
+		await page.click('#toggle-console-btn')
+		await expect(page.$('#editor-console')).resolves.toBeTruthy()
+		const openHeight = await page.$eval('#editor-console', e => e.offsetHeight)
+		expect(openHeight).toBeGreaterThan(height)
+
+		await page.click('#toggle-console-btn')
+		await expect(page.$('#editor-console')).resolves.toBeTruthy()
+		const closeHeight = await page.$eval('#editor-console', e => e.offsetHeight)
+		expect(closeHeight).toBe(height)
 	})
+
+	it('tests that the console is logging and clearing correctly', 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('(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")(println "HELLO 2")')
+		await page.click('#run-btn')
+		expect(await page.$eval('#editor-console', e => e.children[0].children.length))
+			.toBe(2)
+
+		await page.click('#clear-console-btn')
+		expect(await page.$eval('#editor-console', e => e.children[0].children.length))
+			.toBe(0)
+	})
+
 })

src/components/Editor.jsx

@@ -7,12 +7,16 @@ import { defaultSketch, compile } from '../lib/cljs'
 import { encode, decode } from "../lib/compression"
 import p5 from 'p5'
 import { keymap } from '@codemirror/view'
-import { Text, Flex, Box, Button } from '@chakra-ui/react'
+import { Text, Flex, Box, Button, Tag } from '@chakra-ui/react'
+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)
 	const extensions = [
 		clojure(),
 		keymap.of([
@@ -32,8 +36,12 @@ const Editor = ({ setMethods }) => {
 			setSource(decode(urlParams.get("sketch")))
 		}
 	}, [])
+	useEffect(() => {
+		setNumErrors(logs.filter(log => log.method == 'error').length)
+	}, [logs])
 
 	function run() {
+		setLogs([])
 		stop()
 		// PREPARE P5
 		const compileResult = compile(source)
@@ -117,21 +125,61 @@ const Editor = ({ setMethods }) => {
 			>
 				stop
 			</Button>
-			<Flex>
+			<Flex
+			>
 				<Box
 					flex="1"
 					border="1px"
 					borderColor="gray.200"
 					borderRadius="md"
 					overflow="hidden"
 					m="2"
+					h="100%"
 				>
 					<CodeMirror
 						value={source}
 						extensions={extensions}
 						onChange={e => setSource(e)}
-						height="70vh"
+						transition="0.5s"
+						height={consoleOpen ? "55vh" : "75vh"}
 					/>
+					<Flex backgroundColor="#d9d9d9" justify="space-between">
+						{
+							numErrors > 0 ?
+								<Tag
+									fontSize="xs"
+									backgroundColor="red"
+									color="white"
+								>{numErrors} error{numErrors > 1 ? "s" : ""}</Tag>
+								:
+								<span />
+						}
+						<Box>
+							<Button
+								variant="ghost"
+								size="xs"
+								color="gray.700"
+								colorScheme="pink"
+								borderRadius="0"
+								id="clear-console-btn"
+								onClick={() => { setLogs([]) }}
+							>
+								clear
+							</Button>
+							<Button
+								variant="ghost"
+								size="xs"
+								color="gray.700"
+								colorScheme="pink"
+								borderRadius="0"
+								id="toggle-console-btn"
+								onClick={() => { setConsoleOpen(!consoleOpen) }}
+							>
+								console {consoleOpen ? "▼" : "▲"}
+							</Button>
+						</Box>
+					</Flex>
+					<EditorConsole open={consoleOpen} logs={logs} setLogs={setLogs} />
 				</Box>
 				<Box flex="1" id="canvas-parent" m="2" />
 			</Flex>

src/components/EditorConsole.jsx

@@ -0,0 +1,21 @@
+import { Console, Hook, Unhook } from 'console-feed'
+import { useEffect, useState } from 'react'
+import { Box } from '@chakra-ui/react'
+
+const EditorConsole = ({ logs, setLogs, open }) => {
+	useEffect(() => {
+		const hookedConsole = Hook(
+			window.console,
+			(log) => setLogs((curLogs) => [...curLogs, log]),
+			false
+		)
+		return () => Unhook(hookedConsole)
+	}, [])
+	return (
+		<Box height={open ? "20vh" : "0vh"} overflowY="auto" id="editor-console">
+			<Console logs={logs} variant="light" />
+		</Box>
+	)
+}
+
+export default EditorConsole;