Remove monaco

Thinkmill · Jul 3, 2022 · 1035e23 · 1035e23
1 parent 092f801
commit 1035e23
Show file tree

Hide file tree

Showing 11 changed files with 225 additions and 230 deletions.
diff --git a/package.json b/package.json
@@ -17,7 +17,6 @@
     "@algolia/client-search": "^4.13.1",
     "@emotion/hash": "0.8.0",
     "@emotion/react": "11.5.0",
-    "@monaco-editor/react": "4.4.5",
     "@ts-morph/common": "0.16.0",
     "@types/hast": "^2.3.4",
     "@types/jest": "^28.1.1",
@@ -31,7 +30,6 @@
     "algoliasearch": "4.10.5",
     "jest": "^28.1.1",
     "lz-string": "1.4.4",
-    "monaco-editor": "0.33.0",
     "next": "^12.1.6",
     "prettier": "^2.7.1",
     "property-information": "^6.1.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/highlight.tsx b/src/components/highlight.tsx
@@ -0,0 +1,36 @@
+import { ReactElement } from "react";
+import type { FontStyle } from "shiki";
+
+export type Token = readonly [
+  content: string,
+  color: string | null,
+  fontStyle?: FontStyle.Italic | FontStyle.Bold | FontStyle.Underline
+];
+
+export function isTokens(tokens: any): tokens is Token[][] {
+  return Array.isArray(tokens);
+}
+
+export function Line({ tokens }: { tokens: Token[] }): ReactElement {
+  return tokens.map((token, i) => {
+    const style: import("react").CSSProperties = {
+      color: token[1] ?? undefined,
+    };
+    if (token[2] !== undefined) {
+      if (token[2] & 1) {
+        style.fontStyle = "italic";
+      }
+      if (token[2] & 2) {
+        style.fontWeight = "bold";
+      }
+      if (token[2] & 4) {
+        style.textDecoration = "underline";
+      }
+    }
+    return (
+      <span key={i} style={style}>
+        {token[0]}
+      </span>
+    );
+  }) as any as ReactElement;
+}
diff --git a/src/components/markdown.tsx b/src/components/markdown.tsx
@@ -8,18 +8,8 @@ import * as styles from "./markdown.css";
 import Link from "next/link";
 import { nonRootSymbolReference } from "./symbol-references.css";
 import { SymbolId } from "../lib/types";
-import type { FontStyle } from "shiki";
 import { Syntax } from "./core/syntax";
-
-function isTokens(
-  tokens: any
-): tokens is (readonly [
-  content: string,
-  color: string | null,
-  fontStyle?: FontStyle.Italic | FontStyle.Bold | FontStyle.Underline
-])[][] {
-  return Array.isArray(tokens);
-}
+import { isTokens, Line } from "./highlight";
 
 export const markdownComponents: ReactMarkdownOptions["components"] = {
   code: function CodeElement(props) {
@@ -34,27 +24,7 @@ export const markdownComponents: ReactMarkdownOptions["components"] = {
             {allTokens.map((tokens, i) => {
               return (
                 <div key={i}>
-                  {tokens.map((token, i) => {
-                    const style: import("react").CSSProperties = {
-                      color: token[1] ?? undefined,
-                    };
-                    if (token[2] !== undefined) {
-                      if (token[2] & 1) {
-                        style.fontStyle = "italic";
-                      }
-                      if (token[2] & 2) {
-                        style.fontWeight = "bold";
-                      }
-                      if (token[2] & 4) {
-                        style.textDecoration = "underline";
-                      }
-                    }
-                    return (
-                      <span key={i} style={style}>
-                        {token[0]}
-                      </span>
-                    );
-                  })}
+                  <Line tokens={tokens} />
                 </div>
               );
             })}

diff --git a/src/extract/highlight.ts b/src/extract/highlight.ts
@@ -0,0 +1,67 @@
+import { Highlighter, getHighlighter, Lang, FontStyle } from "shiki";
+
+export let highlighter: Highlighter | undefined;
+
+// https://nextjs.org/docs/advanced-features/output-file-tracing
+export function includeThingsInDeployment() {
+  require.resolve("shiki/themes/github-light.json");
+  require.resolve("shiki/languages/typescript.tmLanguage.json");
+  require.resolve("shiki/languages/tsx.tmLanguage.json");
+  require.resolve("shiki/languages/html.tmLanguage.json");
+  require.resolve("shiki/languages/css.tmLanguage.json");
+  require.resolve("shiki/languages/javascript.tmLanguage.json");
+  require.resolve("shiki/languages/jsx.tmLanguage.json");
+  require.resolve("shiki/languages/markdown.tmLanguage.json");
+  require.resolve("shiki/languages/json.tmLanguage.json");
+}
+
+const langs: Lang[] = [
+  "ts",
+  "typescript",
+  "tsx",
+  "html",
+  "css",
+  "jsx",
+  "javascript",
+  "js",
+  "ts",
+  "md",
+  "markdown",
+  "json",
+];
+
+export const extensionsToLang = new Map<string, Lang>([
+  ...(
+    ["ts", "tsx", "html", "css", "jsx", "js", "ts", "md", "json"] as const
+  ).map((x) => [x, x] as const),
+  ["mjs", "js"],
+  ["cjs", "js"],
+  ["cts", "ts"],
+  ["mts", "ts"],
+]);
+
+export const languages = new Set<string>(langs);
+
+export const highlighterPromise = getHighlighter({
+  theme: "github-light",
+  langs,
+}).then((x) => {
+  highlighter = x;
+  return x;
+});
+
+export function highlight(content: string, lang: string) {
+  const tokens = highlighter!.codeToThemedTokens(content, lang);
+  return tokens.map((x) =>
+    x.map((x) => {
+      if (
+        x.fontStyle === FontStyle.NotSet ||
+        x.fontStyle === FontStyle.None ||
+        x.fontStyle === undefined
+      ) {
+        return [x.content, x.color || null] as const;
+      }
+      return [x.content, x.color || null, x.fontStyle] as const;
+    })
+  );
+}
diff --git a/src/extract/markdown.ts b/src/extract/markdown.ts
@@ -3,41 +3,7 @@ import remarkParse from "remark-parse";
 import remarkGfm from "remark-gfm";
 import remarkRehype from "remark-rehype";
 import { visit } from "unist-util-visit";
-import { Highlighter, getHighlighter, Lang, FontStyle } from "shiki";
-
-let highlighter: Highlighter | undefined;
-
-// https://nextjs.org/docs/advanced-features/output-file-tracing
-export function includeThingsInDeployment() {
-  require.resolve("shiki/themes/github-light.json");
-  require.resolve("shiki/languages/typescript.tmLanguage.json");
-  require.resolve("shiki/languages/tsx.tmLanguage.json");
-  require.resolve("shiki/languages/html.tmLanguage.json");
-  require.resolve("shiki/languages/css.tmLanguage.json");
-  require.resolve("shiki/languages/javascript.tmLanguage.json");
-  require.resolve("shiki/languages/jsx.tmLanguage.json");
-}
-
-const langs: Lang[] = [
-  "ts",
-  "typescript",
-  "tsx",
-  "html",
-  "css",
-  "jsx",
-  "javascript",
-  "js",
-  "ts",
-];
-
-const languages = new Set(langs);
-
-export const highlighterPromise = getHighlighter({
-  theme: "github-light",
-  langs,
-}).then((x) => {
-  highlighter = x;
-});
+import { highlight, languages } from "./highlight";
 
 const processor = unified().use(remarkParse).use(remarkGfm).use(remarkRehype);
 
@@ -67,25 +33,9 @@ export function parseMarkdown(markdown: string): import("hast").Content[] {
           : "language-tsx";
         if (typeof className === "string") {
           const lang = className.replace("language-", "");
-          if (languages.has(lang as any)) {
-            const tokens = highlighter!.codeToThemedTokens(
-              node.children[0].value,
-              lang
-            );
-            const mappedTokens = tokens.map((x) =>
-              x.map((x) => {
-                if (
-                  x.fontStyle === FontStyle.NotSet ||
-                  x.fontStyle === FontStyle.None ||
-                  x.fontStyle === undefined
-                ) {
-                  return [x.content, x.color || null] as const;
-                }
-                return [x.content, x.color || null, x.fontStyle] as const;
-              })
-            );
+          if (languages.has(lang)) {
             node.data = {
-              tokens: mappedTokens,
+              tokens: highlight(node.children[0].value, lang),
             };
 
             node.children = [];

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -3,6 +3,7 @@ import { AppProps } from "next/app";
 import { globalStyles } from "../lib/theme.css";
 import "@algolia/autocomplete-theme-classic";
 import { useEffect } from "react";
+import Router from "next/router";
 
 let svg = (
   <svg xmlns="http://www.w3.org/2000/svg" style={{ display: "none" }}>
@@ -27,14 +28,24 @@ function openParentDetails(element: HTMLElement) {
 }
 
 function MyApp({ Component, pageProps }: AppProps) {
+  useEffect(() => {
+    const handler = () => {
+      // pushState doesn't update :target, assigning window.location.hash does though
+      window.location.hash = window.location.hash;
+    };
+    Router.events.on("routeChangeComplete", handler);
+    return () => {
+      Router.events.off("routeChangeComplete", handler);
+    };
+  }, []);
   useEffect(() => {
     let handler = () => {
       const hash = window.location.hash.replace("#", "");
+      if (!hash) return;
       const element = document.getElementById(hash);
-      if (element) {
-        openParentDetails(element);
-        element.scrollIntoView();
-      }
+      if (!element) return;
+      openParentDetails(element);
+      element.scrollIntoView();
     };
     window.addEventListener("hashchange", handler, false);
     handler();

diff --git a/src/pages/lib/index.tsx b/src/pages/lib/index.tsx
@@ -2,7 +2,7 @@
 /** @jsxImportSource @emotion/react */
 import { SymbolFlags } from "typescript";
 import { getDocsInfo } from "../../extract";
-import { highlighterPromise } from "../../extract/markdown";
+import { highlighterPromise } from "../../extract/highlight";
 import { ts } from "../../extract/ts";
 import { DocsContext, DocsContextType } from "../../lib/DocsContext";
 

diff --git a/src/pages/npm/[...pkg].tsx b/src/pages/npm/[...pkg].tsx
@@ -10,7 +10,7 @@ import { PackageDocs } from "../../components/package-docs";
 import { useMemo } from "react";
 import { compressToUTF16, decompressFromUTF16 } from "lz-string";
 import { redirectToPkgVersion } from "../../npm/version-redirect";
-import { highlighterPromise } from "../../extract/markdown";
+import { highlighterPromise } from "../../extract/highlight";
 
 export default function Npm(
   _props: InferGetStaticPropsType<typeof getStaticProps>