From 405c1bf8f3bec01aa136b05f6d2be9123f88a80e Mon Sep 17 00:00:00 2001
From: Quinn Dougherty <quinnd@riseup.net>
Date: Wed, 27 Jul 2022 17:31:40 -0400
Subject: [PATCH] imported bindings

---
 .../SquiggleEditorImportedBindings.tsx        | 50 +++++++++++++++++++
 packages/components/src/index.ts              |  1 +
 .../website/docs/Internal/ImportIntoMdx.mdx   | 37 ++++++++++++++
 packages/website/package.json                 |  2 +-
 .../website/static/squiggle/demo.squiggle     |  4 ++
 5 files changed, 93 insertions(+), 1 deletion(-)
 create mode 100644 packages/components/src/components/SquiggleEditorImportedBindings.tsx
 create mode 100644 packages/website/docs/Internal/ImportIntoMdx.mdx
 create mode 100644 packages/website/static/squiggle/demo.squiggle

diff --git a/packages/components/src/components/SquiggleEditorImportedBindings.tsx b/packages/components/src/components/SquiggleEditorImportedBindings.tsx
new file mode 100644
index 00000000..db8fd07d
--- /dev/null
+++ b/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} />;
+};
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index ce6e107c..a1822c34 100644
--- a/packages/components/src/index.ts
+++ b/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";
diff --git a/packages/website/docs/Internal/ImportIntoMdx.mdx b/packages/website/docs/Internal/ImportIntoMdx.mdx
new file mode 100644
index 00000000..218206da
--- /dev/null
+++ b/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"}
+/>
diff --git a/packages/website/package.json b/packages/website/package.json
index 986b44c1..11e83791 100644
--- a/packages/website/package.json
+++ b/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",
diff --git a/packages/website/static/squiggle/demo.squiggle b/packages/website/static/squiggle/demo.squiggle
new file mode 100644
index 00000000..94ab4ac7
--- /dev/null
+++ b/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