add eslint + fix lint errors

.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 }]
+  }
+}

package.json

@@ -5,7 +5,7 @@
   "description": "Port of tidalcycles to javascript",
   "scripts": {
     "pretest": "cd tutorial && npm run jsdoc-json",
-    "test": "vitest run --version",
+    "test": "vitest run --version && npm run lint",
     "test-ui": "vitest --ui",
     "test-coverage": "vitest --coverage",
     "bootstrap": "lerna bootstrap",
@@ -17,7 +17,8 @@
     "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

@@ -787,6 +787,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/draw.mjs

@@ -4,7 +4,7 @@ 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, getTime } from './index.mjs';
+import { Pattern, getTime, State, TimeSpan } from './index.mjs';
 
 export const getDrawContext = (id = 'test-canvas') => {
   let canvas = document.querySelector('#' + id);

packages/core/pattern.mjs

@@ -15,6 +15,7 @@ import drawLine from './drawLine.mjs';
 import { logger } from './logger.mjs';
 
 let stringParser;
+
 // parser is expected to turn a string into a pattern
 // if set, the reify function will parse all strings with it
 // intended to use with mini to automatically interpret all strings as mini notation
@@ -32,10 +33,9 @@ export class Pattern {
     this.query = query;
   }
 
-
   //////////////////////////////////////////////////////////////////////
   // Haskell-style functor, applicative and monadic operations
-  
+
   /**
    * Returns a new pattern, with the function applied to the value of
    * each hap. It has the alias {@link Pattern#fmap}.
@@ -164,7 +164,6 @@ export class Pattern {
     return new Pattern(query);
   }
 
-
   bindWhole(choose_whole, func) {
     const pat_val = this;
     const query = function (state) {
@@ -205,7 +204,7 @@ export class Pattern {
   }
 
   outerBind(func) {
-    return this.bindWhole((a, _) => a, func);
+    return this.bindWhole((a) => a, func);
   }
 
   outerJoin() {
@@ -313,7 +312,7 @@ export class Pattern {
 
   //////////////////////////////////////////////////////////////////////
   // Utility methods mainly for internal use
-  
+
   /**
    * Query haps inside the given time span.
    *
@@ -534,7 +533,7 @@ export class Pattern {
     // removes continuous haps that don't have a 'whole' timespan
     return this.filterHaps((hap) => hap.whole);
   }
-  
+
   /**
    * Queries the pattern for the first cycle, returning Haps. Mainly of use when
    * debugging a pattern.
@@ -940,8 +939,8 @@ export class Pattern {
     //binary_pat = sequence(binary_pat)
     const true_pat = binary_pat.filterValues(id);
     const false_pat = binary_pat.filterValues((val) => !val);
-    const with_pat = true_pat.fmap((_) => (y) => y).appRight(func(this));
+    const with_pat = true_pat.fmap(() => (y) => y).appRight(func(this));
-    const without_pat = false_pat.fmap((_) => (y) => y).appRight(this);
+    const without_pat = false_pat.fmap(() => (y) => y).appRight(this);
     return stack(with_pat, without_pat);
   }
 
@@ -1007,7 +1006,7 @@ export class Pattern {
   every(n, func) {
     return this.firstOf(n, func);
   }
-  
+
   /**
    * Returns a new pattern where every other cycle is played once, twice as
    * fast, and offset in time by one quarter of a cycle. Creates a kind of
@@ -1051,7 +1050,6 @@ export class Pattern {
     return this.every(2, rev);
   }
 
-
   juxBy(by, func) {
     by /= 2;
     const elem_or = function (dict, key, dflt) {
@@ -1184,8 +1182,12 @@ export class Pattern {
    * note("0 1 2 3".scale('A minor')).iter(4)
    */
   _iter(times, back = false) {
-    times = Fraction(times)
+    times = Fraction(times);
-    return slowcat(...listRange(0, times.sub(1)).map((i) => (back ? this.late(Fraction(i).div(times)) : this.early(Fraction(i).div(times)))));
+    return slowcat(
+      ...listRange(0, times.sub(1)).map((i) =>
+        back ? this.late(Fraction(i).div(times)) : this.early(Fraction(i).div(times)),
+      ),
+    );
   }
 
   /**
@@ -1231,10 +1233,10 @@ export class Pattern {
     on = Boolean(parseInt(on));
     return on ? silence : this;
   }
-  
+
   //////////////////////////////////////////////////////////////////////
   // Control-related methods, which manipulate patterns of objects
-  
+
   /**
    * Cuts each sample into the given number of parts, allowing you to explore a technique known as 'granular synthesis'.
    * It turns a pattern of samples into a pattern of parts of samples.
@@ -1282,17 +1284,11 @@ export class Pattern {
 
   //////////////////////////////////////////////////////////////////////
   // Context methods - ones that deal with metadata
-  
+
   _color(color) {
     return this.withContext((context) => ({ ...context, color }));
   }
 
-  log() {
-    return this.withHap((e) => {
-      return e.setContext({ ...e.context, logs: (e.context?.logs || []).concat([e.show()]) });
-    });
-  }
-
   /**
    *
    * Sets the velocity from 0 to 1. Is multiplied together with gain.
@@ -1363,7 +1359,6 @@ export class Pattern {
   _legato(value) {
     return this.withHapSpan((span) => new TimeSpan(span.begin, span.begin.add(span.end.sub(span.begin).mul(value))));
   }
-
 }
 
 // TODO - adopt value.mjs fully..
@@ -1388,7 +1383,7 @@ function _composeOp(a, b, func) {
   // pattern composers
   const composers = {
     set: [(a, b) => b],
-    keep: [(a, b) => a],
+    keep: [(a) => a],
     keepif: [(a, b) => (b ? a : undefined)],
 
     // numerical functions
@@ -1488,21 +1483,21 @@ function _composeOp(a, b, func) {
       }
       if (how === 'In') {
         // set 'in' to default, but with magic properties to pick a different 'how'
-	Object.defineProperty(Pattern.prototype, what, {
+        Object.defineProperty(Pattern.prototype, what, {
-	  // a getter that returns a function, so 'pat' can be
+          // a getter that returns a function, so 'pat' can be
-	  // accessed by closures that are methods of that function..
+          // accessed by closures that are methods of that function..
-	  get: function() {
+          get: function () {
-	    const pat = this;
+            const pat = this;
-	    // wrap the 'in' function as default behaviour
+            // wrap the 'in' function as default behaviour
-            const wrapper = (...other) => pat[what + "In"](...other);
+            const wrapper = (...other) => pat[what + 'In'](...other);
-	    // add methods to that function to pick alternative behaviours
+            // add methods to that function to pick alternative behaviours
-	    for (const wraphow of hows) {
+            for (const wraphow of hows) {
               wrapper[wraphow.toLowerCase()] = (...other) => pat[what + wraphow](...other);
-	    }
+            }
-	    
+
-	    return wrapper;
+            return wrapper;
-          }
+          },
-	});
+        });
       } else {
         // default what to 'set', e.g. squeeze = setSqueeze
         if (what === 'set') {
@@ -1580,7 +1575,7 @@ Pattern.prototype.factories = {
 // Elemental patterns
 
 // Nothing
-export const silence = new Pattern((_) => []);
+export const silence = new Pattern(() => []);
 
 /** A discrete value that repeats once per cycle.
  *
@@ -1598,13 +1593,16 @@ export function pure(value) {
 export function isPattern(thing) {
   // thing?.constructor?.name !== 'Pattern' // <- this will fail when code is mangled
   const is = thing instanceof Pattern || thing?._Pattern;
-  if (!thing instanceof Pattern) {
+  // TODO: find out how to check wrong core dependency. below will never work !thing === 'undefined'
+  // wrapping it in (..) will result other checks to log that warning (e.g. isPattern('kalimba'))
+  /* if (!thing instanceof Pattern) {
     console.warn(
       `Found Pattern that fails "instanceof Pattern" check.
       This may happen if you are using multiple versions of @strudel.cycles/core. 
       Please check by running "npm ls @strudel.cycles/core".`,
     );
-  }
+    console.log(thing);
+  } */
   return is;
 }
 
@@ -1758,7 +1756,7 @@ export function polymeterSteps(steps, ...args) {
   const pats = [];
   for (const seq of seqs) {
     if (seq[1] == 0) {
-      next;
+      continue;
     }
     if (steps == seq[1]) {
       pats.push(seq[0]);
@@ -1916,10 +1914,9 @@ Pattern.prototype.bootstrap = function () {
   this.patternified.forEach((prop) => {
     // the following will patternify all functions in Pattern.prototype.patternified
     Pattern.prototype[prop] = function (...args) {
-      return this.patternify(x => x.innerJoin(), Pattern.prototype['_' + prop])(...args);
+      return this.patternify((x) => x.innerJoin(), Pattern.prototype['_' + prop])(...args);
     };
-   
+
-    
     /*
     const func = Pattern.prototype['_' + prop];
     Pattern.prototype[prop] = function (...args) {
@@ -1945,7 +1942,7 @@ Pattern.prototype.bootstrap = function () {
       }
     });
     */
-    
+
     // with the following, you can do, e.g. `stack(c3).fast.slowcat(1, 2, 4, 8)` instead of `stack(c3).fast(slowcat(1, 2, 4, 8))`
     // TODO: find a way to implement below outside of constructor (code only worked there)
     /* Object.assign(
@@ -1978,4 +1975,4 @@ Pattern.prototype.define = (name, func, options = {}) => {
 
 // Pattern.prototype.define('early', (a, pat) => pat.early(a), { patternified: true, composable: true });
 Pattern.prototype.define('hush', (pat) => pat.hush(), { patternified: false, composable: true });
-Pattern.prototype.define('bypass', (pat) => pat.bypass(on), { patternified: true, composable: true });
+Pattern.prototype.define('bypass', (pat) => pat.bypass(1), { patternified: true, composable: true });

packages/core/pianoroll.mjs

@@ -4,7 +4,7 @@ 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 './index.mjs';
+import { Pattern, toMidi, getDrawContext } from './index.mjs';
 
 const scale = (normalized, min, max) => normalized * (max - min) + min;
 const getValue = (e) => {

packages/core/speak.mjs

@@ -4,7 +4,7 @@ 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, patternify2, reify } from './index.mjs';
 
 let synth;
 try {

packages/mini/mini.mjs

@@ -23,9 +23,10 @@ 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':
@@ -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;
@@ -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/react/dist/index.es.js

@@ -74,11 +74,11 @@ const B = $.define(), se = G.define({
       for (let o of t.effects)
         if (o.is(z)) {
           const a = o.value.map(
-            (s) => (s.context.locations || []).map(({ start: f, end: d }) => {
+            (s) => (s.context.locations || []).map(({ start: u, end: d }) => {
-              const u = s.context.color || "#FFCA28";
+              const f = s.context.color || "#FFCA28";
-              let c = t.newDoc.line(f.line).from + f.column, i = t.newDoc.line(d.line).from + d.column;
+              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 ${u};` } }).range(c, i);
+              return c > m || i > m ? void 0 : E.mark({ attributes: { style: `outline: 1.5px solid ${f};` } }).range(c, i);
             })
           ).flat().filter(Boolean) || [];
           e = E.set(a, !0);
@@ -90,13 +90,13 @@ const B = $.define(), se = G.define({
   },
   provide: (e) => U.decorations.from(e)
 }), le = [Y(), ae, ie, se];
-function de({ value: e, onChange: t, onViewChanged: o, onSelectionChange: a, options: s, editorDidMount: f }) {
+function de({ value: e, onChange: t, onViewChanged: o, onSelectionChange: a, options: s, editorDidMount: u }) {
   const d = _(
     (i) => {
       t?.(i);
     },
     [t]
-  ), u = _(
+  ), f = _(
     (i) => {
       o?.(i);
     },
@@ -110,7 +110,7 @@ function de({ value: e, onChange: t, onViewChanged: o, onSelectionChange: a, opt
   return /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(X, {
     value: e,
     onChange: d,
-    onCreateEditor: u,
+    onCreateEditor: f,
     onUpdate: c,
     extensions: le
   }));
@@ -119,21 +119,21 @@ function K(...e) {
   return e.filter(Boolean).join(" ");
 }
 function ue({ view: e, pattern: t, active: o, getTime: a }) {
-  const s = H([]), f = H();
+  const s = H([]), u = H();
   L(() => {
     if (e)
       if (t && o) {
-        let u = function() {
+        let d = requestAnimationFrame(function f() {
           try {
-            const c = a(), m = [Math.max(f.current || c, c - 1 / 10, 0), c + 1 / 60];
+            const c = a(), m = [Math.max(u.current || c, c - 1 / 10, 0), c + 1 / 60];
-            f.current = m[1], s.current = s.current.filter((g) => g.whole.end > c);
+            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: z.of([]) });
           }
-          d = requestAnimationFrame(u);
+          d = requestAnimationFrame(f);
-        }, d = requestAnimationFrame(u);
+        });
         return () => {
           cancelAnimationFrame(d);
         };
@@ -183,9 +183,9 @@ function we({
   getTime: o,
   evalOnMount: a = !1,
   initialCode: s = "",
-  autolink: f = !1,
+  autolink: u = !1,
   beforeEval: d,
-  afterEval: u,
+  afterEval: f,
   onEvalError: c,
   onToggle: i
 }) {
@@ -203,7 +203,7 @@ function we({
         y(l), d?.();
       },
       afterEval: ({ pattern: l, code: P }) => {
-        S(P), D(l), N(), g(), f && (window.location.hash = "#" + encodeURIComponent(btoa(P))), u?.();
+        S(P), D(l), N(), g(), u && (window.location.hash = "#" + encodeURIComponent(btoa(P))), f?.();
       },
       onToggle: (l) => {
         x(l), i?.(l);
@@ -250,9 +250,9 @@ const ke = () => re().currentTime;
 function Se({ tune: e, hideOutsideView: t = !1, init: o, enableKeyboard: a }) {
   const {
     code: s,
-    setCode: f,
+    setCode: u,
     evaluate: d,
-    activateCode: u,
+    activateCode: f,
     error: c,
     isDirty: i,
     activeCode: m,
@@ -276,7 +276,7 @@ function Se({ tune: e, hideOutsideView: t = !1, init: o, enableKeyboard: a }) {
   }), j(() => {
     if (a) {
       const x = async (b) => {
-        (b.ctrlKey || b.altKey) && (b.code === "Enter" ? (b.preventDefault(), ce(y), await u()) : b.code === "Period" && (p(), b.preventDefault()));
+        (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);
     }
@@ -294,7 +294,7 @@ function Se({ tune: e, hideOutsideView: t = !1, init: o, enableKeyboard: a }) {
     type: g ? "pause" : "play"
   })), /* @__PURE__ */ n.createElement("button", {
     className: K(i ? v.button : v.buttonDisabled),
-    onClick: () => u()
+    onClick: () => f()
   }, /* @__PURE__ */ n.createElement(O, {
     type: "refresh"
   }))), c && /* @__PURE__ */ n.createElement("div", {
@@ -303,7 +303,7 @@ function Se({ tune: e, hideOutsideView: t = !1, init: o, enableKeyboard: a }) {
     className: v.body
   }, F && /* @__PURE__ */ n.createElement(de, {
     value: s,
-    onChange: f,
+    onChange: u,
     onViewChanged: M
   })));
 }

packages/react/src/hooks/useHighlighting.mjs

@@ -7,9 +7,7 @@ function useHighlighting({ view, pattern, active, getTime }) {
   useEffect(() => {
     if (view) {
       if (pattern && active) {
-        let frame = requestAnimationFrame(updateHighlights);
+        let frame = requestAnimationFrame(function updateHighlights() {
-
-        function updateHighlights() {
           try {
             const audioTime = getTime();
             // force min framerate of 10 fps => fixes crash on tab refocus, where lastEnd could be far away
@@ -25,8 +23,7 @@ function useHighlighting({ view, pattern, active, getTime }) {
             view.dispatch({ effects: setHighlights.of([]) });
           }
           frame = requestAnimationFrame(updateHighlights);
-        }
+        });
-
         return () => {
           cancelAnimationFrame(frame);
         };

packages/serial/serial.mjs

@@ -20,6 +20,7 @@ export async function getWriter(br = 38400) {
   if ('serial' in navigator) {
     const port = await navigator.serial.requestPort();
     await port.open({ baudRate: br });
+    // eslint-disable-next-line no-undef
     const textEncoder = new TextEncoderStream();
     const writableStreamClosed = textEncoder.readable.pipeTo(port.writable);
     const writer = textEncoder.writable.getWriter();

packages/soundfonts/fontloader.mjs

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

packages/soundfonts/sfumato.mjs

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

packages/tonal/voicings.mjs

@@ -59,7 +59,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/webaudio/sampler.mjs

@@ -1,4 +1,5 @@
-import { logger } from '@strudel.cycles/core';
+import { logger, toMidi } from '@strudel.cycles/core';
+import { getAudioContext } from './index.mjs';
 
 const bufferCache = {}; // string: Promise<ArrayBuffer>
 const loadCache = {}; // string: Promise<ArrayBuffer>

tutorial/render.js

@@ -18,7 +18,7 @@ function renderAsMDX(name) {
   }
   return `### ${item.longname}
 
-${item.description.replaceAll(/\{\@link ([a-zA-Z]+)?\#?([a-zA-Z]*)\}/g, (_, a, b) => {
+${item.description.replaceAll(/\{@link ([a-zA-Z]+)?#?([a-zA-Z]*)\}/g, (_, a, b) => {
   // console.log(_, 'a', a, 'b', b);
   return `<a href="#${a}${b ? `-${b}` : ''}">${a}${b ? `#${b}` : ''}</a>`;
 })}