No more need for the publicPath module.

Remove references to BASE_PATH.

.eslintrc

@@ -52,7 +52,8 @@
       "extends": ["eslint:recommended", "prettier"],
       "rules": {
         "no-console": "off",
-        "no-unused-vars": "off"
+        "no-unused-vars": "off",
+        "no-undef": "off"
       }
     },
     {

Gruntfile.js

@@ -29,7 +29,6 @@ const VEX_DEBUG = 'vexflow-debug';
 const VEX_DEBUG_TESTS = 'vexflow-debug-with-tests';
 
 // Optional environment variables to customize the build.
-//   process.env.VEX_BASE_PATH
 //   process.env.VEX_DEVTOOL
 
 // Output directories.
@@ -50,7 +49,7 @@ const PRODUCTION_MODE = 'production';
 // const PRODUCTION_MODE = 'development';
 const DEVELOPMENT_MODE = 'development';
 
-const fontLibraryPrefix = 'VexFlowFont_';
+const fontLibraryPrefix = 'VexFlowFont';
 
 /**
  * @returns a webpack config object. Default to PRODUCTION_MODE unless you specify DEVELOPMENT_MODE.
@@ -110,41 +109,13 @@ function getConfig(file, mode = PRODUCTION_MODE, addBanner = true, libraryName =
         export: 'default',
       },
       globalObject: globalObject,
-
-      // The `publicPath` is the base path for dynamically loaded JS chunks.
-      //   https://webpack.js.org/guides/public-path/
-      //   https://webpack.js.org/configuration/output/#outputpublicpath
-      // It is used by async.ts to import the font files at runtime.
-      // There isn't one setting for `publicPath` that will work for all deployments.
-      // In some scenarios, it needs to be './' to work, but in others it needs to be 'auto' to work.
-      // You can customize the `publicPath` below to work with your production environment.
-      //   publicPath: undefined, // undefined and `auto` are equivalent.
-      //   publicPath: 'auto',    // https://webpack.js.org/guides/public-path/#automatic-publicpath
-      //   publicPath: '',
-      //   publicPath: './',
-      // Our solution:
-      //   Specify the VEX_BASE_PATH environment variable at build time, or
-      //   Specify the VEX_BASE_PATH global variable at runtime.
-      // The value of this option should end in a slash in most cases. For example: VEX_BASE_PATH=/js/
-      // publicPath: process.env.VEX_BASE_PATH ?? './',
-      // Or comment out the above line, and set it to whatever you like:
-      // publicPath: '/my/custom/public/path/',
     },
     resolve: {
       extensions: ['.ts', '.tsx', '.js', '...'],
     },
     devtool: devtool,
     module: {
       rules: [
-        // {
-        //   // Add the magic import to async.ts to support dynamic font loading.
-        //   test: /async\.ts$/,
-        //   loader: 'string-replace-loader',
-        //   options: {
-        //     search: '/* IMPORT_WEBPACK_PUBLICPATH_HERE */',
-        //     replace: "import './webpack_publicpath';",
-        //   },
-        // },
         {
           test: /(\.ts$|\.js$)/,
           exclude: /node_modules/,
@@ -355,12 +326,9 @@ module.exports = (grunt) => {
   // Also fixes the imports and exports so that they all end in .js.
   grunt.registerTask('buildESM', 'Use tsc to create ESM JS files in build/esm/', () => {
     grunt.log.writeln('ESM: Building to build/esm/');
-    const outputTSC = child_process.execSync('tsc -p tsconfig.esm.json').toString();
-    grunt.log.writeln(outputTSC);
-
+    child_process.execSync('tsc -p tsconfig.esm.json').toString();
     grunt.log.writeln('ESM: Fixing Imports/Exports');
-    const outputFix = child_process.execSync('node ./tools/esm/fix-imports-and-exports.js ./build/esm/').toString();
-    grunt.log.writeln(outputFix);
+    child_process.execSync('node ./tools/esm/fix-imports-and-exports.js ./build/esm/').toString();
   });
 
   // `grunt watch`

demos/fonts/core-with-promise.html

@@ -23,15 +23,8 @@
       <a href="core.html">See: core.html</a><br />
       <a href="all.html">See: all.html</a>
     </p>
-    <script>
-      // Optional: set the VEX_BASE_PATH global variable to specify the location of the vexflow-font-xxxx.js files.
-      // Normally, the font files are assumed to be in the same directory as vexflow-core.js. However, in some
-      // environments you will need to explicitly set this path.
-      // window.VEX_BASE_PATH = '/assets/';
-    </script>
     <!--
         The vexflow core build includes no music fonts.
-        Use the `async Flow.setMusicFont(...)` method to load the music fonts dynamically.
     -->
     <script src="../../build/cjs/vexflow-core.js"></script>
     <script>

demos/fonts/core.html

@@ -35,11 +35,12 @@
       <a href="core-with-promise.html">See: core-with-promise.html</a><br />
       <a href="all.html">See: all.html</a>
     </p>
-    <script>
-      // Set this variable if the font files (e.g., vexflow-font-bravura.js) are in a different folder from vexflow-core.js.
-      // window.VEX_BASE_PATH = "/path/to/fonts/";
-    </script>
-    <!-- The vexflow core build includes no music fonts. -->
+    <!--
+      The vexflow core build includes no music fonts.
+      Do the following to load a font dynamically:
+        await Vex.Flow.fetchMusicFont(fontName);
+        Vex.Flow.setMusicFont(fontName);
+    -->
     <script src="../../build/cjs/vexflow-core.js"></script>
     <script type="module">
       async function chooseFont(fontName) {

demos/worker/worker-vexflow-core.js

@@ -1,10 +1,6 @@
-/* eslint-disable */
-
 // Load demos/worker/index.html in a
 
 // Web Workers have an importScripts() method that allows you to load scripts. importScripts(...) is similar to require(...) in Node.js.
-// VEX_BASE_PATH = '../../build/cjs/';
-// importScripts(VEX_BASE_PATH + 'vexflow-core.js');
 
 importScripts('../../build/cjs/vexflow-core.js');
 
@@ -15,6 +11,9 @@ onmessage = function (e) {
   const randomFont = fonts[Math.floor(Math.random() * fonts.length)];
   Vex.Flow.fetchMusicFont(randomFont).then(() => {
     Vex.Flow.setMusicFont(randomFont);
+
+    console.log(self);
+
     const { Stave, CanvasContext, BarlineType, StaveNote, Formatter } = Vex.Flow;
 
     const offscreenCanvas = e.data.canvas;

demos/worker/worker-vexflow.js

@@ -1,5 +1,3 @@
-/* eslint-disable */
-
 // Run a web server from the vexflow/ directory to test workers.
 // For example, `npx http-server` and then open http://127.0.0.1:8080/demos/worker/
 

entry/vexflow-core.ts

@@ -2,16 +2,12 @@
 // MIT License
 // @author Ron B. Yeh
 //
-// Support Dynamic Importing of Music Engraving Fonts
+// A smaller initial bundle that supports dynamic importing of music engraving fonts.
 //
 // vexflow-core.ts is the entry point for output file vexflow-core.js.
-// It will not load any music fonts by default.
-// It also overrides the `Flow.setMusicFont(...)` function to be async,
-// loading music fonts (e.g., Bravura, Petaluma, Gonville) on the fly.
-
-// Do not preload / bundle any fonts.
-// All music fonts will be loaded dynamically:
-// `Flow.fetchMusicFont(fontName)`
+// It does not preload / bundle any music fonts by default.
+// All music fonts will be loaded dynamically via: `Flow.fetchMusicFont(fontName)`
+// Remember to call `Flow.setMusicFont(fontName)` after fetching the font module.
 
 import { Vex } from '../src/vex';
 
@@ -20,13 +16,6 @@ import { Font } from '../src/font';
 import { loadTextFonts } from '../src/fonts/textfonts';
 import { globalObject, RuntimeError } from '../src/util';
 
-// Here we add an import for `webpack_publicpath.ts` to CJS builds that need dynamic font loading (e.g., vexflow-core.js).
-// In ESM, import('./bravura.js') works natively, so the webpack specific code is NOT needed.
-// Search for `webpack_publicpath` in Gruntfile.js.
-// DO NOT DELETE THE LINE BELOW :-D
-/* IMPORT_  XXX  WEBPACK_PUBLICPATH_HERE */
-// DO NOT DELETE THE LINE ABOVE :-D
-
 const fontModules: Record<string, string> = {
   Bravura: './vexflow-font-bravura.js',
   Gonville: './vexflow-font-gonville.js',
@@ -37,9 +26,15 @@ const fontModules: Record<string, string> = {
 // eslint-disable-next-line
 export type FontModule = { data: any; metrics: any };
 
+/**
+ * @param fontName the name of the music font to load.
+ * @param fontModuleOrPath Either a font module object (containing a .data and .metrics properties) or a path to a font module.
+ * The font module is assumed to be in the same directory as the vexflow-core.js entry point.
+ */
 Flow.fetchMusicFont = async (fontName: string, fontModuleOrPath?: string | FontModule): Promise<void> => {
   const font = Font.load(fontName);
-  // Check if the font data has already been loaded before.
+
+  // If the font has already been loaded before we do nothing.
   if (font.hasData()) {
     return;
   }
@@ -57,12 +52,13 @@ Flow.fetchMusicFont = async (fontName: string, fontModuleOrPath?: string | FontM
     const module = await import(/* webpackIgnore: true */ fontModuleOrPath);
 
     const g = globalObject();
-    const moduleCJS = g['VexFlowFont_' + fontName];
+    const moduleCJS = g['VexFlowFont' + fontName];
     if (typeof moduleCJS !== 'undefined') {
-      // CJS builds will set a VexFlowFont_Bravura | VexFlowFont_Gonville | etc variable.
+      // CJS font modules will set a global variable named: VexFlowFontBravura | VexFlowFontGonville | VexFlowFontPetaluma | etc.
       fontModule = moduleCJS;
     } else {
-      // ESM
+      // ESM font modules will export an object named "Font" with properties named "data" and "metrics".
+      // See vexflow-font-bravura.ts for an example.
       fontModule = module.Font;
     }
   } else {

entry/vexflow-font-bravura.ts

@@ -8,4 +8,5 @@ export const Font = {
   data: BravuraFont,
   metrics: BravuraMetrics,
 };
+
 export default Font;

package.json

@@ -76,7 +76,6 @@
   "bugs": {
     "url": "https://github.com/0xfe/vexflow/issues"
   },
-  "dependencies": {},
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^5.4.0",
     "@typescript-eslint/parser": "^5.4.0",
@@ -109,7 +108,6 @@
     "prettier": "^2.5.0",
     "qunit": "^2.17.2",
     "sharp": "^0.29.3",
-    "string-replace-loader": "^3.1.0",
     "svg2pdf.js": "^2.2.0",
     "ts-loader": "^9.2.6",
     "typedoc": "^0.22.10",

src/index.ts

@@ -46,7 +46,6 @@ export * from './notesubgroup';
 export * from './ornament';
 export * from './parser';
 export * from './pedalmarking';
-// Do not export './publicpath'. It is used internally by vexflow-core.ts
 export * from './registry';
 export * from './rendercontext';
 export * from './renderer';

src/version.ts

@@ -1,3 +1,3 @@
 export const VERSION: string = '4.0.0';
-export const ID: string = '0854d206ce5baf3ef31c82ae8849b84e375c9cf5';
-export const DATE: string = '2021-12-14T05:40:23.179Z';
+export const ID: string = '190f85d75998a1adf618371fed8e1235f6e0bcc1';
+export const DATE: string = '2021-12-14T22:59:36.633Z';

tools/generate_version_file.js

@@ -1,8 +1,10 @@
+// Saves the build information to vexflow/src/version.ts
+
 const path = require('path');
 const fs = require('fs');
 const child_process = require('child_process');
 
-const outputFile = process.argv[2] ?? path.join(__dirname, '../src/version.ts');
+const outputFile = path.join(__dirname, '../src/version.ts');
 
 const PACKAGE_JSON = JSON.parse(fs.readFileSync('package.json'));
 const VEXFLOW_VERSION = PACKAGE_JSON.version;

tsconfig.esm.json

@@ -9,5 +9,5 @@
     "removeComments": true
   },
   "include": ["./src", "./entry"],
-  "exclude": ["./entry/vexflow-debug-with-tests.ts", "./src/fonts/webpack_publicpath.ts"]
+  "exclude": ["./entry/vexflow-debug-with-tests.ts"]
 }