Merge pull request #892 from quantified-uncertainty/mdx-cli

imported bindings

packages/components/src/components/SquiggleEditorWithImportedBindings.tsx

@@ -0,0 +1,52 @@
+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 as bindingsType,
+} from "@quri/squiggle-lang";
+
+function resultDefault(x: result<bindingsType, errorValue>): bindingsType {
+  switch (x.tag) {
+    case "Ok":
+      return x.value;
+    case "Error":
+      return defaultBindings;
+  }
+}
+
+export type SquiggleEditorWithImportedBindingsProps = SquiggleEditorProps & {
+  bindingsImportUrl: string;
+};
+
+export const SquiggleEditorWithImportedBindings: React.FC<
+  SquiggleEditorWithImportedBindingsProps
+> = (props) => {
+  const { bindingsImportUrl, ...editorProps } = props;
+  const [bindingsResult, setBindingsResult] = React.useState({
+    tag: "Ok",
+    value: defaultBindings,
+  } as result<bindingsType, errorValue>);
+  React.useEffect(() => {
+    async function retrieveBindings(fileName: string) {
+      let contents = await fetch(fileName).then((response) => {
+        return response.text();
+      });
+      setBindingsResult(
+        runPartial(
+          contents,
+          editorProps.bindings,
+          editorProps.environment,
+          editorProps.jsImports
+        )
+      );
+    }
+    retrieveBindings(bindingsImportUrl);
+  }, [bindingsImportUrl]);
+  const deliveredBindings = resultDefault(bindingsResult);
+  return (
+    <SquiggleEditor {...{ ...editorProps, bindings: deliveredBindings }} />
+  );
+};

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 { SquiggleEditorWithImportedBindings } from "./components/SquiggleEditorWithImportedBindings";
 
 export { mergeBindings } from "@quri/squiggle-lang";

packages/squiggle-lang/src/rescript/ReducerInterface/ReducerInterface_StdLib.res

@@ -1,6 +1,7 @@
 module Bindings = Reducer_Bindings
 
-let internalStdLib = Bindings.emptyBindings->SquiggleLibrary_Math.makeBindings->SquiggleLibrary_Versions.makeBindings
+let internalStdLib =
+  Bindings.emptyBindings->SquiggleLibrary_Math.makeBindings->SquiggleLibrary_Versions.makeBindings
 
 @genType
 let externalStdLib = internalStdLib->Bindings.toTypeScriptBindings

packages/website/docs/Internal/ImportIntoMdx.mdx

@@ -0,0 +1,37 @@
+---
+title: How to import squiggle files into `.mdx` documents
+sidebar_position: 5
+---
+
+import { SquiggleEditorWithImportedBindings } 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 { SquiggleEditorWithImportedBindings } from "../../src/components/SquiggleEditor";
+
+<SquiggleEditorWithImportedBindings
+  defaultCode={"f(z)"}
+  bindingsImportFile={"/estimates/demo.squiggle"}
+/>;
+```
+
+Which would then look exactly like
+
+<SquiggleEditorWithImportedBindings
+  defaultCode={"f(z)"}
+  bindingsImportUrl={"/estimates/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/src/components/SquiggleEditor.jsx

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

packages/website/static/estimates/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