fix: mini repl logs

packages/core/repl.mjs

@@ -16,6 +16,7 @@ export function repl({
   onToggle,
   editPattern,
 }) {
+  const id = s4();
   const scheduler = new Cyclist({
     interval,
     onTrigger: async (hap, deadline, duration, cps) => {
@@ -45,7 +46,7 @@ export function repl({
       let { pattern } = await _evaluate(code, transpiler);
 
       logger(`[eval] code updated`);
-      pattern = editPattern?.(pattern) || pattern;
+      pattern = editPattern?.(pattern, id) || pattern;
       scheduler.setPattern(pattern, autostart);
       afterEval?.({ code, pattern });
       return pattern;
@@ -63,5 +64,11 @@ export function repl({
     setCps,
     setcps: setCps,
   });
-  return { scheduler, evaluate, start, stop, pause, setCps };
+  return { scheduler, evaluate, start, stop, pause, setCps, id };
+}
+
+function s4() {
+  return Math.floor((1 + Math.random()) * 0x10000)
+    .toString(16)
+    .substring(1);
 }

packages/react/src/components/MiniRepl.jsx

@@ -49,7 +49,10 @@ export function MiniRepl({
   } = useStrudel({
     initialCode: tune,
     defaultOutput: webaudioOutput,
-    editPattern: (pat) => (punchcard ? pat.punchcard() : pat),
+    editPattern: (pat, id) => {
+      pat = pat.withContext((ctx) => ({ ...ctx, id }));
+      return punchcard ? pat.punchcard() : pat;
+    },
     getTime,
     evalOnMount,
     drawContext,
@@ -103,7 +106,7 @@ export function MiniRepl({
       // const logId = data?.pattern?.meta?.id;
       if (logId === replId) {
         setLog((l) => {
-          return l.concat([e.detail]).slice(-10);
+          return l.concat([e.detail]).slice(-8);
         });
       }
     }, []),

packages/react/src/hooks/useStrudel.mjs

@@ -19,8 +19,6 @@ function useStrudel({
   drawContext,
   drawTime = [-2, 2],
 }) {
-  const id = useMemo(() => s4(), []);
-  canvasId = canvasId || `canvas-${id}`;
   // scheduler
   const [schedulerError, setSchedulerError] = useState();
   const [evalError, setEvalError] = useState();
@@ -32,7 +30,7 @@ function useStrudel({
   const shouldPaint = useCallback((pat) => !!(pat?.context?.onPaint && drawContext), [drawContext]);
 
   // TODO: make sure this hook reruns when scheduler.started changes
-  const { scheduler, evaluate, start, stop, pause, setCps } = useMemo(
+  const { scheduler, evaluate, start, stop, pause, setCps, id } = useMemo(
     () =>
       repl({
         interval,
@@ -65,6 +63,8 @@ function useStrudel({
       }),
     [defaultOutput, interval, getTime],
   );
+
+  canvasId = canvasId || `canvas-${id}`;
   const broadcast = usePostMessage(({ data: { from, type } }) => {
     if (type === 'start' && from !== id) {
       // console.log('message', from, type);
@@ -158,9 +158,3 @@ function useStrudel({
 }
 
 export default useStrudel;
-
-function s4() {
-  return Math.floor((1 + Math.random()) * 0x10000)
-    .toString(16)
-    .substring(1);
-}