Chore: Lazy load annotations using new chunk (#516)

build/webpack.common.config.js

@@ -58,7 +58,7 @@ module.exports = (language) => {
                     loader: 'raw-loader',
                     exclude: [
                         path.resolve('src/third-party'),
-                        path.resolve('^(?!node_modules/box-annotations).*')
+                        path.resolve('node_modules')
                     ]
                 },
                 {

build/webpack.config.js

@@ -61,6 +61,7 @@ const languages = isRelease
 function updateConfig(conf, language, index) {
     const config = Object.assign(conf, {
         entry: {
+            annotations: ['box-annotations'],
             preview: [`${lib}/Preview.js`],
             csv: [`${lib}/viewers/text/BoxCSV.js`]
         },

package.json

@@ -23,7 +23,7 @@
     "babel-preset-es2015": "^6.24.0",
     "babel-preset-es2016": "^6.24.1",
     "babel-preset-react": "^6.23.0",
-    "box-annotations": "^0.6.0",
+    "box-annotations": "^0.6.3",
     "chai": "^4.1.2",
     "chai-dom": "^1.5.0",
     "conventional-changelog-cli": "^1.3.5",

src/lib/viewers/BaseViewer.js

@@ -1,5 +1,3 @@
-import 'box-annotations/lib/Annotator.scss';
-import BoxAnnotations from 'box-annotations/lib/BoxAnnotations';
 import EventEmitter from 'events';
 import debounce from 'lodash.debounce';
 import cloneDeep from 'lodash.clonedeep';
@@ -31,6 +29,9 @@ import {
 } from '../constants';
 import { getIconFromExtension, getIconFromName } from '../icons/icons';
 
+const ANNOTATIONS_JS = 'annotations.js';
+const ANNOTATIONS_CSS = 'annotations.css';
+
 const ANNOTATION_TYPE_DRAW = 'draw';
 const ANNOTATION_TYPE_POINT = 'point';
 const LOAD_TIMEOUT_MS = 180000; // 3m
@@ -116,6 +117,8 @@ class BaseViewer extends EventEmitter {
         this.mobileZoomChangeHandler = this.mobileZoomChangeHandler.bind(this);
         this.mobileZoomEndHandler = this.mobileZoomEndHandler.bind(this);
         this.handleAnnotatorEvents = this.handleAnnotatorEvents.bind(this);
+        this.annotationsLoadHandler = this.annotationsLoadHandler.bind(this);
+        this.viewerLoadHandler = this.viewerLoadHandler.bind(this);
     }
 
     /**
@@ -371,15 +374,28 @@ class BaseViewer extends EventEmitter {
             this.containerEl.addEventListener('contextmenu', this.preventDefault);
         }
 
-        this.addListener('load', (event) => {
-            if (event && event.scale) {
-                this.scale = event.scale;
-            }
+        this.addListener('load', this.viewerLoadHandler);
+    }
 
-            if (this.annotatorConf) {
-                this.initAnnotations();
-            }
-        });
+    /**
+     * Handles the viewer load to potentially set up Box Annotations.
+     *
+     * @private
+     * @param {Object} event - load event data
+     * @return {void}
+     */
+    viewerLoadHandler(event) {
+        if (event && event.scale) {
+            this.scale = event.scale;
+        }
+
+        if (this.annotationsLoadPromise) {
+            this.annotationsLoadPromise.then(this.annotationsLoadHandler).catch(() => {
+                /* eslint-disable no-console */
+                console.error('Annotation assets failed to load');
+                /* eslint-enable no-console */
+            });
+        }
     }
 
     /**
@@ -678,13 +694,22 @@ class BaseViewer extends EventEmitter {
             return;
         }
 
-        try {
-            const boxAnnotations = new BoxAnnotations();
-            this.annotatorConf = boxAnnotations.determineAnnotator(this.options, this.viewerConfig);
-        } catch (err) {
-            /* eslint-disable no-console */
-            console.error('Annotation assets failed to load');
-            /* eslint-enable no-console */
+        this.annotationsLoadPromise = this.loadAssets([ANNOTATIONS_JS], [ANNOTATIONS_CSS]);
+    }
+
+    /**
+     * Fetches the Box Annotations library
+     *
+     * @protected
+     * @return {void}
+     */
+    annotationsLoadHandler() {
+        /* global BoxAnnotations */
+        const boxAnnotations = new BoxAnnotations();
+        this.annotatorConf = boxAnnotations.determineAnnotator(this.options, this.viewerConfig);
+
+        if (this.annotatorConf) {
+            this.initAnnotations();
         }
     }
 

src/lib/viewers/__tests__/BaseViewer-test.js

@@ -291,7 +291,6 @@ describe('lib/viewers/BaseViewer', () => {
             stubs.fullscreenAddListener = sandbox.stub(fullscreen, 'addListener');
             stubs.baseAddListener = sandbox.spy(base, 'addListener');
             stubs.documentAddEventListener = sandbox.stub(document.defaultView, 'addEventListener');
-            sandbox.stub(base, 'initAnnotations');
         });
 
         it('should append common event listeners', () => {
@@ -318,27 +317,34 @@ describe('lib/viewers/BaseViewer', () => {
             expect(base.containerEl.addEventListener).to.be.calledWith('contextmenu', sinon.match.func);
         });
 
-        it('should load the annotator when load is emitted with scale', () => {
-            base.containerEl = containerEl;
-            base.annotatorConf = {};
-
+        it('should handle annotations load', () => {
             base.addCommonListeners();
-            expect(base.scale).to.equal(1);
+            expect(stubs.baseAddListener).to.be.calledWith('load', sinon.match.func);
+        });
+    });
+
+    describe('viewerLoadHandler()', () => {
+        beforeEach(() => {
+            base.annotationsLoadPromise = Promise.resolve();
+            sandbox.stub(base, 'annotationsLoadHandler');
+        });
 
-            base.emit('load', {
+        it('should set the scale if it exists', () => {
+            base.viewerLoadHandler({
                 scale: 1.5
             });
+
             expect(base.scale).to.equal(1.5);
-            expect(base.initAnnotations).to.be.called;
         });
 
-        it('should not load the annotator when there is no annotator config', () => {
-            base.containerEl = containerEl;
-            base.annotatorConf = undefined;
+        it('should handle the annotations load promise', () => {
+             base.viewerLoadHandler({
+                scale: 1.5
+            });
 
-            base.addCommonListeners();
-            base.emit('load');
-            expect(base.initAnnotations).to.not.be.called;
+            base.annotationsLoadPromise.then(() => {
+                expect(base.annotationsLoadHandler).to.be.called;
+            });
         });
     });
 
@@ -758,70 +764,21 @@ describe('lib/viewers/BaseViewer', () => {
 
     describe('loadAnnotator()', () => {
         beforeEach(() => {
-            base.options.viewer = {
-                NAME: Document
-            };
-
-            stubs.annotatorConf = {
-                TYPE: ['point', 'highlight']
-            };
-            stubs.areAnnotationsEnabled = sandbox.stub(base, 'areAnnotationsEnabled').returns(true);
-
-            base.options = {
-                viewer: {
-                    NAME: 'VIEWER'
-                },
-                file: {
-                    permissions: {
-                        can_annotate: true,
-                        can_view_annotations_all: true,
-                        can_view_annotations_self: true
-                    }
-                }
-            };
+            sandbox.stub(base, 'areAnnotationsEnabled');
+            sandbox.stub(base, 'loadAssets');
         });
 
-        it('should load the appropriate annotator for the current viewer', () => {
-            class BoxAnnotations {
-                determineAnnotator() {
-                    return stubs.annotatorConf;
-                }
-            }
-
-            base.options = {
-                viewer: {
-                    NAME: 'VIEWER'
-                },
-                file: {
-                    permissions: {
-                        can_annotate: true,
-                        can_view_annotations_all: true,
-                        can_view_annotations_self: true
-                    }
-                }
-            };
-
-            window.BoxAnnotations = BoxAnnotations;
+        it('should do nothing if annotations are not enabled', () => {
+            base.areAnnotationsEnabled.returns(false);
             base.loadAnnotator();
-        });
+            expect(base.loadAssets).to.not.be.called;
 
-        it('should not load an annotator if no loader was found', () => {
-            class BoxAnnotations {
-                determineAnnotator() {}
-            }
-            window.BoxAnnotations = BoxAnnotations;
-            base.loadAnnotator();
         });
 
-        it('should not load an annotator if the viewer is not annotatable', () => {
-            class BoxAnnotations {
-                determineAnnotator() {
-                    return stubs.annotatorConf;
-                }
-            }
-            window.BoxAnnotations = BoxAnnotations;
-            stubs.areAnnotationsEnabled.returns(false);
+        it('should load the annotations assets', () => {
+            base.areAnnotationsEnabled.returns(true);
             base.loadAnnotator();
+            expect(base.loadAssets).to.be.calledWith(['annotations.js']);
         });
     });
 

yarn.lock

@@ -1146,9 +1146,9 @@ [email protected]:
   dependencies:
     hoek "4.x.x"
 
-box-annotations@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/box-annotations/-/box-annotations-0.6.0.tgz#649b5b81479a0ba4b32b800beab8628c3293ffab"
+box-annotations@^0.6.3:
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/box-annotations/-/box-annotations-0.6.3.tgz#8fa3ec932e2a57ce43cf62779107f23250b3dc04"
   dependencies:
     rangy "^1.3.0"
     rbush "^2.0.1"