playground renders code on second pass

This commit is contained in:
Vyacheslav Matyukhin 2022-07-27 21:28:21 +04:00
parent 9ec84d2c96
commit 329bb9432e
No known key found for this signature in database
GPG Key ID: 3D2A774C5489F96C
3 changed files with 21 additions and 15 deletions

View File

@ -88,6 +88,7 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = React.memo(
environment,
jsImports,
onChange,
executionId,
});
const distributionPlotSettings = {

View File

@ -278,17 +278,18 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
executionId,
} = useRunnerState(code);
const squiggleChart = (
<SquiggleChart
code={renderedCode}
executionId={executionId}
environment={env}
{...vars}
bindings={defaultBindings}
jsImports={imports}
enableLocalSettings={true}
/>
);
const squiggleChart =
renderedCode === "" ? null : (
<SquiggleChart
code={renderedCode}
executionId={executionId}
environment={env}
{...vars}
bindings={defaultBindings}
jsImports={imports}
enableLocalSettings={true}
/>
);
const firstTab = vars.showEditor ? (
<div className="border border-slate-200">

View File

@ -1,4 +1,4 @@
import { useEffect, useReducer } from "react";
import { useLayoutEffect, useReducer } from "react";
type State = {
autorunMode: boolean;
@ -10,7 +10,7 @@ type State = {
const buildInitialState = (code: string): State => ({
autorunMode: true,
renderedCode: code,
renderedCode: "",
runningState: "none",
executionId: 1,
});
@ -62,9 +62,13 @@ const reducer = (state: State, action: Action): State => {
export const useRunnerState = (code: string) => {
const [state, dispatch] = useReducer(reducer, buildInitialState(code));
useEffect(() => {
useLayoutEffect(() => {
if (state.runningState === "prepared") {
dispatch({ type: "RUN", code });
// this is necessary for async playground loading - otherwise it executes the code synchronously on the initial load
// (it's surprising that this is necessary, but empirically it _is_ necessary, both with `useEffect` and `useLayoutEffect`)
setTimeout(() => {
dispatch({ type: "RUN", code });
}, 0);
} else if (state.runningState === "run") {
dispatch({ type: "STOP_RUN" });
}