diff --git a/packages/components/src/components/Alert.tsx b/packages/components/src/components/Alert.tsx index cb579536..52b4a3e4 100644 --- a/packages/components/src/components/Alert.tsx +++ b/packages/components/src/components/Alert.tsx @@ -24,7 +24,7 @@ export const Alert: React.FC<{ children, }) => { return ( -
+
{}; const defaultImports: JsImports = {}; -const defaultContinues: string[] = []; export const splitSquiggleChartSettings = (props: SquiggleChartProps) => { const { @@ -125,7 +124,7 @@ export const SquiggleChart: React.FC = React.memo( width, height = 200, enableLocalSettings = false, - continues = defaultContinues, + continues, project, environment, } = props; diff --git a/packages/components/src/components/SquiggleEditor.tsx b/packages/components/src/components/SquiggleEditor.tsx index 27d24cf0..9be3625e 100644 --- a/packages/components/src/components/SquiggleEditor.tsx +++ b/packages/components/src/components/SquiggleEditor.tsx @@ -35,7 +35,6 @@ export type SquiggleEditorProps = SquiggleChartProps & { const defaultOnChange = () => {}; const defaultImports: JsImports = {}; -const defaultContinues: string[] = []; export const SquiggleEditor: React.FC = (props) => { const [code, setCode] = useMaybeControlledValue({ @@ -55,7 +54,7 @@ export const SquiggleEditor: React.FC = (props) => { width, height = 200, enableLocalSettings = false, - continues = defaultContinues, + continues, project, } = props; diff --git a/packages/components/src/components/SquigglePlayground.tsx b/packages/components/src/components/SquigglePlayground.tsx index 59898d6b..025d5bed 100644 --- a/packages/components/src/components/SquigglePlayground.tsx +++ b/packages/components/src/components/SquigglePlayground.tsx @@ -251,6 +251,8 @@ export const SquigglePlayground: FC = ({ onSettingsChange, showEditor = true, showShareButton = false, + continues, + project, }) => { const [code, setCode] = useMaybeControlledValue({ value: controlledCode, @@ -305,15 +307,9 @@ export const SquigglePlayground: FC = ({ executionId, } = useRunnerState(code); - const project = React.useMemo(() => { - const p = SqProject.create(); - if (environment) { - p.setEnvironment(environment); - } - return p; - }, [environment]); - const resultAndBindings = useSquiggle({ + environment, + continues, code, project, jsImports: imports, diff --git a/packages/components/src/components/SquiggleViewer/VariableBox.tsx b/packages/components/src/components/SquiggleViewer/VariableBox.tsx index ca0fc875..62431d5e 100644 --- a/packages/components/src/components/SquiggleViewer/VariableBox.tsx +++ b/packages/components/src/components/SquiggleViewer/VariableBox.tsx @@ -45,7 +45,7 @@ export const VariableBox: React.FC = ({ : location.path.items[location.path.items.length - 1]; return ( -
+
{ @@ -27,8 +31,23 @@ test("Project dependencies work in editors", async () => { render(); const source = project.getSourceIds()[0]; - render( + const { container } = render( ); - screen.getByText("2"); + expect(container).toHaveTextContent("2"); +}); + +test("Project dependencies work in playgrounds", async () => { + const project = SqProject.create(); + project.setSource("depend", "x = 1"); + + render( + + ); + // We must await here because SquigglePlayground loads results asynchronously + expect(await screen.findByRole("status")).toHaveTextContent("2"); });