MicroRepl poc

packages/codemirror/codemirror.mjs

@@ -146,8 +146,7 @@ export class StrudelMirror {
       onChange: (v) => {
         if (v.docChanged) {
           this.code = v.state.doc.toString();
-          // TODO: repl is still untouched to make sure the old Repl.jsx stays untouched..
-          // this.repl.setCode(this.code);
+          this.repl.setCode?.(this.code);
         }
       },
       onEvaluate: () => this.evaluate(),

packages/core/repl.mjs

@@ -16,13 +16,36 @@ export function repl({
   transpiler,
   onToggle,
   editPattern,
+  onUpdateState,
 }) {
+  const state = {
+    schedulerError: undefined,
+    evalError: undefined,
+    code: '// LOADING',
+    activeCode: '// LOADING',
+    pattern: undefined,
+    miniLocations: [],
+    widgets: [],
+    pending: true,
+    started: false,
+  };
+
+  const updateState = (update) => {
+    Object.assign(state, update);
+    state.isDirty = state.code !== state.activeCode;
+    state.error = state.evalError || state.schedulerError;
+    onUpdateState?.(state);
+  };
+
   const scheduler = new Cyclist({
     interval,
     onTrigger: getTrigger({ defaultOutput, getTime }),
     onError: onSchedulerError,
     getTime,
-    onToggle,
+    onToggle: (started) => {
+      updateState({ started });
+      onToggle?.(started);
+    },
   });
   let pPatterns = {};
   let allTransform;
@@ -43,6 +66,7 @@ export function repl({
       throw new Error('no code to evaluate');
     }
     try {
+      updateState({ code, pending: true });
       await beforeEval?.({ code });
       shouldHush && hush();
       let { pattern, meta } = await _evaluate(code, transpiler);
@@ -58,17 +82,28 @@ export function repl({
       }
       logger(`[eval] code updated`);
       setPattern(pattern, autostart);
+      updateState({
+        miniLocations: meta?.miniLocations || [],
+        widgets: meta?.widgets || [],
+        activeCode: code,
+        pattern,
+        evalError: undefined,
+        schedulerError: undefined,
+        pending: false,
+      });
       afterEval?.({ code, pattern, meta });
       return pattern;
     } catch (err) {
       // console.warn(`[repl] eval error: ${err.message}`);
       logger(`[eval] error: ${err.message}`, 'error');
+      updateState({ evalError: err, pending: false });
       onEvalError?.(err);
     }
   };
   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);
 
@@ -127,8 +162,8 @@ export function repl({
     setCpm,
     setcpm: setCpm,
   });
-
-  return { scheduler, evaluate, start, stop, pause, setCps, setPattern };
+  const setCode = (code) => updateState({ code });
+  return { scheduler, evaluate, start, stop, pause, setCps, setPattern, setCode, toggle, state };
 }
 
 export const getTrigger =

packages/repl/repl-component.mjs

@@ -92,6 +92,12 @@ class StrudelRepl extends HTMLElement {
       afterEval: ({ code }) => {
         // window.location.hash = '#' + code2hash(code);
       },
+      onUpdateState: (state) => {
+        const event = new CustomEvent('update', {
+          detail: state,
+        });
+        this.dispatchEvent(event);
+      },
     });
     // init settings
     this.editor.updateSettings(this.settings);

website/src/docs/Icon.jsx

@@ -0,0 +1,38 @@
+export function Icon({ type }) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+      {
+        {
+          refresh: (
+            <path
+              fillRule="evenodd"
+              d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"
+              clipRule="evenodd"
+            />
+          ),
+          play: (
+            <path
+              fillRule="evenodd"
+              d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z"
+              clipRule="evenodd"
+            />
+          ),
+          pause: (
+            <path
+              fillRule="evenodd"
+              d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zM7 8a1 1 0 012 0v4a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v4a1 1 0 102 0V8a1 1 0 00-1-1z"
+              clipRule="evenodd"
+            />
+          ),
+          stop: (
+            <path
+              fillRule="evenodd"
+              d="M2 10a8 8 0 1116 0 8 8 0 01-16 0zm5-2.25A.75.75 0 017.75 7h4.5a.75.75 0 01.75.75v4.5a.75.75 0 01-.75.75h-4.5a.75.75 0 01-.75-.75v-4.5z"
+              clipRule="evenodd"
+            />
+          ),
+        }[type]
+      }
+    </svg>
+  );
+}

website/src/docs/MicroRepl.jsx

@@ -0,0 +1,91 @@
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { Icon } from './Icon';
+
+export function MicroRepl({ code, hideHeader = false }) {
+  /* const [ref, isVisible] = useInView({
+    threshold: 0.01,
+  }); */
+  const [replState, setReplState] = useState({});
+  const { started, isDirty, error } = replState;
+  const wc = useRef();
+  function togglePlay() {
+    if (wc.current) {
+      wc.current?.editor.evaluate();
+    }
+  }
+  const listener = useCallback((e) => setReplState({ ...e.detail }), []);
+  useEffect(() => {
+    return () => {
+      wc.current.removeEventListener('update', listener);
+    };
+  }, []);
+  return (
+    <div
+      className="overflow-hidden rounded-t-md bg-background border border-lineHighlight"
+      //ref={ref}
+    >
+      {!hideHeader && (
+        <div className="flex justify-between bg-lineHighlight">
+          <div className="flex">
+            <button
+              className={cx(
+                'cursor-pointer w-16 flex items-center justify-center p-1 border-r border-lineHighlight text-foreground bg-lineHighlight hover:bg-background',
+                started ? 'animate-pulse' : '',
+              )}
+              onClick={() => togglePlay()}
+            >
+              <Icon type={started ? 'stop' : 'play'} />
+            </button>
+            <button
+              className={cx(
+                'w-16 flex items-center justify-center p-1 text-foreground border-lineHighlight bg-lineHighlight',
+                isDirty ? 'text-foreground hover:bg-background cursor-pointer' : 'opacity-50 cursor-not-allowed',
+              )}
+              onClick={() => activateCode()}
+            >
+              <Icon type="refresh" />
+            </button>
+          </div>
+        </div>
+      )}
+      <div className="overflow-auto relative">
+        <strudel-editor
+          is-line-numbers-displayed="0"
+          code={code}
+          ref={(el) => {
+            if (wc.current) {
+              return;
+            }
+            wc.current = el;
+            el.addEventListener('update', listener);
+          }}
+        ></strudel-editor>
+        {error && <div className="text-right p-1 text-md text-red-200">{error.message}</div>}
+      </div>
+      {/* punchcard && (
+      <canvas
+        id={canvasId}
+        className="w-full pointer-events-none"
+        height={canvasHeight}
+        ref={(el) => {
+          if (el && el.width !== el.clientWidth) {
+            el.width = el.clientWidth;
+          }
+        }}
+      ></canvas>
+    ) */}
+      {/* !!log.length && (
+      <div className="bg-gray-800 rounded-md p-2">
+        {log.map(({ message }, i) => (
+          <div key={i}>{message}</div>
+        ))}
+      </div>
+    ) */}
+    </div>
+  );
+}
+
+function cx(...classes) {
+  // : Array<string | undefined>
+  return classes.filter(Boolean).join(' ');
+}

website/src/pages/vanilla/micro.astro

@@ -0,0 +1,32 @@
+---
+import { MicroRepl } from '../../docs/MicroRepl'
+---
+
+<html lang="en" class="dark">
+  <head>
+    <title>Strudel Micro REPL</title>
+    <script src="@strudel/repl"></script>
+  </head>
+  <body>
+    <div class="p-4">
+      <p>MicroRepl:</p>
+      <MicroRepl client:load code={`n(run(4).sub(4))
+        .chord("<C^7#11 E^7#11>/16")
+        .dict('ireal')
+        .voicing()
+        .when("<1 0> 0@3", sub(note(12)))
+        .add(note("[12 | 0]*4"))
+        .attack(slider(0.511))
+        .decay(slider(0.466))
+        .sustain(slider(0.398))
+        .release(slider(0.443))
+        .s('sawtooth')
+        .lpa(sine.range(.1,.25).slow(12))
+        .lpenv(sine.range(0,4).slow(16))
+        .lpf(perlin.range(400,1000))
+        .add(note(perlin.range(0,.25)))
+        .vib(4).vibmod(.1)
+        .room(.75).size(8)`} />
+    </div>
+  </body>
+</html>