build to single file

* remove _ prefixes except for functions to be patternified
* categorise pattern methods
* experimental support for `.add.squeeze` and friends as alternative to `.addSqueeze`
* `every` is now an alias for `firstOf` with additional `lastOf` (which every will become an alias for next)

package.json

@@ -10,7 +10,7 @@
     "test-coverage": "vitest --coverage",
     "bootstrap": "lerna bootstrap",
     "setup": "npm i && npm run bootstrap && cd repl && npm i && cd ../tutorial && npm i",
-    "snapshot": "cd repl && npm run snapshot",
+    "snapshot": "vitest run -u --silent",
     "repl": "cd repl && npm run dev",
     "osc": "cd packages/osc && npm run server",
     "build": "rm -rf out && cd repl && npm run build && cd ../tutorial && npm run build",

packages/core/fraction.mjs

@@ -74,7 +74,7 @@ const fraction = (n) => {
     -> those farey sequences turn out to make pattern querying ~20 times slower! always use strings!
     -> still, some optimizations could be done: .mul .div .add .sub calls still use numbers
     */
-    n = String(n);
+    // n = String(n); // this is actually faster but imprecise...
   }
   return Fraction(n);
 };

packages/core/signal.mjs

@@ -20,7 +20,7 @@ export const signal = (func) => {
 };
 
 export const isaw = signal((t) => 1 - (t % 1));
-export const isaw2 = isaw._toBipolar();
+export const isaw2 = isaw.toBipolar();
 
 /**
  *  A sawtooth signal between 0 and 1.
@@ -33,7 +33,7 @@ export const isaw2 = isaw._toBipolar();
  *
  */
 export const saw = signal((t) => t % 1);
-export const saw2 = saw._toBipolar();
+export const saw2 = saw.toBipolar();
 
 export const sine2 = signal((t) => Math.sin(Math.PI * 2 * t));
 
@@ -45,7 +45,7 @@ export const sine2 = signal((t) => Math.sin(Math.PI * 2 * t));
  * sine.segment(16).range(0,15).slow(2).scale('C minor').note()
  *
  */
-export const sine = sine2._fromBipolar();
+export const sine = sine2.fromBipolar();
 
 /**
  *  A cosine signal between 0 and 1.
@@ -67,7 +67,7 @@ export const cosine2 = sine2._early(Fraction(1).div(4));
  *
  */
 export const square = signal((t) => Math.floor((t * 2) % 2));
-export const square2 = square._toBipolar();
+export const square2 = square.toBipolar();
 
 /**
  *  A triangle signal between 0 and 1.
@@ -127,7 +127,7 @@ export const rand = signal(timeToRand);
 /**
  * A continuous pattern of random numbers, between -1 and 1
  */
-export const rand2 = rand._toBipolar();
+export const rand2 = rand.toBipolar();
 
 export const _brandBy = (p) => rand.fmap((x) => x < p);
 export const brandBy = (pPat) => reify(pPat).fmap(_brandBy).innerJoin();
@@ -201,7 +201,7 @@ Pattern.prototype.choose = function (...xs) {
  * @returns {Pattern}
  */
 Pattern.prototype.choose2 = function (...xs) {
-  return chooseWith(this._fromBipolar(), xs);
+  return chooseWith(this.fromBipolar(), xs);
 };
 
 /**
@@ -259,7 +259,7 @@ export const perlinWith = (pat) => {
 export const perlin = perlinWith(time.fmap((v) => Number(v)));
 
 Pattern.prototype._degradeByWith = function (withPat, x) {
-  return this.fmap((a) => (_) => a).appLeft(withPat._filterValues((v) => v > x));
+  return this.fmap((a) => (_) => a).appLeft(withPat.filterValues((v) => v > x));
 };
 
 /**

packages/core/test/pattern.test.mjs

@@ -49,7 +49,7 @@ import { steady } from '../signal.mjs';
 
 import controls from '../controls.mjs';
 
-const { n } = controls;
+const { n, s } = controls;
 const st = (begin, end) => new State(ts(begin, end));
 const ts = (begin, end) => new TimeSpan(Fraction(begin), Fraction(end));
 const hap = (whole, part, value, context = {}) => new Hap(whole, part, value, context);
@@ -58,7 +58,7 @@ const third = Fraction(1, 3);
 const twothirds = Fraction(2, 3);
 
 const sameFirst = (a, b) => {
-  return expect(a._sortHapsByPart().firstCycle()).toStrictEqual(b._sortHapsByPart().firstCycle());
+  return expect(a.sortHapsByPart().firstCycle()).toStrictEqual(b.sortHapsByPart().firstCycle());
 };
 
 describe('TimeSpan', () => {
@@ -382,7 +382,7 @@ describe('Pattern', () => {
       );
     });
     it('copes with breaking up events across cycles', () => {
-      expect(pure('a').slow(2)._fastGap(2)._setContext({}).query(st(0, 2))).toStrictEqual([
+      expect(pure('a').slow(2)._fastGap(2).setContext({}).query(st(0, 2))).toStrictEqual([
         hap(ts(0, 1), ts(0, 0.5), 'a'),
         hap(ts(0.5, 1.5), ts(1, 1.5), 'a'),
       ]);
@@ -446,8 +446,8 @@ describe('Pattern', () => {
   });
   describe('slow()', () => {
     it('Supports zero-length queries', () => {
-      expect(steady('a').slow(1)._setContext({}).queryArc(0, 0)).toStrictEqual(
-        steady('a')._setContext({}).queryArc(0, 0),
+      expect(steady('a').slow(1).setContext({}).queryArc(0, 0)).toStrictEqual(
+        steady('a').setContext({}).queryArc(0, 0),
       );
     });
   });
@@ -465,7 +465,7 @@ describe('Pattern', () => {
     it('Filters true', () => {
       expect(
         pure(true)
-          ._filterValues((x) => x)
+          .filterValues((x) => x)
           .firstCycle().length,
       ).toBe(1);
     });
@@ -490,7 +490,7 @@ describe('Pattern', () => {
         pure(10)
           .when(slowcat(true, false), (x) => x.add(3))
           .fast(4)
-          ._sortHapsByPart()
+          .sortHapsByPart()
           .firstCycle(),
       ).toStrictEqual(fastcat(13, 10, 13, 10).firstCycle());
     });
@@ -577,26 +577,26 @@ describe('Pattern', () => {
     });
   });
 
-  describe('every()', () => {
+  describe('firstOf()', () => {
     it('Can apply a function every 3rd time', () => {
       expect(
         pure('a')
-          .every(3, (x) => x._fast(2))
+          .firstOf(3, (x) => x._fast(2))
           ._fast(3)
           .firstCycle(),
       ).toStrictEqual(sequence(sequence('a', 'a'), 'a', 'a').firstCycle());
     });
     it('works with currying', () => {
-      expect(pure('a').every(3, fast(2))._fast(3).firstCycle()).toStrictEqual(
+      expect(pure('a').firstOf(3, fast(2))._fast(3).firstCycle()).toStrictEqual(
         sequence(sequence('a', 'a'), 'a', 'a').firstCycle(),
       );
-      expect(sequence(3, 4, 5).every(3, add(3)).fast(5).firstCycle()).toStrictEqual(
+      expect(sequence(3, 4, 5).firstOf(3, add(3)).fast(5).firstCycle()).toStrictEqual(
         sequence(6, 7, 8, 3, 4, 5, 3, 4, 5, 6, 7, 8, 3, 4, 5).firstCycle(),
       );
-      expect(sequence(3, 4, 5).every(2, sub(1)).fast(5).firstCycle()).toStrictEqual(
+      expect(sequence(3, 4, 5).firstOf(2, sub(1)).fast(5).firstCycle()).toStrictEqual(
         sequence(2, 3, 4, 3, 4, 5, 2, 3, 4, 3, 4, 5, 2, 3, 4).firstCycle(),
       );
-      expect(sequence(3, 4, 5).every(3, add(3)).every(2, sub(1)).fast(2).firstCycle()).toStrictEqual(
+      expect(sequence(3, 4, 5).firstOf(3, add(3)).firstOf(2, sub(1)).fast(2).firstCycle()).toStrictEqual(
         sequence(5, 6, 7, 3, 4, 5).firstCycle(),
       );
     });
@@ -692,7 +692,7 @@ describe('Pattern', () => {
     it('Can set the hap context', () => {
       expect(
         pure('a')
-          ._setContext([
+          .setContext([
             [
               [0, 1],
               [1, 2],
@@ -713,13 +713,13 @@ describe('Pattern', () => {
     it('Can update the hap context', () => {
       expect(
         pure('a')
-          ._setContext([
+          .setContext([
             [
               [0, 1],
               [1, 2],
             ],
           ])
-          ._withContext((c) => [
+          .withContext((c) => [
             ...c,
             [
               [3, 4],
@@ -743,7 +743,7 @@ describe('Pattern', () => {
   });
   describe('apply', () => {
     it('Can apply a function', () => {
-      expect(sequence('a', 'b')._apply(fast(2)).firstCycle()).toStrictEqual(sequence('a', 'b').fast(2).firstCycle());
+      expect(sequence('a', 'b').apply(fast(2)).firstCycle()).toStrictEqual(sequence('a', 'b').fast(2).firstCycle());
     }),
       it('Can apply a pattern of functions', () => {
         expect(sequence('a', 'b').apply(fast(2)).firstCycle()).toStrictEqual(sequence('a', 'b').fast(2).firstCycle());
@@ -784,18 +784,18 @@ describe('Pattern', () => {
   });
   describe('jux', () => {
     it('Can juxtapose', () => {
-      expect(pure({ a: 1 }).jux(fast(2))._sortHapsByPart().firstCycle()).toStrictEqual(
+      expect(pure({ a: 1 }).jux(fast(2)).sortHapsByPart().firstCycle()).toStrictEqual(
         stack(pure({ a: 1, pan: 0 }), pure({ a: 1, pan: 1 }).fast(2))
-          ._sortHapsByPart()
+          .sortHapsByPart()
           .firstCycle(),
       );
     });
   });
   describe('juxBy', () => {
     it('Can juxtapose by half', () => {
-      expect(pure({ a: 1 }).juxBy(0.5, fast(2))._sortHapsByPart().firstCycle()).toStrictEqual(
+      expect(pure({ a: 1 }).juxBy(0.5, fast(2)).sortHapsByPart().firstCycle()).toStrictEqual(
         stack(pure({ a: 1, pan: 0.25 }), pure({ a: 1, pan: 0.75 }).fast(2))
-          ._sortHapsByPart()
+          .sortHapsByPart()
           .firstCycle(),
       );
     });
@@ -805,7 +805,7 @@ describe('Pattern', () => {
       expect(
         sequence('a', ['a', 'a'])
           .fmap((a) => fastcat('b', 'c'))
-          ._squeezeJoin()
+          .squeezeJoin()
           .firstCycle(),
       ).toStrictEqual(
         sequence(
@@ -820,7 +820,7 @@ describe('Pattern', () => {
     it('Squeezes to the correct cycle', () => {
       expect(
         pure(time.struct(true))
-          ._squeezeJoin()
+          .squeezeJoin()
           .queryArc(3, 4)
           .map((x) => x.value),
       ).toStrictEqual([Fraction(3.5)]);
@@ -857,7 +857,7 @@ describe('Pattern', () => {
       );
     });
     it('Can chop(2,3)', () => {
-      expect(pure({ sound: 'a' }).fast(2).chop(2, 3)._sortHapsByPart().firstCycle()).toStrictEqual(
+      expect(pure({ sound: 'a' }).fast(2).chop(2, 3).sortHapsByPart().firstCycle()).toStrictEqual(
         sequence(
           [
             { sound: 'a', begin: 0, end: 0.5 },
@@ -869,7 +869,7 @@ describe('Pattern', () => {
             { sound: 'a', begin: 2 / 3, end: 1 },
           ],
         )
-          ._sortHapsByPart()
+          .sortHapsByPart()
           .firstCycle(),
       );
     });
@@ -893,4 +893,11 @@ describe('Pattern', () => {
       );
     });
   });
+  describe('alignments', () => {
+    it('Can squeeze arguments', () => {
+      expect(sequence(1, 2).add.squeeze(4, 5).firstCycle()).toStrictEqual(
+	sequence(5, 6, 6, 7).firstCycle()
+      );
+    });
+  });
 });

packages/core/util.mjs

@@ -5,7 +5,7 @@ This program is free software: you can redistribute it and/or modify it under th
 */
 
 // returns true if the given string is a note
-export const isNote = (name) => /^[a-gA-G][#b]*[0-9]$/.test(name);
+export const isNote = (name) => /^[a-gA-G][#bs]*[0-9]$/.test(name);
 export const tokenizeNote = (note) => {
   if (typeof note !== 'string') {
     return [];

packages/eval/test/evaluate.test.mjs

@@ -13,7 +13,7 @@ const { fastcat, evalScope } = strudel;
 
 describe('evaluate', async () => {
   await evalScope({ mini }, strudel);
-  const ev = async (code) => (await evaluate(code)).pattern._firstCycleValues;
+  const ev = async (code) => (await evaluate(code)).pattern.firstCycleValues;
   it('Should evaluate strudel functions', async () => {
     expect(await ev('pure("c3")')).toEqual(['c3']);
     expect(await ev('cat("c3")')).toEqual(['c3']);

packages/mini/test/mini.test.mjs

@@ -9,8 +9,8 @@ import '@strudel.cycles/core/euclid.mjs';
 import { describe, expect, it } from 'vitest';
 
 describe('mini', () => {
-  const minV = (v) => mini(v)._firstCycleValues;
-  const minS = (v) => mini(v)._showFirstCycle;
+  const minV = (v) => mini(v).firstCycleValues;
+  const minS = (v) => mini(v).showFirstCycle;
   it('supports single elements', () => {
     expect(minV('a')).toEqual(['a']);
   });

packages/osc/package.json

@@ -7,7 +7,8 @@
     "test": "echo \"No tests present.\" && exit 0",
     "server": "node server.js",
     "tidal-sniffer": "node tidal-sniffer.js",
-    "client": "npx serve -p 4321"
+    "client": "npx serve -p 4321",
+    "build": "npx pkg server.js --targets node16-macos-x64,node16-win-x64,node16-linux-x64 --out-path bin"
   },
   "repository": {
     "type": "git",
@@ -31,5 +32,8 @@
   "homepage": "https://github.com/tidalcycles/strudel#readme",
   "dependencies": {
     "osc-js": "^2.4.0"
+  },
+  "devDependencies": {
+    "pkg": "^5.7.0"
   }
 }

packages/react/dist/index.es.js

@@ -1,15 +1,15 @@
-import n, { useCallback as N, useRef as x, useEffect as R, useState as w, useMemo as I, useLayoutEffect as K } from "react";
-import Q from "@uiw/react-codemirror";
-import { Decoration as E, EditorView as O } from "@codemirror/view";
-import { StateEffect as j, StateField as U } from "@codemirror/state";
-import { javascript as W } from "@codemirror/lang-javascript";
+import n, { useCallback as _, useRef as H, useEffect as L, useMemo as V, useState as w, useLayoutEffect as j } from "react";
+import X from "@uiw/react-codemirror";
+import { Decoration as E, EditorView as U } from "@codemirror/view";
+import { StateEffect as $, StateField as G } from "@codemirror/state";
+import { javascript as Y } from "@codemirror/lang-javascript";
 import { tags as r } from "@lezer/highlight";
-import { createTheme as X } from "@uiw/codemirror-themes";
-import { useInView as Y } from "react-hook-inview";
-import { webaudioOutput as Z, getAudioContext as ee } from "@strudel.cycles/webaudio";
-import { repl as te } from "@strudel.cycles/core";
-import { transpiler as re } from "@strudel.cycles/transpiler";
-const oe = X({
+import { createTheme as Z } from "@uiw/codemirror-themes";
+import { useInView as ee } from "react-hook-inview";
+import { webaudioOutput as te, getAudioContext as re } from "@strudel.cycles/webaudio";
+import { repl as oe } from "@strudel.cycles/core";
+import { transpiler as ne } from "@strudel.cycles/transpiler";
+const ae = Z({
   theme: "dark",
   settings: {
     background: "#222",
@@ -42,14 +42,14 @@ const oe = X({
     { tag: r.invalid, color: "#ffffff" }
   ]
 });
-const T = j.define(), ne = U.define({
+const B = $.define(), se = G.define({
   create() {
     return E.none;
   },
   update(e, t) {
     try {
       for (let o of t.effects)
-        if (o.is(T))
+        if (o.is(B))
           if (o.value) {
             const a = E.mark({ attributes: { style: "background-color: #FFCA2880" } });
             e = E.set([a.range(0, t.newDoc.length)]);
@@ -60,25 +60,25 @@ const T = j.define(), ne = U.define({
       return console.warn("flash error", o), e;
     }
   },
-  provide: (e) => O.decorations.from(e)
-}), ae = (e) => {
-  e.dispatch({ effects: T.of(!0) }), setTimeout(() => {
-    e.dispatch({ effects: T.of(!1) });
+  provide: (e) => U.decorations.from(e)
+}), ce = (e) => {
+  e.dispatch({ effects: B.of(!0) }), setTimeout(() => {
+    e.dispatch({ effects: B.of(!1) });
   }, 200);
-}, A = j.define(), se = U.define({
+}, z = $.define(), ie = G.define({
   create() {
     return E.none;
   },
   update(e, t) {
     try {
       for (let o of t.effects)
-        if (o.is(A)) {
+        if (o.is(z)) {
           const a = o.value.map(
-            (s) => (s.context.locations || []).map(({ start: m, end: l }) => {
-              const d = s.context.color || "#FFCA28";
-              let c = t.newDoc.line(m.line).from + m.column, i = t.newDoc.line(l.line).from + l.column;
-              const g = t.newDoc.length;
-              return c > g || i > g ? void 0 : E.mark({ attributes: { style: `outline: 1.5px solid ${d};` } }).range(c, i);
+            (s) => (s.context.locations || []).map(({ start: f, end: d }) => {
+              const u = s.context.color || "#FFCA28";
+              let c = t.newDoc.line(f.line).from + f.column, i = t.newDoc.line(d.line).from + d.column;
+              const m = t.newDoc.length;
+              return c > m || i > m ? void 0 : E.mark({ attributes: { style: `outline: 1.5px solid ${u};` } }).range(c, i);
             })
           ).flat().filter(Boolean) || [];
           e = E.set(a, !0);
@@ -88,69 +88,69 @@ const T = j.define(), ne = U.define({
       return E.set([]);
     }
   },
-  provide: (e) => O.decorations.from(e)
-}), ce = [W(), oe, se, ne];
-function ie({ value: e, onChange: t, onViewChanged: o, onSelectionChange: a, options: s, editorDidMount: m }) {
-  const l = N(
+  provide: (e) => U.decorations.from(e)
+}), le = [Y(), ae, ie, se];
+function de({ value: e, onChange: t, onViewChanged: o, onSelectionChange: a, options: s, editorDidMount: f }) {
+  const d = _(
     (i) => {
       t?.(i);
     },
     [t]
-  ), d = N(
+  ), u = _(
     (i) => {
       o?.(i);
     },
     [o]
-  ), c = N(
+  ), c = _(
     (i) => {
       i.selectionSet && a && a?.(i.state.selection);
     },
     [a]
   );
-  return /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(Q, {
+  return /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(X, {
     value: e,
-    onChange: l,
-    onCreateEditor: d,
+    onChange: d,
+    onCreateEditor: u,
     onUpdate: c,
-    extensions: ce
+    extensions: le
   }));
 }
-function B(...e) {
+function K(...e) {
   return e.filter(Boolean).join(" ");
 }
-function le({ view: e, pattern: t, active: o, getTime: a }) {
-  const s = x([]), m = x();
-  R(() => {
+function ue({ view: e, pattern: t, active: o, getTime: a }) {
+  const s = H([]), f = H();
+  L(() => {
     if (e)
       if (t && o) {
-        let d = function() {
+        let u = function() {
           try {
-            const c = a(), g = [Math.max(m.current || c, c - 1 / 10, 0), c + 1 / 60];
-            m.current = g[1], s.current = s.current.filter((p) => p.whole.end > c);
-            const v = t.queryArc(...g).filter((p) => p.hasOnset());
-            s.current = s.current.concat(v), e.dispatch({ effects: A.of(s.current) });
+            const c = a(), m = [Math.max(f.current || c, c - 1 / 10, 0), c + 1 / 60];
+            f.current = m[1], s.current = s.current.filter((g) => g.whole.end > c);
+            const h = t.queryArc(...m).filter((g) => g.hasOnset());
+            s.current = s.current.concat(h), e.dispatch({ effects: z.of(s.current) });
           } catch {
-            e.dispatch({ effects: A.of([]) });
+            e.dispatch({ effects: z.of([]) });
           }
-          l = requestAnimationFrame(d);
-        }, l = requestAnimationFrame(d);
+          d = requestAnimationFrame(u);
+        }, d = requestAnimationFrame(u);
         return () => {
-          cancelAnimationFrame(l);
+          cancelAnimationFrame(d);
         };
       } else
-        s.current = [], e.dispatch({ effects: A.of([]) });
+        s.current = [], e.dispatch({ effects: z.of([]) });
   }, [t, o, e]);
 }
-const de = "_container_3i85k_1", ue = "_header_3i85k_5", fe = "_buttons_3i85k_9", me = "_button_3i85k_9", ge = "_buttonDisabled_3i85k_17", pe = "_error_3i85k_21", he = "_body_3i85k_25", b = {
-  container: de,
-  header: ue,
-  buttons: fe,
-  button: me,
-  buttonDisabled: ge,
-  error: pe,
-  body: he
+const fe = "_container_3i85k_1", me = "_header_3i85k_5", ge = "_buttons_3i85k_9", pe = "_button_3i85k_9", he = "_buttonDisabled_3i85k_17", be = "_error_3i85k_21", ve = "_body_3i85k_25", v = {
+  container: fe,
+  header: me,
+  buttons: ge,
+  button: pe,
+  buttonDisabled: he,
+  error: be,
+  body: ve
 };
-function q({ type: e }) {
+function O({ type: e }) {
   return /* @__PURE__ */ n.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     className: "sc-h-5 sc-w-5",
@@ -174,137 +174,147 @@ function q({ type: e }) {
     })
   }[e]);
 }
-function ve({
+function Ee(e) {
+  return L(() => (window.addEventListener("message", e), () => window.removeEventListener("message", e)), [e]), _((t) => window.postMessage(t, "*"), []);
+}
+function we({
   defaultOutput: e,
   interval: t,
   getTime: o,
   evalOnMount: a = !1,
   initialCode: s = "",
-  autolink: m = !1,
-  beforeEval: l,
-  afterEval: d,
+  autolink: f = !1,
+  beforeEval: d,
+  afterEval: u,
   onEvalError: c,
   onToggle: i
 }) {
-  const [g, v] = w(), [p, D] = w(), [h, k] = w(s), [y, P] = w(h), [z, _] = w(), [C, H] = w(!1), F = h !== y, { scheduler: u, evaluate: L, start: $, stop: G, pause: J } = I(
-    () => te({
+  const m = V(() => ye(), []), [h, g] = w(), [C, N] = w(), [p, y] = w(s), [M, S] = w(), [k, D] = w(), [F, x] = w(!1), b = p !== M, { scheduler: A, evaluate: T, start: J, stop: q, pause: Q } = V(
+    () => oe({
       interval: t,
       defaultOutput: e,
-      onSchedulerError: v,
-      onEvalError: (f) => {
-        D(f), c?.(f);
+      onSchedulerError: g,
+      onEvalError: (l) => {
+        N(l), c?.(l);
       },
       getTime: o,
-      transpiler: re,
-      beforeEval: ({ code: f }) => {
-        k(f), l?.();
+      transpiler: ne,
+      beforeEval: ({ code: l }) => {
+        y(l), d?.();
       },
-      afterEval: ({ pattern: f, code: S }) => {
-        P(S), _(f), D(), v(), m && (window.location.hash = "#" + encodeURIComponent(btoa(S))), d?.();
+      afterEval: ({ pattern: l, code: P }) => {
+        S(P), D(l), N(), g(), f && (window.location.hash = "#" + encodeURIComponent(btoa(P))), u?.();
       },
-      onToggle: (f) => {
-        H(f), i?.(f);
+      onToggle: (l) => {
+        x(l), i?.(l);
       }
     }),
     [e, t, o]
-  ), M = N(async (f = !0) => L(h, f), [L, h]), V = x();
-  return R(() => {
-    !V.current && a && h && (V.current = !0, M());
-  }, [M, a, h]), R(() => () => {
-    u.stop();
-  }, [u]), {
-    code: h,
-    setCode: k,
-    error: g || p,
-    schedulerError: g,
-    scheduler: u,
-    evalError: p,
-    evaluate: L,
-    activateCode: M,
-    activeCode: y,
-    isDirty: F,
-    pattern: z,
-    started: C,
-    start: $,
-    stop: G,
-    pause: J,
+  ), W = Ee(({ data: { from: l, type: P } }) => {
+    P === "start" && l !== m && q();
+  }), R = _(
+    async (l = !0) => {
+      await T(p, l), W({ type: "start", from: m });
+    },
+    [T, p]
+  ), I = H();
+  return L(() => {
+    !I.current && a && p && (I.current = !0, R());
+  }, [R, a, p]), L(() => () => {
+    A.stop();
+  }, [A]), {
+    code: p,
+    setCode: y,
+    error: h || C,
+    schedulerError: h,
+    scheduler: A,
+    evalError: C,
+    evaluate: T,
+    activateCode: R,
+    activeCode: M,
+    isDirty: b,
+    pattern: k,
+    started: F,
+    start: J,
+    stop: q,
+    pause: Q,
     togglePlay: async () => {
-      C ? u.pause() : await M();
+      F ? A.pause() : await R();
     }
   };
 }
-const be = () => ee().currentTime;
-function Pe({ tune: e, hideOutsideView: t = !1, init: o, enableKeyboard: a }) {
+function ye() {
+  return Math.floor((1 + Math.random()) * 65536).toString(16).substring(1);
+}
+const ke = () => re().currentTime;
+function Se({ tune: e, hideOutsideView: t = !1, init: o, enableKeyboard: a }) {
   const {
     code: s,
-    setCode: m,
-    evaluate: l,
-    activateCode: d,
+    setCode: f,
+    evaluate: d,
+    activateCode: u,
     error: c,
     isDirty: i,
-    activeCode: g,
-    pattern: v,
-    started: p,
-    scheduler: D,
-    togglePlay: h,
-    stop: k
-  } = ve({
+    activeCode: m,
+    pattern: h,
+    started: g,
+    scheduler: C,
+    togglePlay: N,
+    stop: p
+  } = we({
     initialCode: e,
-    defaultOutput: Z,
-    getTime: be
-  }), [y, P] = w(), [z, _] = Y({
+    defaultOutput: te,
+    getTime: ke
+  }), [y, M] = w(), [S, k] = ee({
     threshold: 0.01
-  }), C = x(), H = I(() => ((_ || !t) && (C.current = !0), _ || C.current), [_, t]);
-  return le({
+  }), D = H(), F = V(() => ((k || !t) && (D.current = !0), k || D.current), [k, t]);
+  return ue({
     view: y,
-    pattern: v,
-    active: p && !g?.includes("strudel disable-highlighting"),
-    getTime: () => D.getPhase()
-  }), K(() => {
+    pattern: h,
+    active: g && !m?.includes("strudel disable-highlighting"),
+    getTime: () => C.getPhase()
+  }), j(() => {
     if (a) {
-      const F = async (u) => {
-        (u.ctrlKey || u.altKey) && (u.code === "Enter" ? (u.preventDefault(), ae(y), await d()) : u.code === "Period" && (k(), u.preventDefault()));
+      const x = async (b) => {
+        (b.ctrlKey || b.altKey) && (b.code === "Enter" ? (b.preventDefault(), ce(y), await u()) : b.code === "Period" && (p(), b.preventDefault()));
       };
-      return window.addEventListener("keydown", F, !0), () => window.removeEventListener("keydown", F, !0);
+      return window.addEventListener("keydown", x, !0), () => window.removeEventListener("keydown", x, !0);
     }
-  }, [a, v, s, l, k, y]), /* @__PURE__ */ n.createElement("div", {
-    className: b.container,
-    ref: z
+  }, [a, h, s, d, p, y]), /* @__PURE__ */ n.createElement("div", {
+    className: v.container,
+    ref: S
   }, /* @__PURE__ */ n.createElement("div", {
-    className: b.header
+    className: v.header
   }, /* @__PURE__ */ n.createElement("div", {
-    className: b.buttons
+    className: v.buttons
   }, /* @__PURE__ */ n.createElement("button", {
-    className: B(b.button, p ? "sc-animate-pulse" : ""),
-    onClick: () => h()
-  }, /* @__PURE__ */ n.createElement(q, {
-    type: p ? "pause" : "play"
+    className: K(v.button, g ? "sc-animate-pulse" : ""),
+    onClick: () => N()
+  }, /* @__PURE__ */ n.createElement(O, {
+    type: g ? "pause" : "play"
   })), /* @__PURE__ */ n.createElement("button", {
-    className: B(i ? b.button : b.buttonDisabled),
-    onClick: () => d()
-  }, /* @__PURE__ */ n.createElement(q, {
+    className: K(i ? v.button : v.buttonDisabled),
+    onClick: () => u()
+  }, /* @__PURE__ */ n.createElement(O, {
     type: "refresh"
   }))), c && /* @__PURE__ */ n.createElement("div", {
-    className: b.error
+    className: v.error
   }, c.message)), /* @__PURE__ */ n.createElement("div", {
-    className: b.body
-  }, H && /* @__PURE__ */ n.createElement(ie, {
+    className: v.body
+  }, F && /* @__PURE__ */ n.createElement(de, {
     value: s,
-    onChange: m,
-    onViewChanged: P
+    onChange: f,
+    onViewChanged: M
   })));
 }
-function ze(e) {
-  return R(() => (window.addEventListener("message", e), () => window.removeEventListener("message", e)), [e]), N((t) => window.postMessage(t, "*"), []);
-}
-const He = (e) => K(() => (window.addEventListener("keydown", e, !0), () => window.removeEventListener("keydown", e, !0)), [e]);
+const Te = (e) => j(() => (window.addEventListener("keydown", e, !0), () => window.removeEventListener("keydown", e, !0)), [e]);
 export {
-  ie as CodeMirror,
-  Pe as MiniRepl,
-  B as cx,
-  ae as flash,
-  le as useHighlighting,
-  He as useKeydown,
-  ze as usePostMessage,
-  ve as useStrudel
+  de as CodeMirror,
+  Se as MiniRepl,
+  K as cx,
+  ce as flash,
+  ue as useHighlighting,
+  Te as useKeydown,
+  Ee as usePostMessage,
+  we as useStrudel
 };

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strudel.cycles/react",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "React components for strudel",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
@@ -42,7 +42,7 @@
     "@strudel.cycles/core": "^0.4.0",
     "@strudel.cycles/tone": "^0.4.0",
     "@strudel.cycles/transpiler": "^0.4.0",
-    "@strudel.cycles/webaudio": "^0.4.0",
+    "@strudel.cycles/webaudio": "^0.4.1",
     "@uiw/codemirror-themes": "^4.12.4",
     "@uiw/react-codemirror": "^4.12.4",
     "react-hook-inview": "^4.5.0"

packages/react/src/hooks/useStrudel.mjs

@@ -1,6 +1,7 @@
 import { useRef, useCallback, useEffect, useMemo, useState } from 'react';
 import { repl } from '@strudel.cycles/core';
 import { transpiler } from '@strudel.cycles/transpiler';
+import usePostMessage from './usePostMessage.mjs';
 
 function useStrudel({
   defaultOutput,
@@ -14,11 +15,12 @@ function useStrudel({
   onEvalError,
   onToggle,
 }) {
+  const id = useMemo(() => s4(), []);
   // scheduler
   const [schedulerError, setSchedulerError] = useState();
   const [evalError, setEvalError] = useState();
   const [code, setCode] = useState(initialCode);
-  const [activeCode, setActiveCode] = useState(code);
+  const [activeCode, setActiveCode] = useState();
   const [pattern, setPattern] = useState();
   const [started, setStarted] = useState(false);
   const isDirty = code !== activeCode;
@@ -57,7 +59,19 @@ function useStrudel({
       }),
     [defaultOutput, interval, getTime],
   );
-  const activateCode = useCallback(async (autostart = true) => evaluate(code, autostart), [evaluate, code]);
+  const broadcast = usePostMessage(({ data: { from, type } }) => {
+    if (type === 'start' && from !== id) {
+      // console.log('message', from, type);
+      stop();
+    }
+  });
+  const activateCode = useCallback(
+    async (autostart = true) => {
+      await evaluate(code, autostart);
+      broadcast({ type: 'start', from: id });
+    },
+    [evaluate, code],
+  );
 
   const inited = useRef();
   useEffect(() => {
@@ -103,3 +117,9 @@ function useStrudel({
 }
 
 export default useStrudel;
+
+function s4() {
+  return Math.floor((1 + Math.random()) * 0x10000)
+    .toString(16)
+    .substring(1);
+}

packages/soundfonts/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@strudel.cycles/soundfonts",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {

packages/soundfonts/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strudel.cycles/soundfonts",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Soundsfont support for strudel",
   "main": "index.mjs",
   "type": "module",
@@ -23,7 +23,7 @@
   "homepage": "https://github.com/tidalcycles/strudel#readme",
   "dependencies": {
     "@strudel.cycles/core": "^0.4.0",
-    "@strudel.cycles/webaudio": "^0.4.0",
+    "@strudel.cycles/webaudio": "^0.4.1",
     "sfumato": "^0.1.2",
     "soundfont2": "^0.4.0"
   },

packages/tonal/test/tonal.test.mjs

@@ -12,6 +12,6 @@ import { describe, it, expect } from 'vitest';
 
 describe('tonal', () => {
   it('Should run tonal functions ', () => {
-    expect(pure('c3').scale('C major').scaleTranspose(1)._firstCycleValues).toEqual(['D3']);
+    expect(pure('c3').scale('C major').scaleTranspose(1).firstCycleValues).toEqual(['D3']);
   });
 });

packages/tonal/tonal.mjs

@@ -75,7 +75,7 @@ function scaleOffset(scale, offset, note) {
  */
 
 Pattern.prototype._transpose = function (intervalOrSemitones) {
-  return this._withHap((hap) => {
+  return this.withHap((hap) => {
     const interval = !isNaN(Number(intervalOrSemitones))
       ? Interval.fromSemitones(intervalOrSemitones /*  as number */)
       : String(intervalOrSemitones);
@@ -111,7 +111,7 @@ Pattern.prototype._transpose = function (intervalOrSemitones) {
  */
 
 Pattern.prototype._scaleTranspose = function (offset /* : number | string */) {
-  return this._withHap((hap) => {
+  return this.withHap((hap) => {
     if (!hap.context.scale) {
       throw new Error('can only use scaleTranspose after .scale');
     }
@@ -142,7 +142,7 @@ Pattern.prototype._scaleTranspose = function (offset /* : number | string */) {
  */
 
 Pattern.prototype._scale = function (scale /* : string */) {
-  return this._withHap((hap) => {
+  return this.withHap((hap) => {
     let note = hap.value;
     const asNumber = Number(note);
     if (!isNaN(asNumber)) {

packages/tonal/voicings.mjs

@@ -51,7 +51,7 @@ Pattern.prototype.voicings = function (range) {
   }
   return this.fmapNested((event) => {
     lastVoicing = getVoicing(event.value, lastVoicing, range);
-    return stack(...lastVoicing)._withContext(() => ({
+    return stack(...lastVoicing).withContext(() => ({
       locations: event.context.locations || [],
     }));
   });

packages/tone/test/tone.test.mjs

@@ -13,6 +13,6 @@ describe('tone', () => {
     // const s = synth().chain(out()); // TODO: mock audio context?
     // assert.deepStrictEqual(s, new Tone.Synth().chain(out()));
     const s = {};
-    expect(pure('c3').tone(s)._firstCycleValues).toEqual(['c3']);
+    expect(pure('c3').tone(s).firstCycleValues).toEqual(['c3']);
   });
 });

packages/webaudio/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@strudel.cycles/webaudio",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {

packages/webaudio/package.json

@@ -1,9 +1,8 @@
 {
   "name": "@strudel.cycles/webaudio",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Web Audio helpers for Strudel",
-  "main": "dist/index.cjs.js",
-  "module": "dist/index.es.js",
+  "main": "index.mjs",
   "type": "module",
   "directories": {
     "example": "examples"

packages/webaudio/webaudio.mjs

@@ -157,7 +157,7 @@ function getDelay(orbit, delaytime, delayfeedback, t) {
   if (!delays[orbit]) {
     const ac = getAudioContext();
     const dly = ac.createFeedbackDelay(1, delaytime, delayfeedback);
-    dly.start(t);
+    dly.start?.(t); // for some reason, this throws when audion extension is installed..
     dly.connect(getDestination());
     delays[orbit] = dly;
   }

repl/package.json

@@ -3,13 +3,14 @@
   "private": true,
   "version": "0.0.0",
   "scripts": {
-    "predev": "cd ${PWD}/../tutorial/ && npm run render",
+    "render-jsdoc": "cd ${PWD}/../tutorial/ && npm run render",
+    "predev": "npm run render-jsdoc",
+    "prebuild": "npm run render-jsdoc",
     "dev": "vite --host",
     "start": "vite",
     "build": "vite build",
     "preview": "vite preview",
     "test": "vitest run --reporter verbose -v --no-isolate",
-    "snapshot": "vitest run -u --silent",
     "add-license": "cat etc/agpl-header.txt ../docs/static/js/*LICENSE.txt > /tmp/strudel-license.txt && cp /tmp/strudel-license.txt ../docs/static/js/*LICENSE.txt",
     "predeploy": "npm run build",
     "deploy": "gh-pages -d ../docs",

tutorial/MiniRepl.jsx

@@ -19,7 +19,7 @@ evalScope(
   import('@strudel.cycles/osc'),
 );
 
-prebake();
+// prebake();
 
 export function MiniRepl({ tune }) {
   return <_MiniRepl tune={tune} hideOutsideView={true} />;

tutorial/Tutorial.jsx

@@ -10,6 +10,9 @@ import Tutorial from './tutorial.rendered.mdx';
 // import ApiDoc from './ApiDoc';
 import './style.scss';
 import '@strudel.cycles/react/dist/style.css';
+import { initAudioOnFirstClick } from '@strudel.cycles/webaudio';
+
+initAudioOnFirstClick();
 
 ReactDOM.render(
   <React.StrictMode>

tutorial/test/__snapshots__/examples.test.mjs.snap

@@ -1,5 +1,22 @@
 // Vitest Snapshot v1
 
+exports[`runs examples > example "_apply" example index 0 1`] = `
+[
+  "0/1 -> 1/1: {\\"note\\":\\"C3\\"}",
+  "0/1 -> 1/1: {\\"note\\":\\"Eb3\\"}",
+  "0/1 -> 1/1: {\\"note\\":\\"G3\\"}",
+  "1/1 -> 2/1: {\\"note\\":\\"Eb3\\"}",
+  "1/1 -> 2/1: {\\"note\\":\\"G3\\"}",
+  "1/1 -> 2/1: {\\"note\\":\\"Bb3\\"}",
+  "2/1 -> 3/1: {\\"note\\":\\"G3\\"}",
+  "2/1 -> 3/1: {\\"note\\":\\"Bb3\\"}",
+  "2/1 -> 3/1: {\\"note\\":\\"D4\\"}",
+  "3/1 -> 4/1: {\\"note\\":\\"C3\\"}",
+  "3/1 -> 4/1: {\\"note\\":\\"Eb3\\"}",
+  "3/1 -> 4/1: {\\"note\\":\\"G3\\"}",
+]
+`;
+
 exports[`runs examples > example "accelerate" example index 0 1`] = `
 [
   "0/1 -> 2/1: {\\"s\\":\\"sax\\",\\"accelerate\\":0}",
@@ -767,10 +784,10 @@ exports[`runs examples > example "dry" example index 0 1`] = `
 
 exports[`runs examples > example "each" example index 0 1`] = `
 [
-  "3/4 -> 1/1: {\\"note\\":\\"c3\\"}",
-  "1/2 -> 3/4: {\\"note\\":\\"d3\\"}",
-  "1/4 -> 1/2: {\\"note\\":\\"e3\\"}",
-  "0/1 -> 1/4: {\\"note\\":\\"g3\\"}",
+  "0/1 -> 1/4: {\\"note\\":\\"c3\\"}",
+  "1/4 -> 1/2: {\\"note\\":\\"d3\\"}",
+  "1/2 -> 3/4: {\\"note\\":\\"e3\\"}",
+  "3/4 -> 1/1: {\\"note\\":\\"g3\\"}",
   "1/1 -> 5/4: {\\"note\\":\\"c3\\"}",
   "5/4 -> 3/2: {\\"note\\":\\"d3\\"}",
   "3/2 -> 7/4: {\\"note\\":\\"e3\\"}",
@@ -779,10 +796,10 @@ exports[`runs examples > example "each" example index 0 1`] = `
   "9/4 -> 5/2: {\\"note\\":\\"d3\\"}",
   "5/2 -> 11/4: {\\"note\\":\\"e3\\"}",
   "11/4 -> 3/1: {\\"note\\":\\"g3\\"}",
-  "3/1 -> 13/4: {\\"note\\":\\"c3\\"}",
-  "13/4 -> 7/2: {\\"note\\":\\"d3\\"}",
-  "7/2 -> 15/4: {\\"note\\":\\"e3\\"}",
-  "15/4 -> 4/1: {\\"note\\":\\"g3\\"}",
+  "15/4 -> 4/1: {\\"note\\":\\"c3\\"}",
+  "7/2 -> 15/4: {\\"note\\":\\"d3\\"}",
+  "13/4 -> 7/2: {\\"note\\":\\"e3\\"}",
+  "3/1 -> 13/4: {\\"note\\":\\"g3\\"}",
 ]
 `;
 
@@ -807,36 +824,36 @@ exports[`runs examples > example "echo" example index 0 1`] = `
 [
   "0/1 -> 1/2: {\\"s\\":\\"bd\\"}",
   "1/2 -> 1/1: {\\"s\\":\\"sd\\"}",
-  "-4166666666666667/12500000000000000 -> 8333333333333333/50000000000000000: {\\"s\\":\\"sd\\"}",
-  "8333333333333333/50000000000000000 -> 8333333333333333/12500000000000000: {\\"s\\":\\"bd\\"}",
-  "8333333333333333/12500000000000000 -> 7291666666666667/6250000000000000: {\\"s\\":\\"sd\\"}",
-  "-4166666666666667/25000000000000000 -> 8333333333333333/25000000000000000: {\\"s\\":\\"sd\\"}",
-  "8333333333333333/25000000000000000 -> 5208333333333333/6250000000000000: {\\"s\\":\\"bd\\"}",
-  "5208333333333333/6250000000000000 -> 8333333333333333/6250000000000000: {\\"s\\":\\"sd\\"}",
+  "-1/3 -> 1/6: {\\"s\\":\\"sd\\"}",
+  "1/6 -> 2/3: {\\"s\\":\\"bd\\"}",
+  "2/3 -> 7/6: {\\"s\\":\\"sd\\"}",
+  "-1/6 -> 1/3: {\\"s\\":\\"sd\\"}",
+  "1/3 -> 5/6: {\\"s\\":\\"bd\\"}",
+  "5/6 -> 4/3: {\\"s\\":\\"sd\\"}",
   "1/1 -> 3/2: {\\"s\\":\\"bd\\"}",
   "3/2 -> 2/1: {\\"s\\":\\"sd\\"}",
-  "8333333333333333/12500000000000000 -> 7291666666666667/6250000000000000: {\\"s\\":\\"sd\\"}",
-  "7291666666666667/6250000000000000 -> 5208333333333333/3125000000000000: {\\"s\\":\\"bd\\"}",
-  "5208333333333333/3125000000000000 -> 6770833333333333/3125000000000000: {\\"s\\":\\"sd\\"}",
-  "5208333333333333/6250000000000000 -> 8333333333333333/6250000000000000: {\\"s\\":\\"sd\\"}",
-  "8333333333333333/6250000000000000 -> 5729166666666667/3125000000000000: {\\"s\\":\\"bd\\"}",
-  "5729166666666667/3125000000000000 -> 7291666666666667/3125000000000000: {\\"s\\":\\"sd\\"}",
+  "2/3 -> 7/6: {\\"s\\":\\"sd\\"}",
+  "7/6 -> 5/3: {\\"s\\":\\"bd\\"}",
+  "5/3 -> 13/6: {\\"s\\":\\"sd\\"}",
+  "5/6 -> 4/3: {\\"s\\":\\"sd\\"}",
+  "4/3 -> 11/6: {\\"s\\":\\"bd\\"}",
+  "11/6 -> 7/3: {\\"s\\":\\"sd\\"}",
   "2/1 -> 5/2: {\\"s\\":\\"bd\\"}",
   "5/2 -> 3/1: {\\"s\\":\\"sd\\"}",
-  "5208333333333333/3125000000000000 -> 6770833333333333/3125000000000000: {\\"s\\":\\"sd\\"}",
-  "6770833333333333/3125000000000000 -> 8333333333333333/3125000000000000: {\\"s\\":\\"bd\\"}",
-  "8333333333333333/3125000000000000 -> 4947916666666667/1562500000000000: {\\"s\\":\\"sd\\"}",
-  "5729166666666667/3125000000000000 -> 7291666666666667/3125000000000000: {\\"s\\":\\"sd\\"}",
-  "7291666666666667/3125000000000000 -> 8854166666666667/3125000000000000: {\\"s\\":\\"bd\\"}",
-  "8854166666666667/3125000000000000 -> 5208333333333333/1562500000000000: {\\"s\\":\\"sd\\"}",
+  "5/3 -> 13/6: {\\"s\\":\\"sd\\"}",
+  "13/6 -> 8/3: {\\"s\\":\\"bd\\"}",
+  "8/3 -> 19/6: {\\"s\\":\\"sd\\"}",
+  "11/6 -> 7/3: {\\"s\\":\\"sd\\"}",
+  "7/3 -> 17/6: {\\"s\\":\\"bd\\"}",
+  "17/6 -> 10/3: {\\"s\\":\\"sd\\"}",
   "3/1 -> 7/2: {\\"s\\":\\"bd\\"}",
   "7/2 -> 4/1: {\\"s\\":\\"sd\\"}",
-  "8333333333333333/3125000000000000 -> 4947916666666667/1562500000000000: {\\"s\\":\\"sd\\"}",
-  "4947916666666667/1562500000000000 -> 5729166666666667/1562500000000000: {\\"s\\":\\"bd\\"}",
-  "5729166666666667/1562500000000000 -> 6510416666666667/1562500000000000: {\\"s\\":\\"sd\\"}",
-  "8854166666666667/3125000000000000 -> 5208333333333333/1562500000000000: {\\"s\\":\\"sd\\"}",
-  "5208333333333333/1562500000000000 -> 5989583333333333/1562500000000000: {\\"s\\":\\"bd\\"}",
-  "5989583333333333/1562500000000000 -> 6770833333333333/1562500000000000: {\\"s\\":\\"sd\\"}",
+  "8/3 -> 19/6: {\\"s\\":\\"sd\\"}",
+  "19/6 -> 11/3: {\\"s\\":\\"bd\\"}",
+  "11/3 -> 25/6: {\\"s\\":\\"sd\\"}",
+  "17/6 -> 10/3: {\\"s\\":\\"sd\\"}",
+  "10/3 -> 23/6: {\\"s\\":\\"bd\\"}",
+  "23/6 -> 13/3: {\\"s\\":\\"sd\\"}",
 ]
 `;
 
@@ -1593,6 +1610,27 @@ exports[`runs examples > example "fastcat" example index 0 1`] = `
 ]
 `;
 
+exports[`runs examples > example "firstOf" example index 0 1`] = `
+[
+  "3/4 -> 1/1: {\\"note\\":\\"c3\\"}",
+  "1/2 -> 3/4: {\\"note\\":\\"d3\\"}",
+  "1/4 -> 1/2: {\\"note\\":\\"e3\\"}",
+  "0/1 -> 1/4: {\\"note\\":\\"g3\\"}",
+  "1/1 -> 5/4: {\\"note\\":\\"c3\\"}",
+  "5/4 -> 3/2: {\\"note\\":\\"d3\\"}",
+  "3/2 -> 7/4: {\\"note\\":\\"e3\\"}",
+  "7/4 -> 2/1: {\\"note\\":\\"g3\\"}",
+  "2/1 -> 9/4: {\\"note\\":\\"c3\\"}",
+  "9/4 -> 5/2: {\\"note\\":\\"d3\\"}",
+  "5/2 -> 11/4: {\\"note\\":\\"e3\\"}",
+  "11/4 -> 3/1: {\\"note\\":\\"g3\\"}",
+  "3/1 -> 13/4: {\\"note\\":\\"c3\\"}",
+  "13/4 -> 7/2: {\\"note\\":\\"d3\\"}",
+  "7/2 -> 15/4: {\\"note\\":\\"e3\\"}",
+  "15/4 -> 4/1: {\\"note\\":\\"g3\\"}",
+]
+`;
+
 exports[`runs examples > example "freq" example index 0 1`] = `
 [
   "0/1 -> 1/4: {\\"freq\\":220,\\"s\\":\\"superzow\\"}",
@@ -1793,6 +1831,27 @@ exports[`runs examples > example "iterBack" example index 0 1`] = `
 ]
 `;
 
+exports[`runs examples > example "lastOf" example index 0 1`] = `
+[
+  "0/1 -> 1/4: {\\"note\\":\\"c3\\"}",
+  "1/4 -> 1/2: {\\"note\\":\\"d3\\"}",
+  "1/2 -> 3/4: {\\"note\\":\\"e3\\"}",
+  "3/4 -> 1/1: {\\"note\\":\\"g3\\"}",
+  "1/1 -> 5/4: {\\"note\\":\\"c3\\"}",
+  "5/4 -> 3/2: {\\"note\\":\\"d3\\"}",
+  "3/2 -> 7/4: {\\"note\\":\\"e3\\"}",
+  "7/4 -> 2/1: {\\"note\\":\\"g3\\"}",
+  "2/1 -> 9/4: {\\"note\\":\\"c3\\"}",
+  "9/4 -> 5/2: {\\"note\\":\\"d3\\"}",
+  "5/2 -> 11/4: {\\"note\\":\\"e3\\"}",
+  "11/4 -> 3/1: {\\"note\\":\\"g3\\"}",
+  "15/4 -> 4/1: {\\"note\\":\\"c3\\"}",
+  "7/2 -> 15/4: {\\"note\\":\\"d3\\"}",
+  "13/4 -> 7/2: {\\"note\\":\\"e3\\"}",
+  "3/1 -> 13/4: {\\"note\\":\\"g3\\"}",
+]
+`;
+
 exports[`runs examples > example "late" example index 0 1`] = `
 [
   "0/1 -> 1/2: {\\"s\\":\\"bd\\"}",

tutorial/tutorial.mdx

@@ -253,7 +253,7 @@ Using round brackets, we can create rhythmical sub-divisions based on three para
 The first parameter controls how may beats will be played.
 The second parameter controls the total amount of segments the beats will be distributed over.
 The third (optional) parameter controls the starting position for distributing the beats.
-One popular Euclidian rhythm (going by various names, such as "Pop Clave") is "(3,8,1)" or simply "(3,8)",
+One popular Euclidian rhythm (going by various names, such as "Pop Clave") is "(3,8,0)" or simply "(3,8)",
 resulting in a rhythmical structure of "x ~ ~ x ~ ~ x ~" (3 beats over 8 segments, starting on position 1).
 
 <MiniRepl tune={`note("e5(2,8) b4(3,8) d5(2,8) c5(3,8)").slow(4)`} />
@@ -358,7 +358,7 @@ For pitched sounds, you can use `note`, just like with synths:
 
 <MiniRepl
   tune={`samples({
-  "gtr": 'gtr/0001_cleanC.wav',
+  'gtr': 'gtr/0001_cleanC.wav',
 }, 'github:tidalcycles/Dirt-Samples/master/');
 note("g3 [bb3 c4] <g4 f4 eb4 f3>@2").s('gtr').gain(.5)`}
 />
@@ -368,7 +368,7 @@ If we want them to behave more like a synth, we can add `clip(1)`:
 
 <MiniRepl
   tune={`samples({
-  "gtr": 'gtr/0001_cleanC.wav',
+  'gtr': 'gtr/0001_cleanC.wav',
 }, 'github:tidalcycles/Dirt-Samples/master/');
 note("g3 [bb3 c4] <g4 f4 eb4 f3>@2").s('gtr').clip(1)
   .gain(.5)`}
@@ -380,8 +380,8 @@ If we have 2 samples with different base pitches, we can make them in tune by sp
 
 <MiniRepl
   tune={`samples({
-  "gtr": 'gtr/0001_cleanC.wav',
-  "moog": { 'g3': 'moog/005_Mighty%20Moog%20G3.wav' },
+  'gtr': 'gtr/0001_cleanC.wav',
+  'moog': { 'g3': 'moog/005_Mighty%20Moog%20G3.wav' },
 }, 'github:tidalcycles/Dirt-Samples/master/');
 note("g3 [bb3 c4] <g4 f4 eb4 f3>@2").s("gtr,moog").clip(1)
   .gain(.5)`}
@@ -393,7 +393,7 @@ We can also declare different samples for different regions of the keyboard:
 
 <MiniRepl
   tune={`samples({
-  "moog": {
+  'moog': {
     'g2': 'moog/004_Mighty%20Moog%20G2.wav',
     'g3': 'moog/005_Mighty%20Moog%20G3.wav',
     'g4': 'moog/006_Mighty%20Moog%20G4.wav',
@@ -769,9 +769,9 @@ Together with layer, struct and voicings, this can be used to create a basic bac
 
 <MiniRepl
   tune={`"<C^7 A7b13 Dm7 G7>".layer(
-  x => x.voicings(['d3','g4']).struct("~ x"),
-  x => x.rootNotes(2).tone(synth(osc('sawtooth4')).chain(out()))
-).note()`}
+  x => x.voicings(['d3','g4']).struct("~ x").note(),
+  x => x.rootNotes(2).note().s('sawtooth').cutoff(800)
+)`}
 />
 
 <!-- TODO: use range instead of octave. -->
@@ -786,17 +786,15 @@ Strudel also supports midi via [webmidi](https://npmjs.com/package/webmidi).
 
 ### midi(outputName?)
 
-Make sure to have a midi device connected or to use an IAC Driver.
+Either connect a midi device or use the IAC Driver (Mac) or Midi Through Port (Linux) for internal midi messages.
 If no outputName is given, it uses the first midi output it finds.
 
-Midi is currently not supported by the mini repl used here, but you can [open the midi example in the repl](https://strudel.tidalcycles.org/#c3RhY2soIjxDXjcgQTcgRG03IEc3PiIubS52b2ljaW5ncygpLCAnPEMzIEEyIEQzIEcyPicubSkKICAubWlkaSgp).
-
-In the REPL, you will se a log of the available MIDI devices.
-
-<!--<MiniRepl
+<MiniRepl
   tune={`stack("<C^7 A7 Dm7 G7>".voicings(), "<C3 A2 D3 G2>")
   .midi()`}
-/>-->
+/>
+
+In the console, you will see a log of the available MIDI devices as soon as you run the code, e.g. `Midi connected! Using "Midi Through Port-0".`
 
 # Superdirt API
 

workshop/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

workshop/README.md

@@ -0,0 +1,33 @@
+# Strudel Workshop
+
+This may become a resource to teach strudel in workshop format.
+
+## Install
+
+From the root of the strudel repo:
+
+```sh
+npm i # install strudel project dependencies
+cd workshop && npm i # install workshop dependencies
+npm run dev # run dev server
+```
+
+This assumes you have node 16+ installed.
+
+## How to write
+
+While running the dev server, go to `workshop.mdx` to write!
+When the file is saved, the browser will hot reload the file and reveal the changes instantly.
+
+You can use normal markdown + JSX, which enables using the MiniRepl component.
+You could also add any react component and import it to the mdx file.
+
+## Build
+
+Running
+
+```sh
+npm run build
+```
+
+..will output a single `index.html` file to `dist`. This file can either be opened directly in the browser (locally) or uploaded to some server.

workshop/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Strudel Workshop</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

workshop/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "workshop",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --open",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "devDependencies": {
+    "@mdx-js/mdx": "^1.6.22",
+    "@mdx-js/react": "^1.6.22",
+    "@tailwindcss/typography": "^0.5.8",
+    "@types/react": "^18.0.24",
+    "@types/react-dom": "^18.0.8",
+    "@vitejs/plugin-react": "^2.2.0",
+    "autoprefixer": "^10.4.13",
+    "postcss": "^8.4.19",
+    "tailwindcss": "^3.2.4",
+    "vite": "^3.2.3",
+    "vite-plugin-mdx": "^3.5.11",
+    "vite-plugin-singlefile": "^0.13.1"
+  }
+}

workshop/postcss.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

workshop/src/App.jsx

@@ -0,0 +1,16 @@
+import { initAudioOnFirstClick } from '@strudel.cycles/webaudio';
+import Workshop from './workshop.mdx';
+
+initAudioOnFirstClick();
+
+function App() {
+  return (
+    <div className="bg-slate-900 w-screen h-screen overflow-auto">
+      <main className="p-4 pl-6 max-w-3xl prose prose-invert">
+        <Workshop />
+      </main>
+    </div>
+  );
+}
+
+export default App;

workshop/src/MiniRepl.jsx

@@ -0,0 +1,22 @@
+import { evalScope, controls } from '@strudel.cycles/core';
+import { MiniRepl as _MiniRepl } from '@strudel.cycles/react';
+import { samples } from '@strudel.cycles/webaudio';
+import '@strudel.cycles/react/dist/style.css';
+
+samples('github:tidalcycles/Dirt-Samples/master')
+
+evalScope(
+  controls,
+  import('@strudel.cycles/core'),
+  // import('@strudel.cycles/tone'),
+  import('@strudel.cycles/tonal'),
+  import('@strudel.cycles/mini'),
+  import('@strudel.cycles/midi'),
+  // import('@strudel.cycles/xen'),
+  import('@strudel.cycles/webaudio'),
+  import('@strudel.cycles/osc'),
+);
+
+export function MiniRepl({ tune }) {
+  return <_MiniRepl tune={tune} hideOutsideView={true} />;
+}

workshop/src/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

workshop/src/main.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+import './index.css';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root'),
+);

workshop/src/workshop.mdx

@@ -0,0 +1,49 @@
+import { MiniRepl } from './MiniRepl';
+
+# Workshop
+
+> This is a starter project for any type of teaching material using strudel!
+
+## What is Strudel?
+
+1. A pastry made with fruit or cheese rolled up in layers of thin sheets of dough and then baked.
+2. a pastry made from multiple, thin layers of dough rolled up and filled with fruit, etc.
+3. thin sheet of filled dough rolled and baked
+
+## Some REPLs:
+
+Small REPL:
+
+<MiniRepl tune={`s("bd sd,hh*8")`} />
+
+Big REPL:
+
+<MiniRepl
+  tune={`await samples({
+  bd: ['bd/BT0AADA.wav','bd/BT0AAD0.wav','bd/BT0A0DA.wav','bd/BT0A0D3.wav','bd/BT0A0D0.wav','bd/BT0A0A7.wav'],
+  sd: ['sd/rytm-01-classic.wav','sd/rytm-00-hard.wav'],
+  hh: ['hh27/000_hh27closedhh.wav','hh/000_hh3closedhh.wav'],
+}, 'github:tidalcycles/Dirt-Samples/master/');
+stack(
+s("bd,[~ <sd!3 sd(3,4,2)>],hh(3,4)") // drums
+.speed(perlin.range(.7,.9)) // random sample speed variation
+,"<a1 b1\*2 a1(3,8) e2>" // bassline
+.off(1/8,x=>x.add(12).degradeBy(.5)) // random octave jumps
+.add(perlin.range(0,.5)) // random pitch variation
+.superimpose(add(.05)) // add second, slightly detuned voice
+.n() // wrap in "n"
+.decay(.15).sustain(0) // make each note of equal length
+.s('sawtooth') // waveform
+.gain(.4) // turn down
+.cutoff(sine.slow(7).range(300,5000)) // automate cutoff
+,"<Am7!3 <Em7 E7b13 Em7 Ebm7b5>>".voicings() // chords
+.superimpose(x=>x.add(.04)) // add second, slightly detuned voice
+.add(perlin.range(0,.5)) // random pitch variation
+.n() // wrap in "n"
+.s('sawtooth') // waveform
+.gain(.16) // turn down
+.cutoff(500) // fixed cutoff
+.attack(1) // slowly fade in
+)
+.slow(3/2)`}
+/>

workshop/tailwind.config.cjs

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx,mdx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [require('@tailwindcss/typography')],
+};

workshop/vite.config.js

@@ -0,0 +1,25 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import _mdx from 'vite-plugin-mdx';
+import { viteSingleFile } from 'vite-plugin-singlefile';
+// import remarkToc from 'remark-toc';
+// import rehypeSlug from 'rehype-slug';
+// import rehypeAutolinkHeadings from 'rehype-autolink-headings';
+
+const mdx = _mdx.default || _mdx;
+// `options` are passed to `@mdx-js/mdx`
+const options = {
+  // See https://mdxjs.com/advanced/plugins
+  remarkPlugins: [
+    // remarkToc,
+    // E.g. `remark-frontmatter`
+  ],
+  rehypePlugins: [
+    // rehypeSlug, rehypeAutolinkHeadings
+  ],
+};
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react(), mdx(options), viteSingleFile()],
+});