Merge pull request #1680 from hypothesis/convert-annotator-to-es-modules

Convert most modules in src/annotator to ES modules

src/annotator/anchoring/pdf.js

 /* global PDFViewerApplication */
 
-const seek = require('dom-seek');
+import seek from 'dom-seek';
 
 // `dom-node-iterator` polyfills optional arguments of `createNodeIterator`
 // and properties of the returned `NodeIterator` for IE 11 compatibility.
 const createNodeIterator = require('dom-node-iterator/polyfill')();
 
-const xpathRange = require('./range');
-const RenderingStates = require('../pdfjs-rendering-states');
-const { TextPositionAnchor, TextQuoteAnchor } = require('./types');
-const { toRange: textPositionToRange } = require('./text-position');
+import RenderingStates from '../pdfjs-rendering-states';
+
+import xpathRange from './range';
+import { toRange as textPositionToRange } from './text-position';
+import { TextPositionAnchor, TextQuoteAnchor } from './types';
 
 // Caches for performance.
 
@@ -342,7 +343,7 @@ function prioritizePages(position) {
  * @param {Array} selectors - Selector objects to anchor
  * @return {Promise<Range>}
  */
-function anchor(root, selectors) {
+export function anchor(root, selectors) {
   const position = selectors.find(s => s.type === 'TextPositionSelector');
   const quote = selectors.find(s => s.type === 'TextQuoteSelector');
 
@@ -406,7 +407,7 @@ function anchor(root, selectors) {
  *   `toSelector` methods.
  * @return {Promise<[TextPositionSelector, TextQuoteSelector]>}
  */
-function describe(root, range, options = {}) {
+export function describe(root, range, options = {}) {
   const normalizedRange = new xpathRange.BrowserRange(range).normalize();
 
   const startTextLayer = getNodeTextLayer(normalizedRange.start);
@@ -461,13 +462,7 @@ function describe(root, range, options = {}) {
  *
  * This exists mainly as a helper for use in tests.
  */
-function purgeCache() {
+export function purgeCache() {
   pageTextCache = {};
   quotePositionCache = {};
 }
-
-module.exports = {
-  anchor,
-  describe,
-  purgeCache,
-};

src/annotator/anchoring/test/fake-pdf-viewer-application.js

@@ -9,7 +9,7 @@
  * each of the relevant classes in PDF.js.
  */
 
-const RenderingStates = require('../../pdfjs-rendering-states');
+import RenderingStates from '../../pdfjs-rendering-states';
 
 /**
  * Create the DOM structure for a page which matches the structure produced by
@@ -197,7 +197,7 @@ class FakePDFViewer {
  *
  * The original is defined at https://github.com/mozilla/pdf.js/blob/master/web/app.js
  */
-class FakePDFViewerApplication {
+export default class FakePDFViewerApplication {
   /**
    * @param {Options} options
    */
@@ -215,5 +215,3 @@ class FakePDFViewerApplication {
     this.pdfViewer.dispose();
   }
 }
-
-module.exports = FakePDFViewerApplication;

src/annotator/anchoring/test/html-baselines/index.js

@@ -21,7 +21,7 @@
 //     them as `<fixture name>.json` in this directory
 //  4. Add an entry to the fixture list below.
 
-module.exports = [
+export default [
   {
     name: 'Minimal Document',
     html: require('./minimal.html'),

src/annotator/anchoring/test/html-test.js

-const html = require('../html');
+import { toResult } from '../../../shared/test/promise-util';
+import * as html from '../html';
 
-const { toResult } = require('../../../shared/test/promise-util');
-const fixture = require('./html-anchoring-fixture.html');
+import fixture from './html-anchoring-fixture.html';
+import htmlBaselines from './html-baselines';
 
 /** Return all text node children of `container`. */
 function textNodes(container) {
@@ -419,7 +420,6 @@ describe('HTML anchoring', function() {
   });
 
   describe('Web page baselines', function() {
-    const fixtures = require('./html-baselines');
     let frame;
 
     before(function() {
@@ -431,7 +431,7 @@ describe('HTML anchoring', function() {
       frame.remove();
     });
 
-    fixtures.forEach(fixture => {
+    htmlBaselines.forEach(fixture => {
       it(`generates selectors which match the baseline ${fixture.name}`, () => {
         let fixtureHtml = fixture.html;
         const annotations = fixture.annotations.rows;

src/annotator/anchoring/test/pdf-test.js

-const domAnchorTextQuote = require('dom-anchor-text-quote');
+import * as domAnchorTextQuote from 'dom-anchor-text-quote';
 
-const FakePDFViewerApplication = require('./fake-pdf-viewer-application');
-const pdfAnchoring = require('../pdf');
+import * as pdfAnchoring from '../pdf';
+
+import FakePDFViewerApplication from './fake-pdf-viewer-application';
 
 /**
  * Return a DOM Range which refers to the specified `text` in `container`.

src/annotator/anchoring/test/text-position-test.js

-const { toRange } = require('../text-position');
+import { toRange } from '../text-position';
 
 describe('text-position', () => {
   let container;

src/annotator/anchoring/test/types-test.js

-const types = require('../types');
+import * as types from '../types';
 
 const TextQuoteAnchor = types.TextQuoteAnchor;
 const TextPositionAnchor = types.TextPositionAnchor;

src/annotator/anchoring/text-position.js

@@ -21,7 +21,7 @@
  * @param {number} end - Character offset within `root.textContent`
  * @return {Range} Range spanning text from `start` to `end`
  */
-function toRange(root, start, end) {
+export function toRange(root, start, end) {
   // The `filter` and `expandEntityReferences` arguments are mandatory in IE
   // although optional according to the spec.
   const nodeIter = root.ownerDocument.createNodeIterator(
@@ -76,7 +76,3 @@ function toRange(root, start, end) {
 
   return range;
 }
-
-module.exports = {
-  toRange,
-};

src/annotator/config/config-func-settings-from.js

@@ -16,7 +16,7 @@
  * @return {Object} - Any config settings returned by hypothesisConfig()
  *
  */
-function configFuncSettingsFrom(window_) {
+export default function configFuncSettingsFrom(window_) {
   if (!window_.hasOwnProperty('hypothesisConfig')) {
     return {};
   }
@@ -30,5 +30,3 @@ function configFuncSettingsFrom(window_) {
 
   return window_.hypothesisConfig();
 }
-
-module.exports = configFuncSettingsFrom;

src/annotator/config/index.js

-const settingsFrom = require('./settings');
+import settingsFrom from './settings';
 
 /**
  * Reads the Hypothesis configuration from the environment.
  *
  * @param {Window} window_ - The Window object to read config from.
  */
-function configFrom(window_) {
+export default function configFrom(window_) {
   const settings = settingsFrom(window_);
   return {
     annotations: settings.annotations,
@@ -44,5 +44,3 @@ function configFrom(window_) {
     ),
   };
 }
-
-module.exports = configFrom;

src/annotator/config/is-browser-extension.js

@@ -6,8 +6,6 @@
  *   website.
  *
  */
-function isBrowserExtension(app) {
+export default function isBrowserExtension(app) {
   return !(app.startsWith('http://') || app.startsWith('https://'));
 }
-
-module.exports = isBrowserExtension;

src/annotator/config/settings.js

-const configFuncSettingsFrom = require('./config-func-settings-from');
-const isBrowserExtension = require('./is-browser-extension');
-const sharedSettings = require('../../shared/settings');
+import * as sharedSettings from '../../shared/settings';
 
-function settingsFrom(window_) {
+import configFuncSettingsFrom from './config-func-settings-from';
+import isBrowserExtension from './is-browser-extension';
+
+export default function settingsFrom(window_) {
   const jsonConfigs = sharedSettings.jsonConfigsFrom(window_.document);
   const configFuncSettings = configFuncSettingsFrom(window_);
 
@@ -214,5 +215,3 @@ function settingsFrom(window_) {
     hostPageSetting: hostPageSetting,
   };
 }
-
-module.exports = settingsFrom;

src/annotator/config/test/config-func-settings-from-test.js

-const configFuncSettingsFrom = require('../config-func-settings-from');
+import configFuncSettingsFrom from '../config-func-settings-from';
 
 describe('annotator.config.configFuncSettingsFrom', function() {
   const sandbox = sinon.createSandbox();

src/annotator/config/test/index-test.js

-const configFrom = require('../index');
-const { $imports } = require('../index');
+import configFrom from '../index';
+import { $imports } from '../index';
 
 describe('annotator.config.index', function() {
   let fakeSettingsFrom;

src/annotator/config/test/is-browser-extension-test.js

-const isBrowserExtension = require('../is-browser-extension');
+import isBrowserExtension from '../is-browser-extension';
 
 describe('annotator.config.isBrowserExtension', function() {
   [

src/annotator/config/test/settings-test.js

-const settingsFrom = require('../settings');
-const { $imports } = require('../settings');
+import settingsFrom from '../settings';
+import { $imports } from '../settings';
 
 describe('annotator.config.settingsFrom', function() {
   let fakeConfigFuncSettingsFrom;

src/annotator/index.js

-const $ = require('jquery');
+import $ from 'jquery';
 
 // Load polyfill for :focus-visible pseudo-class.
-require('focus-visible');
-
-const configFrom = require('./config/index');
-const Guest = require('./guest');
-const Sidebar = require('./sidebar');
-const PdfSidebar = require('./pdf-sidebar');
+import 'focus-visible';
+
+import configFrom from './config/index';
+import Guest from './guest';
+import PdfSidebar from './pdf-sidebar';
+import BucketBarPlugin from './plugin/bucket-bar';
+import CrossFramePlugin from './plugin/cross-frame';
+import DocumentPlugin from './plugin/document';
+import PDFPlugin from './plugin/pdf';
+import ToolbarPlugin from './plugin/toolbar';
+import Sidebar from './sidebar';
 
 const pluginClasses = {
   // UI plugins
-  BucketBar: require('./plugin/bucket-bar'),
-  Toolbar: require('./plugin/toolbar'),
+  BucketBar: BucketBarPlugin,
+  Toolbar: ToolbarPlugin,
 
   // Document type plugins
-  PDF: require('./plugin/pdf'),
-  Document: require('./plugin/document'),
+  PDF: PDFPlugin,
+  Document: DocumentPlugin,
 
   // Cross-frame communication
-  CrossFrame: require('./plugin/cross-frame'),
+  CrossFrame: CrossFramePlugin,
 };
 
 const appLinkEl = document.querySelector(

src/annotator/plugin/document.js

@@ -10,16 +10,16 @@
  ** https://github.com/openannotation/annotator/blob/master/LICENSE
  */
 
-const baseURI = require('document-base-uri');
+import baseURI from 'document-base-uri';
 
-const Plugin = require('../plugin');
-const { normalizeURI } = require('../util/url');
+import Plugin from '../plugin';
+import { normalizeURI } from '../util/url';
 
 /**
  * DocumentMeta reads metadata/links from the current HTML document and
  * populates the `document` property of new annotations.
  */
-class DocumentMeta extends Plugin {
+export default class DocumentMeta extends Plugin {
   constructor(element, options) {
     super(element, options);
 
@@ -298,5 +298,3 @@ class DocumentMeta extends Plugin {
     return href;
   }
 }
-
-module.exports = DocumentMeta;

src/annotator/plugin/pdf-metadata.js

-const { normalizeURI } = require('../util/url');
+import { normalizeURI } from '../util/url';
 
 /**
  * @typedef Link
@@ -25,7 +25,7 @@ const { normalizeURI } = require('../util/url');
  *    // Do something with the URL of the PDF.
  * })
  */
-class PDFMetadata {
+export default class PDFMetadata {
   /**
    * Construct a `PDFMetadata` that returns URIs/metadata associated with a
    * given PDF viewer.
@@ -126,5 +126,3 @@ function getPDFURL(app) {
 
   return null;
 }
-
-module.exports = PDFMetadata;

src/annotator/plugin/pdf.coffee

@@ -9,7 +9,7 @@ module.exports = class PDF extends Plugin
 
   pluginInit: ->
     @annotator.anchoring = require('../anchoring/pdf')
-    PDFMetadata = require('./pdf-metadata')
+    { default: PDFMetadata } = require('./pdf-metadata')
 
     @pdfViewer = PDFViewerApplication.pdfViewer
     @pdfViewer.viewer.classList.add('has-transparent-text-layer')

src/annotator/plugin/test/document-test.js

@@ -10,10 +10,10 @@
  ** https://github.com/openannotation/annotator/blob/master/LICENSE
  */
 
-const $ = require('jquery');
+import $ from 'jquery';
 
-const DocumentMeta = require('../document');
-const { normalizeURI } = require('../../util/url');
+import { normalizeURI } from '../../util/url';
+import DocumentMeta from '../document';
 
 describe('DocumentMeta', function() {
   let fakeNormalizeURI;

src/annotator/plugin/test/pdf-metadata-test.js

-const PDFMetadata = require('../pdf-metadata');
+import PDFMetadata from '../pdf-metadata';
 
 /**
  * Fake implementation of PDF.js `window.PDFViewerApplication.metadata`.

src/annotator/plugin/test/toolbar-test.js

-const $ = require('jquery');
+import $ from 'jquery';
 
-const Toolbar = require('../toolbar');
+import Toolbar from '../toolbar';
 
 describe('Toolbar', () => {
   let container;

src/annotator/test/adder-test.js

-const adder = require('../adder');
+import * as adder from '../adder';
 
 function rect(left, top, width, height) {
   return { left: left, top: top, width: width, height: height };

src/annotator/test/annotation-counts-test.js

-const annotationCounts = require('../annotation-counts');
+import annotationCounts from '../annotation-counts';
 
 describe('annotationCounts', function() {
   let countEl1;

src/annotator/test/annotation-sync-test.js

-const EventEmitter = require('tiny-emitter');
+import EventEmitter from 'tiny-emitter';
 
-const AnnotationSync = require('../annotation-sync');
+import AnnotationSync from '../annotation-sync';
 
 describe('AnnotationSync', function() {
   let createAnnotationSync;

src/annotator/test/features-test.js

-const events = require('../../shared/bridge-events');
-const features = require('../features');
-const { $imports } = require('../features');
+import events from '../../shared/bridge-events';
+import features from '../features';
+import { $imports } from '../features';
 
 describe('features - annotation layer', function() {
   let featureFlagsUpdateHandler;

src/annotator/test/range-util-test.js

-const rangeUtil = require('../range-util');
+import * as rangeUtil from '../range-util';
 
 function createRange(node, start, end) {
   const range = node.ownerDocument.createRange();

src/annotator/test/selections-test.js

-const observable = require('../util/observable');
-const selections = require('../selections');
+import selections from '../selections';
+import * as observable from '../util/observable';
 
 function FakeDocument() {
   const listeners = {};

src/annotator/test/sidebar-trigger-test.js

-const sidebarTrigger = require('../sidebar-trigger');
+import sidebarTrigger from '../sidebar-trigger';
 
 describe('sidebarTrigger', function() {
   let triggerEl1;

src/annotator/util/frame-util.js

@@ -4,18 +4,18 @@
  * @param {Element} container
  * @return {HTMLIFrameElement[]}
  */
-function findFrames(container) {
+export function findFrames(container) {
   const frames = Array.from(container.getElementsByTagName('iframe'));
   return frames.filter(shouldEnableAnnotation);
 }
 
 // Check if the iframe has already been injected
-function hasHypothesis(iframe) {
+export function hasHypothesis(iframe) {
   return iframe.contentWindow.__hypothesis_frame === true;
 }
 
 // Inject embed.js into the iframe
-function injectHypothesis(iframe, scriptUrl, config) {
+export function injectHypothesis(iframe, scriptUrl, config) {
   const configElement = document.createElement('script');
   configElement.className = 'js-hypothesis-config';
   configElement.type = 'application/json';
@@ -32,7 +32,7 @@ function injectHypothesis(iframe, scriptUrl, config) {
 }
 
 // Check if we can access this iframe's document
-function isAccessible(iframe) {
+export function isAccessible(iframe) {
   try {
     return !!iframe.contentDocument;
   } catch (e) {
@@ -63,7 +63,7 @@ function shouldEnableAnnotation(iframe) {
   return isNotClientFrame && enabled;
 }
 
-function isDocumentReady(iframe, callback) {
+export function isDocumentReady(iframe, callback) {
   if (iframe.contentDocument.readyState === 'loading') {
     iframe.contentDocument.addEventListener('DOMContentLoaded', function() {
       callback();
@@ -73,7 +73,7 @@ function isDocumentReady(iframe, callback) {
   }
 }
 
-function isLoaded(iframe, callback) {
+export function isLoaded(iframe, callback) {
   if (iframe.contentDocument.readyState !== 'complete') {
     iframe.addEventListener('load', function() {
       callback();
@@ -82,12 +82,3 @@ function isLoaded(iframe, callback) {
     callback();
   }
 }
-
-module.exports = {
-  findFrames: findFrames,
-  hasHypothesis: hasHypothesis,
-  injectHypothesis: injectHypothesis,
-  isAccessible: isAccessible,
-  isLoaded: isLoaded,
-  isDocumentReady: isDocumentReady,
-};

src/annotator/util/observable.js

@@ -3,7 +3,7 @@
  * values using the Observable API.
  */
 
-const Observable = require('zen-observable');
+import Observable from 'zen-observable';
 
 /**
  * Returns an observable of events emitted by a DOM event source
@@ -12,7 +12,7 @@ const Observable = require('zen-observable');
  * @param {EventTarget} src - The event source.
  * @param {Array<string>} eventNames - List of events to subscribe to
  */
-function listen(src, eventNames) {
+export function listen(src, eventNames) {
   return new Observable(function(observer) {
     const onNext = function(event) {
       observer.next(event);
@@ -33,7 +33,7 @@ function listen(src, eventNames) {
 /**
  * Delay events from a source Observable by `delay` ms.
  */
-function delay(delay, src) {
+export function delay(delay, src) {
   return new Observable(function(obs) {
     let timeouts = [];
     const sub = src.subscribe({
@@ -62,7 +62,7 @@ function delay(delay, src) {
  * @param {Observable<T>} src
  * @return {Observable<T>}
  */
-function buffer(delay, src) {
+export function buffer(delay, src) {
   return new Observable(function(obs) {
     let lastValue;
     let timeout;
@@ -92,7 +92,7 @@ function buffer(delay, src) {
  * @param {Array<Observable>} sources
  * @return Observable
  */
-function merge(sources) {
+export function merge(sources) {
   return new Observable(function(obs) {
     const subs = sources.map(function(src) {
       return src.subscribe({
@@ -111,7 +111,7 @@ function merge(sources) {
 }
 
 /** Drop the first `n` events from the `src` Observable. */
-function drop(src, n) {
+export function drop(src, n) {
   let count = 0;
   return src.filter(function() {
     ++count;
@@ -119,11 +119,4 @@ function drop(src, n) {
   });
 }
 
-module.exports = {
-  buffer: buffer,
-  delay: delay,
-  drop: drop,
-  listen: listen,
-  merge: merge,
-  Observable: Observable,
-};
+export { Observable };

src/annotator/util/url.js

-const baseURI = require('document-base-uri');
+import baseURI from 'document-base-uri';
 
 /**
  * Return a normalized version of a URI.
@@ -9,7 +9,7 @@ const baseURI = require('document-base-uri');
  * @param {string} [base] - Base URL to resolve relative to. Defaults to
  *   the document's base URL.
  */
-function normalizeURI(uri, base = baseURI) {
+export function normalizeURI(uri, base = baseURI) {
   const absUrl = new URL(uri, base).href;
 
   // Remove the fragment identifier.
@@ -18,7 +18,3 @@ function normalizeURI(uri, base = baseURI) {
   // See https://github.com/hypothesis/h/issues/3471#issuecomment-226713750
   return absUrl.toString().replace(/#.*/, '');
 }
-
-module.exports = {
-  normalizeURI,
-};