patterns can now be async

repl/package-lock.json

@@ -6,6 +6,7 @@
     "": {
       "dependencies": {
         "@tonaljs/tonal": "^4.6.5",
+        "@tonejs/piano": "^0.2.1",
         "chord-voicings": "^0.0.1",
         "codemirror": "^5.65.1",
         "estraverse": "^5.3.0",
@@ -3023,6 +3024,23 @@
         "@tonaljs/time-signature": "^4.6.2"
       }
     },
+    "node_modules/@tonejs/piano": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/@tonejs/piano/-/piano-0.2.1.tgz",
+      "integrity": "sha512-JIwZ91RSFR7Rt16o7cA7O7G30wenFl0lY5yhTsuwZmn48MO9KV+X7kyXE98Bqvs/dCBVg9PoAJ1GKMabPOW4yQ==",
+      "dependencies": {
+        "tslib": "^1.11.1"
+      },
+      "peerDependencies": {
+        "tone": "^14.6.1",
+        "webmidi": "^2.5.1"
+      }
+    },
+    "node_modules/@tonejs/piano/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+    },
     "node_modules/@tootallnate/once": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz",
@@ -14482,6 +14500,21 @@
         "@tonaljs/time-signature": "^4.6.2"
       }
     },
+    "@tonejs/piano": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/@tonejs/piano/-/piano-0.2.1.tgz",
+      "integrity": "sha512-JIwZ91RSFR7Rt16o7cA7O7G30wenFl0lY5yhTsuwZmn48MO9KV+X7kyXE98Bqvs/dCBVg9PoAJ1GKMabPOW4yQ==",
+      "requires": {
+        "tslib": "^1.11.1"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+        }
+      }
+    },
     "@tootallnate/once": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz",

repl/package.json

@@ -1,6 +1,6 @@
 {
   "scripts": {
-    "start": "snowpack dev",
+    "start": "snowpack dev --polyfill-node",
     "build": "snowpack build && cp ./public/.nojekyll ../docs && npm run build-tutorial",
     "static": "npx serve ../docs",
     "test": "web-test-runner \"src/**/*.test.tsx\"",
@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@tonaljs/tonal": "^4.6.5",
+    "@tonejs/piano": "^0.2.1",
     "chord-voicings": "^0.0.1",
     "codemirror": "^5.65.1",
     "estraverse": "^5.3.0",

repl/src/App.tsx

@@ -51,11 +51,11 @@ function App() {
   // set active pattern on ctrl+enter
   useLayoutEffect(() => {
     // TODO: make sure this is only fired when editor has focus
-    const handleKeyPress = (e: any) => {
+    const handleKeyPress = async (e: any) => {
       if (e.ctrlKey || e.altKey) {
         switch (e.code) {
           case 'Enter':
-            activateCode();
+            await activateCode();
             !cycle.started && cycle.start();
             break;
           case 'Period':
@@ -88,11 +88,11 @@ function App() {
         </div>
         <div className="flex space-x-4">
           <button
-            onClick={() => {
+            onClick={async () => {
               const _code = getRandomTune();
               console.log('tune', _code); // uncomment this to debug when random code fails
               setCode(_code);
-              const parsed = evaluate(_code);
+              const parsed = await evaluate(_code);
               // Tone.Transport.cancel(Tone.Transport.seconds);
               setPattern(parsed.pattern);
             }}

repl/src/evaluate.ts

@@ -29,10 +29,10 @@ hackLiteral(String, ['pure', 'p'], bootstrapped.pure); // comment out this line
 // this will add everything to global scope, which is accessed by eval
 Object.assign(globalThis, bootstrapped, Tone, toneHelpers);
 
-export const evaluate: any = (code: string) => {
+export const evaluate: any = async (code: string) => {
   const shapeshifted = shapeshifter(code); // transform syntactically correct js code to semantically usable code
   // console.log('shapeshifted', shapeshifted);
-  let evaluated = eval(shapeshifted);
+  let evaluated = await eval(shapeshifted);
   if (typeof evaluated === 'function') {
     evaluated = evaluated();
   }

repl/src/useRepl.ts

@@ -21,15 +21,15 @@ function useRepl({ tune, defaultSynth, autolink = true, onEvent, onDraw }: any)
   const [pattern, setPattern] = useState<Pattern>();
   const dirty = code !== activeCode || error;
   const generateHash = () => encodeURIComponent(btoa(code));
-  const activateCode = (_code = code) => {
-    !cycle.started && cycle.start();
-    broadcast({ type: 'start', from: id });
+  const activateCode = async (_code = code) => {
     if (activeCode && !dirty) {
       setError(undefined);
       return;
     }
     try {
-      const parsed = evaluate(_code);
+      const parsed = await evaluate(_code);
+      !cycle.started && cycle.start();
+      broadcast({ type: 'start', from: id });
       setPattern(() => parsed.pattern);
       if (autolink) {
         window.location.hash = '#' + encodeURIComponent(btoa(code));