Convert Phase 4: Asset and Image Processing files to TypeScript (#56638)

Author: heiskr

…render/unified/rewrite-asset-img-tags.js …render/unified/rewrite-asset-img-tags.tssrc/content-render/unified/rewrite-asset-img-tags.js renamed to src/content-render/unified/rewrite-asset-img-tags.ts src/content-render/unified/rewrite-asset-img-tags.js renamed to src/content-render/unified/rewrite-asset-img-tags.ts

@@ -1,3 +1,4 @@
+import type { Element, Node } from 'hast'
 import { visit, SKIP } from 'unist-util-visit'
 import { IMAGE_DENSITY } from '../../assets/lib/image-density'
 
@@ -9,12 +10,16 @@ export const MAX_WIDTH = 1440
 const DEFAULT_IMAGE_DENSITY = '2x'
 
 // Matches any <img> tags with an href that starts with `/assets/`
-const matcher = (node) =>
-  node.type === 'element' &&
-  node.tagName === 'img' &&
-  node.properties &&
-  node.properties.src &&
-  node.properties.src.startsWith('/assets/')
+function isAssetImg(node: Node): node is Element {
+  return (
+    node.type === 'element' &&
+    (node as Element).tagName === 'img' &&
+    !!(node as Element).properties &&
+    !!(node as Element).properties?.src &&
+    typeof (node as Element).properties?.src === 'string' &&
+    ((node as Element).properties?.src as string).startsWith('/assets/')
+  )
+}
 
 /**
  * Where it can mutate the AST to swap from:
@@ -30,17 +35,20 @@ const matcher = (node) =>
  *
  * */
 export default function rewriteAssetImgTags() {
-  return (tree) => {
-    visit(tree, matcher, (node) => {
-      if (node.properties.src.endsWith('.png')) {
+  return (tree: Node) => {
+    visit(tree, 'element', (node: Node) => {
+      if (!isAssetImg(node)) return
+
+      const src = node.properties?.src as string
+      if (src.endsWith('.png')) {
         const copyPNG = structuredClone(node)
 
-        const originalSrc = node.properties.src
+        const originalSrc = src
         const originalSrcWithoutCb = originalSrc.replace(/cb-\w+\//, '')
-        const webpSrc = injectMaxWidth(node.properties.src.replace(/\.png$/, '.webp'), MAX_WIDTH)
+        const webpSrc = injectMaxWidth(src.replace(/\.png$/, '.webp'), MAX_WIDTH)
         const srcset = `${webpSrc} ${IMAGE_DENSITY[originalSrcWithoutCb] || DEFAULT_IMAGE_DENSITY}`
 
-        const sourceWEBP = {
+        const sourceWEBP: Element = {
           type: 'element',
           tagName: 'source',
           properties: {
@@ -49,12 +57,15 @@ export default function rewriteAssetImgTags() {
           },
           children: [],
         }
-        node.children.push(sourceWEBP)
 
+        node.children = node.children || []
+        node.children.push(sourceWEBP)
         node.children.push(copyPNG)
         node.tagName = 'picture'
+
         delete node.properties.alt
         delete node.properties.src
+
         // Don't go further or else you end up in an infinite recursion
         return SKIP
       }
@@ -68,7 +79,7 @@ export default function rewriteAssetImgTags() {
  * For example, if the pathname is `/assets/cb-1234/images/foo.png`
  * return `/assets/cb-1234/_mw-1440/images/foo.png`
  */
-function injectMaxWidth(pathname, maxWidth) {
+function injectMaxWidth(pathname: string, maxWidth: number): string {
   const split = pathname.split('/')
   // This prefix needs to match what's possibly expected in dynamic-assets.js
   const inject = `mw-${maxWidth}`

…ent-render/unified/rewrite-asset-urls.js …ent-render/unified/rewrite-asset-urls.tssrc/content-render/unified/rewrite-asset-urls.js renamed to src/content-render/unified/rewrite-asset-urls.ts src/content-render/unified/rewrite-asset-urls.js renamed to src/content-render/unified/rewrite-asset-urls.ts

@@ -1,21 +1,28 @@
 import fs from 'fs'
-
+import type { Element, Node } from 'hast'
 import { visit } from 'unist-util-visit'
 
 // Matches any <img> tags with an href that starts with `/assets/` or '/public/'
-const matcher = (node) =>
-  node.type === 'element' &&
-  node.tagName === 'img' &&
-  node.properties &&
-  node.properties.src &&
-  (node.properties.src.startsWith('/assets/') || node.properties.src.startsWith('/public/'))
+function isAssetOrPublicImg(node: Node): node is Element {
+  return (
+    node.type === 'element' &&
+    (node as Element).tagName === 'img' &&
+    !!(node as Element).properties &&
+    !!(node as Element).properties?.src &&
+    typeof (node as Element).properties?.src === 'string' &&
+    (((node as Element).properties?.src as string).startsWith('/assets/') ||
+      ((node as Element).properties?.src as string).startsWith('/public/'))
+  )
+}
 
 // Content authors write images like `![Alt](/assets/images/foo.png`, but
 // for caching purposes we want to rewrite those so they can be cached
 // indefinitely.
 export default function rewriteImgSources() {
-  return (tree) => {
-    visit(tree, matcher, (node) => {
+  return (tree: Node) => {
+    visit(tree, 'element', (node: Node) => {
+      if (!isAssetOrPublicImg(node)) return
+
       const newSrc = getNewSrc(node)
       if (newSrc) {
         node.properties.src = newSrc
@@ -24,8 +31,8 @@ export default function rewriteImgSources() {
   }
 }
 
-function getNewSrc(node) {
-  const { src } = node.properties
+function getNewSrc(node: Element): string | undefined {
+  const src = node.properties?.src as string
   if (!src.startsWith('/')) return
 
   try {
@@ -46,7 +53,7 @@ function getNewSrc(node) {
     const split = src.split('/')
     split.splice(2, 0, `cb-${hash}`)
     return split.join('/')
-  } catch (err) {
+  } catch {
     console.warn(
       `Failed to get a hash for ${src} ` +
         '(This is mostly harmless and can happen with outdated translations).',

src/content-render/unified/wrap-procedural-images.js

@@ -0,0 +1,59 @@
+import type { Element, Node, Parent } from 'hast'
+import { visitParents } from 'unist-util-visit-parents'
+
+/**
+ * Where it can mutate the AST to swap from:
+ *
+ *   <ol>
+ *     <li>
+ *       <img src="..." />
+ *
+ * to:
+ *
+ *   <ol>
+ *     <li>
+ *       <div class="procedural-image-wrapper">
+ *         <img src="..." />
+ *
+ *
+ * */
+
+function isImgElement(node: Node): node is Element {
+  return node.type === 'element' && (node as Element).tagName === 'img'
+}
+
+function insideOlLi(ancestors: Parent[]): boolean {
+  const li = ancestors.findIndex((node) => (node as Element).tagName === 'li')
+  if (li > -1) {
+    const ol = ancestors.slice(0, li).findIndex((node) => (node as Element).tagName === 'ol')
+    return ol > -1
+  }
+  return false
+}
+
+function visitor(node: Element, ancestors: Parent[]): void {
+  if (insideOlLi(ancestors)) {
+    const shallowClone: Element = Object.assign({}, node)
+    shallowClone.tagName = 'div'
+    shallowClone.properties = { class: 'procedural-image-wrapper' }
+    shallowClone.children = [node]
+    const parent = ancestors.at(-1)
+    if (parent && parent.children) {
+      parent.children = parent.children.map((child) => {
+        if (child.type === 'element' && (child as Element).tagName === 'img') {
+          return shallowClone
+        }
+        return child
+      })
+    }
+  }
+}
+
+export default function wrapProceduralImages() {
+  return (tree: Node) =>
+    visitParents(tree, 'element', (node: Node, ancestors: Parent[]) => {
+      if (isImgElement(node)) {
+        visitor(node, ancestors)
+      }
+    })
+}