fix more deps

package.json

@@ -1,9 +1,10 @@
 {
   "name": "@strudel/monorepo",
   "version": "0.0.1",
+  "private": true,
   "description": "Port of tidalcycles to javascript",
   "main": "strudel.mjs",
-  "scripts":{
+  "scripts": {
     "test": "npm run test --workspaces --if-present"
   },
   "workspaces": [

packages/hooks/README.md

@@ -0,0 +1,5 @@
+# @strudel/hooks
+
+## Dev Notes
+
+Due to https://github.com/npm/cli/issues/2924 you should install node_modules with `npm i --legacy-peer-deps` in this directory.

packages/hooks/package.json

@@ -20,8 +20,11 @@
     "url": "https://github.com/tidalcycles/strudel/issues"
   },
   "homepage": "https://github.com/tidalcycles/strudel#readme",
+  "peerDependencies": {
+    "react": "^17.0.2"
+  },
   "dependencies": {
     "tone": "^14.7.77",
-    "webmidi": "^3.0.15"
+		"webmidi": "^2.5.1"
   }
 }

packages/midi/midi.mjs

@@ -3,7 +3,9 @@ import _WebMidi from 'webmidi';
 import { Pattern as _Pattern } from '@strudel/core/strudel.mjs';
 import * as Tone from 'tone';
 
-const WebMidi = _WebMidi;
+// if you use WebMidi from outside of this package, make sure to import that instance:
+export const WebMidi = _WebMidi;
+
 const Pattern = _Pattern;
 
 export function enableWebMidi() {
@@ -63,7 +65,7 @@ Pattern.prototype.midi = function (output, channel = 1) {
         );
       }
       // console.log('midi', value, output);
-      const timingOffset = WebMidi.time - Tone.context.currentTime * 1000;
+      const timingOffset = WebMidi.time - Tone.getContext().currentTime * 1000;
       time = time * 1000 + timingOffset;
       // const inMs = '+' + (time - Tone.context.currentTime) * 1000;
       // await enableWebMidi()

packages/midi/package-lock.json

@@ -0,0 +1,130 @@
+{
+  "name": "@strudel/midi",
+  "version": "0.0.1",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "@strudel/midi",
+      "version": "0.0.1",
+      "license": "GPL-3.0-or-later",
+      "dependencies": {
+        "tone": "^14.7.77",
+        "webmidi": "^2.5.2"
+      }
+    },
+    "node_modules/@babel/runtime": {
+      "version": "7.17.8",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.8.tgz",
+      "integrity": "sha512-dQpEpK0O9o6lj6oPu0gRDbbnk+4LeHlNcBpspf6Olzt3GIX4P1lWF1gS+pHLDFlaJvbR6q7jCfQ08zA4QJBnmA==",
+      "dependencies": {
+        "regenerator-runtime": "^0.13.4"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/automation-events": {
+      "version": "4.0.14",
+      "resolved": "https://registry.npmjs.org/automation-events/-/automation-events-4.0.14.tgz",
+      "integrity": "sha512-CB2Me0yW8sz7gSGwMiSfgfs1Oqlgs53k+eVESN6axvRyMAD3zlSp2nqndD2TQAtW3yOtSEJWNGsw0r48+f1wtw==",
+      "dependencies": {
+        "@babel/runtime": "^7.17.2",
+        "tslib": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=12.20.1"
+      }
+    },
+    "node_modules/regenerator-runtime": {
+      "version": "0.13.9",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
+      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
+    },
+    "node_modules/standardized-audio-context": {
+      "version": "25.3.21",
+      "resolved": "https://registry.npmjs.org/standardized-audio-context/-/standardized-audio-context-25.3.21.tgz",
+      "integrity": "sha512-CZEnayJJjNefeU+z1QGDhaid1LAAYxWYa2ipNk75ropwec9rq6fmclyhXb1wGtDsZ402irX3HLt1U/PwP9+1fA==",
+      "dependencies": {
+        "@babel/runtime": "^7.17.2",
+        "automation-events": "^4.0.14",
+        "tslib": "^2.3.1"
+      }
+    },
+    "node_modules/tone": {
+      "version": "14.7.77",
+      "resolved": "https://registry.npmjs.org/tone/-/tone-14.7.77.tgz",
+      "integrity": "sha512-tCfK73IkLHyzoKUvGq47gyDyxiKLFvKiVCOobynGgBB9Dl0NkxTM2p+eRJXyCYrjJwy9Y0XCMqD3uOYsYt2Fdg==",
+      "dependencies": {
+        "standardized-audio-context": "^25.1.8",
+        "tslib": "^2.0.1"
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
+      "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
+    },
+    "node_modules/webmidi": {
+      "version": "2.5.3",
+      "resolved": "https://registry.npmjs.org/webmidi/-/webmidi-2.5.3.tgz",
+      "integrity": "sha512-PyMGvKcDGpvbQUfnmBORQJciyG3VAZ4aHlGy1iRZ3uEs4kG4HCvI7KRthUpM1vuHDPL98lidRIUaoRomkJtWtg==",
+      "engines": {
+        "node": ">0.6.x"
+      }
+    }
+  },
+  "dependencies": {
+    "@babel/runtime": {
+      "version": "7.17.8",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.8.tgz",
+      "integrity": "sha512-dQpEpK0O9o6lj6oPu0gRDbbnk+4LeHlNcBpspf6Olzt3GIX4P1lWF1gS+pHLDFlaJvbR6q7jCfQ08zA4QJBnmA==",
+      "requires": {
+        "regenerator-runtime": "^0.13.4"
+      }
+    },
+    "automation-events": {
+      "version": "4.0.14",
+      "resolved": "https://registry.npmjs.org/automation-events/-/automation-events-4.0.14.tgz",
+      "integrity": "sha512-CB2Me0yW8sz7gSGwMiSfgfs1Oqlgs53k+eVESN6axvRyMAD3zlSp2nqndD2TQAtW3yOtSEJWNGsw0r48+f1wtw==",
+      "requires": {
+        "@babel/runtime": "^7.17.2",
+        "tslib": "^2.3.1"
+      }
+    },
+    "regenerator-runtime": {
+      "version": "0.13.9",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
+      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
+    },
+    "standardized-audio-context": {
+      "version": "25.3.21",
+      "resolved": "https://registry.npmjs.org/standardized-audio-context/-/standardized-audio-context-25.3.21.tgz",
+      "integrity": "sha512-CZEnayJJjNefeU+z1QGDhaid1LAAYxWYa2ipNk75ropwec9rq6fmclyhXb1wGtDsZ402irX3HLt1U/PwP9+1fA==",
+      "requires": {
+        "@babel/runtime": "^7.17.2",
+        "automation-events": "^4.0.14",
+        "tslib": "^2.3.1"
+      }
+    },
+    "tone": {
+      "version": "14.7.77",
+      "resolved": "https://registry.npmjs.org/tone/-/tone-14.7.77.tgz",
+      "integrity": "sha512-tCfK73IkLHyzoKUvGq47gyDyxiKLFvKiVCOobynGgBB9Dl0NkxTM2p+eRJXyCYrjJwy9Y0XCMqD3uOYsYt2Fdg==",
+      "requires": {
+        "standardized-audio-context": "^25.1.8",
+        "tslib": "^2.0.1"
+      }
+    },
+    "tslib": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
+      "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
+    },
+    "webmidi": {
+      "version": "2.5.3",
+      "resolved": "https://registry.npmjs.org/webmidi/-/webmidi-2.5.3.tgz",
+      "integrity": "sha512-PyMGvKcDGpvbQUfnmBORQJciyG3VAZ4aHlGy1iRZ3uEs4kG4HCvI7KRthUpM1vuHDPL98lidRIUaoRomkJtWtg=="
+    }
+  }
+}

packages/midi/package.json

@@ -19,5 +19,9 @@
   "bugs": {
     "url": "https://github.com/tidalcycles/strudel/issues"
   },
-  "homepage": "https://github.com/tidalcycles/strudel#readme"
+  "homepage": "https://github.com/tidalcycles/strudel#readme",
+  "dependencies": {
+    "tone": "^14.7.77",
+    "webmidi": "^2.5.2"
+  }
 }

packages/tone/README.md

@@ -1 +1,7 @@
-TODO: test
+# @strudel/tone
+
+TBD
+
+## Dev Notes
+
+`@tonejs/piano` has peer dependency on `webmidi@^2.5.1`! A newer version of webmidi will break.

repl/.gitignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.parcel-cache

repl/package.json

@@ -13,13 +13,15 @@
     "react-scripts": "5.0.0",
     "tone": "^14.7.77",
     "web-vitals": "^2.1.4",
-    "webmidi": "^3.0.15"
+		"webmidi": "^2.5.1"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "tutorial": "parcel src/tutorial/index.html --no-cache",
+    "build-tutorial": "parcel build src/tutorial/index.html --dist-dir ../docs/tutorial --public-url /tutorial --no-optimize --no-scope-hoist --no-cache"
   },
   "eslintConfig": {
     "extends": [
@@ -42,6 +44,8 @@
   "devDependencies": {
     "autoprefixer": "^10.4.4",
     "postcss": "^8.4.12",
-    "tailwindcss": "^3.0.23"
+    "tailwindcss": "^3.0.23",
+    "parcel": "^2.3.1",
+    "@parcel/transformer-mdx": "^2.3.1"
   }
 }

repl/src/tutorial/MiniRepl.jsx

@@ -1,8 +1,8 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import * as Tone from 'tone';
-import useRepl from '../useRepl';
+import useRepl from '@strudel/hooks/useRepl.mjs';
-import CodeMirror, { markEvent } from '../repl-react/CodeMirror';
+import CodeMirror, { markEvent } from '../CodeMirror';
-import cx from '../repl-react/cx';
+import cx from '../cx';
 
 const defaultSynth = new Tone.PolySynth().chain(new Tone.Gain(0.5), Tone.Destination).set({
   oscillator: { type: 'triangle' },
@@ -14,7 +14,7 @@ const defaultSynth = new Tone.PolySynth().chain(new Tone.Gain(0.5), Tone.Destina
 // "balanced" | "interactive" | "playback";
 // Tone.setContext(new Tone.Context({ latencyHint: 'playback', lookAhead: 1 }));
 function MiniRepl({ tune, maxHeight = 500 }) {
-  const [editor, setEditor] = useState<any>();
+  const [editor, setEditor] = useState();
   const { code, setCode, activateCode, activeCode, setPattern, error, cycle, dirty, log, togglePlay, hash } = useRepl({
     tune,
     defaultSynth,
@@ -30,7 +30,7 @@ function MiniRepl({ tune, maxHeight = 500 }) {
           <button
             className={cx(
               'w-16 flex items-center justify-center p-1 bg-slate-700 border-r border-slate-500  text-white hover:bg-slate-600',
-              cycle.started ? 'animate-pulse' : ''
+              cycle.started ? 'animate-pulse' : '',
             )}
             onClick={() => togglePlay()}
           >
@@ -57,7 +57,7 @@ function MiniRepl({ tune, maxHeight = 500 }) {
               'w-16 flex items-center justify-center p-1 border-slate-500  hover:bg-slate-600',
               dirty
                 ? 'bg-slate-700 border-r border-slate-500 text-white'
-                : 'bg-slate-600 text-slate-400 cursor-not-allowed'
+                : 'bg-slate-600 text-slate-400 cursor-not-allowed',
             )}
             onClick={() => activateCode()}
           >
@@ -82,7 +82,7 @@ function MiniRepl({ tune, maxHeight = 500 }) {
             theme: 'material',
             lineNumbers: true,
           }}
-          onChange={(_: any, __: any, value: any) => setCode(value)}
+          onChange={(_, __, value) => setCode(value)}
         />
       </div>
       {/* <div className="bg-slate-700 border-t border-slate-500 content-right pr-2 text-right">

repl/src/useWebMidi.js

@@ -1,6 +1,5 @@
 import { useEffect, useState } from 'react';
-import { WebMidi } from 'webmidi';
+import { enableWebMidi, WebMidi } from '@strudel/midi'
-import { enableWebMidi } from '@strudel/midi'
 
 export function useWebMidi(props) {
   const { ready, connected, disconnected } = props;
@@ -24,6 +23,7 @@ export function useWebMidi(props) {
       })
       .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;