refactor: use unifiedjs esm packages

lib/img-to-jsx.js

@@ -1,33 +0,0 @@
-const visit = require('unist-util-visit')
-const sizeOf = require('image-size')
-const fs = require('fs')
-
-module.exports = (options) => (tree) => {
-  visit(
-    tree,
-    // only visit p tags that contain an img element
-    (node) => node.type === 'paragraph' && node.children.some((n) => n.type === 'image'),
-    (node) => {
-      const imageNode = node.children.find((n) => n.type === 'image')
-
-      // only local files
-      if (fs.existsSync(`${process.cwd()}/public${imageNode.url}`)) {
-        const dimensions = sizeOf(`${process.cwd()}/public${imageNode.url}`)
-
-        // Convert original node to next/image
-        ;(imageNode.type = 'mdxJsxFlowElement'),
-          (imageNode.name = 'Image'),
-          (imageNode.attributes = [
-            { type: 'mdxJsxAttribute', name: 'alt', value: imageNode.alt },
-            { type: 'mdxJsxAttribute', name: 'src', value: imageNode.url },
-            { type: 'mdxJsxAttribute', name: 'width', value: dimensions.width },
-            { type: 'mdxJsxAttribute', name: 'height', value: dimensions.height },
-          ])
-
-        // Change node type from p to div to avoid nesting error
-        node.type = 'div'
-        node.children = [imageNode]
-      }
-    }
-  )
-}

lib/mdx.js

@@ -3,11 +3,20 @@ import fs from 'fs'
 import matter from 'gray-matter'
 import path from 'path'
 import readingTime from 'reading-time'
-import visit from 'unist-util-visit'
-import codeTitles from './remark-code-title'
-import remarkTocHeadings from './remark-toc-headings'
-import imgToJsx from './img-to-jsx'
+import { visit } from 'unist-util-visit'
 import getAllFilesRecursively from './utils/files'
+// Remark packages
+import remarkSlug from 'remark-slug'
+import remarkAutolinkHeadings from 'remark-autolink-headings'
+import remarkGfm from 'remark-gfm'
+import remarkFootnotes from 'remark-footnotes'
+import remarkMath from 'remark-math'
+import remarkCodeTitles from './remark-code-title'
+import remarkTocHeadings from './remark-toc-headings'
+import remarkImgToJsx from './remark-img-to-jsx'
+// Rehype packages
+import rehypeKatex from 'rehype-katex'
+import rehypePrismPlus from 'rehype-prism-plus'
 
 const root = process.cwd()
 
@@ -78,19 +87,19 @@ export async function getFileBySlug(type, slug) {
       // plugins in the future.
       options.remarkPlugins = [
         ...(options.remarkPlugins ?? []),
-        require('remark-slug'),
-        require('remark-autolink-headings'),
+        remarkSlug,
+        remarkAutolinkHeadings,
         [remarkTocHeadings, { exportRef: toc }],
-        require('remark-gfm'),
-        codeTitles,
-        [require('remark-footnotes'), { inlineNotes: true }],
-        require('remark-math'),
-        imgToJsx,
+        remarkGfm,
+        remarkCodeTitles,
+        [remarkFootnotes, { inlineNotes: true }],
+        remarkMath,
+        remarkImgToJsx,
       ]
       options.rehypePlugins = [
         ...(options.rehypePlugins ?? []),
-        require('rehype-katex'),
-        [require('rehype-prism-plus'), { ignoreMissing: true }],
+        rehypeKatex,
+        [rehypePrismPlus, { ignoreMissing: true }],
         () => {
           return (tree) => {
             visit(tree, 'element', (node, index, parent) => {

lib/remark-code-title.js

@@ -1,6 +1,6 @@
-import visit from 'unist-util-visit'
+import { visit } from 'unist-util-visit'
 
-module.exports = function (options) {
+export default function remarkCodeTitles() {
   return (tree) =>
     visit(tree, 'code', (node, index) => {
       const nodeLang = node.lang || ''

lib/remark-img-to-jsx.js

@@ -0,0 +1,35 @@
+import { visit } from 'unist-util-visit'
+import sizeOf from 'image-size'
+import fs from 'fs'
+
+export default function remarkImgToJsx() {
+  return (tree) => {
+    visit(
+      tree,
+      // only visit p tags that contain an img element
+      (node) => node.type === 'paragraph' && node.children.some((n) => n.type === 'image'),
+      (node) => {
+        const imageNode = node.children.find((n) => n.type === 'image')
+
+        // only local files
+        if (fs.existsSync(`${process.cwd()}/public${imageNode.url}`)) {
+          const dimensions = sizeOf(`${process.cwd()}/public${imageNode.url}`)
+
+          // Convert original node to next/image
+          ;(imageNode.type = 'mdxJsxFlowElement'),
+            (imageNode.name = 'Image'),
+            (imageNode.attributes = [
+              { type: 'mdxJsxAttribute', name: 'alt', value: imageNode.alt },
+              { type: 'mdxJsxAttribute', name: 'src', value: imageNode.url },
+              { type: 'mdxJsxAttribute', name: 'width', value: dimensions.width },
+              { type: 'mdxJsxAttribute', name: 'height', value: dimensions.height },
+            ])
+
+          // Change node type from p to div to avoid nesting error
+          node.type = 'div'
+          node.children = [imageNode]
+        }
+      }
+    )
+  }
+}

lib/remark-toc-headings.js

@@ -1,6 +1,6 @@
-import visit from 'unist-util-visit'
+import { visit } from 'unist-util-visit'
 
-module.exports = function (options) {
+export default function remarkTocHeadings(options) {
   return (tree) =>
     visit(tree, 'heading', (node, index, parent) => {
       options.exportRef.push({

next.config.js

@@ -8,6 +8,7 @@ module.exports = withBundleAnalyzer({
   eslint: {
     dirs: ['pages', 'components', 'lib', 'layouts', 'scripts'],
   },
+  experimental: { esmExternals: true },
   webpack: (config, { dev, isServer }) => {
     config.module.rules.push({
       test: /\.(png|jpe?g|gif|mp4)$/i,

package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "start": "next-remote-watch ./data",
     "dev": "next dev",
-    "build": "next build && node ./scripts/generate-sitemap",
+    "build": "next build",
     "serve": "next start",
     "analyze": "cross-env ANALYZE=true next build",
     "lint": "next lint --fix --dir pages --dir components --dir lib --dir layouts --dir scripts",
@@ -18,7 +18,7 @@
     "esbuild": "^0.12.15",
     "gray-matter": "^4.0.2",
     "image-size": "1.0.0",
-    "mdx-bundler": "^5.1.2",
+    "mdx-bundler": "^6.0.1",
     "next": "11.1.0",
     "next-themes": "^0.0.14",
     "postcss": "^8.3.5",
@@ -26,15 +26,16 @@
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "reading-time": "1.3.0",
-    "rehype-katex": "^5.0.0",
-    "rehype-prism-plus": "0.0.4",
-    "remark-autolink-headings": "6.0.1",
-    "remark-footnotes": "^3.0.0",
-    "remark-gfm": "^1.0.0",
-    "remark-math": "^4.0.0",
-    "remark-slug": "6.0.0",
+    "rehype-katex": "^6.0.0",
+    "rehype-prism-plus": "^0.0.5",
+    "remark-autolink-headings": "^7.0.0",
+    "remark-footnotes": "^4.0.0",
+    "remark-gfm": "^2.0.0",
+    "remark-math": "^5.0.0",
+    "remark-slug": "^7.0.0",
     "sharp": "^0.28.3",
-    "tailwindcss": "^2.2.2"
+    "tailwindcss": "^2.2.2",
+    "unist-util-visit": "^4.0.0"
   },
   "devDependencies": {
     "@next/bundle-analyzer": "11.1.0",
@@ -52,13 +53,7 @@
     "inquirer": "^8.1.1",
     "lint-staged": "^11.0.0",
     "next-remote-watch": "^1.0.0",
-    "prettier": "2.2.1",
-    "rehype": "11.0.0",
-    "remark-frontmatter": "3.0.0",
-    "remark-parse": "9.0.0",
-    "remark-stringify": "9.0.1",
-    "unified": "9.2.1",
-    "unist-util-visit": "2.0.3"
+    "prettier": "2.2.1"
   },
   "lint-staged": {
     "*.+(js|jsx|ts|tsx)": [