Upgrading Plugin to use Plugins CLI v4

jest.config.js

@@ -0,0 +1,8 @@
+module.exports = (config, { isProd, isDev, isTest }) => {
+  /**
+   * Customize the Jest by modifying the config object.
+   * Consult https://jestjs.io/docs/en/configuration for more information.
+   */
+
+  return config;
+}

package.json

@@ -3,64 +3,35 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "bootstrap": "flex-plugin check-start",
-    "prebuild": "rimraf build && npm run bootstrap",
-    "build": "flex-plugin build",
-    "clear": "flex-plugin clear",
-    "predeploy": "npm run build",
-    "deploy": "flex-plugin deploy",
-    "eject": "flex-plugin eject",
-    "postinstall": "npm run bootstrap",
-    "list": "flex-plugin list",
-    "remove": "flex-plugin remove",
-    "prestart": "npm run bootstrap",
-    "start": "flex-plugin start",
-    "test": "flex-plugin test --env=jsdom"
+    "postinstall": "flex-plugin pre-script-check",
+    "build": "twilio flex:plugins:build",
+    "start": "twilio flex:plugins:start",
+    "test": "twilio flex:plugins:test -- -- --env=jsdom",
+    "deploy": "twilio flex:plugins:deploy"
   },
   "dependencies": {
-    "@craco/craco": "^5.0.2",
     "@material-ui/core": "^3.9.3",
-    "babel-polyfill": "^6.26.0",
     "clsx": "^1.1.0",
     "core-js": "^2.6.5",
-    "craco-config-flex-plugin": "^3",
-    "enzyme": "^3.10.0",
-    "enzyme-adapter-react-16": "^1.14.0",
     "file-saver": "^2.0.5",
-    "flex-plugin": "^3",
-    "flex-plugin-scripts": "^3",
+    "flex-plugin-scripts": "4.3.4",
+    "immer": "1.10.0",
     "jquery": "^3.6.0",
     "jszip": "^3.6.0",
     "jszip-utils": "^0.1.0",
-    "mailparser": "^3.2.0",
+    "mailparser": "3.5.0",
     "moment": "^2.24.0",
     "react": "16.5.2",
     "react-dom": "16.5.2",
-    "react-emotion": "9.2.6",
-    "react-scripts": "3.4.1",
-    "react-test-renderer": "^16.8.6",
     "react-text-truncate": "^0.16.0",
     "react-tiny-popover": "^4.0.0",
     "react-virtualized": "^9.22.3",
     "xlsx": "^0.17.0"
   },
   "devDependencies": {
-    "@twilio/flex-ui": "1.29.3",
-    "babel-polyfill": "^6.26.0",
-    "enzyme": "^3.10.0",
-    "enzyme-adapter-react-16": "^1.14.0",
-    "rimraf": "^3.0.0"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+    "@svgr/webpack": "5.5.0",
+    "@twilio/flex-ui": "^1",
+    "file-loader": "6.2.0",
+    "react-test-renderer": "16.5.2"
   }
 }

public/appConfig.example.js

@@ -1,20 +1,9 @@
-// your account sid
-var accountSid = 'accountSid';
-
-// set to /plugins.json for local dev
-// set to /plugins.local.build.json for testing your build
-// set to "" for the default live plugin loader
-var pluginServiceUrl = '/plugins.json';
-
 var appConfig = {
   pluginService: {
     enabled: true,
-    url: pluginServiceUrl
-  },
-  sso: {
-    accountSid: accountSid
+    url: '/plugins',
   },
   ytica: false,
-  logLevel: 'debug',
-  showSupervisorDesktopView: true
+  logLevel: 'info',
+  showSupervisorDesktopView: true,
 };

webpack.config.js

@@ -0,0 +1,20 @@
+module.exports = (config, { isProd, isDev, isTest }) => {
+  /**
+   * Customize the webpack by modifying the config object.
+   * Consult https://webpack.js.org/configuration for more information
+   */
+
+  config.module.rules = [
+    ...config.module.rules,
+    {
+      test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
+      loader: "file-loader?name=assets/[name].[hash].[ext]",
+    },
+    {
+      test: /\.mjs$/,
+      type: "javascript/auto",
+    },
+  ];
+
+  return config;
+};

webpack.dev.js

@@ -0,0 +1,8 @@
+module.exports = (config, { isProd, isDev, isTest }) => {
+  /**
+   * Customize the webpack dev-server by modifying the config object.
+   * Consult https://webpack.js.org/configuration/dev-server for more information.
+   */
+
+  return config;
+};