core: use language grammars directly from refractor

packages/core/scripts/prebuild.mjs

@@ -27,30 +27,8 @@ const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 const ROOT_DIR = path.resolve(path.join(__dirname, ".."));
 
-const languagesList = await langen(
-  ROOT_DIR,
-  path.join(ROOT_DIR, "src", "utils", "templates", "html", "languages")
-);
-const languageIndex = `function hasRequire() {
-  return (
-    typeof require === "function" &&
-    (typeof IS_DESKTOP_APP === "undefined" || !IS_DESKTOP_APP)
-  );
-}
-
-export async function loadLanguage(language) {
-  switch (language) {
-    ${languagesList
-      .map(({ filename, alias }) => {
-        return [
-          ...(alias || []).map((a) => `case "${a}":`),
-          `case "${filename}":`,
-          `return hasRequire() ? require("./${filename}.js") : await import("./${filename}.js");`
-        ].join("\n");
-      })
-      .join("\n\n")}
-  }
-}`;
+const { languageIndex } = await langen(ROOT_DIR);
+if (!languageIndex) throw new Error("No language index found.");
 
 await fs.writeFile(
   path.join(
@@ -60,7 +38,7 @@ await fs.writeFile(
     "templates",
     "html",
     "languages",
-    "index.js"
+    "index.ts"
   ),
   languageIndex
 );

packages/core/src/utils/templates/html/index.ts

@@ -20,6 +20,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { TemplateData } from "../index.js";
 import { parseHTML } from "../../html-parser.js";
 import { hasRequire } from "../../has-require.js";
+import { loadLanguage } from "./languages/index.js";
 import { template } from "./template.js";
 
 const replaceableAttributes = {
@@ -50,6 +51,7 @@ async function preprocessHTML(templateData: TemplateData) {
   }
 
   const doc = parseHTML(html);
+  if (!doc) throw new Error("Could not parse HTML to DOM.");
 
   const images = doc.querySelectorAll("img");
   for (const image of images) {
@@ -72,16 +74,12 @@ async function preprocessHTML(templateData: TemplateData) {
   const mathInlines = doc.querySelectorAll(".math-inline.math-node");
 
   if (mathBlocks.length || mathInlines.length) {
-    const katex = hasRequire()
-      ? require("katex")
-      : (await import("katex")).default;
-    hasRequire()
-      ? require("katex/contrib/mhchem/mhchem.js")
-      : // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        await import("katex/contrib/mhchem/mhchem.js");
+    const katex = (await import("katex")).default;
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    await import("katex/contrib/mhchem/mhchem.js");
     for (const mathBlock of mathBlocks) {
-      const text = mathBlock.textContent;
+      const text = mathBlock.textContent || "";
       mathBlock.innerHTML = katex.renderToString(text, {
         displayMode: true,
         throwOnError: false
@@ -89,7 +87,7 @@ async function preprocessHTML(templateData: TemplateData) {
     }
 
     for (const mathInline of mathInlines) {
-      const text = mathInline.textContent;
+      const text = mathInline.textContent || "";
       mathInline.innerHTML = katex.renderToString(text, {
         throwOnError: false,
         displayMode: false
@@ -99,13 +97,9 @@ async function preprocessHTML(templateData: TemplateData) {
 
   const codeblocks = doc.querySelectorAll("pre > code");
   if (codeblocks.length) {
-    const prismjs = hasRequire()
-      ? require("prismjs")
-      : (await import("prismjs")).default;
-    const { loadLanguage } = hasRequire()
-      ? require("./languages/index.js")
-      : await import("./languages/index.js");
-    prismjs.register = (syntax: (syntax: any) => void) => {
+    const { default: prismjs } = await import("prismjs");
+    // const { loadLanguage } = await import("./languages/index.js");
+    (prismjs as any).register = (syntax: (syntax: any) => void) => {
       if (typeof syntax === "function") syntax(prismjs);
     };
     for (const codeblock of codeblocks) {
@@ -115,12 +109,14 @@ async function preprocessHTML(templateData: TemplateData) {
       )?.[1];
       if (!language) continue;
 
-      const { default: grammar } = await loadLanguage(language);
+      const { default: grammar } = (await loadLanguage(language)) || {};
+      if (!grammar) continue;
+
       grammar(prismjs);
       if (!prismjs.languages[language]) continue;
 
       codeblock.innerHTML = prismjs.highlight(
-        codeblock.textContent,
+        codeblock.textContent || "",
         prismjs.languages[language],
         language
       );

packages/editor/scripts/langen.mjs

@@ -25,17 +25,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import fs from "fs";
 import path from "path";
 
-export async function langen(rootDirectory, saveDirectory) {
+export async function langen(rootDirectory) {
   const response = await fetch(
     "https://github.com/PrismJS/prism/raw/master/components.json"
   );
-  if (!response.ok) return;
-
-  if (!fs.existsSync(saveDirectory))
-    fs.mkdirSync(saveDirectory, { recursive: true });
+  if (!response.ok) return {};
 
   const json = await response.json();
-  let output = [];
+  let languages = [];
   for (const key in json.languages) {
     if (key === "meta") continue;
     const language = json.languages[key];
@@ -49,7 +46,7 @@ export async function langen(rootDirectory, saveDirectory) {
     );
     if (!fs.existsSync(languagePath)) continue;
 
-    output.push({
+    languages.push({
       filename: key,
       title: language.title,
       alias: language.alias
@@ -58,10 +55,22 @@ export async function langen(rootDirectory, saveDirectory) {
           : [language.alias]
         : undefined
     });
-
-    fs.copyFileSync(languagePath, path.join(saveDirectory, `${key}.js`));
   }
 
-  return output;
+  const languageIndex = `/* !!! THIS IS A GENERATED FILE. DO NOT EDIT !!! */
+export async function loadLanguage(language: string) {
+  switch (language) {
+    ${languages
+      .map(({ filename, alias }) => {
+        return [
+          ...(alias || []).map((a) => `case "${a}":`),
+          `case "${filename}":`,
+          `return await import("refractor/lang/${filename}.js");`
+        ].join("\n");
+      })
+      .join("\n\n")}
+  }
+}`;
+
+  return { languages, languageIndex };
 }
-// main();