Cc/smaller bundle (#3725)

* remove factory exports from root entry

* autofix some sass deprecations

* add webpack-bundle-analyzer

* remove ramda

* use lodash.times not ramda.times

* fix old factory import

* fix test

* add bundle tracker

* add a few simple tests

.env.example

@@ -24,3 +24,4 @@ SOCIAL_AUTH_MICROMASTERS_LOGIN_URL=
 YOUTUBE_DEVELOPER_KEY=
 TIKA_SERVER_ENDPOINT=http://tika:9998/
 TIKA_CLIENT_ONLY=True
+WEBPACK_ANALYZE=True

frontends/infinite-corridor/package.json

@@ -31,7 +31,6 @@
     "ol-util": "workspace:*",
     "ol-widgets": "workspace:*",
     "postcss-loader": "^7.0.1",
-    "ramda": "^0.28.0",
     "react": "^16.14",
     "react-dom": "^16.14",
     "react-helmet-async": "^1.3.0",
@@ -44,6 +43,7 @@
     "swc-loader": "^0.2.3",
     "typescript": "^4.7.3",
     "webpack": "^5.71.0",
+    "webpack-bundle-analyzer": "^4.6.1",
     "webpack-bundle-tracker": "^1.4.0",
     "webpack-cli": "^4.9.2",
     "webpack-dev-middleware": "^5.3.1",

frontends/infinite-corridor/src/api/fields/factories.ts

@@ -1,7 +1,8 @@
 import { faker } from "@faker-js/faker"
-import * as R from "ramda"
-import { makePaginatedFactory, Factory } from "ol-util"
-import { LearningResourceType, factories } from "ol-search-ui"
+import { makePaginatedFactory, Factory } from "ol-util/build/factories"
+import { LearningResourceType } from "ol-search-ui"
+import * as factories from "ol-search-ui/build/factories"
+import { times } from "lodash"
 import type { FieldChannel, UserList, UserListItem } from "./interfaces"
 
 export const makeUserList: Factory<UserList> = overrides => {
@@ -10,7 +11,7 @@ export const makeUserList: Factory<UserList> = overrides => {
     short_description: faker.lorem.paragraph(),
     offered_by:        [],
     title:             faker.lorem.words(),
-    topics:            R.times(() => factories.makeTopic(), 2),
+    topics:            times(2, () => factories.makeTopic()),
     is_favorite:       faker.datatype.boolean(),
     image_src:         new URL(faker.internet.url()).toString(),
     image_description: faker.helpers.arrayElement([

frontends/infinite-corridor/src/pages/HomePage.test.tsx

@@ -2,7 +2,7 @@ import { assertInstanceOf, assertNotNil } from "ol-util"
 import { zip } from "lodash"
 import { FieldChannel, urls } from "../api/fields"
 import { urls as widgetUrls } from "../api/widgets"
-import { makeWidgetListResponse } from "ol-widgets"
+import { makeWidgetListResponse } from "ol-widgets/build/factories"
 import * as factories from "../api/fields/factories"
 import {
   screen,

frontends/infinite-corridor/src/pages/SearchPage.test.tsx

@@ -1,6 +1,6 @@
 import { when } from "jest-when"
 
-import { factories } from "ol-search-ui"
+import { makeSearchResponse } from "ol-search-ui/build/factories"
 import { buildSearchQuery } from "@mitodl/course-search-utils"
 
 import { assertInstanceOf } from "ol-util"
@@ -9,8 +9,6 @@ import { screen, renderTestApp, setMockResponse, user } from "../test-utils"
 import { fireEvent, waitFor } from "@testing-library/react"
 import { makeRequest } from "../test-utils/mockAxios"
 
-const { makeSearchResponse } = factories
-
 const expectedFacets = {
   audience:            [],
   certification:       [],

frontends/infinite-corridor/src/pages/SearchPage.tsx

@@ -2,7 +2,7 @@
 import React, { useState, useCallback } from "react"
 import Container from "@mui/material/Container"
 import Grid from "@mui/material/Grid"
-import { intersection } from "ramda"
+import { intersection } from "lodash"
 import { BannerPage, useDeviceCategory, DESKTOP } from "ol-util"
 import InfiniteScroll from "react-infinite-scroller"
 import {
@@ -76,7 +76,7 @@ const SearchPage: React.FC = () => {
   const runSearch = useCallback(
     async (text: string, activeFacets: Facets, from: number) => {
       if (activeFacets["type"]) {
-        activeFacets["type"] = intersection(activeFacets["type"], ALLOWED_TYPES)
+        activeFacets["type"] = intersection(ALLOWED_TYPES, activeFacets["type"])
       } else {
         activeFacets["type"] = ALLOWED_TYPES
       }

frontends/infinite-corridor/src/pages/field-details/EditFieldAppearanceForm.test.tsx

@@ -10,7 +10,7 @@ import { FieldChannel, urls } from "../../api/fields"
 import { urls as widgetUrls } from "../../api/widgets"
 import { waitFor } from "@testing-library/react"
 import { makeFieldViewPath } from "../urls"
-import { makeWidgetListResponse } from "ol-widgets"
+import { makeWidgetListResponse } from "ol-widgets/build/factories"
 
 const setupApis = (fieldOverrides?: Partial<FieldChannel>) => {
   const field = factory.makeField({ is_moderator: true, ...fieldOverrides })

frontends/infinite-corridor/src/pages/field-details/EditFieldBasicForm.test.tsx

@@ -7,7 +7,7 @@ import * as factory from "../../api/fields/factories"
 import { DEFAULT_PAGE_SIZE } from "../../api/fields/urls"
 import { makeFieldViewPath } from "../urls"
 import { renderTestApp, screen, setMockResponse, user } from "../../test-utils"
-import { makeWidgetListResponse } from "ol-widgets"
+import { makeWidgetListResponse } from "ol-widgets/build/factories"
 
 describe("EditFieldBasicForm", () => {
   let field: FieldChannel, publicLists: PaginatedResult<UserList>

frontends/infinite-corridor/src/pages/field-details/FieldPage.test.tsx

@@ -14,7 +14,7 @@ import {
   user,
   waitFor
 } from "../../test-utils"
-import { makeWidgetListResponse } from "ol-widgets"
+import { makeWidgetListResponse } from "ol-widgets/build/factories"
 
 jest.mock("./WidgetsList", () => {
   const actual = jest.requireActual("./WidgetsList")

frontends/infinite-corridor/src/pages/field-details/WidgetsList.test.tsx

@@ -6,7 +6,8 @@ import {
   expectProps,
   user
 } from "../../test-utils"
-import { Widget, makeWidgetListResponse, WidgetsListEditable } from "ol-widgets"
+import { Widget, WidgetsListEditable } from "ol-widgets"
+import { makeWidgetListResponse } from "ol-widgets/build/factories"
 import WidgetsList from "./WidgetsList"
 import { setMockResponse } from "../../test-utils"
 import { urls } from "../../api/widgets"

frontends/infinite-corridor/src/scss/admin.scss

@@ -78,10 +78,10 @@
 
       .three-cols {
         td {
-          width: 3 * 100% / 8;
+          width: 3 * 100% * 0.125;
 
           &:last-child {
-            width: 2 * 100% / 8;
+            width: 2 * 100% * 0.125;
           }
         }
       }

frontends/infinite-corridor/src/scss/fieldpage.scss

@@ -31,8 +31,8 @@ $avatarSize: 60px;
 $carouselSpacing: 24px;
 .ic-carousel-card {
   height:100%;
-  margin-left: $carouselSpacing/2;
-  margin-right: $carouselSpacing/2;
+  margin-left: $carouselSpacing*0.5;
+  margin-right: $carouselSpacing*0.5;
 }
 
 .ic-carousel {
@@ -56,7 +56,7 @@ $carouselSpacing: 24px;
   Caveat: This is not a good solution if there is content within $carouselSpacing
   of the carousel's left edge. But...there's not.
   */
-  transform: translateX(-$carouselSpacing/2);
+  transform: translateX(-$carouselSpacing*0.5);
   /*
   We also want the carousel contents (cards) to appear as if they are full
   width. By default, the width is 100% and since there's cell-spacing, the

frontends/infinite-corridor/webpack.config.js

@@ -4,6 +4,8 @@ const webpack = require("webpack")
 const BundleTracker = require("webpack-bundle-tracker")
 const MiniCssExtractPlugin = require("mini-css-extract-plugin")
 const CKEditorWebpackPlugin = require('@ckeditor/ckeditor5-dev-webpack-plugin')
+const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
+
 const { styles } = require('@ckeditor/ckeditor5-dev-utils')
 
 const STATS_FILEPATH = path.resolve(__dirname, "../../webpack-stats/infinite-corridor.json")
@@ -60,7 +62,7 @@ const ckeditorRules = [
 ]
 
 
-const getWebpackConfig = mode => {
+const getWebpackConfig = ({mode, analyzeBundle}) => {
   const isProduction = mode === "production"
   const publicPath = getPublicPath(isProduction)
   return {
@@ -123,7 +125,11 @@ const getWebpackConfig = mode => {
         language:                               "en",
         addMainLanguageTranslationsToAllAssets: true
       })
-    ] : []),
+    ] : []).concat(
+      analyzeBundle ? [new BundleAnalyzerPlugin({
+        analyzerMode: "static",
+      })] : []
+    ),
     resolve: {
       extensions: [".js", ".jsx", ".ts", ".tsx"]
     },
@@ -160,5 +166,7 @@ const getWebpackConfig = mode => {
 
 module.exports = (_env, argv) => {
   const mode = argv.mode || process.env.NODE_ENV || "production"
-  return getWebpackConfig(mode)
+  const analyzeBundle = process.env.WEBPACK_ANALYZE === "True"
+  const settings = { mode, analyzeBundle }
+  return getWebpackConfig(settings)
 }

frontends/ol-forms/package.json

@@ -11,6 +11,7 @@
     "@dnd-kit/sortable": "^7.0.1",
     "@dnd-kit/utilities": "^3.2.0",
     "formik": "^2.2.9",
+    "lodash": "^4.17.21",
     "react-select": "^5.4.0",
     "yup": "^0.32.11"
   }

frontends/ol-forms/src/components/SelectField.tsx

@@ -5,7 +5,7 @@ import Select, {
   SingleValue
 } from "react-select"
 import AsyncSelect from "react-select/async"
-import { isNil } from "ramda"
+import { isNil } from "lodash"
 
 export interface Option {
   label: string

frontends/ol-search-ui/assets/learning-resource-card.scss

@@ -1,3 +1,4 @@
+@use "sass:math";
 
 $lightText: #8c8c8c !default;
 $spacer: 0.75rem !default;
@@ -52,8 +53,8 @@ $smallFontSize: 0.75em !default;
     The column-gap property would be a nicer solution, but it doesn't have the
     best browser support yet.
     */
-    margin-top: $spacer/2;
-    margin-bottom: $spacer/2;
+    margin-top: math.div($spacer, 2);
+    margin-bottom: math.div($spacer, 2);
     &:first-child {
       margin-top: 0; 
     }

frontends/ol-search-ui/package.json

@@ -8,6 +8,7 @@
     "@faker-js/faker": "^7.3.0",
     "@mui/icons-material": "^5.8.4",
     "@mui/material": "^5.9.0",
+    "lodash": "^4.17.21",
     "ol-forms": "workspace:*",
     "ol-util": "workspace:*"
   },

frontends/ol-search-ui/src/components/ExpandedLearningResourceDisplay.tsx

@@ -1,9 +1,9 @@
 import React from "react"
 import striptags from "striptags"
 import { decode } from "html-entities"
+import { emptyOrNil } from "ol-util"
 
 import TruncatedText from "./TruncatedText"
-import R from "ramda"
 
 import ShareTooltip from "./ShareTooltip"
 
@@ -13,7 +13,6 @@ import {
   minPrice,
   getStartDate,
   getInstructorName,
-  emptyOrNil,
   languageName,
   resourceThumbnailSrc,
   CertificateIcon,
@@ -158,7 +157,7 @@ export default function ExpandedLearningResourceDisplay(props: Props) {
         {cost ? lrInfoRow("Cost:", cost) : lrInfoRow("Cost:", "Free")}
         {selectedRun?.level ? lrInfoRow("Level:", selectedRun.level) : null}
         {!emptyOrNil(instructors) ?
-          lrInfoRow("Instructors:", R.join(", ", instructors)) :
+          lrInfoRow("Instructors:", instructors.join(", ")) :
           null}
         {object.object_type === LearningResourceType.Program &&
         object.item_count ?

frontends/ol-search-ui/src/components/Facet.tsx

@@ -1,5 +1,4 @@
 import React, { useState } from "react"
-import { contains } from "ramda"
 
 import SearchFacetItem from "./SearchFacetItem"
 import { Aggregation } from "@mitodl/course-search-utils"
@@ -34,7 +33,7 @@ function SearchFacet(props: Props) {
                 <SearchFacetItem
                   key={i}
                   facet={facet}
-                  isChecked={contains(facet.key, currentlySelected || [])}
+                  isChecked={currentlySelected.includes(facet.key)}
                   onUpdate={onUpdate}
                   name={name}
                 />

frontends/ol-search-ui/src/factories.ts

@@ -1,9 +1,8 @@
 //@ts-expect-error casual-browserify does not have typescript types
 import casual from "casual-browserify"
 import { faker } from "@faker-js/faker"
-import R from "ramda"
 import { DATE_FORMAT } from "./util"
-import { Factory } from "ol-util"
+import { Factory } from "ol-util/build/factories"
 import {
   CourseTopic,
   LearningResourceResult,
@@ -13,7 +12,7 @@ import {
   CardMinimalResource,
   EmbedlyConfig
 } from "./interfaces"
-import { pick } from "lodash"
+import { pick, times } from "lodash"
 
 const OPEN_CONTENT = "Open Content"
 const PROFESSIONAL = "Professional Offerings"
@@ -51,7 +50,7 @@ export const makeCourseResult: Factory<LearningResourceResult> = overrides => ({
   offered_by:        [casual.random_element(["edx", "ocw"])],
   topics:            [casual.word, casual.word],
   object_type:       LearningResourceType.Course,
-  runs:              R.times(() => makeRun(), 3),
+  runs:              times(3, () => makeRun()),
   is_favorite:       casual.coin_flip,
   lists:             casual.random_element([[], [100, 200]]),
   audience:          casual.random_element([
@@ -127,7 +126,7 @@ export const makeSearchResponse = (
   type: string | null = null,
   withFacets = true
 ) => {
-  const hits = R.times(() => makeSearchResult(type), pageSize)
+  const hits = times(pageSize, () => makeSearchResult(type))
   return {
     hits: {
       total,
@@ -175,10 +174,10 @@ export const makeLearningResource: Factory<LearningResource> = overrides => {
     id:          faker.unique(faker.datatype.number),
     title:       faker.lorem.words(),
     image_src:   new URL(faker.internet.url()).toString(),
-    topics:      R.times(() => makeTopic(), 2),
+    topics:      times(2, () => makeTopic()),
     object_type: makeLearningResourceType(),
     platform:    faker.lorem.word(),
-    runs:        R.times(() => makeRun(), 3),
+    runs:        times(3, () => makeRun()),
     lists:       [],
     ...overrides
   }

frontends/ol-search-ui/src/index.ts

@@ -1,3 +1,2 @@
 export * from "./components"
 export * from "./interfaces"
-export * as factories from "./factories"

frontends/ol-search-ui/src/util.tsx

@@ -7,10 +7,9 @@ import {
   LearningResourceType as LR
 } from "./interfaces"
 import React, { useState, useEffect } from "react"
-import R from "ramda"
+import { capitalize, emptyOrNil } from "ol-util"
 import LocaleCode from "locale-code"
 import Decimal from "decimal.js-light"
-import { F } from "ts-toolbelt"
 
 export const getImageSrc = (
   resource: { image_src?: string | null; platform?: string | null },
@@ -196,8 +195,6 @@ export const getInstructorName = (instructor: CourseInstructor) => {
   return ""
 }
 
-export const emptyOrNil = R.either(R.isEmpty, R.isNil)
-
 export const languageName = (langCode: string | null): string =>
   LocaleCode.getLanguageName(
     `${langCode ? langCode.split("-")[0].toLowerCase() : "en"}-US`
@@ -221,9 +218,3 @@ const formatPrice = (price: number | null | undefined): string => {
 
 export const absolutizeURL = (url: string) =>
   new URL(url, window.location.origin).toString()
-
-// @ts-expect-error typescript complains about getting 0 arguments
-export const capitalize = R.converge(R.concat(), [
-  R.compose(R.toUpper, R.head),
-  R.tail
-]) as F.Curry<(text: string) => string>

frontends/ol-util/package.json

@@ -13,8 +13,8 @@
     "@dnd-kit/utilities": "^3.2.0",
     "@faker-js/faker": "^7.3.0",
     "classnames": "^2.3.1",
+    "lodash": "^4.17.21",
     "nuka-carousel": "^5.2.0",
-    "qs": "^6.11.0",
-    "ramda": "^0.28.0"
+    "qs": "^6.11.0"
   }
 }

frontends/ol-util/src/factories.ts

@@ -1,4 +1,5 @@
 import type { PaginatedResult } from "./interfaces"
+import { times } from "lodash"
 
 type Factory<T, U = never> = (overrides?: Partial<T>, options?: U) => T
 
@@ -14,9 +15,7 @@ const makePaginatedFactory =
       previous?: string | null
     } = {}
     ): PaginatedResult<T> => {
-      const results = Array(count)
-        .fill(null)
-        .map(() => makeResult())
+      const results = times(count, () => makeResult())
       return {
         results,
         count,