Merge pull request #3696 from urbit/lf/bundle-cleanup

interface: various bundle size optimisations

pkg/arvo/app/glob.hoon

@@ -85,20 +85,33 @@
       %glob-make
     :_  this
     =/  home=path  /(scot %p our.bowl)/home/(scot %da now.bowl)
-    =+  .^(=tube:clay %cc (weld home /js/mime))
+    =+  .^(=js=tube:clay %cc (weld home /js/mime))
+    =+  .^(=map=tube:clay %cc (weld home /map/mime))
     =+  .^(arch %cy (weld home /app/landscape/js/bundle))
-    =/  bundle=path
-      %-  need
-      ^-  (unit path)
+    =/  bundle-hash=@t
+      %-  need 
+      ^-  (unit @t)
       %-  ~(rep by dir)
-      |=  [[file=@t ~] out=(unit path)]
+      |=  [[file=@t ~] out=(unit @t)]
       ?^  out  out
-      ?.  =((end 3 5 file) 'index')
-        ~
-      `/[file]/js
-    =+  .^(js=@t %cx :(weld home /app/landscape/js/bundle bundle))
-    =+  !<(=mime (tube !>(js)))
-    =/  =glob:glob  (~(put by *glob:glob) bundle mime)
+      ?.  ?&  =((end 3 6 file) 'index.')
+              !=('sj.' (end 3 3 (swp 3 file)))
+          ==
+        out
+      ``@t`(rsh 3 6 file)
+    =/  js-name
+      (cat 3 'index.' bundle-hash)
+    =/  map-name
+      (cat 3 js-name '.js')
+    =+  .^(js=@t %cx :(weld home /app/landscape/js/bundle /[js-name]/js))
+    =+  .^(map=@t %cx :(weld home /app/landscape/js/bundle /[map-name]/map))
+    =+  !<(=js=mime (js-tube !>(js)))
+    =+  !<(=map=mime (map-tube !>(map)))
+    =/  =glob:glob
+      %-  ~(gas by *glob:glob)
+      :~  /[js-name]/js^js-mime
+          /[map-name]/map^map-mime
+      ==
     =/  =path  /(cat 3 'glob-' (scot %uv (sham glob)))/glob
     [%pass /make %agent [our.bowl %hood] %poke %drum-put !>([path (jam glob)])]~
   ::

pkg/arvo/mar/map.hoon

@@ -0,0 +1,18 @@
+::
+::::  /hoon/map/mar
+  ::  Mark for js source maps
+/?    310
+::
+=,  eyre
+|_  mud/@
+++  grow
+  |%
+  ++  mime  [/application/octet-stream (as-octs:mimes:html (@t mud))]
+  --
+++  grab
+  |%                                                    ::  convert from
+  ++  mime  |=({p/mite q/octs} (@t q.q))
+  ++  noun  cord                                        ::  clam from %noun
+  --
+++  grad  %mime
+--

pkg/interface/config/webpack.prod.js

@@ -1,6 +1,7 @@
 const path = require('path');
 // const HtmlWebpackPlugin = require('html-webpack-plugin');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const MomentLocalesPlugin = require('moment-locales-webpack-plugin');
 
 module.exports = {
   mode: 'production',
@@ -16,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',
@@ -41,7 +43,7 @@ module.exports = {
   resolve: {
     extensions: ['.js', '.ts', '.tsx']
   },
-  devtool: 'inline-source-map',
+  devtool: 'source-map',
   // devServer: {
   //   contentBase: path.join(__dirname, './'),
   //   hot: true,
@@ -49,6 +51,7 @@ module.exports = {
   //   historyApiFallback: true
   // },
   plugins: [
+    new MomentLocalesPlugin(),
     new CleanWebpackPlugin(),
     // new HtmlWebpackPlugin({
     //   title: 'Hot Module Replacement',

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",
@@ -71,6 +72,7 @@
     "eslint-plugin-react": "^7.19.0",
     "file-loader": "^6.0.0",
     "html-webpack-plugin": "^4.2.0",
+    "moment-locales-webpack-plugin": "^1.2.0",
     "react-dnd": "^11.1.3",
     "react-hot-loader": "^4.12.21",
     "sass": "^1.26.5",

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/apps/chat/ChatResource.tsx

@@ -1,6 +1,7 @@
 import React, { useRef, useCallback } from "react";
 import { RouteComponentProps } from "react-router-dom";
 import { Col } from "@tlon/indigo-react";
+import _ from 'lodash';
 
 import { Association } from "~/types/metadata-update";
 import { StoreState } from "~/logic/store/type";

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">