dynamic load of fonts.

Gruntfile.js

@@ -5,6 +5,7 @@ const webpack = require('webpack');
 const child_process = require('child_process');
 const InjectPlugin = require('webpack-inject-plugin').default;
 const TerserPlugin = require('terser-webpack-plugin');
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
 
 module.exports = (grunt) => {
   const BASE_DIR = __dirname;
@@ -13,9 +14,6 @@ module.exports = (grunt) => {
   const REFERENCE_DIR = path.join(BASE_DIR, 'reference');
   const MODULE_ENTRY_SRC = path.join(BASE_DIR, 'src/index.ts');
   const MODULE_ENTRY_TESTS = path.join(BASE_DIR, 'tests/run.js');
-  const TARGET_RAW = 'vexflow-debug.js';
-  const TARGET_MIN = 'vexflow-min.js';
-  const TARGET_TESTS = 'vexflow-tests.js';
 
   // Get current build information from git and package.json.
   const GIT_COMMIT_HASH = child_process.execSync('git rev-parse HEAD').toString().trim();
@@ -28,20 +26,23 @@ module.exports = (grunt) => {
   // Used for eslint
   const SOURCES = ['./src/*.ts', './src/*.js'];
 
-  function webpackConfig(target, moduleEntry, mode, libraryName) {
+  function webpackConfig(target, chunkFilename, configFile, moduleEntry, mode, libraryName) {
     return {
       mode: mode,
       entry: moduleEntry,
       output: {
         path: BUILD_DIR,
         filename: target,
+        chunkFilename: chunkFilename,
         library: libraryName,
         libraryTarget: 'umd',
         libraryExport: 'default',
         globalObject: 'this',
+        publicPath: 'auto',
       },
       resolve: {
         extensions: ['.ts', '.js', '.json'],
+        plugins: [new TsconfigPathsPlugin({ configFile: configFile })],
       },
       devtool: process.env.VEX_GENMAP || mode === 'production' ? 'source-map' : false,
       module: {
@@ -52,6 +53,9 @@ module.exports = (grunt) => {
             use: [
               {
                 loader: 'ts-loader',
+                options: {
+                  configFile: configFile,
+                },
               },
             ],
           },
@@ -83,14 +87,44 @@ module.exports = (grunt) => {
     };
   }
 
-  const webpackProd = webpackConfig(TARGET_MIN, MODULE_ENTRY_SRC, 'production', 'Vex');
-  const webpackDev = webpackConfig(TARGET_RAW, MODULE_ENTRY_SRC, 'development', 'Vex');
-  const webpackTest = webpackConfig(TARGET_TESTS, MODULE_ENTRY_TESTS, 'development', 'VFTests');
+  const webpackProdStatic = webpackConfig(
+    'vexflow-full-min.js',
+    'vexflow-[name]-min.js',
+    'tsconfig.json',
+    MODULE_ENTRY_SRC,
+    'production',
+    'Vex'
+  );
+  const webpackProdDynamic = webpackConfig(
+    'vexflow-core-min.js',
+    'vexflow-font-[name]-min.js',
+    'tsconfig.dynamic.json',
+    MODULE_ENTRY_SRC,
+    'production',
+    'Vex'
+  );
+  const webpackDev = webpackConfig(
+    'vexflow-debug.js',
+    'vexflow-[name]-debug.js',
+    'tsconfig.json',
+    MODULE_ENTRY_SRC,
+    'development',
+    'Vex'
+  );
+  const webpackTest = webpackConfig(
+    'vexflow-tests.js',
+    'vexflow-[name]-test.js',
+    'tsconfig.json',
+    MODULE_ENTRY_TESTS,
+    'development',
+    'VFTests'
+  );
 
   grunt.initConfig({
     pkg: packageJSON,
     webpack: {
-      build: webpackProd,
+      buildStatic: webpackProdStatic,
+      buildDynamic: webpackProdDynamic,
       buildDev: webpackDev,
       buildTest: webpackTest,
       watchDev: {
@@ -200,21 +234,16 @@ module.exports = (grunt) => {
   grunt.registerTask('default', [
     'clean',
     'eslint',
-    'webpack:build',
+    'webpack:buildStatic',
+    'webpack:buildDynamic',
     'webpack:buildDev',
     'webpack:buildTest',
     'typedoc',
   ]);
 
   grunt.registerTask('watch', 'Watch src/ and tests/ concurrently', ['clean', 'eslint', 'concurrent']);
 
-  grunt.registerTask('test', 'Run qunit tests.', [
-    'clean',
-    'webpack:build',
-    'webpack:buildDev',
-    'webpack:buildTest',
-    'qunit',
-  ]);
+  grunt.registerTask('test', 'Run qunit tests.', ['clean', 'webpack:buildDev', 'webpack:buildTest', 'qunit']);
 
   // Release current build.
   grunt.registerTask('stage', 'Stage current bundles to releases/.', () => {

package.json

@@ -48,6 +48,7 @@
     "prettier": "^2.3.2",
     "qunit": "^2.16.0",
     "ts-loader": "^9.2.3",
+    "tsconfig-paths-webpack-plugin": "^3.5.1",
     "tslib": "^2.3.0",
     "typedoc": "^0.21.3",
     "typescript": "^4.3.5",

src/dot.ts

@@ -12,7 +12,6 @@ import { ModifierContextState } from './modifiercontext';
 import { GraceNote } from './gracenote';
 
 export class Dot extends Modifier {
-  protected note?: Note;
   protected radius: number;
   protected dot_shiftY: number;
 

src/font.ts

@@ -1,12 +1,8 @@
-import { BravuraFont } from './fonts/bravura_glyphs';
-import { BravuraMetrics } from './fonts/bravura_metrics';
-import { GonvilleFont } from './fonts/gonville_glyphs';
-import { GonvilleMetrics } from './fonts/gonville_metrics';
-import { PetalumaFont } from './fonts/petaluma_glyphs';
-import { PetalumaMetrics } from './fonts/petaluma_metrics';
-import { CustomFont } from './fonts/custom_glyphs';
-import { CustomMetrics } from './fonts/custom_metrics';
 import { RuntimeError } from './util';
+import { loadBravura } from '@bravura';
+import { loadGonville } from '@gonville';
+import { loadPetaluma } from '@petaluma';
+import { loadCustom } from '@custom';
 
 export interface FontData {
   glyphs: Record<string, FontGlyph>;
@@ -30,31 +26,42 @@ export interface FontGlyph {
 class Font {
   protected name: string;
   // eslint-disable-next-line
-  protected metrics: Record<string, any>;
-  protected readonly fontData: FontData;
+  protected metrics?: Record<string, any>;
+  protected fontData?: FontData;
 
   // eslint-disable-next-line
   constructor(name: string, metrics?: Record<string, any>, fontData?: FontData) {
     this.name = name;
     switch (name) {
       case 'Bravura':
-        this.metrics = BravuraMetrics;
-        this.fontData = BravuraFont;
+        // eslint-disable-next-line
+        loadBravura().then((data: { metrics: Record<string, any>; fontData: FontData }) => {
+          this.metrics = data.metrics;
+          this.fontData = data.fontData;
+        });
+        break;
+      case 'Custom':
+        // eslint-disable-next-line
+        loadCustom().then((data: { metrics: Record<string, any>; fontData: FontData }) => {
+          this.metrics = data.metrics;
+          this.fontData = data.fontData;
+        });
         break;
       case 'Gonville':
-        this.metrics = GonvilleMetrics;
-        this.fontData = GonvilleFont;
+        // eslint-disable-next-line
+        loadGonville().then((data: { metrics: Record<string, any>; fontData: FontData }) => {
+          this.metrics = data.metrics;
+          this.fontData = data.fontData;
+        });
         break;
       case 'Petaluma':
-        this.metrics = PetalumaMetrics;
-        this.fontData = PetalumaFont;
-        break;
-      case 'Custom':
-        this.metrics = CustomMetrics;
-        this.fontData = CustomFont;
+        // eslint-disable-next-line
+        loadPetaluma().then((data: { metrics: Record<string, any>; fontData: FontData }) => {
+          this.metrics = data.metrics;
+          this.fontData = data.fontData;
+        });
         break;
       default:
-        if (!metrics || !fontData) throw new RuntimeError('Missing metrics or font data');
         this.metrics = metrics;
         this.fontData = fontData;
     }
@@ -65,16 +72,19 @@ class Font {
   }
 
   getResolution(): number {
+    if (!this.metrics || !this.fontData) throw new RuntimeError('Missing metrics or font data');
     return this.fontData.resolution;
   }
 
   // eslint-disable-next-line
   getMetrics(): Record<string, any> {
+    if (!this.metrics || !this.fontData) throw new RuntimeError('Missing metrics or font data');
     return this.metrics;
   }
 
   // eslint-disable-next-line
   lookupMetric(key: string, defaultValue?: Record<string, any> | number): any {
+    if (!this.metrics || !this.fontData) throw new RuntimeError('Missing metrics or font data');
     const parts = key.split('.');
     let val = this.metrics;
     // console.log('lookupMetric:', key);
@@ -90,10 +100,12 @@ class Font {
   }
 
   getFontData(): FontData {
+    if (!this.metrics || !this.fontData) throw new RuntimeError('Missing metrics or font data');
     return this.fontData;
   }
 
   getGlyphs(): Record<string, FontGlyph> {
+    if (!this.metrics || !this.fontData) throw new RuntimeError('Missing metrics or font data');
     return this.fontData.glyphs;
   }
 }

src/fonts/bravura.ts

@@ -0,0 +1,9 @@
+import { BravuraFont } from "./bravura_glyphs";
+import { BravuraMetrics } from "./bravura_metrics";
+
+const Bravura = { 
+  fontData: BravuraFont,
+  metrics: BravuraMetrics,
+};
+
+export default Bravura;

src/fonts/custom.ts

@@ -0,0 +1,9 @@
+import { CustomFont } from "./custom_glyphs";
+import { CustomMetrics } from "./custom_metrics";
+
+const Custom = { 
+  fontData: CustomFont,
+  metrics: CustomMetrics,
+};
+
+export default Custom;

src/fonts/gonville.ts

@@ -0,0 +1,9 @@
+import { GonvilleFont } from "./gonville_glyphs";
+import { GonvilleMetrics } from "./gonville_metrics";
+
+const Gonville = { 
+  fontData: GonvilleFont,
+  metrics: GonvilleMetrics,
+};
+
+export default Gonville;

src/fonts/loadDynamic.ts

@@ -0,0 +1,20 @@
+import { FontData } from '../font';
+export async function loadBravura(): Promise<{ metrics: Record<string, any>; fontData: FontData }> {
+  const _ = await import(/* webpackChunkName: "bravura" */ '../fonts/bravura');
+  return _.default;
+}
+
+export async function loadCustom(): Promise<{ metrics: Record<string, any>; fontData: FontData }> {
+  const _ = await import(/* webpackChunkName: "custom" */ '../fonts/custom');
+  return _.default;
+}
+
+export async function loadGonville(): Promise<{ metrics: Record<string, any>; fontData: FontData }> {
+  const _ = await import(/* webpackChunkName: "gonville" */ '../fonts/gonville');
+  return _.default;
+}
+
+export async function loadPetaluma(): Promise<{ metrics: Record<string, any>; fontData: FontData }> {
+  const _ = await import(/* webpackChunkName: "petaluma" */ '../fonts/petaluma');
+  return _.default;
+}

src/fonts/loadStatic.ts

@@ -0,0 +1,25 @@
+import Bravura from '../fonts/bravura';
+import Gonville from '../fonts/gonville';
+import Petaluma from '../fonts/petaluma';
+import Custom from '../fonts/custom';
+import { FontData } from '../font';
+
+// eslint-disable-next-line
+export async function loadBravura(): Promise<{ metrics: Record<string, any>; fontData: FontData }> {
+  return Bravura;
+}
+
+// eslint-disable-next-line
+export async function loadGonville(): Promise<{ metrics: Record<string, any>; fontData: FontData }> {
+  return Gonville;
+}
+
+// eslint-disable-next-line
+export async function loadPetaluma(): Promise<{ metrics: Record<string, any>; fontData: FontData }> {
+  return Petaluma;
+}
+
+// eslint-disable-next-line
+export async function loadCustom(): Promise<{ metrics: Record<string, any>; fontData: FontData }> {
+  return Custom;
+}

src/fonts/petaluma.ts

@@ -0,0 +1,9 @@
+import { PetalumaFont } from "./petaluma_glyphs";
+import { PetalumaMetrics } from "./petaluma_metrics";
+
+const Petaluma = { 
+  fontData: PetalumaFont,
+  metrics: PetalumaMetrics,
+};
+
+export default Petaluma;

src/stringnumber.ts

@@ -15,8 +15,6 @@ import { ModifierContextState } from './modifiercontext';
 import { StemmableNote } from './stemmablenote';
 
 export class StringNumber extends Modifier {
-  protected note?: Note;
-
   protected radius: number;
 
   protected last_note?: Note;

src/types/common.d.ts

@@ -1,3 +1,5 @@
+import { Note } from '../note';
+
 export interface FontInfo {
   size: number;
   weight: string;