Merge pull request #7 from materialr/fix/singleton-fix

fix: remove singleton remove singleton in favor of instanced method f…

src/adapter-utilities.js

@@ -2,41 +2,37 @@ const PASSIVE_EVENT_LISTENERS = ['touchstart'];
 const matches = (prototype => ['webkitMatchesSelector', 'msMatchesSelector', 'matches']
   .filter(property => property in prototype).slice(-1)[0])(HTMLElement.prototype);
 
-let classNames = [];
-let cssVariables = {};
-
-export const addClass = updateClassNames => (className) => {
-  classNames = [...classNames, className];
-  updateClassNames(classNames);
-};
-
-export const computeBoundingRect = element => () => {
-  const { bottom, left, right, top } = element.getBoundingClientRect();
-  return { top, left, right, bottom, width: right - left, height: bottom - top };
-};
-
-export const deregisterInteractionHandler = element =>
-  (type, handler) => element.removeEventListener(type, handler);
-
-export const isSurfaceActive = element => () => element[matches](':active');
-
-export const isSurfaceDisabled = disabled => () => disabled;
-
-export const isUnbounded = centered => () => centered;
-
-export const registerInteractionHandler = element => (type, handler) =>
-  element.addEventListener(
-    type,
-    handler,
-    PASSIVE_EVENT_LISTENERS.includes(type) ? { passive: true } : null,
-  );
-
-export const removeClass = updateClassNames => (className) => {
-  classNames = classNames.filter(currentClassName => currentClassName !== className);
-  updateClassNames(classNames);
-};
-
-export const updateCssVariable = updateCssVariables => (variable, value) => {
-  cssVariables = { ...cssVariables, [variable]: value };
-  updateCssVariables(cssVariables);
+export default () => {
+  let classNames = [];
+  let cssVariables = {};
+
+  return {
+    addClass: updateClassNames => (className) => {
+      classNames = [...classNames, className];
+      updateClassNames(classNames);
+    },
+    computeBoundingRect: element => () => {
+      const { bottom, left, right, top } = element.getBoundingClientRect();
+      return { top, left, right, bottom, width: right - left, height: bottom - top };
+    },
+    deregisterInteractionHandler: element =>
+      (type, handler) => element.removeEventListener(type, handler),
+    isSurfaceActive: element => () => element[matches](':active'),
+    isSurfaceDisabled: disabled => () => disabled,
+    isUnbounded: centered => () => centered,
+    registerInteractionHandler: element => (type, handler) =>
+      element.addEventListener(
+        type,
+        handler,
+        PASSIVE_EVENT_LISTENERS.includes(type) ? { passive: true } : null,
+      ),
+    removeClass: updateClassNames => (className) => {
+      classNames = classNames.filter(currentClassName => currentClassName !== className);
+      updateClassNames(classNames);
+    },
+    updateCssVariable: updateCssVariables => (variable, value) => {
+      cssVariables = { ...cssVariables, [variable]: value };
+      updateCssVariables(cssVariables);
+    },
+  };
 };

src/adapter-utilities.test.js

@@ -1,27 +1,19 @@
-import {
-  addClass,
-  computeBoundingRect,
-  deregisterInteractionHandler,
-  isSurfaceActive,
-  isSurfaceDisabled,
-  isUnbounded,
-  registerInteractionHandler,
-  removeClass,
-  updateCssVariable,
-} from './adapter-utilities';
+import adapterUtilities from './adapter-utilities';
 
 const CLASS_NAME_1 = 'CLASS_NAME_1';
 const CLASS_NAME_2 = 'CLASS_NAME_2';
 const CSS_VARIABLE_2 = 'CSS_VARIABLE_2';
 const CSS_VARIABLE_VALUE_2 = 'CSS_VARIABLE_VALUE_2';
 
+const adapterUtilitiesInstance = adapterUtilities();
+
 test('\'addClass()\' adds a className and sends the list to \'updateClassNames()\'', () => {
   const expectedFirst = [CLASS_NAME_1];
   const expectedSecond = [CLASS_NAME_1, CLASS_NAME_2];
   const updateClassNames = jest.fn();
 
-  addClass(updateClassNames)(CLASS_NAME_1);
-  addClass(updateClassNames)(CLASS_NAME_2);
+  adapterUtilitiesInstance.addClass(updateClassNames)(CLASS_NAME_1);
+  adapterUtilitiesInstance.addClass(updateClassNames)(CLASS_NAME_2);
 
   expect(updateClassNames.mock.calls[0][0]).toEqual(expectedFirst);
   expect(updateClassNames.mock.calls[1][0]).toEqual(expectedSecond);
@@ -33,7 +25,7 @@ test('\'computeBoundingRect()\' returns the bounding box of the element and it\'
   const element = { getBoundingClientRect: GET_BOUNDING_CLIENT_RECT };
   const expected = { bottom: 10, height: 10, left: 0, right: 10, top: 0, width: 10 };
 
-  const actual = computeBoundingRect(element)();
+  const actual = adapterUtilitiesInstance.computeBoundingRect(element)();
 
   expect(actual).toEqual(expected);
 });
@@ -44,7 +36,7 @@ test('\'deregisterInteractionHandler()\' removes an event listener from the elem
   const TYPE = 'TYPE';
   const element = { removeEventListener: REMOVE_EVENT_LISTENER };
 
-  deregisterInteractionHandler(element)(TYPE, HANDLER);
+  adapterUtilitiesInstance.deregisterInteractionHandler(element)(TYPE, HANDLER);
 
   expect(REMOVE_EVENT_LISTENER).toBeCalledWith(TYPE, HANDLER);
 });
@@ -53,7 +45,7 @@ test('\'isSurfaceActive()\' returns true when the surface is active', () => {
   const matches = jest.fn().mockReturnValue(true);
   const element = { matches };
 
-  const actual = isSurfaceActive(element)();
+  const actual = adapterUtilitiesInstance.isSurfaceActive(element)();
 
   expect(actual).toBe(true);
 });
@@ -62,7 +54,7 @@ test('\'isSurfaceActive()\' returns false when the surface is inactive', () => {
   const matches = jest.fn().mockReturnValue(false);
   const element = { matches };
 
-  const actual = isSurfaceActive(element)();
+  const actual = adapterUtilitiesInstance.isSurfaceActive(element)();
 
   expect(actual).toBe(false);
 });
@@ -71,7 +63,7 @@ test('\'isSurfaceDisabled()\' returns false if the element is disabled', () => {
   const DISABLED = false;
   const expected = DISABLED;
 
-  const actual = isSurfaceDisabled(DISABLED)();
+  const actual = adapterUtilitiesInstance.isSurfaceDisabled(DISABLED)();
 
   expect(actual).toBe(expected);
 });
@@ -80,7 +72,7 @@ test('\'isSurfaceDisabled()\' returns true if the element is not disabled', () =
   const DISABLED = true;
   const expected = DISABLED;
 
-  const actual = isSurfaceDisabled(DISABLED)();
+  const actual = adapterUtilitiesInstance.isSurfaceDisabled(DISABLED)();
 
   expect(actual).toBe(expected);
 });
@@ -89,7 +81,7 @@ test('\'isUnbounded()\' returns the \'centered\' property directly', () => {
   const CENTERED = 'CENTERED';
   const expected = CENTERED;
 
-  const actual = isUnbounded(CENTERED)();
+  const actual = adapterUtilitiesInstance.isUnbounded(CENTERED)();
 
   expect(actual).toBe(expected);
 });
@@ -100,7 +92,7 @@ test('\'registerInteractionHandler()\' adds a non-passive interaction handler',
   const TYPE = 'TYPE';
   const element = { addEventListener: ADD_EVENT_LISTENER };
 
-  registerInteractionHandler(element)(TYPE, HANDLER);
+  adapterUtilitiesInstance.registerInteractionHandler(element)(TYPE, HANDLER);
 
   expect(ADD_EVENT_LISTENER).toBeCalledWith(TYPE, HANDLER, null);
 });
@@ -111,7 +103,7 @@ test('\'registerInteractionHandler()\' adds a passive interaction handler', () =
   const TYPE = 'touchstart';
   const element = { addEventListener: ADD_EVENT_LISTENER };
 
-  registerInteractionHandler(element)(TYPE, HANDLER);
+  adapterUtilitiesInstance.registerInteractionHandler(element)(TYPE, HANDLER);
 
   expect(ADD_EVENT_LISTENER).toBeCalledWith(TYPE, HANDLER, { passive: true });
 });
@@ -121,8 +113,8 @@ test('\'removeClass()\' removes a classNames ands sends the list of classNames t
   const expectedSecond = [];
   const updateClassNames = jest.fn();
 
-  removeClass(updateClassNames)(CLASS_NAME_2);
-  removeClass(updateClassNames)(CLASS_NAME_1);
+  adapterUtilitiesInstance.removeClass(updateClassNames)(CLASS_NAME_2);
+  adapterUtilitiesInstance.removeClass(updateClassNames)(CLASS_NAME_1);
 
   expect(updateClassNames.mock.calls[0][0]).toEqual(expectedFirst);
   expect(updateClassNames.mock.calls[1][0]).toEqual(expectedSecond);
@@ -138,8 +130,14 @@ test('\'updateCssVariable()\' adds a css variable', () => {
     [CSS_VARIABLE_2]: CSS_VARIABLE_VALUE_2,
   };
 
-  updateCssVariable(updateCssVariables)(CSS_VARIABLE_1, CSS_VARIABLE_VALUE_1);
-  updateCssVariable(updateCssVariables)(CSS_VARIABLE_2, CSS_VARIABLE_VALUE_2);
+  adapterUtilitiesInstance.updateCssVariable(updateCssVariables)(
+    CSS_VARIABLE_1,
+    CSS_VARIABLE_VALUE_1,
+  );
+  adapterUtilitiesInstance.updateCssVariable(updateCssVariables)(
+    CSS_VARIABLE_2,
+    CSS_VARIABLE_VALUE_2,
+  );
 
   expect(updateCssVariables.mock.calls[0][0]).toEqual(expectedFirst);
   expect(updateCssVariables.mock.calls[1][0]).toEqual(expectedSecond);
@@ -154,7 +152,10 @@ test('\'updateCssVariable()\' changes a css variable', () => {
     [CSS_VARIABLE_2]: CSS_VARIABLE_VALUE_2,
   };
 
-  updateCssVariable(updateCssVariables)(CSS_VARIABLE_1, CSS_VARIABLE_VALUE_1_NEW);
+  adapterUtilitiesInstance.updateCssVariable(updateCssVariables)(
+    CSS_VARIABLE_1,
+    CSS_VARIABLE_VALUE_1_NEW,
+  );
 
   expect(updateCssVariables).toBeCalledWith(expected);
 });

src/index.js

@@ -1,19 +1,21 @@
 import { MDCRipple, MDCRippleFoundation } from '@material/ripple/dist/mdc.ripple';
 
-import {
-  addClass,
-  computeBoundingRect,
-  deregisterInteractionHandler,
-  isSurfaceActive,
-  isSurfaceDisabled,
-  isUnbounded,
-  registerInteractionHandler,
-  removeClass,
-  updateCssVariable,
-} from './adapter-utilities';
+import adapterUtilities from './adapter-utilities';
 
-export default ({ centered, disabled, element, self, updateClassNames, updateCssVariables }) =>
-  new MDCRippleFoundation({
+export default ({ centered, disabled, element, self, updateClassNames, updateCssVariables }) => {
+  const {
+    addClass,
+    computeBoundingRect,
+    deregisterInteractionHandler,
+    isSurfaceActive,
+    isSurfaceDisabled,
+    isUnbounded,
+    registerInteractionHandler,
+    removeClass,
+    updateCssVariable,
+  } = adapterUtilities();
+
+  return new MDCRippleFoundation({
     ...MDCRipple.createAdapter(self),
     addClass: addClass(updateClassNames),
     computeBoundingRect: computeBoundingRect(element),
@@ -25,3 +27,4 @@ export default ({ centered, disabled, element, self, updateClassNames, updateCss
     registerInteractionHandler: registerInteractionHandler(element),
     updateCssVariable: updateCssVariable(updateCssVariables),
   });
+};