[FSSDK-10440] update outdated deps (#271)

junaed-optimizely · web-flow · commit 552772fcd8e6 · 2024-08-05T23:44:15.000+06:00
* [FSSDK-10440] test deps update

* [FSSDK-10440] react echo updates

* [FSSDK-10440] build system update

* [FSSDK-10440] package manager update

* [FSSDK-10440] linter: eslint + prettier update

* [FSSDK-10440] misc deps update

* [FSSDK-10440] workflow update for yarn

* [FSSDK-10440] yarn breaking change revert

* [FSSDK-10440] Node engine 14 support restored

* [FSSDK-10440] test debug

* [FSSDK-10440] test debug 2

* cleanup
diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
@@ -1,7 +1,7 @@
 {
   "name": "React SDK",
   "image": "mcr.microsoft.com/devcontainers/javascript-node:1-18-bullseye",
-  "postCreateCommand": "yarn install",
+  "postCreateCommand": "npm i -g yarn@1.22.22 && yarn install",
   "customizations": {
     "vscode": {
       "extensions": [
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -17,11 +17,7 @@ module.exports = {
     'plugin:react-hooks/recommended',
     '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',
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,5 @@
 node_modules/
+.yarn/
 lerna-debug.log
 npm-debug.log
 lib
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,4 +1,11 @@
 {
-  "jest.runMode": "on-demand",
-  "jest.jestCommandLine": "~/.nvm/nvm-exec yarn test"
+  "eslint.enable": true,
+  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
+  "prettier.requireConfig": true,
+  "editor.formatOnSave": false,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "never"
+  },
+
+  "editor.defaultFormatter": "esbenp.prettier-vscode"
 }
diff --git a/jest.config.js b/jest.config.js
@@ -14,20 +14,11 @@
  * limitations under the License.
  */
 
+/** @type {import('jest').Config} */
 module.exports = {
-  "roots": [
-    "./src"
-  ],
-  "transform": {
-    "^.+\\.tsx?$": "ts-jest"
-  },
-  "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",
-  "moduleFileExtensions": [
-    "ts",
-    "tsx",
-    "js",
-    "jsx",
-    "json",
-    "node"
-  ],
-}
+  testEnvironment: 'jsdom',
+  roots: ['./src'],
+  testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$',
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+  preset: 'ts-jest',
+};
diff --git a/package.json b/package.json
@@ -35,40 +35,41 @@
   },
   "dependencies": {
     "@optimizely/optimizely-sdk": "^5.3.4",
-    "hoist-non-react-statics": "^3.3.0",
-    "prop-types": "^15.6.2",
+    "hoist-non-react-statics": "^3.3.2",
+    "prop-types": "^15.8.1",
     "utility-types": "^2.1.0 || ^3.0.0"
   },
   "peerDependencies": {
     "react": ">=16.8.0"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^16.0.0",
-    "@rollup/plugin-node-resolve": "^10.0.0",
-    "@rollup/plugin-replace": "^2.3.4",
-    "@rollup/plugin-terser": "^0.4.4",
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^13.1.1",
-    "@types/hoist-non-react-statics": "^3.3.1",
-    "@types/jest": "^26.0.14",
-    "@types/prop-types": "^15.5.6",
+    "@rollup/plugin-commonjs": "^26.0.1",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-replace": "^5.0.7",
+    "@rollup/plugin-terser": "0.4.2",
+    "@testing-library/jest-dom": "^6.4.8",
+    "@testing-library/react": "^14.3.0",
+    "@types/hoist-non-react-statics": "^3.3.5",
+    "@types/jest": "^29.5.12",
+    "@types/prop-types": "^15.7.12",
     "@types/react": "^18.0.15",
     "@types/react-dom": "^18.0.6",
-    "@typescript-eslint/eslint-plugin": "^2.23.0",
-    "@typescript-eslint/parser": "^2.23.0",
-    "eslint": "^6.8.0",
-    "eslint-config-prettier": "^6.10.0",
-    "eslint-plugin-prettier": "^3.1.2",
-    "eslint-plugin-react": "^7.19.0",
-    "eslint-plugin-react-hooks": "^4.1.0",
-    "jest": "^26.5.2",
-    "prettier": "1.19.1",
+    "@typescript-eslint/eslint-plugin": "^5.6.2",
+    "@typescript-eslint/parser": "^5.6.2",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-react": "^7.35.0",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "prettier": "^3.3.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "rollup": "^2.32.1",
-    "rollup-plugin-typescript2": "^0.28.0",
-    "ts-jest": "^26.4.1",
-    "tslib": "^2.4.0",
-    "typescript": "^4.7.4"
+    "rollup": "^3.29.4",
+    "rollup-plugin-typescript2": "^0.36.0",
+    "ts-jest": "^29.2.3",
+    "tslib": "^2.6.3",
+    "typescript": "^5.5.4"
   }
 }
diff --git a/scripts/config.js b/scripts/config.js
@@ -50,6 +50,7 @@ function getPlugins(env, externals) {
     plugins.push(
       replace({
         'process.env.NODE_ENV': JSON.stringify(env),
+        preventAssignment: false,
       })
     );
   }
diff --git a/src/Experiment.spec.tsx b/src/Experiment.spec.tsx
@@ -15,11 +15,10 @@
  */
 
 /// <reference types="jest" />
-
 import * as React from 'react';
 import { act } from 'react-dom/test-utils';
 import { render, screen, waitFor } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 import { OptimizelyExperiment } from './Experiment';
 import { OptimizelyProvider } from './Provider';
diff --git a/src/Feature.spec.tsx b/src/Feature.spec.tsx
@@ -19,7 +19,7 @@
 import * as React from 'react';
 import { act } from 'react-dom/test-utils';
 import { render, screen, waitFor } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 import { OptimizelyProvider } from './Provider';
 import { NotReadyReason, ReactSDKClient, VariableValuesObject } from './client';
diff --git a/src/hooks.spec.tsx b/src/hooks.spec.tsx
@@ -19,7 +19,7 @@
 import * as React from 'react';
 import { act } from 'react-dom/test-utils';
 import { render, renderHook, screen, waitFor } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 import { OptimizelyProvider } from './Provider';
 import { OnReadyResult, ReactSDKClient, VariableValuesObject } from './client';
@@ -71,6 +71,7 @@ describe('hooks', () => {
   let notificationListenerCallbacks: Array<() => void>;
   let optimizelyMock: ReactSDKClient;
   let readySuccess: boolean;
+  // let reason: NotReadyReason;
   let userUpdateCallbacks: Array<() => void>;
   let UseExperimentLoggingComponent: React.FunctionComponent<any>;
   let UseFeatureLoggingComponent: React.FunctionComponent<any>;
@@ -84,15 +85,15 @@ describe('hooks', () => {
 
   beforeEach(() => {
     getOnReadyPromise = ({ timeout = 0 }: any): Promise<OnReadyResult> =>
-      new Promise(resolve => {
-        setTimeout(function() {
+      new Promise((resolve) => {
+        setTimeout(function () {
           resolve(
             Object.assign(
               {
                 success: readySuccess,
               },
               !readySuccess && {
-                dataReadyPromise: new Promise(r => setTimeout(r, mockDelay)),
+                dataReadyPromise: new Promise((r) => setTimeout(r, mockDelay)),
               }
             )
           );
@@ -109,21 +110,21 @@ describe('hooks', () => {
     decideMock = jest.fn();
     setForcedDecisionMock = jest.fn();
     hooksLoggerErrorSpy = jest.spyOn(hooksLogger, 'error');
-    optimizelyMock = ({
+    optimizelyMock = {
       activate: activateMock,
-      onReady: jest.fn().mockImplementation(config => getOnReadyPromise(config || {})),
+      onReady: jest.fn().mockImplementation((config) => getOnReadyPromise(config || {})),
       getFeatureVariables: jest.fn().mockImplementation(() => featureVariables),
       isFeatureEnabled: isFeatureEnabledMock,
       getVuid: jest.fn().mockReturnValue('vuid_95bf72cebc774dfd8e8e580a5a1'),
-      onUserUpdate: jest.fn().mockImplementation(handler => {
+      onUserUpdate: jest.fn().mockImplementation((handler) => {
         userUpdateCallbacks.push(handler);
         return () => {};
       }),
       notificationCenter: {
         addNotificationListener: jest.fn().mockImplementation((type, handler) => {
           notificationListenerCallbacks.push(handler);
         }),
-        removeNotificationListener: jest.fn().mockImplementation(id => {}),
+        removeNotificationListener: jest.fn().mockImplementation((id) => {}),
       },
       user: {
         id: 'testuser',
@@ -132,15 +133,16 @@ describe('hooks', () => {
       isReady: () => readySuccess,
       getIsReadyPromiseFulfilled: () => true,
       getIsUsingSdkKey: () => true,
-      onForcedVariationsUpdate: jest.fn().mockImplementation(handler => {
+      onForcedVariationsUpdate: jest.fn().mockImplementation((handler) => {
         forcedVariationUpdateCallbacks.push(handler);
         return () => {};
       }),
       getForcedVariations: jest.fn().mockReturnValue({}),
       decide: decideMock,
       setForcedDecision: setForcedDecisionMock,
       track: jest.fn(),
-    } as unknown) as ReactSDKClient;
+      setUser: jest.fn(),
+    } as unknown as ReactSDKClient;
 
     mockLog = jest.fn();
     UseExperimentLoggingComponent = ({ options = {}, overrides = {} }: any) => {
@@ -164,8 +166,8 @@ describe('hooks', () => {
 
   afterEach(async () => {
     await optimizelyMock.onReady().then(
-      res => res.dataReadyPromise,
-      err => null
+      (res) => res.dataReadyPromise,
+      (err) => null
     );
     hooksLoggerErrorSpy.mockReset();
   });
@@ -204,16 +206,14 @@ describe('hooks', () => {
           <MyExperimentComponent options={{ timeout: mockDelay }} />
         </OptimizelyProvider>
       );
+
       await waitFor(() => expect(screen.getByTestId('result')).toHaveTextContent('null|false|false')); // initial render
 
-      await optimizelyMock.onReady();
       await waitFor(() => expect(screen.getByTestId('result')).toHaveTextContent('null|false|true')); // when didTimeout
 
       // Simulate datafile fetch completing after timeout has already passed
       // Activate now returns a variation
       activateMock.mockReturnValue('12345');
-      // Wait for completion of dataReadyPromise
-      await optimizelyMock.onReady().then(res => res.dataReadyPromise);
       await waitFor(() => expect(screen.getByTestId('result')).toHaveTextContent('12345|true|true')); // when clientReady
     });
 
@@ -255,7 +255,7 @@ describe('hooks', () => {
       activateMock.mockReturnValue('12345');
       // Simulate the user object changing
       await act(async () => {
-        userUpdateCallbacks.forEach(fn => fn());
+        userUpdateCallbacks.forEach((fn) => fn());
       });
       //   component.update();
       //   await waitFor(() => expect(screen.getByTestId('result')).toHaveTextContent('12345|true|false');
@@ -278,7 +278,7 @@ describe('hooks', () => {
       activateMock.mockReturnValue('12345');
       // Simulate the user object changing
       await act(async () => {
-        userUpdateCallbacks.forEach(fn => fn());
+        userUpdateCallbacks.forEach((fn) => fn());
       });
       await waitFor(() => expect(screen.getByTestId('result')).toHaveTextContent('null|true|false'));
     });
@@ -299,7 +299,7 @@ describe('hooks', () => {
     it('should re-render after the client becomes ready', async () => {
       readySuccess = false;
       let resolveReadyPromise: (result: { success: boolean; dataReadyPromise: Promise<any> }) => void;
-      const readyPromise: Promise<any> = new Promise(res => {
+      const readyPromise: Promise<any> = new Promise((res) => {
         resolveReadyPromise = (result): void => {
           readySuccess = true;
           res(result);
@@ -472,13 +472,13 @@ describe('hooks', () => {
       isFeatureEnabledMock.mockReturnValue(true);
       featureVariables = mockFeatureVariables;
       // Wait for completion of dataReadyPromise
-      await optimizelyMock.onReady().then(res => res.dataReadyPromise);
+      await optimizelyMock.onReady().then((res) => res.dataReadyPromise);
 
       // Simulate datafile fetch completing after timeout has already passed
       // Activate now returns a variation
       activateMock.mockReturnValue('12345');
       // Wait for completion of dataReadyPromise
-      await optimizelyMock.onReady().then(res => res.dataReadyPromise);
+      await optimizelyMock.onReady().then((res) => res.dataReadyPromise);
       await waitFor(() => expect(screen.getByTestId('result')).toHaveTextContent('true|{"foo":"bar"}|true|true')); // when clientReady
     });
 
@@ -522,7 +522,7 @@ describe('hooks', () => {
       featureVariables = mockFeatureVariables;
       // Simulate the user object changing
       await act(async () => {
-        userUpdateCallbacks.forEach(fn => fn());
+        userUpdateCallbacks.forEach((fn) => fn());
       });
       await waitFor(() => expect(screen.getByTestId('result')).toHaveTextContent('true|{"foo":"bar"}|true|false'));
     });
@@ -546,7 +546,7 @@ describe('hooks', () => {
       featureVariables = mockFeatureVariables;
       // Simulate the user object changing
       act(() => {
-        userUpdateCallbacks.forEach(fn => fn());
+        userUpdateCallbacks.forEach((fn) => fn());
       });
       // component.update();
       await waitFor(() => expect(screen.getByTestId('result')).toHaveTextContent('false|{}|true|false'));
@@ -567,7 +567,7 @@ describe('hooks', () => {
     it('should re-render after the client becomes ready', async () => {
       readySuccess = false;
       let resolveReadyPromise: (result: { success: boolean; dataReadyPromise: Promise<any> }) => void;
-      const readyPromise: Promise<any> = new Promise(res => {
+      const readyPromise: Promise<any> = new Promise((res) => {
         resolveReadyPromise = (result): void => {
           readySuccess = true;
           res(result);
@@ -731,11 +731,11 @@ describe('hooks', () => {
         variables: { foo: 'bar' },
       });
 
-      await optimizelyMock.onReady().then(res => res.dataReadyPromise);
+      await optimizelyMock.onReady().then((res) => res.dataReadyPromise);
 
       // Simulate datafile fetch completing after timeout has already passed
       // Wait for completion of dataReadyPromise
-      await optimizelyMock.onReady().then(res => res.dataReadyPromise);
+      await optimizelyMock.onReady().then((res) => res.dataReadyPromise);
 
       await waitFor(() => expect(screen.getByTestId('result')).toHaveTextContent('true|{"foo":"bar"}|true|true')); // when clientReady
     });
@@ -781,7 +781,7 @@ describe('hooks', () => {
       });
       // Simulate the user object changing
       await act(async () => {
-        userUpdateCallbacks.forEach(fn => fn());
+        userUpdateCallbacks.forEach((fn) => fn());
       });
       await waitFor(() => expect(screen.getByTestId('result')).toHaveTextContent('true|{"foo":"bar"}|true|false'));
     });
@@ -806,7 +806,7 @@ describe('hooks', () => {
       });
       // Simulate the user object changing
       await act(async () => {
-        userUpdateCallbacks.forEach(fn => fn());
+        userUpdateCallbacks.forEach((fn) => fn());
       });
       await waitFor(() => expect(screen.getByTestId('result')).toHaveTextContent('false|{}|true|false'));
     });
@@ -827,7 +827,7 @@ describe('hooks', () => {
     it('should re-render after the client becomes ready', async () => {
       readySuccess = false;
       let resolveReadyPromise: (result: { success: boolean; dataReadyPromise: Promise<any> }) => void;
-      const readyPromise: Promise<any> = new Promise(res => {
+      const readyPromise: Promise<any> = new Promise((res) => {
         resolveReadyPromise = (result): void => {
           readySuccess = true;
           res(result);
diff --git a/src/hooks.ts b/src/hooks.ts
@@ -304,7 +304,6 @@ export const useExperiment: UseExperiment = (experimentKey, options = {}, overri
       }),
     [getCurrentDecision, optimizely]
   );
-
   return [state.variation, state.clientReady, state.didTimeout];
 };
 
diff --git a/src/withOptimizely.spec.tsx b/src/withOptimizely.spec.tsx
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "React SDK",`
`3`	`3`	`"image": "mcr.microsoft.com/devcontainers/javascript-node:1-18-bullseye",`
`4`		`- "postCreateCommand": "yarn install",`
	`4`	`+ "postCreateCommand": "npm i -g yarn@1.22.22 && yarn install",`
`5`	`5`	`"customizations": {`
`6`	`6`	`"vscode": {`
`7`	`7`	`"extensions": [`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`node_modules/`
	`2`	`+.yarn/`
`2`	`3`	`lerna-debug.log`
`3`	`4`	`npm-debug.log`
`4`	`5`	`lib`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,11 @@`
`1`	`1`	`{`
`2`		`- "jest.runMode": "on-demand",`
`3`		`- "jest.jestCommandLine": "~/.nvm/nvm-exec yarn test"`
	`2`	`+ "eslint.enable": true,`
	`3`	`+ "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],`
	`4`	`+ "prettier.requireConfig": true,`
	`5`	`+ "editor.formatOnSave": false,`
	`6`	`+ "editor.codeActionsOnSave": {`
	`7`	`+ "source.fixAll.eslint": "never"`
	`8`	`+ },`
	`9`	`+`
	`10`	`+ "editor.defaultFormatter": "esbenp.prettier-vscode"`
`4`	`11`	`}`
Original file line number	Diff line number	Diff line change
`@@ -50,6 +50,7 @@ function getPlugins(env, externals) {`
`50`	`50`	`plugins.push(`
`51`	`51`	`replace({`
`52`	`52`	`'process.env.NODE_ENV': JSON.stringify(env),`
	`53`	`+ preventAssignment: false,`
`53`	`54`	`})`
`54`	`55`	`);`
`55`	`56`	`}`