Merge pull request #66 from davedbase/master

Fix Monaco accessing navigator and breaking SSR

Author: amoutonbrady

src/components/repl.tsx

@@ -1,4 +1,5 @@
 import { Component, Show, For, Suspense, createSignal, createEffect, lazy, batch } from 'solid-js';
+import { isServer } from 'solid-js/web';
 import { Icon } from '@amoutonbrady/solid-heroicons';
 import { refresh } from '@amoutonbrady/solid-heroicons/outline';
 import { unwrap, createStore } from 'solid-js/store';
@@ -426,20 +427,22 @@ export const Repl: Component<ReplProps> = (props) => {
         }
       >
         <MonacoTabs tabs={props.tabs} compiled={store.compiled} folder={props.id} />
-        <Editor
-          url={`file:///${props.id}/${props.current}`}
-          onDocChange={handleDocChange}
-          class="h-full focus:outline-none bg-blueGray-50 dark:bg-blueGray-800 row-start-2"
-          styles={{ backgroundColor: '#F8FAFC' }}
-          disabled={!props.interactive}
-          canCopy
-          canFormat
-          formatter={formatter}
-          isDark={props.dark}
-          withMinimap={false}
-          showActionBar={props.actionBar}
-          ref={props.onEditorReady}
-        />
+        <Show when={!isServer}>
+          <Editor
+            url={`file:///${props.id}/${props.current}`}
+            onDocChange={handleDocChange}
+            class="h-full focus:outline-none bg-blueGray-50 dark:bg-blueGray-800 row-start-2"
+            styles={{ backgroundColor: '#F8FAFC' }}
+            disabled={!props.interactive}
+            canCopy
+            canFormat
+            formatter={formatter}
+            isDark={props.dark}
+            withMinimap={false}
+            showActionBar={props.actionBar}
+            ref={props.onEditorReady}
+          />
+        </Show>
 
         <GridResizer
           ref={(el) => setVerticalResizer(el)}
@@ -457,7 +460,7 @@ export const Repl: Component<ReplProps> = (props) => {
           onResize={changeLeft}
         />
 
-        <Show when={!showPreview()}>
+        <Show when={!isServer && !showPreview()}>
           <section
             class="h-full max-h-screen bg-white dark:bg-blueGray-800 grid focus:outline-none row-start-5 relative divide-y-2 divide-blueGray-200 dark:divide-blueGray-500"
             classList={{ 'md:row-start-2': !props.isHorizontal }}