make play and update buttons work

packages/codemirror/codemirror.mjs

@@ -59,7 +59,7 @@ export class StrudelMirror {
       if (!onDraw) {
         return;
       }
-      const { scheduler, evaluate } = await this.repl;
+      const { scheduler, evaluate } = this.repl;
       // draw first frame instantly
       prebaked.then(async () => {
         await evaluate(this.code, false);
@@ -70,9 +70,9 @@ export class StrudelMirror {
 
     this.repl = repl({
       ...replOptions,
-      onToggle: async (started) => {
+      onToggle: (started) => {
         replOptions?.onToggle?.(started);
-        const { scheduler } = await this.repl;
+        const { scheduler } = this.repl;
         if (started) {
           this.drawer.start(scheduler);
         } else {
@@ -93,21 +93,32 @@ export class StrudelMirror {
       theme,
       initialCode,
       onChange: (v) => {
-        this.code = v.state.doc.toString();
+        if (v.docChanged) {
+          this.code = v.state.doc.toString();
+          this.repl.setCode(this.code);
+        }
       },
       onEvaluate: () => this.evaluate(),
       onStop: () => this.stop(),
     });
   }
   async evaluate() {
-    const { evaluate } = await this.repl;
+    const { evaluate } = this.repl;
     this.flash();
     await evaluate(this.code);
   }
   async stop() {
-    const { scheduler } = await this.repl;
+    const { scheduler } = this.repl;
     scheduler.stop();
   }
+  async toggle() {
+    const { scheduler } = this.repl;
+    if (scheduler.started) {
+      scheduler.stop();
+    } else {
+      this.evaluate();
+    }
+  }
   flash(ms) {
     flash(this.editor, ms);
   }

packages/core/repl.mjs

@@ -4,7 +4,7 @@ import { logger } from './logger.mjs';
 import { setTime } from './time.mjs';
 import { evalScope } from './evaluate.mjs';
 import { register } from './pattern.mjs';
-import { atom } from 'nanostores';
+import { atom, computed } from 'nanostores';
 
 export const $replstate = atom({
   schedulerError: undefined,
@@ -15,7 +15,10 @@ export const $replstate = atom({
   miniLocations: [],
   widgets: [],
   pending: true,
+  started: false,
 });
+export const $repldirty = computed($replstate, (s) => s.code !== s.activeCode);
+
 export const setReplState = (key, value) => $replstate.set({ ...$replstate.get(), [key]: value });
 
 export function repl({
@@ -81,6 +84,7 @@ export function repl({
   const stop = () => scheduler.stop();
   const start = () => scheduler.start();
   const pause = () => scheduler.pause();
+  const toggle = () => scheduler.toggle();
   const setCps = (cps) => scheduler.setCps(cps);
   const setCpm = (cpm) => scheduler.setCps(cpm / 60);
 
@@ -114,7 +118,8 @@ export function repl({
     setcpm: setCpm,
   });
 
-  return { scheduler, evaluate, start, stop, pause, setCps, setPattern };
+  const setCode = (c) => setReplState('code', c);
+  return { scheduler, evaluate, start, stop, pause, setCps, setPattern, setCode, toggle };
 }
 
 export const getTrigger =

website/src/repl/Repl.jsx

@@ -5,7 +5,7 @@ This program is free software: you can redistribute it and/or modify it under th
 */
 
 import PlayCircleIcon from '@heroicons/react/20/solid/PlayCircleIcon';
-import { getDrawContext, logger, $replstate } from '@strudel.cycles/core';
+import { getDrawContext, logger, $replstate, $repldirty } from '@strudel.cycles/core';
 import { cx } from '@strudel.cycles/react';
 import { getAudioContext } from '@strudel.cycles/webaudio';
 import { writeText } from '@tauri-apps/api/clipboard';
@@ -34,13 +34,13 @@ export function Repl({ embedded = false }) {
   const [lastShared, setLastShared] = useState();
   const { panelPosition, isZen } = useSettings();
   const replState = useStore($replstate);
+  const isDirty = useStore($repldirty);
 
   //
   // UI Actions
   //
 
   const handleTogglePlay = async () => {
-    console.log('toggle.');
     window.postMessage('strudel-toggle-play');
     /* await getAudioContext().resume(); // fixes no sound in ios webkit
     if (!started) {
@@ -97,12 +97,13 @@ export function Repl({ embedded = false }) {
   const pending = false;
   const error = undefined;
   const { started, activeCode } = replState;
+
   const context = {
     // scheduler,
     embedded,
     started,
     pending,
-    isDirty: false,
+    isDirty,
     lastShared,
     activeCode,
     // handleChangeCode: codemirror.handleChangeCode,

website/src/repl/vanillarepl.mjs

@@ -138,10 +138,7 @@ const drawTime = [-2, 2]; */
     }
   });
 
-  onEvent('strudel-toggle-play', () => {
-    console.log('toggle-play');
-    editor.evaluate();
-  });
+  onEvent('strudel-toggle-play', () => editor.toggle());
 
   // const isEmbedded = embedded || window.location !== window.parent.location;
 }

website/src/repl/webrepl.mjs

@@ -1,4 +1,4 @@
-import { cleanupDraw, cleanupUi, repl, getDrawContext, silence } from '@strudel.cycles/core';
+/* import { cleanupDraw, cleanupUi, repl, getDrawContext, silence } from '@strudel.cycles/core';
 import { webaudioOutput, getAudioContext } from '@strudel.cycles/webaudio';
 import { transpiler } from '@strudel.cycles/transpiler';
 import { prebake } from './prebake.mjs';
@@ -75,3 +75,4 @@ export function webrepl({ beforeEval, onEvalError, afterEval, editPattern } = {}
   });
   return instance;
 }
+ */