Merge pull request #530 from GetStream/feature/strip-emoji-mart

Optimize emoji-mart

Author: DanC5

.babelrc

@@ -1,5 +1,6 @@
 node_modules
 build
+src/stream-emoji.json
 /.cache/
 /public/static/styles.js
 examples/*/src/serviceWorker.js

.eslintignore

@@ -2,10 +2,11 @@ node_modules
 /.cache/
 /public/static/styles.js
 examples/*/src/serviceWorker.js
+src/stream-emoji.json
 /dist/
 /lib/
 /bin/
 /include/
 /build/
 build
-/built
+/built

.prettierignore

@@ -0,0 +1,28 @@
+module.exports = {
+  presets: ['@babel/preset-typescript', '@babel/env', '@babel/react'],
+  plugins: [
+    '@babel/plugin-proposal-class-properties',
+    '@babel/plugin-transform-runtime',
+  ],
+  env: {
+    production: {
+      presets: [
+        [
+          '@babel/env',
+          {
+            modules: false,
+          },
+        ],
+      ],
+    },
+    test: {
+      presets: ['@babel/preset-env', '@babel/preset-react'],
+      plugins: [
+        '@babel/plugin-proposal-class-properties',
+        'transform-es2015-modules-commonjs',
+        'babel-plugin-dynamic-import-node',
+      ],
+    },
+  },
+  ignore: ['src/@types/*'],
+};

babel.config.js

@@ -0,0 +1,30 @@
+/*
+ * This script allows us to generate a version of the emoji-mart json data stripped of skin variation information.
+ * Emoji data has a significant contribution to the bundle size, and skin variation information takes a good part
+ * of the full data set json file.
+ */
+const path = require('path');
+const fs = require('fs');
+
+// Getting the facebook dataset as it is the smallest one.
+const defaultDataSetJson = fs.readFileSync(
+  path.join(__dirname, 'node_modules', 'emoji-mart', 'data', 'facebook.json'),
+  'utf8',
+);
+
+const dataSet = JSON.parse(defaultDataSetJson);
+
+const removeSkinTonesInfo = (emojiKey) => {
+  if (dataSet.emojis[emojiKey].skin_variations) {
+    delete dataSet.emojis[emojiKey].skin_variations;
+  }
+};
+
+Object.keys(dataSet.emojis).map(removeSkinTonesInfo);
+
+const newDataSetJson = JSON.stringify(dataSet);
+
+fs.writeFileSync(
+  path.join(__dirname, 'src', 'stream-emoji.json'),
+  newDataSetJson,
+);

emojiMartDataParser.js

@@ -10,15 +10,18 @@ module.exports = {
      * "src/components/MessageList/__tests__/MessageList.test.js"
      */
   ],
-  transformIgnorePatterns: ['/node_modules'],
+  transformIgnorePatterns: [],
   testPathIgnorePatterns: ['/node_modules/', '/examples/', '__snapshots__'],
   transform: {
-    '^.+\\.jsx?$': 'babel-jest',
+    '^.+\\.(js|jsx)?$': 'babel-jest',
   },
   moduleNameMapper: {
     '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
       '<rootDir>/assetsTransformer.js',
     'mock-builders(.*)$': '<rootDir>/src/mock-builders$1',
   },
   setupFiles: ['core-js'],
+  globals: {
+    ICAL: {},
+  },
 };

jest.config.js

@@ -84,10 +84,13 @@
     "@types/uuid": "^8.3.0",
     "autoprefixer": "^10.0.3",
     "babel-eslint": "^10.1.0",
+    "babel-jest": "^26.3.0",
     "babel-loader": "8.2.2",
     "babel-plugin-i18next-extract": "^0.8.2",
+    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
     "codecov": "^3.8.1",
     "css-loader": "^5.0.1",
+    "core-js": "^3.6.5",
     "eslint": "7.14.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-config-prettier": "^6.15.0",
@@ -161,8 +164,8 @@
     "docs-server": "styleguidist server",
     "watch-styles": "sass --watch src/styles/index.scss dist/css/index.css",
     "build-styles": "sass src/styles/index.scss dist/css/index.css --style compressed",
-    "prettier": "prettier --list-different '**/*.{js,ts,md,json}' .eslintrc.json .prettierrc .babelrc",
-    "prettier-fix": "prettier --write '**/*.{js,ts,md,json}' .eslintrc.json .prettierrc .babelrc",
+    "prettier": "prettier --list-different '**/*.{js,ts,md,json}' .eslintrc.json .prettierrc",
+    "prettier-fix": "prettier --write '**/*.{js,ts,md,json}' .eslintrc.json .prettierrc",
     "eslint": "eslint '**/*.{js,md}' --max-warnings 0",
     "stylelint": "stylelint '**/*.{css,scss}'",
     "analyze": "yarn build -- --stats && webpack-bundle-analyzer build/bundle-stats.json",

package.json

@@ -115,7 +115,7 @@ const basePlugins = [
     },
   ),
   // Json to ES modules conversion
-  json(),
+  json({ compact: true }),
   process.env.BUNDLE_SIZE ? visualizer() : null,
 ];
 

rollup.config.js

@@ -7,13 +7,20 @@ import React, {
   useReducer,
   useLayoutEffect,
 } from 'react';
+// @ts-expect-error
+import DefaultEmoji from 'emoji-mart/dist-modern/components/emoji/nimble-emoji';
+// @ts-expect-error
+import DefaultEmojiIndex from 'emoji-mart/dist-modern/utils/emoji-index/nimble-emoji-index';
+// @ts-expect-error
+import DefaultEmojiPicker from 'emoji-mart/dist-modern/components/picker/nimble-picker';
 import debounce from 'lodash.debounce';
 import throttle from 'lodash.throttle';
 import PropTypes from 'prop-types';
 import { logChatPromiseExecution, Channel as StreamChannel } from 'stream-chat';
 import { v4 as uuidv4 } from 'uuid';
 
 import { Attachment as DefaultAttachment } from '../Attachment';
+import { commonEmoji, defaultMinimalEmojis, emojiSetDef } from './emojiData';
 import { MessageSimple } from '../Message';
 import {
   LoadingIndicator as DefaultLoadingIndicator,
@@ -26,6 +33,7 @@ import useEditMessageHandler from './hooks/useEditMessageHandler';
 import useIsMounted from './hooks/useIsMounted';
 
 import { ChatContext, ChannelContext, TranslationContext } from '../../context';
+import defaultEmojiData from '../../stream-emoji.json';
 
 /** @type {React.FC<import('types').ChannelProps>}>} */
 const Channel = ({ EmptyPlaceholder = null, ...props }) => {
@@ -42,6 +50,10 @@ const Channel = ({ EmptyPlaceholder = null, ...props }) => {
 const ChannelInner = ({
   Attachment = DefaultAttachment,
   doMarkReadRequest,
+  Emoji = DefaultEmoji,
+  emojiData = defaultEmojiData,
+  EmojiIndex = DefaultEmojiIndex,
+  EmojiPicker = DefaultEmojiPicker,
   LoadingErrorIndicator = DefaultLoadingErrorIndicator,
   LoadingIndicator = DefaultLoadingIndicator,
   Message = MessageSimple,
@@ -61,6 +73,16 @@ const ChannelInner = ({
   const lastRead = useRef(new Date());
   const online = useRef(true);
 
+  const emojiConfig = {
+    commonEmoji,
+    defaultMinimalEmojis,
+    Emoji,
+    emojiData,
+    EmojiIndex,
+    EmojiPicker,
+    emojiSetDef,
+  };
+
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const throttledCopyStateFromChannel = useCallback(
     throttle(
@@ -456,6 +478,8 @@ const ChannelInner = ({
     updateMessage,
     // from chatContext, for legacy reasons
     client,
+    // emoji config and customization object, potentially find a better home
+    emojiConfig,
   };
 
   let core;
@@ -500,7 +524,7 @@ Channel.propTypes = {
   LoadingErrorIndicator: PropTypes.elementType,
   /**
    * Loading indicator UI component. This will be shown on the screen until the messages are
-   * being queried from channelœ. Once the messages are loaded, loading indicator is removed from the screen
+   * being queried from channel. Once the messages are loaded, loading indicator is removed from the screen
    * and replaced with children of the Channel component.
    *
    * Defaults to and accepts same props as: [LoadingIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/LoadingIndicator.js)
@@ -565,6 +589,26 @@ Channel.propTypes = {
    * @param {Object} updatedMessage
    */
   doUpdateMessageRequest: PropTypes.func,
+  /**
+   * Optional component to override default NimbleEmoji from emoji-mart
+   */
+  // @ts-expect-error import type when converted to TS
+  Emoji: /** @type {PropTypes.Validator<React.ElementType<NimbleEmojiProps>>} */ (PropTypes.elementType),
+  /**
+   * Optional prop to override default facebook.json emoji data set from emoji-mart
+   */
+  // @ts-expect-error import type when converted to TS
+  emojiData: /** @type {PropTypes.Validator<EmojiMartData>} */ (PropTypes.object),
+  /**
+   * Optional component to override default NimbleEmojiIndex from emoji-mart
+   */
+  // @ts-expect-error import type when converted to TS
+  EmojiIndex: /** @type {PropTypes.Validator<NimbleEmojiIndex>} */ (PropTypes.object),
+  /**
+   * Optional component to override default NimblePicker from emoji-mart
+   */
+  // @ts-expect-error import type when converted to TS
+  EmojiPicker: /** @type {PropTypes.Validator<React.ElementType<NimblePickerProps>>} */ (PropTypes.elementType),
 };
 
 export default React.memo(Channel);

src/components/Channel/Channel.js

@@ -216,6 +216,32 @@ describe('Channel', () => {
 
   // eslint-disable-next-line sonarjs/cognitive-complexity
   describe('Children that consume ChannelContext', () => {
+    it('should expose the emoji config', async () => {
+      let context;
+      const emojiData = {
+        compressed: true,
+        categories: [],
+        emojis: {},
+        aliases: {},
+      };
+      const CustomEmojiPicker = () => <div />;
+      const CustomEmoji = () => <span />;
+
+      renderComponent(
+        { emojiData, Emoji: CustomEmoji, EmojiPicker: CustomEmojiPicker },
+        (ctx) => {
+          context = ctx;
+        },
+      );
+
+      await waitFor(() => {
+        expect(context).toBeInstanceOf(Object);
+        expect(context.emojiConfig.emojiData).toBe(emojiData);
+        expect(context.emojiConfig.EmojiPicker).toBe(CustomEmojiPicker);
+        expect(context.emojiConfig.Emoji).toBe(CustomEmoji);
+      });
+    });
+
     it('should be able to open threads', async () => {
       const threadMessage = messages[0];
       const hasThread = jest.fn();