make regular cyclist work in the background

+ use worker-timers in Repl
+ repl / cyclist now accept custom interval functions

packages/core/cyclist.mjs

@@ -8,7 +8,7 @@ import createClock from './zyklus.mjs';
 import { logger } from './logger.mjs';
 
 export class Cyclist {
-  constructor({ interval, onTrigger, onToggle, onError, getTime, latency = 0.1 }) {
+  constructor({ interval, onTrigger, onToggle, onError, getTime, latency = 0.1, setInterval, clearInterval }) {
     this.started = false;
     this.cps = 0.5;
     this.num_ticks_since_cps_change = 0;
@@ -57,6 +57,10 @@ export class Cyclist {
         }
       },
       interval, // duration of each cycle
+      0.1,
+      0.1,
+      setInterval,
+      clearInterval,
     );
   }
   now() {

packages/core/repl.mjs

@@ -17,6 +17,8 @@ export function repl({
   editPattern,
   onUpdateState,
   sync = false,
+  setInterval,
+  clearInterval,
 }) {
   const state = {
     schedulerError: undefined,
@@ -44,6 +46,8 @@ export function repl({
       updateState({ started });
       onToggle?.(started);
     },
+    setInterval,
+    clearInterval,
   };
 
   // NeoCyclist uses a shared worker to communicate between instances, which is not supported on mobile chrome

pnpm-lock.yaml

@@ -656,6 +656,9 @@ importers:
       tailwindcss:
         specifier: ^3.4.0
         version: 3.4.0
+      worker-timers:
+        specifier: ^7.1.4
+        version: 7.1.4
     devDependencies:
       '@vite-pwa/astro':
         specifier: ^0.2.0
@@ -2182,7 +2185,6 @@ packages:
     engines: {node: '>=6.9.0'}
     dependencies:
       regenerator-runtime: 0.14.1
-    dev: true
 
   /@babel/template@7.22.15:
     resolution: {integrity: sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==}
@@ -7577,6 +7579,14 @@ packages:
   /fast-levenshtein@2.0.6:
     resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
 
+  /fast-unique-numbers@8.0.13:
+    resolution: {integrity: sha512-7OnTFAVPefgw2eBJ1xj2PGGR9FwYzSUso9decayHgCDX4sJkHLdcsYTytTg+tYv+wKF3U8gJuSBz2jJpQV4u/g==}
+    engines: {node: '>=16.1.0'}
+    dependencies:
+      '@babel/runtime': 7.24.1
+      tslib: 2.6.2
+    dev: false
+
   /fast-xml-parser@4.3.3:
     resolution: {integrity: sha512-coV/D1MhrShMvU6D0I+VAK3umz6hUaxxhL0yp/9RjfiYUfAv14rDhGQL+PLForhMdr0wq3PiV07WtkkNjJjNHg==}
     hasBin: true
@@ -11998,7 +12008,6 @@ packages:
 
   /regenerator-runtime@0.14.1:
     resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}
-    dev: true
 
   /regenerator-transform@0.15.2:
     resolution: {integrity: sha512-hfMp2BoF0qOk3uc5V20ALGDS2ddjQaLrdl7xrGXvAIow7qeWRM2VA2HuCHkUKk9slq3VwEwLNK3DFBqDfPGYtg==}
@@ -13420,7 +13429,6 @@ packages:
   /tslib@2.6.2:
     resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==}
     requiresBuild: true
-    optional: true
 
   /tsutils@3.21.0(typescript@5.3.3):
     resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==}
@@ -14423,6 +14431,31 @@ packages:
       workbox-core: 7.0.0
     dev: true
 
+  /worker-timers-broker@6.1.4:
+    resolution: {integrity: sha512-y3D+Yfj37lrItEMIlcfCm/IRueYtYKgpLlTG2wgTIZ9PSw0n/K4kweilgk3gTC4ahbQNVGT90lU+Rf7W4M5bsw==}
+    dependencies:
+      '@babel/runtime': 7.24.1
+      fast-unique-numbers: 8.0.13
+      tslib: 2.6.2
+      worker-timers-worker: 7.0.67
+    dev: false
+
+  /worker-timers-worker@7.0.67:
+    resolution: {integrity: sha512-0ZP2+v2fyiiiGaCEdWxMRUk5YxGFwWdRGB12ZfQy13vw8/27Xd+MW3ua56qlcM30nzjpddXXzLuEpHhGW+Pz7w==}
+    dependencies:
+      '@babel/runtime': 7.24.1
+      tslib: 2.6.2
+    dev: false
+
+  /worker-timers@7.1.4:
+    resolution: {integrity: sha512-8PRtiPAyeYukrY+iOUL+0tq4Zn5qyCHrTqFTtHxcESfIxGyulxNwyzQkybrYBKhnMWmx0bku3wxRfE1hts5R6Q==}
+    dependencies:
+      '@babel/runtime': 7.24.1
+      tslib: 2.6.2
+      worker-timers-broker: 6.1.4
+      worker-timers-worker: 7.0.67
+    dev: false
+
   /wrap-ansi@7.0.0:
     resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
     engines: {node: '>=10'}

website/package.json

@@ -26,9 +26,9 @@
     "@nanostores/react": "^0.7.1",
     "@strudel/codemirror": "workspace:*",
     "@strudel/core": "workspace:*",
-    "@strudel/draw": "workspace:*",
     "@strudel/csound": "workspace:*",
     "@strudel/desktopbridge": "workspace:*",
+    "@strudel/draw": "workspace:*",
     "@strudel/hydra": "workspace:*",
     "@strudel/midi": "workspace:*",
     "@strudel/mini": "workspace:*",
@@ -60,7 +60,8 @@
     "rehype-slug": "^6.0.0",
     "rehype-urls": "^1.2.0",
     "remark-toc": "^9.0.0",
-    "tailwindcss": "^3.4.0"
+    "tailwindcss": "^3.4.0",
+    "worker-timers": "^7.1.4"
   },
   "devDependencies": {
     "@vite-pwa/astro": "^0.2.0",

website/src/repl/Repl.jsx

@@ -37,6 +37,7 @@ import { prebake } from './prebake.mjs';
 import { getRandomTune, initCode, loadModules, shareCode, ReplContext } from './util.mjs';
 import PlayCircleIcon from '@heroicons/react/20/solid/PlayCircleIcon';
 import './Repl.css';
+import { setInterval, clearInterval } from 'worker-timers';
 
 const { latestCode } = settingsMap.get();
 
@@ -75,6 +76,8 @@ export function Repl({ embedded = false }) {
       sync: false,
       defaultOutput: webaudioOutput,
       getTime: () => getAudioContext().currentTime,
+      setInterval,
+      clearInterval,
       transpiler,
       autodraw: false,
       root: containerRef.current,