interface: rewrite lodash imports with babel

Due to lodash's packaging mechanism, it is unable to treeshake unless
you always import from it in a certain fashion. This commit adds a babel
plugin to rewrite these imports for us.

pkg/interface/config/webpack.prod.js

@@ -17,6 +17,7 @@ module.exports = {
           options: {
             presets: ['@babel/preset-env', '@babel/typescript', '@babel/preset-react'],
             plugins: [
+              'lodash',
               '@babel/transform-runtime',
               '@babel/plugin-proposal-object-rest-spread',
               '@babel/plugin-proposal-optional-chaining',

pkg/interface/package-lock.json

@@ -2484,9 +2484,9 @@
       "dev": true
     },
     "aws-sdk": {
-      "version": "2.726.0",
-      "resolved": "https://registry.npmjs.org/aws-sdk/-/aws-sdk-2.726.0.tgz",
-      "integrity": "sha512-QRQ7MaW5dprdr/T3vCTC+J8TeUfpM45yWsBuATPcCV/oO8afFHVySwygvGLY4oJuo5Mf4mJn3+JYTquo6CqiaA==",
+      "version": "2.771.0",
+      "resolved": "https://registry.npmjs.org/aws-sdk/-/aws-sdk-2.771.0.tgz",
+      "integrity": "sha512-fqNGusCwkdemx3yFqvQbU1+xq/PB2wGq7EQIrrTZx/zxfXUp+7+PnrHzXtViCRghN0tylLghBfWYD4VcVcqi7g==",
       "requires": {
         "buffer": "4.9.2",
         "events": "1.1.1",
@@ -2561,6 +2561,19 @@
         "object.assign": "^4.1.0"
       }
     },
+    "babel-plugin-lodash": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/babel-plugin-lodash/-/babel-plugin-lodash-3.3.4.tgz",
+      "integrity": "sha512-yDZLjK7TCkWl1gpBeBGmuaDIFhZKmkoL+Cu2MUUjv5VxUZx/z7tBGBCBcQs5RI1Bkz5LLmNdjx7paOyQtMovyg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-module-imports": "^7.0.0-beta.49",
+        "@babel/types": "^7.0.0-beta.49",
+        "glob": "^7.1.1",
+        "lodash": "^4.17.10",
+        "require-package-name": "^2.0.1"
+      }
+    },
     "babel-plugin-root-import": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-root-import/-/babel-plugin-root-import-6.5.0.tgz",
@@ -6290,6 +6303,12 @@
       "resolved": "https://registry.npmjs.org/lodash.chunk/-/lodash.chunk-4.2.0.tgz",
       "integrity": "sha1-ZuXOH3btJ7QwPYxlEujRIW6BBrw="
     },
+    "lodash.difference": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.difference/-/lodash.difference-4.5.0.tgz",
+      "integrity": "sha1-nMtOUF1Ia5FlE0V3KIWi3yf9AXw=",
+      "dev": true
+    },
     "lodash.isequal": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
@@ -6719,6 +6738,15 @@
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.25.3.tgz",
       "integrity": "sha512-PuYv0PHxZvzc15Sp8ybUCoQ+xpyPWvjOuK72a5ovzp2LI32rJXOiIfyoFoYvG3s6EwwrdkMyWuRiEHSZRLJNdg=="
     },
+    "moment-locales-webpack-plugin": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/moment-locales-webpack-plugin/-/moment-locales-webpack-plugin-1.2.0.tgz",
+      "integrity": "sha512-QAi5v0OlPUP7GXviKMtxnpBAo8WmTHrUNN7iciAhNOEAd9evCOvuN0g1N7ThIg3q11GLCkjY1zQ2saRcf/43nQ==",
+      "dev": true,
+      "requires": {
+        "lodash.difference": "^4.5.0"
+      }
+    },
     "mousetrap": {
       "version": "1.6.5",
       "resolved": "https://registry.npmjs.org/mousetrap/-/mousetrap-1.6.5.tgz",
@@ -8319,6 +8347,12 @@
       "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
       "dev": true
     },
+    "require-package-name": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/require-package-name/-/require-package-name-2.0.1.tgz",
+      "integrity": "sha1-wR6XJ2tluOKSP3Xav1+y7ww4Qbk=",
+      "dev": true
+    },
     "requires-port": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",

pkg/interface/package.json

@@ -64,6 +64,7 @@
     "@typescript-eslint/parser": "^3.8.0",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.1.0",
+    "babel-plugin-lodash": "^3.3.4",
     "babel-plugin-root-import": "^6.5.0",
     "clean-webpack-plugin": "^3.0.0",
     "cross-env": "^7.0.2",

pkg/interface/src/logic/lib/util.js

@@ -1,4 +1,5 @@
 import _ from 'lodash';
+import f from 'lodash/fp';
 
 export const MOBILE_BROWSER_REGEX = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i;
 
@@ -8,11 +9,12 @@ export function clamp(x,min,max) {
 
 // color is a #000000 color
 export function adjustHex(color, amount) {
-  const res = _.chain(color.slice(1))
-    .split('').chunk(2) // get individual color channels
-    .map(c => parseInt(c.join(''), 16)) // as hex
-    .map(c => clamp(c + amount, 0, 255).toString(16)) // adjust
-    .join('').value();
+  const res = f.flow(
+    f.split(''), f.chunk(2), // get individual color channels
+    f.map(c => parseInt(c.join(''), 16)), // as hex
+    f.map(c => clamp(c + amount, 0, 255).toString(16)), // adjust
+    f.join('')
+  )(color.slice(1))
   return `#${res}`;
 }
 
@@ -91,10 +93,11 @@ export function uxToHex(ux) {
 }
 
 export function hexToUx(hex) {
-   const ux = _.chain(hex.split(''))
-     .chunk(4)
-     .map(x => _.dropWhile(x, y => y === 0).join(''))
-     .join('.');
+   const ux = f.flow(
+     f.chunk(4),
+     f.map(x => _.dropWhile(x, y => y === 0).join('')),
+     f.join('.')
+   )(hex.split(''))
    return `0x${ux}`;
 }
 

pkg/interface/src/views/landscape/components/Participants.tsx

@@ -17,6 +17,7 @@ import {
   StatelessTextInput as Input,
 } from "@tlon/indigo-react";
 import _ from "lodash";
+import f from "lodash/fp";
 import VisibilitySensor from "react-visibility-sensor";
 
 import { Contact, Contacts } from "~/types/contact-update";
@@ -90,7 +91,7 @@ const Tab = ({ selected, id, label, setSelected }) => (
     borderBottom={selected === id ? 1 : 0}
     borderBottomColor="black"
     mr={2}
-    cursor='pointer'
+    cursor="pointer"
     onClick={() => setSelected(id)}
   >
     <Text color={selected === id ? "black" : "gray"}>{label}</Text>
@@ -141,11 +142,11 @@ export function Participants(props: {
 
   const filtered = useMemo(
     () =>
-      _.chain(participants)
-        .filter(tabFilters[filter])
-        .filter(searchParticipant(search))
-        .chunk(8)
-        .value(),
+      f.flow(
+        f.filter(tabFilters[filter]),
+        f.filter(searchParticipant(search)),
+        f.chunk(8)
+      )(participants),
     [search, filter, participants]
   );
 
@@ -288,22 +289,18 @@ function Participant(props: {
     });
   }, [api, association]);
 
-  const avatar = (
-    (contact?.avatar !== null) && !props.hideAvatars)
-    ? <img src={contact.avatar} height={32} width={32} className="dib" />
-    : <Sigil
-      ship={contact.patp}
-      size={32}
-      color={`#${color}`}
-    />;
+  const avatar =
+    contact?.avatar !== null && !props.hideAvatars ? (
+      <img src={contact.avatar} height={32} width={32} className="dib" />
+    ) : (
+      <Sigil ship={contact.patp} size={32} color={`#${color}`} />
+    );
 
   const hasNickname = contact.nickname && !props.hideNicknames;
 
   return (
     <>
-      <Box>
-        {avatar}
-      </Box>
+      <Box>{avatar}</Box>
       <Col justifyContent="center" gapY="1" height="100%">
         {hasNickname && (
           <TruncText title={contact.nickname} maxWidth="85%" color="black">