Merge pull request #1674 from hypothesis/convert-sidebar-store-to-es-modules

Convert src/sidebar/store to ES modules

src/sidebar/store/create-store.js

-const redux = require('redux');
-const { default: thunk } = require('redux-thunk');
+import * as redux from 'redux';
+import thunk from 'redux-thunk';
 
-const { createReducer, bindSelectors } = require('./util');
+import { createReducer, bindSelectors } from './util';
 
 /**
  * Create a Redux store from a set of _modules_.
@@ -22,7 +22,7 @@ const { createReducer, bindSelectors } = require('./util');
  * @param {any[]} initArgs - Arguments to pass to each state module's `init` function
  * @param [any[]] middleware - List of additional Redux middlewares to use.
  */
-function createStore(modules, initArgs = [], middleware = []) {
+export default function createStore(modules, initArgs = [], middleware = []) {
   // Create the initial state and state update function.
 
   // Namespaced objects for initial states.
@@ -74,5 +74,3 @@ function createStore(modules, initArgs = [], middleware = []) {
 
   return store;
 }
-
-module.exports = createStore;

src/sidebar/store/debug-middleware.js

@@ -8,7 +8,7 @@
  * to the console, along with the application state before and after the action
  * was handled.
  */
-function debugMiddleware(store) {
+export default function debugMiddleware(store) {
   /* eslint-disable no-console */
   let serial = 0;
 
@@ -34,5 +34,3 @@ function debugMiddleware(store) {
   };
   /* eslint-enable no-console */
 }
-
-module.exports = debugMiddleware;

src/sidebar/store/index.js

@@ -29,21 +29,20 @@
  *  3. Checking that the UI correctly presents a given state.
  */
 
-const createStore = require('./create-store');
-const debugMiddleware = require('./debug-middleware');
-
-const activity = require('./modules/activity');
-const annotations = require('./modules/annotations');
-const directLinked = require('./modules/direct-linked');
-const drafts = require('./modules/drafts');
-const frames = require('./modules/frames');
-const links = require('./modules/links');
-const groups = require('./modules/groups');
-const realTimeUpdates = require('./modules/real-time-updates');
-const selection = require('./modules/selection');
-const session = require('./modules/session');
-const sidebarPanels = require('./modules/sidebar-panels');
-const viewer = require('./modules/viewer');
+import createStore from './create-store';
+import debugMiddleware from './debug-middleware';
+import activity from './modules/activity';
+import annotations from './modules/annotations';
+import directLinked from './modules/direct-linked';
+import drafts from './modules/drafts';
+import frames from './modules/frames';
+import groups from './modules/groups';
+import links from './modules/links';
+import realTimeUpdates from './modules/real-time-updates';
+import selection from './modules/selection';
+import session from './modules/session';
+import sidebarPanels from './modules/sidebar-panels';
+import viewer from './modules/viewer';
 
 /**
  * Redux middleware which triggers an Angular change-detection cycle
@@ -79,7 +78,7 @@ function angularDigestMiddleware($rootScope) {
  * passing the current state of the store.
  */
 // @ngInject
-function store($rootScope, settings) {
+export default function store($rootScope, settings) {
   const middleware = [
     debugMiddleware,
     angularDigestMiddleware.bind(null, $rootScope),
@@ -101,5 +100,3 @@ function store($rootScope, settings) {
   ];
   return createStore(modules, [settings], middleware);
 }
-
-module.exports = store;

src/sidebar/store/modules/activity.js

@@ -3,7 +3,7 @@
  * need to be reflected in the UI.
  */
 
-const { actionTypes } = require('../util');
+import { actionTypes } from '../util';
 
 function init() {
   return {
@@ -93,7 +93,7 @@ function isFetchingAnnotations(state) {
   return state.activity.activeAnnotationFetches > 0;
 }
 
-module.exports = {
+export default {
   init,
   update,
   namespace: 'activity',

src/sidebar/store/modules/annotations.js

@@ -3,15 +3,15 @@
  * sidebar.
  */
 
-const { createSelector } = require('reselect');
+import { createSelector } from 'reselect';
 
-const arrayUtil = require('../../util/array');
-const metadata = require('../../util/annotation-metadata');
-const uiConstants = require('../../ui-constants');
+import uiConstants from '../../ui-constants';
+import * as metadata from '../../util/annotation-metadata';
+import * as arrayUtil from '../../util/array';
+import * as util from '../util';
 
-const selection = require('./selection');
-const drafts = require('./drafts');
-const util = require('../util');
+import drafts from './drafts';
+import selection from './selection';
 
 /**
  * Return a copy of `current` with all matching annotations in `annotations`
@@ -461,7 +461,7 @@ const isWaitingToAnchorAnnotations = createSelector(
   annotations => annotations.some(metadata.isWaitingToAnchor)
 );
 
-module.exports = {
+export default {
   init: init,
   namespace: 'annotations',
   update: update,

src/sidebar/store/modules/direct-linked.js

-const util = require('../util');
+import * as util from '../util';
 
 function init(settings) {
   return {
@@ -125,7 +125,7 @@ function clearDirectLinkedIds() {
   };
 }
 
-module.exports = {
+export default {
   init,
   namespace: 'directLinked',
   update,

src/sidebar/store/modules/drafts.js

-const metadata = require('../../util/annotation-metadata');
-const util = require('../util');
+import * as metadata from '../../util/annotation-metadata';
+import * as util from '../util';
 
 /**
  * The drafts store provides temporary storage for unsaved edits to new or
@@ -23,7 +23,7 @@ function init() {
  *    which are the user's draft changes to the annotation. These are returned
  *    from the drafts store selector by `drafts.getDraft()`.
  */
-class Draft {
+export class Draft {
   constructor(annotation, changes) {
     this.annotation = { id: annotation.id, $tag: annotation.$tag };
     this.isPrivate = changes.isPrivate;
@@ -94,7 +94,8 @@ function createDraft(annotation, changes) {
  */
 
 function deleteNewAndEmptyDrafts() {
-  const annotations = require('./annotations');
+  const { default: annotations } = require('./annotations');
+
   return (dispatch, getState) => {
     const newDrafts = getState().drafts.filter(draft => {
       return (
@@ -183,7 +184,7 @@ function unsavedAnnotations(state) {
     .map(draft => draft.annotation);
 }
 
-module.exports = {
+export default {
   init,
   namespace: 'drafts',
   update,
@@ -200,5 +201,4 @@ module.exports = {
     getDraftIfNotEmpty,
     unsavedAnnotations,
   },
-  Draft,
 };

src/sidebar/store/modules/frames.js

-const { createSelector } = require('reselect');
+import { createSelector } from 'reselect';
 
-const util = require('../util');
+import * as util from '../util';
 
 function init() {
   // The list of frames connected to the sidebar app
@@ -113,7 +113,7 @@ function searchUris(state) {
   }, []);
 }
 
-module.exports = {
+export default {
   init: init,
   namespace: 'frames',
   update: update,

src/sidebar/store/modules/groups.js

-const { createSelector } = require('reselect');
+import { createSelector } from 'reselect';
 
-const util = require('../util');
-const session = require('./session');
+import * as util from '../util';
+
+import session from './session';
 
 function init() {
   return {
@@ -189,7 +190,7 @@ const getInScopeGroups = createSelector(
   groups => groups.filter(g => g.isScopedToUri)
 );
 
-module.exports = {
+export default {
   init,
   namespace: 'groups',
   update,

src/sidebar/store/modules/links.js

@@ -22,7 +22,7 @@ function updateLinksAction(newLinks) {
   return { type: 'UPDATE_LINKS', newLinks: newLinks };
 }
 
-module.exports = {
+export default {
   init: init,
   namespace: 'links',
   update: { UPDATE_LINKS: updateLinks },

src/sidebar/store/modules/real-time-updates.js

@@ -3,13 +3,13 @@
  * WebSocket connection to h's real-time API.
  */
 
-const { createSelector } = require('reselect');
+import { createSelector } from 'reselect';
 
-const { actionTypes } = require('../util');
+import { actionTypes } from '../util';
 
-const annotations = require('./annotations');
-const groups = require('./groups');
-const viewer = require('./viewer');
+import annotations from './annotations';
+import groups from './groups';
+import viewer from './viewer';
 
 function init() {
   return {
@@ -172,7 +172,7 @@ function hasPendingDeletion(state, id) {
   return state.realTimeUpdates.pendingDeletions.hasOwnProperty(id);
 }
 
-module.exports = {
+export default {
   init,
   namespace: 'realTimeUpdates',
   update,

src/sidebar/store/modules/selection.js

@@ -14,15 +14,14 @@
  * @property {string} displayName - User's display name
  */
 
-const { createSelector } = require('reselect');
-const immutable = require('seamless-immutable');
+import { createSelector } from 'reselect';
+import immutable from 'seamless-immutable';
 
-const arrayUtil = require('../../util/array');
-const metadata = require('../../util/annotation-metadata');
-const { toSet } = require('../../util/array');
-const uiConstants = require('../../ui-constants');
-
-const util = require('../util');
+import uiConstants from '../../ui-constants';
+import * as metadata from '../../util/annotation-metadata';
+import * as arrayUtil from '../../util/array';
+import { toSet } from '../../util/array';
+import * as util from '../util';
 
 /**
  * Default starting tab.
@@ -500,7 +499,7 @@ function focusModeUserPrettyName(state) {
   }
 }
 
-module.exports = {
+export default {
   init: init,
   namespace: 'selection',
   update: update,

src/sidebar/store/modules/session.js

-const util = require('../util');
+import * as util from '../util';
 
 function init() {
   /**
@@ -65,7 +65,7 @@ function profile(state) {
   return state.session;
 }
 
-module.exports = {
+export default {
   init,
   namespace: 'session',
   update,

src/sidebar/store/modules/sidebar-panels.js

@@ -8,7 +8,7 @@
  * may be "active" (open) at one time.
  */
 
-const util = require('../util');
+import * as util from '../util';
 
 function init() {
   return {
@@ -111,7 +111,7 @@ function isSidebarPanelOpen(state, panelName) {
   return state.sidebarPanels.activePanelName === panelName;
 }
 
-module.exports = {
+export default {
   namespace: 'sidebarPanels',
   init: init,
   update: update,

src/sidebar/store/modules/test/activity-test.js

-const createStore = require('../../create-store');
-const activity = require('../activity');
+import createStore from '../../create-store';
+import activity from '../activity';
 
 describe('sidebar/store/modules/activity', () => {
   let store;

src/sidebar/store/modules/test/annotations-test.js

-const annotations = require('../annotations');
-const createStore = require('../../create-store');
-const drafts = require('../drafts');
-const fixtures = require('../../../test/annotation-fixtures');
-
-const metadata = require('../../../util/annotation-metadata');
-
-const groups = require('../groups');
-const selection = require('../selection');
-const session = require('../session');
-const viewer = require('../viewer');
-const uiConstants = require('../../../ui-constants');
+import * as fixtures from '../../../test/annotation-fixtures';
+import uiConstants from '../../../ui-constants';
+import * as metadata from '../../../util/annotation-metadata';
+import createStore from '../../create-store';
+import annotations from '../annotations';
+import drafts from '../drafts';
+import groups from '../groups';
+import selection from '../selection';
+import session from '../session';
+import viewer from '../viewer';
 
 const { actions, selectors } = annotations;
 

src/sidebar/store/modules/test/direct-linked-test.js

-const createStore = require('../../create-store');
-const directLinked = require('../direct-linked');
+import createStore from '../../create-store';
+import directLinked from '../direct-linked';
 
 describe('sidebar/store/modules/direct-linked', () => {
   let store;

src/sidebar/store/modules/test/drafts-test.js

-const immutable = require('seamless-immutable');
+import immutable from 'seamless-immutable';
 
-const drafts = require('../drafts');
-const annotations = require('../annotations');
-const selection = require('../selection');
-const { Draft } = require('../drafts');
-const createStore = require('../../create-store');
+import createStore from '../../create-store';
+import annotations from '../annotations';
+import drafts from '../drafts';
+import { Draft } from '../drafts';
+import selection from '../selection';
 
 const fixtures = immutable({
   draftWithText: {

src/sidebar/store/modules/test/frames-test.js

-const frames = require('../frames');
-const createStore = require('../../create-store');
+import createStore from '../../create-store';
+import frames from '../frames';
 
 describe('sidebar/store/modules/frames', function() {
   let store;

src/sidebar/store/modules/test/groups-test.js

-const immutable = require('seamless-immutable');
+import immutable from 'seamless-immutable';
 
-const createStore = require('../../create-store');
-const groups = require('../groups');
-const session = require('../session');
+import createStore from '../../create-store';
+import groups from '../groups';
+import session from '../session';
 
 describe('sidebar/store/modules/groups', () => {
   const publicGroup = immutable({

src/sidebar/store/modules/test/links-test.js

-const links = require('../links');
+import links from '../links';
 
 const init = links.init;
 const update = links.update.UPDATE_LINKS;

src/sidebar/store/modules/test/real-time-updates-test.js

-const createStore = require('../../create-store');
-
-const annotations = require('../annotations');
-const groups = require('../groups');
-const realTimeUpdates = require('../real-time-updates');
-const { $imports } = require('../real-time-updates');
-const selection = require('../selection');
+import createStore from '../../create-store';
+import annotations from '../annotations';
+import groups from '../groups';
+import realTimeUpdates from '../real-time-updates';
+import { $imports } from '../real-time-updates';
+import selection from '../selection';
 
 const { removeAnnotations } = annotations.actions;
 const { focusGroup } = groups.actions;
@@ -28,14 +27,20 @@ describe('sidebar/store/modules/real-time-updates', () => {
 
     $imports.$mock({
       './annotations': {
+        default: {
           selectors: { annotationExists: fakeAnnotationExists },
         },
+      },
       './groups': {
+        default: {
           selectors: { focusedGroupId: fakeFocusedGroupId },
         },
+      },
       './viewer': {
+        default: {
           selectors: { isSidebar: fakeIsSidebar },
         },
+      },
     });
   });
 

src/sidebar/store/modules/test/selection-test.js

-const annotations = require('../annotations');
-const createStore = require('../../create-store');
-const selection = require('../selection');
-const uiConstants = require('../../../ui-constants');
+import uiConstants from '../../../ui-constants';
+import createStore from '../../create-store';
+import annotations from '../annotations';
+import selection from '../selection';
 
 describe('sidebar/store/modules/selection', () => {
   let store;

src/sidebar/store/modules/test/session-test.js

-const createStore = require('../../create-store');
-const session = require('../session');
+import createStore from '../../create-store';
+import session from '../session';
 
 const { init } = session;
 

src/sidebar/store/modules/test/sidebar-panels-test.js

-const createStore = require('../../create-store');
-const sidebarPanels = require('../sidebar-panels');
+import createStore from '../../create-store';
+import sidebarPanels from '../sidebar-panels';
 
 describe('sidebar/store/modules/sidebar-panels', () => {
   let store;

src/sidebar/store/modules/test/viewer-test.js

-const viewer = require('../viewer');
-const createStore = require('../../create-store');
+import createStore from '../../create-store';
+import viewer from '../viewer';
 
 describe('store/modules/viewer', function() {
   let store;

src/sidebar/store/modules/viewer.js

-const util = require('../util');
+import * as util from '../util';
 
 /**
  * This module defines actions and state related to the display mode of the
@@ -50,7 +50,7 @@ function isSidebar(state) {
   return state.viewer.isSidebar;
 }
 
-module.exports = {
+export default {
   init: init,
   namespace: 'viewer',
   update: update,

src/sidebar/store/test/create-store-test.js

-const createStore = require('../create-store');
+import createStore from '../create-store';
 
 const A = 0;
 

src/sidebar/store/test/debug-middleware-test.js

 /* eslint-disable no-console */
 
-const redux = require('redux');
+import * as redux from 'redux';
 
-const debugMiddleware = require('../debug-middleware');
+import debugMiddleware from '../debug-middleware';
 
 function id(state) {
   return state;

src/sidebar/store/test/index-test.js

-const immutable = require('seamless-immutable');
+import immutable from 'seamless-immutable';
 
-const storeFactory = require('../index');
-const annotationFixtures = require('../../test/annotation-fixtures');
-const uiConstants = require('../../ui-constants');
+import * as annotationFixtures from '../../test/annotation-fixtures';
+import uiConstants from '../../ui-constants';
+import storeFactory from '../index';
 
 const defaultAnnotation = annotationFixtures.defaultAnnotation;
 const newAnnotation = annotationFixtures.newAnnotation;

src/sidebar/store/test/use-store-test.js

-const { mount } = require('enzyme');
-const { createStore } = require('redux');
-const { createElement } = require('preact');
-const { act } = require('preact/test-utils');
+import { mount } from 'enzyme';
+import { createElement } from 'preact';
+import { act } from 'preact/test-utils';
+import { createStore } from 'redux';
 
-const useStore = require('../use-store');
-const { $imports } = useStore;
+import useStore, { $imports } from '../use-store';
 
 const initialState = { value: 10, otherValue: 20 };
 const reducer = (state = initialState, action) => {

src/sidebar/store/test/util-test.js

-const util = require('../util');
+import * as util from '../util';
 
 const fixtures = {
   update: {

src/sidebar/store/use-store.js

 /* global process */
 
-const shallowEqual = require('shallowequal');
-const { useEffect, useRef, useReducer } = require('preact/hooks');
+import { useEffect, useRef, useReducer } from 'preact/hooks';
+import shallowEqual from 'shallowequal';
 
-const { useService } = require('../util/service-context');
-const warnOnce = require('../../shared/warn-once');
+import warnOnce from '../../shared/warn-once';
+import { useService } from '../util/service-context';
 
 /**
  * Hook for accessing state or actions from the store inside a component.
@@ -35,7 +35,7 @@ const warnOnce = require('../../shared/warn-once');
  *   and/or actions extracted from the store.
  * @return {T} - The result of `callback(store)`
  */
-function useStore(callback) {
+export default function useStore(callback) {
   const store = useService('store');
 
   // Store the last-used callback in a ref so we can access it in the effect
@@ -84,5 +84,3 @@ function useStore(callback) {
 
   return lastResult.current;
 }
-
-module.exports = useStore;

src/sidebar/store/util.js

 /**
  * Return an object where each key in `updateFns` is mapped to the key itself.
  */
-function actionTypes(updateFns) {
+export function actionTypes(updateFns) {
   return Object.keys(updateFns).reduce(function(types, key) {
     types[key] = key;
     return types;
@@ -15,7 +15,7 @@ function actionTypes(updateFns) {
  * @param {Object} actionToUpdateFn - Object mapping action names to update
  *                                      functions.
  */
-function createReducer(actionToUpdateFn) {
+export function createReducer(actionToUpdateFn) {
   return (state = {}, action) => {
     const fn = actionToUpdateFn[action.type];
     if (!fn) {
@@ -39,7 +39,7 @@ function createReducer(actionToUpdateFn) {
  * level. The keys to this object are functions that call the original
  * selectors with the `state` argument set to the current value of `getState()`.
  */
-function bindSelectors(namespaces, getState) {
+export function bindSelectors(namespaces, getState) {
   const totalSelectors = {};
   Object.keys(namespaces).forEach(namespace => {
     const selectors = namespaces[namespace].selectors;
@@ -53,9 +53,3 @@ function bindSelectors(namespaces, getState) {
   });
   return totalSelectors;
 }
-
-module.exports = {
-  actionTypes,
-  bindSelectors,
-  createReducer,
-};