add useKeydown helper

packages/react/dist/index.es.js

@@ -564,15 +564,19 @@ function useScheduler(pattern, defaultOutput, interval = 0.1) {
   return { error, scheduler };
 }
 
-function useEvaluator(code, evalOnMount = true) {
+function useEvaluator({ code, evalOnMount = true }) {
   const [error, setError] = useState();
   const [activeCode, setActiveCode] = useState(code);
   const [pattern, setPattern] = useState();
   const isDirty = code !== activeCode;
-  const evaluate = useCallback(() => {
+  const evaluate$1 = useCallback(async () => {
+    if (!code) {
+      console.log("no code..");
+      return;
+    }
     try {
-      const _pattern = eval(code);
+      const { pattern: _pattern } = await evaluate(code);
-      setActiveCode(activeCode);
+      setActiveCode(code);
       setPattern(_pattern);
       setError();
     } catch (err) {
@@ -583,13 +587,20 @@ function useEvaluator(code, evalOnMount = true) {
   const inited = useRef();
   useEffect(() => {
     if (!inited.current && evalOnMount) {
-      evaluate();
+      inited.current = true;
+      evaluate$1();
     }
-    inited.current = true;
+  }, [evaluate$1, evalOnMount]);
-  }, [evaluate, evalOnMount]);
+  return { error, evaluate: evaluate$1, activeCode, pattern, isDirty };
-  return { error, evaluate, activeCode, pattern, isDirty };
 }
 
+// set active pattern on ctrl+enter
+const useKeydown = (callback) =>
+  useLayoutEffect(() => {
+    window.addEventListener('keydown', callback, true);
+    return () => window.removeEventListener('keydown', callback, true);
+  }, [callback]);
+
 /*
 useWebMidi.js - <short description TODO>
 Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/repl/src/useWebMidi.js>
@@ -629,4 +640,4 @@ function useWebMidi(props) {
   return { loading, outputs, outputByName };
 }
 
-export { CodeMirror, MiniRepl, cx, flash, useCycle, useEvaluator, useHighlighting, usePostMessage, useRepl, useScheduler, useWebMidi };
+export { CodeMirror, MiniRepl, cx, flash, useCycle, useEvaluator, useHighlighting, useKeydown, usePostMessage, useRepl, useScheduler, useWebMidi };

packages/react/src/hooks/useKeydown.mjs

@@ -0,0 +1,10 @@
+import { useLayoutEffect } from 'react';
+
+// set active pattern on ctrl+enter
+const useKeydown = (callback) =>
+  useLayoutEffect(() => {
+    window.addEventListener('keydown', callback, true);
+    return () => window.removeEventListener('keydown', callback, true);
+  }, [callback]);
+
+export default useKeydown;

packages/react/src/index.js

@@ -8,5 +8,6 @@ export { default as usePostMessage } from './hooks/usePostMessage';
 export { default as useRepl } from './hooks/useRepl';
 export { default as useScheduler } from './hooks/useScheduler';
 export { default as useEvaluator } from './hooks/useEvaluator';
+export { default as useKeydown } from './hooks/useKeydown';
 export { default as cx } from './cx';
 export { useWebMidi } from './hooks/useWebMidi';