build: update to marked v16 and resolve breakages

Updates the repo to the latest version of `marked` and resolves some breaking changes that required us to switch some files to ESM. As a result, I had to disable syntax highlighting for type aliases and constants in the API docs, because it would've required us to rework the dgeni setup as well.

Author: crisbeto

.ng-dev/release.mts

@@ -1,3 +1,11 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
 import semver from 'semver';
 import {ReleaseConfig} from '@angular/ng-dev';
 import {assertValidUpdateMigrationCollections} from '../tools/release-checks/check-migration-collections.mjs';

package.json

@@ -122,7 +122,7 @@
     "karma-parallel": "^0.3.1",
     "karma-sourcemap-loader": "^0.4.0",
     "magic-string": "0.30.17",
-    "marked": "^15.0.12",
+    "marked": "^16.0.0",
     "minimatch": "^10.0.3",
     "parse5": "^7.1.2",
     "postcss": "^8.4.17",

pnpm-lock.yaml

@@ -2,7 +2,6 @@ import {Package} from 'dgeni';
 import {ReadTypeScriptModules} from 'dgeni-packages/typescript/processors/readTypeScriptModules';
 import {Host} from 'dgeni-packages/typescript/services/ts-host/host';
 import {TypeFormatFlags} from 'typescript';
-import {HighlightNunjucksExtension} from './nunjucks-tags/highlight';
 import {patchLogService} from './patch-log-service';
 import {AsyncFunctionsProcessor} from './processors/async-functions';
 import {categorizer} from './processors/categorizer';
@@ -165,6 +164,4 @@ apiDocsPackage.config(function (templateFinder: any, templateEngine: any) {
     variableStart: '{$',
     variableEnd: '$}',
   };
-
-  templateEngine.tags.push(new HighlightNunjucksExtension());
 });

tools/dgeni/docs-package.ts

@@ -17,10 +17,6 @@ <h4 id="{$ constant.name $}" class="docs-header-link docs-api-h4 docs-api-consta
 
 <div class="docs-markdown">
 <pre class="docs-markdown-pre">
-<code class="docs-markdown-code">
-{%- highlight "typescript" -%}
-  const {$ constant.name | safe $}: {$ constant.type | safe $};
-{%- end_highlight -%}
-</code>
+<code class="docs-markdown-code">const {$ constant.name | safe $}: {$ constant.type | safe $};</code>
 </pre>
 </div>

tools/dgeni/nunjucks-tags/highlight.ts

@@ -17,10 +17,6 @@ <h4 id="{$ alias.name $}" class="docs-header-link docs-api-h4 docs-api-type-alia
 
 <div class="docs-markdown">
 <pre class="docs-markdown-pre">
-<code class="docs-markdown-code">
-{%- highlight "typescript" -%}
-  type {$ alias.name | safe $} = {$ alias.typeDefinition | safe $};
-{%- end_highlight -%}
-</code>
+<code class="docs-markdown-code">type {$ alias.name | safe $} = {$ alias.typeDefinition | safe $};</code>
 </pre>
 </div>

tools/dgeni/templates/constant.template.html

@@ -5,7 +5,7 @@ package(default_visibility = ["//visibility:public"])
 
 ts_project(
     name = "extract_tokens_lib",
-    srcs = glob(["**/*.ts"]),
+    srcs = glob(["**/*.mts"]),
     tsconfig = "//tools:tsconfig",
     deps = [
         "//:node_modules/sass",
@@ -18,5 +18,5 @@ js_binary(
     data = [
         ":extract_tokens_lib",
     ],
-    entry_point = ":extract-tokens.js",
+    entry_point = ":extract-tokens.mjs",
 )

tools/dgeni/templates/type-alias.template.html

@@ -2,7 +2,7 @@ import {readFileSync, writeFileSync} from 'fs';
 import {pathToFileURL} from 'url';
 import {relative, join, dirname} from 'path';
 import {compileString} from 'sass';
-import {highlightCodeBlock} from '../highlight-files/highlight-code-block';
+import {highlightCodeBlock} from '../highlight-files/highlight-code-block.mjs';
 
 /** Information extracted for a single token from the theme. */
 interface ExtractedToken {
@@ -43,40 +43,39 @@ interface ThemeData {
 }
 
 // Script that extracts the tokens from a specific Bazel target.
-if (require.main === module) {
-  const [packagePath, outputPath, ...inputFiles] = process.argv.slice(2);
-  const themeFiles = inputFiles
-    // Filter out only the files within the package
-    // since the path also includes dependencies.
-    .filter(file => file.startsWith(packagePath))
-    .map(file => {
-      // Assumption: all theme files start with an underscore since they're
-      // partials and they end with `-theme`.
-      // Assumption: the name under which the theme mixin will be available is the
-      // same as the file name without the underscore and `-theme.scss`.
-      const match = file.match(/_(.*)-theme\.scss$/);
-      return match ? {mixinPrefix: match[1], filePath: file} : null;
-    })
-    .filter(file => !!file);
-
-  if (themeFiles.length === 0) {
-    throw new Error(`Could not find theme files in ${packagePath}`);
-  }
 
-  const themes: ThemeData[] = [];
+const [packagePath, outputPath, ...inputFiles] = process.argv.slice(2);
+const themeFiles = inputFiles
+  // Filter out only the files within the package
+  // since the path also includes dependencies.
+  .filter(file => file.startsWith(packagePath))
+  .map(file => {
+    // Assumption: all theme files start with an underscore since they're
+    // partials and they end with `-theme`.
+    // Assumption: the name under which the theme mixin will be available is the
+    // same as the file name without the underscore and `-theme.scss`.
+    const match = file.match(/_(.*)-theme\.scss$/);
+    return match ? {mixinPrefix: match[1], filePath: file} : null;
+  })
+  .filter(file => !!file);
+
+if (themeFiles.length === 0) {
+  throw new Error(`Could not find theme files in ${packagePath}`);
+}
+
+const themes: ThemeData[] = [];
 
-  themeFiles.forEach(theme => {
-    themes.push({
-      name: theme.mixinPrefix,
-      // This can be derived from the `name` already, but we want the source
-      // of truth to be in this repo, instead of whatever page consumes the data.
-      overridesMixin: `${theme.mixinPrefix}-overrides`,
-      tokens: extractTokens(theme.filePath),
-    });
+themeFiles.forEach(theme => {
+  themes.push({
+    name: theme.mixinPrefix,
+    // This can be derived from the `name` already, but we want the source
+    // of truth to be in this repo, instead of whatever page consumes the data.
+    overridesMixin: `${theme.mixinPrefix}-overrides`,
+    tokens: extractTokens(theme.filePath),
   });
+});
 
-  writeFileSync(outputPath, JSON.stringify({example: getUsageExample(themes), themes}));
-}
+writeFileSync(outputPath, JSON.stringify({example: getUsageExample(themes), themes}));
 
 /**
  * Extracts the tokens from a theme file.

tools/extract-tokens/BUILD.bazel

@@ -1,11 +1,11 @@
-load("//tools:defaults.bzl", "ts_project")
 load("@aspect_rules_js//js:defs.bzl", "js_binary")
+load("//tools:defaults.bzl", "ts_project")
 
 package(default_visibility = ["//visibility:public"])
 
 ts_project(
     name = "sources",
-    srcs = glob(["**/*.ts"]),
+    srcs = glob(["**/*.mts"]),
     tsconfig = "//tools:tsconfig",
     deps = [
         "//:node_modules/@types/fs-extra",
@@ -20,5 +20,5 @@ js_binary(
     data = [
         ":sources",
     ],
-    entry_point = ":highlight-files.js",
+    entry_point = ":highlight-files.mjs",
 )