elias/strudel-docker
1
0
Fork 0
mirror of https://github.com/eliasstepanik/strudel-docker.git synced 2026-01-23 11:38:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: dumb react ssr workaround

Browse Source
This commit is contained in:
Felix Roos 2023-12-29 00:30:46 +01:00
parent f477273d8a
commit b0bdd09032
1 changed files with 6 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
website/src/docs/MiniRepl.jsx
View File

@ -1,4 +1,4 @@
import { useState, useRef, useCallback, useMemo, useEffect } from 'react'; import { useState, useRef, useCallback, useMemo, useEffect, useLayoutEffect } from 'react';
import { Icon } from './Icon'; import { Icon } from './Icon';
import { silence, getPunchcardPainter, noteToMidi } from '@strudel.cycles/core'; import { silence, getPunchcardPainter, noteToMidi } from '@strudel.cycles/core';
import { transpiler } from '@strudel.cycles/transpiler'; import { transpiler } from '@strudel.cycles/transpiler';
@ -9,6 +9,9 @@ import { prebake } from '../repl/prebake.mjs';
import { loadModules } from '../repl/util.mjs'; import { loadModules } from '../repl/util.mjs';
import Claviature from '@components/Claviature'; import Claviature from '@components/Claviature';
// https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85
export const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
let prebaked, modulesLoading; let prebaked, modulesLoading;
if (typeof window !== 'undefined') { if (typeof window !== 'undefined') {
prebaked = prebake(); prebaked = prebake();
@ -89,7 +92,8 @@ export function MiniRepl({
const editorRef = useRef(); const editorRef = useRef();
const containerRef = useRef(); const containerRef = useRef();
const [client, setClient] = useState(false); const [client, setClient] = useState(false);
useEffect(() => {
useIsomorphicLayoutEffect(() => {
setClient(true); setClient(true);
if (!editorRef.current) { if (!editorRef.current) {
setTimeout(() => { setTimeout(() => {