more fiddling with making module level curried functions

implement collect + arp function

.eslintignore

@@ -0,0 +1,14 @@
+krill-parser.js
+krill.pegjs
+.eslintrc.json
+server.js
+tidal-sniffer.js
+*.jsx
+tunejs.js
+out/**
+postcss.config.js
+postcss.config.cjs
+tailwind.config.js
+vite.config.js
+/**/dist/**/*
+!**/*.mjs

.eslintrc.json

@@ -0,0 +1,16 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": ["eslint:recommended"],
+  "overrides": [],
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "plugins": [],
+  "rules": {
+    "no-unused-vars": ["warn", { "destructuredArrayIgnorePattern": ".", "ignoreRestSiblings": false }]
+  }
+}

jsdoc.config.json

@@ -1,7 +1,7 @@
 {
   "source": {
     "includePattern": ".+\\.(js(doc|x)?|mjs)$",
-    "excludePattern": "node_modules|shift-parser|shift-reducer|shift-traverser"
+    "excludePattern": "node_modules|shift-parser|shift-reducer|shift-traverser|dist"
   },
   "plugins": ["plugins/markdown"],
   "opts": {

package.json

@@ -5,19 +5,20 @@
   "description": "Port of tidalcycles to javascript",
   "scripts": {
     "pretest": "cd tutorial && npm run jsdoc-json",
-    "test": "vitest run --version",
+    "test": "npm run lint && vitest run --version",
     "test-ui": "vitest --ui",
     "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",
     "preview": "npx serve ./out",
     "deploy": "NODE_DEBUG=gh-pages gh-pages -d out",
     "jsdoc": "jsdoc packages/ -c jsdoc.config.json",
-    "jsdoc-json": "jsdoc packages/ --template ./node_modules/jsdoc-json --destination doc.json -c jsdoc.config.json"
+    "jsdoc-json": "jsdoc packages/ --template ./node_modules/jsdoc-json --destination doc.json -c jsdoc.config.json",
+    "lint": "npx eslint . --ext mjs,js --quiet"
   },
   "workspaces": [
     "packages/*"
@@ -42,6 +43,7 @@
   "devDependencies": {
     "@vitest/ui": "^0.21.1",
     "c8": "^7.12.0",
+    "eslint": "^8.28.0",
     "events": "^3.3.0",
     "gh-pages": "^4.0.0",
     "jsdoc": "^3.6.10",

packages/core/controls.mjs

@@ -4,7 +4,8 @@ Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/st
 This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { Pattern, sequence } from './pattern.mjs';
+import pattern from './pattern.mjs';
+const { Pattern, sequence } = pattern;
 
 const controls = {};
 const generic_params = [
@@ -400,7 +401,7 @@ const generic_params = [
    * @example
    * freq("220 110 440 110").s("superzow").osc()
    * @example
-   * freq("110".mulOut(".5 1.5 .6 [2 3]")).s("superzow").osc()
+   * freq("110".mul.out(".5 1.5 .6 [2 3]")).s("superzow").osc()
    *
    */
   ['f', 'freq', ''],
@@ -787,6 +788,6 @@ controls.createParam = (name) => {
 };
 
 controls.createParams = (...names) =>
-  names.reduce((acc, name) => Object.assign(acc, { [name]: createParam(name) }), {});
+  names.reduce((acc, name) => Object.assign(acc, { [name]: controls.createParam(name) }), {});
 
 export default controls;

packages/core/cyclist.mjs

@@ -5,6 +5,7 @@ This program is free software: you can redistribute it and/or modify it under th
 */
 
 import createClock from './zyklus.mjs';
+import { logger } from './logger.mjs';
 
 export class Cyclist {
   worker;
@@ -13,8 +14,10 @@ export class Cyclist {
   cps = 1; // TODO
   getTime;
   phase = 0;
-  constructor({ interval, onTrigger, onError, getTime, latency = 0.1 }) {
+  constructor({ interval, onTrigger, onToggle, onError, getTime, latency = 0.1 }) {
     this.getTime = getTime;
+    this.onToggle = onToggle;
+    this.latency = latency;
     const round = (x) => Math.round(x * 1000) / 1000;
     this.clock = createClock(
       getTime,
@@ -28,9 +31,7 @@ export class Cyclist {
         const time = getTime();
         try {
           const haps = this.pattern.queryArc(begin, end); // get Haps
-          // console.log('haps', haps.map((hap) => hap.value.n).join(' '));
           haps.forEach((hap) => {
-            // console.log('hap', hap.value.n, hap.part.begin);
             if (hap.part.begin.equals(hap.whole.begin)) {
               const deadline = hap.whole.begin + this.origin - time + latency;
               const duration = hap.duration * 1;
@@ -38,7 +39,7 @@ export class Cyclist {
             }
           });
         } catch (e) {
-          console.warn('scheduler error', e);
+          logger(`[cyclist] error: ${e.message}`);
           onError?.(e);
         }
       }, // called slightly before each cycle
@@ -46,24 +47,29 @@ export class Cyclist {
     );
   }
   getPhase() {
-    return this.phase;
+    return this.getTime() - this.origin - this.latency;
+  }
+  setStarted(v) {
+    this.started = v;
+    this.onToggle?.(v);
   }
   start() {
     if (!this.pattern) {
       throw new Error('Scheduler: no pattern set! call .setPattern first.');
     }
+    logger('[cyclist] start');
     this.clock.start();
-    this.started = true;
+    this.setStarted(true);
   }
   pause() {
-    this.clock.stop();
-    delete this.origin;
-    this.started = false;
+    logger('[cyclist] pause');
+    this.clock.pause();
+    this.setStarted(false);
   }
   stop() {
-    delete this.origin;
+    logger('[cyclist] stop');
     this.clock.stop();
-    this.started = false;
+    this.setStarted(false);
   }
   setPattern(pat, autostart = false) {
     this.pattern = pat;

packages/core/draw.mjs

@@ -4,8 +4,11 @@ Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/st
 This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { Tone } from './tone.mjs';
-import { Pattern } from '@strudel.cycles/core';
+import pattern from './pattern.mjs';
+const Pattern = pattern.Pattern;
+import { getTime } from './time.mjs';
+import { State } from './state.mjs';
+import { TimeSpan } from './timespan.mjs';
 
 export const getDrawContext = (id = 'test-canvas') => {
   let canvas = document.querySelector('#' + id);
@@ -28,7 +31,7 @@ Pattern.prototype.draw = function (callback, { from, to, onQuery }) {
   let cycle,
     events = [];
   const animate = (time) => {
-    const t = Tone.getTransport().seconds;
+    const t = getTime();
     if (from !== undefined && to !== undefined) {
       const currentCycle = Math.floor(t);
       if (cycle !== currentCycle) {
@@ -50,9 +53,9 @@ Pattern.prototype.draw = function (callback, { from, to, onQuery }) {
   return this;
 };
 
-export const cleanupDraw = () => {
+export const cleanupDraw = (clearScreen = true) => {
   const ctx = getDrawContext();
-  ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
+  clearScreen && ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
   if (window.strudelAnimation) {
     cancelAnimationFrame(window.strudelAnimation);
   }

packages/core/euclid.mjs

@@ -4,7 +4,8 @@ Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/st
 This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { Pattern, timeCat } from './pattern.mjs';
+import pattern from './pattern.mjs';
+const { Pattern, timeCat } = pattern;
 import bjork from 'bjork';
 import { rotate } from './util.mjs';
 import Fraction from './fraction.mjs';

packages/core/evaluate.mjs

@@ -4,9 +4,8 @@ Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/st
 This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import * as strudel from '@strudel.cycles/core';
-
-const { isPattern, Pattern } = strudel;
+import pattern from './pattern.mjs';
+const { isPattern, Pattern } = pattern;
 
 let scoped = false;
 export const evalScope = async (...args) => {
@@ -24,8 +23,16 @@ export const evalScope = async (...args) => {
   Object.assign(globalThis, ...modules, Pattern.prototype.bootstrap());
 };
 
-function safeEval(str) {
-  return Function('"use strict";return (' + str + ')')();
+function safeEval(str, options = {}) {
+  const { wrapExpression = true, wrapAsync = true } = options;
+  if (wrapExpression) {
+    str = `{${str}}`;
+  }
+  if (wrapAsync) {
+    str = `(async ()=>${str})()`;
+  }
+  const body = `"use strict";return (${str})`;
+  return Function(body)();
 }
 
 export const evaluate = async (code, transpiler) => {
@@ -35,7 +42,9 @@ export const evaluate = async (code, transpiler) => {
   if (transpiler) {
     code = transpiler(code); // transform syntactically correct js code to semantically usable code
   }
-  let evaluated = await safeEval(code);
+  // if no transpiler is given, we expect a single instruction (!wrapExpression)
+  const options = { wrapExpression: !!transpiler };
+  let evaluated = await safeEval(code, options);
   if (!isPattern(evaluated)) {
     console.log('evaluated', evaluated);
     const message = `got "${typeof evaluated}" instead of pattern`;

packages/core/examples/vanilla.html

@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Buildless Vanilla Strudel REPL</title>
+  </head>
+  <body style="margin: 0; background: #222">
+    <div style="display: grid; height: 100vh">
+      <textarea
+        id="text"
+        style="font-size: 2em; border: 0; color: white; background: transparent; outline: none; padding: 20px"
+        spellcheck="false"
+      ></textarea>
+    </div>
+    <button
+      id="start"
+      style="
+        position: absolute;
+        border-radius: 10px;
+        top: 20px;
+        right: 20px;
+        padding: 20px;
+        border: 2px solid white;
+        background: transparent;
+        color: white;
+        cursor: pointer;
+      "
+    >
+      evaluate
+    </button>
+    <div id="output"></div>
+    <script type="module">
+      import { controls, repl, evalScope } from 'https://cdn.skypack.dev/@strudel.cycles/core@0.3.2';
+      import { mini } from 'https://cdn.skypack.dev/@strudel.cycles/mini@0.3.2';
+      import { transpiler } from 'https://cdn.skypack.dev/@strudel.cycles/transpiler@0.3.2';
+      import { getAudioContext, webaudioOutput } from 'https://cdn.skypack.dev/@strudel.cycles/webaudio@0.3.3';
+
+      const ctx = getAudioContext();
+      const input = document.getElementById('text');
+      input.innerHTML = getTune();
+
+      evalScope(
+        controls,
+        import('https://cdn.skypack.dev/@strudel.cycles/core@0.3.2'),
+        import('https://cdn.skypack.dev/@strudel.cycles/mini@0.3.2'),
+        import('https://cdn.skypack.dev/@strudel.cycles/tonal@0.3.3'),
+        import('https://cdn.skypack.dev/@strudel.cycles/webaudio@0.3.3'),
+      );
+
+      const { evaluate } = repl({
+        defaultOutput: webaudioOutput,
+        getTime: () => ctx.currentTime,
+        transpiler,
+      });
+      document.getElementById('start').addEventListener('click', () => {
+        ctx.resume();
+        evaluate(input.value);
+      });
+
+      function getTune() {
+        return `await samples('github:tidalcycles/Dirt-Samples/master')
+
+stack(
+  // amen
+  n("0 1 2 3 4 5 6 7")
+  .sometimes(x=>x.ply(2))
+  .rarely(x=>x.speed("2 | -2"))
+  .sometimesBy(.4, x=>x.delay(".5"))
+  .s("amencutup")
+  .slow(2)
+  .room(.5)
+  ,
+  // bass
+  sine.add(saw.slow(4)).range(0,7).segment(8)
+  .superimpose(x=>x.add(.1))
+  .scale('G0 minor').note()
+  .s("sawtooth").decay(.1).sustain(0)
+  .gain(.4).cutoff(perlin.range(300,3000).slow(8)).resonance(10)
+  .degradeBy("0 0.1 .5 .1")
+  .rarely(add(note("12")))
+  ,
+  // chord
+  note("Bb3,D4".superimpose(x=>x.add(.2)))
+  .s('sawtooth').cutoff(1000).struct("<~@3 [~ x]>")
+  .decay(.05).sustain(.0).delay(.8).delaytime(.125).room(.8)
+  ,
+  // alien
+  s("breath").room(1).shape(.6).chop(16).rev().mask("<x ~@7>")
+  ,
+  n("0 1").s("east").delay(.5).degradeBy(.8).speed(rand.range(.5,1.5))
+).reset("<x@7 x(5,8)>")`;
+      }
+    </script>
+  </body>
+</html>

packages/core/examples/vite-vanilla-repl/dist/assets/index.211bbc68.js

@@ -0,0 +1 @@
+import{b as s,h as i,m,a as n,c as p,p as t}from"./index.4cbc0a10.js";export{s as SyntaxError,i as h,m as mini,n as minify,p as parse,t as patternifyAST};

packages/core/examples/vite-vanilla-repl/dist/assets/index.b66fb637.js

@@ -1 +0,0 @@
-import{g as s,b as d,e as t,j as u,l as o,f as r,p as f,i as p,d as g,h as i,w as l,a as m}from"./index.f88145a1.js";export{s as getAudioContext,d as getCachedBuffer,t as getLoadedBuffer,u as getLoadedSamples,o as loadBuffer,r as loadGithubSamples,f as panic,p as resetLoadedSamples,g as reverseBuffer,i as samples,l as webaudioOutput,m as webaudioOutputTrigger};

packages/core/examples/vite-vanilla-repl/dist/assets/index.ecddf978.js

@@ -0,0 +1 @@
+import{g as s,f as d,i as t,n as r,l as u,j as o,d as f,k as p,r as g,s as i,w as l,e as m}from"./index.4cbc0a10.js";export{s as getAudioContext,d as getCachedBuffer,t as getLoadedBuffer,r as getLoadedSamples,u as loadBuffer,o as loadGithubSamples,f as panic,p as resetLoadedSamples,g as reverseBuffer,i as samples,l as webaudioOutput,m as webaudioOutputTrigger};

packages/core/examples/vite-vanilla-repl/dist/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite Vanilla Strudel REPL</title>
-    <script type="module" crossorigin src="/tidalcycles/strudel/general-purpose-scheduler/packages/core/examples/vite-vanilla-repl/dist/assets/index.f88145a1.js"></script>
+    <script type="module" crossorigin src="/tidalcycles/strudel/use-acorn/packages/core/examples/vite-vanilla-repl/dist/assets/index.4cbc0a10.js"></script>
   </head>
   <body style="margin: 0; background: #222">
     <div style="display: grid; height: 100vh">

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

@@ -1,6 +1,7 @@
-import { controls, repl, evalScope } from '@strudel.cycles/core';
+import { controls, repl, evalScope, setStringParser } from '@strudel.cycles/core';
+import { mini } from '@strudel.cycles/mini';
 import { getAudioContext, webaudioOutput } from '@strudel.cycles/webaudio';
-import shapeshifter from '@strudel.cycles/eval/shapeshifter.mjs';
+// import { transpiler } from '@strudel.cycles/transpiler';
 import tune from './tune.mjs';
 
 const ctx = getAudioContext();
@@ -15,10 +16,12 @@ evalScope(
   import('@strudel.cycles/tonal'),
 );
 
+setStringParser(mini)
+
 const { evaluate } = repl({
   defaultOutput: webaudioOutput,
   getTime: () => ctx.currentTime,
-  transpiler: shapeshifter,
+  // transpiler,
 });
 document.getElementById('start').addEventListener('click', () => {
   ctx.resume();

packages/core/examples/vite-vanilla-repl/package.json

@@ -5,10 +5,11 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "vite build --base /tidalcycles/strudel/general-purpose-scheduler/packages/core/examples/vite-vanilla-repl/dist/",
+    "build-githack": "vite build --base /tidalcycles/strudel/use-acorn/packages/core/examples/vite-vanilla-repl/dist/",
+    "build": "vite build",
     "preview": "vite preview"
   },
   "devDependencies": {
     "vite": "^3.2.0"
   }
-}
+}

packages/core/examples/vite-vanilla-repl/tune.mjs

@@ -1,4 +1,4 @@
-export default `await samples('github:tidalcycles/Dirt-Samples/master')
+/* export default `await samples('github:tidalcycles/Dirt-Samples/master')
 
 stack(
   // amen
@@ -29,3 +29,11 @@ stack(
   ,
   n("0 1").s("east").delay(.5).degradeBy(.8).speed(rand.range(.5,1.5))
 ).reset("<x@7 x(5,8)>")`;
+ */
+
+export default `stack(
+  n("c3 [eb3,g3]")
+  .delay("<0 .5>")
+  .delaytime(".16 | .33")
+  .delayfeedback(".6 | .8")
+).sometimes(x=>x.speed("-1"))`;

packages/core/examples/without-audio.html

@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Buildless Vanilla Strudel REPL</title>
+  </head>
+  <body style="margin: 0; background: #222">
+    <div style="display: grid; height: 100vh">
+      <textarea
+        id="text"
+        style="font-size: 2em; border: 0; color: white; background: transparent; outline: none; padding: 20px"
+        spellcheck="false"
+      >
+// LOADING</textarea
+      >
+    </div>
+    <button
+      id="start"
+      style="
+        position: absolute;
+        border-radius: 10px;
+        top: 20px;
+        right: 20px;
+        padding: 20px;
+        border: 2px solid white;
+        background: transparent;
+        color: white;
+        cursor: pointer;
+      "
+    >
+      evaluate
+    </button>
+    <div id="output"></div>
+    <script type="module">
+      import { controls, repl, evalScope } from 'https://cdn.skypack.dev/@strudel.cycles/core@0.4.1';
+      import { transpiler } from 'https://cdn.skypack.dev/@strudel.cycles/transpiler@0.4.1';
+
+      const modules = [
+        import('https://cdn.skypack.dev/@strudel.cycles/core@0.4.1'),
+        import('https://cdn.skypack.dev/@strudel.cycles/mini@0.4.1'),
+      ];
+
+      const input = document.getElementById('text');
+
+      Promise.all(modules).then(() => {
+        input.innerHTML = `note("<c3 [d3 e3]>").cutoff(1000)`;
+        document.getElementById('start').addEventListener('click', () => {
+          evaluate(input.value);
+        });
+      });
+      evalScope(controls, ...modules);
+
+      const { evaluate } = repl({
+        defaultOutput: (hap, deadline, duration) => {
+          console.log(deadline, duration, hap.value);
+        },
+        getTime: () => Date.now() / 1000,
+        transpiler,
+        beforeEval: (code) => console.log('evaluate', code),
+        afterEval: (code) => {},
+      });
+    </script>
+  </body>
+</html>

packages/core/fraction.mjs

@@ -55,7 +55,8 @@ Fraction.prototype.min = function (other) {
   return this.lt(other) ? this : other;
 };
 
-Fraction.prototype.show = function () {
+Fraction.prototype.show = function (/* excludeWhole = false */) {
+  // return this.toFraction(excludeWhole);
   return this.s * this.n + '/' + this.d;
 };
 
@@ -73,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/hap.mjs

@@ -85,9 +85,13 @@ export class Hap {
     );
   }
 
-  showWhole() {
+  showWhole(compact = false) {
     return `${this.whole == undefined ? '~' : this.whole.show()}: ${
-      typeof this.value === 'object' ? JSON.stringify(this.value) : this.value
+      typeof this.value === 'object'
+        ? compact
+          ? JSON.stringify(this.value).slice(1, -1).replaceAll('"', '').replaceAll(',', ' ')
+          : JSON.stringify(this.value)
+        : this.value
     }`;
   }
 

packages/core/index.mjs

@@ -4,28 +4,40 @@ Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/st
 This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import controls from './controls.mjs';
-export * from './euclid.mjs';
 import Fraction from './fraction.mjs';
-export { Fraction, controls };
-export * from './hap.mjs';
-export * from './pattern.mjs';
-export * from './signal.mjs';
-export * from './state.mjs';
-export * from './timespan.mjs';
-export * from './util.mjs';
-export * from './speak.mjs';
-export * from './evaluate.mjs';
-export * from './repl.mjs';
-export { default as drawLine } from './drawLine.mjs';
-export { default as gist } from './gist.js';
+
+import drawLine from './drawLine.mjs';
+import gist from './gist.js';
+import { logger } from './logger.mjs';
+// Fraction: Fraction, drawLine: drawline, gist: gist, logger: logger,
+
+import controls from './controls.mjs';
+import pattern from './pattern.mjs';
+
+import * as draw from './draw.mjs';
+import * as euclid from './euclid.mjs';
+import * as evaluate from './evaluate.mjs';
+import * as hap from './hap.mjs';
+import * as repl from './repl.mjs';
+import * as pianoroll from './pianoroll.mjs';
+import * as signal from './signal.mjs';
+import * as speak from './speak.mjs';
+import * as state from './state.mjs';
+import * as time from './time.mjs';
+import * as timespan from './timespan.mjs';
+import * as ui from './ui.mjs';
+import * as util from './util.mjs';
+
+const core = { drawLine, gist, logger, Fraction, ...controls, ...pattern, ...draw, ...euclid,
+               ...evaluate, ...hap, ...repl, ...pianoroll, ...signal, ...speak,
+               ...state, ...time, ...timespan, ...ui, ...util
+             };
+export default core;
+
 // below won't work with runtime.mjs (json import fails)
 /* import * as p from './package.json';
 export const version = p.version; */
-console.log(
-  '%c // 🌀 @strudel.cycles/core loaded 🌀', // keep "//" for runnable snapshot source..
-  'background-color: black;color:white;padding:4px;border-radius:15px',
-);
+logger('🌀 @strudel.cycles/core loaded 🌀');
 if (globalThis._strudelLoaded) {
   console.warn(
     `@strudel.cycles/core was loaded more than once...

packages/core/logger.mjs

@@ -0,0 +1,18 @@
+export const logKey = 'strudel.log';
+
+export function logger(message, type, data = {}) {
+  console.log(`%c${message}`, 'background-color: black;color:white;border-radius:15px');
+  if (typeof CustomEvent !== 'undefined') {
+    document.dispatchEvent(
+      new CustomEvent(logKey, {
+        detail: {
+          message,
+          type,
+          data,
+        },
+      }),
+    );
+  }
+}
+
+logger.key = logKey;

packages/core/package-lock.json

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

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strudel.cycles/core",
-  "version": "0.3.1",
+  "version": "0.4.1",
   "description": "Port of Tidal Cycles to JavaScript",
   "main": "index.mjs",
   "type": "module",

packages/core/pianoroll.mjs

@@ -4,7 +4,11 @@ Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/st
 This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { Pattern } from '@strudel.cycles/core';
+import pattern from './pattern.mjs';
+const { Pattern } = pattern;
+
+import { toMidi } from './util.mjs';
+import { getDrawContext } from './draw.mjs';
 
 const scale = (normalized, min, max) => normalized * (max - min) + min;
 const getValue = (e) => {

packages/core/repl.mjs

@@ -1,23 +1,59 @@
 import { Cyclist } from './cyclist.mjs';
 import { evaluate as _evaluate } from './evaluate.mjs';
+import { logger } from './logger.mjs';
+import { setTime } from './time.mjs';
 
-export function repl({ interval, defaultOutput, onSchedulerError, onEvalError, onEval, getTime, transpiler }) {
-  const scheduler = new Cyclist({ interval, onTrigger: defaultOutput, onError: onSchedulerError, getTime });
-  const evaluate = async (code) => {
+export function repl({
+  interval,
+  defaultOutput,
+  onSchedulerError,
+  onEvalError,
+  beforeEval,
+  afterEval,
+  getTime,
+  transpiler,
+  onToggle,
+}) {
+  const scheduler = new Cyclist({
+    interval,
+    onTrigger: async (hap, deadline, duration) => {
+      try {
+        if (!hap.context.onTrigger || !hap.context.dominantTrigger) {
+          await defaultOutput(hap, deadline, duration);
+        }
+        if (hap.context.onTrigger) {
+          const cps = 1;
+          // call signature of output / onTrigger is different...
+          await hap.context.onTrigger(getTime() + deadline, hap, getTime(), cps);
+        }
+      } catch (err) {
+        logger(`[cyclist] error: ${err.message}`, 'error');
+      }
+    },
+    onError: onSchedulerError,
+    getTime,
+    onToggle,
+  });
+  setTime(() => scheduler.getPhase()); // TODO: refactor?
+  const evaluate = async (code, autostart = true) => {
     if (!code) {
       throw new Error('no code to evaluate');
     }
     try {
+      beforeEval?.({ code });
       const { pattern } = await _evaluate(code, transpiler);
-      scheduler.setPattern(pattern, true);
-      onEval?.({
-        pattern,
-        code,
-      });
+      logger(`[eval] code updated`);
+      scheduler.setPattern(pattern, autostart);
+      afterEval?.({ code, pattern });
+      return pattern;
     } catch (err) {
-      console.warn(`eval error: ${err.message}`);
+      // console.warn(`[repl] eval error: ${err.message}`);
+      logger(`[eval] error: ${err.message}`, 'error');
       onEvalError?.(err);
     }
   };
-  return { scheduler, evaluate };
+  const stop = () => scheduler.stop();
+  const start = () => scheduler.start();
+  const pause = () => scheduler.pause();
+  return { scheduler, evaluate, start, stop, pause };
 }

packages/core/signal.mjs

@@ -5,7 +5,8 @@ This program is free software: you can redistribute it and/or modify it under th
 */
 
 import { Hap } from './hap.mjs';
-import { Pattern, fastcat, reify, silence, stack, isPattern } from './pattern.mjs';
+import pattern from './pattern.mjs';
+const { Pattern, fastcat, reify, silence, stack, isPattern } = pattern;
 import Fraction from './fraction.mjs';
 import { id } from './util.mjs';
 
@@ -20,7 +21,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 +34,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 +46,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 +68,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 +128,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 +202,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 +260,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/speak.mjs

@@ -4,7 +4,8 @@ Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/st
 This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { Pattern, patternify2 } from './index.mjs';
+import pattern from './pattern.mjs';
+const {Pattern, patternify2, reify} = pattern;
 
 let synth;
 try {
@@ -32,11 +33,8 @@ function speak(words, lang, voice) {
 }
 
 Pattern.prototype._speak = function (lang, voice) {
-  return this._withHap((hap) => {
-    const onTrigger = (time, hap) => {
-      speak(hap.value, lang, voice);
-    };
-    return hap.setContext({ ...hap.context, onTrigger });
+  return this.onTrigger((_, hap) => {
+    speak(hap.value, lang, voice);
   });
 };
 

packages/core/test/drawLine.test.mjs

@@ -4,7 +4,8 @@ Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/st
 This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { fastcat, stack, slowcat, silence, pure } from '../pattern.mjs';
+import pattern from '../pattern.mjs';
+const { fastcat, stack, slowcat, silence, pure } = pattern;
 import { describe, it, expect } from 'vitest';
 import drawLine from '../drawLine.mjs';
 

packages/core/test/pattern.test.mjs

@@ -8,10 +8,9 @@ import Fraction from 'fraction.js';
 
 import { describe, it, expect } from 'vitest';
 
-import {
-  TimeSpan,
-  Hap,
-  State,
+import core from '../index.mjs';
+
+const {
   Pattern,
   pure,
   stack,
@@ -29,6 +28,12 @@ import {
   sub,
   mul,
   div,
+  id,
+  ply,
+  rev,
+  TimeSpan,
+  Hap,
+  State,
   saw,
   saw2,
   isaw,
@@ -39,17 +44,13 @@ import {
   square2,
   tri,
   tri2,
-  id,
-  ply,
-  rev,
-  time,
-} from '../index.mjs';
+  time} = core;
 
 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 +59,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', () => {
@@ -156,32 +157,32 @@ describe('Pattern', () => {
   describe('add()', () => {
     it('can structure In()', () => {
       expect(pure(3).add(pure(4)).query(st(0, 1))[0].value).toBe(7);
-      expect(pure(3).addIn(pure(4)).query(st(0, 1))[0].value).toBe(7);
+      expect(pure(3).add.in(pure(4)).query(st(0, 1))[0].value).toBe(7);
     });
     it('can structure Out()', () => {
-      sameFirst(sequence(1, 2).addOut(4), sequence(5, 6).struct(true));
+      sameFirst(sequence(1, 2).add.out(4), sequence(5, 6).struct(true));
     });
     it('can Mix() structure', () => {
-      expect(sequence(1, 2).addMix(silence, 5, silence).firstCycle()).toStrictEqual([
+      expect(sequence(1, 2).add.mix(silence, 5, silence).firstCycle()).toStrictEqual([
         new Hap(ts(1 / 3, 1 / 2), ts(1 / 3, 1 / 2), 6),
         new Hap(ts(1 / 2, 2 / 3), ts(1 / 2, 2 / 3), 7),
       ]);
     });
     it('can Trig() structure', () => {
       sameFirst(
-        slowcat(sequence(1, 2, 3, 4), 5, sequence(6, 7, 8, 9), 10).addTrig(20, 30).early(2),
+        slowcat(sequence(1, 2, 3, 4), 5, sequence(6, 7, 8, 9), 10).add.trig(20, 30).early(2),
         sequence(26, 27, 36, 37),
       );
     });
     it('can Trigzero() structure', () => {
       sameFirst(
-        slowcat(sequence(1, 2, 3, 4), 5, sequence(6, 7, 8, 9), 10).addTrigzero(20, 30).early(2),
+        slowcat(sequence(1, 2, 3, 4), 5, sequence(6, 7, 8, 9), 10).add.trigzero(20, 30).early(2),
         sequence(21, 22, 31, 32),
       );
     });
     it('can Squeeze() structure', () => {
       sameFirst(
-        sequence(1, [2, 3]).addSqueeze(sequence(10, 20, 30)),
+        sequence(1, [2, 3]).add.squeeze(sequence(10, 20, 30)),
         sequence(
           [11, 21, 31],
           [
@@ -193,7 +194,7 @@ describe('Pattern', () => {
     });
     it('can SqueezeOut() structure', () => {
       sameFirst(
-        sequence(1, [2, 3]).addSqueezeOut(10, 20, 30),
+        sequence(1, [2, 3]).add.squeezeout(10, 20, 30),
         sequence([11, [12, 13]], [21, [22, 23]], [31, [32, 33]]),
       );
     });
@@ -204,32 +205,32 @@ describe('Pattern', () => {
   describe('keep()', () => {
     it('can structure In()', () => {
       expect(pure(3).keep(pure(4)).query(st(0, 1))[0].value).toBe(3);
-      expect(pure(3).keepIn(pure(4)).query(st(0, 1))[0].value).toBe(3);
+      expect(pure(3).keep.in(pure(4)).query(st(0, 1))[0].value).toBe(3);
     });
     it('can structure Out()', () => {
-      sameFirst(sequence(1, 2).keepOut(4), sequence(1, 2).struct(true));
+      sameFirst(sequence(1, 2).keep.out(4), sequence(1, 2).struct(true));
     });
     it('can Mix() structure', () => {
-      expect(sequence(1, 2).keepMix(silence, 5, silence).firstCycle()).toStrictEqual([
+      expect(sequence(1, 2).keep.mix(silence, 5, silence).firstCycle()).toStrictEqual([
         new Hap(ts(1 / 3, 1 / 2), ts(1 / 3, 1 / 2), 1),
         new Hap(ts(1 / 2, 2 / 3), ts(1 / 2, 2 / 3), 2),
       ]);
     });
     it('can Trig() structure', () => {
       sameFirst(
-        slowcat(sequence(1, 2, 3, 4), 5, sequence(6, 7, 8, 9), 10).keepTrig(20, 30).early(2),
+        slowcat(sequence(1, 2, 3, 4), 5, sequence(6, 7, 8, 9), 10).keep.trig(20, 30).early(2),
         sequence(6, 7, 6, 7),
       );
     });
     it('can Trigzero() structure', () => {
       sameFirst(
-        slowcat(sequence(1, 2, 3, 4), 5, sequence(6, 7, 8, 9), 10).keepTrigzero(20, 30).early(2),
+        slowcat(sequence(1, 2, 3, 4), 5, sequence(6, 7, 8, 9), 10).keep.trigzero(20, 30).early(2),
         sequence(1, 2, 1, 2),
       );
     });
     it('can Squeeze() structure', () => {
       sameFirst(
-        sequence(1, [2, 3]).keepSqueeze(sequence(10, 20, 30)),
+        sequence(1, [2, 3]).keep.squeeze(sequence(10, 20, 30)),
         sequence(
           [1, 1, 1],
           [
@@ -239,39 +240,39 @@ describe('Pattern', () => {
         ),
       );
     });
-    it('can SqueezeOut() structure', () => {
-      sameFirst(sequence(1, [2, 3]).keepSqueezeOut(10, 20, 30), sequence([1, [2, 3]], [1, [2, 3]], [1, [2, 3]]));
+    it('can squeezeOut() structure', () => {
+      sameFirst(sequence(1, [2, 3]).keep.squeezeout(10, 20, 30), sequence([1, [2, 3]], [1, [2, 3]], [1, [2, 3]]));
     });
   });
   describe('keepif()', () => {
     it('can structure In()', () => {
       sameFirst(sequence(3, 4).keepif(true, false), sequence(3, silence));
-      sameFirst(sequence(3, 4).keepifIn(true, false), sequence(3, silence));
+      sameFirst(sequence(3, 4).keepif.in(true, false), sequence(3, silence));
     });
     it('can structure Out()', () => {
-      sameFirst(pure(1).keepifOut(true, false), sequence(1, silence));
+      sameFirst(pure(1).keepif.out(true, false), sequence(1, silence));
     });
     it('can Mix() structure', () => {
-      expect(sequence(1, 2).keepifMix(false, true, false).firstCycle()).toStrictEqual([
+      expect(sequence(1, 2).keepif.mix(false, true, false).firstCycle()).toStrictEqual([
         new Hap(ts(1 / 3, 1 / 2), ts(1 / 3, 1 / 2), 1),
         new Hap(ts(1 / 2, 2 / 3), ts(1 / 2, 2 / 3), 2),
       ]);
     });
     it('can Trig() structure', () => {
       sameFirst(
-        slowcat(sequence(1, 2, 3, 4), 5, sequence(6, 7, 8, 9), 10).keepifTrig(false, true).early(2),
+        slowcat(sequence(1, 2, 3, 4), 5, sequence(6, 7, 8, 9), 10).keepif.trig(false, true).early(2),
         sequence(silence, silence, 6, 7),
       );
     });
     it('can Trigzero() structure', () => {
       sameFirst(
-        slowcat(sequence(1, 2, 3, 4), 5, sequence(6, 7, 8, 9), 10).keepifTrigzero(false, true).early(2),
+        slowcat(sequence(1, 2, 3, 4), 5, sequence(6, 7, 8, 9), 10).keepif.trigzero(false, true).early(2),
         sequence(silence, silence, 1, 2),
       );
     });
     it('can Squeeze() structure', () => {
       sameFirst(
-        sequence(1, [2, 3]).keepifSqueeze(sequence(true, true, false)),
+        sequence(1, [2, 3]).keepif.squeeze(sequence(true, true, false)),
         sequence(
           [1, 1, silence],
           [
@@ -282,7 +283,7 @@ describe('Pattern', () => {
       );
     });
     it('can SqueezeOut() structure', () => {
-      sameFirst(sequence(1, [2, 3]).keepifSqueezeOut(true, true, false), sequence([1, [2, 3]], [1, [2, 3]], silence));
+      sameFirst(sequence(1, [2, 3]).keepif.squeezeout(true, true, false), sequence([1, [2, 3]], [1, [2, 3]], silence));
     });
   });
   describe('sub()', () => {
@@ -320,15 +321,15 @@ describe('Pattern', () => {
     it('Can set things with plain values', () => {
       sameFirst(sequence(1, 2, 3).set(4), sequence(4).fast(3));
     });
-    describe('setOut()', () => {
+    describe('set.out()', () => {
       it('Can set things with structure from second pattern', () => {
-        sameFirst(sequence(1, 2).setOut(4), pure(4).mask(true, true));
+        sameFirst(sequence(1, 2).set.out(4), pure(4).mask(true, true));
       });
     });
-    describe('setSqueeze()', () => {
+    describe('set.squeeze()', () => {
       it('Can squeeze one pattern inside the haps of another', () => {
         sameFirst(
-          sequence(1, [2, 3]).setSqueeze(sequence('a', 'b', 'c')),
+          sequence(1, [2, 3]).set.squeeze(sequence('a', 'b', 'c')),
           sequence(
             ['a', 'b', 'c'],
             [
@@ -338,7 +339,7 @@ describe('Pattern', () => {
           ),
         );
         sameFirst(
-          sequence(1, [2, 3]).setSqueeze('a', 'b', 'c'),
+          sequence(1, [2, 3]).set.squeeze('a', 'b', 'c'),
           sequence(
             ['a', 'b', 'c'],
             [
@@ -382,7 +383,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 +447,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 +466,7 @@ describe('Pattern', () => {
     it('Filters true', () => {
       expect(
         pure(true)
-          ._filterValues((x) => x)
+          .filterValues((x) => x)
           .firstCycle().length,
       ).toBe(1);
     });
@@ -490,7 +491,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 +578,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 +693,7 @@ describe('Pattern', () => {
     it('Can set the hap context', () => {
       expect(
         pure('a')
-          ._setContext([
+          .setContext([
             [
               [0, 1],
               [1, 2],
@@ -713,13 +714,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 +744,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 +785,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 +806,7 @@ describe('Pattern', () => {
       expect(
         sequence('a', ['a', 'a'])
           .fmap((a) => fastcat('b', 'c'))
-          ._squeezeJoin()
+          .squeezeJoin()
           .firstCycle(),
       ).toStrictEqual(
         sequence(
@@ -820,7 +821,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 +858,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 +870,7 @@ describe('Pattern', () => {
             { sound: 'a', begin: 2 / 3, end: 1 },
           ],
         )
-          ._sortHapsByPart()
+          .sortHapsByPart()
           .firstCycle(),
       );
     });
@@ -893,4 +894,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/test/util.test.mjs

@@ -4,7 +4,8 @@ Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/st
 This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { pure } from '../pattern.mjs';
+import pattern from '../pattern.mjs';
+const { pure } = pattern;
 import {
   isNote,
   tokenizeNote,

packages/core/time.mjs

@@ -0,0 +1,11 @@
+let time;
+export function getTime() {
+  if (!time) {
+    throw new Error('no time set! use setTime to define a time source');
+  }
+  return time();
+}
+
+export function setTime(func) {
+  time = func;
+}

packages/core/ui.mjs

@@ -4,19 +4,14 @@ Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/st
 This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { Tone } from './tone.mjs';
-
-export const hideHeader = () => {
-  document.getElementById('header').style = 'display:none';
-};
+import { getTime } from './time.mjs';
 
 function frame(callback) {
   if (window.strudelAnimation) {
     cancelAnimationFrame(window.strudelAnimation);
   }
   const animate = (animationTime) => {
-    const toneTime = Tone.getTransport().seconds;
-    callback(animationTime, toneTime);
+    callback(animationTime, getTime());
     window.strudelAnimation = requestAnimationFrame(animate);
   };
   requestAnimationFrame(animate);
@@ -51,6 +46,7 @@ export const cleanupUi = () => {
   const container = document.getElementById('code');
   if (container) {
     container.style = '';
-    container.className = 'grow relative'; // has to match App.tsx
+    // TODO: find a way to remove that duplication..
+    container.className = 'grow flex text-gray-100 relative overflow-auto cursor-text pb-0'; // has to match App.tsx
   }
 };

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 [];
@@ -55,9 +55,13 @@ export const midi2note = (n) => {
 export const mod = (n, m) => ((n % m) + m) % m;
 
 export const getPlayableNoteValue = (hap) => {
-  let { value: note, context } = hap;
+  let { value, context } = hap;
+  let note = value;
   if (typeof note === 'object' && !Array.isArray(note)) {
     note = note.note || note.n || note.value;
+    if (note === undefined) {
+      throw new Error(`cannot find a playable note for ${JSON.stringify(value)}`);
+    }
   }
   // if value is number => interpret as midi number as long as its not marked as frequency
   if (typeof note === 'number' && context.type !== 'frequency') {

packages/core/zyklus.mjs

@@ -31,10 +31,11 @@ function createClock(
   };
   let intervalID;
   const start = () => {
+    clear(); // just in case start was called more than once
     onTick();
     intervalID = setInterval(onTick, interval * 1000);
   };
-  const clear = () => clearInterval(intervalID);
+  const clear = () => intervalID !== undefined && clearInterval(intervalID);
   const pause = () => clear();
   const stop = () => {
     tick = 0;

packages/csound/csound.mjs

@@ -0,0 +1,122 @@
+import strudel from '@strudel.cycles/core';
+const { getFrequency, logger, Pattern } = strudel;
+import { getAudioContext } from '@strudel.cycles/webaudio';
+import csd from './project.csd?raw';
+// import livecodeOrc from './livecode.orc?raw';
+import presetsOrc from './presets.orc?raw';
+
+let csoundLoader, _csound;
+
+// triggers given instrument name using csound.
+Pattern.prototype._csound = function (instrument) {
+  instrument = instrument || 'triangle';
+  init(); // not async to support csound inside other patterns + to be able to call pattern methods after it
+  // TODO: find a alternative way to wait for csound to load (to wait with first time playback)
+  return this.onTrigger((time, hap) => {
+    if (!_csound) {
+      logger('[csound] not loaded yet', 'warning');
+      return;
+    }
+    if (typeof hap.value !== 'object') {
+      throw new Error('csound only support objects as hap values');
+    }
+    let { gain = 0.8 } = hap.value;
+    gain *= 0.2;
+
+    const freq = Math.round(getFrequency(hap));
+    const controls = Object.entries({ ...hap.value, freq })
+      .flat()
+      .join('/');
+    // TODO: find out how to send a precise ctx based time
+    // http://www.csounds.com/manual/html/i.html
+    const params = [
+      `"${instrument}"`, // p1: instrument name
+      time - getAudioContext().currentTime, //.toFixed(precision), // p2: starting time in arbitrary unit called beats
+      hap.duration + 0, // p3: duration in beats
+      // instrument specific params:
+      freq, //.toFixed(precision), // p4: frequency
+      gain, // p5: gain
+      `"${controls}"`, // p6 controls as string (like superdirt osc message)
+    ];
+    const msg = `i ${params.join(' ')}`;
+    _csound.inputMessage(msg);
+  });
+};
+
+// initializes csound + can be used to reevaluate given instrument code
+export async function csound(code = '') {
+  await init();
+  if (code) {
+    code = `${code}`;
+    //     ^       ^
+    // wrapping in backticks makes sure it works when calling as templated function
+    await _csound?.evalCode(code);
+  }
+}
+
+Pattern.prototype.define('csound', (a, pat) => pat.csound(a), { composable: false, patternified: true });
+
+function eventLogger(type, args) {
+  const [msg] = args;
+  if (
+    type === 'message' &&
+    (['[commit: HEAD]'].includes(msg) ||
+      msg.startsWith('--Csound version') ||
+      msg.startsWith('libsndfile') ||
+      msg.startsWith('sr =') ||
+      msg.startsWith('0dBFS') ||
+      msg.startsWith('audio buffered') ||
+      msg.startsWith('writing') ||
+      msg.startsWith('SECTION 1:'))
+  ) {
+    // ignore
+    return;
+  }
+  let logType = 'info';
+  if (msg.startsWith('error:')) {
+    logType = 'error';
+  }
+  logger(`[csound] ${msg || ''}`, logType);
+}
+
+async function load() {
+  if (window.__csound__) {
+    // allows using some other csound instance
+    _csound = window.__csound__;
+  } else {
+    const { Csound } = await import('@csound/browser');
+    _csound = await Csound({ audioContext: getAudioContext() });
+  }
+  _csound.removeAllListeners('message');
+  ['message'].forEach((k) => _csound.on(k, (...args) => eventLogger(k, args)));
+  await _csound.setOption('-m0d'); // see -m flag https://csound.com/docs/manual/CommandFlags.html
+  await _csound.setOption('--sample-accurate');
+  await _csound.compileCsdText(csd);
+  // await _csound.compileOrc(livecodeOrc);
+  await _csound.compileOrc(presetsOrc);
+  await _csound.start();
+  return _csound;
+}
+
+async function init() {
+  csoundLoader = csoundLoader || load();
+  return csoundLoader;
+}
+
+let orcCache = {};
+export async function loadOrc(url) {
+  await init();
+  if (typeof url !== 'string') {
+    throw new Error('loadOrc: expected url string');
+  }
+  if (url.startsWith('github:')) {
+    const [_, path] = url.split('github:');
+    url = `https://raw.githubusercontent.com/${path}`;
+  }
+  if (!orcCache[url]) {
+    orcCache[url] = fetch(url)
+      .then((res) => res.text())
+      .then((code) => _csound.compileOrc(code));
+  }
+  await orcCache[url];
+}

packages/csound/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@strudel.cycles/csound",
+  "version": "0.3.0",
+  "description": "csound bindings for strudel",
+  "main": "csound.mjs",
+  "scripts": {
+    "test": "echo \"No tests present.\" && exit 0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tidalcycles/strudel.git"
+  },
+  "keywords": [
+    "tidalcycles",
+    "strudel",
+    "pattern",
+    "livecoding",
+    "algorave"
+  ],
+  "author": "Felix Roos <flix91@gmail.com>",
+  "contributors": [
+    "Alex McLean <alex@slab.org>"
+  ],
+  "license": "AGPL-3.0-or-later",
+  "bugs": {
+    "url": "https://github.com/tidalcycles/strudel/issues"
+  },
+  "homepage": "https://github.com/tidalcycles/strudel#readme",
+  "dependencies": {
+    "@csound/browser": "^6.18.3"
+  }
+}

packages/csound/presets.orc

@@ -0,0 +1,96 @@
+; returns value of given key in given "string map"
+; keymap("freq", "note/c3/freq/220/gain/0.5")
+; yields "220"
+opcode keymap, S, SS
+  Skey, Smap xin
+  idelimiter = strindex(Smap, strcat(Skey, "/"))
+  ifrom = idelimiter + strlen(Skey) + 1
+  Svalue = strsub(Smap, ifrom, strlen(Smap))
+  Svalue = strsub(Svalue, 0, strindex(Svalue, "/"))
+  xout Svalue
+endop
+
+; TODO add incredibly dope synths
+instr organ
+    iduration = p3
+    ifreq = p4
+    igain = p5
+    ioct = octcps(ifreq)
+
+    asig = vco2(igain, ifreq, 12, .5) ; my edit
+    kpwm = oscili(.1, 5)
+    asig = vco2(igain, ifreq, 4, .5 + kpwm)
+    asig += vco2(igain/4, ifreq * 2)
+
+    ; filter
+    ; idepth = 2
+    ; acut = transegr:a(0, .005, 0, idepth, .06, -4.2, 0.001, .01, -4.2, 0) ; filter envelope
+    ; asig = zdf_2pole(asig, cpsoct(ioct + acut), 0.5)
+
+    ; amp envelope
+    iattack = .001
+    irelease = .05
+    asig *= linsegr:a(0, iattack, 1, iduration, 1, irelease, 0)
+
+    out(asig, asig)
+
+endin
+
+instr triangle
+  iduration = p3
+  ifreq = p4
+  igain = p5
+  ioct = octcps(ifreq)
+  
+  asig = vco2(igain, ifreq, 12, .5)
+  
+  ; amp envelope
+  iattack = .001
+  irelease = .05
+  asig *= linsegr:a(0, iattack, 1, iduration, 1, irelease, 0)
+  
+  out(asig, asig)
+endin
+
+instr pad
+    iduration = p3
+    ifreq = p4
+    igain = p5
+    ioct = octcps(ifreq)
+
+    asig = vco2(igain, ifreq, 0)
+
+    ; amp envelope
+    iattack = .5
+    irelease = .1
+    asig *= linsegr:a(0, iattack, 1, iduration, 1, irelease, 0)
+    
+    idepth = 2
+    acut = transegr:a(0, .005, 0, idepth, .06, -4.2, 0.001, .01, -4.2, 0)
+    asig = zdf_2pole(asig, 1000, 2)
+
+    out(asig, asig)
+endin
+
+
+gisine	ftgen	0, 0, 4096, 10, 1
+
+instr bow
+    kpres = 2
+    krat = 0.16
+    kvibf = 6.12723
+    
+    kvib  linseg 0, 0.5, 0, 1, 1, p3-0.5, 1	
+    kvamp = kvib * 0.01
+    asig  wgbow .7, p4, kpres, krat, kvibf, kvamp, gisine
+    asig = asig*p5
+    outs asig, asig
+endin
+
+
+instr Meta
+    Smap = strget(p6)
+    Sinstrument = keymap("s", Smap)
+    schedule(Sinstrument, 0, p3, p4, p5)
+    ; TODO find a way to pipe Sinstrument through effects
+endin

packages/csound/project.csd

@@ -0,0 +1,10 @@
+<CsoundSynthesizer>
+<CsInstruments>
+
+sr=48000
+ksmps=64
+nchnls=2
+0dbfs=1
+
+</CsInstruments>
+</CsoundSynthesizer>

packages/eval/evaluate.mjs

@@ -4,9 +4,9 @@ Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/st
 This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { evaluate as _evaluate } from '@strudel.cycles/core';
+import core from '@strudel.cycles/core';
 import shapeshifter from './shapeshifter.mjs';
 
 export const evaluate = async (code) => {
-  return _evaluate(code, shapeshifter);
+  return core.evaluate(code, shapeshifter);
 };

packages/eval/package-lock.json

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

packages/eval/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strudel.cycles/eval",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "description": "Code evaluator for strudel",
   "main": "index.mjs",
   "type": "module",
@@ -28,7 +28,7 @@
   },
   "homepage": "https://github.com/tidalcycles/strudel#readme",
   "dependencies": {
-    "@strudel.cycles/core": "^0.2.0",
+    "@strudel.cycles/core": "^0.4.1",
     "estraverse": "^5.3.0",
     "shift-ast": "^7.0.0",
     "shift-codegen": "^8.1.0",

packages/eval/shapeshifter.mjs

@@ -21,7 +21,7 @@ import {
 import shiftCodegen from 'shift-codegen';
 const codegen = shiftCodegen.default || shiftCodegen; // parcel module resolution fuckup
 
-import * as strudel from '@strudel.cycles/core';
+import strudel from '@strudel.cycles/core';
 
 const { Pattern } = strudel;
 
@@ -30,7 +30,8 @@ const isNote = (name) => /^[a-gC-G][bs]?[0-9]$/.test(name);
 const addLocations = true;
 export const addMiniLocations = true;
 export const minifyStrings = true;
-export const wrappedAsync = true;
+export const wrappedAsync = false; // this is now handled by core evaluate by default
+export const shouldAddReturn = true;
 
 export default (_code) => {
   const { code, addReturn } = wrapAsync(_code);
@@ -125,7 +126,7 @@ export default (_code) => {
     },
   });
   // add return to last statement (because it's wrapped in an async function artificially)
-  if (wrappedAsync) {
+  if (shouldAddReturn) {
     addReturn(shifted);
   }
   const generated = undisguiseImports(codegen(shifted));
@@ -153,7 +154,7 @@ ${code}
 })()`;
   }
   const addReturn = (ast) => {
-    const body = ast.statements[0].expression.callee.body; // actual code ast inside async function body
+    const body = wrappedAsync ? ast.statements[0].expression.callee.body : ast;
     body.statements = body.statements
       .slice(0, -1)
       .concat([new ReturnStatement({ expression: body.statements.slice(-1)[0] })]);

packages/eval/test/evaluate.test.mjs

@@ -8,12 +8,12 @@ import { expect, describe, it } from 'vitest';
 
 import { evaluate } from '../evaluate.mjs';
 import { mini } from '@strudel.cycles/mini';
-import * as strudel from '@strudel.cycles/core';
+import strudel from '@strudel.cycles/core';
 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/eval/test/shapeshifter.test.mjs

@@ -5,15 +5,21 @@ This program is free software: you can redistribute it and/or modify it under th
 */
 
 import { describe, it, expect } from 'vitest';
-import shapeshifter from '../shapeshifter.mjs';
+import shapeshifter, { wrappedAsync } from '../shapeshifter.mjs';
 
 describe('shapeshifter', () => {
   it('Should shift simple double quote string', () => {
-    expect(shapeshifter('"c3"')).toEqual('(async()=>{return mini("c3").withMiniLocation([1,0,15],[1,4,19])})()');
-  });
-  it('Should handle dynamic imports', () => {
-    expect(shapeshifter('const { default: foo } = await import(\'https://bar.com/foo.js\');"c3"')).toEqual(
-      '(async()=>{const{default:foo}=await import("https://bar.com/foo.js");return mini("c3").withMiniLocation([1,64,79],[1,68,83])})()',
-    );
+    if (wrappedAsync) {
+      expect(shapeshifter('"c3"')).toEqual('(async()=>{return mini("c3").withMiniLocation([1,0,15],[1,4,19])})()');
+    } else {
+      expect(shapeshifter('"c3"')).toEqual('return mini("c3").withMiniLocation([1,0,0],[1,4,4])');
+    }
   });
+  if (wrappedAsync) {
+    it('Should handle dynamic imports', () => {
+      expect(shapeshifter('const { default: foo } = await import(\'https://bar.com/foo.js\');"c3"')).toEqual(
+        'const{default:foo}=await import("https://bar.com/foo.js");return mini("c3").withMiniLocation([1,64,79],[1,68,83])',
+      );
+    });
+  }
 });

packages/midi/midi.mjs

@@ -4,14 +4,20 @@ Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/st
 This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { isNote } from 'tone';
 import * as _WebMidi from 'webmidi';
-import { Pattern, isPattern } from '@strudel.cycles/core';
-import { Tone } from '@strudel.cycles/tone';
+import core from '@strudel.cycles/core';
+const { Pattern, isPattern, isNote, getPlayableNoteValue, logger } = core;
+import { getAudioContext } from '@strudel.cycles/webaudio';
+
 // if you use WebMidi from outside of this package, make sure to import that instance:
 export const { WebMidi } = _WebMidi;
 
-export function enableWebMidi() {
+export function enableWebMidi(options = {}) {
+  const { onReady, onConnected, onDisconnected } = options;
+
+  if (typeof navigator.requestMIDIAccess !== 'function') {
+    throw new Error('Your Browser does not support WebMIDI.');
+  }
   return new Promise((resolve, reject) => {
     if (WebMidi.enabled) {
       // if already enabled, just resolve WebMidi
@@ -22,6 +28,14 @@ export function enableWebMidi() {
       if (err) {
         reject(err);
       }
+      WebMidi.addListener('connected', (e) => {
+        onConnected?.(WebMidi);
+      });
+      // Reacting when a device becomes unavailable
+      WebMidi.addListener('disconnected', (e) => {
+        onDisconnected?.(WebMidi, e);
+      });
+      onReady?.(WebMidi);
       resolve(WebMidi);
     });
   });
@@ -30,7 +44,21 @@ export function enableWebMidi() {
 const outputByName = (name) => WebMidi.getOutputByName(name);
 
 // Pattern.prototype.midi = function (output: string | number, channel = 1) {
-Pattern.prototype.midi = function (output, channel = 1) {
+Pattern.prototype.midi = async function (output, channel = 1) {
+  await enableWebMidi({
+    onConnected: ({ outputs }) =>
+      logger(`Midi device connected! Available: ${outputs.map((o) => `'${o.name}'`).join(', ')}`),
+    onDisconnected: ({ outputs }) =>
+      logger(`Midi device disconnected! Available: ${outputs.map((o) => `'${o.name}'`).join(', ')}`),
+    onReady: ({ outputs }) => {
+      const chosenOutput = output ?? outputs[0];
+      const otherOutputs = outputs
+        .filter((o) => o.name !== chosenOutput.name)
+        .map((o) => `'${o.name}'`)
+        .join(' | ');
+      logger(`Midi connected! Using "${chosenOutput.name}". ${otherOutputs ? `Also available: ${otherOutputs}` : ''}`);
+    },
+  });
   if (isPattern(output?.constructor?.name)) {
     throw new Error(
       `.midi does not accept Pattern input. Make sure to pass device name with single quotes. Example: .midi('${
@@ -38,46 +66,42 @@ Pattern.prototype.midi = function (output, channel = 1) {
       }')`,
     );
   }
-  return this._withHap((hap) => {
-    // const onTrigger = (time: number, hap: any) => {
-    const onTrigger = (time, hap) => {
-      let note = hap.value;
-      const velocity = hap.context?.velocity ?? 0.9;
-      if (!isNote(note)) {
-        throw new Error('not a note: ' + note);
-      }
-      if (!WebMidi.enabled) {
-        throw new Error(`🎹 WebMidi is not enabled. Supported Browsers: https://caniuse.com/?search=webmidi`);
-      }
-      if (!WebMidi.outputs.length) {
-        throw new Error(`🔌 No MIDI devices found. Connect a device or enable IAC Driver.`);
-      }
-      let device;
-      if (typeof output === 'number') {
-        device = WebMidi.outputs[output];
-      } else if (typeof output === 'string') {
-        device = outputByName(output);
-      } else {
-        device = WebMidi.outputs[0];
-      }
-      if (!device) {
-        throw new Error(
-          `🔌 MIDI device '${output ? output : ''}' not found. Use one of ${WebMidi.outputs
-            .map((o) => `'${o.name}'`)
-            .join(' | ')}`,
-        );
-      }
-      // console.log('midi', value, output);
-      const timingOffset = WebMidi.time - Tone.getContext().currentTime * 1000;
-      time = time * 1000 + timingOffset;
-      // const inMs = '+' + (time - Tone.getContext().currentTime) * 1000;
-      // await enableWebMidi()
-      device.playNote(note, channel, {
-        time,
-        duration: hap.duration.valueOf() * 1000 - 5,
-        velocity,
-      });
-    };
-    return hap.setContext({ ...hap.context, onTrigger });
+  return this.onTrigger((time, hap) => {
+    let note = getPlayableNoteValue(hap);
+    const velocity = hap.context?.velocity ?? 0.9;
+    if (!isNote(note)) {
+      throw new Error('not a note: ' + note);
+    }
+    if (!WebMidi.enabled) {
+      throw new Error(`🎹 WebMidi is not enabled. Supported Browsers: https://caniuse.com/?search=webmidi`);
+    }
+    if (!WebMidi.outputs.length) {
+      throw new Error(`🔌 No MIDI devices found. Connect a device or enable IAC Driver.`);
+    }
+    let device;
+    if (typeof output === 'number') {
+      device = WebMidi.outputs[output];
+    } else if (typeof output === 'string') {
+      device = outputByName(output);
+    } else {
+      device = WebMidi.outputs[0];
+    }
+    if (!device) {
+      throw new Error(
+        `🔌 MIDI device '${output ? output : ''}' not found. Use one of ${WebMidi.outputs
+          .map((o) => `'${o.name}'`)
+          .join(' | ')}`,
+      );
+    }
+    // console.log('midi', value, output);
+    const timingOffset = WebMidi.time - getAudioContext().currentTime * 1000;
+    time = time * 1000 + timingOffset;
+    // const inMs = '+' + (time - Tone.getContext().currentTime) * 1000;
+    // await enableWebMidi()
+    device.playNote(note, channel, {
+      time,
+      duration: hap.duration.valueOf() * 1000 - 5,
+      attack: velocity,
+    });
   });
 };

packages/midi/package-lock.json

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

packages/midi/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strudel.cycles/midi",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "description": "Midi API for strudel",
   "main": "index.mjs",
   "repository": {
@@ -21,7 +21,7 @@
   },
   "homepage": "https://github.com/tidalcycles/strudel#readme",
   "dependencies": {
-    "@strudel.cycles/tone": "^0.3.0",
+    "@strudel.cycles/tone": "^0.4.1",
     "tone": "^14.7.77",
     "webmidi": "^3.0.21"
   }

packages/mini/krill-parser.js

@@ -32,7 +32,7 @@ function peg$padEnd(str, targetLength, padString) {
 }
 
 peg$SyntaxError.prototype.format = function(sources) {
-  var str = "Error: " + this.message;
+  var str = "peg error: " + this.message;
   if (this.location) {
     var src = null;
     var k;

packages/mini/mini.mjs

@@ -5,10 +5,10 @@ This program is free software: you can redistribute it and/or modify it under th
 */
 
 import * as krill from './krill-parser.js';
-import * as strudel from '@strudel.cycles/core';
+import core from '@strudel.cycles/core';
 // import { addMiniLocations } from '@strudel.cycles/eval/shapeshifter.mjs';
 
-const { pure, Pattern, Fraction, stack, slowcat, sequence, timeCat, silence, reify } = strudel;
+const { pure, Pattern, stack, slowcat, sequence, timeCat, silence, reify, rand, chooseInWith, Fraction } = core;
 
 var _seedState = 0;
 const randOffset = 0.0002;
@@ -23,14 +23,15 @@ const applyOptions = (parent) => (pat, i) => {
   const operator = options?.operator;
   if (operator) {
     switch (operator.type_) {
-      case 'stretch':
+      case 'stretch': {
         const speed = Fraction(operator.arguments_.amount).inverse();
         return reify(pat).fast(speed);
+      }
       case 'bjorklund':
         return pat.euclid(operator.arguments_.pulse, operator.arguments_.step, operator.arguments_.rotation);
       case 'degradeBy':
         return reify(pat)._degradeByWith(
-          strudel.rand.early(randOffset * _nextSeed()).segment(1),
+          rand.early(randOffset * _nextSeed()).segment(1),
           operator.arguments_.amount,
         );
       // TODO: case 'fixed-step': "%"
@@ -87,7 +88,7 @@ function resolveReplications(ast) {
 
 export function patternifyAST(ast) {
   switch (ast.type_) {
-    case 'pattern':
+    case 'pattern': {
       resolveReplications(ast);
       const children = ast.source_.map(patternifyAST).map(applyOptions(ast));
       const alignment = ast.arguments_.alignment;
@@ -95,7 +96,7 @@ export function patternifyAST(ast) {
         return stack(...children);
       }
       if (alignment === 'r') {
-        return strudel.chooseInWith(strudel.rand.early(randOffset * _nextSeed()).segment(1), children);
+        return chooseInWith(rand.early(randOffset * _nextSeed()).segment(1), children);
       }
       const weightedChildren = ast.source_.some((child) => !!child.options_?.weight);
       if (!weightedChildren && alignment === 't') {
@@ -110,7 +111,8 @@ export function patternifyAST(ast) {
         return pat;
       }
       return sequence(...children);
-    case 'element':
+    }
+    case 'element': {
       if (ast.source_ === '~') {
         return silence;
       }
@@ -129,6 +131,7 @@ export function patternifyAST(ast) {
         return pure(value).withLocation([start.line, start.column, start.offset], [end.line, end.column, end.offset]);
       }
       return patternifyAST(ast.source_);
+    }
     case 'stretch':
       return patternifyAST(ast.source_).slow(ast.arguments_.amount);
     /* case 'scale':

packages/mini/package-lock.json

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

packages/mini/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strudel.cycles/mini",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "description": "Mini notation for strudel",
   "main": "index.mjs",
   "type": "module",
@@ -26,9 +26,9 @@
   },
   "homepage": "https://github.com/tidalcycles/strudel#readme",
   "dependencies": {
-    "@strudel.cycles/core": "^0.2.0",
-    "@strudel.cycles/eval": "^0.3.0",
-    "@strudel.cycles/tone": "^0.3.0"
+    "@strudel.cycles/core": "^0.4.1",
+    "@strudel.cycles/eval": "^0.4.1",
+    "@strudel.cycles/tone": "^0.4.1"
   },
   "devDependencies": {
     "peggy": "^2.0.1"

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/osc.mjs

@@ -5,10 +5,35 @@ This program is free software: you can redistribute it and/or modify it under th
 */
 
 import OSC from 'osc-js';
-import { parseNumeral, Pattern } from '@strudel.cycles/core';
+import core from '@strudel.cycles/core';
+const { Pattern, logger, parseNumeral } = core;
+
+let connection; // Promise<OSC>
+function connect() {
+  if (!connection) {
+    // make sure this runs only once
+    connection = new Promise((resolve, reject) => {
+      const osc = new OSC();
+      osc.open();
+      osc.on('open', () => {
+        const url = osc.options?.plugin?.socket?.url;
+        logger(`[osc] connected${url ? ` to ${url}` : ''}`);
+        resolve(osc);
+      });
+      osc.on('close', () => {
+        connection = undefined; // allows new connection afterwards
+        console.log('[osc] disconnected');
+        reject('OSC connection closed');
+      });
+      osc.on('error', (err) => reject(err));
+    }).catch((err) => {
+      connection = undefined;
+      throw new Error('Could not connect to OSC server. Is it running?');
+    });
+  }
+  return connection;
+}
 
-const comm = new OSC();
-comm.open();
 const latency = 0.1;
 let startedAt = -1;
 
@@ -20,28 +45,25 @@ let startedAt = -1;
  * @memberof Pattern
  * @returns Pattern
  */
-Pattern.prototype.osc = function () {
-  return this._withHap((hap) => {
-    const onTrigger = (time, hap, currentTime, cps) => {
-      const cycle = hap.wholeOrPart().begin.valueOf();
-      const delta = hap.duration.valueOf();
-      // time should be audio time of onset
-      // currentTime should be current time of audio context (slightly before time)
-      if (startedAt < 0) {
-        startedAt = Date.now() - currentTime * 1000;
-      }
-      const controls = Object.assign({}, { cps, cycle, delta }, hap.value);
-      // make sure n and note are numbers
-      controls.n && (controls.n = parseNumeral(controls.n));
-      controls.note && (controls.note = parseNumeral(controls.note));
-
-      const keyvals = Object.entries(controls).flat();
-      const ts = Math.floor(startedAt + (time + latency) * 1000);
-      const message = new OSC.Message('/dirt/play', ...keyvals);
-      const bundle = new OSC.Bundle([message], ts);
-      bundle.timestamp(ts); // workaround for https://github.com/adzialocha/osc-js/issues/60
-      comm.send(bundle);
-    };
-    return hap.setContext({ ...hap.context, onTrigger });
+Pattern.prototype.osc = async function () {
+  const osc = await connect();
+  return this.onTrigger((time, hap, currentTime, cps = 1) => {
+    const cycle = hap.wholeOrPart().begin.valueOf();
+    const delta = hap.duration.valueOf();
+    // time should be audio time of onset
+    // currentTime should be current time of audio context (slightly before time)
+    if (startedAt < 0) {
+      startedAt = Date.now() - currentTime * 1000;
+    }
+    const controls = Object.assign({}, { cps, cycle, delta }, hap.value);
+    // make sure n and note are numbers
+    controls.n && (controls.n = parseNumeral(controls.n));
+    controls.note && (controls.note = parseNumeral(controls.note));
+    const keyvals = Object.entries(controls).flat();
+    const ts = Math.floor(startedAt + (time + latency) * 1000);
+    const message = new OSC.Message('/dirt/play', ...keyvals);
+    const bundle = new OSC.Bundle([message], ts);
+    bundle.timestamp(ts); // workaround for https://github.com/adzialocha/osc-js/issues/60
+    osc.send(bundle);
   });
 };

packages/osc/package-lock.json

@@ -1,6 +1,6 @@
 {
 	"name": "@strudel.cycles/osc",
-	"version": "0.2.0",
+	"version": "0.3.1",
 	"lockfileVersion": 2,
 	"requires": true,
 	"packages": {

packages/osc/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@strudel.cycles/osc",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "description": "OSC messaging for strudel",
   "main": "osc.mjs",
   "scripts": {
     "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/README.md

@@ -13,12 +13,13 @@ npm i @strudel.cycles/react
 Here is a minimal example of how to set up a MiniRepl:
 
 ```jsx
-import { evalScope, controls } from '@strudel.cycles/core';
+import core from '@strudel.cycles/core';
+const {evalScope} = core;
 import { MiniRepl } from '@strudel.cycles/react';
 import { prebake } from '../repl/src/prebake.mjs';
 
 evalScope(
-  controls,
+  core,
   import('@strudel.cycles/core'),
   import('@strudel.cycles/tonal'),
   import('@strudel.cycles/mini'),

packages/react/dist/index.es.js

@@ -1,17 +1,15 @@
-import y, { useCallback as T, useState as w, useEffect as q, useMemo as R, useRef as I, useLayoutEffect as j } from "react";
-import Y from "@uiw/react-codemirror";
-import { Decoration as A, EditorView as K } from "@codemirror/view";
-import { StateEffect as U, StateField as Q } from "@codemirror/state";
-import { javascript as Z } from "@codemirror/lang-javascript";
-import { tags as m } from "@lezer/highlight";
-import { createTheme as ee } from "@uiw/codemirror-themes";
-import { useInView as te } from "react-hook-inview";
-import { evaluate as G } from "@strudel.cycles/eval";
-import { Tone as M } from "@strudel.cycles/tone";
-import { TimeSpan as oe, State as re } from "@strudel.cycles/core";
-import { webaudioOutputTrigger as ne } from "@strudel.cycles/webaudio";
-import { WebMidi as N, enableWebMidi as se } from "@strudel.cycles/midi";
-const ae = ee({
+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 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 oe from "@strudel.cycles/core";
+import { transpiler as ne } from "@strudel.cycles/transpiler";
+const ae = Z({
   theme: "dark",
   settings: {
     background: "#222",
@@ -19,450 +17,305 @@ const ae = ee({
     caret: "#ffcc00",
     selection: "rgba(128, 203, 196, 0.5)",
     selectionMatch: "#036dd626",
-    lineHighlight: "#8a91991a",
+    lineHighlight: "#00000050",
     gutterBackground: "transparent",
-    gutterForeground: "#676e95"
+    gutterForeground: "#8a919966"
   },
   styles: [
-    { tag: m.keyword, color: "#c792ea" },
-    { tag: m.operator, color: "#89ddff" },
-    { tag: m.special(m.variableName), color: "#eeffff" },
-    { tag: m.typeName, color: "#f07178" },
-    { tag: m.atom, color: "#f78c6c" },
-    { tag: m.number, color: "#ff5370" },
-    { tag: m.definition(m.variableName), color: "#82aaff" },
-    { tag: m.string, color: "#c3e88d" },
-    { tag: m.special(m.string), color: "#f07178" },
-    { tag: m.comment, color: "#7d8799" },
-    { tag: m.variableName, color: "#f07178" },
-    { tag: m.tagName, color: "#ff5370" },
-    { tag: m.bracket, color: "#a2a1a4" },
-    { tag: m.meta, color: "#ffcb6b" },
-    { tag: m.attributeName, color: "#c792ea" },
-    { tag: m.propertyName, color: "#c792ea" },
-    { tag: m.className, color: "#decb6b" },
-    { tag: m.invalid, color: "#ffffff" }
+    { tag: r.keyword, color: "#c792ea" },
+    { tag: r.operator, color: "#89ddff" },
+    { tag: r.special(r.variableName), color: "#eeffff" },
+    { tag: r.typeName, color: "#c3e88d" },
+    { tag: r.atom, color: "#f78c6c" },
+    { tag: r.number, color: "#c3e88d" },
+    { tag: r.definition(r.variableName), color: "#82aaff" },
+    { tag: r.string, color: "#c3e88d" },
+    { tag: r.special(r.string), color: "#c3e88d" },
+    { tag: r.comment, color: "#7d8799" },
+    { tag: r.variableName, color: "#c792ea" },
+    { tag: r.tagName, color: "#c3e88d" },
+    { tag: r.bracket, color: "#525154" },
+    { tag: r.meta, color: "#ffcb6b" },
+    { tag: r.attributeName, color: "#c792ea" },
+    { tag: r.propertyName, color: "#c792ea" },
+    { tag: r.className, color: "#decb6b" },
+    { tag: r.invalid, color: "#ffffff" }
   ]
 });
-const z = U.define(), ce = Q.define({
+const B = $.define(), se = G.define({
   create() {
-    return A.none;
+    return E.none;
   },
-  update(e, o) {
+  update(e, t) {
     try {
-      for (let r of o.effects)
-        if (r.is(z))
-          if (r.value) {
-            const n = A.mark({ attributes: { style: "background-color: #FFCA2880" } });
-            e = A.set([n.range(0, o.newDoc.length)]);
+      for (let o of t.effects)
+        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)]);
           } else
-            e = A.set([]);
+            e = E.set([]);
       return e;
-    } catch (r) {
-      return console.warn("flash error", r), e;
+    } catch (o) {
+      return console.warn("flash error", o), e;
     }
   },
-  provide: (e) => K.decorations.from(e)
-}), ie = (e) => {
-  e.dispatch({ effects: z.of(!0) }), setTimeout(() => {
-    e.dispatch({ effects: z.of(!1) });
+  provide: (e) => U.decorations.from(e)
+}), ce = (e) => {
+  e.dispatch({ effects: B.of(!0) }), setTimeout(() => {
+    e.dispatch({ effects: B.of(!1) });
   }, 200);
-}, O = U.define(), le = Q.define({
+}, z = $.define(), ie = G.define({
   create() {
-    return A.none;
+    return E.none;
   },
-  update(e, o) {
+  update(e, t) {
     try {
-      for (let r of o.effects)
-        if (r.is(O)) {
-          const n = r.value.map(
-            (s) => (s.context.locations || []).map(({ start: i, end: a }) => {
-              const t = s.context.color || "#FFCA28";
-              let l = o.newDoc.line(i.line).from + i.column, c = o.newDoc.line(a.line).from + a.column;
-              const f = o.newDoc.length;
-              return l > f || c > f ? void 0 : A.mark({ attributes: { style: `outline: 1.5px solid ${t};` } }).range(l, c);
+      for (let o of t.effects)
+        if (o.is(z)) {
+          const a = o.value.map(
+            (s) => (s.context.locations || []).map(({ start: u, end: d }) => {
+              const f = s.context.color || "#FFCA28";
+              let c = t.newDoc.line(u.line).from + u.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 ${f};` } }).range(c, i);
             })
           ).flat().filter(Boolean) || [];
-          e = A.set(n, !0);
+          e = E.set(a, !0);
         }
       return e;
     } catch {
-      return A.set([]);
+      return E.set([]);
     }
   },
-  provide: (e) => K.decorations.from(e)
-}), ue = [Z(), ae, le, ce];
-function de({ value: e, onChange: o, onViewChanged: r, onSelectionChange: n, options: s, editorDidMount: i }) {
-  const a = T(
-    (c) => {
-      o?.(c);
+  provide: (e) => U.decorations.from(e)
+}), le = [Y(), ae, ie, se];
+function de({ value: e, onChange: t, onViewChanged: o, onSelectionChange: a, options: s, editorDidMount: u }) {
+  const d = _(
+    (i) => {
+      t?.(i);
+    },
+    [t]
+  ), f = _(
+    (i) => {
+      o?.(i);
     },
     [o]
-  ), t = T(
-    (c) => {
-      r?.(c);
+  ), c = _(
+    (i) => {
+      i.selectionSet && a && a?.(i.state.selection);
     },
-    [r]
-  ), l = T(
-    (c) => {
-      c.selectionSet && n && n?.(c.state.selection);
-    },
-    [n]
+    [a]
   );
-  return /* @__PURE__ */ y.createElement(y.Fragment, null, /* @__PURE__ */ y.createElement(Y, {
+  return /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(X, {
     value: e,
-    onChange: a,
-    onCreateEditor: t,
-    onUpdate: l,
-    extensions: ue
+    onChange: d,
+    onCreateEditor: f,
+    onUpdate: c,
+    extensions: le
   }));
 }
-function fe(e) {
-  const { onEvent: o, onQuery: r, onSchedule: n, ready: s = !0, onDraw: i } = e, [a, t] = w(!1), l = 1, c = () => Math.floor(M.getTransport().seconds / l), f = (g = c()) => {
-    const C = new oe(g, g + 1), v = r?.(new re(C)) || [];
-    n?.(v, g);
-    const h = C.begin.valueOf();
-    M.getTransport().cancel(h);
-    const D = (g + 1) * l - 0.5, _ = Math.max(M.getTransport().seconds, D) + 0.1;
-    M.getTransport().schedule(() => {
-      f(g + 1);
-    }, _), v?.filter((E) => E.part.begin.equals(E.whole?.begin)).forEach((E) => {
-      M.getTransport().schedule((L) => {
-        o(L, E, M.getContext().currentTime), M.Draw.schedule(() => {
-          i?.(L, E);
-        }, L);
-      }, E.part.begin.valueOf());
-    });
-  };
-  q(() => {
-    s && f();
-  }, [o, n, r, i, s]);
-  const p = async () => {
-    t(!0), await M.start(), M.getTransport().start("+0.1");
-  }, d = () => {
-    M.getTransport().pause(), t(!1);
-  };
-  return {
-    start: p,
-    stop: d,
-    onEvent: o,
-    started: a,
-    setStarted: t,
-    toggle: () => a ? d() : p(),
-    query: f,
-    activeCycle: c
-  };
-}
-function ge(e) {
-  return q(() => (window.addEventListener("message", e), () => window.removeEventListener("message", e)), [e]), T((o) => window.postMessage(o, "*"), []);
-}
-let he = () => Math.floor((1 + Math.random()) * 65536).toString(16).substring(1);
-const me = (e) => encodeURIComponent(btoa(e));
-function pe({ tune: e, autolink: o = !0, onEvent: r, onDraw: n }) {
-  const s = R(() => he(), []), [i, a] = w(e), [t, l] = w(), [c, f] = w(""), [p, d] = w(), [k, g] = w(!1), [C, v] = w(""), [h, D] = w(), _ = R(() => i !== t || p, [i, t, p]), E = T((b) => f((u) => u + `${u ? `
-
-` : ""}${b}`), []), L = R(() => {
-    if (t && !t.includes("strudel disable-highlighting"))
-      return (b, u) => n?.(b, u, t);
-  }, [t, n]), H = R(() => t && t.includes("strudel hide-header"), [t]), x = R(() => t && t.includes("strudel hide-console"), [t]), P = fe({
-    onDraw: L,
-    onEvent: T(
-      (b, u, X) => {
-        try {
-          r?.(u), u.context.logs?.length && u.context.logs.forEach(E);
-          const { onTrigger: S = ne } = u.context;
-          S(b, u, X, 1);
-        } catch (S) {
-          console.warn(S), S.message = "unplayable event: " + S?.message, E(S.message);
-        }
-      },
-      [r, E]
-    ),
-    onQuery: T(
-      (b) => {
-        try {
-          return h?.query(b) || [];
-        } catch (u) {
-          return console.warn(u), u.message = "query error: " + u.message, d(u), [];
-        }
-      },
-      [h]
-    ),
-    onSchedule: T((b, u) => J(b), []),
-    ready: !!h && !!t
-  }), B = ge(({ data: { from: b, type: u } }) => {
-    u === "start" && b !== s && (P.setStarted(!1), l(void 0));
-  }), V = T(
-    async (b = i) => {
-      if (t && !_) {
-        d(void 0), P.start();
-        return;
-      }
-      try {
-        g(!0);
-        const u = await G(b);
-        P.start(), B({ type: "start", from: s }), D(() => u.pattern), o && (window.location.hash = "#" + encodeURIComponent(btoa(i))), v(me(i)), d(void 0), l(b), g(!1);
-      } catch (u) {
-        u.message = "evaluation error: " + u.message, console.warn(u), d(u);
-      }
-    },
-    [t, _, i, P, o, s, B]
-  ), J = (b, u) => {
-    b.length;
-  };
-  return {
-    hideHeader: H,
-    hideConsole: x,
-    pending: k,
-    code: i,
-    setCode: a,
-    pattern: h,
-    error: p,
-    cycle: P,
-    setPattern: D,
-    dirty: _,
-    log: c,
-    togglePlay: () => {
-      P.started ? P.stop() : V();
-    },
-    setActiveCode: l,
-    activateCode: V,
-    activeCode: t,
-    pushLog: E,
-    hash: C
-  };
-}
-function $(...e) {
+function K(...e) {
   return e.filter(Boolean).join(" ");
 }
-function ye({ view: e, pattern: o, active: r, getTime: n }) {
-  const s = I([]), i = I();
-  q(() => {
+function ue({ view: e, pattern: t, active: o, getTime: a }) {
+  const s = H([]), u = H();
+  L(() => {
     if (e)
-      if (o && r) {
-        let t = function() {
+      if (t && o) {
+        let d = requestAnimationFrame(function f() {
           try {
-            const l = n(), f = [Math.max(i.current || l, l - 1 / 10), l + 1 / 60];
-            i.current = l + 1 / 60, s.current = s.current.filter((d) => d.whole.end > l);
-            const p = o.queryArc(...f).filter((d) => d.hasOnset());
-            s.current = s.current.concat(p), e.dispatch({ effects: O.of(s.current) });
+            const c = a(), m = [Math.max(u.current || c, c - 1 / 10, 0), c + 1 / 60];
+            u.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: O.of([]) });
+            e.dispatch({ effects: z.of([]) });
           }
-          a = requestAnimationFrame(t);
-        }, a = requestAnimationFrame(t);
+          d = requestAnimationFrame(f);
+        });
         return () => {
-          cancelAnimationFrame(a);
+          cancelAnimationFrame(d);
         };
       } else
-        s.current = [], e.dispatch({ effects: O.of([]) });
-  }, [o, r, e]);
+        s.current = [], e.dispatch({ effects: z.of([]) });
+  }, [t, o, e]);
 }
-const be = "_container_3i85k_1", we = "_header_3i85k_5", ve = "_buttons_3i85k_9", Ee = "_button_3i85k_9", ke = "_buttonDisabled_3i85k_17", Ce = "_error_3i85k_21", Me = "_body_3i85k_25", F = {
-  container: be,
-  header: we,
-  buttons: ve,
-  button: Ee,
-  buttonDisabled: ke,
-  error: Ce,
-  body: Me
+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 W({ type: e }) {
-  return /* @__PURE__ */ y.createElement("svg", {
+function O({ type: e }) {
+  return /* @__PURE__ */ n.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     className: "sc-h-5 sc-w-5",
     viewBox: "0 0 20 20",
     fill: "currentColor"
   }, {
-    refresh: /* @__PURE__ */ y.createElement("path", {
+    refresh: /* @__PURE__ */ n.createElement("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: /* @__PURE__ */ y.createElement("path", {
+    play: /* @__PURE__ */ n.createElement("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: /* @__PURE__ */ y.createElement("path", {
+    pause: /* @__PURE__ */ n.createElement("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"
     })
   }[e]);
 }
-function Be({ tune: e, hideOutsideView: o = !1, init: r, onEvent: n, enableKeyboard: s }) {
-  const { code: i, setCode: a, pattern: t, activeCode: l, activateCode: c, evaluateOnly: f, error: p, cycle: d, dirty: k, togglePlay: g, stop: C } = pe({
-    tune: e,
-    autolink: !1,
-    onEvent: n
-  });
-  q(() => {
-    r && f();
-  }, [e, r]);
-  const [v, h] = w(), [D, _] = te({
-    threshold: 0.01
-  }), E = I(), L = R(() => ((_ || !o) && (E.current = !0), _ || E.current), [_, o]);
-  return ye({
-    view: v,
-    pattern: t,
-    active: d.started && !l?.includes("strudel disable-highlighting"),
-    getTime: () => M.getTransport().seconds
-  }), j(() => {
-    if (s) {
-      const H = async (x) => {
-        (x.ctrlKey || x.altKey) && (x.code === "Enter" ? (x.preventDefault(), ie(v), await c()) : x.code === "Period" && (d.stop(), x.preventDefault()));
-      };
-      return window.addEventListener("keydown", H, !0), () => window.removeEventListener("keydown", H, !0);
+function Ee(e) {
+  return L(() => (window.addEventListener("message", e), () => window.removeEventListener("message", e)), [e]), _((t) => window.postMessage(t, "*"), []);
+}
+const we = oe.repl;
+function ye({
+  defaultOutput: e,
+  interval: t,
+  getTime: o,
+  evalOnMount: a = !1,
+  initialCode: s = "",
+  autolink: u = !1,
+  beforeEval: d,
+  afterEval: f,
+  onEvalError: c,
+  onToggle: i
+}) {
+  const m = V(() => ke(), []), [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(
+    () => we({
+      interval: t,
+      defaultOutput: e,
+      onSchedulerError: g,
+      onEvalError: (l) => {
+        N(l), c?.(l);
+      },
+      getTime: o,
+      transpiler: ne,
+      beforeEval: ({ code: l }) => {
+        y(l), d?.();
+      },
+      afterEval: ({ pattern: l, code: P }) => {
+        S(P), D(l), N(), g(), u && (window.location.hash = "#" + encodeURIComponent(btoa(P))), f?.();
+      },
+      onToggle: (l) => {
+        x(l), i?.(l);
+      }
+    }),
+    [e, t, o]
+  ), 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 () => {
+      F ? A.pause() : await R();
     }
-  }, [s, t, i, c, d, v]), /* @__PURE__ */ y.createElement("div", {
-    className: F.container,
-    ref: D
-  }, /* @__PURE__ */ y.createElement("div", {
-    className: F.header
-  }, /* @__PURE__ */ y.createElement("div", {
-    className: F.buttons
-  }, /* @__PURE__ */ y.createElement("button", {
-    className: $(F.button, d.started ? "sc-animate-pulse" : ""),
-    onClick: () => g()
-  }, /* @__PURE__ */ y.createElement(W, {
-    type: d.started ? "pause" : "play"
-  })), /* @__PURE__ */ y.createElement("button", {
-    className: $(k ? F.button : F.buttonDisabled),
-    onClick: () => c()
-  }, /* @__PURE__ */ y.createElement(W, {
+  };
+}
+function ke() {
+  return Math.floor((1 + Math.random()) * 65536).toString(16).substring(1);
+}
+const _e = () => re().currentTime;
+function Te({ tune: e, hideOutsideView: t = !1, init: o, enableKeyboard: a }) {
+  const {
+    code: s,
+    setCode: u,
+    evaluate: d,
+    activateCode: f,
+    error: c,
+    isDirty: i,
+    activeCode: m,
+    pattern: h,
+    started: g,
+    scheduler: C,
+    togglePlay: N,
+    stop: p
+  } = ye({
+    initialCode: e,
+    defaultOutput: te,
+    getTime: _e
+  }), [y, M] = w(), [S, k] = ee({
+    threshold: 0.01
+  }), D = H(), F = V(() => ((k || !t) && (D.current = !0), k || D.current), [k, t]);
+  return ue({
+    view: y,
+    pattern: h,
+    active: g && !m?.includes("strudel disable-highlighting"),
+    getTime: () => C.getPhase()
+  }), j(() => {
+    if (a) {
+      const x = async (b) => {
+        (b.ctrlKey || b.altKey) && (b.code === "Enter" ? (b.preventDefault(), ce(y), await f()) : b.code === "Period" && (p(), b.preventDefault()));
+      };
+      return window.addEventListener("keydown", x, !0), () => window.removeEventListener("keydown", x, !0);
+    }
+  }, [a, h, s, d, p, y]), /* @__PURE__ */ n.createElement("div", {
+    className: v.container,
+    ref: S
+  }, /* @__PURE__ */ n.createElement("div", {
+    className: v.header
+  }, /* @__PURE__ */ n.createElement("div", {
+    className: v.buttons
+  }, /* @__PURE__ */ n.createElement("button", {
+    className: K(v.button, g ? "sc-animate-pulse" : ""),
+    onClick: () => N()
+  }, /* @__PURE__ */ n.createElement(O, {
+    type: g ? "pause" : "play"
+  })), /* @__PURE__ */ n.createElement("button", {
+    className: K(i ? v.button : v.buttonDisabled),
+    onClick: () => f()
+  }, /* @__PURE__ */ n.createElement(O, {
     type: "refresh"
-  }))), p && /* @__PURE__ */ y.createElement("div", {
-    className: F.error
-  }, p.message)), /* @__PURE__ */ y.createElement("div", {
-    className: F.body
-  }, L && /* @__PURE__ */ y.createElement(de, {
-    value: i,
-    onChange: a,
-    onViewChanged: h
+  }))), c && /* @__PURE__ */ n.createElement("div", {
+    className: v.error
+  }, c.message)), /* @__PURE__ */ n.createElement("div", {
+    className: v.body
+  }, F && /* @__PURE__ */ n.createElement(de, {
+    value: s,
+    onChange: u,
+    onViewChanged: M
   })));
 }
-function Te(e, o, r = 0.05, n = 0.1, s = 0.1) {
-  let i = 0, a = 0, t = 10 ** 4, l = 0.01;
-  const c = (h) => r = h(r);
-  s = s || n / 2;
-  const f = () => {
-    const h = e(), D = h + n + s;
-    for (a === 0 && (a = h + l); a < D; )
-      a = Math.round(a * t) / t, a >= h && o(a, r, i), a < h && console.log("TOO LATE", a), a += r, i++;
-  };
-  let p;
-  const d = () => {
-    f(), p = setInterval(f, n * 1e3);
-  }, k = () => clearInterval(p);
-  return { setDuration: c, start: d, stop: () => {
-    i = 0, a = 0, k();
-  }, pause: () => k(), duration: r, getPhase: () => a };
-}
-class _e {
-  worker;
-  pattern;
-  started = !1;
-  cps = 1;
-  getTime;
-  phase = 0;
-  constructor({ interval: o, onTrigger: r, onError: n, getTime: s, latency: i = 0.1 }) {
-    this.getTime = s;
-    const a = (t) => Math.round(t * 1e3) / 1e3;
-    this.clock = Te(
-      s,
-      (t, l, c) => {
-        c === 0 && (this.origin = t);
-        const f = a(t - this.origin);
-        this.phase = f - i;
-        const p = a(f + l), d = s();
-        try {
-          this.pattern.queryArc(f, p).forEach((g) => {
-            if (g.part.begin.equals(g.whole.begin)) {
-              const C = g.whole.begin + this.origin - d + i, v = g.duration * 1;
-              r?.(g, C, v);
-            }
-          });
-        } catch (k) {
-          console.warn("scheduler error", k), n?.(k);
-        }
-      },
-      o
-    );
-  }
-  getPhase() {
-    return this.phase;
-  }
-  start() {
-    if (!this.pattern)
-      throw new Error("Scheduler: no pattern set! call .setPattern first.");
-    this.clock.start(), this.started = !0;
-  }
-  pause() {
-    this.clock.stop(), delete this.origin, this.started = !1;
-  }
-  stop() {
-    delete this.origin, this.clock.stop(), this.started = !1;
-  }
-  setPattern(o) {
-    this.pattern = o;
-  }
-  setCps(o = 1) {
-    this.cps = o;
-  }
-  log(o, r, n) {
-    const s = n.filter((i) => i.hasOnset());
-    console.log(`${o.toFixed(4)} - ${r.toFixed(4)} ${Array(s.length).fill("I").join("")}`);
-  }
-}
-function Ve({ defaultOutput: e, interval: o, getTime: r, code: n, evalOnMount: s = !1 }) {
-  const [i, a] = w(), [t, l] = w(), [c, f] = w(n), [p, d] = w(), k = n !== c, g = R(
-    () => new _e({ interval: o, onTrigger: e, onError: a, getTime: r }),
-    [e, o]
-  ), C = T(async () => {
-    if (!n) {
-      console.log("no code..");
-      return;
-    }
-    try {
-      const { pattern: h } = await G(n);
-      f(n), g?.setPattern(h), d(h), l();
-    } catch (h) {
-      l(h), console.warn("eval error", h);
-    }
-  }, [n, g]), v = I();
-  return q(() => {
-    !v.current && s && (v.current = !0, C());
-  }, [C, s]), { schedulerError: i, scheduler: g, evalError: t, evaluate: C, activeCode: c, isDirty: k, pattern: p };
-}
-const $e = (e) => j(() => (window.addEventListener("keydown", e, !0), () => window.removeEventListener("keydown", e, !0)), [e]);
-function We(e) {
-  const { ready: o, connected: r, disconnected: n } = e, [s, i] = w(!0), [a, t] = w(N?.outputs || []);
-  return q(() => {
-    se().then(() => {
-      N.addListener("connected", (c) => {
-        t([...N.outputs]), r?.(N, c);
-      }), N.addListener("disconnected", (c) => {
-        t([...N.outputs]), n?.(N, c);
-      }), o?.(N), i(!1);
-    }).catch((c) => {
-      if (c) {
-        console.error(c), console.warn("Web Midi could not be enabled..");
-        return;
-      }
-    });
-  }, [o, r, n, a]), { loading: s, outputs: a, outputByName: (c) => N.getOutputByName(c) };
-}
+const Ve = (e) => j(() => (window.addEventListener("keydown", e, !0), () => window.removeEventListener("keydown", e, !0)), [e]);
 export {
   de as CodeMirror,
-  Be as MiniRepl,
-  $ as cx,
-  ie as flash,
-  fe as useCycle,
-  ye as useHighlighting,
-  $e as useKeydown,
-  ge as usePostMessage,
-  pe as useRepl,
-  Ve as useStrudel,
-  We as useWebMidi
+  Te as MiniRepl,
+  K as cx,
+  ce as flash,
+  ue as useHighlighting,
+  Ve as useKeydown,
+  Ee as usePostMessage,
+  ye as useStrudel
 };

packages/react/dist/style.css

@@ -1 +1 @@
-.cm-editor{background-color:transparent!important;height:100%;z-index:11;font-size:16px}.cm-theme-light{width:100%}.cm-line>*{background:#00000095}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.sc-h-5{height:1.25rem}.sc-w-5{width:1.25rem}@keyframes sc-pulse{50%{opacity:.5}}.sc-animate-pulse{animation:sc-pulse 2s cubic-bezier(.4,0,.6,1) infinite}._container_3i85k_1{overflow:hidden;border-radius:.375rem;--tw-bg-opacity: 1;background-color:rgb(34 34 34 / var(--tw-bg-opacity))}._header_3i85k_5{display:flex;justify-content:space-between;border-top-width:1px;--tw-border-opacity: 1;border-color:rgb(100 116 139 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(51 65 85 / var(--tw-bg-opacity))}._buttons_3i85k_9{display:flex}._button_3i85k_9{display:flex;width:4rem;cursor:pointer;align-items:center;justify-content:center;border-right-width:1px;--tw-border-opacity: 1;border-color:rgb(100 116 139 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(51 65 85 / var(--tw-bg-opacity));padding:.25rem;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._button_3i85k_9:hover{--tw-bg-opacity: 1;background-color:rgb(71 85 105 / var(--tw-bg-opacity))}._buttonDisabled_3i85k_17{display:flex;width:4rem;cursor:pointer;cursor:not-allowed;align-items:center;justify-content:center;--tw-bg-opacity: 1;background-color:rgb(71 85 105 / var(--tw-bg-opacity));padding:.25rem;--tw-text-opacity: 1;color:rgb(148 163 184 / var(--tw-text-opacity))}._error_3i85k_21{padding:.25rem;text-align:right;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(254 202 202 / var(--tw-text-opacity))}._body_3i85k_25{position:relative;overflow:auto}
+.cm-editor{background-color:transparent!important;height:100%;z-index:11;font-size:18px}.cm-theme-light{width:100%}.cm-line>*{background:#00000095}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.sc-h-5{height:1.25rem}.sc-w-5{width:1.25rem}@keyframes sc-pulse{50%{opacity:.5}}.sc-animate-pulse{animation:sc-pulse 2s cubic-bezier(.4,0,.6,1) infinite}._container_3i85k_1{overflow:hidden;border-radius:.375rem;--tw-bg-opacity: 1;background-color:rgb(34 34 34 / var(--tw-bg-opacity))}._header_3i85k_5{display:flex;justify-content:space-between;border-top-width:1px;--tw-border-opacity: 1;border-color:rgb(100 116 139 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(51 65 85 / var(--tw-bg-opacity))}._buttons_3i85k_9{display:flex}._button_3i85k_9{display:flex;width:4rem;cursor:pointer;align-items:center;justify-content:center;border-right-width:1px;--tw-border-opacity: 1;border-color:rgb(100 116 139 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(51 65 85 / var(--tw-bg-opacity));padding:.25rem;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._button_3i85k_9:hover{--tw-bg-opacity: 1;background-color:rgb(71 85 105 / var(--tw-bg-opacity))}._buttonDisabled_3i85k_17{display:flex;width:4rem;cursor:pointer;cursor:not-allowed;align-items:center;justify-content:center;--tw-bg-opacity: 1;background-color:rgb(71 85 105 / var(--tw-bg-opacity));padding:.25rem;--tw-text-opacity: 1;color:rgb(148 163 184 / var(--tw-text-opacity))}._error_3i85k_21{padding:.25rem;text-align:right;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(254 202 202 / var(--tw-text-opacity))}._body_3i85k_25{position:relative;overflow:auto}

packages/react/examples/nano-repl/src/App.jsx

@@ -1,4 +1,5 @@
-import { evalScope, controls } from '@strudel.cycles/core';
+import core from '@strudel.cycles/core';
+const { evalScope } = core;
 import { getAudioContext, panic, webaudioOutput } from '@strudel.cycles/webaudio';
 import { useCallback, useState } from 'react';
 import CodeMirror, { flash } from '../../../src/components/CodeMirror6';
@@ -10,8 +11,8 @@ import './style.css';
 
 // TODO: only import stuff when play is pressed?
 evalScope(
-  controls,
-  import('@strudel.cycles/core'),
+  core,
+  // import('@strudel.cycles/core'),
   // import('@strudel.cycles/tone'),
   // import('@strudel.cycles/midi'), // TODO: find out why midi loads tone.js
   import('@strudel.cycles/tonal'),
@@ -82,7 +83,7 @@ function App() {
     view,
     pattern,
     active: !activeCode?.includes('strudel disable-highlighting'),
-    getTime: () => scheduler.phase,
+    getTime: () => scheduler.getPhase(),
   });
 
   const error = evalError || schedulerError;

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strudel.cycles/react",
-  "version": "0.3.0",
+  "version": "0.4.2",
   "description": "React components for strudel",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
@@ -17,6 +17,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
+    "watch": "vite build --watch",
     "preview": "vite preview"
   },
   "repository": {
@@ -38,9 +39,10 @@
   "homepage": "https://github.com/tidalcycles/strudel#readme",
   "dependencies": {
     "@codemirror/lang-javascript": "^6.1.1",
-    "@strudel.cycles/core": "^0.2.0",
-    "@strudel.cycles/eval": "^0.3.0",
-    "@strudel.cycles/tone": "^0.3.0",
+    "@strudel.cycles/core": "^0.4.1",
+    "@strudel.cycles/tone": "^0.4.1",
+    "@strudel.cycles/transpiler": "^0.4.1",
+    "@strudel.cycles/webaudio": "^0.4.2",
     "@uiw/codemirror-themes": "^4.12.4",
     "@uiw/react-codemirror": "^4.12.4",
     "react-hook-inview": "^4.5.0"

packages/react/src/App.jsx

@@ -1,12 +1,13 @@
 import React from 'react';
 import { MiniRepl } from './components/MiniRepl';
 import 'tailwindcss/tailwind.css';
-import { controls, evalScope } from '@strudel.cycles/core';
+import core from '@strudel.cycles/core';
+const {controls, evalScope} = core;
 
 evalScope(
   controls,
   import('@strudel.cycles/core'),
-  import('@strudel.cycles/tone'),
+  // import('@strudel.cycles/tone'),
   import('@strudel.cycles/tonal'),
   import('@strudel.cycles/mini'),
   import('@strudel.cycles/midi'),

packages/react/src/components/MiniRepl.jsx

@@ -1,6 +1,5 @@
 import React, { useState, useMemo, useRef, useEffect, useLayoutEffect } from 'react';
 import { useInView } from 'react-hook-inview';
-import useRepl from '../hooks/useRepl.mjs';
 import cx from '../cx';
 import useHighlighting from '../hooks/useHighlighting.mjs';
 import CodeMirror6, { flash } from './CodeMirror6';
@@ -8,18 +7,33 @@ import 'tailwindcss/tailwind.css';
 import './style.css';
 import styles from './MiniRepl.module.css';
 import { Icon } from './Icon';
-import { Tone } from '@strudel.cycles/tone';
+import { getAudioContext, webaudioOutput } from '@strudel.cycles/webaudio';
+import useStrudel from '../hooks/useStrudel.mjs';
 
-export function MiniRepl({ tune, hideOutsideView = false, init, onEvent, enableKeyboard }) {
-  const { code, setCode, pattern, activeCode, activateCode, evaluateOnly, error, cycle, dirty, togglePlay, stop } =
-    useRepl({
-      tune,
-      autolink: false,
-      onEvent,
-    });
-  useEffect(() => {
-    init && evaluateOnly();
-  }, [tune, init]);
+const getTime = () => getAudioContext().currentTime;
+
+export function MiniRepl({ tune, hideOutsideView = false, init, enableKeyboard }) {
+  const {
+    code,
+    setCode,
+    evaluate,
+    activateCode,
+    error,
+    isDirty,
+    activeCode,
+    pattern,
+    started,
+    scheduler,
+    togglePlay,
+    stop,
+  } = useStrudel({
+    initialCode: tune,
+    defaultOutput: webaudioOutput,
+    getTime,
+  });
+  /*   useEffect(() => {
+    init && activateCode();
+  }, [init, activateCode]); */
   const [view, setView] = useState();
   const [ref, isVisible] = useInView({
     threshold: 0.01,
@@ -34,8 +48,8 @@ export function MiniRepl({ tune, hideOutsideView = false, init, onEvent, enableK
   useHighlighting({
     view,
     pattern,
-    active: cycle.started && !activeCode?.includes('strudel disable-highlighting'),
-    getTime: () => Tone.getTransport().seconds,
+    active: started && !activeCode?.includes('strudel disable-highlighting'),
+    getTime: () => scheduler.getPhase(),
   });
 
   // set active pattern on ctrl+enter
@@ -48,7 +62,7 @@ export function MiniRepl({ tune, hideOutsideView = false, init, onEvent, enableK
             flash(view);
             await activateCode();
           } else if (e.code === 'Period') {
-            cycle.stop();
+            stop();
             e.preventDefault();
           }
         }
@@ -56,16 +70,16 @@ export function MiniRepl({ tune, hideOutsideView = false, init, onEvent, enableK
       window.addEventListener('keydown', handleKeyPress, true);
       return () => window.removeEventListener('keydown', handleKeyPress, true);
     }
-  }, [enableKeyboard, pattern, code, activateCode, cycle, view]);
+  }, [enableKeyboard, pattern, code, evaluate, stop, view]);
 
   return (
     <div className={styles.container} ref={ref}>
       <div className={styles.header}>
         <div className={styles.buttons}>
-          <button className={cx(styles.button, cycle.started ? 'sc-animate-pulse' : '')} onClick={() => togglePlay()}>
-            <Icon type={cycle.started ? 'pause' : 'play'} />
+          <button className={cx(styles.button, started ? 'sc-animate-pulse' : '')} onClick={() => togglePlay()}>
+            <Icon type={started ? 'pause' : 'play'} />
           </button>
-          <button className={cx(dirty ? styles.button : styles.buttonDisabled)} onClick={() => activateCode()}>
+          <button className={cx(isDirty ? styles.button : styles.buttonDisabled)} onClick={() => activateCode()}>
             <Icon type="refresh" />
           </button>
         </div>

packages/react/src/components/style.css

@@ -2,7 +2,7 @@
   background-color: transparent !important;
   height: 100%;
   z-index: 11;
-  font-size: 16px;
+  font-size: 18px;
 }
 
 .cm-theme-light {

packages/react/src/hooks/useCycle.mjs

@@ -1,86 +0,0 @@
-/*
-useCycle.mjs - <short description TODO>
-Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/repl/src/useCycle.mjs>
-This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <https://www.gnu.org/licenses/>.
-*/
-
-import { useEffect, useState } from 'react';
-import { Tone } from '@strudel.cycles/tone';
-import { State, TimeSpan } from '@strudel.cycles/core';
-
-/* export declare interface UseCycleProps {
-  onEvent: ToneEventCallback<any>;
-  onQuery?: (state: State) => Hap[];
-  onSchedule?: (events: Hap[], cycle: number) => void;
-  onDraw?: ToneEventCallback<any>;
-  ready?: boolean; // if false, query will not be called on change props
-} */
-
-// function useCycle(props: UseCycleProps) {
-function useCycle(props) {
-  // onX must use useCallback!
-  const { onEvent, onQuery, onSchedule, ready = true, onDraw } = props;
-  const [started, setStarted] = useState(false);
-  const cycleDuration = 1;
-  const activeCycle = () => Math.floor(Tone.getTransport().seconds / cycleDuration);
-
-  // pull events with onQuery + count up to next cycle
-  const query = (cycle = activeCycle()) => {
-    const timespan = new TimeSpan(cycle, cycle + 1);
-    const events = onQuery?.(new State(timespan)) || [];
-    onSchedule?.(events, cycle);
-    // cancel events after current query. makes sure no old events are player for rescheduled cycles
-    // console.log('schedule', cycle);
-    // query next cycle in the middle of the current
-    const cancelFrom = timespan.begin.valueOf();
-    Tone.getTransport().cancel(cancelFrom);
-    // const queryNextTime = (cycle + 1) * cycleDuration - 0.1;
-    const queryNextTime = (cycle + 1) * cycleDuration - 0.5;
-
-    // if queryNextTime would be before current time, execute directly (+0.1 for safety that it won't miss)
-    const t = Math.max(Tone.getTransport().seconds, queryNextTime) + 0.1;
-    Tone.getTransport().schedule(() => {
-      query(cycle + 1);
-    }, t);
-
-    // schedule events for next cycle
-    events
-      ?.filter((event) => event.part.begin.equals(event.whole?.begin))
-      .forEach((event) => {
-        Tone.getTransport().schedule((time) => {
-          onEvent(time, event, Tone.getContext().currentTime);
-          Tone.Draw.schedule(() => {
-            // do drawing or DOM manipulation here
-            onDraw?.(time, event);
-          }, time);
-        }, event.part.begin.valueOf());
-      });
-  };
-
-  useEffect(() => {
-    ready && query();
-  }, [onEvent, onSchedule, onQuery, onDraw, ready]);
-
-  const start = async () => {
-    setStarted(true);
-    await Tone.start();
-    Tone.getTransport().start('+0.1');
-  };
-  const stop = () => {
-    Tone.getTransport().pause();
-    setStarted(false);
-  };
-  const toggle = () => (started ? stop() : start());
-  return {
-    start,
-    stop,
-    onEvent,
-    started,
-    setStarted,
-    toggle,
-    query,
-    activeCycle,
-  };
-}
-
-export default useCycle;

packages/react/src/hooks/useHighlighting.mjs

@@ -7,27 +7,23 @@ function useHighlighting({ view, pattern, active, getTime }) {
   useEffect(() => {
     if (view) {
       if (pattern && active) {
-        let frame = requestAnimationFrame(updateHighlights);
-
-        function updateHighlights() {
+        let frame = requestAnimationFrame(function updateHighlights() {
           try {
             const audioTime = getTime();
             // force min framerate of 10 fps => fixes crash on tab refocus, where lastEnd could be far away
             // see https://github.com/tidalcycles/strudel/issues/108
-            const begin = Math.max(lastEnd.current || audioTime, audioTime - 1 / 10);
+            const begin = Math.max(lastEnd.current || audioTime, audioTime - 1 / 10, 0); // negative time seems buggy
             const span = [begin, audioTime + 1 / 60];
-            lastEnd.current = audioTime + 1 / 60;
+            lastEnd.current = span[1];
             highlights.current = highlights.current.filter((hap) => hap.whole.end > audioTime); // keep only highlights that are still active
             const haps = pattern.queryArc(...span).filter((hap) => hap.hasOnset());
             highlights.current = highlights.current.concat(haps); // add potential new onsets
             view.dispatch({ effects: setHighlights.of(highlights.current) }); // highlight all still active + new active haps
           } catch (err) {
-            // console.log('error in updateHighlights', err);
             view.dispatch({ effects: setHighlights.of([]) });
           }
           frame = requestAnimationFrame(updateHighlights);
-        }
-
+        });
         return () => {
           cancelAnimationFrame(frame);
         };

packages/react/src/hooks/useRepl.mjs

@@ -1,150 +0,0 @@
-/*
-useRepl.mjs - <short description TODO>
-Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/repl/src/useRepl.mjs>
-This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <https://www.gnu.org/licenses/>.
-*/
-
-import { useCallback, useState, useMemo } from 'react';
-import { evaluate } from '@strudel.cycles/eval';
-import useCycle from './useCycle.mjs';
-import usePostMessage from './usePostMessage.mjs';
-import { webaudioOutputTrigger } from '@strudel.cycles/webaudio';
-
-let s4 = () => {
-  return Math.floor((1 + Math.random()) * 0x10000)
-    .toString(16)
-    .substring(1);
-};
-const generateHash = (code) => encodeURIComponent(btoa(code));
-
-function useRepl({ tune, autolink = true, onEvent, onDraw: onDrawProp }) {
-  const id = useMemo(() => s4(), []);
-  const [code, setCode] = useState(tune);
-  const [activeCode, setActiveCode] = useState();
-  const [log, setLog] = useState('');
-  const [error, setError] = useState();
-  const [pending, setPending] = useState(false);
-  const [hash, setHash] = useState('');
-  const [pattern, setPattern] = useState();
-  const dirty = useMemo(() => code !== activeCode || error, [code, activeCode, error]);
-  const pushLog = useCallback((message) => setLog((log) => log + `${log ? '\n\n' : ''}${message}`), []);
-
-  // below block allows disabling the highlighting by including "strudel disable-highlighting" in the code (as comment)
-  const onDraw = useMemo(() => {
-    if (activeCode && !activeCode.includes('strudel disable-highlighting')) {
-      return (time, event) => onDrawProp?.(time, event, activeCode);
-    }
-  }, [activeCode, onDrawProp]);
-
-  const hideHeader = useMemo(() => activeCode && activeCode.includes('strudel hide-header'), [activeCode]);
-  const hideConsole = useMemo(() => activeCode && activeCode.includes('strudel hide-console'), [activeCode]);
-  // cycle hook to control scheduling
-  const cycle = useCycle({
-    onDraw,
-    onEvent: useCallback(
-      (time, event, currentTime) => {
-        try {
-          onEvent?.(event);
-          if (event.context.logs?.length) {
-            event.context.logs.forEach(pushLog);
-          }
-          const { onTrigger = webaudioOutputTrigger } = event.context;
-          onTrigger(time, event, currentTime, 1 /* cps */);
-        } catch (err) {
-          console.warn(err);
-          err.message = 'unplayable event: ' + err?.message;
-          pushLog(err.message); // not with setError, because then we would have to setError(undefined) on next playable event
-        }
-      },
-      [onEvent, pushLog],
-    ),
-    onQuery: useCallback(
-      (state) => {
-        try {
-          return pattern?.query(state) || [];
-        } catch (err) {
-          console.warn(err);
-          err.message = 'query error: ' + err.message;
-          setError(err);
-          return [];
-        }
-      },
-      [pattern],
-    ),
-    onSchedule: useCallback((_events, cycle) => logCycle(_events, cycle), []),
-    ready: !!pattern && !!activeCode,
-  });
-
-  const broadcast = usePostMessage(({ data: { from, type } }) => {
-    if (type === 'start' && from !== id) {
-      // console.log('message', from, type);
-      cycle.setStarted(false);
-      setActiveCode(undefined);
-    }
-  });
-
-  const activateCode = useCallback(
-    async (_code = code) => {
-      if (activeCode && !dirty) {
-        setError(undefined);
-        cycle.start();
-        return;
-      }
-      try {
-        setPending(true);
-        const parsed = await evaluate(_code);
-        cycle.start();
-        broadcast({ type: 'start', from: id });
-        setPattern(() => parsed.pattern);
-        if (autolink) {
-          window.location.hash = '#' + encodeURIComponent(btoa(code));
-        }
-        setHash(generateHash(code));
-        setError(undefined);
-        setActiveCode(_code);
-        setPending(false);
-      } catch (err) {
-        err.message = 'evaluation error: ' + err.message;
-        console.warn(err);
-        setError(err);
-      }
-    },
-    [activeCode, dirty, code, cycle, autolink, id, broadcast],
-  );
-  // logs events of cycle
-  const logCycle = (_events, cycle) => {
-    if (_events.length) {
-      // pushLog(`# cycle ${cycle}\n` + _events.map((e: any) => e.show()).join('\n'));
-    }
-  };
-
-  const togglePlay = () => {
-    if (!cycle.started) {
-      activateCode();
-    } else {
-      cycle.stop();
-    }
-  };
-
-  return {
-    hideHeader,
-    hideConsole,
-    pending,
-    code,
-    setCode,
-    pattern,
-    error,
-    cycle,
-    setPattern,
-    dirty,
-    log,
-    togglePlay,
-    setActiveCode,
-    activateCode,
-    activeCode,
-    pushLog,
-    hash,
-  };
-}
-
-export default useRepl;

packages/react/src/hooks/useStrudel.mjs

@@ -1,44 +1,126 @@
-// import { Scheduler } from '@strudel.cycles/core';
 import { useRef, useCallback, useEffect, useMemo, useState } from 'react';
-import shapeshifter from '@strudel.cycles/eval/shapeshifter.mjs';
-import { repl } from '@strudel.cycles/core/repl.mjs';
+import core from '@strudel.cycles/core';
+const repl  = core.repl
+import { transpiler } from '@strudel.cycles/transpiler';
+import usePostMessage from './usePostMessage.mjs';
 
-function useStrudel({ defaultOutput, interval, getTime, code, evalOnMount = false }) {
+function useStrudel({
+  defaultOutput,
+  interval,
+  getTime,
+  evalOnMount = false,
+  initialCode = '',
+  autolink = false,
+  beforeEval,
+  afterEval,
+  onEvalError,
+  onToggle,
+}) {
+  const id = useMemo(() => s4(), []);
   // scheduler
   const [schedulerError, setSchedulerError] = useState();
   const [evalError, setEvalError] = useState();
-  const [activeCode, setActiveCode] = useState(code);
+  const [code, setCode] = useState(initialCode);
+  const [activeCode, setActiveCode] = useState();
   const [pattern, setPattern] = useState();
+  const [started, setStarted] = useState(false);
   const isDirty = code !== activeCode;
-  const { scheduler, evaluate: _evaluate } = useMemo(
+
+  // TODO: make sure this hook reruns when scheduler.started changes
+  const { scheduler, evaluate, start, stop, pause } = useMemo(
     () =>
       repl({
         interval,
         defaultOutput,
         onSchedulerError: setSchedulerError,
-        onEvalError: setEvalError,
+        onEvalError: (err) => {
+          setEvalError(err);
+          onEvalError?.(err);
+        },
         getTime,
-        transpiler: shapeshifter,
-        onEval: ({ pattern: _pattern, code }) => {
+        transpiler,
+        beforeEval: ({ code }) => {
+          setCode(code);
+          beforeEval?.();
+        },
+        afterEval: ({ pattern: _pattern, code }) => {
           setActiveCode(code);
           setPattern(_pattern);
           setEvalError();
+          setSchedulerError();
+          if (autolink) {
+            window.location.hash = '#' + encodeURIComponent(btoa(code));
+          }
+          afterEval?.();
+        },
+        onToggle: (v) => {
+          setStarted(v);
+          onToggle?.(v);
         },
-        onEvalError: setEvalError,
       }),
     [defaultOutput, interval, getTime],
   );
-  const evaluate = useCallback(() => _evaluate(code), [_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(() => {
     if (!inited.current && evalOnMount && code) {
       inited.current = true;
-      evaluate();
+      activateCode();
     }
-  }, [evaluate, evalOnMount, code]);
+  }, [activateCode, evalOnMount, code]);
 
-  return { schedulerError, scheduler, evalError, evaluate, activeCode, isDirty, pattern };
+  // this will stop the scheduler when hot reloading in development
+  useEffect(() => {
+    return () => {
+      scheduler.stop();
+    };
+  }, [scheduler]);
+
+  const togglePlay = async () => {
+    if (started) {
+      scheduler.pause();
+    } else {
+      await activateCode();
+    }
+  };
+  const error = schedulerError || evalError;
+  return {
+    code,
+    setCode,
+    error,
+    schedulerError,
+    scheduler,
+    evalError,
+    evaluate,
+    activateCode,
+    activeCode,
+    isDirty,
+    pattern,
+    started,
+    start,
+    stop,
+    pause,
+    togglePlay,
+  };
 }
 
 export default useStrudel;
+
+function s4() {
+  return Math.floor((1 + Math.random()) * 0x10000)
+    .toString(16)
+    .substring(1);
+}

packages/react/src/hooks/useWebMidi.mjs

@@ -1,41 +0,0 @@
-/*
-useWebMidi.js - <short description TODO>
-Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/repl/src/useWebMidi.js>
-This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <https://www.gnu.org/licenses/>.
-*/
-
-import { useEffect, useState } from 'react';
-import { enableWebMidi, WebMidi } from '@strudel.cycles/midi'
-
-export function useWebMidi(props) {
-  const { ready, connected, disconnected } = props;
-  const [loading, setLoading] = useState(true);
-  const [outputs, setOutputs] = useState(WebMidi?.outputs || []);
-  useEffect(() => {
-    enableWebMidi()
-      .then(() => {
-        // Reacting when a new device becomes available
-        WebMidi.addListener('connected', (e) => {
-          setOutputs([...WebMidi.outputs]);
-          connected?.(WebMidi, e);
-        });
-        // Reacting when a device becomes unavailable
-        WebMidi.addListener('disconnected', (e) => {
-          setOutputs([...WebMidi.outputs]);
-          disconnected?.(WebMidi, e);
-        });
-        ready?.(WebMidi);
-        setLoading(false);
-      })
-      .catch((err) => {
-        if (err) {
-          console.error(err);
-          //throw new Error("Web Midi could not be enabled...");
-          console.warn('Web Midi could not be enabled..');
-          return;
-        }
-      });
-  }, [ready, connected, disconnected, outputs]);
-  const outputByName = (name) => WebMidi.getOutputByName(name);
-  return { loading, outputs, outputByName };
-}

packages/react/src/index.js

@@ -2,11 +2,8 @@
 
 export { default as CodeMirror, flash } from './components/CodeMirror6';
 export * from './components/MiniRepl';
-export { default as useCycle } from './hooks/useCycle';
 export { default as useHighlighting } from './hooks/useHighlighting';
 export { default as usePostMessage } from './hooks/usePostMessage';
-export { default as useRepl } from './hooks/useRepl';
 export { default as useStrudel } from './hooks/useStrudel';
 export { default as useKeydown } from './hooks/useKeydown';
 export { default as cx } from './cx';
-export { useWebMidi } from './hooks/useWebMidi';

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

@@ -8,28 +8,36 @@ 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: '#676e95',
+    gutterForeground: '#8a919966',
   },
   styles: [
     { tag: t.keyword, color: '#c792ea' },
     { tag: t.operator, color: '#89ddff' },
     { tag: t.special(t.variableName), color: '#eeffff' },
-    { tag: t.typeName, color: '#f07178' },
+    // { tag: t.typeName, color: '#f07178' }, // original
+    { tag: t.typeName, color: '#c3e88d' },
     { tag: t.atom, color: '#f78c6c' },
-    { tag: t.number, color: '#ff5370' },
+    // { tag: t.number, color: '#ff5370' }, // original
+    { tag: t.number, color: '#c3e88d' },
     { tag: t.definition(t.variableName), color: '#82aaff' },
     { tag: t.string, color: '#c3e88d' },
-    { tag: t.special(t.string), color: '#f07178' },
+    //     { tag: t.special(t.string), color: '#f07178' }, // original
+    { tag: t.special(t.string), color: '#c3e88d' },
     { tag: t.comment, color: '#7d8799' },
-    { tag: t.variableName, color: '#f07178' },
-    { tag: t.tagName, color: '#ff5370' },
-    { tag: t.bracket, color: '#a2a1a4' },
+    // { tag: t.variableName, color: '#f07178' }, // original
+    { tag: t.variableName, color: '#c792ea' },
+    // { tag: t.tagName, color: '#ff5370' }, // original
+    { tag: t.tagName, color: '#c3e88d' },
+    { tag: t.bracket, color: '#525154' },
+    // { tag: t.bracket, color: '#a2a1a4' }, // original
     { tag: t.meta, color: '#ffcb6b' },
     { tag: t.attributeName, color: '#c792ea' },
     { tag: t.propertyName, color: '#c792ea' },
+
     { tag: t.className, color: '#decb6b' },
     { tag: t.invalid, color: '#ffffff' },
   ],

packages/react/vite.config.js

@@ -24,8 +24,9 @@ export default defineConfig({
         // TODO: find out which of below names are obsolete now
         '@strudel.cycles/tone',
         '@strudel.cycles/eval',
+        '@strudel.cycles/transpiler',
+        'acorn',
         '@strudel.cycles/core',
-        '@strudel.cycles/core/util.mjs',
         '@strudel.cycles/mini',
         '@strudel.cycles/tonal',
         '@strudel.cycles/midi',

packages/serial/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strudel.cycles/serial",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "description": "Webserial API for strudel",
   "main": "serial.mjs",
   "repository": {

packages/serial/serial.mjs

@@ -4,73 +4,113 @@ Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/st
 This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { Pattern, isPattern } from '@strudel.cycles/core';
+import core from '@strudel.cycles/core';
+const { Pattern, isPattern } = core;
 
-var serialWriter;
+var writeMessage;
 var choosing = false;
 
-export async function getWriter(br=38400) {
+export async function getWriter(br = 38400) {
   if (choosing) {
     return;
   }
   choosing = true;
-  if (serialWriter) {
-    return serialWriter;
+  if (writeMessage) {
+    return writeMessage;
   }
   if ('serial' in navigator) {
     const port = await navigator.serial.requestPort();
     await port.open({ baudRate: br });
-    const textEncoder = new TextEncoderStream();
-    const writableStreamClosed = textEncoder.readable.pipeTo(port.writable);
-    const writer = textEncoder.writable.getWriter();
-    serialWriter = function (message) {
-      writer.write(message)
-    }
-  }
-  else {
-    throw('Webserial is not available in this browser.')
+    const encoder = new TextEncoder();
+    const writer = port.writable.getWriter();
+    writeMessage = function (message, chk) {
+      const encoded = encoder.encode(message)
+      if (!chk) {
+        writer.write(encoded);
+      }
+      else {
+        const bytes = new Uint8Array(4);
+        bytes[0] = 124; // | symbol
+        bytes[1] = (chk >> 8) & 0xFF;
+        bytes[2] = chk & 0xFF;
+        bytes[3] = 59; // semicolon
+        const withchk = new Uint8Array(encoded.length+4)
+        withchk.set(encoded);
+        withchk.set(bytes, encoded.length);
+        writer.write(withchk);
+      }
+    };
+  } else {
+    throw 'Webserial is not available in this browser.';
   }
 }
 
 const latency = 0.1;
 
-Pattern.prototype.serial = function (...args) {
-  return this._withHap((hap) => {
-    if (!serialWriter) {
-      getWriter(...args);
+// crc16 (CCITT-FALSE) https://gist.github.com/tijnkooijmans/10981093
+function crc16(data) {
+  const length = data.length
+  if (length == 0) {
+    return 0;
+  }
+
+  var crc = 0xFFFF;
+  for (var i = 0; i < length; ++i) {
+    crc ^= data.charCodeAt(i) << 8;
+    for (var j = 0; j < 8; ++j) {
+      crc = (crc & 0x8000) > 0 ? (crc << 1) ^ 0x1021 : crc << 1;
+    }
+  }
+
+  return crc & 0xffff;
+}
+
+Pattern.prototype.serial = function (br=38400,sendcrc=false,singlecharids=false) {
+  return this.withHap((hap) => {
+    if (!writeMessage) {
+      getWriter(br);
     }
     const onTrigger = (time, hap, currentTime) => {
-      var message = "";
+      var message = '';
+      var chk = 0;
       if (typeof hap.value === 'object') {
         if ('action' in hap.value) {
-          message += hap.value['action'] + '(';
+          var action = hap.value['action'];
+          if (singlecharids) {
+            action = action.charAt(0);
+          }
+          message += action + '(';
           var first = true;
-          for (const [key, val] of Object.entries(hap.value)) {
+          for (var [key, val] of Object.entries(hap.value)) {
             if (key === 'action') {
               continue;
             }
             if (first) {
               first = false;
+            } else {
+              message += ',';
             }
-            else {
-              message +=',';
+            if (singlecharids) {
+              key = key.charAt(0);
             }
-            message += `${key}:${val}`
+            message += key + ':' + val;
           }
           message += ')';
-        }
-        else {
+          if (sendcrc) {
+            chk = crc16(message)
+          }
+        } else {
           for (const [key, val] of Object.entries(hap.value)) {
-            message += `${key}:${val};`
+            message += `${key}:${val}`;
           }
         }
-      }
-      else {
+      } else {
         message = hap.value;
       }
       const offset = (time - currentTime + latency) * 1000;
-      window.setTimeout(serialWriter, offset, message);
+
+      window.setTimeout(function () {writeMessage(message, chk)}, offset);
     };
-    return hap.setContext({ ...hap.context, onTrigger });
+    return hap.setContext({ ...hap.context, onTrigger, dominantTrigger: true });
   });
 };

packages/soundfonts/fontloader.mjs

@@ -1,3 +1,6 @@
+import core from '@strudel.cycles/core';
+const toMidi = core.toMidi;
+
 let loadCache = {};
 async function loadFont(name) {
   if (loadCache[name]) {

packages/soundfonts/package-lock.json

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

packages/soundfonts/package.json

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

packages/soundfonts/sfumato.mjs

@@ -1,4 +1,6 @@
-import { Pattern } from '@strudel.cycles/core';
+import strudel from '@strudel.cycles/core';
+const { Pattern, getPlayableNoteValue, toMidi } = strudel;
+import { getAudioContext } from '@strudel.cycles/webaudio';
 import { loadSoundfont as _loadSoundfont, startPresetNote } from 'sfumato';
 
 Pattern.prototype.soundfont = function (sf, n = 0) {

packages/tonal/package-lock.json

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

packages/tonal/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strudel.cycles/tonal",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "description": "Tonal functions for strudel",
   "main": "index.mjs",
   "type": "module",
@@ -25,8 +25,9 @@
   },
   "homepage": "https://github.com/tidalcycles/strudel#readme",
   "dependencies": {
-    "@strudel.cycles/core": "^0.2.0",
-    "@tonaljs/tonal": "^4.6.5",
+    "@strudel.cycles/core": "^0.4.1",
+    "@tonaljs/tonal": "^4.7.2",
+    "chord-voicings": "^0.0.1",
     "webmidi": "^3.0.21"
   }
 }

packages/tonal/test/tonal.test.mjs

@@ -7,11 +7,12 @@ This program is free software: you can redistribute it and/or modify it under th
 // import { strict as assert } from 'assert';
 
 import '../tonal.mjs'; // need to import this to add prototypes
-import { pure } from '@strudel.cycles/core';
+import core from '@strudel.cycles/core';
+const { pure } = core;
 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

@@ -5,7 +5,8 @@ This program is free software: you can redistribute it and/or modify it under th
 */
 
 import { Note, Interval, Scale } from '@tonaljs/tonal';
-import { Pattern, mod } from '@strudel.cycles/core';
+import core from '@strudel.cycles/core';
+const { Pattern, pattern, mod } = core;
 
 // transpose note inside scale by offset steps
 // function scaleOffset(scale: string, offset: number, note: string) {
@@ -75,7 +76,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 +112,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 +143,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

@@ -4,7 +4,9 @@ Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/st
 This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { Pattern as _Pattern, stack, Hap, reify } from '@strudel.cycles/core';
+import core from '@strudel.cycles/core';
+const { Pattern, stack, reify, Hap } = core
+
 import _voicings from 'chord-voicings';
 const { dictionaryVoicing, minTopNoteDiff, lefthand } = _voicings.default || _voicings; // parcel module resolution fuckup
 
@@ -17,7 +19,7 @@ const getVoicing = (chord, lastVoicing, range = ['F3', 'A4']) =>
     lastVoicing,
   });
 
-const Pattern = _Pattern;
+// const Pattern = _Pattern;
 
 Pattern.prototype.fmapNested = function (func) {
   return new Pattern((span) =>
@@ -51,7 +53,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 || [],
     }));
   });
@@ -59,7 +61,7 @@ Pattern.prototype.voicings = function (range) {
 
 Pattern.prototype._rootNotes = function (octave = 2) {
   return this.fmap((value) => {
-    const [_, root] = value.match(/^([a-gA-G][b#]?).*$/);
+    const root = value.match(/^([a-gA-G][b#]?).*$/)[1];
     return root + octave;
   });
 };

packages/tone/index.mjs

@@ -1,5 +1 @@
-import './pianoroll.mjs';
-
 export * from './tone.mjs';
-export * from './draw.mjs';
-export * from './ui.mjs';

packages/tone/package-lock.json

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

packages/tone/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strudel.cycles/tone",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "description": "Tone.js API for strudel",
   "main": "index.mjs",
   "type": "module",
@@ -22,8 +22,7 @@
   },
   "homepage": "https://github.com/tidalcycles/strudel#readme",
   "dependencies": {
-    "@strudel.cycles/core": "^0.2.0",
-    "chord-voicings": "^0.0.1",
+    "@strudel.cycles/core": "^0.4.1",
     "tone": "^14.7.77"
   }
 }

packages/tone/test/tone.test.mjs

@@ -5,7 +5,8 @@ This program is free software: you can redistribute it and/or modify it under th
 */
 
 import '../tone.mjs';
-import { pure } from '@strudel.cycles/core';
+import strudel from '@strudel.cycles/core';
+const { pure } = strudel;
 import { describe, it, expect } from 'vitest';
 
 describe('tone', () => {
@@ -13,6 +14,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/tone/tone.mjs

@@ -4,7 +4,9 @@ Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/st
 This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { Pattern } from '@strudel.cycles/core';
+import core from '@strudel.cycles/core';
+const { Pattern } = core;
+
 import * as _Tone from 'tone';
 
 // import Tone from here, to make sure to get the same AudioContext
@@ -50,32 +52,29 @@ export const getDefaultSynth = () => {
 
 // with this function, you can play the pattern with any tone synth
 Pattern.prototype.tone = function (instrument) {
-  return this._withHap((hap) => {
-    const onTrigger = (time, hap) => {
-      let note;
-      let velocity = hap.context?.velocity ?? 0.75;
-      if (instrument instanceof PluckSynth) {
-        note = getPlayableNoteValue(hap);
-        instrument.triggerAttack(note, time);
-      } else if (instrument instanceof NoiseSynth) {
-        instrument.triggerAttackRelease(hap.duration.valueOf(), time); // noise has no value
-      } else if (instrument instanceof Sampler) {
-        note = getPlayableNoteValue(hap);
-        instrument.triggerAttackRelease(note, hap.duration.valueOf(), time, velocity);
-      } else if (instrument instanceof Players) {
-        if (!instrument.has(hap.value)) {
-          throw new Error(`name "${hap.value}" not defined for players`);
-        }
-        const player = instrument.player(hap.value);
-        // velocity ?
-        player.start(time);
-        player.stop(time + hap.duration.valueOf());
-      } else {
-        note = getPlayableNoteValue(hap);
-        instrument.triggerAttackRelease(note, hap.duration.valueOf(), time, velocity);
+  return this.onTrigger((time, hap) => {
+    let note;
+    let velocity = hap.context?.velocity ?? 0.75;
+    if (instrument instanceof PluckSynth) {
+      note = getPlayableNoteValue(hap);
+      instrument.triggerAttack(note, time);
+    } else if (instrument instanceof NoiseSynth) {
+      instrument.triggerAttackRelease(hap.duration.valueOf(), time); // noise has no value
+    } else if (instrument instanceof Sampler) {
+      note = getPlayableNoteValue(hap);
+      instrument.triggerAttackRelease(note, hap.duration.valueOf(), time, velocity);
+    } else if (instrument instanceof Players) {
+      if (!instrument.has(hap.value)) {
+        throw new Error(`name "${hap.value}" not defined for players`);
       }
-    };
-    return hap.setContext({ ...hap.context, instrument, onTrigger });
+      const player = instrument.player(hap.value);
+      // velocity ?
+      player.start(time);
+      player.stop(time + hap.duration.valueOf());
+    } else {
+      note = getPlayableNoteValue(hap);
+      instrument.triggerAttackRelease(note, hap.duration.valueOf(), time, velocity);
+    }
   });
 };
 

packages/transpiler/README.md

@@ -0,0 +1,27 @@
+# @strudel.cycles/transpiler
+
+This package contains a JS code transpiler with the following features:
+
+- add locations of mini notation strings (double quoted or backticked) for highlighting
+- converts pseudo note variables to note strings
+- adds return statement to the last expression
+
+The transpiler is written with [acorn](https://github.com/acornjs/acorn) and aims to replace the `@strudel.cycles/eval` package, which uses [shift-ast](https://www.npmjs.com/package/shift-ast).
+
+## Install
+
+```sh
+npm i @strudel.cycles/transpiler
+```
+
+## Use
+
+```js
+import { transpiler } from '@strudel.cycles/core';
+import { evaluate } from '@strudel.cycles/core';
+
+transpiler('note("c3 [e3,g3]")', { wrapAsync: false, addReturn: false, simpleLocs: true });
+/* mini('c3 [e3,g3]').withMiniLocation(7,17) */
+
+evaluate(note('c3 [e3,g3]'), transpiler); // returns pattern of above code
+```

packages/transpiler/index.mjs

@@ -0,0 +1,5 @@
+import core from '@strudel.cycles/core';
+import { transpiler } from './transpiler.mjs';
+export * from './transpiler.mjs';
+
+export const evaluate = (code) => core.evaluate(code, transpiler);

packages/transpiler/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@strudel.cycles/transpiler",
+  "version": "0.4.1",
+  "description": "Transpiler for strudel user code. Converts syntactically correct but semantically meaningless JS into evaluatable strudel code.",
+  "main": "index.mjs",
+  "scripts": {
+    "test": "vitest run"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tidalcycles/strudel.git"
+  },
+  "keywords": [
+    "tidalcycles",
+    "strudel",
+    "pattern",
+    "livecoding",
+    "algorave"
+  ],
+  "author": "Felix Roos <flix91@gmail.com>",
+  "license": "AGPL-3.0-or-later",
+  "bugs": {
+    "url": "https://github.com/tidalcycles/strudel/issues"
+  },
+  "homepage": "https://github.com/tidalcycles/strudel#readme",
+  "dependencies": {
+    "@strudel.cycles/core": "^0.4.1",
+    "acorn": "^8.8.1",
+    "escodegen": "^2.0.0",
+    "estree-walker": "^3.0.1"
+  }
+}

packages/transpiler/test/transpiler.test.mjs

@@ -0,0 +1,39 @@
+/*
+transpiler.test.mjs - <short description TODO>
+Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/packages/transpiler/test/transpiler.test.mjs>
+This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import { describe, it, expect } from 'vitest';
+import { transpiler } from '../transpiler.mjs';
+
+const simple = { wrapAsync: false, addReturn: false, simpleLocs: true };
+
+describe('transpiler', () => {
+  it('wraps double quote string with mini and adds location', () => {
+    expect(transpiler('"c3"', simple)).toEqual("mini('c3').withMiniLocation(0, 4);");
+    expect(transpiler('stack("c3","bd sd")', simple)).toEqual(
+      "stack(mini('c3').withMiniLocation(6, 10), mini('bd sd').withMiniLocation(11, 18));",
+    );
+  });
+  it('wraps backtick string with mini and adds location', () => {
+    expect(transpiler('`c3`', simple)).toEqual("mini('c3').withMiniLocation(0, 4);");
+  });
+  it('replaces note variables with note strings', () => {
+    expect(transpiler('seq(c3, d3)', simple)).toEqual("seq('c3', 'd3');");
+  });
+  it('keeps tagged template literal as is', () => {
+    expect(transpiler('xxx`c3`', simple)).toEqual('xxx`c3`;');
+  });
+  it('supports top level await', () => {
+    expect(transpiler("await samples('xxx');", simple)).toEqual("await samples('xxx');");
+  });
+  /*   it('parses dynamic imports', () => {
+    expect(
+      transpiler("const { default: foo } = await import('https://bar.com/foo.js');", {
+        wrapAsync: false,
+        addReturn: false,
+      }),
+    ).toEqual("const {default: foo} = await import('https://bar.com/foo.js');");
+  }); */
+});