remove hooks package for now

repl/src/App.js

@@ -6,7 +6,7 @@ import logo from './logo.svg';
 import playStatic from './static.mjs';
 import { defaultSynth } from '@strudel/tone';
 import * as tunes from './tunes.mjs';
-import useRepl from '@strudel/hooks/useRepl.mjs';
+import useRepl from './useRepl.mjs';
 import { useWebMidi } from './useWebMidi';
 import './App.css'
 

repl/src/tutorial/MiniRepl.jsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import { Tone } from '@strudel/tone';
-import useRepl from '@strudel/hooks/useRepl.mjs';
+import useRepl from '../useRepl.mjs';
 import CodeMirror, { markEvent } from '../CodeMirror';
 import cx from '../cx';
 

repl/src/useCycle.mjs

@@ -0,0 +1,86 @@
+import { useEffect, useState } from 'react';
+import { Tone } from '@strudel/tone';
+import { State, TimeSpan } from '@strudel/core';
+
+/* export declare interface UseCycleProps {
+  onEvent: ToneEventCallback<any>;
+  onQuery?: (state: State) => Hap[];
+  onSchedule?: (events: Hap[], cycle: number) => void;
+  onDraw?: ToneEventCallback<any>;
+  ready?: boolean; // if false, query will not be called on change props
+} */
+
+// function useCycle(props: UseCycleProps) {
+function useCycle(props) {
+  // onX must use useCallback!
+  const { onEvent, onQuery, onSchedule, ready = true, onDraw } = props;
+  const [started, setStarted] = useState(false);
+  const cycleDuration = 1;
+  const activeCycle = () => Math.floor(Tone.getTransport().seconds / cycleDuration);
+
+  // pull events with onQuery + count up to next cycle
+  const query = (cycle = activeCycle()) => {
+    const timespan = new TimeSpan(cycle, cycle + 1);
+    const events = onQuery?.(new State(timespan)) || [];
+    onSchedule?.(events, cycle);
+    // cancel events after current query. makes sure no old events are player for rescheduled cycles
+    // console.log('schedule', cycle);
+    // query next cycle in the middle of the current
+    const cancelFrom = timespan.begin.valueOf();
+    Tone.getTransport().cancel(cancelFrom);
+    // const queryNextTime = (cycle + 1) * cycleDuration - 0.1;
+    const queryNextTime = (cycle + 1) * cycleDuration - 0.5;
+
+    // if queryNextTime would be before current time, execute directly (+0.1 for safety that it won't miss)
+    const t = Math.max(Tone.getTransport().seconds, queryNextTime) + 0.1;
+    Tone.getTransport().schedule(() => {
+      query(cycle + 1);
+    }, t);
+
+    // schedule events for next cycle
+    events
+      ?.filter((event) => event.part.begin.equals(event.whole.begin))
+      .forEach((event) => {
+        Tone.getTransport().schedule((time) => {
+          const toneEvent = {
+            time: event.whole.begin.valueOf(),
+            duration: event.whole.end.sub(event.whole.begin).valueOf(),
+            value: event.value,
+            context: event.context,
+          };
+          onEvent(time, toneEvent);
+          Tone.Draw.schedule(() => {
+            // do drawing or DOM manipulation here
+            onDraw?.(time, toneEvent);
+          }, time);
+        }, event.part.begin.valueOf());
+      });
+  };
+
+  useEffect(() => {
+    ready && query();
+  }, [onEvent, onSchedule, onQuery, onDraw, ready]);
+
+  const start = async () => {
+    setStarted(true);
+    await Tone.start();
+    Tone.getTransport().start('+0.1');
+  };
+  const stop = () => {
+    Tone.getTransport().pause();
+    setStarted(false);
+  };
+  const toggle = () => (started ? stop() : start());
+  return {
+    start,
+    stop,
+    onEvent,
+    started,
+    setStarted,
+    toggle,
+    query,
+    activeCycle,
+  };
+}
+
+export default useCycle;

repl/src/usePostMessage.mjs

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

repl/src/useRepl.mjs

@@ -0,0 +1,174 @@
+import { useCallback, useState, useMemo } from 'react';
+import { evaluate } from '@strudel/eval';
+import { getPlayableNoteValue } from '@strudel/core/util.mjs';
+import useCycle from './useCycle.mjs';
+import usePostMessage from './usePostMessage.mjs';
+
+let s4 = () => {
+  return Math.floor((1 + Math.random()) * 0x10000)
+    .toString(16)
+    .substring(1);
+};
+
+function useRepl({ tune, defaultSynth, autolink = true, onEvent, onDraw }) {
+  const id = useMemo(() => s4(), []);
+  const [code, setCode] = useState(tune);
+  const [activeCode, setActiveCode] = useState();
+  const [log, setLog] = useState('');
+  const [error, setError] = useState();
+  const [pending, setPending] = useState(false);
+  const [hash, setHash] = useState('');
+  const [pattern, setPattern] = useState();
+  const dirty = code !== activeCode || error;
+  const generateHash = () => encodeURIComponent(btoa(code));
+  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({
+    onDraw,
+    onEvent: useCallback(
+      (time, event) => {
+        try {
+          onEvent?.(event);
+          const { onTrigger, velocity } = event.context;
+          if (!onTrigger) {
+            if (defaultSynth) {
+              const note = getPlayableNoteValue(event);
+              defaultSynth.triggerAttackRelease(note, event.duration, time, velocity);
+            } 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 {
+            onTrigger(time, event);
+          }
+        } catch (err) {
+          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
+        }
+      },
+      [onEvent]
+    ),
+    onQuery: useCallback(
+      (state) => {
+        try {
+          return pattern?.query(state) || [];
+        } catch (err) {
+          console.warn(err);
+          err.message = 'query error: ' + err.message;
+          setError(err);
+          return [];
+        }
+      },
+      [pattern]
+    ),
+    onSchedule: useCallback((_events, cycle) => logCycle(_events, cycle), [pattern]),
+    ready: !!pattern && !!activeCode,
+  });
+
+  const broadcast = usePostMessage(({ data: { from, type } }) => {
+    if (type === 'start' && from !== id) {
+      // console.log('message', from, type);
+      cycle.setStarted(false);
+      setActiveCode(undefined);
+    }
+  });
+
+  // set active pattern on ctrl+enter
+  /* useLayoutEffect(() => {
+    // TODO: make sure this is only fired when editor has focus
+    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 {
+    pending,
+    code,
+    setCode,
+    pattern,
+    error,
+    cycle,
+    setPattern,
+    dirty,
+    log,
+    togglePlay,
+    activateCode,
+    activeCode,
+    pushLog,
+    hash,
+  };
+}
+
+export default useRepl;