better repl init + a bit of ssr for main repl

website/src/repl/Header.jsx

@@ -23,7 +23,7 @@ export function Header({ context }) {
     handleShuffle,
     handleShare,
   } = context;
-  const isEmbedded = embedded || window.location !== window.parent.location;
+  const isEmbedded = typeof window !== 'undefined' && (embedded || window.location !== window.parent.location);
   const { isZen } = useSettings();
 
   return (

website/src/repl/Repl.jsx

@@ -35,19 +35,15 @@ export const ReplContext = createContext(null);
 
 const { latestCode } = settingsMap.get();
 
-initAudioOnFirstClick();
-
-const modulesLoading = loadModules();
-const presets = prebake();
-
-let drawContext, clearCanvas;
+let modulesLoading, presets, drawContext, clearCanvas;
 if (typeof window !== 'undefined') {
+  initAudioOnFirstClick();
+  modulesLoading = loadModules();
+  presets = prebake();
   drawContext = getDrawContext();
   clearCanvas = () => drawContext.clearRect(0, 0, drawContext.canvas.height, drawContext.canvas.width);
 }
 
-// const getTime = () => getAudioContext().currentTime;
-
 export function Repl({ embedded = false }) {
   //const isEmbedded = embedded || window.location !== window.parent.location;
   const isEmbedded = false;
@@ -116,19 +112,6 @@ export function Repl({ embedded = false }) {
   const { started, isDirty, error, activeCode } = replState;
   const editorRef = useRef();
   const containerRef = useRef();
-  const [client, setClient] = useState(false);
-  useEffect(() => {
-    setClient(true);
-    if (!editorRef.current) {
-      setTimeout(() => {
-        init({ shouldDraw });
-      });
-    }
-    return () => {
-      editorRef.current?.clear();
-      delete editorRef.current;
-    };
-  }, []);
 
   // this can be simplified once SettingsTab has been refactored to change codemirrorSettings directly!
   // this will be the case when the main repl is being replaced
@@ -217,7 +200,12 @@ export function Repl({ embedded = false }) {
           <section
             className={'text-gray-100 cursor-text pb-0 overflow-auto grow' + (isZen ? ' px-10' : '')}
             id="code"
-            ref={containerRef}
+            ref={(el) => {
+              containerRef.current = el;
+              if (!editorRef.current) {
+                init({ shouldDraw });
+              }
+            }}
           ></section>
           {panelPosition === 'right' && !isEmbedded && <Panel context={context} />}
         </div>

website/src/repl/panel/Panel.jsx

@@ -3,7 +3,7 @@ import { logger } from '@strudel.cycles/core';
 import useEvent from '@src/useEvent.mjs';
 import cx from '@src/cx.mjs';
 import { nanoid } from 'nanoid';
-import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
+import { useCallback, useLayoutEffect, useEffect, useRef, useState } from 'react';
 import { setActiveFooter, useSettings } from '../../settings.mjs';
 import { ConsoleTab } from './ConsoleTab';
 import { FilesTab } from './FilesTab';
@@ -12,21 +12,25 @@ import { SettingsTab } from './SettingsTab';
 import { SoundsTab } from './SoundsTab';
 import { WelcomeTab } from './WelcomeTab';
 import { PatternsTab } from './PatternsTab';
+import useClient from '@src/useClient.mjs';
 
-const TAURI = window.__TAURI__;
+// https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85
+export const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+
+const TAURI = typeof window !== 'undefined' && window.__TAURI__;
 
 export function Panel({ context }) {
   const footerContent = useRef();
   const [log, setLog] = useState([]);
   const { activeFooter, isZen, panelPosition } = useSettings();
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (footerContent.current && activeFooter === 'console') {
       // scroll log box to bottom when log changes
       footerContent.current.scrollTop = footerContent.current?.scrollHeight;
     }
   }, [log, activeFooter]);
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (!footerContent.current) {
     } else if (activeFooter === 'console') {
       footerContent.current.scrollTop = footerContent.current?.scrollHeight;
@@ -80,6 +84,10 @@ export function Panel({ context }) {
     right: cx('max-w-full flex-grow-0 flex-none overflow-hidden', isActive ? 'w-[600px] h-full' : 'absolute right-0'),
     bottom: cx('relative', isActive ? 'h-[360px] min-h-[360px]' : ''),
   };
+  const client = useClient();
+  if (!client) {
+    return null;
+  }
   return (
     <nav className={cx('bg-lineHighlight z-[10] flex flex-col', positions[panelPosition])}>
       <div className="flex justify-between px-2">