fix cra lint errors

repl/src/App.js

@@ -1,7 +1,6 @@
 import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
 import CodeMirror, { markEvent, markParens } from './CodeMirror';
 import cx from './cx';
-import { evaluate, extend } from '@strudel/eval';
 import logo from './logo.svg';
 import playStatic from './static.mjs';
 import { defaultSynth } from '@strudel/tone';
@@ -10,6 +9,7 @@ import useRepl from './useRepl.mjs';
 import { useWebMidi } from './useWebMidi';
 import './App.css';
 // eval stuff start
+import { evaluate, extend } from '@strudel/eval';
 import * as strudel from '@strudel/core/strudel.mjs';
 import gist from '@strudel/core/gist.js';
 import { mini } from '@strudel/mini/mini.mjs';
@@ -37,7 +37,7 @@ extend(Tone, strudel, strudel.Pattern.prototype.bootstrap(), toneHelpers, voicin
 });
 // eval stuff end
 
-const [_, codeParam] = window.location.href.split('#');
+const codeParam = window.location.href.split('#')[1];
 let decoded;
 try {
   decoded = atob(decodeURIComponent(codeParam || ''));
@@ -59,7 +59,7 @@ function App() {
     useRepl({
       tune: decoded || randomTune,
       defaultSynth,
-      onDraw: useCallback(markEvent(editor), [editor]),
+      onDraw: useCallback((time, event) => markEvent(editor)(time, event), [editor]),
     });
   const [uiHidden, setUiHidden] = useState(false);
   const logBox = useRef();
@@ -73,29 +73,36 @@ function App() {
     // TODO: make sure this is only fired when editor has focus
     const handleKeyPress = async (e) => {
       if (e.ctrlKey || e.altKey) {
-        switch (e.code) {
+        if (e.code === 'Enter') {
-          case 'Enter':
+          await activateCode();
-            await activateCode();
+        } else if (e.code === 'Period') {
-            break;
+          cycle.stop();
-          case 'Period':
-            cycle.stop();
         }
       }
     };
     window.addEventListener('keydown', handleKeyPress);
     return () => window.removeEventListener('keydown', handleKeyPress);
-  }, [pattern, code]);
+  }, [pattern, code, activateCode, cycle]);
 
   useWebMidi({
-    ready: useCallback(({ outputs }) => {
+    ready: useCallback(
-      pushLog(`WebMidi ready! Just add .midi(${outputs.map((o) => `'${o.name}'`).join(' | ')}) to the pattern. `);
+      ({ outputs }) => {
-    }, []),
+        pushLog(`WebMidi ready! Just add .midi(${outputs.map((o) => `'${o.name}'`).join(' | ')}) to the pattern. `);
-    connected: useCallback(({ outputs }) => {
+      },
-      pushLog(`Midi device connected! Available: ${outputs.map((o) => `'${o.name}'`).join(', ')}`);
+      [pushLog],
-    }, []),
+    ),
-    disconnected: useCallback(({ outputs }) => {
+    connected: useCallback(
-      pushLog(`Midi device disconnected! Available: ${outputs.map((o) => `'${o.name}'`).join(', ')}`);
+      ({ outputs }) => {
-    }, []),
+        pushLog(`Midi device connected! Available: ${outputs.map((o) => `'${o.name}'`).join(', ')}`);
+      },
+      [pushLog],
+    ),
+    disconnected: useCallback(
+      ({ outputs }) => {
+        pushLog(`Midi device disconnected! Available: ${outputs.map((o) => `'${o.name}'`).join(', ')}`);
+      },
+      [pushLog],
+    ),
   });
 
   return (

repl/src/usePostMessage.mjs

@@ -1,11 +1,11 @@
-import { useEffect } from 'react';
+import { useEffect, useCallback } from 'react';
 
 function usePostMessage(listener) {
   useEffect(() => {
     window.addEventListener('message', listener);
     return () => window.removeEventListener('message', listener);
   }, [listener]);
-  return (data) => window.postMessage(data, '*');
+  return useCallback((data) => window.postMessage(data, '*'), []);
 }
 
 export default usePostMessage;

repl/src/useRepl.mjs

@@ -9,6 +9,7 @@ let s4 = () => {
     .toString(16)
     .substring(1);
 };
+const generateHash = (code) => encodeURIComponent(btoa(code));
 
 function useRepl({ tune, defaultSynth, autolink = true, onEvent, onDraw }) {
   const id = useMemo(() => s4(), []);
@@ -19,47 +20,8 @@ function useRepl({ tune, defaultSynth, autolink = true, onEvent, onDraw }) {
   const [pending, setPending] = useState(false);
   const [hash, setHash] = useState('');
   const [pattern, setPattern] = useState();
-  const dirty = code !== activeCode || error;
+  const dirty = useMemo(() => code !== activeCode || error, [code, activeCode, error]);
-  const generateHash = () => encodeURIComponent(btoa(code));
+  const pushLog = useCallback((message) => setLog((log) => log + `${log ? '\n\n' : ''}${message}`), []);
-  const activateCode = async (_code = code) => {
-    if (activeCode && !dirty) {
-      setError(undefined);
-      cycle.start();
-      return;
-    }
-    try {
-      setPending(true);
-      const parsed = await evaluate(_code);
-      cycle.start();
-      broadcast({ type: 'start', from: id });
-      setPattern(() => parsed.pattern);
-      if (autolink) {
-        window.location.hash = '#' + encodeURIComponent(btoa(code));
-      }
-      setHash(generateHash());
-      setError(undefined);
-      setActiveCode(_code);
-      setPending(false);
-    } catch (err) {
-      err.message = 'evaluation error: ' + err.message;
-      console.warn(err);
-      setError(err);
-    }
-  };
-  const pushLog = (message) => setLog((log) => log + `${log ? '\n\n' : ''}${message}`);
-  // logs events of cycle
-  const logCycle = (_events, cycle) => {
-    if (_events.length) {
-      // pushLog(`# cycle ${cycle}\n` + _events.map((e: any) => e.show()).join('\n'));
-    }
-  };
-
-  // below block allows disabling the highlighting by including "strudel disable-highlighting" in the code (as comment)
-  onDraw = useMemo(() => {
-    if (activeCode && !activeCode.includes('strudel disable-highlighting')) {
-      return onDraw;
-    }
-  }, [activeCode]);
 
   // cycle hook to control scheduling
   const cycle = useCycle({
@@ -87,7 +49,7 @@ function useRepl({ tune, defaultSynth, autolink = true, onEvent, onDraw }) {
           pushLog(err.message); // not with setError, because then we would have to setError(undefined) on next playable event
         }
       },
-      [onEvent]
+      [onEvent, pushLog, defaultSynth],
     ),
     onQuery: useCallback(
       (state) => {
@@ -100,9 +62,9 @@ function useRepl({ tune, defaultSynth, autolink = true, onEvent, onDraw }) {
           return [];
         }
       },
-      [pattern]
+      [pattern],
     ),
-    onSchedule: useCallback((_events, cycle) => logCycle(_events, cycle), [pattern]),
+    onSchedule: useCallback((_events, cycle) => logCycle(_events, cycle), []),
     ready: !!pattern && !!activeCode,
   });
 
@@ -114,36 +76,47 @@ function useRepl({ tune, defaultSynth, autolink = true, onEvent, onDraw }) {
     }
   });
 
-  // set active pattern on ctrl+enter
+  const activateCode = useCallback(
-  /* useLayoutEffect(() => {
+    async (_code = code) => {
-    // TODO: make sure this is only fired when editor has focus
+      if (activeCode && !dirty) {
-    const handleKeyPress = (e: any) => {
+        setError(undefined);
-      if (e.ctrlKey || e.altKey) {
+        cycle.start();
-        switch (e.code) {
+        return;
-          case 'Enter':
-            activateCode();
-            !cycle.started && cycle.start();
-            break;
-          case 'Period':
-            cycle.stop();
-        }
       }
-    };
+      try {
-    document.addEventListener('keypress', handleKeyPress);
+        setPending(true);
-    return () => document.removeEventListener('keypress', handleKeyPress);
+        const parsed = await evaluate(_code);
-  }, [pattern, code]); */
+        cycle.start();
+        broadcast({ type: 'start', from: id });
+        setPattern(() => parsed.pattern);
+        if (autolink) {
+          window.location.hash = '#' + encodeURIComponent(btoa(code));
+        }
+        setHash(generateHash(code));
+        setError(undefined);
+        setActiveCode(_code);
+        setPending(false);
+      } catch (err) {
+        err.message = 'evaluation error: ' + err.message;
+        console.warn(err);
+        setError(err);
+      }
+    },
+    [activeCode, dirty, code, cycle, autolink, id, broadcast],
+  );
+  // logs events of cycle
+  const logCycle = (_events, cycle) => {
+    if (_events.length) {
+      // pushLog(`# cycle ${cycle}\n` + _events.map((e: any) => e.show()).join('\n'));
+    }
+  };
 
-  /* useWebMidi({
+  // below block allows disabling the highlighting by including "strudel disable-highlighting" in the code (as comment)
-    ready: useCallback(({ outputs }) => {
+  onDraw = useMemo(() => {
-      pushLog(`WebMidi ready! Just add .midi(${outputs.map((o) => `'${o.name}'`).join(' | ')}) to the pattern. `);
+    if (activeCode && !activeCode.includes('strudel disable-highlighting')) {
-    }, []),
+      return onDraw;
-    connected: useCallback(({ outputs }) => {
+    }
-      pushLog(`Midi device connected! Available: ${outputs.map((o) => `'${o.name}'`).join(', ')}`);
+  }, [activeCode, onDraw]);
-    }, []),
-    disconnected: useCallback(({ outputs }) => {
-      pushLog(`Midi device disconnected! Available: ${outputs.map((o) => `'${o.name}'`).join(', ')}`);
-    }, []),
-  }); */
 
   const togglePlay = () => {
     if (!cycle.started) {