Merge pull request #476 from ibi-group/code-splitting

feat(icons): code split large icons

package.json

@@ -8,6 +8,9 @@
   "workspaces": [
     "packages/*"
   ],
+  "resolutions": {
+    "react": "17.0.2"
+  },
   "devDependencies": {
     "@babel/cli": "^7.10",
     "@babel/core": "^7.10",
@@ -67,8 +70,8 @@
     "nock": "^11.7.0",
     "prettier": "^1.19.1",
     "puppeteer": "^10.2.0",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-intl": "^5.24.6",
     "react-test-renderer": "^16.14.0",
     "semantic-release": "^17.1.1",

packages/core-utils/src/__tests__/__snapshots__/query-params.js.snap

@@ -428,7 +428,7 @@ Array [
   Object {
     "applicable": [Function],
     "default": false,
-    "icon": <ForwardRef />,
+    "icon": <ForwardRef(Wheelchair) />,
     "label": "Prefer Wheelchair Accessible Routes",
     "name": "wheelchair",
     "routingTypes": Array [

packages/icons/src/companies/index.js

@@ -1,33 +1,21 @@
-import Biketown from "./biketown-icon";
-import Bird from "./bird-icon";
-import Bolt from "./bolt-icon";
-import BoltEu from "./bolt-eu-icon";
-import Car2go from "./car2go-icon";
-import Gruv from "./gruv-icon";
-import Hopr from "./hopr-icon";
-import Lime from "./lime-icon";
-import Lyft from "./lyft-icon";
-import Razor from "./razor-icon";
-import Reachnow from "./reachnow-icon";
-import Shared from "./shared-icon";
-import Spin from "./spin-icon";
-import Uber from "./uber-icon";
+/* eslint-disable import/prefer-default-export */
+import { lazy } from "react";
 
 const companyLookup = {
-  biketown: Biketown,
-  bird: Bird,
-  bolt: Bolt,
-  boltEu: BoltEu,
-  car2go: Car2go,
-  gruv: Gruv,
-  hopr: Hopr,
-  lime: Lime,
-  lyft: Lyft,
-  razor: Razor,
-  reachnow: Reachnow,
-  shared: Shared,
-  spin: Spin,
-  uber: Uber
+  biketown: lazy(() => import("./biketown-icon")),
+  bird: lazy(() => import("./bird-icon")),
+  bolt: lazy(() => import("./bolt-icon")),
+  boltEu: lazy(() => import("./bolt-eu-icon")),
+  car2go: lazy(() => import("./car2go-icon")),
+  gruv: lazy(() => import("./gruv-icon")),
+  hopr: lazy(() => import("./hopr-icon")),
+  lime: lazy(() => import("./lime-icon")),
+  lyft: lazy(() => import("./lime-icon")),
+  razor: lazy(() => import("./razor-icon")),
+  reachnow: lazy(() => import("./reachnow-icon")),
+  shared: lazy(() => import("./shared-icon")),
+  spin: lazy(() => import("./spin-icon")),
+  uber: lazy(() => import("./uber-icon"))
 };
 
 function getCompanyIcon(name) {
@@ -38,20 +26,4 @@ function getCompanyIcon(name) {
   return icon;
 }
 
-export {
-  Biketown,
-  Bird,
-  Bolt,
-  BoltEu,
-  Car2go,
-  getCompanyIcon,
-  Gruv,
-  Hopr,
-  Lime,
-  Lyft,
-  Razor,
-  Reachnow,
-  Shared,
-  Spin,
-  Uber
-};
+export { getCompanyIcon };

packages/icons/src/index.js

@@ -25,23 +25,7 @@ const {
   ClassicWalk
 } = classic;
 
-const {
-  Biketown,
-  Bird,
-  Bolt,
-  BoltEu,
-  Car2go,
-  getCompanyIcon,
-  Gruv,
-  Hopr,
-  Lime,
-  Lyft,
-  Razor,
-  Reachnow,
-  Shared,
-  Spin,
-  Uber
-} = companies;
+const { getCompanyIcon } = companies;
 
 const {
   CircleClockwise,
@@ -134,14 +118,9 @@ export {
   BikeLocker,
   BikeParking,
   BikeStaple,
-  Biketown,
-  Bird,
-  Bolt,
-  BoltEu,
   Bus,
   BusCircle,
   Car,
-  Car2go,
   Circle,
   CircleClockwise,
   CircleCounterclockwise,
@@ -161,18 +140,14 @@ export {
   Feedback,
   Ferry,
   getCompanyIcon,
-  Gruv,
   HardLeft,
   HardRight,
   Help,
   HelpSolid,
-  Hopr,
   IconRenderer,
   Info,
   Left,
   LegIcon,
-  Lime,
-  Lyft,
   Map,
   MapMarker,
   MapMarkerSolid,
@@ -182,16 +157,12 @@ export {
   Parking,
   Phone,
   Plane,
-  Razor,
-  Reachnow,
   Refresh,
   Right,
   Schedule,
-  Shared,
   SlightLeft,
   SlightRight,
   Snow,
-  Spin,
   StandardBike,
   StandardBus,
   StandardGondola,
@@ -217,7 +188,6 @@ export {
   TripPlannerSolid,
   UTurnLeft,
   UTurnRight,
-  Uber,
   Walk,
   Wes,
   WesCircle,

packages/icons/src/leg-icon.js

@@ -1,6 +1,6 @@
 import coreUtils from "@opentripplanner/core-utils";
 import PropTypes from "prop-types";
-import React from "react";
+import React, { Suspense } from "react";
 
 import { getCompanyIcon as defaultGetCompanyIcon } from "./companies";
 
@@ -9,7 +9,12 @@ const LegIcon = ({ getCompanyIcon, leg, ModeIcon, ...props }) => {
   // Check if the iconStr has a matching company icon. If so, return that.
   if (company && typeof getCompanyIcon === "function") {
     const CompanyIcon = getCompanyIcon(company);
-    if (CompanyIcon) return <CompanyIcon {...props} />;
+    if (CompanyIcon)
+      return (
+        <Suspense fallback={<span>{company}</span>}>
+          <CompanyIcon {...props} />
+        </Suspense>
+      );
   }
   let iconStr = leg.mode;
   // Do this for P&R, K&R and TNC trips without company icon

packages/trip-form/src/__mocks__/submode-options.tsx

@@ -3,6 +3,8 @@ import React from "react";
 // @ts-ignore FIXME: Create TypeScript types for the icons package.
 import * as Icons from "@opentripplanner/icons";
 
+const UberIcon = Icons.getCompanyIcon("uber");
+
 const submodeOptions = [
   {
     id: "BUS",
@@ -29,7 +31,7 @@ const submodeOptions = [
     title: "Uber",
     text: (
       <span>
-        <Icons.Uber /> Uber
+        <UberIcon /> Uber
       </span>
     )
   }

packages/trip-form/src/util.tsx

@@ -2,7 +2,7 @@ import coreUtils from "@opentripplanner/core-utils";
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore FIXME: Create TypeScript types for the icons package.
 import { getCompanyIcon } from "@opentripplanner/icons";
-import React from "react";
+import React, { Suspense } from "react";
 import { IntlShape } from "react-intl";
 
 // eslint-disable-next-line prettier/prettier
@@ -269,7 +269,9 @@ function getTransitCombinedModeOptions(
             selectedCompanies.includes(modeCompanyUpper)),
         text: (
           <span>
-            <ModeIcon mode="TRANSIT" />+{finalIcon}
+            <Suspense fallback={company || "Loading..."}>
+              <ModeIcon mode="TRANSIT" />+{finalIcon}
+            </Suspense>
           </span>
         ),
         title: modeLabel
@@ -364,7 +366,9 @@ export function getCompaniesOptions(
       selected: selectedCompanies.includes(comp.id),
       text: (
         <span>
-          {CompanyIcon && <CompanyIcon />} {comp.label}
+          <Suspense fallback={comp.label || comp.id || "Loading"}>
+            {CompanyIcon ? <CompanyIcon /> : comp.id }
+          </Suspense>
         </span>
       ),
       title: comp.label

yarn.lock

@@ -15028,15 +15028,14 @@ react-docgen@^5.0.0:
     node-dir "^0.1.10"
     strip-indent "^3.0.0"
 
-react-dom@^16.14.0:
-  version "16.14.0"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.14.0.tgz#7ad838ec29a777fb3c75c3a190f661cf92ab8b89"
-  integrity sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==
+react-dom@^17.0.2:
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
+  integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
-    prop-types "^15.6.2"
-    scheduler "^0.19.1"
+    scheduler "^0.20.2"
 
 react-draggable@^4.4.3:
   version "4.4.3"
@@ -15277,14 +15276,13 @@ react-transition-group@^4.3.0:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
-react@^16.14.0:
-  version "16.14.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"
-  integrity sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==
+react@17.0.2, react@^17.0.2:
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
+  integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
-    prop-types "^15.6.2"
 
 read-cmd-shim@^1.0.1:
   version "1.0.5"