feat: Loading MathJax

Signed-off-by: Dup4 <lyuzhi.pan@gmail.com>

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);
-          },
-        }),
-      );
-    },
-  },
 });

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>;

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"
+      ]
     },
   }
 }