experimental select for runner in playground settings

packages/components/src/components/PlaygroundSettings.tsx

@@ -1,11 +1,12 @@
 import React from "react";
 import { z } from "zod";
 
-import { SqScale } from "@quri/squiggle-lang";
+import { defaultRunnerName, RunnerName, SqScale } from "@quri/squiggle-lang";
 import {
   CheckboxFormField,
   NumberFormField,
   RadioFormField,
+  SelectStringFormField,
   TextFormField,
 } from "@quri/ui";
 
@@ -20,6 +21,11 @@ export const environmentSchema = z.object({
   seed: z.string(),
 });
 
+const runnerSchema = z.union([
+  z.literal("embedded" satisfies RunnerName),
+  z.literal("embedded-with-serialization" satisfies RunnerName),
+]);
+
 export const functionSettingsSchema = z.object({
   start: z.number().finite(),
   stop: z.number().finite(),
@@ -67,6 +73,7 @@ export const distributionSettingsSchema = z.object({
 
 export const viewSettingsSchema = z.object({
   environment: environmentSchema,
+  runner: runnerSchema,
   distributionChartSettings: distributionSettingsSchema,
   functionChartSettings: functionSettingsSchema,
   editorSettings: editorSettings,
@@ -83,6 +90,7 @@ export const defaultPlaygroundSettings: PlaygroundSettings = {
     xyPointLength: 1000,
     seed: "default_seed",
   },
+  runner: defaultRunnerName,
   functionChartSettings: {
     start: functionChartDefaults.min,
     stop: functionChartDefaults.max,
@@ -130,7 +138,7 @@ export type MetaSettings = {
   disableLogX?: boolean;
 };
 
-export const EnvironmentForm: React.FC = () => (
+export const RenderingSettingsForm: React.FC = () => (
   <div className="space-y-4">
     <TextFormField<PlaygroundSettings>
       name="environment.seed"
@@ -147,6 +155,13 @@ export const EnvironmentForm: React.FC = () => (
       label="Coordinate Count (For PointSet Shapes)"
       description="When distributions are converted into PointSet shapes, we need to know how many coordinates to use."
     />
+    <SelectStringFormField<PlaygroundSettings>
+      name="runner"
+      label="Squiggle Runner (Experimental)"
+      size="small"
+      options={["embedded", "embedded-with-serialization"]}
+      required
+    />
   </div>
 );
 
@@ -274,7 +289,7 @@ export const PlaygroundSettingsForm: React.FC<{
         <>
           <div className="mb-6">
             <FormSection title="Rendering Settings">
-              <EnvironmentForm />
+              <RenderingSettingsForm />
             </FormSection>
           </div>
 

packages/components/src/components/SquigglePlayground/index.tsx

@@ -110,6 +110,7 @@ export const SquigglePlayground: React.FC<SquigglePlaygroundProps> = (
     setup: { type: "projectFromLinker", linker },
     environment: settings.environment,
     initialAutorunMode: defaultAutorunMode,
+    runnerName: settings.runner,
   });
 
   useEffect(() => {

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

@@ -1,6 +1,13 @@
 import { useEffect, useMemo, useState } from "react";
 
-import { Env, SqLinker, SqProject } from "@quri/squiggle-lang";
+import {
+  defaultRunnerName,
+  Env,
+  runnerByName,
+  RunnerName,
+  SqLinker,
+  SqProject,
+} from "@quri/squiggle-lang";
 
 import { isSimulating, Simulation, useSimulator } from "./useSimulator.js";
 
@@ -23,6 +30,7 @@ export type SimulatorManagerArgs = {
   sourceId?: string;
   environment?: Env;
   initialAutorunMode?: boolean;
+  runnerName?: RunnerName;
 };
 
 export type UseSimulatorManager = {
@@ -39,7 +47,17 @@ export type UseSimulatorManager = {
 // defaultContinues needs to have a stable identity.
 const defaultContinues: string[] = [];
 
-function useSetup(setup: SetupSettings, sourceId?: string, environment?: Env) {
+function useSetup({
+  setup,
+  sourceId,
+  environment,
+  runnerName,
+}: {
+  setup: SetupSettings;
+  sourceId?: string;
+  environment?: Env;
+  runnerName?: RunnerName;
+}) {
   const _sourceId = useMemo(() => {
     // random; https://stackoverflow.com/a/12502559
     return sourceId || Math.random().toString(36).slice(2);
@@ -53,9 +71,16 @@ function useSetup(setup: SetupSettings, sourceId?: string, environment?: Env) {
   const project = useMemo(() => {
     switch (setup.type) {
       case "standalone":
-        return SqProject.create({ environment });
+        return SqProject.create({
+          environment,
+          runner: runnerName ? runnerByName(runnerName) : undefined,
+        });
       case "projectFromLinker":
-        return SqProject.create({ environment, linker: setup.linker });
+        return SqProject.create({
+          environment,
+          linker: setup.linker,
+          runner: runnerName ? runnerByName(runnerName) : undefined,
+        });
       case "project":
         return setup.project;
       default:
@@ -74,11 +99,12 @@ export function useSimulatorManager(
     args.initialAutorunMode ?? true
   );
 
-  const { sourceId, project, continues } = useSetup(
-    args.setup,
-    args.sourceId,
-    args.environment
-  );
+  const { sourceId, project, continues } = useSetup({
+    setup: args.setup,
+    sourceId: args.sourceId,
+    environment: args.environment,
+    runnerName: args.runnerName,
+  });
 
   const [simulation, { runSimulation }] = useSimulator({
     sourceId,
@@ -107,6 +133,14 @@ export function useSimulatorManager(
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [args.environment]);
 
+  useEffect(() => {
+    project.setRunner(runnerByName(args.runnerName ?? defaultRunnerName));
+    if (autorunMode) {
+      runSimulation();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [args.runnerName]);
+
   useEffect(() => {
     // This removes the source from the project when the component unmounts.
     return () => {
@@ -122,6 +156,6 @@ export function useSimulatorManager(
     autorunMode,
     setAutorunMode,
 
-    runSimulation: runSimulation,
+    runSimulation,
   };
 }

packages/squiggle-lang/src/index.ts

@@ -137,3 +137,10 @@ export {
 } from "./value/VScale.js";
 
 export { generateSeed } from "./utility/seedGenerator.js";
+
+export {
+  allRunnerNames,
+  defaultRunnerName,
+  runnerByName,
+  RunnerName,
+} from "./runners/index.js";

packages/squiggle-lang/src/public/SqProject/index.ts

@@ -71,6 +71,11 @@ export class SqProject {
     this.environment = environment;
   }
 
+  setRunner(runner: BaseRunner) {
+    // TODO - should we invalidate all outputs?
+    this.runner = runner;
+  }
+
   getSourceIds(): string[] {
     return Array.from(this.items.keys());
   }

packages/squiggle-lang/src/runners/EmbeddedWithSerializationRunner.ts

@@ -25,7 +25,11 @@ export class EmbeddedWithSerializationRunner extends BaseRunner {
 
       const bundle = serializer.getBundle();
 
-      if (process.env["PRINT_SERIALIZED_BUNDLE"]) {
+      if (
+        // @types/node is a lie, process.env fails in Vite environment
+        typeof process !== "undefined" &&
+        process.env["PRINT_SERIALIZED_BUNDLE"]
+      ) {
         console.log(JSON.stringify(bundle, null, 2));
       }
 

packages/squiggle-lang/src/runners/index.ts

@@ -10,7 +10,7 @@ export const allRunnerNames = [
   "embedded-with-serialization",
 ] as const;
 
-type RunnerName = (typeof allRunnerNames)[number];
+export type RunnerName = (typeof allRunnerNames)[number];
 
 export function runnerByName(name: RunnerName) {
   switch (name) {
@@ -25,11 +25,15 @@ export function runnerByName(name: RunnerName) {
   }
 }
 
-const DEFAULT_RUNNER: RunnerName = "embedded";
+export const defaultRunnerName = "embedded" as const satisfies RunnerName;
 
 export function getDefaultRunner() {
-  const defaultRunner =
-    process.env["SQUIGGLE_DEFAULT_RUNNER"] ?? DEFAULT_RUNNER;
+  // `process` can be undefined in Storybook environment; @types/node in squiggle-lang is a lie.
+  const envRunner =
+    typeof process === "undefined"
+      ? undefined
+      : process.env["SQUIGGLE_DEFAULT_RUNNER"];
+  const defaultRunner = envRunner ?? defaultRunnerName;
 
   if (!(allRunnerNames as readonly string[]).includes(defaultRunner)) {
     throw new Error("Unknown runner: " + defaultRunner);