Upgrade unified deps and improve unified plugins types (#1200)

* Upgrade @astrojs/markdown-support deps and update types

* Add changeset

* Update changeset

* Switch astro-markdown-plugins example to use rehype-autolink-headings

Usage of remark-autolink-headings is discouraged in favor of the rehype counterpart: https://github.com/remarkjs/remark-autolink-headings\#remark-autolink-headings

* Add stricter types for unified plugins

This includes a few suggestions from a code review:
- use vfile.toString instead of vfile.value.toString
- refactor plugins to follow unified best practices instead of returning functions that return a plugin
- use any instead of any[] for plugin options types

* Narrow down types to more specific hast or mdast typings

1 files changed, 29 insertions, 29 deletions

diff --git a/packages/markdown-support/src/codeblock.ts b/packages/markdown-support/src/codeblock.ts
index 3f3e8237c..32adc0151 100644
--- a/packages/markdown-support/src/codeblock.ts
+++ b/packages/markdown-support/src/codeblock.ts
@@ -1,43 +1,43 @@
 import { visit } from 'unist-util-visit';
+import type { Element, Root as HastRoot, Properties } from 'hast';
+import type { Root as MdastRoot } from 'mdast';
 
 /**  */
 export function remarkCodeBlock() {
-  const visitor = (node: any) => {
-    const { data, meta } = node;
-    let lang = node.lang || 'html'; // default to html matches GFM behavior.
+  return function (tree: MdastRoot) {
+    visit(tree, 'code', (node) => {
+      const { data, meta } = node;
+      let lang = node.lang || 'html'; // default to html to match GFM behavior.
 
-    let currentClassName = data?.hProperties?.class ?? '';
-    node.data = node.data || {};
-    node.data.hProperties = node.data.hProperties || {};
-    node.data.hProperties = { ...node.data.hProperties, class: `language-${lang} ${currentClassName}`.trim(), lang, meta };
-
-    return node;
+      let currentClassName = (data?.hProperties as Properties)?.class ?? '';
+      node.data = node.data || {};
+      node.data.hProperties = node.data.hProperties || {};
+      node.data.hProperties = { ...(node.data.hProperties as Properties), class: `language-${lang} ${currentClassName}`.trim(), lang, meta };
+    });
   };
-  return () => (tree: any) => visit(tree, 'code', visitor);
 }
 
 /**  */
 export function rehypeCodeBlock() {
-  const escapeCode = (code: any) => {
-    code.children = code.children.map((child: any) => {
-      if (child.type === 'text') {
-        return { ...child, value: child.value.replace(/\{/g, 'ASTRO_ESCAPED_LEFT_CURLY_BRACKET\0') };
+  return function (tree: HastRoot) {
+    const escapeCode = (code: Element): void => {
+      code.children = code.children.map((child) => {
+        if (child.type === 'text') {
+          return { ...child, value: child.value.replace(/\{/g, 'ASTRO_ESCAPED_LEFT_CURLY_BRACKET\0') };
+        }
+        return child;
+      });
+    };
+    visit(tree, 'element', (node) => {
+      if (node.tagName === 'code') {
+        escapeCode(node);
+        return;
       }
-      return child;
-    });
-  };
-  const visitor = (node: any) => {
-    if (node.tagName === 'code') {
-      escapeCode(node);
-      return;
-    }
-
-    if (node.tagName !== 'pre') return;
-    const code = node.children[0];
-    if (code.tagName !== 'code') return;
-    node.properties = { ...code.properties };
 
-    return node;
+      if (node.tagName !== 'pre') return;
+      const code = node.children[0];
+      if (code.type !== 'element' || code.tagName !== 'code') return;
+      node.properties = { ...code.properties };
+    });
   };
-  return () => (tree: any) => visit(tree, 'element', visitor);
 }