scheduler error handling + style

packages/core/cyclist.mjs

@@ -39,7 +39,7 @@ export class Cyclist {
             }
           });
         } catch (e) {
-          console.warn('scheduler error: ', e.message);
+          onLog(`error: ${e.message}`);
           onError?.(e);
         }
       }, // called slightly before each cycle

packages/core/repl.mjs

@@ -15,18 +15,22 @@ export function repl({
 }) {
   const scheduler = new Cyclist({
     interval,
-    onTrigger: (hap, deadline, duration) => {
+    onTrigger: async (hap, deadline, duration) => {
+      try {
         if (!hap.context.onTrigger) {
-        return defaultOutput(hap, deadline, duration);
+          return await defaultOutput(hap, deadline, duration);
         }
         const cps = 1; // TODO: fix
         // call signature of output / onTrigger is different...
-      return hap.context.onTrigger(getTime() + deadline, hap, getTime(), cps);
+        return await hap.context.onTrigger(getTime() + deadline, hap, getTime(), cps);
+      } catch (err) {
+        onLog?.(`[cyclist] error: ${err.message}`, 'error');
+      }
     },
     onError: onSchedulerError,
     getTime,
     onToggle,
-    onLog: (message) => onLog?.(`[clock] ${message}`),
+    onLog: (message, type) => onLog?.(`[cyclist] ${message}`, type),
   });
   const evaluate = async (code, autostart = true) => {
     if (!code) {

packages/react/src/themes/strudel-theme.js

@@ -8,7 +8,8 @@ export default createTheme({
     caret: '#ffcc00',
     selection: 'rgba(128, 203, 196, 0.5)',
     selectionMatch: '#036dd626',
-    lineHighlight: '#8a91991a',
+    // lineHighlight: '#8a91991a', // original
+    lineHighlight: '#00000050',
     gutterBackground: 'transparent',
     // gutterForeground: '#8a919966',
     gutterForeground: '#8a919966',

packages/webaudio/webaudio.mjs

@@ -240,7 +240,6 @@ function effectSend(input, effect, wet) {
 
 // export const webaudioOutput = async (t, hap, ct, cps) => {
 export const webaudioOutput = async (hap, deadline, hapDuration) => {
-  try {
   const ac = getAudioContext();
   /* if (isNote(hap.value)) {
       // supports primitive hap values that look like notes
@@ -433,9 +432,6 @@ export const webaudioOutput = async (hap, deadline, hapDuration) => {
 
   // disconnect all nodes when source node has ended:
   chain[0].onended = () => chain.concat([delaySend, reverbSend]).forEach((n) => n?.disconnect());
-  } catch (e) {
-    console.warn('.out error:', e);
-  }
 };
 
 export const webaudioOutputTrigger = (t, hap, ct, cps) => webaudioOutput(hap, t - ct, hap.duration / cps);

repl/README.md

@@ -30,14 +30,14 @@ npm run static # <- test static build
 currently broken / buggy:
 
 - [x] MiniREPL
-- [x] repl log section => now using browser console
+- [x] repl log section
 - [ ] hideHeader flag
 - [ ] pending flag
 - [x] web midi, TODO: test
 - [ ] draw / pianoroll
 - [x] repl url hash does not work
 - [x] pause does stop
-- [ ] pause then play logs "TOO LATE" and drops some events
+- [-] pause then play logs "TOO LATE" and drops some events => now doing full stop
 - [x] random button triggers start
 - [x] unexpected ast format without body expression (kalimba)
 - [x] highlighting seems too late (off by latency ?)

repl/src/App.jsx

@@ -138,9 +138,9 @@ function App() {
     initCode().then((decoded) => {
       pushLog(
         `🌀 Welcome to Strudel! ${
-          decoded ? `Code was decoded from the URL` : `A random code snippet named "${name}" has been loaded!`
-        } Press play or hit ctrl+enter to listen!`,
-        'info',
+          decoded ? `I have loaded the code from the URL.` : `A random code snippet named "${name}" has been loaded!`
+        } Press play or hit ctrl+enter to run it!`,
+        'highlight',
       );
       setCode(decoded || randomTune);
     });
@@ -174,12 +174,13 @@ function App() {
   });
 
   return (
+    // bg-gradient-to-t from-blue-900 to-slate-900
     <div className="h-screen flex flex-col">
       {!hideHeader && (
         <header
           id="header"
           className={cx(
-            'flex-none w-full md:flex text-black shadow-lg justify-between z-[100] text-lg bg-linegray select-none sticky top-0',
+            'flex-none w-full md:flex text-black justify-between z-[100] text-lg bg-header select-none sticky top-0',
             isEmbedded ? 'h-12 md:h-8' : 'h-25 md:h-14',
           )}
         >
@@ -322,10 +323,17 @@ function App() {
           </div>
         </header>
       )}
-      <section className="grow flex text-gray-100 relative overflow-auto cursor-text" id="code">
-        <CodeMirror value={code} onChange={setCode} onViewChanged={setView} />
+      <section className="grow flex text-gray-100 relative overflow-auto cursor-text pb-4" id="code">
+        <CodeMirror
+          value={code}
+          onChange={(c) => {
+            setCode(c);
+            started && pushLog('[edit] code changed. hit ctrl+enter to update');
+          }}
+          onViewChanged={setView}
+        />
       </section>
-      <footer className="bg-linegray">
+      <footer className="bg-footer">
         {/*         {error && (
           <div
             className={cx(
@@ -338,14 +346,14 @@ function App() {
         )} */}
         <div
           ref={logBox}
-          className="text-white font-mono text-sm h-32 flex-none overflow-auto max-w-full break-all p-2"
+          className="text-white font-mono text-sm h-32 flex-none overflow-auto max-w-full break-all p-4"
         >
           {log.map((l, i) => (
             <div
               key={l.index}
-              className={cx(l.type === 'error' && 'text-red-500', l.type === 'info' && 'text-secondary')}
+              className={cx(l.type === 'error' && 'text-red-500', l.type === 'highlight' && 'text-highlight')}
             >
-              {l.index}: {l.message}
+              &gt; {l.message}
               {l.count ? ` (${l.count})` : ''}
             </div>
           ))}

repl/tailwind.config.js

@@ -16,6 +16,12 @@ module.exports = {
         highlight: '#ffcc00',
         linegray: '#8a91991a',
         lineblack: '#00000095',
+        bg: '#222222',
+        // header: '#8a91991a',
+        // footer: '#8a91991a',
+        // header: '#00000050',
+        header: 'transparent',
+        footer: '#00000050',
       },
     },
   },