Refactor to import fixes from pnpm migration to main (#1604)

.changeset/famous-rivers-happen.md

@@ -0,0 +1,12 @@
+---
+"@flopflip/cypress-plugin": patch
+"@flopflip/launchdarkly-adapter": patch
+"@flopflip/react-broadcast": patch
+"@flopflip/react-redux": patch
+"@flopflip/react": patch
+"@flopflip/splitio-adapter": patch
+"@flopflip/test-utils": patch
+"@flopflip/types": patch
+---
+
+Refactor to import fixes from pnpm migration to `main`

.eslintrc.js → .eslintrc.cjs

@@ -3,6 +3,7 @@ module.exports = {
     sourceType: 'module',
     ecmaVersion: 7,
     ecmaFeatures: { jsx: true, modules: true },
+    project: ['./tsconfig.lint.json'],
   },
   extends: [
     'xo',

jest-runner-test.config.js

@@ -1 +1,2 @@
+// eslint-disable-next-line @typescript-eslint/no-require-imports
 require('@testing-library/jest-dom/extend-expect');

package.json

@@ -8,7 +8,7 @@
     "develop": "jest --projects jest.*.config.js --watch",
     "lint": "jest --config jest.lint.config.js --maxWorkers 5",
     "pretypecheck": "rimraf packages/**/dist/",
-    "typecheck": "tsc --noEmit",
+    "typecheck": "tsc --project tsconfig.json --noEmit && tsc --project packages/cypress-plugin/tsconfig.json --noEmit",
     "format": "yarn format:ts && yarn format:md && yarn format:yaml",
     "format:ts": "prettier --write '**/*.{js, ts, tsx}'",
     "format:md": "prettier --parser markdown --write '**/*.md'",
@@ -90,6 +90,7 @@
     "eslint-plugin-testing-library": "5.1.0",
     "husky": "7.0.4",
     "jest": "27.5.1",
+    "jest-localstorage-mock": "2.4.19",
     "lint-staged": "12.3.7",
     "pinst": "3.0.0",
     "prettier": "2.6.0",

packages/cypress-plugin/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true,
+    // be explicit about types included
+    // to avoid clashing with Jest types
+    "types": ["cypress"]
+  },
+  "exclude": [""],
+  "include": [
+    "../node_modules/cypress",
+    "./**/*.ts"
+  ]
+}

packages/launchdarkly-adapter/package.json

@@ -29,10 +29,11 @@
     "@babel/runtime": "7.17.8",
     "@flopflip/adapter-utilities": "1.0.24",
     "@flopflip/types": "4.1.20",
+    "@types/merge-deep": "3.0.0",
     "debounce-fn": "4.0.0",
-    "deepmerge": "4.2.2",
     "launchdarkly-js-client-sdk": "2.20.2",
     "lodash": "4.17.21",
+    "merge-deep": "3.0.3",
     "mitt": "3.0.0",
     "tiny-warning": "1.0.3"
   },

packages/launchdarkly-adapter/src/adapter/adapter.ts

@@ -22,22 +22,21 @@ import {
   AdapterSubscriptionStatus,
 } from '@flopflip/types';
 import debounce from 'debounce-fn';
-import merge from 'deepmerge';
 import {
+  type LDClient,
+  type LDUser,
   initialize as initializeLaunchDarklyClient,
-  LDClient,
-  LDUser,
 } from 'launchdarkly-js-client-sdk';
-import { type LDUser as TLDUser } from 'launchdarkly-js-sdk-common';
 import isEqual from 'lodash/isEqual';
+import merge from 'merge-deep';
 import mitt, { Emitter } from 'mitt';
 import warning from 'tiny-warning';
 
 type TEmitterEvents = {
   flagsStateChange: TFlags;
   statusStateChange: Partial<TAdapterStatus>;
 };
-type TLaunchDarklyUser = TUser<TLDUser>;
+type TLaunchDarklyUser = TUser<LDUser>;
 type TLaunchDarklyAdapterState = {
   user?: TLaunchDarklyUser;
   client?: LDClient;

packages/react-broadcast/src/components/configure/configure.tsx

@@ -8,8 +8,6 @@ import {
   type TConfigureAdapterProps,
   type TFlags,
   type TFlagsChange,
-} from '@flopflip/types';
-import {
   AdapterConfigurationStatus,
   AdapterSubscriptionStatus,
 } from '@flopflip/types';
@@ -101,9 +99,9 @@ const useStatusState = (): [
   return [status, setStatus];
 };
 
-const Configure = <AdapterInstance extends TAdapter>(
+function Configure<AdapterInstance extends TAdapter>(
   props: Props<AdapterInstance>
-) => {
+) {
   const adapterIdentifiers = useMemo(
     () => [props.adapter.id],
     [props.adapter.id]
@@ -164,7 +162,7 @@ const Configure = <AdapterInstance extends TAdapter>(
       </ConfigureAdapter>
     </FlagsContext.Provider>
   );
-};
+}
 
 Configure.displayName = 'ConfigureFlopflip';
 Configure.defaultProps = {

packages/react-broadcast/src/components/test-provider/test-provider.tsx

@@ -4,8 +4,6 @@ import {
   type TAdapterStatus,
   type TFlags,
   type TReconfigureAdapter,
-} from '@flopflip/types';
-import {
   AdapterConfigurationStatus,
   AdapterSubscriptionStatus,
 } from '@flopflip/types';
@@ -32,14 +30,14 @@ const defaultProps: Pick<
   },
 };
 
-const TestProvider = (props: TProps) => {
+function TestProvider(props: TProps) {
   const adapterContextValue = createAdapterContext(
     props.adapterIdentifiers,
     props.reconfigure,
     props.status
   );
   const flagsContextValue = createIntialFlagsContext(
-    // @ts-expect-error
+    // @ts-expect-error Can not remember. Sorry to myself.
     props.adapterIdentifiers,
     props.flags
   );
@@ -51,7 +49,7 @@ const TestProvider = (props: TProps) => {
       </FlagsContext.Provider>
     </AdapterContext.Provider>
   );
-};
+}
 
 TestProvider.displayName = 'TestProviderFlopFlip';
 TestProvider.defaultProps = defaultProps;

packages/react-broadcast/src/components/toggle-feature/toggle-feature.tsx

@@ -1,22 +1,22 @@
-import { type TFlagName, type TFlagVariation } from '@flopflip/types';
 import {
   ToggleFeature as SharedToggleFeature,
   TToggleFeatureProps,
 } from '@flopflip/react';
+import { type TFlagName, type TFlagVariation } from '@flopflip/types';
 import React from 'react';
 
 import { useFeatureToggle } from '../../hooks/';
 
 type Props = {
   flag: TFlagName;
   variation?: TFlagVariation;
-  // eslint-disable-next-line @typescript-eslint/ban-types
+   
 } & Omit<TToggleFeatureProps, 'isFeatureEnabled'>;
 
-const ToggleFeature = <OwnProps extends Props>(props: OwnProps) => {
+function ToggleFeature<OwnProps extends Props>(props: OwnProps) {
   const isFeatureEnabled = useFeatureToggle(props.flag, props.variation);
   return <SharedToggleFeature {...props} isFeatureEnabled={isFeatureEnabled} />;
-};
+}
 
 ToggleFeature.displayName = 'ToggleFeature';
 

packages/react-broadcast/src/hocs/branch-on-feature-toggle/branch-on-feature-toggle.tsx

@@ -14,13 +14,13 @@ export default function branchOnFeatureToggle<
   UntoggledComponent?: React.ComponentType
 ) {
   return (ToggledComponent: React.ComponentType<OwnProps>) => {
-    const WrappedToggledComponent = (ownProps: OwnProps) => {
+    function WrappedToggledComponent(ownProps: OwnProps) {
       const isFeatureEnabled = useFeatureToggle(flagName, flagVariation);
 
       if (isFeatureEnabled) return <ToggledComponent {...ownProps} />;
       if (UntoggledComponent) return <UntoggledComponent {...ownProps} />;
       return null;
-    };
+    }
 
     return WrappedToggledComponent;
   };

packages/react-broadcast/src/hocs/inject-feature-toggle/inject-feature-toggle.tsx

@@ -1,9 +1,9 @@
-import { type TFlagName, type TFlagVariation } from '@flopflip/types';
 import {
   DEFAULT_FLAG_PROP_KEY,
   setDisplayName,
   wrapDisplayName,
 } from '@flopflip/react';
+import { type TFlagName, type TFlagVariation } from '@flopflip/types';
 import React from 'react';
 
 import { useFlagVariations } from '../../hooks';
@@ -16,15 +16,15 @@ export default function injectFeatureToggle<
   return (
     Component: React.ComponentType<any>
   ): React.ComponentType<OwnProps & InjectedProps> => {
-    const WrappedComponent = (ownProps: OwnProps) => {
+    function WrappedComponent(ownProps: OwnProps) {
       const [flagVariation] = useFlagVariations([flagName]);
       const props = {
         ...ownProps,
         [propKey]: flagVariation,
       };
 
       return <Component {...props} />;
-    };
+    }
 
     setDisplayName(wrapDisplayName(WrappedComponent, 'injectFeatureToggle'));
 

packages/react-broadcast/src/hocs/inject-feature-toggles/inject-feature-toggles.tsx

@@ -1,9 +1,9 @@
-import { type TFlagName, type TFlags } from '@flopflip/types';
 import {
   DEFAULT_FLAGS_PROP_KEY,
   setDisplayName,
   wrapDisplayName,
 } from '@flopflip/react';
+import { type TFlagName, type TFlags } from '@flopflip/types';
 import React from 'react';
 
 import { useFlagVariations } from '../../hooks';
@@ -16,7 +16,7 @@ export default function injectFeatureToggles<
   return (
     Component: React.ComponentType
   ): React.ComponentType<OwnProps & InjectedProps> => {
-    const WrappedComponent = (ownProps: OwnProps) => {
+    function WrappedComponent(ownProps: OwnProps) {
       const flagVariations = useFlagVariations(flagNames);
       const flags = Object.fromEntries(
         flagNames.map((flagName, indexOfFlagName) => [
@@ -30,7 +30,7 @@ export default function injectFeatureToggles<
       };
 
       return <Component {...props} />;
-    };
+    }
 
     setDisplayName(wrapDisplayName(WrappedComponent, 'injectFeatureToggles'));
 

packages/react-redux/src/components/configure/configure.tsx

@@ -1,11 +1,11 @@
+import { ConfigureAdapter, useAdapterSubscription } from '@flopflip/react';
 import {
   type TAdapter,
   type TConfigureAdapterChildren,
   type TConfigureAdapterProps,
   type TFlags,
 } from '@flopflip/types';
 import React from 'react';
-import { ConfigureAdapter, useAdapterSubscription } from '@flopflip/react';
 
 import { useUpdateFlags, useUpdateStatus } from '../../hooks';
 
@@ -25,9 +25,7 @@ const defaultProps: Pick<
   shouldDeferAdapterConfiguration: false,
 };
 
-const Configure = <AdapterInstance extends TAdapter>(
-  props: Props<AdapterInstance>
-) => {
+function Configure<AdapterInstance extends TAdapter>(props: Props<AdapterInstance>) {
   const adapterIdentifiers = [props.adapter.id];
   const handleUpdateFlags = useUpdateFlags({ adapterIdentifiers });
   const handleUpdateStatus = useUpdateStatus();
@@ -46,7 +44,7 @@ const Configure = <AdapterInstance extends TAdapter>(
       {props.children}
     </ConfigureAdapter>
   );
-};
+}
 
 Configure.displayName = 'ConfigureFlopflip';
 Configure.defaultProps = defaultProps;

packages/react-redux/src/components/toggle-feature/toggle-feature.tsx

@@ -1,22 +1,21 @@
-import { type TFlagName, type TFlagVariation } from '@flopflip/types';
 import {
   ToggleFeature as SharedToggleFeature,
   TToggleFeatureProps,
 } from '@flopflip/react';
+import { type TFlagName, type TFlagVariation } from '@flopflip/types';
 import React from 'react';
 
 import { useFeatureToggle } from '../../hooks/';
 
 type Props = {
   flag: TFlagName;
   variation?: TFlagVariation;
-  // eslint-disable-next-line @typescript-eslint/ban-types
 } & Omit<TToggleFeatureProps, 'isFeatureEnabled'>;
 
-const ToggleFeature = <OwnProps extends Props>(props: OwnProps) => {
+function ToggleFeature<OwnProps extends Props>(props: OwnProps) {
   const isFeatureEnabled = useFeatureToggle(props.flag, props.variation);
   return <SharedToggleFeature {...props} isFeatureEnabled={isFeatureEnabled} />;
-};
+}
 
 ToggleFeature.displayName = 'ToggleFeature';
 

packages/react-redux/src/hocs/branch-on-feature-toggle/branch-on-feature-toggle.tsx

@@ -14,13 +14,13 @@ export default function branchOnFeatureToggle<
   UntoggledComponent?: React.ComponentType
 ) {
   return (ToggledComponent: React.ComponentType<OwnProps>) => {
-    const WrappedToggledComponent = (ownProps: OwnProps) => {
+    function WrappedToggledComponent(ownProps: OwnProps) {
       const isFeatureEnabled = useFeatureToggle(flagName, flagVariation);
 
       if (isFeatureEnabled) return <ToggledComponent {...ownProps} />;
       if (UntoggledComponent) return <UntoggledComponent {...ownProps} />;
       return null;
-    };
+    }
 
     return WrappedToggledComponent;
   };

packages/react-redux/src/hocs/inject-feature-toggle/inject-feature-toggle.tsx

@@ -1,9 +1,9 @@
-import { type TFlagName, type TFlagVariation } from '@flopflip/types';
 import {
   DEFAULT_FLAG_PROP_KEY,
   setDisplayName,
   wrapDisplayName,
 } from '@flopflip/react';
+import { type TFlagName, type TFlagVariation } from '@flopflip/types';
 import React from 'react';
 
 import { useFlagVariations } from '../../hooks';
@@ -17,15 +17,15 @@ export default <OwnProps extends Record<string, unknown>>(
   (
     Component: React.ComponentType<any>
   ): React.ComponentType<OwnProps & InjectedProps> => {
-    const WrappedComponent = (ownProps: OwnProps) => {
+    function WrappedComponent(ownProps: OwnProps) {
       const [flagVariation] = useFlagVariations([flagName]);
       const props = {
         ...ownProps,
         [propKey]: flagVariation,
       };
 
       return <Component {...props} />;
-    };
+    }
 
     setDisplayName(wrapDisplayName(WrappedComponent, 'injectFeatureToggle'));
 

packages/react-redux/src/hocs/inject-feature-toggles/inject-feature-toggles.tsx

@@ -1,9 +1,9 @@
-import { type TFlagName, type TFlags } from '@flopflip/types';
 import {
   DEFAULT_FLAGS_PROP_KEY,
   setDisplayName,
   wrapDisplayName,
 } from '@flopflip/react';
+import { type TFlagName, type TFlags } from '@flopflip/types';
 import React from 'react';
 
 import { useFlagVariations } from '../../hooks';
@@ -17,7 +17,7 @@ export default <OwnProps extends Record<string, unknown>>(
   (
     Component: React.ComponentType
   ): React.ComponentType<OwnProps & InjectedProps> => {
-    const WrappedComponent = (ownProps: OwnProps) => {
+    function WrappedComponent(ownProps: OwnProps) {
       const flagVariations = useFlagVariations(flagNames);
       const flags = Object.fromEntries(
         flagNames.map((flagName, indexOfFlagName) => [
@@ -31,7 +31,7 @@ export default <OwnProps extends Record<string, unknown>>(
       };
 
       return <Component {...props} />;
-    };
+    }
 
     setDisplayName(wrapDisplayName(WrappedComponent, 'injectFeatureToggles'));