Merge pull request #9 from caged/update-tonal

Update tonal to v5

Author: caged

package-lock.json

@@ -6,12 +6,12 @@
   "type": "module",
   "dependencies": {
     "@tailwindcss/forms": "^0.5.10",
-    "@tonaljs/tonal": "^4.6.5",
     "d3": "^7.3.0",
     "d3-scale-chromatic": "^3.0.0",
     "howler": "^2.2.1",
     "svelte": "^5.45.8",
-    "svelte-select": "^5.8.3"
+    "svelte-select": "^5.8.3",
+    "tonal": "^6.4.2"
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^5.0.4",

package.json

@@ -1,5 +1,5 @@
 <script>
-  import { Chord, Note } from "@tonaljs/tonal";
+  import { Chord, Note } from "tonal";
   import { scale as getScale, tnps, pentatonic } from "../frets/index";
   import KeySelector from "./KeySelector.svelte";
   import ScaleSelector from "./ScaleSelector.svelte";
@@ -17,8 +17,8 @@
   let position;
   let chordName;
 
-  function handleChordChange(event) {
-    chordName = event.detail;
+  function handleChordChange(chord) {
+    chordName = chord;
   }
 
   $: scaleName = `${$tonic} ${scaleLabel}`;
@@ -93,7 +93,7 @@
         </div>
         <div class="p-5 hidden lg:block w-2/3">
           <h3 class="font-bold">Chords</h3>
-          <ScaleChords on:chordchange={handleChordChange} {scale} />
+          <ScaleChords onchordchange={handleChordChange} {scale} />
         </div>
       </div>
     {/if}

src/app/App.svelte

@@ -3,12 +3,13 @@
   import { delay } from "./utils";
   import Volume from "./Volume.svelte";
   import { bpm } from "./store";
+  import metronomeUrl from "../metronome.mp3?url";
 
   let volume = 0.5;
   let playing = false;
 
   var sound = new Howl({
-    src: "metronome.mp3",
+    src: metronomeUrl,
     sprite: {
       a: [0, 500],
       b: [500, 500],

src/app/Metronome.svelte

@@ -1,7 +1,8 @@
 <script>
-  import { Chord, Range } from "@tonaljs/tonal";
+  import { Chord, Range } from "tonal";
   import { Howl, Howler } from "howler";
   import { delay as pauseFor } from "./utils";
+  import guitarNotesUrl from "../guitar-notes.mp3?url";
 
   export let notes = "";
   export let delay = 20;
@@ -17,7 +18,7 @@
   const allNotes = { ...sharps, ...flats };
 
   var sound = new Howl({
-    src: "guitar-notes.mp3",
+    src: guitarNotesUrl,
     sprite: allNotes,
   });
   sound.volume(0.2);

src/app/NotePlayer.svelte

@@ -1,29 +1,29 @@
 <script>
-  import { Scale, Chord, Note, Midi } from "@tonaljs/tonal";
-  import { createEventDispatcher, getContext } from "svelte";
+  import { Scale, Chord, Note, Midi } from "tonal";
+  import { getContext } from "svelte";
   import { tonic, tuning } from "./store";
 
-  export let scale;
+  let { scale, onchordchange } = $props();
 
   const lowestNote = Note.get($tuning[0]);
-  const dispatch = createEventDispatcher();
   const { player } = getContext("app");
 
   function handleMouseUp(event) {
     const chordName = event.target.dataset.chord;
     const rootNote = Note.get(
-      `${$tonic}${$tonic === "C" ? lowestNote.oct + 1 : lowestNote.oct}`
+      `${$tonic}${$tonic === "C" ? lowestNote.oct + 1 : lowestNote.oct}`,
     );
     const startNote =
       rootNote.height < lowestNote.height
         ? Note.get(`${rootNote.name}${rootNote.oct + 1}`)
         : rootNote;
 
     const chord = Chord.getChord(chordName, startNote);
-    const midi = chord.notes.map(Midi.toMidi);
+    const notesWithOctaves = Chord.notes(chordName, startNote);
+    const midi = notesWithOctaves.map(Midi.toMidi);
     player.play(midi, 15);
 
-    dispatch("chordchange", chord);
+    onchordchange?.(chord);
   }
 </script>
 

src/app/ScaleChords.svelte

@@ -1,6 +1,6 @@
 <script>
   import Select from "svelte-select";
-  import { ScaleType } from "@tonaljs/tonal";
+  import { ScaleType } from "tonal";
 
   export let value;
 

src/app/ScaleSelector.svelte

@@ -1,7 +1,7 @@
 import { Howl } from "howler";
-import { Range } from "@tonaljs/tonal";
-import { delay as pauseFor } from "./utils";
+import { Range } from "tonal";
 import noteCrescendoUrl from "../note-crescendo.mp3?url";
+import { delay as pauseFor } from "./utils";
 
 export default function player() {
   function player() {}

src/app/player.js

@@ -1,4 +1,4 @@
-import { Note, Range } from "@tonaljs/tonal";
+import { Note, Range } from "tonal";
 export { default as tnps } from "./system/tnps";
 export { default as pentatonic } from "./system/pentatonic";
 export { default as scale } from "./scale";

src/frets/index.js

@@ -1,4 +1,4 @@
-import { Note, Range } from "@tonaljs/tonal";
+import { Note, Range } from "tonal";
 import { frets, tnps, pentatonic, scale } from "./";
 import { assert } from "chai";