chore(website): added sassdoc hot-reloading

Author: mlaursen

packages/documentation/src/pages/packages/[id]/sassdoc.tsx

@@ -3,6 +3,7 @@ import { NextFC } from "next";
 
 import NotFoundPage from "components/NotFoundPage";
 import PackageSassDoc from "components/PackageSassDoc";
+import { useHotReload } from "hooks/useHotReload";
 import { qsToString } from "utils/routes";
 import { PackageSassDoc as FoundSassDoc } from "utils/sassdoc";
 
@@ -11,7 +12,13 @@ interface SassDocProps {
   sassdoc: FoundSassDoc | null;
 }
 
-const SassDoc: NextFC<SassDocProps> = ({ name, sassdoc }) => {
+const getSassdoc = (name: string): Promise<FoundSassDoc | null> =>
+  import(`../../../constants/sassdoc/${name}`)
+    .then((mod) => mod.default)
+    .catch(() => null);
+
+const SassDoc: NextFC<SassDocProps> = ({ name, sassdoc: propSassdoc }) => {
+  const sassdoc = useHotReload(name, propSassdoc, getSassdoc);
   if (!sassdoc) {
     if (process.env.NODE_ENV !== "production") {
       throw new Error(
@@ -27,9 +34,7 @@ const SassDoc: NextFC<SassDocProps> = ({ name, sassdoc }) => {
 
 SassDoc.getInitialProps = async ({ query }): Promise<SassDocProps> => {
   const name = qsToString(query.id);
-  const sassdoc = await import(`../../../constants/sassdoc/${name}`)
-    .then((mod) => mod.default)
-    .catch(() => null);
+  const sassdoc = await getSassdoc(name);
 
   return { name, sassdoc };
 };