add onEvent to useRepl

repl/src/useRepl.ts

@@ -1,7 +1,6 @@
-import { useCallback, useLayoutEffect, useState, useMemo, useEffect } from 'react';
+import { useCallback, useState, useMemo } from 'react';
 import { isNote } from 'tone';
 import { evaluate } from './evaluate';
-import { useWebMidi } from './midi';
 import type { Pattern } from './types';
 import useCycle from './useCycle';
 import usePostMessage from './usePostMessage';
@@ -12,7 +11,7 @@ let s4 = () => {
     .substring(1);
 };
 
-function useRepl({ tune, defaultSynth, autolink = true }) {
+function useRepl({ tune, defaultSynth, autolink = true, onEvent }: any) {
   const id = useMemo(() => s4(), []);
   const [code, setCode] = useState<string>(tune);
   const [activeCode, setActiveCode] = useState<string>();
@@ -48,8 +47,10 @@ function useRepl({ tune, defaultSynth, autolink = true }) {
   };
   // cycle hook to control scheduling
   const cycle = useCycle({
-    onEvent: useCallback((time, event) => {
+    onEvent: useCallback(
+      (time, event) => {
         try {
+          onEvent?.(event);
           if (!event.value?.onTrigger) {
             const note = event.value?.value || event.value;
             if (!isNote(note)) {
@@ -71,7 +72,9 @@ function useRepl({ tune, defaultSynth, autolink = true }) {
           err.message = 'unplayable event: ' + err?.message;
           pushLog(err.message); // not with setError, because then we would have to setError(undefined) on next playable event
         }
-    }, []),
+      },
+      [onEvent]
+    ),
     onQuery: useCallback(
       (span) => {
         try {
@@ -146,7 +149,7 @@ function useRepl({ tune, defaultSynth, autolink = true }) {
     togglePlay,
     activateCode,
     activeCode,
-    pushLog,
+    pushLog
   };
 }