Improve backwards compatibility with 3.0.9 (e.g., in flow.html).

Add new methods to help with migrating VexTab to VexFlow 4.0.0.
Improve the build process.

Gruntfile.js

@@ -151,6 +151,14 @@ module.exports = (grunt) => {
   const debugAllFontsWithTests = getConfig(VEX_DEBUG_TESTS, MODULE_ENTRIES.VEX_DEBUG_TESTS, false, DEVELOPMENT_MODE);
   const debugNoFonts = getConfig(VEX_CORE, MODULE_ENTRIES.VEX_CORE, true, DEVELOPMENT_MODE);
 
+  const watch = {
+    watch: true,
+    watchOptions: {
+      aggregateTimeout: 800 /* ms */,
+      ignored: ['**/node_modules'],
+    },
+  };
+
   grunt.initConfig({
     pkg: PACKAGE_JSON,
     webpack: {
@@ -159,21 +167,30 @@ module.exports = (grunt) => {
       buildProdBravuraOnly: prodBravuraOnly,
       buildProdGonvilleOnly: prodGonvilleOnly,
       buildProdPetalumaOnly: prodPetalumaOnly,
+
       buildDebug: debugAllFonts,
       buildDebugPlusTests: debugAllFontsWithTests,
       buildDebugNoFonts: debugNoFonts,
-      watchDebug: { ...debugAllFonts, watch: true, keepalive: true },
-      watchDebugPlusTests: { ...debugAllFontsWithTests, watch: true, keepalive: true },
-      watchDebugNoFonts: { ...debugNoFonts, watch: true, keepalive: true },
+
+      watchProdAllFonts: { ...prodAllFonts, ...watch },
+      watchProdNoFonts: { ...prodNoFonts, ...watch },
+      watchProdBravuraOnly: { ...prodBravuraOnly, ...watch },
+      watchProdGonvilleOnly: { ...prodGonvilleOnly, ...watch },
+      watchProdPetalumaOnly: { ...prodPetalumaOnly, ...watch },
+
+      watchDebug: { ...debugAllFonts, ...watch },
+      watchDebugPlusTests: { ...debugAllFontsWithTests, ...watch },
+      watchDebugNoFonts: { ...debugNoFonts, ...watch },
     },
     concurrent: {
       options: {
         logConcurrentOutput: true,
-        indent: false,
+        indent: true,
       },
       debug: ['webpack:watchDebug', 'webpack:watchDebugPlusTests'],
-      core: ['webpack:watchDebugNoFonts'],
+      production: ['webpack:watchProdAllFonts', 'webpack:watchProdNoFonts'],
     },
+
     eslint: {
       target: ['./src', './tests'],
       options: { fix: true },
@@ -302,11 +319,11 @@ module.exports = (grunt) => {
     ['clean:build', 'force:eslint', 'concurrent:debug']
   );
 
-  // `grunt watch:core`
+  // `grunt watch`
   grunt.registerTask(
-    'watch:core',
-    `Watch src/ for changes. Generate dev builds of ${VEX_CORE} and fonts.`, //
-    ['clean:build', 'force:eslint', 'concurrent:core']
+    'watchProduction',
+    `Watch src/ & tests/ for changes. Generate production builds (vexflow.js and vexflow-core.js).`, //
+    ['clean:build', 'force:eslint', 'concurrent:production']
   );
 
   // `grunt test`

src/flow.ts

@@ -284,6 +284,12 @@ export const Flow = {
   keySignature(spec: string): { type: string; line: number }[] {
     return Tables.keySignature(spec);
   },
+  hasKeySignature(spec: string): boolean {
+    return Tables.hasKeySignature(spec);
+  },
+  getKeySignatures(): Record<string, { acc?: string; num: number }> {
+    return Tables.getKeySignatures();
+  },
   clefProperties(clef: string): { line_shift: number } {
     return Tables.clefProperties(clef);
   },

src/note.ts

@@ -527,6 +527,11 @@ export abstract class Note extends Tickable {
    * @returns this
    */
   addModifier(modifier: Modifier, index: number = 0): this {
+    // Backwards compatibility with 3.0.9.
+    if (typeof index === 'string') {
+      index = parseInt(index);
+    }
+
     // Legacy versions of VexFlow had the two parameters swapped.
     // We check here and throw an error if the argument types are not correct.
     if (typeof modifier !== 'object' || typeof index !== 'number') {

src/tables.ts

@@ -52,6 +52,39 @@ const durations: Record<string, number> = {
   256: RESOLUTION / 256,
 };
 
+const keySignatures: Record<string, { acc?: string; num: number }> = {
+  C: { num: 0 },
+  Am: { num: 0 },
+  F: { acc: 'b', num: 1 },
+  Dm: { acc: 'b', num: 1 },
+  Bb: { acc: 'b', num: 2 },
+  Gm: { acc: 'b', num: 2 },
+  Eb: { acc: 'b', num: 3 },
+  Cm: { acc: 'b', num: 3 },
+  Ab: { acc: 'b', num: 4 },
+  Fm: { acc: 'b', num: 4 },
+  Db: { acc: 'b', num: 5 },
+  Bbm: { acc: 'b', num: 5 },
+  Gb: { acc: 'b', num: 6 },
+  Ebm: { acc: 'b', num: 6 },
+  Cb: { acc: 'b', num: 7 },
+  Abm: { acc: 'b', num: 7 },
+  G: { acc: '#', num: 1 },
+  Em: { acc: '#', num: 1 },
+  D: { acc: '#', num: 2 },
+  Bm: { acc: '#', num: 2 },
+  A: { acc: '#', num: 3 },
+  'F#m': { acc: '#', num: 3 },
+  E: { acc: '#', num: 4 },
+  'C#m': { acc: '#', num: 4 },
+  B: { acc: '#', num: 5 },
+  'G#m': { acc: '#', num: 5 },
+  'F#': { acc: '#', num: 6 },
+  'D#m': { acc: '#', num: 6 },
+  'C#': { acc: '#', num: 7 },
+  'A#m': { acc: '#', num: 7 },
+};
+
 const accidentals: Record<string, { code: string; parenRightPaddingAdjustment: number }> = {
   '#': { code: 'accidentalSharp', parenRightPaddingAdjustment: -1 },
   '##': { code: 'accidentalDoubleSharp', parenRightPaddingAdjustment: -1 },
@@ -682,39 +715,7 @@ export const Tables = {
   },
 
   keySignature(spec: string): { type: string; line: number }[] {
-    const keySpecs: Record<string, { acc?: string; num: number }> = {
-      C: { num: 0 },
-      Am: { num: 0 },
-      F: { acc: 'b', num: 1 },
-      Dm: { acc: 'b', num: 1 },
-      Bb: { acc: 'b', num: 2 },
-      Gm: { acc: 'b', num: 2 },
-      Eb: { acc: 'b', num: 3 },
-      Cm: { acc: 'b', num: 3 },
-      Ab: { acc: 'b', num: 4 },
-      Fm: { acc: 'b', num: 4 },
-      Db: { acc: 'b', num: 5 },
-      Bbm: { acc: 'b', num: 5 },
-      Gb: { acc: 'b', num: 6 },
-      Ebm: { acc: 'b', num: 6 },
-      Cb: { acc: 'b', num: 7 },
-      Abm: { acc: 'b', num: 7 },
-      G: { acc: '#', num: 1 },
-      Em: { acc: '#', num: 1 },
-      D: { acc: '#', num: 2 },
-      Bm: { acc: '#', num: 2 },
-      A: { acc: '#', num: 3 },
-      'F#m': { acc: '#', num: 3 },
-      E: { acc: '#', num: 4 },
-      'C#m': { acc: '#', num: 4 },
-      B: { acc: '#', num: 5 },
-      'G#m': { acc: '#', num: 5 },
-      'F#': { acc: '#', num: 6 },
-      'D#m': { acc: '#', num: 6 },
-      'C#': { acc: '#', num: 7 },
-      'A#m': { acc: '#', num: 7 },
-    };
-    const keySpec = keySpecs[spec];
+    const keySpec = keySignatures[spec];
 
     if (!keySpec) {
       throw new RuntimeError('BadKeySignature', `Bad key signature spec: '${spec}'`);
@@ -740,6 +741,14 @@ export const Tables = {
     return acc_list;
   },
 
+  getKeySignatures(): Record<string, { acc?: string; num: number }> {
+    return keySignatures;
+  },
+
+  hasKeySignature(spec: string): boolean {
+    return spec in keySignatures;
+  },
+
   unicode: {
     // ♯ accidental sharp
     sharp: String.fromCharCode(0x266f),

src/util.ts

@@ -9,6 +9,10 @@ export class RuntimeError extends Error {
   constructor(code: string, message: string = '') {
     super('[RuntimeError] ' + code + ': ' + message);
     this.code = code;
+    // Keep a debugger; statement here.
+    // This should be removed from the production build, but will stay in the development builds.
+    // eslint-disable-next-line
+    debugger;
   }
 }
 

src/vex.ts

@@ -79,6 +79,10 @@ const Vex = {
     const err = new Error();
     return err.stack;
   },
+
+  // Backwards compatability with 3.0.9.
+  RERR: RuntimeError,
+  RuntimeError: RuntimeError,
 };
 
 export default Vex;

tests/flow.html

@@ -80,15 +80,23 @@ <h3>
         // When loading version >= 4.0.0, only load vexflow-debug-with-tests.js
         loadVexFlow = () => loadScript(vexPlusTestsURL);
       } else {
+        // 3.0.9 depends on jQuery.
+        await loadScript('https://code.jquery.com/jquery-3.6.0.slim.min.js');
+        // 3.0.9 uses module.exports in tabstave_tests.js.
+        window.module = {};
+
         // When loading versions <= 3.0.9, load vexflow-debug.js and then vexflow-tests.js
         loadVexFlow = () => loadScript(vexURL).then(() => loadScript(testsURL));
       }
 
       await loadVexFlow();
 
-      // Version < 4.0.0 does not have support for preloading web fonts.
-      if (Vex.Flow.Font.loadWebFonts) {
-        await Vex.Flow.Font.loadWebFonts();
+      const VF = Vex.Flow;
+
+      // Versions 4.0.0 and newer have support for preloading web fonts.
+      // Versions 3.0.9 and older do not support this feature.
+      if (VF.Font.loadWebFonts) {
+        await VF.Font.loadWebFonts();
         // Optional: view the loaded fonts.
         // await document.fonts.ready;
         // document.fonts.forEach((fontFace) => console.log(fontFace));
@@ -101,7 +109,14 @@ <h3>
       // Show only failed tests.
       QUnit.config.hidepassed = true;
       QUnit.config.noglobals = true;
-      Vex.Flow.Test.run();
+
+      if (VF.Test.run) {
+        // 4.0.0 and newer.
+        VF.Test.run();
+      } else if (VF.Test.runTests) {
+        // 3.0.9 and older.
+        VF.Test.runTests();
+      }
     </script>
   </body>
 </html>