playground renders code on second pass
This commit is contained in:
parent
9ec84d2c96
commit
329bb9432e
|
@ -88,6 +88,7 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = React.memo(
|
||||||
environment,
|
environment,
|
||||||
jsImports,
|
jsImports,
|
||||||
onChange,
|
onChange,
|
||||||
|
executionId,
|
||||||
});
|
});
|
||||||
|
|
||||||
const distributionPlotSettings = {
|
const distributionPlotSettings = {
|
||||||
|
|
|
@ -278,17 +278,18 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
|
||||||
executionId,
|
executionId,
|
||||||
} = useRunnerState(code);
|
} = useRunnerState(code);
|
||||||
|
|
||||||
const squiggleChart = (
|
const squiggleChart =
|
||||||
<SquiggleChart
|
renderedCode === "" ? null : (
|
||||||
code={renderedCode}
|
<SquiggleChart
|
||||||
executionId={executionId}
|
code={renderedCode}
|
||||||
environment={env}
|
executionId={executionId}
|
||||||
{...vars}
|
environment={env}
|
||||||
bindings={defaultBindings}
|
{...vars}
|
||||||
jsImports={imports}
|
bindings={defaultBindings}
|
||||||
enableLocalSettings={true}
|
jsImports={imports}
|
||||||
/>
|
enableLocalSettings={true}
|
||||||
);
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
const firstTab = vars.showEditor ? (
|
const firstTab = vars.showEditor ? (
|
||||||
<div className="border border-slate-200">
|
<div className="border border-slate-200">
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import { useEffect, useReducer } from "react";
|
import { useLayoutEffect, useReducer } from "react";
|
||||||
|
|
||||||
type State = {
|
type State = {
|
||||||
autorunMode: boolean;
|
autorunMode: boolean;
|
||||||
|
@ -10,7 +10,7 @@ type State = {
|
||||||
|
|
||||||
const buildInitialState = (code: string): State => ({
|
const buildInitialState = (code: string): State => ({
|
||||||
autorunMode: true,
|
autorunMode: true,
|
||||||
renderedCode: code,
|
renderedCode: "",
|
||||||
runningState: "none",
|
runningState: "none",
|
||||||
executionId: 1,
|
executionId: 1,
|
||||||
});
|
});
|
||||||
|
@ -62,9 +62,13 @@ const reducer = (state: State, action: Action): State => {
|
||||||
export const useRunnerState = (code: string) => {
|
export const useRunnerState = (code: string) => {
|
||||||
const [state, dispatch] = useReducer(reducer, buildInitialState(code));
|
const [state, dispatch] = useReducer(reducer, buildInitialState(code));
|
||||||
|
|
||||||
useEffect(() => {
|
useLayoutEffect(() => {
|
||||||
if (state.runningState === "prepared") {
|
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") {
|
} else if (state.runningState === "run") {
|
||||||
dispatch({ type: "STOP_RUN" });
|
dispatch({ type: "STOP_RUN" });
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user