MM-18919 Migrate 'utils/syntax_highlighting' to TypeScript (#3862)

* MM-18919 Migrate 'utils/syntax_highlighting' to TypeScript

* MM-18919 Migrate 'utils/syntax_highlighting' to TypeScript - install correct package

* MM-18919 - Address review feedback

* MM-18919: fix lint error

components/code_preview.jsx

@@ -5,8 +5,8 @@ import $ from 'jquery';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import Constants from 'utils/constants';
-import * as SyntaxHighlighting from 'utils/syntax_highlighting.jsx';
+import Constants from 'utils/constants.jsx';
+import * as SyntaxHighlighting from 'utils/syntax_highlighting';
 
 import LoadingSpinner from 'components/widgets/loading/loading_spinner';
 import FileInfoPreview from 'components/file_info_preview';

package.json

@@ -6,6 +6,7 @@
  "version": "0.0.1",
  "private": true,
  "dependencies": {
+ "@types/highlight.js": "9.12.3",
  "@formatjs/intl-pluralrules": "1.3.1",
  "@formatjs/intl-relativetimeformat": "4.4.0",
  "@typescript-eslint/parser": "2.6.0",

types/highlightjs.d.ts

@@ -0,0 +1,62 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+declare module 'highlight.js/lib/languages/actionscript.js';
+declare module 'highlight.js/lib/languages/applescript.js';
+declare module 'highlight.js/lib/languages/bash.js';
+declare module 'highlight.js/lib/languages/clojure.js';
+declare module 'highlight.js/lib/languages/coffeescript.js';
+declare module 'highlight.js/lib/languages/cpp.js';
+declare module 'highlight.js/lib/languages/cs.js';
+declare module 'highlight.js/lib/languages/css.js';
+declare module 'highlight.js/lib/languages/d.js';
+declare module 'highlight.js/lib/languages/dart.js';
+declare module 'highlight.js/lib/languages/delphi.js';
+declare module 'highlight.js/lib/languages/diff.js';
+declare module 'highlight.js/lib/languages/django.js';
+declare module 'highlight.js/lib/languages/dockerfile.js';
+declare module 'highlight.js/lib/languages/elixir.js';
+declare module 'highlight.js/lib/languages/erlang.js';
+declare module 'highlight.js/lib/languages/fortran.js';
+declare module 'highlight.js/lib/languages/fsharp.js';
+declare module 'highlight.js/lib/languages/gcode.js';
+declare module 'highlight.js/lib/languages/go.js';
+declare module 'highlight.js/lib/languages/groovy.js';
+declare module 'highlight.js/lib/languages/handlebars.js';
+declare module 'highlight.js/lib/languages/haskell.js';
+declare module 'highlight.js/lib/languages/haxe.js';
+declare module 'highlight.js/lib/languages/java.js';
+declare module 'highlight.js/lib/languages/javascript.js';
+declare module 'highlight.js/lib/languages/json.js';
+declare module 'highlight.js/lib/languages/julia.js';
+declare module 'highlight.js/lib/languages/kotlin.js';
+declare module 'highlight.js/lib/languages/less.js';
+declare module 'highlight.js/lib/languages/lisp.js';
+declare module 'highlight.js/lib/languages/lua.js';
+declare module 'highlight.js/lib/languages/makefile.js';
+declare module 'highlight.js/lib/languages/markdown.js';
+declare module 'highlight.js/lib/languages/matlab.js';
+declare module 'highlight.js/lib/languages/objectivec.js';
+declare module 'highlight.js/lib/languages/ocaml.js';
+declare module 'highlight.js/lib/languages/perl.js';
+declare module 'highlight.js/lib/languages/php.js';
+declare module 'highlight.js/lib/languages/powershell.js';
+declare module 'highlight.js/lib/languages/puppet.js';
+declare module 'highlight.js/lib/languages/python.js';
+declare module 'highlight.js/lib/languages/r.js';
+declare module 'highlight.js/lib/languages/ruby.js';
+declare module 'highlight.js/lib/languages/rust.js';
+declare module 'highlight.js/lib/languages/scala.js';
+declare module 'highlight.js/lib/languages/scheme.js';
+declare module 'highlight.js/lib/languages/scss.js';
+declare module 'highlight.js/lib/languages/smalltalk.js';
+declare module 'highlight.js/lib/languages/sql.js';
+declare module 'highlight.js/lib/languages/stylus.js';
+declare module 'highlight.js/lib/languages/swift.js';
+declare module 'highlight.js/lib/languages/tex.js';
+declare module 'highlight.js/lib/languages/vbnet.js';
+declare module 'highlight.js/lib/languages/vbscript.js';
+declare module 'highlight.js/lib/languages/verilog.js';
+declare module 'highlight.js/lib/languages/vhdl.js';
+declare module 'highlight.js/lib/languages/xml.js';
+declare module 'highlight.js/lib/languages/yaml.js';

utils/markdown/renderer.jsx

@@ -4,7 +4,7 @@
 import marked from 'marked';
 
 import * as PostUtils from 'utils/post_utils.jsx';
-import * as SyntaxHighlighting from 'utils/syntax_highlighting.jsx';
+import * as SyntaxHighlighting from 'utils/syntax_highlighting';
 import * as TextFormatting from 'utils/text_formatting.jsx';
 import {getScheme, isUrlSafe} from 'utils/url';
 

utils/syntax_highlighting.jsx → utils/syntax_highlighting.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import hlJS from 'highlight.js/lib/highlight.js';
+import hlJS from 'highlight.js';
 import hljsActionscript from 'highlight.js/lib/languages/actionscript.js';
 import hljsApplescript from 'highlight.js/lib/languages/applescript.js';
 import hljsBash from 'highlight.js/lib/languages/bash.js';
@@ -62,7 +62,7 @@ import hljsVhdl from 'highlight.js/lib/languages/vhdl.js';
 import hljsXml from 'highlight.js/lib/languages/xml.js';
 import hljsYaml from 'highlight.js/lib/languages/yaml.js';
 
-import Constants from './constants';
+import Constants from './constants.jsx';
 import * as TextFormatting from './text_formatting.jsx';
 
 hlJS.registerLanguage('actionscript', hljsActionscript);
@@ -125,10 +125,18 @@ hlJS.registerLanguage('vhdl', hljsVhdl);
 hlJS.registerLanguage('xml', hljsXml);
 hlJS.registerLanguage('yaml', hljsYaml);
 
-const HighlightedLanguages = Constants.HighlightedLanguages;
+type languageObject = {
+ [key: string]: {
+ name: string;
+ extensions: string[];
+ aliases?: string[];
+ };
+}
+
+const HighlightedLanguages: languageObject = Constants.HighlightedLanguages;
 
 // This function add line numbers to code
-function formatHighLight(code) {
+function formatHighLight(code: string) {
  if (code) {
  return code.split('\n').map((str, index) => {
  if (str || str === '') {
@@ -149,7 +157,7 @@ function formatHighLight(code) {
  return code;
 }
 
-export function highlight(lang, code) {
+export function highlight(lang: string, code: string) {
  const language = getLanguageFromNameOrAlias(lang);
 
  if (language) {
@@ -164,30 +172,34 @@ export function highlight(lang, code) {
  return TextFormatting.sanitizeHtml(code);
 }
 
-export function getLanguageFromFileExtension(extension) {
- for (var key in HighlightedLanguages) {
- if (HighlightedLanguages[key].extensions.find((x) => x === extension)) {
+export function getLanguageFromFileExtension(extension: string): string | null {
+ for (const key in HighlightedLanguages) {
+ if (HighlightedLanguages[key].extensions.find((x: string) => x === extension)) {
  return key;
  }
  }
 
  return null;
 }
 
-export function canHighlight(language) {
+export function canHighlight(language: string): boolean {
  return Boolean(getLanguageFromNameOrAlias(language));
 }
 
-export function getLanguageName(language) {
+export function getLanguageName(language: string): string {
  if (canHighlight(language)) {
- return HighlightedLanguages[getLanguageFromNameOrAlias(language)].name;
+ const name: string | undefined = getLanguageFromNameOrAlias(language);
+ if (!name) {
+ return '';
+ }
+ return HighlightedLanguages[name].name;
  }
 
  return '';
 }
 
-function getLanguageFromNameOrAlias(name) {
- const langName = name.toLowerCase();
+function getLanguageFromNameOrAlias(name: string) {
+ const langName: string = name.toLowerCase();
  if (HighlightedLanguages[langName]) {
  return langName;
  }