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/vscode-ext/README.md

@@ -9,7 +9,7 @@ Features:
 - Preview `.squiggle` files in a preview pane
 - Syntax highlighting for `.squiggle` and `.squiggleU` files
 
-## Installation 
+## Installation
 
 You can install this extension by going to the "extensions" tab, searching for "Squiggle", and then installing it.
 
@@ -23,7 +23,7 @@ After loading a `.squiggle` file, an "Open Preview" button will appear. If you c
 
 ### Configuration (optional)
 
-Some preview settings, e.g. whether to show the summary table or types of outputs, can be configurable on in the VS Code settings and persist between different preview sessions. The VS Code settings can be accessed with the shortcut `Ctrl+,` with `Ctrl+Shift+P` + searching "Open Settings", or by accessing a file like `$HOME/.config/Code/User/settings.json` in Linux (see [here](https://stackoverflow.com/questions/65908987/how-can-i-open-visual-studio-codes-settings-json-file)) for other operating systems. 
+Some preview settings, e.g. whether to show the summary table or types of outputs, can be configurable on in the VS Code settings and persist between different preview sessions. The VS Code settings can be accessed with the shortcut `Ctrl+,` with `Ctrl+Shift+P` + searching "Open Settings", or by accessing a file like `$HOME/.config/Code/User/settings.json` in Linux (see [here](https://stackoverflow.com/questions/65908987/how-can-i-open-visual-studio-codes-settings-json-file)) for other operating systems.
 
 ![](./images/vs-code-settings.png)
 

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