satisfy types

Author: avivkeller

packages/mdx/lib/compiler.tsx

@@ -24,10 +24,8 @@ type CompiledMDX = {
   readingTime: ReadTimeResults;
 };
 
-type MDXVFile = VFile & {
-  data: Omit<CompiledMDX, 'frontmatter'> & {
-    matter: Record<string, unknown>;
-  };
+type MDXVFileData = Omit<CompiledMDX, 'frontmatter'> & {
+  matter: Record<string, unknown>;
 };
 
 /**
@@ -42,7 +40,7 @@ type MDXVFile = VFile & {
  * @returns Promise resolving to compiled MDX content and metadata
  */
 export default async function compile(
-  source: MDXVFile,
+  source: VFile,
   fileExtension: 'md' | 'mdx',
   components: MDXComponents = {},
   props: Record<string, unknown> = {}
@@ -77,7 +75,11 @@ export default async function compile(
 
   // Retrieve some parsed data from the VFile metadata
   // such as frontmatter and Markdown headings
-  const { headings = [], matter: frontmatter, readingTime } = source.data || {};
+  const {
+    headings = [],
+    matter: frontmatter,
+    readingTime,
+  } = (source.data || {}) as MDXVFileData;
 
   headings.forEach((heading: Heading) => {
     // we re-sluggify the links to match the GitHub slugger

packages/mdx/lib/highlighter.ts

@@ -4,7 +4,7 @@ import {
 } from '@shikijs/core';
 import { createJavaScriptRegexEngine } from '@shikijs/engine-javascript';
 
-import { LANGUAGES, DEFAULT_THEME } from '../shiki.config.mjs';
+import { LANGUAGES, DEFAULT_THEME } from '../shiki.config';
 
 // Create a memoized minimal Shiki Syntax Highlighter
 export const shiki = createHighlighterCoreSync({

packages/mdx/lib/utils.ts

@@ -1,6 +1,6 @@
 import GithubSlugger from 'github-slugger';
 
-import { LANGUAGES } from '../shiki.config.mjs';
+import { LANGUAGES } from '../shiki.config';
 
 export const createGitHubSlugger = () => {
   const githubSlugger = new GithubSlugger();

packages/mdx/shiki.config.mjs packages/mdx/shiki.config.tspackages/mdx/shiki.config.mjs renamed to packages/mdx/shiki.config.ts

@@ -1,5 +1,4 @@
-'use strict';
-
+import type { LanguageRegistration, ThemeRegistration } from 'shiki';
 import diffLanguage from 'shiki/langs/diff.mjs';
 import dockerLanguage from 'shiki/langs/docker.mjs';
 import iniLanguage from 'shiki/langs/ini.mjs';
@@ -14,15 +13,13 @@ import shikiNordTheme from 'shiki/themes/nord.mjs';
 
 /**
  * All languages needed within the Node.js website for syntax highlighting.
- *
- * @type {Array<import('shiki').LanguageRegistration>}
  */
-export const LANGUAGES = [
+export const LANGUAGES: Array<LanguageRegistration> = [
   {
     ...javaScriptLanguage[0],
-    // We path the JavaScript language to include the CommonJS and ES Module aliases
+    // We patch the JavaScript language to include the CommonJS and ES Module aliases
     // that are commonly used (non-standard aliases) within our API docs and Blog posts
-    aliases: javaScriptLanguage[0].aliases.concat('cjs', 'mjs'),
+    aliases: javaScriptLanguage[0].aliases!.concat('cjs', 'mjs'),
   },
   ...iniLanguage,
   ...jsonLanguage,
@@ -36,8 +33,8 @@ export const LANGUAGES = [
 ];
 
 // This is the default theme we use for our Shiki Syntax Highlighter
-export const DEFAULT_THEME = {
-  // We updating this color because the background color and comment text color
+export const DEFAULT_THEME: ThemeRegistration = {
+  // We update this color because the background color and comment text color
   // in the Codebox component do not comply with accessibility standards
   // @see https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html
   colorReplacements: { '#616e88': '#707e99' },