Convert unified/processor.js to TypeScript (Phase 1 - Core Processor) (#56426)

Author: heiskr

src/content-render/types.ts

@@ -0,0 +1,52 @@
+/**
+ * Types for the content-render module
+ */
+
+/**
+ * Context interface for content rendering operations
+ */
+export interface Context {
+  currentLanguage?: string
+  autotitleLanguage?: string
+  currentVersion?: string
+  currentProduct?: string
+  markdownRequested?: boolean
+  pages?: any
+  redirects?: any
+  page?: {
+    fullPath: string
+    [key: string]: any
+  }
+  [key: string]: any
+}
+
+/**
+ * Options for rendering operations
+ */
+export interface RenderOptions {
+  cache?: boolean | ((template: string, context: Context) => string | null)
+  filename?: string
+  textOnly?: boolean
+  [key: string]: any
+}
+
+/**
+ * Unified processor plugin function type
+ */
+export type UnifiedPlugin = (context?: Context) => any
+
+/**
+ * VFile interface for unified processing
+ */
+export interface VFile {
+  toString(): string
+  [key: string]: any
+}
+
+/**
+ * Unified processor interface
+ */
+export interface UnifiedProcessor {
+  process(content: string): Promise<VFile>
+  use(plugin: any, ...args: any[]): UnifiedProcessor
+}

src/content-render/unified/module-types.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Type declarations for modules without TypeScript definitions
+ */
+
+declare module 'remark-gemoji-to-emoji' {
+  import type { Plugin } from 'unified'
+  const plugin: Plugin
+  export default plugin
+}
+
+declare module 'remark-remove-comments' {
+  import type { Plugin } from 'unified'
+  const plugin: Plugin
+  export default plugin
+}
+
+declare module 'rehype-highlight' {
+  import type { Plugin } from 'unified'
+  import type { Options } from 'lowlight'
+
+  interface HighlightOptions extends Options {
+    languages?: Record<string, any>
+    subset?: boolean
+    aliases?: Record<string, string>
+  }
+
+  const plugin: Plugin<[HighlightOptions?]>
+  export default plugin
+}

src/content-render/unified/processor.js renamed to src/content-render/unified/processor.ts

@@ -29,8 +29,9 @@ import annotate from './annotate'
 import alerts from './alerts'
 import removeHtmlComments from 'remark-remove-comments'
 import remarkStringify from 'remark-stringify'
+import type { Context, UnifiedProcessor } from '@/content-render/types'
 
-export function createProcessor(context) {
+export function createProcessor(context: Context): UnifiedProcessor {
   return (
     unified()
       .use(remarkParse)
@@ -44,11 +45,13 @@ export function createProcessor(context) {
       .use(remark2rehype, { allowDangerousHtml: true })
       // HTML AST below vvv
       .use(slug)
-      .use(useEnglishHeadings, context)
+      // useEnglishHeadings plugin requires context with englishHeadings property
+      .use(useEnglishHeadings as any, context || {})
       .use(headingLinks)
       .use(codeHeader)
       .use(annotate, context)
-      .use(highlight, {
+      // Using 'as any' for highlight plugin due to complex type mismatch between unified and rehype-highlight
+      .use(highlight as any, {
         languages: { ...common, graphql, dockerfile, http, groovy, erb, powershell },
         subset: false,
         aliases: {
@@ -71,24 +74,28 @@ export function createProcessor(context) {
       .use(rewriteForRowheaders)
       .use(rewriteImgSources)
       .use(rewriteAssetImgTags)
-      .use(alerts, context)
+      // alerts plugin requires context with alertTitles property
+      .use(alerts as any, context || {})
       // HTML AST above ^^^
-      .use(html)
-    // String below vvv
+      .use(html) as UnifiedProcessor // String below vvv
   )
 }
 
-export function createMarkdownOnlyProcessor(context) {
-  return unified().use(remarkParse).use(gfm).use(rewriteLocalLinks, context).use(remarkStringify)
+export function createMarkdownOnlyProcessor(context: Context): UnifiedProcessor {
+  return unified()
+    .use(remarkParse)
+    .use(gfm)
+    .use(rewriteLocalLinks, context)
+    .use(remarkStringify) as UnifiedProcessor
 }
 
-export function createMinimalProcessor(context) {
+export function createMinimalProcessor(context: Context): UnifiedProcessor {
   return unified()
     .use(remarkParse)
     .use(gfm)
     .use(rewriteLocalLinks, context)
     .use(remark2rehype, { allowDangerousHtml: true })
     .use(slug)
     .use(raw)
-    .use(html)
+    .use(html) as UnifiedProcessor
 }