Skip to content

Commit

Permalink
ts: Convert emoji.js to TypeScript.
Browse files Browse the repository at this point in the history 
Converted `emoji.js` to TypeScript by adding relevant type definitions,
also modified `target` option in our tsconfig to 'ESNext' so that types
for object methods like `hasOwn` which is being used in `emoji.js` are
included.
  • Loading branch information
@Lalit3716
Lalit3716 committed Mar 29, 2023
1 parent 38539c8 commit c6c7759
Show file tree
Hide file tree
Showing 2 changed files with 111 additions and 35 deletions.
2 changes: 1 addition & 1 deletion tsconfig.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@

/* Basic options */
"noEmit": true,
"target": "ES2020",
"target": "ESNext",
"esModuleInterop": true,
"moduleResolution": "node",
"resolveJsonModule": true,
Expand Down
144 changes: 110 additions & 34 deletions web/src/emoji.js → web/src/emoji.ts
View file
Original file line number Diff line number Diff line change
@@ -1,34 +1,93 @@
import _ from "lodash";

type RealmEmoji = Record<
string,
{
id: number;
author_id: number;
deactivated: boolean;
name: string;
source_url: string;
still_url: string | null;
}
>;

type EmojiCodes = {
codepoint_to_name: Record<string, string>;
name_to_codepoint: Record<string, string>;
emoji_catalog: Record<string, string[]>;
emoticon_conversions: Record<string, string>;
names: string[];
};

type EmojiParams = {
realm_emoji: RealmEmoji;
emoji_codes: EmojiCodes;
};

type Translation = {
regex: RegExp;
replacement_text: string;
};

type Emoji = {
id: number;
emoji_name: string;
emoji_url: string;
still_url: string | null;
deactivated: boolean;
};

type EmojiDict = {
name: string;
display_name: string;
aliases: string[];
is_realm_emoji: boolean;
has_reacted: boolean;
emoji_code?: string;
url?: string;
};

type EmojiInfo = {
emoji_name: string;
reaction_type: string;
emoji_code: string | number;
url?: string;
still_url?: string | null;
};

// We will get actual values when we get initialized.
let emoji_codes = {};
let emoji_codes: EmojiCodes;

// `emojis_by_name` is the central data source that is supposed to be
// used by every widget in the web app for gathering data for displaying
// emojis. Emoji picker uses this data to derive data for its own use.
export let emojis_by_name = new Map();
export let emojis_by_name = new Map<string, EmojiDict>();
export const all_realm_emojis = new Map<number | string, Emoji | typeof zulip_emoji>();
export const active_realm_emojis = new Map<
string,
Omit<Emoji, "deactivated"> | typeof zulip_emoji
>();

export const all_realm_emojis = new Map();
export const active_realm_emojis = new Map();
export const deactivated_emoji_name_to_code = new Map();

let default_emoji_aliases = new Map();
let default_emoji_aliases = new Map<string, string[]>();

// For legacy reasons we track server_realm_emoji_data,
// since our settings code builds off that format. We
// should move it to use all_realm_emojis, which requires
// adding author_id here and then changing the settings code
// in a slightly non-trivial way.
let server_realm_emoji_data = {};
let server_realm_emoji_data: RealmEmoji = {};

// We really want to deprecate this, too.
export function get_server_realm_emoji_data() {
export function get_server_realm_emoji_data(): RealmEmoji {
return server_realm_emoji_data;
}

let emoticon_translations = [];
let emoticon_translations: Translation[] = [];

function build_emoticon_translations({emoticon_conversions}) {
function build_emoticon_translations({
emoticon_conversions,
}: Pick<EmojiCodes, "emoticon_conversions">): Translation[] {
/*
Please keep this as a pure function so that we can
Expand Down Expand Up @@ -56,7 +115,7 @@ function build_emoticon_translations({emoticon_conversions}) {
every new message).
*/

const translations = [];
const translations: Translation[] = [];
for (const [emoticon, replacement_text] of Object.entries(emoticon_conversions)) {
const regex = new RegExp("(" + _.escapeRegExp(emoticon) + ")", "g");

Expand All @@ -76,27 +135,28 @@ const zulip_emoji = {
// server-side markdown, which doesn't want to render it into the
// message content.
emoji_url: "/static/generated/emoji/images/emoji/unicode/zulip.png",
still_url: undefined,
is_realm_emoji: true,
deactivated: false,
};

export function get_emoji_name(codepoint) {
export function get_emoji_name(codepoint: string): string | undefined {
// get_emoji_name('1f384') === 'holiday_tree'
if (Object.hasOwn(emoji_codes.codepoint_to_name, codepoint)) {
return emoji_codes.codepoint_to_name[codepoint];
}
return undefined;
}

export function get_emoji_codepoint(emoji_name) {
export function get_emoji_codepoint(emoji_name: string): string | undefined {
// get_emoji_codepoint('avocado') === '1f951'
if (Object.hasOwn(emoji_codes.name_to_codepoint, emoji_name)) {
return emoji_codes.name_to_codepoint[emoji_name];
}
return undefined;
}

export function get_realm_emoji_url(emoji_name) {
export function get_realm_emoji_url(emoji_name: string): string | undefined {
// If the emoji name is a realm emoji, returns the URL for it.
// Returns undefined for Unicode emoji.
// get_realm_emoji_url('shrug') === '/user_avatars/2/emoji/images/31.png'
Expand All @@ -121,19 +181,24 @@ function build_emojis_by_name({
emoji_catalog,
get_emoji_name,
default_emoji_aliases,
}) {
}: {
realm_emojis: typeof active_realm_emojis;
emoji_catalog: EmojiCodes["emoji_catalog"];
get_emoji_name: (codepoint: string) => string | undefined;
default_emoji_aliases: Map<string, string[]>;
}): Map<string, EmojiDict> {
// Please keep this as a pure function so that we can
// eventually share this code with the mobile codebase.
const map = new Map();
const map = new Map<string, EmojiDict>();

for (const codepoints of Object.values(emoji_catalog)) {
for (const codepoint of codepoints) {
const emoji_name = get_emoji_name(codepoint);
if (emoji_name !== undefined) {
const emoji_dict = {
const emoji_dict: EmojiDict = {
name: emoji_name,
display_name: emoji_name,
aliases: default_emoji_aliases.get(codepoint),
aliases: default_emoji_aliases.get(codepoint) || [],
is_realm_emoji: false,
emoji_code: codepoint,
has_reacted: false,
Expand Down Expand Up @@ -161,7 +226,7 @@ function build_emojis_by_name({
return map;
}

export function update_emojis(realm_emojis) {
export function update_emojis(realm_emojis: RealmEmoji): void {
// The settings code still works with the
// server format of the data.
server_realm_emoji_data = realm_emojis;
Expand Down Expand Up @@ -211,21 +276,21 @@ export function update_emojis(realm_emojis) {

// This function will provide required parameters that would
// need by template to render an emoji.
export function get_emoji_details_by_name(emoji_name) {
export function get_emoji_details_by_name(emoji_name: string): EmojiInfo {
// To call this function you must pass an emoji name.
if (!emoji_name) {
throw new Error("Emoji name must be passed.");
}

const emoji_info = {emoji_name};
const emoji_info: EmojiInfo = {emoji_name, reaction_type: "", emoji_code: ""};

if (active_realm_emojis.has(emoji_name)) {
if (emoji_name === "zulip") {
emoji_info.reaction_type = "zulip_extra_emoji";
} else {
emoji_info.reaction_type = "realm_emoji";
}
const emoji_code_info = active_realm_emojis.get(emoji_name);
const emoji_code_info = active_realm_emojis.get(emoji_name)!;
emoji_info.emoji_code = emoji_code_info.id;
emoji_info.url = emoji_code_info.emoji_url;
if (emoji_code_info.still_url) {
Expand All @@ -242,7 +307,11 @@ export function get_emoji_details_by_name(emoji_name) {
return emoji_info;
}

export function get_emoji_details_for_rendering(opts) {
export function get_emoji_details_for_rendering(opts: {
emoji_name: string;
emoji_code: string | number;
reaction_type: string;
}): EmojiInfo {
if (!opts.emoji_name || !opts.emoji_code || !opts.reaction_type) {
throw new Error("Invalid params.");
}
Expand All @@ -268,27 +337,34 @@ export function get_emoji_details_for_rendering(opts) {
};
}

function build_default_emoji_aliases({names, get_emoji_codepoint}) {
function build_default_emoji_aliases({
names,
get_emoji_codepoint,
}: {
names: string[];
get_emoji_codepoint: (name: string) => string | undefined;
}): Map<string, string[]> {
// Please keep this as a pure function so that we can
// eventually share this code with the mobile codebase.

// Create a map of codepoint -> names
const map = new Map();
const map = new Map<string, string[]>();

for (const name of names) {
const base_name = get_emoji_codepoint(name);

if (map.has(base_name)) {
map.get(base_name).push(name);
} else {
map.set(base_name, [name]);
if (base_name !== undefined) {
if (map.has(base_name)) {
map.get(base_name)!.push(name);
} else {
map.set(base_name, [name]);
}
}
}

return map;
}

export function initialize(params) {
export function initialize(params: EmojiParams): void {
emoji_codes = params.emoji_codes;

emoticon_translations = build_emoticon_translations({
Expand All @@ -303,7 +379,7 @@ export function initialize(params) {
update_emojis(params.realm_emoji);
}

export function get_canonical_name(emoji_name) {
export function get_canonical_name(emoji_name: string): string | undefined {
if (active_realm_emojis.has(emoji_name)) {
return emoji_name;
}
Expand All @@ -316,6 +392,6 @@ export function get_canonical_name(emoji_name) {
return get_emoji_name(codepoint);
}

export function get_emoticon_translations() {
export function get_emoticon_translations(): Translation[] {
return emoticon_translations;
}

0 comments on commit c6c7759

Please sign in to comment.