@openedx/frontend-base 1.0.0-alpha.1 → 1.0.0-alpha.10

package/runtime/react/hooks/theme/useTrackColorSchemeChoice.test.ts

@@ -0,0 +1,54 @@
+import { renderHook } from '@testing-library/react';
+import { sendTrackEvent } from '../../../analytics';
+import useTrackColorSchemeChoice from './useTrackColorSchemeChoice';
+
+jest.mock('../../../analytics');
+
+const mockAddEventListener = jest.fn();
+const mockRemoveEventListener = jest.fn();
+let matchesMock;
+
+Object.defineProperty(window, 'matchMedia', {
+  value: jest.fn(() => ({
+    addEventListener: mockAddEventListener,
+    removeEventListener: mockRemoveEventListener,
+    matches: matchesMock,
+  })),
+});
+
+describe('useTrackColorSchemeChoice hook', () => {
+  afterEach(() => {
+    mockAddEventListener.mockClear();
+    mockRemoveEventListener.mockClear();
+    jest.mocked(sendTrackEvent).mockClear();
+  });
+
+  it('sends dark preferred color schema event if query matches', async () => {
+    matchesMock = true;
+    renderHook(() => useTrackColorSchemeChoice());
+
+    expect(sendTrackEvent).toHaveBeenCalledTimes(1);
+    expect(sendTrackEvent).toHaveBeenCalledWith(
+      'openedx.ui.frontend-base.prefers-color-scheme.selected',
+      { preferredColorScheme: 'dark' },
+    );
+  });
+
+  it('sends light preferred color schema event if query does not match', async () => {
+    matchesMock = false;
+    renderHook(() => useTrackColorSchemeChoice());
+
+    expect(sendTrackEvent).toHaveBeenCalledTimes(1);
+    expect(sendTrackEvent).toHaveBeenCalledWith(
+      'openedx.ui.frontend-base.prefers-color-scheme.selected',
+      { preferredColorScheme: 'light' },
+    );
+  });
+
+  it('adds change event listener to matchMedia query', async () => {
+    renderHook(() => useTrackColorSchemeChoice());
+
+    expect(mockAddEventListener).toHaveBeenCalledTimes(1);
+    expect(mockAddEventListener).toHaveBeenCalledWith('change', expect.any(Function));
+  });
+});

package/runtime/react/hooks/theme/useTrackColorSchemeChoice.ts

@@ -0,0 +1,30 @@
+import { useEffect } from 'react';
+import { sendTrackEvent } from '../../../analytics';
+
+/**
+ * A React hook that tracks user's preferred color scheme (light or dark) and sends respective
+ * event to the tracking service.
+ *
+ * @memberof module:React
+ */
+const useTrackColorSchemeChoice = () => {
+  useEffect(() => {
+    const trackColorSchemeChoice = ({ matches }) => {
+      const preferredColorScheme = matches ? 'dark' : 'light';
+      sendTrackEvent('openedx.ui.frontend-base.prefers-color-scheme.selected', { preferredColorScheme });
+    };
+    const colorSchemeQuery = window.matchMedia?.('(prefers-color-scheme: dark)');
+    if (colorSchemeQuery) {
+      // send user's initial choice
+      trackColorSchemeChoice(colorSchemeQuery);
+      colorSchemeQuery.addEventListener('change', trackColorSchemeChoice);
+    }
+    return () => {
+      if (colorSchemeQuery) {
+        colorSchemeQuery.removeEventListener('change', trackColorSchemeChoice);
+      }
+    };
+  }, []);
+};
+
+export default useTrackColorSchemeChoice;

package/runtime/react/hooks/theme/utils.ts

@@ -0,0 +1,11 @@
+/**
+ * Iterates through each given `<link>` element and removes it from the DOM.
+ * @param {HTMLLinkElement[]} existingLinks
+ */
+export const removeExistingLinks = (existingLinks) => {
+  existingLinks.forEach((link) => {
+    link.remove();
+  });
+};
+
+export const isEmptyObject = (obj) => !obj || Object.keys(obj).length === 0;

package/runtime/react/hooks/useActiveRoles.ts

@@ -0,0 +1,15 @@
+import { useState } from 'react';
+import { getActiveRoles } from '../../config';
+import { ACTIVE_ROLES_CHANGED } from '../../constants';
+import useSiteEvent from './useSiteEvent';
+
+const useActiveRoles = () => {
+  const [roles, setRoles] = useState<string[]>(getActiveRoles());
+  useSiteEvent(ACTIVE_ROLES_CHANGED, () => {
+    setRoles(getActiveRoles());
+  });
+
+  return roles;
+};
+
+export default useActiveRoles;

package/runtime/react/hooks/useActiveRouteRoleWatcher.ts

@@ -0,0 +1,31 @@
+import { useCallback, useEffect } from 'react';
+import { useMatches } from 'react-router';
+import { setActiveRouteRoles } from '../../config';
+import { isRoleRouteObject } from '../../routing';
+
+const useActiveRouteRoleWatcher = () => {
+  const matches = useMatches();
+
+  // We create this callback so we can use it right away to populate the default state value.
+  const findActiveRouteRoles = useCallback(() => {
+    // Starts with the widget roles and adds the others in.
+    const roles: string[] = [];
+
+    // Route roles
+    for (const match of matches) {
+      if (isRoleRouteObject(match)) {
+        if (!roles.includes(match.handle.role)) {
+          roles.push(match.handle.role);
+        }
+      }
+    }
+
+    return roles;
+  }, [matches]);
+
+  useEffect(() => {
+    setActiveRouteRoles(findActiveRouteRoles());
+  }, [matches, findActiveRouteRoles]);
+};
+
+export default useActiveRouteRoleWatcher;

package/runtime/react/hooks/useAppConfig.ts

@@ -0,0 +1,9 @@
+import { useContext } from 'react';
+import CurrentAppContext from '../CurrentAppContext';
+
+const useAppConfig = () => {
+  const { appConfig } = useContext(CurrentAppContext);
+  return appConfig;
+};
+
+export default useAppConfig;

package/runtime/react/hooks/useAuthenticatedUser.test.tsx

@@ -0,0 +1,41 @@
+import { act, renderHook } from '@testing-library/react';
+import { setAuthenticatedUser } from '../../auth';
+import { initializeMockApp } from '../../testing';
+import SiteProvider from '../SiteProvider';
+import useAuthenticatedUser from './useAuthenticatedUser';
+
+describe('useAuthenticatedUser', () => {
+  it('returns null when the user is anonymous', () => {
+    const { result } = renderHook(() => useAuthenticatedUser());
+    expect(result.current).toBeNull();
+  });
+
+  describe('with a user', () => {
+    const user = {
+      administrator: true,
+      email: 'admin@example.com',
+      name: 'Admin',
+      roles: ['admin'],
+      userId: 1,
+      username: 'admin-user',
+      avatar: 'http://localhost/admin.png',
+    };
+
+    beforeEach(() => {
+      initializeMockApp({
+        authenticatedUser: user,
+      });
+    });
+
+    afterEach(() => {
+      act(() => {
+        setAuthenticatedUser(null);
+      });
+    });
+
+    it('returns a User when the user exists', () => {
+      const { result } = renderHook(() => useAuthenticatedUser(), { wrapper: SiteProvider });
+      expect(result.current).toBe(user);
+    });
+  });
+});

package/runtime/react/hooks/useAuthenticatedUser.ts

@@ -0,0 +1,9 @@
+import { useContext } from 'react';
+import SiteContext from '../SiteContext';
+
+const useAuthenticatedUser = () => {
+  const { authenticatedUser } = useContext(SiteContext);
+  return authenticatedUser;
+};
+
+export default useAuthenticatedUser;

package/runtime/react/hooks/useSiteConfig.test.tsx

@@ -0,0 +1,13 @@
+import { renderHook } from '@testing-library/react';
+import siteConfig from 'site.config';
+import { EnvironmentTypes } from '../../../types';
+import useSiteConfig from './useSiteConfig';
+
+describe('useSiteConfig', () => {
+  it('returns the site config', () => {
+    const { result } = renderHook(() => useSiteConfig());
+    expect(result.current).toHaveProperty('apps', siteConfig.apps);
+    expect(result.current).toHaveProperty('environment', EnvironmentTypes.TEST);
+    expect(result.current).toHaveProperty('baseUrl', 'http://localhost:8080');
+  });
+});

package/runtime/react/hooks/useSiteConfig.ts

@@ -0,0 +1,9 @@
+import { useContext } from 'react';
+import SiteContext from '../SiteContext';
+
+const useSiteConfig = () => {
+  const { siteConfig } = useContext(SiteContext);
+  return siteConfig;
+};
+
+export default useSiteConfig;

package/runtime/react/hooks/useSiteEvent.ts

@@ -0,0 +1,24 @@
+import { useEffect } from 'react';
+import { subscribe, unsubscribe } from '../../subscriptions';
+
+/**
+ * A React hook that allows functional components to subscribe to application events.  This should
+ * be used sparingly - for the most part, Context should be used higher-up in the application to
+ * provide necessary data to a given component, rather than utilizing a non-React-like Pub/Sub
+ * mechanism.
+ *
+ * @memberof module:React
+ * @param {string} type
+ * @param {function} callback
+ */
+const useSiteEvent = (type, callback) => {
+  useEffect(() => {
+    subscribe(type, callback);
+
+    return () => {
+      unsubscribe(type, callback);
+    };
+  }, [callback, type]);
+};
+
+export default useSiteEvent;

package/runtime/react/reducers.ts

@@ -0,0 +1,40 @@
+import {
+  SET_THEME_VARIANT,
+  SET_IS_THEME_LOADED,
+} from './constants';
+
+export function themeReducer(state, action) {
+  switch (action.type) {
+    case SET_THEME_VARIANT: {
+      const requestedThemeVariant = action.payload;
+      return {
+        ...state,
+        themeVariant: requestedThemeVariant,
+      };
+    }
+    case SET_IS_THEME_LOADED: {
+      const requestedIsThemeLoaded = action.payload;
+      return {
+        ...state,
+        isThemeLoaded: requestedIsThemeLoaded,
+      };
+    }
+    default:
+      return state;
+  }
+}
+
+const setThemeVariant = (payload) => ({
+  type: SET_THEME_VARIANT,
+  payload,
+});
+
+const setThemeLoaded = (payload) => ({
+  type: SET_IS_THEME_LOADED,
+  payload,
+});
+
+export const themeActions = {
+  setThemeVariant,
+  setThemeLoaded,
+};

package/runtime/setupTest.js

@@ -12,38 +12,3 @@ jest.mock('universal-cookie', () => {
 });
 
 mergeSiteConfig(siteConfig);
-
-global.PARAGON_THEME = {
-  paragon: {
-    version: '1.0.0',
-    themeUrls: {
-      core: {
-        fileName: 'core.min.css',
-      },
-      defaults: {
-        light: 'light',
-      },
-      variants: {
-        light: {
-          fileName: 'light.min.css',
-        },
-      },
-    },
-  },
-  brand: {
-    version: '1.0.0',
-    themeUrls: {
-      core: {
-        fileName: 'core.min.css',
-      },
-      defaults: {
-        light: 'light',
-      },
-      variants: {
-        light: {
-          fileName: 'light.min.css',
-        },
-      },
-    },
-  },
-};

package/runtime/slots/widget/iframe/hooks.ts

@@ -127,7 +127,7 @@ export function dispatchUnmountedEvent() {
  */
 export function useElementSize() {
   // Holds a reference to the ResizeObserver
-  const observerRef = useRef<ResizeObserver>();
+  const observerRef = useRef<ResizeObserver | null>(null);
 
   const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
   const [offset, setOffset] = useState({ x: 0, y: 0 });

package/runtime/testing/initializeMockApp.ts

@@ -1,5 +1,7 @@
 import siteConfig from 'site.config';
 
+import { LocalizedMessages, User } from '../../types';
+
 import { configureAnalytics, MockAnalyticsService } from '../analytics';
 import { configureAuth, MockAuthService, setAuthenticatedUser } from '../auth';
 import { getSiteConfig, mergeSiteConfig } from '../config';
@@ -47,6 +49,9 @@ import mockMessages from './mockMessages';
 export default function initializeMockApp({
   messages = mockMessages,
   authenticatedUser = null,
+}: {
+  messages?: LocalizedMessages,
+  authenticatedUser?: User | null,
 } = {}) {
   const config = siteConfig;
   mergeSiteConfig(config);

package/shell/app.scss

@@ -1,4 +1,5 @@
-@use "@openedx/paragon/scss/core/core.scss";
+@use "@openedx/paragon/dist/core.min.css";
+@use "@openedx/paragon/dist/light.min.css";
 
 .flex-basis-0 {
   flex-basis: 0 !important;

package/shell/jest.config.js

@@ -7,6 +7,7 @@ module.exports = {
     '\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/__mocks__/file.js',
     '\\.(css|scss)$': require.resolve('identity-obj-proxy'),
     'site.config': '<rootDir>/site.config.test.tsx',
+    '^@src/(.*)$': '<rootDir>/src/$1',
   },
   testEnvironment: 'jsdom',
   testEnvironmentOptions: {

package/shell/setupTest.js

@@ -11,38 +11,3 @@ jest.mock('universal-cookie', () => {
 });
 
 mergeSiteConfig(siteConfig);
-
-global.PARAGON_THEME = {
-  paragon: {
-    version: '1.0.0',
-    themeUrls: {
-      core: {
-        fileName: 'core.min.css',
-      },
-      defaults: {
-        light: 'light',
-      },
-      variants: {
-        light: {
-          fileName: 'light.min.css',
-        },
-      },
-    },
-  },
-  brand: {
-    version: '1.0.0',
-    themeUrls: {
-      core: {
-        fileName: 'core.min.css',
-      },
-      defaults: {
-        light: 'light',
-      },
-      variants: {
-        light: {
-          fileName: 'light.min.css',
-        },
-      },
-    },
-  },
-};

package/shell/site.tsx

@@ -25,7 +25,7 @@ subscribe(SITE_READY, async () => {
   root.render(
     <StrictMode>
       <QueryClientProvider client={queryClient}>
-        <RouterProvider router={router} />,
+        <RouterProvider router={router} />
       </QueryClientProvider>
     </StrictMode>
   );

package/tools/dist/cli/openedx.js

@@ -8,8 +8,6 @@ const chalk_1 = __importDefault(require("chalk"));
 const fs_1 = require("fs");
 const path_1 = __importDefault(require("path"));
 const types_1 = require("../types");
-const pack_1 = __importDefault(require("./commands/pack"));
-const release_1 = __importDefault(require("./commands/release"));
 const ensureConfigFilenameOption_1 = require("./utils/ensureConfigFilenameOption");
 const prettyPrintTitle_1 = __importDefault(require("./utils/prettyPrintTitle"));
 const printUsage_1 = __importDefault(require("./utils/printUsage"));
@@ -26,18 +24,6 @@ else if ((0, fs_1.existsSync)(path_1.default.resolve(__dirname, '../../../packag
 }
 (0, prettyPrintTitle_1.default)(`Open edX CLI v${version}`);
 switch (commandName) {
-    case types_1.CommandTypes.RELEASE:
-        (0, release_1.default)();
-        break;
-    case types_1.CommandTypes.PACK:
-        if (process.argv[2] === undefined) {
-            console.log(chalk_1.default.red(`${chalk_1.default.bold.red(commandName)} command usage: specify a peer folder where the command should install the package:
-
-      npm run pack my-project`));
-            process.exit(1);
-        }
-        (0, pack_1.default)();
-        break;
     case types_1.CommandTypes.LINT:
         (0, ensureConfigFilenameOption_1.ensureConfigFilenameOption)(types_1.ConfigTypes.LINT, ['-c', '--config']);
         require('.bin/eslint');
@@ -78,7 +64,7 @@ switch (commandName) {
             srcFoldersString = `{${srcFoldersString}}`;
         }
         process.argv = process.argv.concat([
-            '--format', 'node_modules/@openedx/frontend-base/dist/tools/cli/utils/formatter.js',
+            '--format', 'node_modules/@openedx/frontend-base/tools/dist/cli/utils/formatter.js',
             '--ignore', `${srcFoldersString}/**/*.json`,
             '--ignore', `${srcFoldersString}/**/*.d.ts`,
             '--out-file', './temp/formatjs/Default.messages.json',

package/tools/dist/cli/utils/printUsage.js

@@ -11,15 +11,6 @@ function printUsage() {
     console.log('openedx <command> <options>\n');
     console.groupEnd();
     console.log('Commands:\n');
-    console.group();
-    console.log(`${chalk_1.default.bold('release')}\n`);
-    console.group();
-    console.log(`Compile source code for release as a library.  Compiled code is put into the dist folder.\n`);
-    console.groupEnd();
-    console.log(`${chalk_1.default.bold('pack')} <peer folder>\n`);
-    console.group();
-    console.log(`Package the dist folder as an NPM-compatible .tgz file suitable for use with npm install, then install it in the specified peer folder.  The folder is assumed to be a peer of this repository, do not include a path.\n`);
-    console.groupEnd();
     console.log(`${chalk_1.default.bold('lint')} <eslint options>\n`);
     console.group();
     console.log(`Runs ESLint on the source code. Requires an ${chalk_1.default.bold('eslint.config.js')} file.\n`);

package/tools/dist/eslint/base.eslint.config.js

@@ -31,7 +31,6 @@ module.exports = tseslint.config(eslint.configs.recommended, ...tseslint.configs
             ...globals.browser,
             ...globals.node,
             ...globals.jest,
-            PARAGON_THEME: 'readonly',
             newrelic: 'readonly',
         },
     },
@@ -79,6 +78,7 @@ module.exports = tseslint.config(eslint.configs.recommended, ...tseslint.configs
                 caughtErrors: 'none',
             }],
         '@typescript-eslint/no-empty-function': 'off',
+        '@typescript-eslint/prefer-nullish-coalescing': 'off',
         '@stylistic/semi': ['error', 'always', { omitLastInOneLineBlock: true, omitLastInOneLineClassBody: true }],
         '@stylistic/quotes': ['error', 'single', {
                 avoidEscape: true,

package/tools/dist/jest/jest.config.js

@@ -9,6 +9,7 @@ module.exports = {
     moduleNameMapper: {
         '\\.(css|scss)$': require.resolve('identity-obj-proxy'),
         'site.config': path.resolve(process.cwd(), './site.config.test.tsx'),
+        '^@src/(.*)$': '<rootDir>/src/$1',
     },
     collectCoverageFrom: [
         'src/**/*.{js,jsx,ts,tsx}',

package/tools/dist/types.js

@@ -12,8 +12,6 @@ var ConfigTypes;
 })(ConfigTypes || (exports.ConfigTypes = ConfigTypes = {}));
 var CommandTypes;
 (function (CommandTypes) {
-    CommandTypes["RELEASE"] = "release";
-    CommandTypes["PACK"] = "pack";
     CommandTypes["LINT"] = "lint";
     CommandTypes["TEST"] = "test";
     CommandTypes["BUILD"] = "build";

package/tools/dist/webpack/common-config/all/getStylesheetRule.js

@@ -87,7 +87,7 @@ function getStyleUseConfig(mode) {
                     ],
                     // Silences compiler deprecation warnings.  They mostly come from bootstrap and/or paragon.
                     quietDeps: true,
-                    silenceDeprecations: ['abs-percent', 'color-functions', 'import', 'mixed-decls', 'global-builtin', 'legacy-js-api'],
+                    silenceDeprecations: ['abs-percent', 'color-functions', 'import', 'global-builtin', 'legacy-js-api'],
                 },
             },
         },

package/tools/dist/webpack/webpack.config.build.js

@@ -9,13 +9,9 @@ const path_1 = __importDefault(require("path"));
 const webpack_bundle_analyzer_1 = require("webpack-bundle-analyzer");
 const webpack_remove_empty_scripts_1 = __importDefault(require("webpack-remove-empty-scripts"));
 const common_config_1 = require("./common-config");
-const ParagonWebpackPlugin_1 = __importDefault(require("./plugins/paragon-webpack-plugin/ParagonWebpackPlugin"));
 const getLocalAliases_1 = __importDefault(require("./utils/getLocalAliases"));
 const getPublicPath_1 = __importDefault(require("./utils/getPublicPath"));
 const getResolvedSiteConfigPath_1 = __importDefault(require("./utils/getResolvedSiteConfigPath"));
-const paragonUtils_1 = require("./utils/paragonUtils");
-const paragonThemeCss = (0, paragonUtils_1.getParagonThemeCss)(process.cwd());
-const brandThemeCss = (0, paragonUtils_1.getParagonThemeCss)(process.cwd(), { isBrandOverride: true });
 const aliases = (0, getLocalAliases_1.default)();
 const resolvedSiteConfigPath = (0, getResolvedSiteConfigPath_1.default)('site.config.build.tsx');
 const config = {
@@ -23,8 +19,6 @@ const config = {
     devtool: 'source-map',
     entry: {
         app: path_1.default.resolve(process.cwd(), 'node_modules/@openedx/frontend-base/shell/site'),
-        ...(0, paragonUtils_1.getParagonEntryPoints)(paragonThemeCss),
-        ...(0, paragonUtils_1.getParagonEntryPoints)(brandThemeCss),
     },
     output: {
         filename: '[name].[chunkhash].js',
@@ -36,6 +30,7 @@ const config = {
         alias: {
             ...aliases,
             'site.config': resolvedSiteConfigPath,
+            '@src': path_1.default.resolve(process.cwd(), 'src'),
         },
         extensions: ['.js', '.jsx', '.ts', '.tsx'],
     },
@@ -51,10 +46,6 @@ const config = {
         runtimeChunk: 'single',
         splitChunks: {
             chunks: 'all',
-            cacheGroups: {
-                ...(0, paragonUtils_1.getParagonCacheGroups)(paragonThemeCss),
-                ...(0, paragonUtils_1.getParagonCacheGroups)(brandThemeCss),
-            },
         },
         minimizer: (0, common_config_1.getImageMinimizer)(),
     },
@@ -65,7 +56,6 @@ const config = {
         // See: https://www.npmjs.com/package/webpack-remove-empty-scripts#usage-with-mini-css-extract-plugin
         new webpack_remove_empty_scripts_1.default(),
         // Writes the extracted CSS from each entry to a file in the output directory.
-        new ParagonWebpackPlugin_1.default(),
         new mini_css_extract_plugin_1.default({
             filename: '[name].[chunkhash].css',
         }),

package/tools/dist/webpack/webpack.config.dev.js

@@ -9,20 +9,14 @@ const mini_css_extract_plugin_1 = __importDefault(require("mini-css-extract-plug
 const path_1 = __importDefault(require("path"));
 const webpack_remove_empty_scripts_1 = __importDefault(require("webpack-remove-empty-scripts"));
 const common_config_1 = require("./common-config");
-const ParagonWebpackPlugin_1 = __importDefault(require("./plugins/paragon-webpack-plugin/ParagonWebpackPlugin"));
 const getLocalAliases_1 = __importDefault(require("./utils/getLocalAliases"));
 const getPublicPath_1 = __importDefault(require("./utils/getPublicPath"));
 const getResolvedSiteConfigPath_1 = __importDefault(require("./utils/getResolvedSiteConfigPath"));
-const paragonUtils_1 = require("./utils/paragonUtils");
-const paragonThemeCss = (0, paragonUtils_1.getParagonThemeCss)(process.cwd());
-const brandThemeCss = (0, paragonUtils_1.getParagonThemeCss)(process.cwd(), { isBrandOverride: true });
 const aliases = (0, getLocalAliases_1.default)();
 const resolvedSiteConfigPath = (0, getResolvedSiteConfigPath_1.default)('site.config.dev.tsx');
 const config = {
     entry: {
         app: path_1.default.resolve(process.cwd(), 'node_modules/@openedx/frontend-base/shell/site'),
-        ...(0, paragonUtils_1.getParagonEntryPoints)(paragonThemeCss),
-        ...(0, paragonUtils_1.getParagonEntryPoints)(brandThemeCss),
     },
     output: {
         path: path_1.default.resolve(process.cwd(), './dist'),
@@ -32,6 +26,7 @@ const config = {
         alias: {
             ...aliases,
             'site.config': resolvedSiteConfigPath,
+            '@src': path_1.default.resolve(process.cwd(), 'src'),
         },
         extensions: ['.js', '.jsx', '.ts', '.tsx'],
     },
@@ -47,10 +42,6 @@ const config = {
     optimization: {
         splitChunks: {
             chunks: 'all',
-            cacheGroups: {
-                ...(0, paragonUtils_1.getParagonCacheGroups)(paragonThemeCss),
-                ...(0, paragonUtils_1.getParagonCacheGroups)(brandThemeCss),
-            },
         },
         minimizer: (0, common_config_1.getImageMinimizer)(),
     },
@@ -60,7 +51,6 @@ const config = {
         // This helps to clean up the final bundle application
         // See: https://www.npmjs.com/package/webpack-remove-empty-scripts#usage-with-mini-css-extract-plugin
         new webpack_remove_empty_scripts_1.default(),
-        new ParagonWebpackPlugin_1.default(),
         // Writes the extracted CSS from each entry to a file in the output directory.
         new mini_css_extract_plugin_1.default({
             filename: '[name].css',
@@ -72,5 +62,9 @@ const config = {
     // This configures webpack-dev-server which serves bundles from memory and provides live
     // reloading.
     devServer: (0, common_config_1.getDevServer)(),
+    // Limit the number of watched files to avoid `inotify` resource starvation.
+    watchOptions: {
+        ignored: /node_modules/
+    }
 };
 exports.default = config;