+ simplify vanilla setup drastically

+ move repl + drawer boilerplate inside StrudelMirror

packages/core/examples/vite-vanilla-repl-cm6/main.js

@@ -1,69 +1,39 @@
-// moved from sandbox: https://codesandbox.io/s/vanilla-codemirror-strudel-2wb7yw?file=/index.html:114-186
-
 import { StrudelMirror } from '@strudel/codemirror';
-import { initStrudel } from './strudel';
 import { funk42 } from './tunes';
-import { pianoroll, getDrawOptions, Drawer } from '@strudel.cycles/core';
+import { drawPianoroll, evalScope, controls } from '@strudel.cycles/core';
 import './style.css';
 import { initAudioOnFirstClick } from '@strudel.cycles/webaudio';
+import { transpiler } from '@strudel.cycles/transpiler';
+import { getAudioContext, webaudioOutput, registerSynthSounds } from '@strudel.cycles/webaudio';
+import { registerSoundfonts } from '@strudel.cycles/soundfonts';
 
-const initAudio = initAudioOnFirstClick();
-
-const editor = new StrudelMirror({
-  root: document.getElementById('editor'),
-  initialCode: funk42,
-  onEvaluate,
-  onStop,
-});
-
-async function drawFirstFrame(editor, repl) {
-  const { evaluate } = repl;
-  const pattern = await evaluate(editor.code, false);
-  const initialHaps = pattern.queryArc(0, drawTime[1]);
-  drawPianoroll(initialHaps, 0);
-  return repl;
-}
-
-const repl = initStrudel().then(async (repl) => {
-  await drawFirstFrame(editor, repl);
-  return repl;
-});
-
+// init canvas
 const canvas = document.getElementById('roll');
 canvas.width = canvas.width * 2;
 canvas.height = canvas.height * 2;
+const drawContext = canvas.getContext('2d');
+const drawTime = [-2, 2]; // time window of drawn haps
 
-async function onEvaluate() {
-  const { evaluate, scheduler } = await repl;
-  await initAudio;
-  editor.flash();
-  if (!scheduler.started) {
-    scheduler.stop();
-    await evaluate(editor.code);
-    drawer.start(scheduler);
-  } else {
-    await evaluate(editor.code);
-    drawer.invalidate(); // this is a bit mystic
-  }
-}
+const editor = new StrudelMirror({
+  defaultOutput: webaudioOutput,
+  getTime: () => getAudioContext().currentTime,
+  transpiler,
+  root: document.getElementById('editor'),
+  initialCode: funk42,
+  drawTime,
+  onDraw: (haps, time) => drawPianoroll({ haps, time, ctx: drawContext, drawTime, fold: 0 }),
+  prebake: async () => {
+    initAudioOnFirstClick(); // needed to make the browser happy (don't await this here..)
+    const loadModules = evalScope(
+      controls,
+      import('@strudel.cycles/core'),
+      import('@strudel.cycles/mini'),
+      import('@strudel.cycles/tonal'),
+      import('@strudel.cycles/webaudio'),
+    );
+    await Promise.all([loadModules, registerSynthSounds(), registerSoundfonts()]);
+  },
+});
 
-async function onStop() {
-  const { scheduler } = await repl;
-  scheduler.stop();
-  drawer.stop();
-}
-
-const drawTime = [-2, 2];
-function drawPianoroll(haps, time) {
-  pianoroll({ ctx, time, haps, ...getDrawOptions(drawTime, { fold: 0 }) });
-}
-
-const ctx = canvas.getContext('2d');
-let drawer = new Drawer((haps, time) => {
-  const currentFrame = haps.filter((hap) => time >= hap.whole.begin && time <= hap.whole.end);
-  editor.highlight(currentFrame);
-  drawPianoroll(haps, time);
-}, drawTime);
-
-document.getElementById('play').addEventListener('click', () => onEvaluate());
-document.getElementById('stop').addEventListener('click', async () => onStop());
+document.getElementById('play').addEventListener('click', () => editor.evaluate());
+document.getElementById('stop').addEventListener('click', () => editor.stop());

packages/core/examples/vite-vanilla-repl-cm6/strudel.js

@@ -1,28 +0,0 @@
-import { getAudioContext, webaudioOutput, registerSynthSounds } from '@strudel.cycles/webaudio';
-
-const ctx = getAudioContext();
-
-export async function initStrudel(options = {}) {
-  const [{ controls, repl, evalScope }, { registerSoundfonts }, { transpiler }] = await Promise.all([
-    import('@strudel.cycles/core'),
-    import('@strudel.cycles/soundfonts'),
-    import('@strudel.cycles/transpiler'),
-  ]);
-
-  const loadModules = evalScope(
-    controls,
-    import('@strudel.cycles/core'),
-    import('@strudel.cycles/mini'),
-    import('@strudel.cycles/tonal'),
-    import('@strudel.cycles/webaudio'),
-  );
-
-  await Promise.all([loadModules, registerSynthSounds(), registerSoundfonts()]);
-
-  return repl({
-    defaultOutput: webaudioOutput,
-    getTime: () => ctx.currentTime,
-    transpiler,
-    ...options,
-  });
-}

packages/core/examples/vite-vanilla-repl-cm6/tunes.mjs

@@ -78,7 +78,7 @@ let drums = stack(
   s("bd*2, ~ sd").bank('RolandTR707').room("0 .1"),
   s("hh*4").begin(.2).release(.02).end(.25).release(.02)
   .gain(.3).bank('RolandTR707').late(.02).room(.5),
-  s("shaker_small").struct("[x x*2]*2").speed(".8,.9").release(.02)
+  //s("shaker_small").struct("[x x*2]*2").speed(".8,.9").release(.02)
 ).fast(2)
 
 let wurli = note(\`<