fix(techdocs): cleaned up useEffect in Reader

2020-07-03 16:05:12 +02:00
parent 95ebc8eba9
commit 52f4d37b8e
1 changed files with 58 additions and 53 deletions
@@ -77,66 +77,71 @@ export const Reader = () => {
  const state = useFetch(`${normalizedUrl}index.html`);

  React.useEffect(() => {
-    const divElement = shadowDomRef.current;
-    if (
-      divElement?.shadowRoot &&
-      state.value &&
-      !(state.value instanceof Error)
-    ) {
-      const transformedElement = transformer(state.value, [
-        addBaseUrl({
-          docStorageURL,
-          componentId,
-          path,
-        }),
-        rewriteDocLinks(),
-        modifyCss({
-          cssTransforms: {
-            '.md-main__inner': [{ 'margin-top': '0' }],
-            '.md-sidebar': [{ top: '0' }, { width: '20rem' }],
-            '.md-typeset': [{ 'font-size': '1rem' }],
-            '.md-nav': [{ 'font-size': '1rem' }],
-            '.md-grid': [{ 'max-width': '80vw' }],
-          },
-        }),
-        removeMkdocsHeader(),
-      ]);
-
-      divElement.shadowRoot.innerHTML = '';
-
-      if (transformedElement) {
-        divElement.shadowRoot.appendChild(transformedElement);
-        transformer(divElement.shadowRoot.children[0], [
-          dom => {
-            setTimeout(() => {
-              if (window.location.hash) {
-                const hash = window.location.hash.slice(1);
-                divElement.shadowRoot?.getElementById(hash)?.scrollIntoView();
-              }
-            }, 200);
-            return dom;
-          },
-          addLinkClickListener({
-            onClick: (_: MouseEvent, url: string) => {
-              const parsedUrl = new URL(url);
-              navigate(`${parsedUrl.pathname}${parsedUrl.hash}`);
-
-              divElement.shadowRoot
-                ?.querySelector(parsedUrl.hash)
-                ?.scrollIntoView();
-            },
-          }),
-        ]);
-      }
+    if (!shadowRoot) {
+      return; // Shadow DOM isn't ready
    }
-  }, [shadowDomRef, state, componentId, path, navigate]);
+
+    if (state.loading) {
+      return; // Page isn't ready
+    }
+
+    // Pre-render
+    const transformedElement = transformer(state.value as string, [
+      addBaseUrl({
+        docStorageURL,
+        componentId,
+        path,
+      }),
+      rewriteDocLinks(),
+      modifyCss({
+        cssTransforms: {
+          '.md-main__inner': [{ 'margin-top': '0' }],
+          '.md-sidebar': [{ top: '0' }, { width: '20rem' }],
+          '.md-typeset': [{ 'font-size': '1rem' }],
+          '.md-nav': [{ 'font-size': '1rem' }],
+          '.md-grid': [{ 'max-width': '80vw' }],
+        },
+      }),
+      removeMkdocsHeader(),
+    ]);
+
+    if (!transformedElement) {
+      return; // An unexpected error occurred
+    }
+
+    Array.from(shadowRoot.children).forEach(child =>
+      shadowRoot.removeChild(child),
+    );
+    shadowRoot.appendChild(transformedElement);
+
+    // Post-render
+    transformer(shadowRoot.children[0], [
+      dom => {
+        setTimeout(() => {
+          if (window.location.hash) {
+            const hash = window.location.hash.slice(1);
+            shadowRoot?.getElementById(hash)?.scrollIntoView();
+          }
+        }, 200);
+        return dom;
+      },
+      addLinkClickListener({
+        onClick: (_: MouseEvent, url: string) => {
+          const parsedUrl = new URL(url);
+          navigate(`${parsedUrl.pathname}${parsedUrl.hash}`);
+
+          shadowRoot?.querySelector(parsedUrl.hash)?.scrollIntoView();
+        },
+      }),
+    ]);
+  }, [componentId, path, shadowRoot, state]); // eslint-disable-line react-hooks/exhaustive-deps

  if (state.value instanceof Error) return <TechDocsNotFound />;

  return (
    <>
      <TechDocsPageWrapper title={componentId} subtitle={componentId}>
-        <div ref={shadowDomRef} />
+        <div ref={ref} />
      </TechDocsPageWrapper>
    </>
  );