diff --git a/website/src/components/PlaygroundFeatures/FillRemainingHeight.tsx b/website/src/components/PlaygroundFeatures/FillRemainingHeight.tsx
new file mode 100644
index 00000000..3f70ee12
--- /dev/null
+++ b/website/src/components/PlaygroundFeatures/FillRemainingHeight.tsx
@@ -0,0 +1,32 @@
+import { useLayoutEffect, useState } from "react";
+// On mount, measures the window height and current vertical offset, and
+// renders children into a div that stretches to the bottom of the viewport.
+export default function FillRemainingHeight({ children, minHeight }) {
+ const [containerRef, setContainerRef] = useState(null);
+ const [height, setHeight] = useState(null);
+ useLayoutEffect(() => {
+ if (containerRef == null) {
+ return;
+ }
+
+ function updateSize() {
+ const verticalOffset = containerRef.getBoundingClientRect().y;
+ const available = Math.max(
+ window.innerHeight - verticalOffset,
+ minHeight,
+ );
+ setHeight(available);
+ }
+
+ updateSize();
+
+ window.addEventListener("resize", updateSize);
+ return () => window.removeEventListener("resize", updateSize);
+ }, [containerRef, minHeight]);
+
+ return (
+
+ {height != null && children}
+
+ );
+}
diff --git a/website/src/components/PlaygroundFeatures/defaultState.ts b/website/src/components/PlaygroundFeatures/defaultState.ts
index cbe4894c..767de741 100644
--- a/website/src/components/PlaygroundFeatures/defaultState.ts
+++ b/website/src/components/PlaygroundFeatures/defaultState.ts
@@ -42,6 +42,7 @@ export const DEFAULT_STATE: State = {
outputOption: "sdl",
showGratsDirectives: false,
},
+ ts: null,
gratsResult: null,
VERSION: URL_VERSION,
};
diff --git a/website/src/components/PlaygroundFeatures/editors/CodegenOutputView.tsx b/website/src/components/PlaygroundFeatures/editors/CodegenOutputView.tsx
deleted file mode 100644
index 2b5ca922..00000000
--- a/website/src/components/PlaygroundFeatures/editors/CodegenOutputView.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { EditorState } from "@codemirror/state";
-import { EditorView, keymap, lineNumbers } from "@codemirror/view";
-import { defaultKeymap } from "@codemirror/commands";
-import { typescriptLanguage } from "@codemirror/lang-javascript";
-import {
- defaultHighlightStyle,
- syntaxHighlighting,
-} from "@codemirror/language";
-import { getTypeScriptOutputString, onSelectorChange } from "../store";
-import { Theme } from "./theme";
-import store from "../store";
-
-export default function OutputView() {
- const [ref, setRef] = useState(null);
- useEffect(() => {
- if (ref != null) {
- createOutputView(store, ref);
- }
- }, [ref]);
- return (
-
- );
-}
-
-export function createOutputView(store, right: HTMLDivElement) {
- const outputState = EditorState.create({
- doc: getTypeScriptOutputString(store.getState()),
- extensions: [
- Theme,
- keymap.of(defaultKeymap),
- lineNumbers(),
- typescriptLanguage,
- EditorState.readOnly.of(true),
- EditorView.lineWrapping,
- syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
- ],
- });
-
- const rightView = new EditorView({
- state: outputState,
- parent: right,
- });
-
- // When the output changes, update the output view
- onSelectorChange(store, getTypeScriptOutputString, (output) => {
- rightView.dispatch({
- changes: {
- from: 0,
- to: rightView.state.doc.length,
- insert: output,
- },
- });
- });
-}
diff --git a/website/src/components/PlaygroundFeatures/editors/GraphQLOutputView.tsx b/website/src/components/PlaygroundFeatures/editors/GraphQLOutputView.tsx
deleted file mode 100644
index 20079b3b..00000000
--- a/website/src/components/PlaygroundFeatures/editors/GraphQLOutputView.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { EditorState } from "@codemirror/state";
-import { EditorView, keymap, lineNumbers } from "@codemirror/view";
-import { defaultKeymap } from "@codemirror/commands";
-import { graphqlLanguage } from "cm6-graphql";
-import {
- defaultHighlightStyle,
- syntaxHighlighting,
-} from "@codemirror/language";
-import { getGraphQLOutputString, onSelectorChange } from "../store";
-import { Theme } from "./theme";
-import store from "../store";
-
-export default function OutputView() {
- const [ref, setRef] = useState(null);
- useEffect(() => {
- if (ref != null) {
- createOutputView(store, ref);
- }
- }, [ref]);
- return (
-
- );
-}
-
-export function createOutputView(store, right: HTMLDivElement) {
- const outputState = EditorState.create({
- doc: getGraphQLOutputString(store.getState()),
- extensions: [
- Theme,
- keymap.of(defaultKeymap),
- lineNumbers(),
- graphqlLanguage,
- EditorState.readOnly.of(true),
- EditorView.lineWrapping,
- syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
- ],
- });
-
- const rightView = new EditorView({
- state: outputState,
- parent: right,
- });
-
- // When the output changes, update the output view
- onSelectorChange(store, getGraphQLOutputString, (output) => {
- rightView.dispatch({
- changes: {
- from: 0,
- to: rightView.state.doc.length,
- insert: output,
- },
- });
- });
-}
diff --git a/website/src/components/PlaygroundFeatures/editors/InputView.tsx b/website/src/components/PlaygroundFeatures/editors/InputView.tsx
deleted file mode 100644
index 0350addc..00000000
--- a/website/src/components/PlaygroundFeatures/editors/InputView.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { EditorState, Compartment } from "@codemirror/state";
-import { EditorView, keymap, lineNumbers } from "@codemirror/view";
-import { defaultKeymap, history, historyKeymap } from "@codemirror/commands";
-import { typescriptLanguage } from "@codemirror/lang-javascript";
-import * as ts from "typescript";
-import {
- defaultHighlightStyle,
- syntaxHighlighting,
-} from "@codemirror/language";
-import { createLinter } from "../linter";
-import lzstring from "lz-string";
-import { createDefaultMapFromCDN } from "@typescript/vfs";
-import { getConfig, getDoc, getView, onSelectorChange } from "../store";
-import { createSelector } from "reselect";
-import { Theme } from "./theme";
-import store, { useUrlState } from "../store";
-import { GratsConfig } from "grats";
-
-export default function InputView() {
- useEffect(() => {
- store.dispatch({ type: "SET_STATE_FROM_URL" });
- }, []);
- useUrlState(store);
- const [ref, setRef] = useState
(null);
- const fsMap = useFsMap();
- useEffect(() => {
- if (ref != null && fsMap != null) {
- createInputView(store, fsMap, ref);
- }
- }, [ref, fsMap]);
- return (
-
- );
-}
-
-function useFsMap() {
- const [fsMap, setFsMap] = useState | null>(null);
-
- useEffect(() => {
- let unmounted = false;
- const shouldCache = false;
- createDefaultMapFromCDN(
- { target: ts.ScriptTarget.ES2021, lib: ["es2021"] },
- ts.version,
- shouldCache,
- ts,
- lzstring,
- ).then((fsMap) => {
- if (!unmounted) {
- // There's some bug/mismatch where the files that are expected by our version of
- // TypeScript don't exactly match those included in/accessible by the
- // `@typescript/vfs` package. If it's missing a file it crashes, so we'll
- // include them as empty for now. Their actual contents are just a few very
- // obscure APIs, so it's probably fine to just leave them for now.
- for (const fileName of [
- "/lib.es2016.intl.d.ts",
- "/lib.dom.asynciterable.d.ts",
- ]) {
- fsMap.set(fileName, "");
- }
- setFsMap(fsMap);
- }
- });
-
- return () => {
- unmounted = true;
- };
- }, []);
-
- return fsMap;
-}
-
-// TODO: Make this into hooks
-async function createInputView(store, fsMap, left) {
- const state = store.getState();
-
- // Create a selector that memoizes the linter and closes over the fsMap
- const getLinter = createSelector(
- getView,
- getConfig,
- (view, config: GratsConfig) => {
- return createLinter(fsMap, view, config);
- },
- );
-
- const linter = getLinter(state);
-
- const linterCompartment = new Compartment();
- const inputState = EditorState.create({
- doc: state.doc,
- extensions: [
- Theme,
- keymap.of(...defaultKeymap, ...historyKeymap),
- history(),
- linterCompartment.of(linter),
- typescriptLanguage,
- EditorView.lineWrapping,
- lineNumbers(),
- syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
- ],
- });
-
- const leftView = new EditorView({ state: inputState, parent: left });
-
- // When the linter changes, update the linter
- onSelectorChange(store, getDoc, (doc) => {
- const state = leftView.state;
- if (state.doc.toString() === doc) {
- return;
- }
- const to = state.doc.length;
- const update = state.update({
- changes: { from: 0, to, insert: doc },
- });
- leftView.dispatch(update);
- });
-
- // When the linter changes, update the linter
- onSelectorChange(store, getLinter, (linter) => {
- leftView.dispatch({
- effects: linterCompartment.reconfigure(linter),
- });
- });
-}
diff --git a/website/src/components/PlaygroundFeatures/editors/OutputView.tsx b/website/src/components/PlaygroundFeatures/editors/OutputView.tsx
deleted file mode 100644
index 1d7bf693..00000000
--- a/website/src/components/PlaygroundFeatures/editors/OutputView.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from "react";
-import GraphQLOutputView from "./GraphQLOutputView";
-import CodegenOutputView from "./CodegenOutputView";
-import { getOutputOption, useAppSelector } from "../store";
-
-export default function OutputView() {
- const outputOption = useAppSelector(getOutputOption);
- switch (outputOption) {
- case "sdl":
- return ;
- case "typescript":
- return ;
- }
-}
diff --git a/website/src/components/PlaygroundFeatures/editors/theme.ts b/website/src/components/PlaygroundFeatures/editors/theme.ts
deleted file mode 100644
index 933c99b5..00000000
--- a/website/src/components/PlaygroundFeatures/editors/theme.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { EditorView } from "@codemirror/view";
-
-export const Theme = EditorView.theme({
- "&": { fontSize: "18px" },
- ".cm-gutters": {
- backgroundColor: "var(--ifm-color-emphasis-100)",
- color: "var(--ifm-font-color-base)",
- border: "none",
- borderRight: "1px solid var(--ifm-color-emphasis-300)",
- },
-});
diff --git a/website/src/components/PlaygroundFeatures/gratsStoreBindings.ts b/website/src/components/PlaygroundFeatures/gratsStoreBindings.ts
new file mode 100644
index 00000000..652fca45
--- /dev/null
+++ b/website/src/components/PlaygroundFeatures/gratsStoreBindings.ts
@@ -0,0 +1,159 @@
+import { getConfig, getDoc, getView, State } from "./store";
+import { codegen } from "grats/src/codegen";
+import * as ts from "typescript";
+import lzstring from "lz-string";
+import {
+ createDefaultMapFromCDN,
+ createSystem,
+ createVirtualCompilerHost,
+} from "@typescript/vfs";
+import ExecutionEnvironment from "@docusaurus/ExecutionEnvironment";
+import { buildSchemaAndDocResultWithHost } from "grats/src/lib";
+import GRATS_TYPE_DECLARATIONS from "!!raw-loader!grats/src/Types.ts";
+import { createSelector } from "reselect";
+import { print } from "graphql";
+import { printSDLWithoutMetadata } from "grats/src/printSchema";
+import store from "./store";
+
+const SHOULD_CACHE = true;
+const GRATS_PATH = "/node_modules/grats/src/index.ts";
+
+if (ExecutionEnvironment.canUseDOM) {
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+ // @ts-ignore
+ window.process = {
+ // Grats depends upon calling path.resolver and path.relative
+ // which depend upon process.cwd() being set.
+ // Here we supply a fake cwd() function that returns the root
+ cwd() {
+ return "/";
+ },
+ };
+}
+
+export async function bindGratsToStore() {
+ const fsMap = await createDefaultMapFromCDN(
+ { target: ts.ScriptTarget.ES2021, lib: ["es2021"] },
+ ts.version,
+ SHOULD_CACHE,
+ ts,
+ lzstring,
+ );
+
+ // There's some bug/mismatch where the files that are expected by our version of
+ // TypeScript don't exactly match those included in/accessible by the
+ // `@typescript/vfs` package. If it's missing a file it crashes, so we'll
+ // include them as empty for now. Their actual contents are just a few very
+ // obscure APIs, so it's probably fine to just leave them for now.
+ for (const fileName of [
+ "/lib.es2016.intl.d.ts",
+ "/lib.dom.asynciterable.d.ts",
+ ]) {
+ fsMap.set(fileName, "");
+ }
+
+ const system = createSystem(fsMap);
+
+ store.dispatch({ type: "TS_LOADED", system, fsMap });
+}
+
+export const getTs = (state: State) => state.ts;
+
+export const getBuild = createSelector(
+ getTs,
+ getDoc,
+ getConfig,
+ (ts, doc, config) => {
+ if (ts == null) return null;
+
+ return build(ts.fsMap, ts.system, doc, config);
+ },
+);
+
+export const getErrorText = createSelector(getBuild, (build) => {
+ if (build == null) return null;
+
+ if (build.kind === "ERROR") {
+ return build.err.formatDiagnosticsWithContext();
+ }
+ return null;
+});
+
+export const getDiagnostics = createSelector(getBuild, (build) => {
+ if (build == null) return [];
+
+ if (build.kind === "ERROR") {
+ return build.err._diagnostics;
+ }
+ return [];
+});
+
+export const getSchemaText = createSelector(
+ getBuild,
+ getView,
+ (build, view) => {
+ if (build == null) return "";
+
+ if (build.kind === "OK") {
+ const doc = build.value.doc;
+ if (!view.showGratsDirectives) {
+ return printSDLWithoutMetadata(doc);
+ }
+ return print(doc);
+ }
+ return null;
+ },
+);
+
+export const getTsSchema = createSelector(
+ getBuild,
+ getConfig,
+ (build, config) => {
+ if (build == null) return "";
+
+ if (build.kind === "OK") {
+ return codegen(build.value.schema, config, "./schema.ts");
+ }
+ return null;
+ },
+);
+
+function build(fsMap, system, text, config) {
+ fsMap.set("index.ts", text);
+ fsMap.set(GRATS_PATH, GRATS_TYPE_DECLARATIONS);
+ fsMap.set(
+ "/node_modules/graphql/index.ts",
+ `
+ export type GraphQLResolveInfo = any;
+ `,
+ );
+ const compilerOpts = {
+ allowJs: true,
+ baseUrl: "./",
+ paths: { grats: [GRATS_PATH] },
+ lib: [...fsMap.keys()],
+ };
+ const host = createVirtualCompilerHost(system, compilerOpts, ts);
+
+ const parsedOptions = {
+ raw: {
+ grats: config,
+ },
+ options: compilerOpts,
+ fileNames: ["index.ts"],
+ errors: [],
+ };
+ try {
+ return buildSchemaAndDocResultWithHost(parsedOptions, host.compilerHost);
+ } catch (e) {
+ const message = `Grats playground bug encountered. Please report this error:\n\n ${e.stack}`;
+ throw e;
+ return {
+ kind: "ERROR",
+ err: {
+ formatDiagnosticsWithContext: () => message,
+ _diagnostics: [] as ts.Diagnostic[],
+ },
+ };
+ }
+}
diff --git a/website/src/components/PlaygroundFeatures/index.module.css b/website/src/components/PlaygroundFeatures/index.module.css
index b502a245..74181a93 100644
--- a/website/src/components/PlaygroundFeatures/index.module.css
+++ b/website/src/components/PlaygroundFeatures/index.module.css
@@ -9,14 +9,6 @@ body {
margin: 0;
}
-.cm-editor {
- height: 100%;
- width: 100%;
-}
-.cm-scroller {
- overflow: auto;
-}
-
#format-button {
background-color: #eee;
border: 1px solid #ccc;
diff --git a/website/src/components/PlaygroundFeatures/linter.ts b/website/src/components/PlaygroundFeatures/linter.ts
deleted file mode 100644
index 11f53b0b..00000000
--- a/website/src/components/PlaygroundFeatures/linter.ts
+++ /dev/null
@@ -1,181 +0,0 @@
-import { createSystem, createVirtualCompilerHost } from "@typescript/vfs";
-import * as ts from "typescript";
-import { buildSchemaAndDocResultWithHost, GratsConfig } from "grats/src/lib";
-import { codegen } from "grats/src/codegen";
-import { ReportableDiagnostics } from "grats/src/utils/DiagnosticError";
-import { printSDLWithoutMetadata } from "grats/src/printSchema";
-import { linter } from "@codemirror/lint";
-import { DocumentNode, GraphQLSchema, print } from "graphql";
-import GRATS_TYPE_DECLARATIONS from "!!raw-loader!grats/src/Types.ts";
-import ExecutionEnvironment from "@docusaurus/ExecutionEnvironment";
-
-import store from "./store";
-
-const GRATS_PATH = "/node_modules/grats/src/index.ts";
-
-if (ExecutionEnvironment.canUseDOM) {
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
- // @ts-ignore
- window.process = {
- // Grats depends upon calling path.resolver and path.relative
- // which depend upon process.cwd() being set.
- // Here we supply a fake cwd() function that returns the root
- cwd() {
- return "/";
- },
- };
-}
-
-function buildSchemaResultWithFsMap(
- fsMap: Map,
- text: string,
- config: GratsConfig,
-) {
- fsMap.set("index.ts", text);
- fsMap.set(GRATS_PATH, GRATS_TYPE_DECLARATIONS);
- fsMap.set(
- "/node_modules/graphql/index.ts",
- `
- export type GraphQLResolveInfo = any;
- `,
- );
- // fsMap.set(GRATS_PACKAGE_JSON_PATH, GRATS_PACKAGE_JSON);
- // TODO: Don't recreate the system each time!
- const system = createSystem(fsMap);
-
- const compilerOpts = {
- allowJs: true,
- baseUrl: "./",
- paths: { grats: [GRATS_PATH] },
- lib: [...fsMap.keys()],
- };
- const host = createVirtualCompilerHost(system, compilerOpts, ts);
-
- const parsedOptions = {
- raw: {
- grats: config,
- },
- options: compilerOpts,
- fileNames: ["index.ts"],
- errors: [],
- };
-
- try {
- return buildSchemaAndDocResultWithHost(parsedOptions, host.compilerHost);
- } catch (e) {
- const message = `Grats playground bug encountered. Please report this error:\n\n ${e.stack}`;
- throw e;
- return {
- kind: "ERROR",
- err: {
- formatDiagnosticsWithContext: () => message,
- _diagnostics: [] as ReportableDiagnostics[],
- },
- };
- }
-}
-
-export function createLinter(
- fsMap: Map,
- view,
- config: GratsConfig,
-) {
- return linter((codeMirrorView) => {
- const text = codeMirrorView.viewState.state.doc.toString();
-
- const result = buildSchemaResultWithFsMap(fsMap, text, config);
-
- store.dispatch({ type: "NEW_DOCUMENT_TEXT", value: text });
-
- if (result.kind === "ERROR") {
- const errorText = result.err.formatDiagnosticsWithContext();
- const output = `# ERROR MESSAGE\n# =============\n\n${commentLines(
- errorText,
- )}`;
- store.dispatch({
- type: "GRATS_EMITTED_NEW_RESULT",
- graphql: output,
- typescript: output,
- });
-
- return result.err._diagnostics
- .filter((diagnostic) => {
- if (diagnostic.file == null) {
- return false;
- }
- return diagnostic.file.fileName === "index.ts";
- })
- .map((diagnostic) => {
- const actions = [];
- if (diagnostic.fix) {
- const action = gratsFixToCodeMirrorAction(diagnostic.fix);
- actions.push(action);
- }
- return {
- from: diagnostic.start,
- to: diagnostic.start + diagnostic.length,
- severity: "error",
- message: diagnostic.messageText,
- actions,
- };
- });
- }
-
- const codegenOutput = computeCodegenOutput(result.value.schema, config);
- const output = computeOutput(result.value.doc, view);
-
- store.dispatch({
- type: "GRATS_EMITTED_NEW_RESULT",
- graphql: output,
- typescript: codegenOutput,
- });
-
- return [];
- });
-}
-
-function computeOutput(
- doc: DocumentNode,
- view: { showGratsDirectives: boolean },
-): string {
- if (!view.showGratsDirectives) {
- return printSDLWithoutMetadata(doc);
- }
- return print(doc);
-}
-
-function computeCodegenOutput(
- schema: GraphQLSchema,
- config: GratsConfig,
-): string {
- return codegen(schema, config, "./schema.ts");
-}
-
-function commentLines(text: string): string {
- return text
- .split("\n")
- .map((line) => `# ${line}`)
- .join("\n");
-}
-
-function gratsFixToCodeMirrorAction(fix) {
- const changes = [];
- for (const tsChange of fix.changes) {
- for (const textChange of tsChange.textChanges) {
- changes.push({
- from: textChange.span.start,
- to: textChange.span.start + textChange.span.length,
- insert: textChange.newText,
- });
- }
- }
- if (changes.length === 0) {
- return null;
- }
- return {
- name: fix.description,
- apply: (view) => {
- view.dispatch({ changes });
- },
- };
-}
diff --git a/website/src/components/PlaygroundFeatures/store.ts b/website/src/components/PlaygroundFeatures/store.ts
index bebf36bf..98207b02 100644
--- a/website/src/components/PlaygroundFeatures/store.ts
+++ b/website/src/components/PlaygroundFeatures/store.ts
@@ -9,6 +9,7 @@ export type State = {
doc: string;
config: {
nullableByDefault: boolean;
+ strictSemanticNullability: boolean;
reportTypeScriptTypeErrors: boolean;
};
view: {
@@ -19,6 +20,10 @@ export type State = {
graphql: string;
typescript: string;
};
+ ts: {
+ system: any;
+ fsMap: Map;
+ } | null;
VERSION: number;
};
@@ -38,6 +43,10 @@ export type Action =
type: "DEFAULT_NULLABLE_INPUT_CHANGED";
value: boolean;
}
+ | {
+ type: "SEMANTIC_NULLABILITY_INPUT_CHANGED";
+ value: boolean;
+ }
| {
type: "GRATS_EMITTED_NEW_RESULT";
graphql: string;
@@ -50,6 +59,11 @@ export type Action =
| {
type: "OUTPUT_VIEW_SELECTION_CHANGED";
value: "sdl" | "typescript";
+ }
+ | {
+ type: "TS_LOADED";
+ system: any;
+ fsMap: Map;
};
function reducer(state: State = stateFromUrl(), action: Action) {
@@ -75,14 +89,32 @@ function reducer(state: State = stateFromUrl(), action: Action) {
outputOption: action.value,
},
};
- case "DEFAULT_NULLABLE_INPUT_CHANGED":
+ case "DEFAULT_NULLABLE_INPUT_CHANGED": {
+ const strictSemanticNullability = action.value
+ ? state.config.strictSemanticNullability
+ : false;
return {
...state,
config: {
...state.config,
+ strictSemanticNullability,
nullableByDefault: action.value,
},
};
+ }
+ case "SEMANTIC_NULLABILITY_INPUT_CHANGED": {
+ const nullableByDefault = action.value
+ ? true
+ : state.config.nullableByDefault;
+ return {
+ ...state,
+ config: {
+ ...state.config,
+ nullableByDefault,
+ strictSemanticNullability: action.value,
+ },
+ };
+ }
case "GRATS_EMITTED_NEW_RESULT":
return {
...state,
@@ -97,6 +129,15 @@ function reducer(state: State = stateFromUrl(), action: Action) {
doc: action.value,
};
}
+ case "TS_LOADED": {
+ return {
+ ...state,
+ ts: {
+ system: action.system,
+ fsMap: action.fsMap,
+ },
+ };
+ }
default: {
const _: never = action;
}
@@ -158,6 +199,10 @@ export function getNullableByDefault(state): boolean {
return state.config.nullableByDefault;
}
+export function getSemanticNullability(state): boolean {
+ return state.config.strictSemanticNullability;
+}
+
export function getShowGratsDirectives(state): boolean {
return state.view.showGratsDirectives;
}
@@ -190,7 +235,7 @@ export type SerializableState = {
// TODO: Avoid recomputing
export function getSerializabelState(state: State): SerializableState {
- const { gratsResult, ...serializableState } = state;
+ const { gratsResult, ts, ...serializableState } = state;
return serializableState;
}
diff --git a/website/src/components/logo.tsx b/website/src/components/logo.tsx
index 2913e2b1..cab2a4be 100644
--- a/website/src/components/logo.tsx
+++ b/website/src/components/logo.tsx
@@ -5,38 +5,51 @@ const _TS_DARK = "#00273F";
const GRAPHQL_RHODAMINE = "#E10098";
const GRAPHQL_MID = "rgb(196 56 150)";
-const OFFSET = 20;
+export const OFFSET = 20;
-function calculateHexagonPoints(): { x: number; y: number }[] {
- const width = 100;
- const height = 100;
-
- const centerX = width / 2;
- const centerY = height / 2;
-
- const radius = height / 2;
-
- const points: { x: number; y: number }[] = [];
-
- // Calculate the angle offset (30 degrees in radians)
- const angleOffset = Math.PI / 6;
-
- // Calculate the points of the hexagon
- for (let i = 0; i < 6; i++) {
- const angle = (i * Math.PI) / 3 + angleOffset;
- const x = centerX + radius * Math.cos(angle);
- const y = centerY + radius * Math.sin(angle);
- points.push({ x, y });
- }
-
- return points;
+export function GratsLogoWithName() {
+ return (
+
+ );
}
-function offset(pos) {
- return { x: pos.x + OFFSET, y: pos.y + OFFSET };
+export function GratsLogo() {
+ return (
+
+ );
}
-export function GratsLogo({ opacity = 1 }) {
+export function GratsLogoImpl({ opacity = 1 }) {
// Compute points of the hexagon with points
// at the middle top and bottom
const points = calculateHexagonPoints().map(offset);
@@ -58,11 +71,7 @@ export function GratsLogo({ opacity = 1 }) {
const gradient0 = "grad0";
const gradient45 = "grad45";
return (
-
+
);
}
@@ -167,3 +176,32 @@ function LinearGradient({ angle, startColor, endColor, id }) {
);
}
+
+function calculateHexagonPoints(): { x: number; y: number }[] {
+ const width = 100;
+ const height = 100;
+
+ const centerX = width / 2;
+ const centerY = height / 2;
+
+ const radius = height / 2;
+
+ const points: { x: number; y: number }[] = [];
+
+ // Calculate the angle offset (30 degrees in radians)
+ const angleOffset = Math.PI / 6;
+
+ // Calculate the points of the hexagon
+ for (let i = 0; i < 6; i++) {
+ const angle = (i * Math.PI) / 3 + angleOffset;
+ const x = centerX + radius * Math.cos(angle);
+ const y = centerY + radius * Math.sin(angle);
+ points.push({ x, y });
+ }
+
+ return points;
+}
+
+function offset(pos) {
+ return { x: pos.x + OFFSET, y: pos.y + OFFSET };
+}
diff --git a/website/src/pages/logo/index.tsx b/website/src/pages/logo/index.tsx
new file mode 100644
index 00000000..c3424ea9
--- /dev/null
+++ b/website/src/pages/logo/index.tsx
@@ -0,0 +1,5 @@
+import { GratsLogoWithName } from "../../components/logo";
+
+export default function LogoPage() {
+ return ;
+}
diff --git a/website/src/pages/playground/index.tsx b/website/src/pages/playground/index.tsx
index 68d6be39..40df7f13 100644
--- a/website/src/pages/playground/index.tsx
+++ b/website/src/pages/playground/index.tsx
@@ -1,13 +1,22 @@
-import React, { useLayoutEffect, useState } from "react";
-import InputView from "../../components/PlaygroundFeatures/editors/InputView";
-import OutputView from "../../components/PlaygroundFeatures/editors/OutputView";
-import ConfigBar from "../../components/PlaygroundFeatures/ConfigBar";
import Layout from "@theme/Layout";
-import store from "../../components/PlaygroundFeatures/store";
+import React, { Suspense } from "react";
+import ConfigBar from "../../components/PlaygroundFeatures/ConfigBar";
+import store, { useUrlState } from "../../components/PlaygroundFeatures/store";
import { Provider } from "react-redux";
import BrowserOnly from "@docusaurus/BrowserOnly";
+import FillRemainingHeight from "../../components/PlaygroundFeatures/FillRemainingHeight";
+import { bindGratsToStore } from "../../components/PlaygroundFeatures/gratsStoreBindings";
+import ExecutionEnvironment from "@docusaurus/ExecutionEnvironment";
+const BothEditors = React.lazy(
+ () => import("../../components/MonacoPlayground/BothEditors"),
+);
+
+if (ExecutionEnvironment.canUseDOM) {
+ bindGratsToStore();
+}
-export default function Playground(): JSX.Element {
+export default function EditorView() {
+ useUrlState(store);
return (
@@ -34,8 +43,30 @@ export default function Playground(): JSX.Element {
overflow: "scroll",
}}
>
-
-
+
+
+ Loading...
+
+