From 2de61d9fb25f857d7de6117ab8fb355af94082ab Mon Sep 17 00:00:00 2001
From: Dup4 <lyuzhi.pan@gmail.com>
Date: Sun, 9 Jul 2023 10:03:33 +0800
Subject: [PATCH] feat: Loading MathJax

Signed-off-by: Dup4 <lyuzhi.pan@gmail.com>
---
 .../mathjax-render-nextjs/build.config.ts     | 19 +------------------
 .../src/mathjax-node.tsx                      | 17 ++++++++++++++++-
 .../libs/mathjax-render-nextjs/tsconfig.json  |  4 +++-
 .../libs/mathjax-render-nextjs/typings.d.ts   |  1 -
 4 files changed, 20 insertions(+), 21 deletions(-)
 delete mode 100644 packages/libs/mathjax-render-nextjs/typings.d.ts

diff --git a/packages/libs/mathjax-render-nextjs/build.config.ts b/packages/libs/mathjax-render-nextjs/build.config.ts
index 36d5149..a4a2951 100644
--- a/packages/libs/mathjax-render-nextjs/build.config.ts
+++ b/packages/libs/mathjax-render-nextjs/build.config.ts
@@ -1,8 +1,4 @@
-import { BuildContext, defineBuildConfig } from "unbuild";
-import { RollupOptions } from "rollup";
-
-import postcss from "rollup-plugin-postcss";
-import camelcase from "camelcase";
+import { defineBuildConfig } from "unbuild";
 
 export default defineBuildConfig({
   entries: ["src/index"],
@@ -11,17 +7,4 @@ export default defineBuildConfig({
   rollup: {
     emitCJS: true,
   },
-  hooks: {
-    "rollup:options": (ctx: BuildContext, options: RollupOptions): void => {
-      options.plugins?.push(
-        postcss({
-          inject: true,
-          use: ["less"],
-          namedExports(name) {
-            return camelcase(name);
-          },
-        }),
-      );
-    },
-  },
 });
diff --git a/packages/libs/mathjax-render-nextjs/src/mathjax-node.tsx b/packages/libs/mathjax-render-nextjs/src/mathjax-node.tsx
index 97e2d6a..ef46b89 100644
--- a/packages/libs/mathjax-render-nextjs/src/mathjax-node.tsx
+++ b/packages/libs/mathjax-render-nextjs/src/mathjax-node.tsx
@@ -1,13 +1,28 @@
 "use client";
 
-import React from "react";
+import * as React from "react";
 import dynamic from "next/dynamic";
+import type { DynamicOptionsLoadingProps } from "next/dynamic";
 
 import { MathJaxNodeProps } from "mathjax-render-react";
 
+const loading = (props: DynamicOptionsLoadingProps) => {
+  return (
+    <>
+      <div>
+        {props.isLoading && <div>Loading MathJax...</div>}
+        {props.error !== null && (
+          <div>Load MathJax Failed: {props.error?.message}</div>
+        )}
+      </div>
+    </>
+  );
+};
+
 const MathJaxNode = dynamic(
   async () => (await import("mathjax-render-react")).MathJaxNode,
   {
+    loading: loading,
     ssr: false,
   },
 ) as unknown as React.FC<MathJaxNodeProps>;
diff --git a/packages/libs/mathjax-render-nextjs/tsconfig.json b/packages/libs/mathjax-render-nextjs/tsconfig.json
index 78dec7e..59039d6 100644
--- a/packages/libs/mathjax-render-nextjs/tsconfig.json
+++ b/packages/libs/mathjax-render-nextjs/tsconfig.json
@@ -2,7 +2,6 @@
   "extends": "../../../tsconfig.base.json",
   "include": [
     "src",
-    "typings.d.ts",
   ],
   "compilerOptions": {
     "jsx": "react",
@@ -14,6 +13,9 @@
       "@/*": [
         "src/*"
       ],
+      "mathjax-render-react": [
+        "../mathjax-render-react/src/index.ts"
+      ]
     },
   }
 }
diff --git a/packages/libs/mathjax-render-nextjs/typings.d.ts b/packages/libs/mathjax-render-nextjs/typings.d.ts
deleted file mode 100644
index c72afde..0000000
--- a/packages/libs/mathjax-render-nextjs/typings.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-declare module "*.module.less";