Remove singletons in favor of React context (hooks-based implementation)(backward compatible with all versions of react)

.eslintrc

@@ -1,5 +1,14 @@
 {
-  "extends": "airbnb",
+  "extends": [
+    "airbnb",
+    "airbnb/hooks"
+  ],
+
+  "rules": {
+    "react/jsx-props-no-spreading": "off",
+    "react/forbid-foreign-prop-types": "off",
+    "arrow-parens": "off"
+  },
 
   "env": {
     "browser": true,

package.json

@@ -13,6 +13,7 @@
     "clean": "rimraf lib",
     "lint": "eslint --ext .js,.jsx .",
     "mocha": "mocha test",
+    "mocha:debugger": "mocha --inspect-brk",
     "postversion": "git commit package.json CHANGELOG.md -m \"Version $npm_package_version\" && npm run tag && git push && git push --tags && npm publish",
     "prepublish": "in-publish && safe-publish-latest && npm run build || not-in-publish",
     "pretest": "npm run --silent lint",
@@ -56,11 +57,14 @@
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.14.0",
     "eslint": "^5.16.0",
-    "eslint-config-airbnb": "^17.1.1",
+    "eslint-config-airbnb": "^18.0.1",
     "eslint-plugin-import": "^2.18.2",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-react": "^7.14.3",
+    "eslint-plugin-react-hooks": "^1.7.0",
     "in-publish": "^2.0.0",
+    "jsdom": "^14.1.0",
+    "jsdom-global": "3.0.2",
     "mocha": "^5.2.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
@@ -71,10 +75,11 @@
     "sinon-sandbox": "^2.0.5"
   },
   "peerDependencies": {
-    "react": ">=0.14",
+    "react": ">=16.8",
     "react-with-direction": "^1.1.0"
   },
   "dependencies": {
+    "airbnb-prop-types": "^2.14.0",
     "hoist-non-react-statics": "^3.2.1",
     "object.assign": "^4.1.0",
     "prop-types": "^15.7.2",

src/ThemedStyleSheet.js

@@ -83,6 +83,15 @@ function flush() {
   }
 }
 
+// Exported until we deprecate this API completely
+// eslint-disable-next-line no-underscore-dangle
+export function _getInterface() {
+  return styleInterface;
+}
+
+// Exported until we deprecate this API completely
+export { get as _getTheme };
+
 export default {
   registerTheme,
   registerInterface,

src/WithStylesContext.js

@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+
+const WithStylesContext = createContext({
+  stylesInterface: null,
+  stylesTheme: null,
+});
+
+export default WithStylesContext;

src/deprecated/withStyles.jsx

@@ -0,0 +1,218 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import hoistNonReactStatics from 'hoist-non-react-statics';
+
+import { CHANNEL, DIRECTIONS } from 'react-with-direction/dist/constants';
+import brcastShape from 'react-with-direction/dist/proptypes/brcast';
+
+import ThemedStyleSheet from '../ThemedStyleSheet';
+
+// Add some named exports to assist in upgrading and for convenience
+export const css = ThemedStyleSheet.resolveLTR;
+export const withStylesPropTypes = {
+  styles: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  theme: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  css: PropTypes.func.isRequired,
+};
+
+const EMPTY_STYLES = {};
+const EMPTY_STYLES_FN = () => EMPTY_STYLES;
+
+const START_MARK = 'react-with-styles.createStyles.start';
+const END_MARK = 'react-with-styles.createStyles.end';
+
+function baseClass(pureComponent) {
+  if (pureComponent) {
+    if (!React.PureComponent) {
+      throw new ReferenceError('withStyles() pureComponent option requires React 15.3.0 or later');
+    }
+
+    return React.PureComponent;
+  }
+
+  return React.Component;
+}
+
+const contextTypes = {
+  [CHANNEL]: brcastShape,
+};
+
+const defaultDirection = DIRECTIONS.LTR;
+
+export function withStyles(
+  styleFn,
+  {
+    stylesPropName = 'styles',
+    themePropName = 'theme',
+    cssPropName = 'css',
+    flushBefore = false,
+    pureComponent = false,
+  } = {},
+) {
+  let styleDefLTR;
+  let styleDefRTL;
+  let currentThemeLTR;
+  let currentThemeRTL;
+  const BaseClass = baseClass(pureComponent);
+
+  function getResolveMethod(direction) {
+    return direction === DIRECTIONS.LTR
+      ? ThemedStyleSheet.resolveLTR
+      : ThemedStyleSheet.resolveRTL;
+  }
+
+  function getCurrentTheme(direction) {
+    return direction === DIRECTIONS.LTR
+      ? currentThemeLTR
+      : currentThemeRTL;
+  }
+
+  function getStyleDef(direction, wrappedComponentName) {
+    const currentTheme = getCurrentTheme(direction);
+    let styleDef = direction === DIRECTIONS.LTR
+      ? styleDefLTR
+      : styleDefRTL;
+
+    const registeredTheme = ThemedStyleSheet.get();
+
+    // Return the existing styles if they've already been defined
+    // and if the theme used to create them corresponds to the theme
+    // registered with ThemedStyleSheet
+    if (styleDef && currentTheme === registeredTheme) {
+      return styleDef;
+    }
+
+    if (
+      process.env.NODE_ENV !== 'production'
+      && typeof performance !== 'undefined'
+      && performance.mark !== undefined && typeof performance.clearMarks === 'function'
+    ) {
+      performance.clearMarks(START_MARK);
+      performance.mark(START_MARK);
+    }
+
+    const isRTL = direction === DIRECTIONS.RTL;
+
+    if (isRTL) {
+      styleDefRTL = styleFn
+        ? ThemedStyleSheet.createRTL(styleFn)
+        : EMPTY_STYLES_FN;
+
+      currentThemeRTL = registeredTheme;
+      styleDef = styleDefRTL;
+    } else {
+      styleDefLTR = styleFn
+        ? ThemedStyleSheet.createLTR(styleFn)
+        : EMPTY_STYLES_FN;
+
+      currentThemeLTR = registeredTheme;
+      styleDef = styleDefLTR;
+    }
+
+    if (
+      process.env.NODE_ENV !== 'production'
+      && typeof performance !== 'undefined'
+      && performance.mark !== undefined && typeof performance.clearMarks === 'function'
+    ) {
+      performance.clearMarks(END_MARK);
+      performance.mark(END_MARK);
+
+      const measureName = `\ud83d\udc69\u200d\ud83c\udfa8 withStyles(${wrappedComponentName}) [create styles]`;
+
+      performance.measure(
+        measureName,
+        START_MARK,
+        END_MARK,
+      );
+      performance.clearMarks(measureName);
+    }
+
+    return styleDef;
+  }
+
+  function getState(direction, wrappedComponentName) {
+    return {
+      resolveMethod: getResolveMethod(direction),
+      styleDef: getStyleDef(direction, wrappedComponentName),
+    };
+  }
+
+  return function withStylesHOC(WrappedComponent) {
+    const wrappedComponentName = WrappedComponent.displayName
+      || WrappedComponent.name
+      || 'Component';
+
+    // NOTE: Use a class here so components are ref-able if need be:
+    // eslint-disable-next-line react/prefer-stateless-function
+    class WithStyles extends BaseClass {
+      constructor(props, context) {
+        super(props, context);
+
+        const direction = this.context[CHANNEL]
+          ? this.context[CHANNEL].getState()
+          : defaultDirection;
+
+        this.state = getState(direction, wrappedComponentName);
+      }
+
+      componentDidMount() {
+        if (this.context[CHANNEL]) {
+          // subscribe to future direction changes
+          this.channelUnsubscribe = this.context[CHANNEL].subscribe((direction) => {
+            this.setState(getState(direction, wrappedComponentName));
+          });
+        }
+      }
+
+      componentWillUnmount() {
+        if (this.channelUnsubscribe) {
+          this.channelUnsubscribe();
+        }
+      }
+
+      render() {
+        // As some components will depend on previous styles in
+        // the component tree, we provide the option of flushing the
+        // buffered styles (i.e. to a style tag) **before** the rendering
+        // cycle begins.
+        //
+        // The interfaces provide the optional "flush" method which
+        // is run in turn by ThemedStyleSheet.flush.
+        if (flushBefore) {
+          ThemedStyleSheet.flush();
+        }
+
+        const {
+          resolveMethod,
+          styleDef,
+        } = this.state;
+
+        return (
+          <WrappedComponent
+            {...this.props}
+            {...{
+              [themePropName]: ThemedStyleSheet.get(),
+              [stylesPropName]: styleDef(),
+              [cssPropName]: resolveMethod,
+            }}
+          />
+        );
+      }
+    }
+
+    WithStyles.WrappedComponent = WrappedComponent;
+    WithStyles.displayName = `withStyles(${wrappedComponentName})`;
+    WithStyles.contextTypes = contextTypes;
+    if (WrappedComponent.propTypes) {
+      WithStyles.propTypes = { ...WrappedComponent.propTypes };
+      delete WithStyles.propTypes[stylesPropName];
+      delete WithStyles.propTypes[themePropName];
+      delete WithStyles.propTypes[cssPropName];
+    }
+    if (WrappedComponent.defaultProps) {
+      WithStyles.defaultProps = { ...WrappedComponent.defaultProps };
+    }
+
+    return hoistNonReactStatics(WithStyles, WrappedComponent);
+  };
+}

src/useStyles.js

@@ -0,0 +1,72 @@
+import { useRef } from 'react';
+import { DIRECTIONS } from 'react-with-direction';
+
+import withPerf from './utils/perf';
+import useStylesInterface from './utils/useStylesInterface';
+import useStylesTheme from './utils/useStylesTheme';
+
+/**
+ * Hook used to derive the react-with-styles props from the provided react-with-styles
+ * theme, interface, direction, and styles function.
+ *
+ * @export
+ * @param {*} [{ direction, stylesFn, flushBefore }={}]
+ * @returns {*} { css, styles, theme }
+ */
+export default function useStyles({ direction, stylesFn, flushBefore } = {}) {
+  // Get the styles interface and styles theme from context
+  const stylesInterface = useStylesInterface();
+  const theme = useStylesTheme();
+
+  // Flush if specified
+  if (flushBefore && stylesInterface.flush) {
+    stylesInterface.flush();
+  }
+
+  // Use a cache to store the interface methods and created styles by direction.
+  // This way, if the theme and the interface don't change, we do not recalculate
+  // styles or any other interface derivations. They are effectively only calculated
+  // once per direction, until the theme or interface change.
+  const cacheRefLTR = useRef();
+  const cacheRefRTL = useRef();
+  const cacheRef = direction === DIRECTIONS.RTL ? cacheRefRTL : cacheRefLTR;
+
+  // If the interface and theme haven't changed for this direction,
+  // we return all the cached values immediately.
+  if (
+    cacheRef.current
+    && stylesInterface
+    && cacheRef.current.stylesInterface === stylesInterface
+    && cacheRef.current.theme === theme
+  ) {
+    return cacheRef.current;
+  }
+
+  // (Re)Create the styles props for this direction
+  const directionSelector = direction === DIRECTIONS.RTL ? 'RTL' : 'LTR';
+
+  // Create the themed styles from the interface's create functions
+  // with the theme and styles function provided
+  let create = stylesInterface[`create${directionSelector}`] || stylesInterface.create;
+  if (process.env.NODE_ENV !== 'production') {
+    create = withPerf('create')(create);
+  }
+  const styles = create(stylesFn ? stylesFn(theme) : {});
+
+  // Create the css function from the interface's resolve functions
+  let resolve = stylesInterface[`resolve${directionSelector}`] || stylesInterface.resolve;
+  if (process.env.NODE_ENV !== 'production') {
+    resolve = withPerf('resolve')(resolve);
+  }
+  const css = (...args) => resolve(args);
+
+  // Cache the withStyles values for this direction
+  cacheRef.current = {
+    stylesInterface,
+    theme,
+    styles,
+    css,
+  };
+
+  return cacheRef.current;
+}