chore (ESLint): Add eslint + typescript + prettier support (#31)

## Summary

Setup ESLint w/Typescript & React support

Autolint 2 files just to make sure it works.

Once the core code is approved, I'll autolint the entire repo in another PR.

### Approach

I used the [Prettier.io recommended setup](https://prettier.io/docs/en/integrating-with-linters.html#recommended-configuration) with ESLint as well as [this guide](https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project) to help integrate Typescript.

The `.prettierrc` file was copied directly over from the javascript-sdk.

A few rules (3) were turned off so that after this PR, `eslint --fix` leaves us with no errors.

We can discuss after that if we want to turn those rules back on.

Author: James Fox

.eslintrc.js

@@ -0,0 +1,30 @@
+module.exports = {
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 2015,
+    sourceType: 'module',
+  },
+  env: {
+    browser: true,
+    es6: true,
+    jest: true,
+    mocha: true,
+    node: true,
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'prettier/@typescript-eslint',
+
+    // Prettier should always go last so it can trump any rules above
+    'plugin:prettier/recommended',
+    'prettier/react',
+  ],
+  rules: {
+    '@typescript-eslint/ban-ts-ignore': 'off',
+    '@typescript-eslint/camelcase': 'off',
+    '@typescript-eslint/no-empty-function': 'off',
+  },
+};

.prettierrc

@@ -0,0 +1,10 @@
+{
+  "printWidth": 120,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false
+}

package.json

@@ -20,6 +20,7 @@
   "scripts": {
     "tsc": "rm -rf lib/ && tsc",
     "build": "rm -rf dist/ && node ./scripts/build.js",
+    "lint": "tsc --noEmit && eslint 'src/**/*.{js,ts,tsx}' --quiet --fix",
     "test": "jest --silent",
     "prepublishOnly": "npm run test && npm run build"
   },
@@ -29,7 +30,6 @@
   "dependencies": {
     "@optimizely/js-sdk-logging": "^0.1.0",
     "@optimizely/optimizely-sdk": "3.6.0-alpha.1",
-    "@types/react-dom": "^16.9.5",
     "hoist-non-react-statics": "^3.3.0",
     "prop-types": "^15.6.2",
     "utility-types": "^2.1.0"
@@ -44,9 +44,17 @@
     "@types/jest": "^23.3.12",
     "@types/prop-types": "^15.5.6",
     "@types/react": "^16.7.18",
+    "@types/react-dom": "^16.9.5",
+    "@typescript-eslint/eslint-plugin": "^2.23.0",
+    "@typescript-eslint/parser": "^2.23.0",
     "enzyme": "^3.8.0",
     "enzyme-adapter-react-16": "^1.7.1",
+    "eslint": "^6.8.0",
+    "eslint-config-prettier": "^6.10.0",
+    "eslint-plugin-prettier": "^3.1.2",
+    "eslint-plugin-react": "^7.19.0",
     "jest": "^23.6.0",
+    "prettier": "1.19.1",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
     "rollup": "^1.1.0",

src/hooks.ts

@@ -18,69 +18,67 @@ import * as optimizely from '@optimizely/optimizely-sdk';
 import { getLogger } from '@optimizely/js-sdk-logging';
 
 import { setupAutoUpdateListeners } from './autoUpdate';
-import { VariableValuesObject, OnReadyResult } from './client'
+import { VariableValuesObject, OnReadyResult } from './client';
 import { OptimizelyContext } from './Context';
 
 const useFeatureLogger = getLogger('useFeature');
 
 type UseFeatureState = {
-  isEnabled: boolean,
-  variables: VariableValuesObject,
+  isEnabled: boolean;
+  variables: VariableValuesObject;
 };
 
 type ClientReady = boolean;
 type DidTimeout = boolean;
 
 type UseFeatureOptions = {
-  autoUpdate?: boolean,
-  timeout?: number
+  autoUpdate?: boolean;
+  timeout?: number;
 };
 
 type UseFeatureOverrides = {
-  overrideUserId?: string,
-  overrideAttributes?: optimizely.UserAttributes,
-}
+  overrideUserId?: string;
+  overrideAttributes?: optimizely.UserAttributes;
+};
 
 interface UseFeature {
-  (
-    featureKey: string,
-    options?: UseFeatureOptions,
-    overrides?: UseFeatureOverrides,
-  ): [
-    UseFeatureState["isEnabled"],
-    UseFeatureState["variables"],
+  (featureKey: string, options?: UseFeatureOptions, overrides?: UseFeatureOverrides): [
+    UseFeatureState['isEnabled'],
+    UseFeatureState['variables'],
     ClientReady,
     DidTimeout
-  ]
+  ];
 }
 
 /**
  * A React Hook that retrieves the status of a feature flag and its variables, optionally
  * auto updating those values based on underlying user or datafile changes.
- * 
- * Note: The react client can become ready AFTER the timeout period. 
+ *
+ * Note: The react client can become ready AFTER the timeout period.
  *       ClientReady and DidTimeout provide signals to handle this scenario.
  */
-export const useFeature : UseFeature = (featureKey, options = {}, overrides = {}) => {
+export const useFeature: UseFeature = (featureKey, options = {}, overrides = {}) => {
   const { isServerSide, optimizely, timeout } = useContext(OptimizelyContext);
   if (!optimizely) {
     throw new Error('optimizely prop must be supplied via a parent <OptimizelyProvider>');
   }
-  const finalReadyTimeout: number | undefined =
-      options.timeout !== undefined ? options.timeout : timeout;
+  const finalReadyTimeout: number | undefined = options.timeout !== undefined ? options.timeout : timeout;
 
   // Helper function to return the current values for isEnabled and variables.
-  const getCurrentValues = useCallback(() => ({
-    isEnabled: optimizely.isFeatureEnabled(featureKey, overrides.overrideUserId, overrides.overrideAttributes),
-    variables: optimizely.getFeatureVariables(featureKey, overrides.overrideUserId, overrides.overrideAttributes),
-  }), [featureKey, overrides]);
+  const getCurrentValues = useCallback(
+    () => ({
+      isEnabled: optimizely.isFeatureEnabled(featureKey, overrides.overrideUserId, overrides.overrideAttributes),
+      variables: optimizely.getFeatureVariables(featureKey, overrides.overrideUserId, overrides.overrideAttributes),
+    }),
+    [featureKey, overrides]
+  );
 
   // Set the initial state immediately serverSide
-  const [ data, setData ] = useState<UseFeatureState>(() => {
+  const [data, setData] = useState<UseFeatureState>(() => {
     if (isServerSide) {
       return getCurrentValues();
     }
-    return { isEnabled: false, variables: {}};
+    return { isEnabled: false, variables: {} };
   });
 
   const [clientReady, setClientReady] = useState(isServerSide ? true : false);
@@ -89,53 +87,48 @@ export const useFeature : UseFeature = (featureKey, options = {}, overrides = {}
   useEffect(() => {
     const cleanupFns: Array<() => void> = [];
 
-    optimizely.onReady({ timeout: finalReadyTimeout }).then((res: OnReadyResult) => {
-      if (res.success) {
-        // didTimeout=false
-        useFeatureLogger.info(`feature="${featureKey}" successfully set for user="${optimizely.user.id}"`);
-        return;
-      }
-      setDidTimeout(true);
-      useFeatureLogger.info(
-        `feature="${featureKey}" could not be set before timeout of ${finalReadyTimeout}ms, reason="${res.reason || ''}"`,
-      );
-      // Since we timed out, wait for the dataReadyPromise to resolve before setting up.
-      return res.dataReadyPromise!.then(
-        () => {
-          useFeatureLogger.info(
-            `feature="${featureKey}" is now set, but after timeout.`,
-          );
-        });
-    })
-    .then(() => {
-      setClientReady(true);
-      setData(getCurrentValues());
-      if (options.autoUpdate) {
-        cleanupFns.push(
-          setupAutoUpdateListeners(optimizely, 'feature', featureKey, useFeatureLogger, () => {
-            if (cleanupFns.length) {
-              setData(getCurrentValues());
-            }
-          })
+    optimizely
+      .onReady({ timeout: finalReadyTimeout })
+      .then((res: OnReadyResult) => {
+        if (res.success) {
+          // didTimeout=false
+          useFeatureLogger.info(`feature="${featureKey}" successfully set for user="${optimizely.user.id}"`);
+          return;
+        }
+        setDidTimeout(true);
+        useFeatureLogger.info(
+          `feature="${featureKey}" could not be set before timeout of ${finalReadyTimeout}ms, reason="${res.reason ||
+            ''}"`
         );
-      }
-    })
-    .catch(() => {
-      /* The user promise or core client promise rejected. */
-      useFeatureLogger.error(`Error initializing client. The core client or user promise(s) rejected.`);
-    })
+        // Since we timed out, wait for the dataReadyPromise to resolve before setting up.
+        return res.dataReadyPromise!.then(() => {
+          useFeatureLogger.info(`feature="${featureKey}" is now set, but after timeout.`);
+        });
+      })
+      .then(() => {
+        setClientReady(true);
+        setData(getCurrentValues());
+        if (options.autoUpdate) {
+          cleanupFns.push(
+            setupAutoUpdateListeners(optimizely, 'feature', featureKey, useFeatureLogger, () => {
+              if (cleanupFns.length) {
+                setData(getCurrentValues());
+              }
+            })
+          );
+        }
+      })
+      .catch(() => {
+        /* The user promise or core client promise rejected. */
+        useFeatureLogger.error(`Error initializing client. The core client or user promise(s) rejected.`);
+      });
 
     return () => {
-      while(cleanupFns.length) {
+      while (cleanupFns.length) {
         cleanupFns.shift()!();
       }
     };
   }, [optimizely]);
 
-  return [
-    data.isEnabled,
-    data.variables,
-    clientReady,
-    didTimeout,
-  ];
+  return [data.isEnabled, data.variables, clientReady, didTimeout];
 };

src/utils.tsx

@@ -14,64 +14,62 @@
  * limitations under the License.
  */
 
-import hoistNonReactStatics from 'hoist-non-react-statics'
-import * as optimizely from '@optimizely/optimizely-sdk'
-import * as React from 'react'
+import hoistNonReactStatics from 'hoist-non-react-statics';
+import * as optimizely from '@optimizely/optimizely-sdk';
+import * as React from 'react';
 
 type User = {
-  id: string
-  attributes: optimizely.UserAttributes
-}
+  id: string;
+  attributes: optimizely.UserAttributes;
+};
 
 export function areUsersEqual(user1: User, user2: User): boolean {
   if (user1.id !== user2.id) {
-    return false
+    return false;
   }
 
-  const user1keys = Object.keys(user1.attributes)
-  const user2keys = Object.keys(user2.attributes)
-  user1keys.sort()
-  user2keys.sort()
+  const user1keys = Object.keys(user1.attributes);
+  const user2keys = Object.keys(user2.attributes);
+  user1keys.sort();
+  user2keys.sort();
 
-  const areKeysLenEqual = user1keys.length === user2keys.length
+  const areKeysLenEqual = user1keys.length === user2keys.length;
   if (!areKeysLenEqual) {
-    return false
+    return false;
   }
 
   for (let i = 0; i < user1keys.length; i++) {
-    const key1 = user1keys[i]
-    const key2 = user2keys[i]
+    const key1 = user1keys[i];
+    const key2 = user2keys[i];
     if (key1 !== key2) {
-      return false
+      return false;
     }
 
     if (user1.attributes[key1] !== user2.attributes[key2]) {
-      return false
+      return false;
     }
   }
 
-  return true
+  return true;
 }
 
 export interface AcceptsForwardedRef<R> {
-  forwardedRef?: React.Ref<R>
+  forwardedRef?: React.Ref<R>;
 }
 
 export function hoistStaticsAndForwardRefs<R, P extends AcceptsForwardedRef<R>>(
   Target: React.ComponentType<P>,
   Source: React.ComponentType<any>,
-  displayName: string,
+  displayName: string
 ): React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<R>> {
   // Make sure to hoist statics and forward any refs through from Source to Target
   // From the React docs:
   //   https://reactjs.org/docs/higher-order-components.html#static-methods-must-be-copied-over
   //   https://reactjs.org/docs/forwarding-refs.html#forwarding-refs-in-higher-order-components
-  const forwardRef: React.RefForwardingComponent<R, P> = (props, ref) => (
-    <Target {...props} forwardedRef={ref} />
-  )
-  forwardRef.displayName = `${displayName}(${Source.displayName || Source.name})`
+  const forwardRef: React.RefForwardingComponent<R, P> = (props, ref) => <Target {...props} forwardedRef={ref} />;
+  forwardRef.displayName = `${displayName}(${Source.displayName || Source.name})`;
   return hoistNonReactStatics<
     React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<R>>,
     React.ComponentType<any>
-  >(React.forwardRef(forwardRef), Source)
+  >(React.forwardRef(forwardRef), Source);
 }