feat(playground): load prettier before playground (#340)

* Load prettier before loading playground * Remove old prettier handling code * Tweak layout * Error handling during playground load * Lint fix
remirror · Jul 16, 2020 · 71f27e1 · 71f27e1 · github-actions · Jul 16, 2020
1 parent 2fb2c5d
commit 71f27e1
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 73 deletions.
diff --git a/packages/@remirror/playground/src/index.tsx b/packages/@remirror/playground/src/index.tsx
@@ -4,6 +4,8 @@ export const Playground: FC = () => {
   const [Component, setPlayground] = useState<FC | null>(null);
 
   const [hasBabel, setHasBabel] = useState(false);
+  const [hasPrettier, setHasPrettier] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
 
   useEffect(() => {
     if (hasBabel) {
@@ -23,20 +25,47 @@ export const Playground: FC = () => {
   }, [hasBabel]);
 
   useEffect(() => {
-    if (!hasBabel) {
+    if (hasPrettier) {
       return;
     }
 
-    import('./playground').then((playground) => {
-      // This has to be a function, otherwise React breaks (not unexpectedly)
-      setPlayground(() => playground.Playground);
-    });
-  }, [hasBabel]);
+    const checkForBabel = () => {
+      if (typeof window['prettier'] !== 'undefined') {
+        setHasPrettier(true);
+      }
+    };
+    const int = setInterval(checkForBabel, 100);
 
-  return Component ? <Component /> : <Loading hasBabel={hasBabel} />;
+    return () => {
+      clearInterval(int);
+    };
+  }, [hasPrettier]);
+
+  useEffect(() => {
+    if (!hasBabel || !hasPrettier) {
+      return;
+    }
+
+    import('./playground')
+      .then((playground) => {
+        // This has to be a function, otherwise React breaks (not unexpectedly)
+        setPlayground(() => playground.Playground);
+      })
+      .catch((error_) => setError(error_));
+  }, [hasBabel, hasPrettier]);
+
+  return Component ? (
+    <Component />
+  ) : (
+    <Loading hasBabel={hasBabel} hasPrettier={hasPrettier} error={error} />
+  );
 };
 
-const Loading: FC<{ hasBabel: boolean }> = ({ hasBabel }) => {
+const Loading: FC<{ hasBabel: boolean; hasPrettier: boolean; error: Error | null }> = ({
+  error,
+  hasBabel,
+  hasPrettier,
+}) => {
   const [numberOfDots, setNumberOfDots] = useState(3);
   useEffect(() => {
     const dotsPlusPlus = () => {
@@ -85,9 +114,32 @@ const Loading: FC<{ hasBabel: boolean }> = ({ hasBabel }) => {
           alt='animated remirror logo'
         />
       </div>
-      <div style={{ flex: '1 0 16rem', padding: '0 0 0 2rem', textAlign: 'center' }}>
-        Loading {!hasBabel ? 'babel' : 'monaco'}
-        {dots}
+      <div
+        style={{
+          flex: '1 0 16rem',
+          padding: '0 0 1rem 2rem',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          flexDirection: 'column',
+        }}
+      >
+        {error ? (
+          <div>
+            An error occurred, please refresh the page and try again. Details: {error.message}
+          </div>
+        ) : (
+          <>
+            <div style={{ textAlign: 'center' }}>Loading{dots}</div>
+            <div>
+              Babel: {!hasBabel ? '🏃' : '👍'}
+              <br />
+              Prettier: {!hasPrettier ? '🏃' : '👍'}
+              <br />
+              Playground: {!hasBabel || !hasPrettier ? '✋' : '🏃'}
+            </div>
+          </>
+        )}
       </div>
     </div>
   );

diff --git a/packages/@remirror/playground/src/playground.tsx b/packages/@remirror/playground/src/playground.tsx
@@ -38,11 +38,6 @@ function cleanse(moduleName: string, moduleExports: Exports): Exports {
   return cleansedExports;
 }
 
-const PRETTIER_SCRIPTS = [
-  'https://unpkg.com/prettier@2.0.5/standalone.js',
-  'https://unpkg.com/prettier@2.0.5/parser-typescript.js',
-];
-
 export const Playground: FC = () => {
   const [value, setValue] = useState('// Add some code here\n');
   const [advanced, setAdvanced] = useState(false);
@@ -105,63 +100,6 @@ export const Playground: FC = () => {
     presets: [],
   } as CodeOptions);
 
-  // Load prettier for formatting
-  const handleFormat = useCallback(() => {
-    setValue(makeCode(options));
-  }, [options]);
-  const handleFormatRef = useRef(handleFormat);
-  useEffect(() => {
-    handleFormatRef.current = handleFormat;
-  }, [handleFormat]);
-  useEffect(() => {
-    const loadedScripts: string[] = [];
-
-    for (let i = 0, l = document.head.childNodes.length; i < l; i++) {
-      const child = document.head.childNodes[i];
-
-      if (child.nodeType === 1 && child.nodeName === 'SCRIPT') {
-        const scriptEl = child as HTMLScriptElement;
-
-        if (scriptEl.src) {
-          loadedScripts.push(scriptEl.src);
-        }
-      }
-    }
-
-    const unlisten: Array<() => void> = [];
-
-    const format = (e: Event) => {
-      const element = e.target ? (e.target as HTMLScriptElement) : null;
-
-      if (!element) {
-        return;
-      }
-
-      loadedScripts.push(element.src);
-
-      if (PRETTIER_SCRIPTS.every((script) => loadedScripts.includes(script))) {
-        handleFormatRef.current();
-      }
-    };
-
-    PRETTIER_SCRIPTS.forEach((script) => {
-      if (!loadedScripts.includes(script)) {
-        const scriptEl = document.createElement('script');
-        scriptEl.addEventListener('load', format, false);
-        unlisten.push(() => {
-          scriptEl.removeEventListener('load', format, false);
-        });
-        scriptEl.src = script;
-        document.head.append(scriptEl);
-      }
-    });
-    return () => {
-      for (const cb of unlisten) {
-        cb();
-      }
-    };
-  }, []);
-
   const handleToggleAdvanced = useCallback(() => {
     if (
       confirm(

diff --git a/support/website/src/pages/playground.tsx b/support/website/src/pages/playground.tsx
@@ -33,6 +33,8 @@ const PlaygroundPage = (props: any) => {
             {/* TODO: Do not assume that it is in english language */}
             <html lang='en' />
             <script src='https://unpkg.com/@babel/standalone/babel.min.js'></script>
+            <script src='https://unpkg.com/prettier@2.0.5/standalone.js'></script>
+            <script src='https://unpkg.com/prettier@2.0.5/parser-typescript.js'></script>
             {metaTitle ?? <title>{metaTitle}</title>}
             {metaTitle ?? <meta property='og:title' content={metaTitle} />}
             {favicon ?? <link rel='shortcut icon' href={faviconUrl} />}