diff --git a/packages/components/src/components/SquiggleChart.tsx b/packages/components/src/components/SquiggleChart.tsx index d9ab3168..08c0c4ff 100644 --- a/packages/components/src/components/SquiggleChart.tsx +++ b/packages/components/src/components/SquiggleChart.tsx @@ -2,7 +2,6 @@ import * as React from "react"; import { SqValue, environment, - defaultEnvironment, resultMap, SqValueTag, SqProject, @@ -56,22 +55,19 @@ export type SquiggleChartProps = { // Props needed for a standalone execution type StandaloneExecutionProps = { - /** Project must be undefined */ project?: undefined; - /** Includes must be undefined */ - includes?: undefined; + continues?: undefined; /** The amount of points returned to draw the distribution, not needed if using a project */ environment?: environment; }; // Props needed when executing inside a project. type ProjectExecutionProps = { - /** environment must be undefined (we don't set it here, users can set the environment outside the execution) */ environment?: undefined; /** The project that this execution is part of */ project: SqProject; - /** What other squiggle sources from the project to include. Default none */ - includes?: string[]; + /** What other squiggle sources from the project to continue. Default [] */ + continues?: string[]; }; const defaultOnChange = () => {}; const defaultImports: JsImports = {}; @@ -98,18 +94,24 @@ export const SquiggleChart: React.FC = React.memo( xAxisType = "number", distributionChartActions, enableLocalSettings = false, - project = SqProject.create(), code, - includes = [], + continues = [], } = props; - const p = project ?? SqProject.create(); - if (!project && props.environment) { - p.setEnvironment(props.environment); - } + const p = React.useMemo(() => { + if (props.project) { + return props.project; + } else { + const p = SqProject.create(); + if (props.environment) { + p.setEnvironment(props.environment); + } + return p; + } + }, [props.project, props.environment]); const { result, bindings } = useSquiggle({ - includes, + continues, project: p, code, jsImports, diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts index aac6944b..b8a6e385 100644 --- a/packages/components/src/index.ts +++ b/packages/components/src/index.ts @@ -1,6 +1,5 @@ -import { SqProject } from "@quri/squiggle-lang/"; +export { SqProject } from "@quri/squiggle-lang/"; export { SquiggleChart } from "./components/SquiggleChart"; export { SquiggleEditor } from "./components/SquiggleEditor"; export { SquigglePlayground } from "./components/SquigglePlayground"; export { SquiggleContainer } from "./components/SquiggleContainer"; -export const newProject = () => SqProject.create(); diff --git a/packages/components/src/lib/hooks/useSquiggle.ts b/packages/components/src/lib/hooks/useSquiggle.ts index 7594781a..7f6fed96 100644 --- a/packages/components/src/lib/hooks/useSquiggle.ts +++ b/packages/components/src/lib/hooks/useSquiggle.ts @@ -8,7 +8,7 @@ type SquiggleArgs = { executionId?: number; jsImports?: JsImports; project: SqProject; - includes: string[]; + continues: string[]; onChange?: (expr: SqValue | undefined, sourceName: string) => void; }; @@ -17,18 +17,20 @@ const importSourceName = (sourceName: string) => "imports-" + sourceName; export const useSquiggle = (args: SquiggleArgs) => { const sourceName = useMemo(() => uuid.v4(), []); + const env = args.project.getEnvironment(); + const result = useMemo( () => { const project = args.project; project.setSource(sourceName, args.code); - let includes = args.includes; + let continues = args.continues; if (args.jsImports && Object.keys(args.jsImports).length) { const importsSource = jsImportsToSquiggleCode(args.jsImports); project.setSource(importSourceName(sourceName), importsSource); - includes.push(importSourceName(sourceName)); + continues = args.continues.concat(importSourceName(sourceName)); } - project.setContinues(sourceName, includes); + project.setContinues(sourceName, continues); project.run(sourceName); const result = project.getResult(sourceName); const bindings = project.getBindings(sourceName); @@ -43,8 +45,9 @@ export const useSquiggle = (args: SquiggleArgs) => { args.jsImports, args.executionId, sourceName, - args.includes, + args.continues, args.project, + env, ] ); @@ -61,7 +64,7 @@ export const useSquiggle = (args: SquiggleArgs) => { return () => { args.project.removeSource(sourceName); if (args.project.getSource(importSourceName(sourceName))) - args.project.removeSource(sourceName); + args.project.removeSource(importSourceName(sourceName)); }; }, [args.project, sourceName]); diff --git a/packages/components/test/cleanup.test.tsx b/packages/components/test/cleanup.test.tsx index 7bd109e4..d2be427a 100644 --- a/packages/components/test/cleanup.test.tsx +++ b/packages/components/test/cleanup.test.tsx @@ -4,7 +4,7 @@ import "@testing-library/jest-dom"; import { SquiggleChart } from "../src/index"; import { SqProject } from "@quri/squiggle-lang"; -test("Creates and cleans up source with no name", async () => { +test("Creates and cleans up source", async () => { const project = SqProject.create(); const { unmount } = render( @@ -20,3 +20,20 @@ test("Creates and cleans up source with no name", async () => { expect(project.getSourceIds().length).toBe(0); expect(project.getSource(sourceId)).toBe(undefined); }); + +test("Creates and cleans up source and imports", async () => { + const project = SqProject.create(); + + const { unmount } = render( + + ); + + expect(project.getSourceIds().length).toBe(2); + + unmount(); + expect(project.getSourceIds()).toStrictEqual([]); +});