@berekuk's CR

packages/components/src/components/SquiggleEditorWithImportedBindings.tsx

@@ -2,9 +2,13 @@ import React from "react";
 import { SquiggleEditor } from "./SquiggleEditor";
 import type { SquiggleEditorProps } from "./SquiggleEditor";
 import { runPartial, defaultBindings } from "@quri/squiggle-lang";
-import type { result, errorValue, bindings } from "@quri/squiggle-lang";
+import type {
+  result,
+  errorValue,
+  bindings as bindingsType,
+} from "@quri/squiggle-lang";
 
-function resultDefault(x: result<bindings, errorValue>): bindings {
+function resultDefault(x: result<bindingsType, errorValue>): bindings {
   switch (x.tag) {
     case "Ok":
       return x.value;
@@ -13,24 +17,18 @@ function resultDefault(x: result<bindings, errorValue>): bindings {
   }
 }
 
-function replaceBindings(
+export type SquiggleEditorWithImportedBindingsProps = SquiggleEditorProps & {
-  props: SquiggleEditorProps,
+  bindingsImportUrl: string;
-  newBindings: bindings
-): SquiggleEditorProps {
-  return { ...props, bindings: newBindings };
-}
-
-export type SquiggleEditorImportedBindingsProps = SquiggleEditorProps & {
-  bindingsImportFile: string;
 };
 
-export const SquiggleEditorImportedBindings: React.FC<
+export const SquiggleEditorWithImportedBindings: React.FC<
-  SquiggleEditorImportedBindingsProps
+  SquiggleEditorWithImportedBindingsProps
 > = (props) => {
+  const { bindingsImportUrl, ...editorProps } = props;
   const [bindingsResult, setBindingsResult] = React.useState({
     tag: "Ok",
     value: defaultBindings,
-  } as result<bindings, errorValue>);
+  } as result<bindingsType, errorValue>);
   React.useEffect(() => {
     async function retrieveBindings(fileName: string) {
       let contents = await fetch(fileName).then((response) => {
@@ -38,9 +36,10 @@ export const SquiggleEditorImportedBindings: React.FC<
       });
       setBindingsResult(runPartial(contents));
     }
-    retrieveBindings(props.bindingsImportFile);
+    retrieveBindings(bindingsImportUrl);
-  }, []);
+  }, [bindingsImportUrl]);
   const deliveredBindings = resultDefault(bindingsResult);
-  const newProps = replaceBindings(props, deliveredBindings);
+  return (
-  return <SquiggleEditor {...newProps} />;
+    <SquiggleEditor {...{ ...editorProps, bindings: deliveredBindings }} />
+  );
 };

packages/website/docs/Internal/ImportIntoMdx.mdx

@@ -3,7 +3,7 @@ title: How to import squiggle files into `.mdx` documents
 sidebar_position: 5
 ---
 
-import { SquiggleEditorImportedBindings } from "../../src/components/SquiggleEditor";
+import { SquiggleEditorWithImportedBindings } from "../../src/components/SquiggleEditor";
 
 _Proof of concept_
 
@@ -21,17 +21,17 @@ z = y.b * y.a
 We can call `f(z)` upon the assignments in `demo.squiggle` like so:
 
 ```jsx
-import { SquiggleEditorImportedBindings } from "../../src/components/SquiggleEditor";
+import { SquiggleEditorWithImportedBindings } from "../../src/components/SquiggleEditor";
 
 <SquiggleEditorImportedBindings
   defaultCode={"f(z)"}
-  bindingsImportFile={"../../squiggle/demo.squiggle"}
+  bindingsImportFile={"../../estimates/demo.squiggle"}
 />;
 ```
 
 Which would then look exactly like
 
-<SquiggleEditorImportedBindings
+<SquiggleEditorWithImportedBindings
   defaultCode={"f(z)"}
-  bindingsImportFile={"../../squiggle/demo.squiggle"}
+  bindingsImportUrl={"../../estimates/demo.squiggle"}
 />

packages/website/src/components/SquiggleEditor.jsx

@@ -13,12 +13,12 @@ export function SquiggleEditor(props) {
   );
 }
 
-export function SquiggleEditorImportedBindings(props) {
+export function SquiggleEditorWithImportedBindings(props) {
   return (
     <BrowserOnly fallback={<FallbackSpinner height={292} />}>
       {() => {
         const LibComponent =
-          require("@quri/squiggle-components").SquiggleEditorImportedBindings;
+          require("@quri/squiggle-components").SquiggleEditorWithImportedBindings;
         return <LibComponent {...props} />;
       }}
     </BrowserOnly>