From 2495c286811ef825cd96d42e3aa803cdcd3d7dc7 Mon Sep 17 00:00:00 2001 From: ff6347 Date: Wed, 8 Nov 2023 19:57:29 +0100 Subject: [PATCH] feat(editor): Debounce input for smoother UX --- README.md | 17 +++++++---------- package-lock.json | 16 +++++++++++----- package.json | 1 + src/components/Sandbox.tsx | 31 ++++++++++++++----------------- tsconfig.json | 12 ++++++------ 5 files changed, 39 insertions(+), 38 deletions(-) diff --git a/README.md b/README.md index 1db3fb3..fb5a840 100644 --- a/README.md +++ b/README.md @@ -1,16 +1,13 @@ -# Astro Starter Kit: Basics +# P5 Code Sandbox -```sh -npm create astro@latest -- --template basics -``` - -[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics) -[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/basics) -[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/basics/devcontainer.json) +Small experiment to have a code sandbox for testing p5.js code. Based on [this blog](https://joyofcode.xyz/create-a-coding-sandbox) post "Create a JavaScript Code Sandbox" by Matija. -> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun! +## Development -![just-the-basics](https://github.com/withastro/astro/assets/2244813/a0a5533c-a856-4198-8470-2d67b1d7c554) +```bash +npm ci +npm run dev +``` ## 🚀 Project Structure diff --git a/package-lock.json b/package-lock.json index e54bf7e..4c9e8b9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,14 +1,12 @@ { "name": "@ff6347/p5-sandbox", - "version": "1.0.0", - "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@ff6347/p5-sandbox", - "version": "0.0.1", + "version": "1.0.0", "hasInstallScript": true, "dependencies": { "@astrojs/check": "0.3.1", @@ -19,6 +17,7 @@ "@types/react": "18.2.35", "@types/react-dom": "18.2.14", "astro": "3.4.3", + "lodash.debounce": "4.0.8", "p5": "1.8.0", "react": "18.2.0", "react-dom": "18.2.0", @@ -2037,6 +2036,7 @@ "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-6.2.0.tgz", "integrity": "sha512-kzRaCqXnpzWs+3z5ABPQiVke+iq0KXkHo8xiWV4RPTi5Yli0l97BEQuhXV1s7+aSU/fu1kUuxgS4MsQ0fRuygw==", "dev": true, + "peer": true, "dependencies": { "type-fest": "^3.0.0" }, @@ -2052,6 +2052,7 @@ "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-3.13.1.tgz", "integrity": "sha512-tLq3bSNx+xSpwvAJnzrK0Ep5CLNWjvFTOp71URMaAEWBfRb9nnJiBoUe0tF8bI4ZFO3omgBR6NvnbzVUT3Ly4g==", "dev": true, + "peer": true, "engines": { "node": ">=14.16" }, @@ -3266,7 +3267,7 @@ "version": "1.4.4", "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz", "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==", - "devOptional": true, + "optional": true, "dependencies": { "once": "^1.4.0" } @@ -4704,6 +4705,11 @@ "integrity": "sha512-kZzYOKspf8XVX5AvmQF94gQW0lejFVgb80G85bU4ZWzoJ6C03PQg3coYAUpSTpQWelrZELd3XWgHzw4Ck5kaIw==", "dev": true }, + "node_modules/lodash.debounce": { + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", + "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==" + }, "node_modules/lodash.escaperegexp": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/lodash.escaperegexp/-/lodash.escaperegexp-4.1.2.tgz", @@ -28398,7 +28404,7 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz", "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==", - "devOptional": true, + "optional": true, "dependencies": { "end-of-stream": "^1.1.0", "once": "^1.3.1" diff --git a/package.json b/package.json index 0083ccd..afcf436 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "@types/react": "18.2.35", "@types/react-dom": "18.2.14", "astro": "3.4.3", + "lodash.debounce": "4.0.8", "p5": "1.8.0", "react": "18.2.0", "react-dom": "18.2.0", diff --git a/src/components/Sandbox.tsx b/src/components/Sandbox.tsx index e8a4a59..f448bf5 100644 --- a/src/components/Sandbox.tsx +++ b/src/components/Sandbox.tsx @@ -1,5 +1,7 @@ -import "./sandox.css"; +import debounce from "lodash.debounce"; import React from "react"; +import "./sandox.css"; + import Editor from "@monaco-editor/react"; //@ts-ignore import globals from "@types/p5/global.d.ts?raw"; @@ -12,29 +14,23 @@ interface SandboxProps { description: string; initialCode: string; } -export function debounce(callback: () => void, delay = 500): () => void { - let timerId: NodeJS.Timeout; - - return () => { - clearTimeout(timerId); - timerId = setTimeout(callback, delay); - }; -} export default function Sandbox(props: SandboxProps) { const iframeRef = React.useRef(null); const [code, setCode] = React.useState(props.initialCode); + const debouncedSetCode = debounce((value) => setCode(value), 500); + React.useEffect(() => { console.log("code changed"); if (iframeRef.current) { const iframe = iframeRef.current; const source = /* html */ ` - - - - -