Get projects working in Playgrounds

packages/components/src/components/Alert.tsx

@@ -24,7 +24,7 @@ export const Alert: React.FC<{
   children,
 }) => {
   return (
-    <div className={clsx("rounded-md p-4", backgroundColor)}>
+    <div className={clsx("rounded-md p-4", backgroundColor)} role="status">
       <div className="flex">
         <Icon
           className={clsx("h-5 w-5 flex-shrink-0", iconColor)}

packages/components/src/components/SquiggleChart.tsx

@@ -71,7 +71,6 @@ type ProjectExecutionProps = {
 };
 const defaultOnChange = () => {};
 const defaultImports: JsImports = {};
-const defaultContinues: string[] = [];
 
 export const splitSquiggleChartSettings = (props: SquiggleChartProps) => {
   const {
@@ -125,7 +124,7 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = React.memo(
       width,
       height = 200,
       enableLocalSettings = false,
-      continues = defaultContinues,
+      continues,
       project,
       environment,
     } = props;

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<SquiggleEditorProps> = (props) => {
   const [code, setCode] = useMaybeControlledValue({
@@ -55,7 +54,7 @@ export const SquiggleEditor: React.FC<SquiggleEditorProps> = (props) => {
     width,
     height = 200,
     enableLocalSettings = false,
-    continues = defaultContinues,
+    continues,
     project,
   } = props;
 

packages/components/src/components/SquigglePlayground.tsx

@@ -251,6 +251,8 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
   onSettingsChange,
   showEditor = true,
   showShareButton = false,
+  continues,
+  project,
 }) => {
   const [code, setCode] = useMaybeControlledValue({
     value: controlledCode,
@@ -305,15 +307,9 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
     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,

packages/components/src/components/SquiggleViewer/VariableBox.tsx

@@ -45,7 +45,7 @@ export const VariableBox: React.FC<VariableBoxProps> = ({
     : location.path.items[location.path.items.length - 1];
 
   return (
-    <div>
+    <div role={isTopLevel ? "status" : undefined}>
       <header className="inline-flex space-x-1">
         <Tooltip text={heading}>
           <span

packages/components/test/basic.test.tsx

@@ -1,7 +1,11 @@
 import { render, screen } from "@testing-library/react";
 import React from "react";
 import "@testing-library/jest-dom";
-import { SquiggleChart, SquiggleEditor } from "../src/index";
+import {
+  SquiggleChart,
+  SquiggleEditor,
+  SquigglePlayground,
+} from "../src/index";
 import { SqProject } from "@quri/squiggle-lang";
 
 test("Chart logs nothing on render", async () => {
@@ -27,8 +31,23 @@ test("Project dependencies work in editors", async () => {
 
   render(<SquiggleEditor code={"x = 1"} project={project} />);
   const source = project.getSourceIds()[0];
-  render(
+  const { container } = render(
     <SquiggleEditor code={"x + 1"} project={project} continues={[source]} />
   );
-  screen.getByText("2");
+  expect(container).toHaveTextContent("2");
+});
+
+test("Project dependencies work in playgrounds", async () => {
+  const project = SqProject.create();
+  project.setSource("depend", "x = 1");
+
+  render(
+    <SquigglePlayground
+      code={"x + 1"}
+      project={project}
+      continues={["depend"]}
+    />
+  );
+  // We must await here because SquigglePlayground loads results asynchronously
+  expect(await screen.findByRole("status")).toHaveTextContent("2");
 });