sync: add marked indirection package (#4944)

Internal marked is a bit funky so, to paper over the differences, we
introduce the indirection.

Author: stephanwlee

tensorboard/webapp/third_party/BUILD

@@ -22,3 +22,12 @@ tf_ts_library(
         "@npm//@tensorflow/tfjs-core",
     ],
 )
+
+tf_ts_library(
+    name = "marked",
+    srcs = ["marked.ts"],
+    deps = [
+        "@npm//@types/marked",
+        "@npm//marked",
+    ],
+)

tensorboard/webapp/third_party/marked.ts

@@ -0,0 +1,24 @@
+/* Copyright 2021 The TensorFlow Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+==============================================================================*/
+/**
+ * @fileoverview This is an marked interop that papers over the differences
+ * within google internal repository and the external repository. Please depend
+ * on this module instead of depending on the marked directly.
+ */
+import * as markedImport from 'marked';
+
+// You cannot `export * from 'marked';` due to below error[1].
+// [1]: 'marked' uses 'export =' and cannot be used with 'export *'.
+export import marked = markedImport;

tensorboard/webapp/widgets/markdown_renderer/BUILD

@@ -15,10 +15,9 @@ tf_ng_module(
         "markdown_renderer_component.ng.html",
     ],
     deps = [
+        "//tensorboard/webapp/third_party:marked",
         "@npm//@angular/common",
         "@npm//@angular/core",
-        "@npm//@types/marked",
-        "@npm//marked",
     ],
 )
 

tensorboard/webapp/widgets/markdown_renderer/markdown_renderer_component.ts

@@ -22,7 +22,7 @@ import {
   SimpleChanges,
   ViewEncapsulation,
 } from '@angular/core';
-import {parse} from 'marked';
+import {marked} from '../../third_party/marked';
 
 @Component({
   selector: 'markdown-renderer',
@@ -43,7 +43,7 @@ export class MarkdownRendererComponent implements OnChanges {
     if (changes['markdown']) {
       const markdownChange: SimpleChange = changes['markdown'];
       if (markdownChange.previousValue !== this.markdown) {
-        this.markdownHTML = await parse(this.markdown);
+        this.markdownHTML = await marked.parse(this.markdown);
         this.changeDetectorRef.detectChanges();
       }
     }