chore: use nolyfill & housekeeping

.node-version

@@ -1 +1 @@
-16
+18

next.config.js

@@ -13,8 +13,6 @@ module.exports = withBundleAnalyzer(withStyle9({
   trailingSlash: true,
   reactStrictMode: true,
   experimental: {
-    runtime: 'nodejs',
-    legacyBrowsers: false,
     sharedPool: true,
     workerThreads: true,
     optimizeCss: process.env.NODE_ENV === 'production' ? {

package.json

@@ -31,67 +31,85 @@
     ]
   },
   "dependencies": {
-    "@radix-ui/react-dialog": "^1.0.2",
+    "@radix-ui/react-dialog": "^1.0.4",
     "@sukka/listdir": "^0.2.0",
     "body-scroll-lock": "^4.0.0-beta.0",
-    "clsx": "^1.2.1",
+    "clsx": "^2.0.0",
     "command-score": "^0.1.2",
-    "foxact": "^0.2.16",
-    "hast-util-to-jsx-runtime": "^1.1.0",
-    "highlight.js": "^11.7.0",
-    "lowlight": "^2.8.0",
-    "next": "^13.1.5",
+    "eslint-config-next": "^13.4.19",
+    "eslint-import-resolver-typescript": "^3.6.0",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-react": "^7.33.2",
+    "foxact": "^0.2.20",
+    "hast-util-to-jsx-runtime": "^1.2.0",
+    "highlight.js": "^11.8.0",
+    "lowlight": "^2.9.0",
+    "next": "^13.4.19",
     "react": "^18.3.0-next-41110021f-20230301",
     "react-dom": "^18.3.0-next-41110021f-20230301",
-    "style9": "^0.16.1",
-    "swr": "^2.0.1"
+    "style9": "^0.18.2",
+    "swr": "^2.2.2"
   },
   "devDependencies": {
-    "@mdx-js/mdx": "^2.2.1",
-    "@next/bundle-analyzer": "^13.1.5",
-    "@radix-ui/react-tabs": "^1.0.2",
-    "@resvg/resvg-js": "^2.2.0",
-    "@swc-node/register": "^1.5.5",
-    "@swc/core": "^1.3.28",
+    "@mdx-js/mdx": "^2.3.0",
+    "@next/bundle-analyzer": "^13.4.19",
+    "@radix-ui/react-tabs": "^1.0.4",
+    "@resvg/resvg-js": "^2.4.1",
+    "@swc-node/register": "^1.6.7",
+    "@swc/core": "^1.3.80",
     "@taskr/clear": "^1.1.0",
     "@taskr/esnext": "^1.1.0",
     "@types/body-scroll-lock": "^3.1.0",
-    "@types/metro-cache": "^0.66.0",
-    "@types/react": "^18.0.27",
-    "@types/react-dom": "^18.0.10",
-    "@typescript-eslint/eslint-plugin": "^5.49.0",
-    "@typescript-eslint/parser": "^5.49.0",
+    "@types/react": "^18.2.21",
+    "@types/react-dom": "^18.2.7",
+    "@typescript-eslint/eslint-plugin": "^6.4.1",
+    "@typescript-eslint/parser": "^6.4.1",
     "@vercel/ncc": "^0.36.1",
     "chokidar": "^3.5.3",
     "critters": "^0.0.16",
-    "eslint": "^8.32.0",
-    "eslint-config-next": "^13.1.5",
-    "eslint-config-sukka": "^1.7.2",
-    "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-mdx": "^2.0.5",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-react": "^7.32.1",
+    "eslint": "^8.48.0",
+    "eslint-config-sukka": "^3.0.5",
+    "eslint-plugin-import": "npm:eslint-plugin-i@^2.28.0-2",
+    "eslint-plugin-mdx": "^2.2.0",
+    "eslint-plugin-n": "^16.0.2",
     "express": "^4.18.2",
     "find-up": "5.0.0",
     "github-slugger": "^2.0.0",
     "gray-matter": "^4.0.3",
-    "mdast-util-to-string": "^3.1.1",
-    "metro-cache": "^0.74.1",
+    "mdast-util-to-string": "^3.2.0",
+    "metro-cache": "^0.78.1",
     "remark-external-links": "^9.0.1",
     "remark-gfm": "^3.0.1",
     "remark-unwrap-images": "^3.0.1",
-    "resolve": "^1.22.1",
-    "rimraf": "^4.1.2",
-    "sass": "^1.57.1",
-    "satori": "^0.1.1",
-    "style9-webpack": "^0.2.0",
+    "resolve": "^1.22.4",
+    "rimraf": "^5.0.1",
+    "sass": "^1.66.1",
+    "satori": "^0.1.2",
+    "style9-webpack": "^0.5.1",
     "taskr": "^1.1.0",
     "unified": "^10.1.2",
     "unist-util-visit": "^4.1.2"
   },
   "overrides": {
     "react": "$react",
-    "react-dom": "$react-dom"
+    "react-dom": "$react-dom",
+    "eslint-plugin-import": "$eslint-plugin-import",
+    "array-includes": "npm:@nolyfill/array-includes@latest",
+    "array.prototype.flat": "npm:@nolyfill/array.prototype.flat@latest",
+    "array.prototype.flatmap": "npm:@nolyfill/array.prototype.flatmap@latest",
+    "array.prototype.tosorted": "npm:@nolyfill/array.prototype.tosorted@latest",
+    "deep-equal": "npm:@nolyfill/deep-equal@latest",
+    "function-bind": "npm:@nolyfill/function-bind@latest",
+    "has": "npm:@nolyfill/has@latest",
+    "has-symbols": "npm:@nolyfill/has-symbols@latest",
+    "object.assign": "npm:@nolyfill/object.assign@latest",
+    "object.entries": "npm:@nolyfill/object.entries@latest",
+    "object.fromentries": "npm:@nolyfill/object.fromentries@latest",
+    "object.hasown": "npm:@nolyfill/object.hasown@latest",
+    "object.values": "npm:@nolyfill/object.values@latest",
+    "string.prototype.matchall": "npm:@nolyfill/string.prototype.matchall@latest",
+    "es-iterator-helpers": "npm:@nolyfill/es-iterator-helpers@latest",
+    "has-proto": "npm:@nolyfill/has-proto@latest"
   },
   "engines": {
     "node": ">=16"

scripts/generate-opengraph.ts

@@ -5,7 +5,7 @@ import { Resvg } from '@resvg/resvg-js';
 import path from 'path';
 import { promises as fsPromises } from 'fs';
 import * as Log from 'next/dist/build/output/log';
-import { fileExists } from 'next/dist/lib/file-exists';
+import { fileExists, FileType } from 'next/dist/lib/file-exists';
 
 import { loadEnvConfig } from '@next/env';
 
@@ -32,10 +32,10 @@ const DISK_CACHE_BREAKER = 0;
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
 interface GenerateOpengraphOptions<T> {
-  template: (props: T) => JSX.Element;
-  props: T;
-  id: string;
-  outputPath: string;
+  template: (props: T) => JSX.Element,
+  props: T,
+  id: string,
+  outputPath: string
 }
 
 async function generateOpengraph<T = any>({
@@ -117,7 +117,7 @@ async function generateOpengraph<T = any>({
 }
 
 async function runGenerate(outputRoot: string, domain: string) {
-  if (!await fileExists(outputRoot, 'directory')) {
+  if (!await fileExists(outputRoot, FileType.Directory)) {
     await fsPromises.mkdir(outputRoot, { recursive: true });
   }
 

src/components/documentation-wrapper/index.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import type React from 'react';
 
 import articleStyles from '@/styles/article/article.module.sass';
 import hljsStyles from '@/styles/highlight/hljs.module.sass';
 import clsx from 'clsx';
 
-export default function DocumentationWrapper({ children }: React.PropsWithChildren<unknown>) {
+export default function DocumentationWrapper({ children }: React.PropsWithChildren) {
   return (
     <article className={clsx(articleStyles.article, hljsStyles.hljs_container)}>
       {children}

src/components/layout/footer/index.tsx

@@ -1,5 +1,6 @@
 import MirrorZLogo from '@/components/mirrorz-logo';
-import React, { memo, useEffect, useState } from 'react';
+import type React from 'react';
+import { memo, useEffect, useState } from 'react';
 import style9 from 'style9';
 import ExternalLink from '../../external-link';
 import NextLink from 'next/link';
@@ -104,7 +105,7 @@ const CurrentYear = () => {
   return <span>{year}</span>;
 };
 
-const Header = ({ children }: React.PropsWithChildren<unknown>) => (
+const Header = ({ children }: React.PropsWithChildren) => (
   <div className={styles('footer_header')}>{children}</div>
 );
 

src/components/layout/header/index.tsx

@@ -3,8 +3,8 @@ import MetaCard from './metacard';
 import { memo } from 'react';
 
 interface PageHeadingProps {
-  title: string;
-  description?: string;
+  title: string,
+  description?: string
 }
 
 const styles = style9.create({

src/components/layout/header/metacard.tsx

@@ -16,14 +16,12 @@ const styles = style9.create({
     marginTop: '24px',
     display: 'flex',
     flexDirection: 'column',
-    // @ts-expect-error -- gap is known property
     gap: '24px'
   },
   menu_wrapper: {
     display: 'flex',
     flexWrap: 'nowrap',
     alignItems: 'center',
-    // @ts-expect-error -- gap is known property
     gap: '12px'
   },
   switch_wrapper: {
@@ -47,7 +45,7 @@ function MetaCard() {
         <MirrorSelectMenu />
       </div>
       <div className={styles('switch_wrapper')}>
-        {(disable_https_select !== true) && (<HttpsSwitch />)}
+        {(!disable_https_select) && (<HttpsSwitch />)}
         <SudoSwitch />
       </div>
     </div>

src/components/layout/nav/nav-link.tsx

@@ -3,10 +3,10 @@ import Link from 'next/link';
 import style9 from 'style9';
 
 interface SidebarLinkProps {
-  href: string;
-  isActive?: boolean;
-  title: string;
-  isPending: boolean;
+  href: string,
+  isActive?: boolean,
+  title: string,
+  isPending: boolean
 }
 
 const styles = style9.create({

src/components/layout/toc.tsx

@@ -97,7 +97,7 @@ function ToCAside({ toc }: ToCProps) {
           {toc.length > 0
             && toc.map((h, i) => {
               if (process.env.NODE_ENV !== 'production') {
-                if (h.url == null) {
+                if (typeof h.url !== 'string') {
                   // eslint-disable-next-line no-console -- only log in DEV
                   console.error('Heading does not have URL');
                 }

src/components/mdx-components/codeblock/copy-to-clipboard.tsx

@@ -1,8 +1,8 @@
-import React, {
-  useCallback,
-  useEffect,
-  useState
+import type React from 'react';
+import {
+  useCallback
 } from 'react';
+import { useClipboard } from 'foxact/use-clipboard';
 
 import IconCheck from '../../icons/check';
 import IconClipboard from '../../icons/clipboard';
@@ -38,33 +38,14 @@ export const CopyToClipboard = ({
   getValue,
   ...props
 }: CopyToClipboardProps) => {
-  const [isCopied, setCopied] = useState(false);
-
-  useEffect(() => {
-    if (!isCopied) return;
-    const timerId = setTimeout(() => {
-      setCopied(false);
-    }, 2500);
-
-    return () => clearTimeout(timerId);
-  }, [isCopied]);
+  const { copied, copy } = useClipboard({ timeout: 2500 });
 
   const handleClick = useCallback<React.MouseEventHandler<HTMLButtonElement>>(async () => {
-    if (!navigator?.clipboard) {
-      // eslint-disable-next-line no-console -- log error to console
-      console.error('Access to clipboard rejected!');
-    }
-    try {
-      const text = value || getValue?.();
-      if (text) {
-        setCopied(true);
-        await navigator.clipboard.writeText(text);
-      }
-    } catch {
-      // eslint-disable-next-line no-console -- log error to console
-      console.error('Failed to copy!');
+    const text = value || getValue?.();
+    if (text) {
+      copy(text);
     }
-  }, [getValue, value]);
+  }, [copy, getValue, value]);
 
   return (
     <button
@@ -73,7 +54,7 @@ export const CopyToClipboard = ({
       title="Copy code"
       tabIndex={0}
       {...props}>
-      {isCopied
+      {copied
         ? <IconCheck className={styles('icon')} />
         : <IconClipboard className={styles('icon')} />}
     </button>

src/components/mdx-components/codeblock/highlight.tsx

@@ -77,8 +77,8 @@ const alias: Record<string, string> = {
 };
 
 interface LowlightProps {
-  code: string;
-  language: string;
+  code: string,
+  language: string
 }
 
 export default function Lowlight({ code, language }: LowlightProps) {

src/components/mdx-components/codeblock/index.tsx

@@ -8,8 +8,8 @@ import buttonGroupStyles from './buttongroup.module.css';
 const Lowlight = lazy(() => import('./highlight'));
 
 interface NormalCodeBlockProps {
-  code: string;
-  language?: string | undefined;
+  code: string,
+  language?: string | undefined
 }
 
 const styles = style9.create({

src/components/mdx-components/enhanced-codeblock/index.tsx

@@ -17,15 +17,15 @@ import { useMirrorHttpsEnabled } from '@/contexts/mirror-enable-https';
 import { useMirrorSudoEnabled } from '@/contexts/mirror-enable-sudo';
 
 interface CodeBlockProps {
-  isHttpProtocol?: boolean;
-  menus?: Menu[];
-  children: React.ReactElement;
-  code: string;
-  codeLanguage?: string;
-  codeMeta?: string;
-  enableQuickSetup?: boolean;
-  quickSetupNeedSudo?: boolean
-  filepath?: string;
+  isHttpProtocol?: boolean,
+  menus?: Menu[],
+  children: React.ReactNode,
+  code: string,
+  codeLanguage?: string,
+  codeMeta?: string,
+  enableQuickSetup?: boolean,
+  quickSetupNeedSudo?: boolean,
+  filepath?: string
 }
 
 const styles = style9.create({
@@ -46,11 +46,11 @@ const reducer = (prevState: Record<string, string>, value: MenuValue) => ({
 });
 
 const createInitialState = (menus: Menu[]): Record<string, string> => {
-  return menus.reduce((acc, menu) => {
+  return menus.reduce<Record<string, string>>((acc, menu) => {
     const value = menu.items[0][1];
     acc = { ...acc, ...value };
     return acc;
-  }, {} as Record<string, string>);
+  }, {});
 };
 
 function CodeBlock({

src/components/mdx-components/enhanced-codeblock/menus.tsx

@@ -4,8 +4,8 @@ import { memo, useCallback, useMemo } from 'react';
 
 export type MenuValue = Record<string, string>;
 export interface Menu {
-  title: string;
-  items: [displayName: string, value: MenuValue][];
+  title: string,
+  items: Array<[displayName: string, value: MenuValue]>
 }
 
 const styles = style9.create({
@@ -62,8 +62,8 @@ const styles = style9.create({
 });
 
 interface CodeBlockMenuProps {
-  menus: Menu[];
-  dispatch: React.Dispatch<MenuValue>;
+  menus: Menu[],
+  dispatch: React.Dispatch<MenuValue>
 }
 
 function CodeBlockMenu({ menus, dispatch }: CodeBlockMenuProps) {