@berekuk's CR

This commit is contained in:
Quinn Dougherty 2022-07-28 10:33:31 -04:00
parent 5f3dd12542
commit ff05685634
4 changed files with 24 additions and 25 deletions

View File

@ -2,9 +2,13 @@ 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";
import type {
result,
errorValue,
bindings as bindingsType,
} from "@quri/squiggle-lang";
function resultDefault(x: result<bindings, errorValue>): bindings {
function resultDefault(x: result<bindingsType, errorValue>): bindings {
switch (x.tag) {
case "Ok":
return x.value;
@ -13,24 +17,18 @@ function resultDefault(x: result<bindings, errorValue>): bindings {
}
}
function replaceBindings(
props: SquiggleEditorProps,
newBindings: bindings
): SquiggleEditorProps {
return { ...props, bindings: newBindings };
}
export type SquiggleEditorImportedBindingsProps = SquiggleEditorProps & {
bindingsImportFile: string;
export type SquiggleEditorWithImportedBindingsProps = SquiggleEditorProps & {
bindingsImportUrl: string;
};
export const SquiggleEditorImportedBindings: React.FC<
SquiggleEditorImportedBindingsProps
export const SquiggleEditorWithImportedBindings: React.FC<
SquiggleEditorWithImportedBindingsProps
> = (props) => {
const { bindingsImportUrl, ...editorProps } = props;
const [bindingsResult, setBindingsResult] = React.useState({
tag: "Ok",
value: defaultBindings,
} as result<bindings, errorValue>);
} as result<bindingsType, errorValue>);
React.useEffect(() => {
async function retrieveBindings(fileName: string) {
let contents = await fetch(fileName).then((response) => {
@ -38,9 +36,10 @@ export const SquiggleEditorImportedBindings: React.FC<
});
setBindingsResult(runPartial(contents));
}
retrieveBindings(props.bindingsImportFile);
}, []);
retrieveBindings(bindingsImportUrl);
}, [bindingsImportUrl]);
const deliveredBindings = resultDefault(bindingsResult);
const newProps = replaceBindings(props, deliveredBindings);
return <SquiggleEditor {...newProps} />;
return (
<SquiggleEditor {...{ ...editorProps, bindings: deliveredBindings }} />
);
};

View File

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

View File

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