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

imported bindings
This commit is contained in:
Quinn 2022-07-28 12:55:35 -04:00 committed by GitHub
commit ffa0f40fb1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 111 additions and 4 deletions

View File

@ -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 }} />
);
};

View File

@ -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";

View File

@ -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

View File

@ -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)

View File

@ -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"}
/>

View File

@ -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",

View File

@ -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>
);
}

View File

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