[Glitch] Rewrite emoji_unicode_mapping_light to TS

Port 9482810 to glitch-soc

Co-authored-by: taichi.fukuda ひ <taichi.fukuda@systemi.co.jp>
Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/components/autosuggest_emoji.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import { PureComponent } from 'react';
 
-import unicodeMapping from 'flavours/glitch/features/emoji/emoji_unicode_mapping_light';
+import { unicodeMapping } from 'flavours/glitch/features/emoji/emoji_unicode_mapping_light';
 import { assetHost } from 'flavours/glitch/utils/config';
 
 export default class AutosuggestEmoji extends PureComponent {

app/javascript/flavours/glitch/features/emoji/emoji.js

@@ -3,7 +3,7 @@ import Trie from 'substring-trie';
 import { autoPlayGif, useSystemEmojiFont } from 'flavours/glitch/initial_state';
 import { assetHost } from 'flavours/glitch/utils/config';
 
-import unicodeMapping from './emoji_unicode_mapping_light';
+import { unicodeMapping } from './emoji_unicode_mapping_light';
 
 const trie = new Trie(Object.keys(unicodeMapping));
 

app/javascript/flavours/glitch/features/emoji/emoji_compressed.d.ts

@@ -13,15 +13,20 @@ export type Search = string;
  * This could be a potential area of refactoring or error handling.
  * The non-existence of 'skins' property is evident at [this location]{@link app/javascript/flavours/glitch/features/emoji/emoji_compressed.js:121}.
  */
-export type Skins = null;
+type Skins = null;
 
-export type FilenameData = string[] | string[][];
+type Filename = string;
+type UnicodeFilename = string;
+export type FilenameData = [
+  filename: Filename,
+  unicodeFilename?: UnicodeFilename,
+][];
 export type ShortCodesToEmojiDataKey =
   | EmojiData['id']
   | BaseEmoji['native']
   | keyof NimbleEmojiIndex['emojis'];
 
-export type SearchData = [
+type SearchData = [
   BaseEmoji['native'],
   Emoji['short_names'],
   Search,
@@ -32,9 +37,9 @@ export type ShortCodesToEmojiData = Record<
   ShortCodesToEmojiDataKey,
   [FilenameData, SearchData]
 >;
-export type EmojisWithoutShortCodes = FilenameData[];
+type EmojisWithoutShortCodes = FilenameData;
 
-export type EmojiCompressed = [
+type EmojiCompressed = [
   ShortCodesToEmojiData,
   Skins,
   Category[],

app/javascript/flavours/glitch/features/emoji/emoji_mart_data_light.ts

@@ -30,22 +30,13 @@ const emojis: Emojis = {};
 // decompress
 Object.keys(shortCodesToEmojiData).forEach((shortCode) => {
   const [_filenameData, searchData] = shortCodesToEmojiData[shortCode];
-  const native = searchData[0];
-  let short_names = searchData[1];
-  const search = searchData[2];
-  let unified = searchData[3];
+  const [native, short_names, search, unified] = searchData;
 
-  if (!unified) {
-    // unified name can be derived from unicodeToUnifiedName
-    unified = unicodeToUnifiedName(native);
-  }
-
-  if (short_names) short_names = [shortCode].concat(short_names);
   emojis[shortCode] = {
     native,
     search,
-    short_names,
-    unified,
+    short_names: short_names ? [shortCode].concat(short_names) : undefined,
+    unified: unified ?? unicodeToUnifiedName(native),
   };
 });
 

app/javascript/flavours/glitch/features/emoji/emoji_unicode_mapping_light.ts

@@ -0,0 +1,60 @@
+// A mapping of unicode strings to an object containing the filename
+// (i.e. the svg filename) and a shortCode intended to be shown
+// as a "title" attribute in an HTML element (aka tooltip).
+
+import type {
+  FilenameData,
+  ShortCodesToEmojiDataKey,
+} from './emoji_compressed';
+import emojiCompressed from './emoji_compressed';
+import { unicodeToFilename } from './unicode_to_filename';
+
+type UnicodeMapping = {
+  [key in FilenameData[number][0]]: {
+    shortCode: ShortCodesToEmojiDataKey;
+    filename: FilenameData[number][number];
+  };
+};
+
+const [
+  shortCodesToEmojiData,
+  _skins,
+  _categories,
+  _short_names,
+  emojisWithoutShortCodes,
+] = emojiCompressed;
+
+// decompress
+const unicodeMapping: UnicodeMapping = {};
+
+function processEmojiMapData(
+  emojiMapData: FilenameData[number],
+  shortCode?: ShortCodesToEmojiDataKey,
+) {
+  const [native, _filename] = emojiMapData;
+  let filename = emojiMapData[1];
+  if (!filename) {
+    // filename name can be derived from unicodeToFilename
+    filename = unicodeToFilename(native);
+  }
+  unicodeMapping[native] = {
+    shortCode,
+    filename,
+  };
+}
+
+Object.keys(shortCodesToEmojiData).forEach(
+  (shortCode: ShortCodesToEmojiDataKey) => {
+    if (shortCode === undefined) return;
+    const [filenameData, _searchData] = shortCodesToEmojiData[shortCode];
+    filenameData.forEach((emojiMapData) => {
+      processEmojiMapData(emojiMapData, shortCode);
+    });
+  },
+);
+
+emojisWithoutShortCodes.forEach((emojiMapData) => {
+  processEmojiMapData(emojiMapData);
+});
+
+export { unicodeMapping };

app/javascript/flavours/glitch/features/getting_started/components/announcements.jsx

@@ -17,7 +17,7 @@ import { AnimatedNumber } from 'flavours/glitch/components/animated_number';
 import { Icon } from 'flavours/glitch/components/icon';
 import { IconButton } from 'flavours/glitch/components/icon_button';
 import EmojiPickerDropdown from 'flavours/glitch/features/compose/containers/emoji_picker_dropdown_container';
-import unicodeMapping from 'flavours/glitch/features/emoji/emoji_unicode_mapping_light';
+import { unicodeMapping } from 'flavours/glitch/features/emoji/emoji_unicode_mapping_light';
 import { autoPlayGif, reduceMotion, disableSwiping, mascot } from 'flavours/glitch/initial_state';
 import { assetHost } from 'flavours/glitch/utils/config';
 import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';