Upgrade Next 11 and others

components/CodeBlock.tsx

@@ -1,12 +1,12 @@
 // Inspired by https://github.com/rexxars/react-refractor
 import React from 'react';
-import refractor from 'refractor/core';
+import { refractor } from 'refractor/lib/core';
 import js from 'refractor/lang/javascript';
 import jsx from 'refractor/lang/jsx';
 import bash from 'refractor/lang/bash';
 import css from 'refractor/lang/css';
 import diff from 'refractor/lang/diff';
-import hastToHtml from 'hast-util-to-html';
+import { toHtml } from 'hast-util-to-html';
 import rangeParser from 'parse-numeric-range';
 import highlightLine from '@lib/rehype-highlight-line';
 import highlightWord from '@lib/rehype-highlight-word';
@@ -44,12 +44,12 @@ export const CodeBlock = React.forwardRef<HTMLPreElement, CodeBlockProps>(
     } = _props;
     let result = refractor.highlight(value, language);
 
-    result = highlightLine(result, rangeParser(line));
+    result = highlightLine(result, rangeParser(line)) as any;
 
-    result = highlightWord(result);
+    result = highlightWord(result) as any;
 
     // convert to html
-    result = hastToHtml(result);
+    // result = toHtml(result) as any;
 
     // TODO reset theme
 
@@ -70,7 +70,7 @@ export const CodeBlock = React.forwardRef<HTMLPreElement, CodeBlockProps>(
         data-line-numbers={showLineNumbers}
         {...props}
       >
-        <code className={classes} dangerouslySetInnerHTML={{ __html: result }} />
+        <code className={classes} dangerouslySetInnerHTML={{ __html: result as any }} />
       </Pre>
     );
   }

lib/mdx.ts

@@ -44,7 +44,7 @@ export const getMdxBySlug = async (basePath, slug) => {
 
       return options;
     },
-  });
+  } as any);
 
   return {
     frontmatter: {

lib/rehype-highlight-code.js

@@ -1,11 +1,11 @@
 // Inspired by https://github.com/j0lv3r4/mdx-prism
 
-const rangeParser = require('parse-numeric-range');
-const visit = require('unist-util-visit');
-const nodeToString = require('hast-util-to-string');
-const refractor = require('refractor');
-const highlightLine = require('./rehype-highlight-line');
-const highlightWord = require('./rehype-highlight-word');
+const rangeParser = import('parse-numeric-range');
+const visit = import('unist-util-visit');
+const nodeToString = import('hast-util-to-string');
+const refractor = import('refractor');
+const highlightLine = import('./rehype-highlight-line');
+const highlightWord = import('./rehype-highlight-word');
 
 module.exports = (options = {}) => {
   return (tree) => {

lib/rehype-highlight-line.js

@@ -1,8 +1,8 @@
 // Inspired by https://github.com/j0lv3r4/mdx-prism
 
-const hastToHtml = require('hast-util-to-html');
-const unified = require('unified');
-const parse = require('rehype-parse');
+const { toHtml } = import('hast-util-to-html');
+const unified = import('unified');
+const parse = import('rehype-parse');
 
 const lineNumberify = function lineNumberify(ast, lineNum = 1) {
   let lineNumber = lineNum;
@@ -92,7 +92,7 @@ const MULTILINE_TOKEN_SPAN = /<span class="token ([^"]+)">[^<]*\n[^<]*<\/span>/g
 
 const applyMultilineFix = function (ast) {
   // AST to HTML
-  let html = hastToHtml(ast);
+  let html = toHtml(ast);
 
   // Fix JSX issue
   html = html.replace(MULTILINE_TOKEN_SPAN, (match, token) =>
@@ -106,8 +106,10 @@ const applyMultilineFix = function (ast) {
 };
 
 module.exports = function (ast, lines) {
-  const formattedAst = applyMultilineFix(ast);
-  const numbered = lineNumberify(formattedAst).nodes;
+  console.log('something', toHtml);
+  return '';
+  // const formattedAst = applyMultilineFix(ast);
+  // const numbered = lineNumberify(formattedAst).nodes;
 
-  return wrapLines(numbered, lines);
+  // return wrapLines(numbered, lines);
 };

lib/rehype-highlight-word.js

@@ -1,12 +1,12 @@
-const visit = require('unist-util-visit');
-const hastToHtml = require('hast-util-to-html');
-const unified = require('unified');
-const parse = require('rehype-parse');
+const visit = import('unist-util-visit');
+const { toHtml } = import('hast-util-to-html');
+const unified = import('unified');
+const parse = import('rehype-parse');
 
 const CALLOUT = /__(.*?)__/g;
 
 module.exports = (code) => {
-  const html = hastToHtml(code);
+  const html = toHtml(code);
   const result = html.replace(CALLOUT, (_, text) => `<span class="highlight-word">${text}</span>`);
   const hast = unified().use(parse, { emitParseErrors: true, fragment: true }).parse(result);
   return hast.children;

lib/rehype-meta-attribute.js

@@ -1,6 +1,6 @@
 // https://github.com/wooorm/xdm#syntax-highlighting-with-the-meta-field
 
-const visit = require('unist-util-visit');
+const visit = import('unist-util-visit');
 
 var re = /\b([-\w]+)(?:=(?:"([^"]*)"|'([^']*)'|([^"'\s]+)))?/g;
 

next-env.d.ts

@@ -1,2 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

next.config.js

@@ -3,9 +3,7 @@ const withPlugins = require('next-compose-plugins');
 const withVideos = require('next-videos');
 const withOptimizedImages = require('next-optimized-images');
 
-const withTM = require('next-transpile-modules')(['@modulz/design-system']);
-
-module.exports = withPlugins([withTM, withOptimizedImages, withVideos], {
+module.exports = withPlugins([withOptimizedImages, withVideos], {
   // Next.js config
   async redirects() {
     return [

package.json

@@ -12,45 +12,44 @@
     "@mdx-js/loader": "1.6.22",
     "@modulz/design-system": "0.3.3",
     "@modulz/radix-icons": "^4.0.0",
-    "@radix-ui/primitive": "^0.0.1",
-    "@radix-ui/react-compose-refs": "^0.0.1",
-    "@radix-ui/react-context": "^0.0.1",
-    "@radix-ui/react-use-callback-ref": "^0.0.1",
+    "@radix-ui/primitive": "^0.0.5",
+    "@radix-ui/react-compose-refs": "^0.0.5",
+    "@radix-ui/react-context": "^0.0.5",
+    "@radix-ui/react-use-callback-ref": "^0.0.5",
     "copy-to-clipboard": "^3.3.1",
-    "date-fns": "^2.19.0",
-    "glob": "^7.1.6",
-    "gray-matter": "^4.0.2",
-    "hast-util-to-html": "^7.1.2",
-    "hast-util-to-string": "^1.0.4",
+    "date-fns": "^2.23.0",
+    "glob": "^7.1.7",
+    "gray-matter": "^4.0.3",
+    "hast-util-to-html": "^8.0.1",
+    "hast-util-to-string": "^2.0.0",
     "imagemin-mozjpeg": "^9.0.0",
     "imagemin-optipng": "^8.0.0",
     "lodash.debounce": "^4.0.8",
-    "mdx-bundler": "^3.2.1",
-    "mdx-prism": "^0.3.3",
-    "next": "10.0.8",
+    "mdx-bundler": "^5.2.1",
+    "mdx-prism": "^0.3.4",
+    "next": "11.1.0",
     "next-compose-plugins": "^2.2.1",
     "next-optimized-images": "^2.6.2",
-    "next-themes": "^0.0.14",
-    "next-transpile-modules": "^6.3.0",
+    "next-themes": "^0.0.15",
     "next-videos": "^1.4.0",
     "parse-numeric-range": "^1.2.0",
-    "react": "17.0.1",
-    "react-dom": "17.0.1",
-    "react-remove-scroll": "^2.4.1",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-remove-scroll": "^2.4.3",
     "reading-time": "1.3.0",
-    "refractor": "^3.3.1",
-    "rehype": "^11.0.0",
-    "rehype-parse": "^7.0.1",
-    "remark-autolink-headings": "^6.0.1",
-    "remark-slug": "^6.0.0",
-    "seamless-scroll-polyfill": "^1.2.3",
-    "unified": "^9.2.1",
-    "unist-util-visit": "^2.0.3"
+    "refractor": "^4.1.1",
+    "rehype": "^12.0.0",
+    "rehype-parse": "^8.0.2",
+    "remark-autolink-headings": "^7.0.0",
+    "remark-slug": "^7.0.0",
+    "seamless-scroll-polyfill": "^1.2.4",
+    "unified": "^10.1.0",
+    "unist-util-visit": "^4.0.0"
   },
   "devDependencies": {
-    "@types/node": "14.14.33",
-    "@types/react": "17.0.3",
-    "prettier": "2.2.1",
-    "typescript": "4.2.3"
+    "@types/node": "16.6.0",
+    "@types/react": "17.0.17",
+    "prettier": "2.3.2",
+    "typescript": "4.3.5"
   }
 }

pages/docs/[slug].tsx

@@ -62,10 +62,11 @@ export default function Doc({ frontmatter, code }: Doc) {
 }
 
 export async function getStaticPaths() {
-  const frontmatters = getAllFrontmatter('docs');
+  // const frontmatters = getAllFrontmatter('docs');
+  console.log('frontmatters', typeof getAllFrontmatter);
 
   return {
-    paths: frontmatters.map(({ slug }) => ({ params: { slug } })),
+    paths: [],
     fallback: false,
   };
 }