Add projects to components

packages/components/src/components/SquiggleChart.tsx

@@ -5,6 +5,7 @@ import {
   defaultEnvironment,
   resultMap,
   SqValueTag,
+  SqProject,
 } from "@quri/squiggle-lang";
 import { useSquiggle } from "../lib/hooks";
 import { SquiggleViewer } from "./SquiggleViewer";
@@ -53,6 +54,12 @@ export interface SquiggleChartProps {
   /** Whether to show vega actions to the user, so they can copy the chart spec */
   distributionChartActions?: boolean;
   enableLocalSettings?: boolean;
+  /** The project that this execution is part of */
+  project?: SqProject;
+  /** The name of the squiggle execution source. Defaults to "main" */
+  sourceName?: string;
+  /** The sources that this execution continues */
+  includes?: string[];
 }
 
 const defaultOnChange = () => {};
@@ -60,7 +67,7 @@ const defaultImports: JsImports = {};
 
 export const SquiggleChart: React.FC<SquiggleChartProps> = React.memo(
   ({
-    code = "",
+    code,
     executionId = 0,
     environment,
     onChange = defaultOnChange, // defaultOnChange must be constant, don't move its definition here
@@ -81,8 +88,14 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = React.memo(
     xAxisType = "number",
     distributionChartActions,
     enableLocalSettings = false,
+    sourceName = "main",
+    includes = [],
+    project = SqProject.create(),
   }) => {
     const { result, bindings } = useSquiggle({
+      sourceName,
+      includes,
+      project,
       code,
       environment,
       jsImports,

packages/components/src/index.ts

@@ -2,3 +2,4 @@ export { SquiggleChart } from "./components/SquiggleChart";
 export { SquiggleEditor } from "./components/SquiggleEditor";
 export { SquigglePlayground } from "./components/SquigglePlayground";
 export { SquiggleContainer } from "./components/SquiggleContainer";
+export * as squiggle from "@quri/squiggle-lang"

packages/components/src/lib/hooks/useSquiggle.ts

@@ -3,29 +3,38 @@ import { useEffect, useMemo } from "react";
 import { JsImports, jsImportsToSquiggleCode } from "../jsImports";
 
 type SquiggleArgs = {
-  code: string;
+  code?: string;
   executionId?: number;
   jsImports?: JsImports;
   environment?: environment;
+  project: SqProject;
+  sourceName: string;
+  includes: string[];
   onChange?: (expr: SqValue | undefined) => void;
 };
 
 export const useSquiggle = (args: SquiggleArgs) => {
   const result = useMemo(
     () => {
-      const project = SqProject.create();
+      const project = args.project;
-      project.setSource("main", args.code);
+      let code = project.getSource(args.sourceName)
+      if(args.code) {
+        code = args.code
+      }
+      project.setSource(args.sourceName, code ?? "");
+      let includes = args.includes;
       if (args.environment) {
         project.setEnvironment(args.environment);
       }
       if (args.jsImports && Object.keys(args.jsImports).length) {
         const importsSource = jsImportsToSquiggleCode(args.jsImports);
         project.setSource("imports", importsSource);
-        project.setContinues("main", ["imports"]);
+        includes.push("imports")
       }
-      project.run("main");
+      project.setContinues(args.sourceName, includes);
-      const result = project.getResult("main");
+      project.run(args.sourceName);
-      const bindings = project.getBindings("main");
+      const result = project.getResult(args.sourceName);
+      const bindings = project.getBindings(args.sourceName);
       return { result, bindings };
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps