From 829caae18919eaa9537b108f1caffb870ec29993 Mon Sep 17 00:00:00 2001 From: Lalit Date: Tue, 11 Jul 2023 22:18:37 +0530 Subject: [PATCH] ts: Migrate `realm_playground` to typescript. --- tools/test-js-with-node | 2 +- ...ealm_playground.js => realm_playground.ts} | 51 ++++++++++++++----- 2 files changed, 39 insertions(+), 14 deletions(-) rename web/src/{realm_playground.js => realm_playground.ts} (63%) diff --git a/tools/test-js-with-node b/tools/test-js-with-node index cb297d64d9..d9de5fd49a 100755 --- a/tools/test-js-with-node +++ b/tools/test-js-with-node @@ -142,7 +142,7 @@ EXEMPT_FILES = make_set( "web/src/ready.ts", "web/src/realm_icon.js", "web/src/realm_logo.js", - "web/src/realm_playground.js", + "web/src/realm_playground.ts", "web/src/realm_user_settings_defaults.ts", "web/src/recent_topics_ui.js", "web/src/recent_topics_util.js", diff --git a/web/src/realm_playground.js b/web/src/realm_playground.ts similarity index 63% rename from web/src/realm_playground.js rename to web/src/realm_playground.ts index 32f5f3f986..88dd2eaf8f 100644 --- a/web/src/realm_playground.js +++ b/web/src/realm_playground.ts @@ -3,39 +3,58 @@ import * as typeahead from "../shared/src/typeahead"; import {$t} from "./i18n"; -const map_language_to_playground_info = new Map(); -const map_pygments_pretty_name_to_aliases = new Map(); +type RealmPlayground = { + id: number; + name: string; + pygments_language: string; + url_prefix: string; +}; -export function update_playgrounds(playgrounds_data) { +const map_language_to_playground_info = new Map< + string, + Omit[] +>(); +const map_pygments_pretty_name_to_aliases = new Map(); + +export function update_playgrounds(playgrounds_data: RealmPlayground[]): void { map_language_to_playground_info.clear(); for (const data of Object.values(playgrounds_data)) { - const element_to_push = { + const element_to_push: Omit = { id: data.id, name: data.name, url_prefix: data.url_prefix, }; if (map_language_to_playground_info.has(data.pygments_language)) { - map_language_to_playground_info.get(data.pygments_language).push(element_to_push); + map_language_to_playground_info.get(data.pygments_language)!.push(element_to_push); } else { map_language_to_playground_info.set(data.pygments_language, [element_to_push]); } } } -export function get_playground_info_for_languages(lang) { +export function get_playground_info_for_languages( + lang: string, +): Omit[] | undefined { return map_language_to_playground_info.get(lang); } -function sort_pygments_pretty_names_by_priority(comparator_func) { +function sort_pygments_pretty_names_by_priority( + comparator_func: (a: string, b: string) => number, +): void { const priority_sorted_pygments_data = Object.keys(generated_pygments_data.langs).sort( comparator_func, ); for (const alias of priority_sorted_pygments_data) { - const pretty_name = generated_pygments_data.langs[alias].pretty_name; + // This variable is just for type safety so that we can access + // generated_pygments_data.langs[lang].pretty_name without a type error. + // We know that alias is a valid key of generated_pygments_data.langs because + // we just got it from Object.keys(generated_pygments_data.langs). + const lang = alias as keyof typeof generated_pygments_data.langs; + const pretty_name = generated_pygments_data.langs[lang].pretty_name; // JS Map remembers the original order of insertion of keys. if (map_pygments_pretty_name_to_aliases.has(pretty_name)) { - map_pygments_pretty_name_to_aliases.get(pretty_name).push(alias); + map_pygments_pretty_name_to_aliases.get(pretty_name)!.push(alias); } else { map_pygments_pretty_name_to_aliases.set(pretty_name, [alias]); } @@ -49,7 +68,7 @@ function sort_pygments_pretty_names_by_priority(comparator_func) { // May return duplicates, since it's common for playground languages // to also be pygments languages! retain_unique_language_aliases will // deduplicate them. -export function get_pygments_typeahead_list_for_composebox() { +export function get_pygments_typeahead_list_for_composebox(): string[] { const playground_pygment_langs = [...map_language_to_playground_info.keys()]; const generated_pygment_langs = Object.keys(generated_pygments_data.langs); @@ -58,8 +77,8 @@ export function get_pygments_typeahead_list_for_composebox() { // This gets the candidate list for showing autocomplete in settings when // adding a new Code Playground. -export function get_pygments_typeahead_list_for_settings(query) { - const language_labels = new Map(); +export function get_pygments_typeahead_list_for_settings(query: string): Map { + const language_labels = new Map(); // Adds a typeahead that allows selecting a custom language, by adding a // "Custom language" label in the first position of the typeahead list. @@ -83,7 +102,13 @@ export function get_pygments_typeahead_list_for_settings(query) { return language_labels; } -export function initialize({playground_data, pygments_comparator_func}) { +export function initialize({ + playground_data, + pygments_comparator_func, +}: { + playground_data: RealmPlayground[]; + pygments_comparator_func: (a: string, b: string) => number; +}): void { update_playgrounds(playground_data); sort_pygments_pretty_names_by_priority(pygments_comparator_func); }