chore(widget): use react-app-rewired instead of craco

novuhq · Oct 2, 2023 · 81db15c · 81db15c
1 parent 8785a6d
commit 81db15c
Show file tree

Hide file tree

Showing 7 changed files with 547 additions and 893 deletions.
diff --git a/apps/widget/.babelrc b/apps/widget/.babelrc
@@ -0,0 +1,23 @@
+{
+  "presets": [
+    "@babel/preset-typescript",
+    [
+      "@babel/preset-react",
+      {
+        "runtime": "automatic"
+      }
+    ],
+    "@babel/preset-env"
+  ],
+  "plugins": [
+    "@emotion",
+    "@babel/plugin-transform-react-display-name",
+    "@babel/plugin-proposal-optional-chaining",
+    [
+      "@babel/plugin-transform-runtime",
+      {
+        "regenerator": true
+      }
+    ]
+  ]
+}
diff --git a/apps/widget/config-overrides.js b/apps/widget/config-overrides.js
@@ -0,0 +1,10 @@
+const { useBabelRc, override } = require('customize-cra');
+// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+
+function overrideConfig(config, env) {
+  const plugins = [...config.plugins, /* new BundleAnalyzerPlugin() */];
+
+  return { ...config, plugins };
+}
+
+module.exports = override(useBabelRc(), overrideConfig);
diff --git a/apps/widget/craco.config.js b/apps/widget/craco.config.js
diff --git a/apps/widget/package.json b/apps/widget/package.json
@@ -3,7 +3,7 @@
   "version": "0.20.0-alpha.0",
   "private": true,
   "scripts": {
-    "start": "craco start",
+    "start": "react-app-rewired start",
     "start:dev": "cross-env PORT=4500 pnpm start",
     "start:cli:local": "pnpm start:shell:test & pnpm start:shell:embed & cross-env PORT=3500 pnpm start",
     "start:test": "pnpm start:shell:test & pnpm start:shell:embed & cross-env NODE_ENV=test REACT_APP_API_URL=http://localhost:1336 REACT_APP_WS_URL=http://localhost:1340 PORT=3500 pnpm start",
@@ -13,9 +13,8 @@
     "start:docker": "pnpm build && pnpm start:static:build",
     "docker:build": "docker build -f ./Dockerfile -t novu-widget ./../..",
     "prebuild": "rimraf build",
-    "build": "cross-env NODE_OPTIONS=--max_old_space_size=4096 craco build",
+    "build": "cross-env NODE_OPTIONS=--max_old_space_size=4096 react-app-rewired --max_old_space_size=4096 build",
     "precommit": "lint-staged",
-    "eject": "craco eject",
     "lint": "eslint src",
     "cypress:run": "cypress run",
     "cypress:open": "cypress open",
@@ -52,8 +51,19 @@
     "webfontloader": "^1.6.28"
   },
   "devDependencies": {
-    "@craco/craco": "^7.0.0",
+    "@babel/polyfill": "^7.12.1",
+    "@babel/preset-env": "^7.13.15",
+    "@babel/preset-react": "^7.13.13",
+    "@babel/preset-typescript": "^7.13.0",
+    "@babel/runtime": "^7.20.13",
+    "@babel/plugin-proposal-optional-chaining": "^7.20.7",
+    "@babel/plugin-transform-react-display-name": "^7.18.6",
+    "@babel/plugin-transform-runtime": "^7.19.6",
     "@emotion/babel-plugin": "^11.7.2",
+    "@emotion/react": "^11.7.1",
+    "@emotion/styled": "^11.6.0",
+    "react-app-rewired": "^2.2.1",
+    "customize-cra": "^1.0.0",
     "@faker-js/faker": "^6.0.0",
     "@novu/dal": "^0.20.0-alpha.0",
     "@novu/testing": "^0.20.0-alpha.0",
@@ -62,7 +72,6 @@
     "@types/react": "17.0.62",
     "@types/react-dom": "17.0.20",
     "@types/react-router-dom": "^5.1.7",
-    "craco-antd": "^1.19.0",
     "cross-env": "^7.0.3",
     "cypress": "^12.17.2",
     "cypress-intellij-reporter": "^0.0.7",
@@ -109,8 +118,6 @@
       "**/@cypress/**",
       "**/@storybook/**",
       "**/@storybook",
-      "**/@craco",
-      "**/@craco/**",
       "**/@babel",
       "**/@babel/**"
     ]

diff --git a/apps/widget/src/components/notification-center/NotificationCenterWidget.tsx b/apps/widget/src/components/notification-center/NotificationCenterWidget.tsx
@@ -15,6 +15,7 @@ import type { INovuThemeProvider, INotificationCenterStyles } from '@novu/notifi
 import { IMessage, IOrganizationEntity, ButtonTypeEnum } from '@novu/shared';
 
 import { API_URL, WS_URL } from '../../config';
+import { isCypress } from '../../utils/browser';
 
 const DEFAULT_FONT_FAMILY = 'inherit';
 interface INotificationCenterWidgetProps {
@@ -102,7 +103,7 @@ export function NotificationCenterWidget(props: INotificationCenterWidgetProps)
       }
     };
 
-    if (process.env.NODE_ENV === 'test') {
+    if (process.env.NODE_ENV === 'test' || isCypress) {
       // eslint-disable-next-line
       (window as any).initHandler = handler;
     }

diff --git a/apps/widget/src/utils/browser.ts b/apps/widget/src/utils/browser.ts
@@ -0,0 +1,2 @@
+export const isBrowser = () => typeof window !== 'undefined';
+export const isCypress = (isBrowser() && (window as any).Cypress) || (isBrowser() && (window as any).parent.Cypress);
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export const isBrowser = () => typeof window !== 'undefined';
		export const isCypress = (isBrowser() && (window as any).Cypress) \|\| (isBrowser() && (window as any).parent.Cypress);