encapsulate repl logic into hook

repl/src/App.tsx

@@ -1,15 +1,11 @@
-import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import React, { useLayoutEffect, useRef } from 'react';
-import logo from './logo.svg';
-import cx from './cx';
 import * as Tone from 'tone';
-import useCycle from './useCycle';
-import type { Pattern } from './types';
-import * as tunes from './tunes';
-import { evaluate } from './evaluate';
 import CodeMirror from './CodeMirror';
-import hot from '../public/hot';
+import cx from './cx';
-import { isNote } from 'tone';
+import { evaluate } from './evaluate';
-import { useWebMidi } from './midi';
+import logo from './logo.svg';
+import * as tunes from './tunes';
+import useRepl from './useRepl';
 
 // TODO: use https://www.npmjs.com/package/@monaco-editor/react
 
@@ -38,108 +34,16 @@ function getRandomTune() {
 const randomTune = getRandomTune();
 
 function App() {
-  const [code, setCode] = useState<string>(decoded || randomTune);
+  const { setCode, setPattern, error, code, cycle, dirty, log, togglePlay } = useRepl({
-  const [activeCode, setActiveCode] = useState<string>();
+    tune: decoded || randomTune,
-  const [log, setLog] = useState('');
+    defaultSynth,
-  const logBox = useRef<any>();
-  const [error, setError] = useState<Error>();
-  const [pattern, setPattern] = useState<Pattern>();
-  const dirty = code !== activeCode;
-  const activateCode = (_code = code) => {
-    !cycle.started && cycle.start();
-    if (activeCode && !dirty) {
-      setError(undefined);
-      return;
-    }
-    try {
-      const parsed = evaluate(_code);
-      setPattern(() => parsed.pattern);
-      window.location.hash = '#' + encodeURIComponent(btoa(code));
-      setError(undefined);
-      setActiveCode(_code);
-    } catch (err: any) {
-      setError(err);
-    }
-  };
-  const pushLog = (message: string) => setLog((log) => log + `${log ? '\n\n' : ''}${message}`);
-  // logs events of cycle
-  const logCycle = (_events: any, cycle: any) => {
-    if (_events.length) {
-      pushLog(`# cycle ${cycle}\n` + _events.map((e: any) => e.show()).join('\n'));
-    }
-  };
-  // cycle hook to control scheduling
-  const cycle = useCycle({
-    onEvent: useCallback((time, event) => {
-      try {
-        if (!event.value?.onTrigger) {
-          const note = event.value?.value || event.value;
-          if (!isNote(note)) {
-            throw new Error('not a note: ' + note);
-          }
-          defaultSynth.triggerAttackRelease(note, event.duration, time);
-          /* console.warn('no instrument chosen', event);
-          throw new Error(`no instrument chosen for ${JSON.stringify(event)}`); */
-        } else {
-          const { onTrigger } = event.value;
-          onTrigger(time, event);
-        }
-      } catch (err: any) {
-        console.warn(err);
-        err.message = 'unplayable event: ' + err?.message;
-        pushLog(err.message); // not with setError, because then we would have to setError(undefined) on next playable event
-      }
-    }, []),
-    onQuery: useCallback(
-      (span) => {
-        try {
-          return pattern?.query(span) || [];
-        } catch (err: any) {
-          setError(err);
-          return [];
-        }
-      },
-      [pattern]
-    ),
-    onSchedule: useCallback((_events, cycle) => logCycle(_events, cycle), [pattern]),
-    ready: !!pattern,
   });
-
+  const logBox = useRef<any>();
-  // set active pattern on ctrl+enter
-  useLayoutEffect(() => {
-    const handleKeyPress = (e: any) => {
-      if (e.ctrlKey || e.altKey) {
-        switch (e.code) {
-          case 'Enter':
-            activateCode();
-            !cycle.started && cycle.start();
-            break;
-          case 'Period':
-            cycle.stop();
-        }
-      }
-    };
-    document.addEventListener('keypress', handleKeyPress);
-    return () => document.removeEventListener('keypress', handleKeyPress);
-  }, [pattern, code]);
-
   // scroll log box to bottom when log changes
   useLayoutEffect(() => {
     logBox.current.scrollTop = logBox.current?.scrollHeight;
   }, [log]);
 
-  useWebMidi({
-    ready: useCallback(({ 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(', ')}`);
-    }, []),
-    disconnected: useCallback(({ outputs }) => {
-      pushLog(`Midi device disconnected! Available: ${outputs.map((o) => `"${o.name}"`).join(', ')}`);
-    }, []),
-  });
-
   return (
     <div className="min-h-screen bg-[#2A3236] flex flex-col">
       <header className="flex-none w-full h-16 px-2 flex border-b border-gray-200 bg-white justify-between">
@@ -175,11 +79,7 @@ function App() {
               onChange={(_: any, __: any, value: any) => setCode(value)}
             />
             <span className="p-4 absolute top-0 right-0 text-xs whitespace-pre text-right">
-              {!cycle.started
+              {!cycle.started ? `press ctrl+enter to play\n` : dirty ? `ctrl+enter to update\n` : 'no changes\n'}
-                ? `press ctrl+enter to play\n`
-                : code !== activeCode
-                ? `ctrl+enter to update\n`
-                : 'no changes\n'}
             </span>
           </div>
           {error && (
@@ -188,16 +88,7 @@ function App() {
         </div>
         <button
           className="flex-none w-full border border-gray-700 p-2 bg-slate-700 hover:bg-slate-500"
-          onClick={() => {
+          onClick={() => togglePlay()}
-            // TODO: find out why sometimes, after a longer time coming back to the strudel repl, the button wont do anything
-            if (!cycle.started) {
-              // console.log('start');
-              activateCode();
-            } else {
-              // console.log('stop');
-              cycle.stop();
-            }
-          }}
         >
           {cycle.started ? 'pause' : 'play'}
         </button>

repl/src/useRepl.ts

@@ -0,0 +1,120 @@
+import { useCallback, useLayoutEffect, useRef, useState } from 'react';
+import { isNote } from 'tone';
+import { evaluate } from './evaluate';
+import { useWebMidi } from './midi';
+import type { Pattern } from './types';
+import useCycle from './useCycle';
+
+function useRepl({ tune, defaultSynth }) {
+  const [code, setCode] = useState<string>(tune);
+  const [activeCode, setActiveCode] = useState<string>();
+  const [log, setLog] = useState('');
+  const [error, setError] = useState<Error>();
+  const [pattern, setPattern] = useState<Pattern>();
+  const dirty = code !== activeCode;
+  const activateCode = (_code = code) => {
+    !cycle.started && cycle.start();
+    if (activeCode && !dirty) {
+      setError(undefined);
+      return;
+    }
+    try {
+      const parsed = evaluate(_code);
+      setPattern(() => parsed.pattern);
+      window.location.hash = '#' + encodeURIComponent(btoa(code));
+      setError(undefined);
+      setActiveCode(_code);
+    } catch (err: any) {
+      setError(err);
+    }
+  };
+  const pushLog = (message: string) => setLog((log) => log + `${log ? '\n\n' : ''}${message}`);
+  // logs events of cycle
+  const logCycle = (_events: any, cycle: any) => {
+    if (_events.length) {
+      pushLog(`# cycle ${cycle}\n` + _events.map((e: any) => e.show()).join('\n'));
+    }
+  };
+  // cycle hook to control scheduling
+  const cycle = useCycle({
+    onEvent: useCallback((time, event) => {
+      try {
+        if (!event.value?.onTrigger) {
+          const note = event.value?.value || event.value;
+          if (!isNote(note)) {
+            throw new Error('not a note: ' + note);
+          }
+          if (defaultSynth) {
+            defaultSynth.triggerAttackRelease(note, event.duration, time);
+          } else {
+            throw new Error('no defaultSynth passed to useRepl.');
+          }
+          /* console.warn('no instrument chosen', event);
+          throw new Error(`no instrument chosen for ${JSON.stringify(event)}`); */
+        } else {
+          const { onTrigger } = event.value;
+          onTrigger(time, event);
+        }
+      } catch (err: any) {
+        console.warn(err);
+        err.message = 'unplayable event: ' + err?.message;
+        pushLog(err.message); // not with setError, because then we would have to setError(undefined) on next playable event
+      }
+    }, []),
+    onQuery: useCallback(
+      (span) => {
+        try {
+          return pattern?.query(span) || [];
+        } catch (err: any) {
+          setError(err);
+          return [];
+        }
+      },
+      [pattern]
+    ),
+    onSchedule: useCallback((_events, cycle) => logCycle(_events, cycle), [pattern]),
+    ready: !!pattern,
+  });
+
+  // set active pattern on ctrl+enter
+  useLayoutEffect(() => {
+    const handleKeyPress = (e: any) => {
+      if (e.ctrlKey || e.altKey) {
+        switch (e.code) {
+          case 'Enter':
+            activateCode();
+            !cycle.started && cycle.start();
+            break;
+          case 'Period':
+            cycle.stop();
+        }
+      }
+    };
+    document.addEventListener('keypress', handleKeyPress);
+    return () => document.removeEventListener('keypress', handleKeyPress);
+  }, [pattern, code]);
+
+  useWebMidi({
+    ready: useCallback(({ 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(', ')}`);
+    }, []),
+    disconnected: useCallback(({ outputs }) => {
+      pushLog(`Midi device disconnected! Available: ${outputs.map((o) => `"${o.name}"`).join(', ')}`);
+    }, []),
+  });
+
+  const togglePlay = () => {
+    if (!cycle.started) {
+      activateCode();
+    } else {
+      cycle.stop();
+    }
+  };
+
+  return { code, setCode, pattern, error, cycle, setPattern, dirty, log, togglePlay };
+}
+
+export default useRepl;