diff --git a/packages/components/.prettierignore b/packages/components/.prettierignore new file mode 100644 index 00000000..5e03c80e --- /dev/null +++ b/packages/components/.prettierignore @@ -0,0 +1,2 @@ +dist/ +storybook-static diff --git a/packages/components/src/components/SquiggleChart.tsx b/packages/components/src/components/SquiggleChart.tsx index 9553d329..534d164d 100644 --- a/packages/components/src/components/SquiggleChart.tsx +++ b/packages/components/src/components/SquiggleChart.tsx @@ -131,7 +131,7 @@ export interface SquiggleChartProps { /** variables declared before this expression */ environment?: unknown; /** When the environment changes */ - onEnvChange?(env: unknown): void; + onChange?(expr: squiggleExpression): void; /** CSS width of the element */ width?: number; height?: number; @@ -141,8 +141,7 @@ export const SquiggleChart: React.FC = ({ squiggleString = "", sampleCount = 1000, outputXYPoints = 1000, - environment = [], - onEnvChange = () => {}, + onChange = () => {}, height = 60, width = NaN, }: SquiggleChartProps) => { @@ -158,8 +157,8 @@ export const SquiggleChart: React.FC = ({ let expressionResult = run(squiggleString, samplingInputs); let internal: JSX.Element; if (expressionResult.tag === "Ok") { - onEnvChange(environment); let expression = expressionResult.value; + onChange(expression); internal = ( ); diff --git a/packages/components/src/components/SquiggleEditor.tsx b/packages/components/src/components/SquiggleEditor.tsx index 4ede7891..580db580 100644 --- a/packages/components/src/components/SquiggleEditor.tsx +++ b/packages/components/src/components/SquiggleEditor.tsx @@ -3,6 +3,7 @@ import * as ReactDOM from "react-dom"; import { SquiggleChart } from "./SquiggleChart"; import { CodeEditor } from "./CodeEditor"; import styled from "styled-components"; +import type { squiggleExpression } from "@quri/squiggle-lang"; export interface SquiggleEditorProps { /** The input string for squiggle */ @@ -22,7 +23,7 @@ export interface SquiggleEditorProps { /** The environment, other variables that were already declared */ environment?: unknown; /** when the environment changes. Used again for notebook magic*/ - onEnvChange?(env: unknown): void; + onChange?(expr: squiggleExpression): void; /** The width of the element */ width: number; } @@ -43,7 +44,7 @@ export let SquiggleEditor: React.FC = ({ diagramStart, diagramStop, diagramCount, - onEnvChange, + onChange, environment, }: SquiggleEditorProps) => { let [expression, setExpression] = React.useState(initialSquiggleString); @@ -69,7 +70,7 @@ export let SquiggleEditor: React.FC = ({ diagramStop={diagramStop} diagramCount={diagramCount} environment={environment} - onEnvChange={onEnvChange} + onChange={onChange} /> ); @@ -80,7 +81,7 @@ export function renderSquiggleEditorToDom(props: SquiggleEditorProps) { ReactDOM.render( { + onChange={(expr) => { // Typescript complains on two levels here. // - Div elements don't have a value property // - Even if it did (like it was an input element), it would have to @@ -96,10 +97,10 @@ export function renderSquiggleEditorToDom(props: SquiggleEditorProps) { // viewof env = cell('normal(0,1)') // to work // @ts-ignore - parent.value = env; + parent.value = expr; parent.dispatchEvent(new CustomEvent("input")); - if (props.onEnvChange) props.onEnvChange(env); + if (props.onChange) props.onChange(expr); }} />, parent