Get projects working in Playgrounds
This commit is contained in:
parent
0f8e7ce6b6
commit
98454a87b5
|
@ -24,7 +24,7 @@ export const Alert: React.FC<{
|
||||||
children,
|
children,
|
||||||
}) => {
|
}) => {
|
||||||
return (
|
return (
|
||||||
<div className={clsx("rounded-md p-4", backgroundColor)}>
|
<div className={clsx("rounded-md p-4", backgroundColor)} role="status">
|
||||||
<div className="flex">
|
<div className="flex">
|
||||||
<Icon
|
<Icon
|
||||||
className={clsx("h-5 w-5 flex-shrink-0", iconColor)}
|
className={clsx("h-5 w-5 flex-shrink-0", iconColor)}
|
||||||
|
|
|
@ -71,7 +71,6 @@ type ProjectExecutionProps = {
|
||||||
};
|
};
|
||||||
const defaultOnChange = () => {};
|
const defaultOnChange = () => {};
|
||||||
const defaultImports: JsImports = {};
|
const defaultImports: JsImports = {};
|
||||||
const defaultContinues: string[] = [];
|
|
||||||
|
|
||||||
export const splitSquiggleChartSettings = (props: SquiggleChartProps) => {
|
export const splitSquiggleChartSettings = (props: SquiggleChartProps) => {
|
||||||
const {
|
const {
|
||||||
|
@ -125,7 +124,7 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = React.memo(
|
||||||
width,
|
width,
|
||||||
height = 200,
|
height = 200,
|
||||||
enableLocalSettings = false,
|
enableLocalSettings = false,
|
||||||
continues = defaultContinues,
|
continues,
|
||||||
project,
|
project,
|
||||||
environment,
|
environment,
|
||||||
} = props;
|
} = props;
|
||||||
|
|
|
@ -35,7 +35,6 @@ export type SquiggleEditorProps = SquiggleChartProps & {
|
||||||
|
|
||||||
const defaultOnChange = () => {};
|
const defaultOnChange = () => {};
|
||||||
const defaultImports: JsImports = {};
|
const defaultImports: JsImports = {};
|
||||||
const defaultContinues: string[] = [];
|
|
||||||
|
|
||||||
export const SquiggleEditor: React.FC<SquiggleEditorProps> = (props) => {
|
export const SquiggleEditor: React.FC<SquiggleEditorProps> = (props) => {
|
||||||
const [code, setCode] = useMaybeControlledValue({
|
const [code, setCode] = useMaybeControlledValue({
|
||||||
|
@ -55,7 +54,7 @@ export const SquiggleEditor: React.FC<SquiggleEditorProps> = (props) => {
|
||||||
width,
|
width,
|
||||||
height = 200,
|
height = 200,
|
||||||
enableLocalSettings = false,
|
enableLocalSettings = false,
|
||||||
continues = defaultContinues,
|
continues,
|
||||||
project,
|
project,
|
||||||
} = props;
|
} = props;
|
||||||
|
|
||||||
|
|
|
@ -251,6 +251,8 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
|
||||||
onSettingsChange,
|
onSettingsChange,
|
||||||
showEditor = true,
|
showEditor = true,
|
||||||
showShareButton = false,
|
showShareButton = false,
|
||||||
|
continues,
|
||||||
|
project,
|
||||||
}) => {
|
}) => {
|
||||||
const [code, setCode] = useMaybeControlledValue({
|
const [code, setCode] = useMaybeControlledValue({
|
||||||
value: controlledCode,
|
value: controlledCode,
|
||||||
|
@ -305,15 +307,9 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
|
||||||
executionId,
|
executionId,
|
||||||
} = useRunnerState(code);
|
} = useRunnerState(code);
|
||||||
|
|
||||||
const project = React.useMemo(() => {
|
|
||||||
const p = SqProject.create();
|
|
||||||
if (environment) {
|
|
||||||
p.setEnvironment(environment);
|
|
||||||
}
|
|
||||||
return p;
|
|
||||||
}, [environment]);
|
|
||||||
|
|
||||||
const resultAndBindings = useSquiggle({
|
const resultAndBindings = useSquiggle({
|
||||||
|
environment,
|
||||||
|
continues,
|
||||||
code,
|
code,
|
||||||
project,
|
project,
|
||||||
jsImports: imports,
|
jsImports: imports,
|
||||||
|
|
|
@ -45,7 +45,7 @@ export const VariableBox: React.FC<VariableBoxProps> = ({
|
||||||
: location.path.items[location.path.items.length - 1];
|
: location.path.items[location.path.items.length - 1];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div role={isTopLevel ? "status" : undefined}>
|
||||||
<header className="inline-flex space-x-1">
|
<header className="inline-flex space-x-1">
|
||||||
<Tooltip text={heading}>
|
<Tooltip text={heading}>
|
||||||
<span
|
<span
|
||||||
|
|
|
@ -1,7 +1,11 @@
|
||||||
import { render, screen } from "@testing-library/react";
|
import { render, screen } from "@testing-library/react";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import "@testing-library/jest-dom";
|
import "@testing-library/jest-dom";
|
||||||
import { SquiggleChart, SquiggleEditor } from "../src/index";
|
import {
|
||||||
|
SquiggleChart,
|
||||||
|
SquiggleEditor,
|
||||||
|
SquigglePlayground,
|
||||||
|
} from "../src/index";
|
||||||
import { SqProject } from "@quri/squiggle-lang";
|
import { SqProject } from "@quri/squiggle-lang";
|
||||||
|
|
||||||
test("Chart logs nothing on render", async () => {
|
test("Chart logs nothing on render", async () => {
|
||||||
|
@ -27,8 +31,23 @@ test("Project dependencies work in editors", async () => {
|
||||||
|
|
||||||
render(<SquiggleEditor code={"x = 1"} project={project} />);
|
render(<SquiggleEditor code={"x = 1"} project={project} />);
|
||||||
const source = project.getSourceIds()[0];
|
const source = project.getSourceIds()[0];
|
||||||
render(
|
const { container } = render(
|
||||||
<SquiggleEditor code={"x + 1"} project={project} continues={[source]} />
|
<SquiggleEditor code={"x + 1"} project={project} continues={[source]} />
|
||||||
);
|
);
|
||||||
screen.getByText("2");
|
expect(container).toHaveTextContent("2");
|
||||||
|
});
|
||||||
|
|
||||||
|
test("Project dependencies work in playgrounds", async () => {
|
||||||
|
const project = SqProject.create();
|
||||||
|
project.setSource("depend", "x = 1");
|
||||||
|
|
||||||
|
render(
|
||||||
|
<SquigglePlayground
|
||||||
|
code={"x + 1"}
|
||||||
|
project={project}
|
||||||
|
continues={["depend"]}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
// We must await here because SquigglePlayground loads results asynchronously
|
||||||
|
expect(await screen.findByRole("status")).toHaveTextContent("2");
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in New Issue
Block a user