new jsImports (WIP)

packages/components/src/components/SquiggleChart.tsx

@@ -4,12 +4,19 @@ import {
   environment,
   defaultEnvironment,
   resultMap,
-  SqValueLocation,
   SqValueTag,
 } from "@quri/squiggle-lang";
 import { useSquiggle } from "../lib/hooks";
 import { SquiggleViewer } from "./SquiggleViewer";
 
+type jsImports =
+  | number
+  | string
+  | jsImports[]
+  | {
+      [k: string]: jsImports;
+    };
+
 export interface SquiggleChartProps {
   /** The input string for squiggle */
   code?: string;
@@ -31,7 +38,7 @@ export interface SquiggleChartProps {
   width?: number;
   height?: number;
   /** JS imported parameters */
-  // jsImports?: jsImports;
+  jsImports?: jsImports;
   /** Whether to show a summary of the distribution */
   showSummary?: boolean;
   /** Set the x scale to be logarithmic by deault */
@@ -54,6 +61,7 @@ export interface SquiggleChartProps {
 }
 
 const defaultOnChange = () => {};
+const defaultImports = {};
 
 export const SquiggleChart: React.FC<SquiggleChartProps> = React.memo(
   ({
@@ -62,7 +70,7 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = React.memo(
     environment,
     onChange = defaultOnChange, // defaultOnChange must be constant, don't move its definition here
     height = 200,
-    // jsImports = defaultImports,
+    jsImports = defaultImports,
     showSummary = false,
     width,
     logX = false,
@@ -81,7 +89,7 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = React.memo(
     const { result, bindings } = useSquiggle({
       code,
       environment,
-      // jsImports,
+      jsImports,
       onChange,
       executionId,
     });

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

@@ -1,10 +1,18 @@
-import { environment, run, SqValue } from "@quri/squiggle-lang";
+import { environment, SqProject, SqValue } from "@quri/squiggle-lang";
 import { useEffect, useMemo } from "react";
 
+export type jsImports =
+  | number
+  | string
+  | jsImports[]
+  | {
+      [k: string]: jsImports;
+    };
+
 type SquiggleArgs = {
   code: string;
   executionId?: number;
-  // jsImports?: jsImports;
+  jsImports?: jsImports;
   environment?: environment;
   onChange?: (expr: SqValue | undefined) => void;
 };
@@ -12,10 +20,22 @@ type SquiggleArgs = {
 export const useSquiggle = (args: SquiggleArgs) => {
   const result = useMemo(
     () => {
-      const result = run(args.code, {
+      const project = SqProject.create();
-        environment: args.environment,
+      project.setSource("main", args.code);
-      });
+      if (args.environment) {
-      return result;
+        project.setEnvironment(args.environment);
+      }
+      if (args.jsImports) {
+        console.log(JSON.stringify(args.jsImports));
+        project.setSource(
+          "zzz", // due to bug in topology implementation, can be renamed later
+          "imports = " + JSON.stringify(args.jsImports)
+        );
+      }
+      project.run("main");
+      const result = project.getResult("main");
+      const bindings = project.getBindings("main");
+      return { result, bindings };
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [