Project in editors and remove warnings

packages/components/src/components/CodeEditor.tsx

@@ -55,10 +55,7 @@ export const CodeEditor: FC<CodeEditorProps> = ({
       editorProps={{
         $blockScrolling: true,
       }}
-      setOptions={{
+      setOptions={{}}
-        enableBasicAutocompletion: false,
-        enableLiveAutocompletion: false,
-      }}
       commands={[
         {
           name: "submit",

packages/components/src/components/SquiggleChart.tsx

@@ -1,5 +1,10 @@
 import * as React from "react";
-import { SqValue, environment, SqProject } from "@quri/squiggle-lang";
+import {
+  SqValue,
+  environment,
+  SqProject,
+  defaultEnvironment,
+} from "@quri/squiggle-lang";
 import { useSquiggle } from "../lib/hooks";
 import { SquiggleViewer } from "./SquiggleViewer";
 import { JsImports } from "../lib/jsImports";
@@ -121,23 +126,14 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = React.memo(
       height = 200,
       enableLocalSettings = false,
       continues = defaultContinues,
+      project,
+      environment,
     } = props;
 
-    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 resultAndBindings = useSquiggle({
+      environment,
       continues,
-      project: p,
+      project,
       code,
       jsImports,
       onChange,
@@ -153,7 +149,9 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = React.memo(
         height={height}
         distributionPlotSettings={distributionPlotSettings}
         chartSettings={chartSettings}
-        environment={p.getEnvironment()}
+        environment={
+          project ? project.getEnvironment() : environment ?? defaultEnvironment
+        }
         enableLocalSettings={enableLocalSettings}
       />
     );

packages/components/src/components/SquiggleEditor.tsx

@@ -35,6 +35,7 @@ export type SquiggleEditorProps = SquiggleChartProps & {
 
 const defaultOnChange = () => {};
 const defaultImports: JsImports = {};
+const defaultContinues: string[] = [];
 
 export const SquiggleEditor: React.FC<SquiggleEditorProps> = (props) => {
   const [code, setCode] = useMaybeControlledValue({
@@ -54,17 +55,13 @@ export const SquiggleEditor: React.FC<SquiggleEditorProps> = (props) => {
     width,
     height = 200,
     enableLocalSettings = false,
+    continues = defaultContinues,
+    project,
   } = props;
 
-  const project = React.useMemo(() => {
-    const p = SqProject.create();
-    if (environment) {
-      p.setEnvironment(environment);
-    }
-    return p;
-  }, [environment]);
-
   const resultAndBindings = useSquiggle({
+    environment,
+    continues,
     code,
     project,
     jsImports,

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

@@ -4,16 +4,18 @@ import {
   SqProject,
   SqRecord,
   SqValue,
+  environment,
 } from "@quri/squiggle-lang";
 import { useEffect, useMemo } from "react";
 import { JsImports, jsImportsToSquiggleCode } from "../jsImports";
 import * as uuid from "uuid";
 
 type SquiggleArgs = {
+  environment?: environment;
   code: string;
   executionId?: number;
   jsImports?: JsImports;
-  project: SqProject;
+  project?: SqProject;
   continues?: string[];
   onChange?: (expr: SqValue | undefined, sourceName: string) => void;
 };
@@ -27,15 +29,25 @@ const importSourceName = (sourceName: string) => "imports-" + sourceName;
 const defaultContinues = [];
 
 export const useSquiggle = (args: SquiggleArgs): ResultAndBindings => {
+  const project = useMemo(() => {
+    if (args.project) {
+      return args.project;
+    } else {
+      const p = SqProject.create();
+      if (args.environment) {
+        p.setEnvironment(args.environment);
+      }
+      return p;
+    }
+  }, [args.project, args.environment]);
+
   const sourceName = useMemo(() => uuid.v4(), []);
 
-  const env = args.project.getEnvironment();
+  const env = project.getEnvironment();
   const continues = args.continues || defaultContinues;
 
   const result = useMemo(
     () => {
-      const project = args.project;
-
       project.setSource(sourceName, args.code);
       let fullContinues = continues;
       if (args.jsImports && Object.keys(args.jsImports).length) {
@@ -59,7 +71,7 @@ export const useSquiggle = (args: SquiggleArgs): ResultAndBindings => {
       args.executionId,
       sourceName,
       continues,
-      args.project,
+      project,
       env,
     ]
   );
@@ -75,11 +87,11 @@ export const useSquiggle = (args: SquiggleArgs): ResultAndBindings => {
 
   useEffect(() => {
     return () => {
-      args.project.removeSource(sourceName);
+      project.removeSource(sourceName);
-      if (args.project.getSource(importSourceName(sourceName)))
+      if (project.getSource(importSourceName(sourceName)))
-        args.project.removeSource(importSourceName(sourceName));
+        project.removeSource(importSourceName(sourceName));
     };
-  }, [args.project, sourceName]);
+  }, [project, sourceName]);
 
   return result;
 };

packages/components/test/basic.test.tsx

@@ -1,9 +1,10 @@
-import { render } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import React from "react";
 import "@testing-library/jest-dom";
-import { SquiggleChart } from "../src/index";
+import { SquiggleChart, SquiggleEditor } from "../src/index";
+import { SqProject } from "@quri/squiggle-lang";
 
-test("Logs nothing on render", async () => {
+test("Chart logs nothing on render", async () => {
   const { unmount } = render(<SquiggleChart code={"normal(0, 1)"} />);
   unmount();
 
@@ -11,3 +12,23 @@ test("Logs nothing on render", async () => {
   expect(console.warn).not.toBeCalled();
   expect(console.error).not.toBeCalled();
 });
+
+test("Editor logs nothing on render", async () => {
+  const { unmount } = render(<SquiggleEditor code={"normal(0, 1)"} />);
+  unmount();
+
+  expect(console.log).not.toBeCalled();
+  expect(console.warn).not.toBeCalled();
+  expect(console.error).not.toBeCalled();
+});
+
+test("Project dependencies work in editors", async () => {
+  const project = SqProject.create();
+
+  render(<SquiggleEditor code={"x = 1"} project={project} />);
+  const source = project.getSourceIds()[0];
+  render(
+    <SquiggleEditor code={"x + 1"} project={project} continues={[source]} />
+  );
+  screen.getByText("2");
+});