imported bindings

packages/components/src/components/SquiggleEditorImportedBindings.tsx

@@ -0,0 +1,50 @@
+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";
+
+function resultDefault(
+  x: result<bindings, errorValue>,
+  defaul: bindings
+): bindings {
+  switch (x.tag) {
+    case "Ok":
+      return x.value;
+    case "Error":
+      return defaul;
+  }
+}
+
+function replaceBindings(
+  props: SquiggleEditorProps,
+  newBindings: bindings
+): SquiggleEditorProps {
+  return { ...props, bindings: newBindings };
+}
+
+export type SquiggleEditorImportedBindingsProps = SquiggleEditorProps & {
+  bindingsImportFile: string;
+};
+
+export const SquiggleEditorImportedBindings: React.FC<
+  SquiggleEditorImportedBindingsProps
+> = (props) => {
+  const [bindingsResult, setBindingsResult] = React.useState({
+    tag: "Ok" as "Ok",
+    value: defaultBindings,
+  } as result<bindings, errorValue>);
+  React.useEffect(() => {
+    async function retrieveBindings(fileName: string) {
+      //: Promise<result<bindings, errorValue>> {
+      let contents = await fetch(fileName).then((response) => {
+        return response.text();
+      });
+      setBindingsResult(runPartial(contents));
+    }
+    retrieveBindings(props.bindingsImportFile);
+  }, []);
+  const deliveredBindings = resultDefault(bindingsResult, {});
+  const newProps = replaceBindings(props, deliveredBindings);
+  return <SquiggleEditor {...newProps} />;
+};

packages/components/src/index.ts

@@ -2,5 +2,6 @@ export { SquiggleChart } from "./components/SquiggleChart";
 export { SquiggleEditor, SquigglePartial } from "./components/SquiggleEditor";
 export { SquigglePlayground } from "./components/SquigglePlayground";
 export { SquiggleContainer } from "./components/SquiggleContainer";
+export { SquiggleEditorImportedBindings } from "./components/SquiggleEditorImportedBindings";
 
 export { mergeBindings } from "@quri/squiggle-lang";

packages/website/docs/Internal/ImportIntoMdx.mdx

@@ -0,0 +1,37 @@
+---
+title: How to import squiggle files into `.mdx` documents
+sidebar_position: 5
+---
+
+import { SquiggleEditorImportedBindings } from "../../src/components/SquiggleEditor";
+
+_Proof of concept_
+
+## Consider the following squiggle file
+
+In our docusaurus repo, we have a static asset called `demo.squiggle`. It looks like this
+
+```js
+x = 1 to 2
+y = {a: x, b: 1e1}
+f(t) = normal(t, 1.1)
+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";
+
+<SquiggleEditorImportedBindings
+  defaultCode={"f(z)"}
+  bindingsImportFile={"../../squiggle/demo.squiggle"}
+/>;
+```
+
+Which would then look exactly like
+
+<SquiggleEditorImportedBindings
+  defaultCode={"f(z)"}
+  bindingsImportFile={"../../squiggle/demo.squiggle"}
+/>

packages/website/package.json

@@ -15,7 +15,7 @@
     "@docusaurus/core": "2.0.0-rc.1",
     "@docusaurus/preset-classic": "2.0.0-rc.1",
     "@heroicons/react": "^1.0.6",
-    "@quri/squiggle-components": "^0.2.20",
+    "@quri/squiggle-components": "^0.2.23",
     "base64-js": "^1.5.1",
     "clsx": "^1.2.1",
     "hast-util-is-element": "2.1.2",

packages/website/static/squiggle/demo.squiggle

@@ -0,0 +1,4 @@
+x = 1 to 2
+y = {a: x, b: 1e1}
+f(t) = normal(t, 1.1)
+z = y.b * y.a