move evaluate logic without transpiler to core

+ breaking change: evalScope is now imported from core
+ breaking change: deprecated extend is now removed
+ add repl.mjs

packages/react/README.md

@@ -13,9 +13,8 @@ npm i @strudel.cycles/react
 Here is a minimal example of how to set up a MiniRepl:
 
 ```jsx
-import { evalScope } from '@strudel.cycles/eval';
+import { evalScope, controls } from '@strudel.cycles/core';
 import { MiniRepl } from '@strudel.cycles/react';
-import controls from '@strudel.cycles/core/controls.mjs';
 import { prebake } from '../repl/src/prebake.mjs';
 
 evalScope(

packages/react/examples/nano-repl/src/App.jsx

@@ -1,5 +1,4 @@
-import controls from '@strudel.cycles/core/controls.mjs';
-import { evalScope } from '@strudel.cycles/eval';
+import { evalScope, controls } from '@strudel.cycles/core';
 import { getAudioContext, panic, webaudioOutput } from '@strudel.cycles/webaudio';
 import { useCallback, useState } from 'react';
 import CodeMirror, { flash } from '../../../src/components/CodeMirror6';
@@ -94,7 +93,7 @@ function App() {
           if (e.code === 'Enter') {
             e.preventDefault();
             flash(view);
-            await evaluate();
+            await evaluate(code);
             if (e.shiftKey) {
               panic();
               scheduler.stop();
@@ -120,7 +119,7 @@ function App() {
         <div className="bg-slate-500 space-x-2 px-2 rounded-t-md">
           <button
             onClick={async () => {
-              await evaluate();
+              await evaluate(code);
               await getAudioContext().resume();
               scheduler.start();
             }}
@@ -128,7 +127,7 @@ function App() {
             start
           </button>
           <button onClick={() => scheduler.stop()}>stop</button>
-          {isDirty && <button onClick={() => evaluate()}>eval</button>}
+          {isDirty && <button onClick={() => evaluate(code)}>eval</button>}
         </div>
         {error && <p>error {error.message}</p>}
       </nav>

packages/react/src/App.jsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import { MiniRepl } from './components/MiniRepl';
 import 'tailwindcss/tailwind.css';
-import { evalScope } from '@strudel.cycles/eval';
-import { controls } from '@strudel.cycles/core';
+import { controls, evalScope } from '@strudel.cycles/core';
 
 evalScope(
   controls,

packages/react/src/hooks/useStrudel.mjs

@@ -1,7 +1,7 @@
 // import { Scheduler } from '@strudel.cycles/core';
 import { useRef, useCallback, useEffect, useMemo, useState } from 'react';
-import { evaluate as _evaluate } from '@strudel.cycles/eval';
-import { Cyclist } from '@strudel.cycles/core/cyclist.mjs';
+import shapeshifter from '@strudel.cycles/eval/shapeshifter.mjs';
+import { repl } from '@strudel.cycles/core/repl.mjs';
 
 function useStrudel({ defaultOutput, interval, getTime, code, evalOnMount = false }) {
   // scheduler
@@ -10,37 +10,33 @@ function useStrudel({ defaultOutput, interval, getTime, code, evalOnMount = fals
   const [activeCode, setActiveCode] = useState(code);
   const [pattern, setPattern] = useState();
   const isDirty = code !== activeCode;
-  // TODO: how / when to remove schedulerError?
-  const scheduler = useMemo(
-    // () => new Scheduler({ interval, onTrigger: defaultOutput, onError: setSchedulerError, getTime }),
-    () => new Cyclist({ interval, onTrigger: defaultOutput, onError: setSchedulerError, getTime }),
-    [defaultOutput, interval],
+  const { scheduler, evaluate: _evaluate } = useMemo(
+    () =>
+      repl({
+        interval,
+        defaultOutput,
+        onSchedulerError: setSchedulerError,
+        onEvalError: setEvalError,
+        getTime,
+        transpiler: shapeshifter,
+        onEval: ({ pattern: _pattern, code }) => {
+          setActiveCode(code);
+          setPattern(_pattern);
+          setEvalError();
+        },
+        onEvalError: setEvalError,
+      }),
+    [defaultOutput, interval, getTime],
   );
-  const evaluate = useCallback(async () => {
-    if (!code) {
-      console.log('no code..');
-      return;
-    }
-    try {
-      // TODO: let user inject custom eval function?
-      const { pattern: _pattern } = await _evaluate(code);
-      setActiveCode(code);
-      scheduler?.setPattern(_pattern);
-      setPattern(_pattern);
-      setEvalError();
-    } catch (err) {
-      setEvalError(err);
-      console.warn('eval error', err);
-    }
-  }, [code, scheduler]);
+  const evaluate = useCallback(() => _evaluate(code), [_evaluate, code]);
 
   const inited = useRef();
   useEffect(() => {
-    if (!inited.current && evalOnMount) {
+    if (!inited.current && evalOnMount && code) {
       inited.current = true;
       evaluate();
     }
-  }, [evaluate, evalOnMount]);
+  }, [evaluate, evalOnMount, code]);
 
   return { schedulerError, scheduler, evalError, evaluate, activeCode, isDirty, pattern };
 }