fix mini repl + improve repl api

packages/core/index.mjs

@@ -23,7 +23,7 @@ export { default as gist } from './gist.js';
 /* import * as p from './package.json';
 export const version = p.version; */
 console.log(
-  '%c // 🌀 @strudel.cycles/core loaded 🌀', // keep "//" for runnable snapshot source..
+  '%c 🌀 @strudel.cycles/core loaded 🌀', // keep "//" for runnable snapshot source..
   'background-color: black;color:white;padding:4px;border-radius:15px',
 );
 if (globalThis._strudelLoaded) {

packages/core/repl.mjs

@@ -6,27 +6,30 @@ export function repl({
   defaultOutput,
   onSchedulerError,
   onEvalError,
-  onEval,
+  beforeEval,
+  afterEval,
   getTime,
   transpiler,
   onToggle,
 }) {
   const scheduler = new Cyclist({ interval, onTrigger: defaultOutput, onError: onSchedulerError, getTime, onToggle });
-  const evaluate = async (code) => {
+  const evaluate = async (code, autostart = true) => {
     if (!code) {
       throw new Error('no code to evaluate');
     }
     try {
+      beforeEval({ code });
       const { pattern } = await _evaluate(code, transpiler);
-      scheduler.setPattern(pattern, true);
-      onEval?.({
-        pattern,
-        code,
-      });
+      scheduler.setPattern(pattern, autostart);
+      afterEval({ code, pattern });
+      return pattern;
     } catch (err) {
       console.warn(`eval error: ${err.message}`);
       onEvalError?.(err);
     }
   };
-  return { scheduler, evaluate };
+  const stop = () => scheduler.stop();
+  const start = () => scheduler.start();
+  const pause = () => scheduler.pause();
+  return { scheduler, evaluate, start, stop, pause };
 }

packages/mini/krill-parser.js

@@ -32,7 +32,7 @@ function peg$padEnd(str, targetLength, padString) {
 }
 
 peg$SyntaxError.prototype.format = function(sources) {
-  var str = "Error: " + this.message;
+  var str = "peg error: " + this.message;
   if (this.location) {
     var src = null;
     var k;

packages/react/src/components/MiniRepl.jsx

@@ -7,20 +7,33 @@ import 'tailwindcss/tailwind.css';
 import './style.css';
 import styles from './MiniRepl.module.css';
 import { Icon } from './Icon';
-import { getAudioContext } from '@strudel.cycles/webaudio';
-// import { Tone } from '@strudel.cycles/tone';
+import { getAudioContext, webaudioOutput } from '@strudel.cycles/webaudio';
+import useStrudel from '../hooks/useStrudel.mjs';
 
-export function MiniRepl({ tune, hideOutsideView = false, init, onEvent, enableKeyboard }) {
-  return <p>TODO</p>;
-  /*   const { code, setCode, pattern, activeCode, activateCode, evaluateOnly, error, cycle, dirty, togglePlay, stop } =
-    useRepl({
-      tune,
-      autolink: false,
-      onEvent,
-    });
-  useEffect(() => {
-    init && evaluateOnly();
-  }, [tune, init]);
+const getTime = () => getAudioContext().currentTime;
+
+export function MiniRepl({ tune, hideOutsideView = false, init, enableKeyboard }) {
+  const {
+    code,
+    setCode,
+    evaluate,
+    activateCode,
+    error,
+    isDirty,
+    activeCode,
+    pattern,
+    started,
+    scheduler,
+    togglePlay,
+    stop,
+  } = useStrudel({
+    initialCode: tune,
+    defaultOutput: webaudioOutput,
+    getTime,
+  });
+  /*   useEffect(() => {
+    init && activateCode();
+  }, [init, activateCode]); */
   const [view, setView] = useState();
   const [ref, isVisible] = useInView({
     threshold: 0.01,
@@ -35,8 +48,8 @@ export function MiniRepl({ tune, hideOutsideView = false, init, onEvent, enableK
   useHighlighting({
     view,
     pattern,
-    active: cycle.started && !activeCode?.includes('strudel disable-highlighting'),
-    getTime: () => getAudioContext().seconds,
+    active: started && !activeCode?.includes('strudel disable-highlighting'),
+    getTime: () => scheduler.phase,
   });
 
   // set active pattern on ctrl+enter
@@ -49,7 +62,7 @@ export function MiniRepl({ tune, hideOutsideView = false, init, onEvent, enableK
             flash(view);
             await activateCode();
           } else if (e.code === 'Period') {
-            cycle.stop();
+            stop();
             e.preventDefault();
           }
         }
@@ -57,16 +70,16 @@ export function MiniRepl({ tune, hideOutsideView = false, init, onEvent, enableK
       window.addEventListener('keydown', handleKeyPress, true);
       return () => window.removeEventListener('keydown', handleKeyPress, true);
     }
-  }, [enableKeyboard, pattern, code, activateCode, cycle, view]);
+  }, [enableKeyboard, pattern, code, evaluate, stop, view]);
 
   return (
     <div className={styles.container} ref={ref}>
       <div className={styles.header}>
         <div className={styles.buttons}>
-          <button className={cx(styles.button, cycle.started ? 'sc-animate-pulse' : '')} onClick={() => togglePlay()}>
-            <Icon type={cycle.started ? 'pause' : 'play'} />
+          <button className={cx(styles.button, started ? 'sc-animate-pulse' : '')} onClick={() => togglePlay()}>
+            <Icon type={started ? 'pause' : 'play'} />
           </button>
-          <button className={cx(dirty ? styles.button : styles.buttonDisabled)} onClick={() => activateCode()}>
+          <button className={cx(isDirty ? styles.button : styles.buttonDisabled)} onClick={() => activateCode()}>
             <Icon type="refresh" />
           </button>
         </div>
@@ -76,5 +89,5 @@ export function MiniRepl({ tune, hideOutsideView = false, init, onEvent, enableK
         {show && <CodeMirror6 value={code} onChange={setCode} onViewChanged={setView} />}
       </div>
     </div>
-  ); */
+  );
 }

packages/react/src/hooks/useStrudel.mjs

@@ -2,16 +2,18 @@ import { useRef, useCallback, useEffect, useMemo, useState } from 'react';
 import { repl } from '@strudel.cycles/core/repl.mjs';
 import { transpiler } from '@strudel.cycles/transpiler';
 
-function useStrudel({ defaultOutput, interval, getTime, code, evalOnMount = false }) {
+function useStrudel({ defaultOutput, interval, getTime, evalOnMount = false, initialCode = '' }) {
   // scheduler
   const [schedulerError, setSchedulerError] = useState();
   const [evalError, setEvalError] = useState();
+  const [code, setCode] = useState(initialCode);
   const [activeCode, setActiveCode] = useState(code);
   const [pattern, setPattern] = useState();
   const [started, setStarted] = useState(false);
   const isDirty = code !== activeCode;
+
   // TODO: make sure this hook reruns when scheduler.started changes
-  const { scheduler, evaluate: _evaluate } = useMemo(
+  const { scheduler, evaluate, start, stop, pause } = useMemo(
     () =>
       repl({
         interval,
@@ -20,37 +22,56 @@ function useStrudel({ defaultOutput, interval, getTime, code, evalOnMount = fals
         onEvalError: setEvalError,
         getTime,
         transpiler,
-        onEval: ({ pattern: _pattern, code }) => {
+        beforeEval: ({ code }) => {
+          setCode(code);
+        },
+        onEvalError: setEvalError,
+        afterEval: ({ pattern: _pattern, code }) => {
           setActiveCode(code);
           setPattern(_pattern);
           setEvalError();
         },
         onToggle: (v) => setStarted(v),
-        onEvalError: setEvalError,
       }),
     [defaultOutput, interval, getTime],
   );
-  const evaluate = useCallback(() => _evaluate(code), [_evaluate, code]);
+  const activateCode = useCallback(async (autostart = true) => evaluate(code, autostart), [evaluate, code]);
 
   const inited = useRef();
   useEffect(() => {
     if (!inited.current && evalOnMount && code) {
-      console.log('eval on mount');
       inited.current = true;
-      evaluate();
+      activateCode();
     }
-  }, [evaluate, evalOnMount, code]);
+  }, [activateCode, evalOnMount, code]);
 
   const togglePlay = async () => {
     if (started) {
       scheduler.pause();
       // scheduler.stop();
     } else {
-      await evaluate();
+      await activateCode();
     }
   };
-
-  return { schedulerError, scheduler, evalError, evaluate, activeCode, isDirty, pattern, started, togglePlay };
+  const error = schedulerError || evalError;
+  return {
+    code,
+    setCode,
+    error,
+    schedulerError,
+    scheduler,
+    evalError,
+    evaluate,
+    activateCode,
+    activeCode,
+    isDirty,
+    pattern,
+    started,
+    start,
+    stop,
+    pause,
+    togglePlay,
+  };
 }
 
 export default useStrudel;

repl/README.md

@@ -29,12 +29,14 @@ npm run static # <- test static build
 
 currently broken / buggy:
 
-- MiniREPL
-- repl log section
-- hideHeader flag
-- pending flag
-- web midi
-- draw / pianoroll
-- pause does stop
-- random button triggers start
-- highlighting seems too late (off by latency ?)
+- [x] MiniREPL
+- [ ] repl log section => remove?
+- [ ] hideHeader flag
+- [ ] pending flag
+- [ ] web midi
+- [ ] draw / pianoroll
+- [ ] pause does stop
+- [x] random button triggers start
+- [?] highlighting seems too late (off by latency ?)
+- [ ] unexpected ast format without body expression (kalimba)
+- [ ] highlighting sometimes drops highlights (zeldasRescue first note)

repl/src/App.jsx

@@ -90,17 +90,27 @@ const randomTune = getRandomTune();
 const isEmbedded = window.location !== window.parent.location;
 function App() {
   // const [editor, setEditor] = useState();
-  const [code, setCode] = useState('// LOADING');
   const [view, setView] = useState();
   const [lastShared, setLastShared] = useState();
 
-  const { scheduler, evaluate, schedulerError, evalError, isDirty, activeCode, pattern, started, togglePlay } =
-    useStrudel({
-      code,
-      defaultOutput: webaudioOutput,
-      getTime,
-    });
-  const error = schedulerError || evalError;
+  const {
+    code,
+    setCode,
+    scheduler,
+    evaluate,
+    activateCode,
+    error,
+    isDirty,
+    activeCode,
+    pattern,
+    started,
+    togglePlay,
+    stop,
+  } = useStrudel({
+    initialCode: '// LOADING',
+    defaultOutput: webaudioOutput,
+    getTime,
+  });
   useEffect(() => {
     initCode().then((decoded) => setCode(decoded || randomTune));
   }, []);
@@ -121,17 +131,16 @@ function App() {
         if (e.code === 'Enter') {
           e.preventDefault();
           flash(view);
-          // await activateCode();
-          await evaluate();
+          await activateCode();
         } else if (e.code === 'Period') {
-          scheduler.stop();
+          stop();
           e.preventDefault();
         }
       }
     };
     window.addEventListener('keydown', handleKeyPress, true);
     return () => window.removeEventListener('keydown', handleKeyPress, true);
-  }, [pattern /* , code */, /* activateCode, */ scheduler, view]);
+  }, [activateCode, stop, view]);
 
   useHighlighting({
     view,
@@ -227,15 +236,12 @@ function App() {
                 className="hover:bg-gray-300 p-2"
                 onClick={async () => {
                   const _code = getRandomTune();
-                  // console.log('tune', _code); // uncomment this to debug when random code fails
-                  setCode(_code);
-                  /*                   cleanupDraw();
+                  /*
+                  cleanupDraw();
                   cleanupUi(); */
                   resetLoadedSamples();
                   await prebake(); // declare default samples
-                  const parsed = await evaluate(_code);
-                  setPattern(parsed.pattern);
-                  setActiveCode(_code);
+                  await evaluate(_code, false);
                 }}
               >
                 🎲 random
@@ -306,7 +312,7 @@ function App() {
           {/* onCursor={markParens} */}
           <CodeMirror value={code} onChange={setCode} onViewChanged={setView} />
           <span className="z-[20] bg-black rounded-t-md py-1 px-2 fixed bottom-0 right-1 text-xs whitespace-pre text-right pointer-events-none">
-            {!started ? `press ctrl+enter to play\n` : isDirty ? `ctrl+enter to update\n` : 'no changes\n'}
+            {!started ? `press ctrl+enter to play\n` : isDirty ? `press ctrl+enter to update\n` : 'press ctrl+dot do stop\n'}
           </span>
           {error && (
             <div