cargo anneal verify on the code.
+ cargo run.
+ cargo build.
+ cargo test.
+ {children}
+);
+
+const HirAside: React.FC = () => (
+ cdylib crate type, but the source code
+ does not specify an explicit crate type. Selecting this option will change the code to specify{' '}
+ cdylib.
+
+ {name}
+
+ {children}
+ {children}
+);
+
+type HTMLButton = JSX.IntrinsicElements['button'];
+
+interface ButtonProps extends HTMLButton {
+ isPrimary?: boolean;
+ isSmall?: boolean;
+ iconLeft?: React.FC;
+ iconRight?: React.FC;
+}
+
+export const Button: React.FC{children}
+); + +export default ChannelMenu; diff --git a/anneal/v1/playground/rust-anneal-playground/ui/frontend/ConfigElement.module.css b/anneal/v1/playground/rust-anneal-playground/ui/frontend/ConfigElement.module.css new file mode 100644 index 0000000000..b9369292cd --- /dev/null +++ b/anneal/v1/playground/rust-anneal-playground/ui/frontend/ConfigElement.module.css @@ -0,0 +1,73 @@ +.container { + display: flex; + align-items: center; +} + +.name { + flex: 1; +} + +.notDefault { + composes: name; + color: var(--header-tint); + font-weight: 600; +} + +.value { + flex: 1; +} + +.select { + width: 100%; + background: var(--button-secondary-bg-color); + border-color: var(--button-secondary-border-color); + color: var(--button-secondary-color); + + & option { + background-color: var(--button-secondary-bg-color-top); + border-color: var(--button-secondary-border-color); + color: var(--button-secondary-color); + } +} + +.toggle { + display: grid; + grid-template-columns: 1fr 1fr; + + & label { + cursor: pointer; + padding: 0 1em; + color: #777; + font-weight: 600; + text-align: center; + text-transform: uppercase; + border: 1px solid transparent; + + &:hover { + background: hsl(208deg 100% 43% / 10%); + } + + &:first-of-type { + border-radius: var(--header-border-radius) 0 0 var(--header-border-radius); + border-right-width: 0; + } + + &:last-of-type { + border-radius: 0 var(--header-border-radius) var(--header-border-radius) 0; + border-left-width: 0; + } + } + + & input { + display: none; + + &:checked + label { + background: var(--header-tint); + color: #fff; + } + + &:not(:checked) + label { + border-color: #bbb; + } + } +} diff --git a/anneal/v1/playground/rust-anneal-playground/ui/frontend/ConfigElement.tsx b/anneal/v1/playground/rust-anneal-playground/ui/frontend/ConfigElement.tsx new file mode 100644 index 0000000000..02f5ce67dd --- /dev/null +++ b/anneal/v1/playground/rust-anneal-playground/ui/frontend/ConfigElement.tsx @@ -0,0 +1,90 @@ +import React, { type JSX } from 'react'; + +import MenuItem from './MenuItem'; + +import * as styles from './ConfigElement.module.css'; + +interface EitherProps
+ onChange(a as T)}
+ />
+
+ onChange(b as T)}
+ />
+
+
+
+
+
+
+
+ );
+};
+
+interface PortalProps {
+ menuContainer: RefObject
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Anneal Playground
+ Return to the playground + ++ The playground is an open source project. + If you have any suggestions for features, issues with the + implementation, or just want to read the code for yourself, + you are invited to participate! +
+ ++ This playground is modeled after the original + Rust playground, and we owe a great debt to every contributor to + that project. +
+ ++ This playground was created by Jake Goulding, + part of Integer 32. +
+ +
+
+
+
+
+
+ The playground provides the top 100 most downloaded crates
+ from crates.io, the crates from
+ the Rust Cookbook, and all
+ of their dependencies. To use a crate, add the appropriate
+ {' '}
+ extern crate foo line to the code, or, since
+ {' '}
+ Rust Edition 2018, just
+ {' '}
+ use any item from that crate.
+
+ See the complete list of crates to know + what’s available. +
++ rustfmt is a tool for formatting Rust code + according to the Rust style guidelines. Click on the Format + {' '} + button in the Tools menu to automatically reformat your code. +
+ ++ Clippy is a collection of lints to catch common + mistakes and improve your Rust code. Click on the Clippy + {' '} + button in the Tools menu to see possible improvements to your + code. +
+ ++ Miri is an interpreter for Rust’s mid-level intermediate + representation (MIR) and can be used to detect certain kinds of undefined behavior + in your unsafe Rust code. Click on the Miri button in + the Tools menu to check. +
+ ++ Once you have some code worth saving or sharing, click on the + {' '} + Share button. This will create a + {' '} + GitHub Gist. You will also be provided with + a URL to load that Gist back into the playground. +
+
+ If you have a web page with Rust code that you’d like to
+ show in action, you can link to the playground with the
+ Rust code in the query parameter code. Make sure to
+ escape any special characters. Keep the code short, as URLs have
+ limitations on the maximum length.
+
{linkExample}
+ If your code contains the #[test] attribute and does not
+ contain a main method, cargo test will be
+ executed instead of cargo run.
+
+ If your code contains the #![crate_type="lib"] attribute,
+ {' '}
+ cargo build will be executed instead of cargo
+ run.
+
+ Instead of executing the code, you can also see intermediate + output of the compiler as x86_64 assembly, LLVM IR, Rust MIR, or + WebAssembly. This is often used in conjunction with the + {' '} + mode set to “Release” to see how the + compiler has chosen to optimize some specific piece of code. +
+ ++ Rust has two primary compilation modes: Debug and + {' '} + Release. Debug compiles code faster while Release + performs more aggressive optimizations. +
+ ++ You can choose which mode to compile in using the Mode + {' '} + menu. +
++ Rust releases new stable versions every 6 + weeks. Between these stable releases, beta versions of the + next stable release are made available. In addition, builds containing + experimental features are produced nightly. +
+ ++ You can choose which channel to compile with using the + {' '} + Channel menu. +
++ The Ajax.org Cloud9 Editor (Ace) is used to + provide a better interface for editing code. Ace comes with + several keybinding options (such as Emacs and Vim) as well as many + themes. +
+ ++ You may choose to use the Monaco editor instead. + This editor is used in VS Code and may be more familiar to people who + use VS Code. +
+ ++ You may also disable Ace and Monaco completely, falling back to a + simple HTML text area. +
+ ++ These options can be configured via the Config menu. +
++ The most recently entered code will be automatically saved in your browser’s + {' '} + local storage. This allows you to recover + your last work even if you close the browser. +
+ ++ Local storage is a singleton resource, so if you use multiple windows, + only the most recently saved code will be persisted. +
++ To prevent the playground from being used to attack other computers and + to ensure it is available for everyone to use, some limitations + are enforced. +
+ +-
+
- Network +
- + There is no network connection available during compilation or + execution of user-submitted code. + + +
- Memory +
- + The amount of memory the compiler and resulting executable use is + limited. + + +
- Execution Time +
- + The total compilation and execution time is limited. + + +
- Disk +
- + The total disk space available to the compiler and resulting + executable is limited. + +
+
+
+ {header}
+
+
+ {children}
+
+);
+
+interface LinkableSectionProps {
+ children: React.ReactNode;
+ id: string;
+ header: string;
+ level: React.ElementType;
+}
+
+const Code: React.FC{children}
+);
+
+export default Help;
diff --git a/anneal/v1/playground/rust-anneal-playground/ui/frontend/HelpExample.module.css b/anneal/v1/playground/rust-anneal-playground/ui/frontend/HelpExample.module.css
new file mode 100644
index 0000000000..b2e573b3d3
--- /dev/null
+++ b/anneal/v1/playground/rust-anneal-playground/ui/frontend/HelpExample.module.css
@@ -0,0 +1,21 @@
+.container {
+ position: relative;
+}
+
+.loadExample {
+ position: absolute;
+ top: 0;
+ right: 0;
+ visibility: hidden;
+ opacity: 0;
+ transition: all 0.5s;
+ cursor: pointer;
+ border: none;
+ border-bottom-left-radius: 0.5em;
+ background: rgb(255 255 255 / 80%);
+}
+
+.container:hover .loadExample {
+ visibility: visible;
+ opacity: 1;
+}
diff --git a/anneal/v1/playground/rust-anneal-playground/ui/frontend/HelpExample.tsx b/anneal/v1/playground/rust-anneal-playground/ui/frontend/HelpExample.tsx
new file mode 100644
index 0000000000..423287440c
--- /dev/null
+++ b/anneal/v1/playground/rust-anneal-playground/ui/frontend/HelpExample.tsx
@@ -0,0 +1,35 @@
+import React, { useCallback } from 'react';
+import root from 'react-shadow';
+
+import Prism from './Prism';
+import * as actions from './actions';
+import { useAppDispatch } from './hooks';
+
+import * as styles from './HelpExample.module.css';
+import prismOverrides from './prismjs-overrides.css';
+import prismTheme from 'prismjs/themes/prism-okaidia.css';
+
+export interface HelpExampleProps {
+ code: string;
+}
+
+const HelpExample: React.FC
+
+
+
+
+
+ {code}
+
+
+ );
+};
+
+export default HelpExample;
diff --git a/anneal/v1/playground/rust-anneal-playground/ui/frontend/Icon.module.css b/anneal/v1/playground/rust-anneal-playground/ui/frontend/Icon.module.css
new file mode 100644
index 0000000000..fece51712e
--- /dev/null
+++ b/anneal/v1/playground/rust-anneal-playground/ui/frontend/Icon.module.css
@@ -0,0 +1,4 @@
+.icon {
+ fill: currentcolor;
+ display: block;
+}
diff --git a/anneal/v1/playground/rust-anneal-playground/ui/frontend/Icon.tsx b/anneal/v1/playground/rust-anneal-playground/ui/frontend/Icon.tsx
new file mode 100644
index 0000000000..02f647fc22
--- /dev/null
+++ b/anneal/v1/playground/rust-anneal-playground/ui/frontend/Icon.tsx
@@ -0,0 +1,70 @@
+import React from 'react';
+
+import * as styles from './Icon.module.css';
+
+// These icons came from Material Design originally
+// https://material.io/tools/icons/?icon=assignment&style=outline
+
+// M.D. 'play_arrow'
+export const BuildIcon = () => (
+
+);
+
+// M.D. 'keyboard_arrow_down'
+export const ExpandableIcon = () => (
+
+);
+
+// M.D. 'more_horiz'
+export const MoreOptionsIcon = () => (
+
+);
+
+export const MoreOptionsActiveIcon = () => (
+
+);
+
+// M.D. 'settings',
+export const ConfigIcon = () => (
+
+);
+
+// M.D. 'help_outline'
+export const HelpIcon = () => (
+
+);
+
+export const CheckmarkIcon = () => (
+
+);
+
+// M.D. 'assignment' (outline)
+export const ClipboardIcon = () => (
+
+);
+
+// M.D. 'close'
+export const Close = () => (
+
+);
diff --git a/anneal/v1/playground/rust-anneal-playground/ui/frontend/Loader.module.css b/anneal/v1/playground/rust-anneal-playground/ui/frontend/Loader.module.css
new file mode 100644
index 0000000000..28ef51e647
--- /dev/null
+++ b/anneal/v1/playground/rust-anneal-playground/ui/frontend/Loader.module.css
@@ -0,0 +1,23 @@
+@keyframes loader-fade {
+ 0% {
+ opacity: 0;
+ }
+
+ 75% {
+ opacity: 1;
+ }
+}
+
+.dot {
+ opacity: 0;
+ animation: loader-fade 1s;
+ animation-iteration-count: infinite;
+
+ &:nth-child(2) {
+ animation-delay: 0.2s;
+ }
+
+ &:nth-child(3) {
+ animation-delay: 0.4s;
+ }
+}
diff --git a/anneal/v1/playground/rust-anneal-playground/ui/frontend/Loader.tsx b/anneal/v1/playground/rust-anneal-playground/ui/frontend/Loader.tsx
new file mode 100644
index 0000000000..9d3e14f814
--- /dev/null
+++ b/anneal/v1/playground/rust-anneal-playground/ui/frontend/Loader.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+import * as styles from './Loader.module.css';
+
+const Loader: React.FC = () => (
+
+ ⬤
+ ⬤
+ ⬤
+
+);
+
+export default Loader;
diff --git a/anneal/v1/playground/rust-anneal-playground/ui/frontend/MenuAside.module.css b/anneal/v1/playground/rust-anneal-playground/ui/frontend/MenuAside.module.css
new file mode 100644
index 0000000000..0ec000cff9
--- /dev/null
+++ b/anneal/v1/playground/rust-anneal-playground/ui/frontend/MenuAside.module.css
@@ -0,0 +1,4 @@
+.aside {
+ margin: 0.25em 0 0;
+ color: #888;
+}
diff --git a/anneal/v1/playground/rust-anneal-playground/ui/frontend/MenuAside.tsx b/anneal/v1/playground/rust-anneal-playground/ui/frontend/MenuAside.tsx
new file mode 100644
index 0000000000..e848746b36
--- /dev/null
+++ b/anneal/v1/playground/rust-anneal-playground/ui/frontend/MenuAside.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+import * as styles from './MenuAside.module.css';
+
+const MenuAside: React.FC+ {children} +
+); + +export default MenuAside; diff --git a/anneal/v1/playground/rust-anneal-playground/ui/frontend/MenuGroup.module.css b/anneal/v1/playground/rust-anneal-playground/ui/frontend/MenuGroup.module.css new file mode 100644 index 0000000000..55bbc159da --- /dev/null +++ b/anneal/v1/playground/rust-anneal-playground/ui/frontend/MenuGroup.module.css @@ -0,0 +1,22 @@ +.container { + padding: 0.75em 1em 0; + width: 27em; + line-height: normal; + + &:last-child { + padding-bottom: 0.75em; + } +} + +.title { + margin: 0; + border-bottom: 1px solid var(--header-main-border); + padding-bottom: 10px; + font-weight: 700; + font-size: var(--secondary-font-size); + text-transform: uppercase; +} + +.content { + padding: 1em 0.25em; +} diff --git a/anneal/v1/playground/rust-anneal-playground/ui/frontend/MenuGroup.tsx b/anneal/v1/playground/rust-anneal-playground/ui/frontend/MenuGroup.tsx new file mode 100644 index 0000000000..43394e307d --- /dev/null +++ b/anneal/v1/playground/rust-anneal-playground/ui/frontend/MenuGroup.tsx @@ -0,0 +1,19 @@ +import React from 'react'; + +import * as styles from './MenuGroup.module.css'; + +interface MenuGroupProps { + children: React.ReactNode; + title: string; +} + +const MenuGroup: React.FC
+
+);
+
+export default MenuGroup;
diff --git a/anneal/v1/playground/rust-anneal-playground/ui/frontend/MenuItem.module.css b/anneal/v1/playground/rust-anneal-playground/ui/frontend/MenuItem.module.css
new file mode 100644
index 0000000000..3878db3f6f
--- /dev/null
+++ b/anneal/v1/playground/rust-anneal-playground/ui/frontend/MenuItem.module.css
@@ -0,0 +1,7 @@
+.container {
+ margin-bottom: 1em;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+}
diff --git a/anneal/v1/playground/rust-anneal-playground/ui/frontend/MenuItem.tsx b/anneal/v1/playground/rust-anneal-playground/ui/frontend/MenuItem.tsx
new file mode 100644
index 0000000000..a685672571
--- /dev/null
+++ b/anneal/v1/playground/rust-anneal-playground/ui/frontend/MenuItem.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+import * as styles from './MenuItem.module.css';
+
+const MenuItem: React.FC{title}
+
+ {children}
+
+ {children}
+);
+
+export default MenuItem;
diff --git a/anneal/v1/playground/rust-anneal-playground/ui/frontend/ModeMenu.tsx b/anneal/v1/playground/rust-anneal-playground/ui/frontend/ModeMenu.tsx
new file mode 100644
index 0000000000..ce010afd9e
--- /dev/null
+++ b/anneal/v1/playground/rust-anneal-playground/ui/frontend/ModeMenu.tsx
@@ -0,0 +1,47 @@
+import React, { Fragment, useCallback } from 'react';
+
+import MenuGroup from './MenuGroup';
+import SelectOne from './SelectOne';
+
+import * as config from './reducers/configuration';
+import { Mode } from './types';
+import { useAppDispatch, useAppSelector } from './hooks';
+
+interface ModeMenuProps {
+ close: () => void;
+}
+
+const ModeMenu: React.FC
+
+
+
+
+
+
+
+
+
+
+
+);
+
+export default Notifications;
diff --git a/anneal/v1/playground/rust-anneal-playground/ui/frontend/Output.module.css b/anneal/v1/playground/rust-anneal-playground/ui/frontend/Output.module.css
new file mode 100644
index 0000000000..3af99967d2
--- /dev/null
+++ b/anneal/v1/playground/rust-anneal-playground/ui/frontend/Output.module.css
@@ -0,0 +1,53 @@
+.container {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ height: 100%;
+}
+
+.tabs {
+ display: flex;
+}
+
+.tab {
+ color: var(--font-color);
+ flex: 1 1 auto;
+ cursor: pointer;
+ border: var(--border);
+ border-right: none;
+ background-color: var(--output-background-tab);
+ line-height: 1.5;
+
+ &:last-of-type {
+ border-right: var(--border);
+ }
+}
+
+.tabSelected {
+ composes: tab;
+ cursor: default;
+ border-bottom: none;
+ background-color: var(--output-current-tab);
+
+ &:focus {
+ outline: none;
+ }
+}
+
+.tabClose {
+ composes: tab;
+ flex: 0 0 auto;
+}
+
+.body {
+ border: var(--border);
+ border-top: none;
+ background-color: var(--output-current-tab);
+ padding: 0.5em;
+ height: 100%;
+ overflow: scroll;
+}
+
+.stdin {
+ margin-top: 0.25em;
+}
diff --git a/anneal/v1/playground/rust-anneal-playground/ui/frontend/Output.tsx b/anneal/v1/playground/rust-anneal-playground/ui/frontend/Output.tsx
new file mode 100644
index 0000000000..c5afdd1e10
--- /dev/null
+++ b/anneal/v1/playground/rust-anneal-playground/ui/frontend/Output.tsx
@@ -0,0 +1,148 @@
+import React, { useCallback } from 'react';
+
+import { changeFocus } from './reducers/output/meta';
+import { Focus } from './types';
+
+import Execute from './Output/Execute';
+import Assembly from './Output/Assembly';
+import Gist from './Output/Gist';
+import SimplePane from './Output/SimplePane';
+import PaneWithMir from './Output/PaneWithMir';
+import PaneWithCode from './Output/PaneWithCode';
+import * as selectors from './selectors';
+import { useAppDispatch, useAppSelector } from './hooks';
+
+import * as styles from './Output.module.css';
+import Stdin from './Stdin';
+import LlvmIr from './Output/LlvmIr';
+
+const Tab: React.FC{children}
+
+
+ {focus === Focus.Execute &&
+ {showStdin && (
+
+
+ )}
+
+ );
+ }
+
+ return (
+
+
+ );
+};
+
+export default Output;
diff --git a/anneal/v1/playground/rust-anneal-playground/ui/frontend/Output/Assembly.tsx b/anneal/v1/playground/rust-anneal-playground/ui/frontend/Output/Assembly.tsx
new file mode 100644
index 0000000000..d16ff3f2c5
--- /dev/null
+++ b/anneal/v1/playground/rust-anneal-playground/ui/frontend/Output/Assembly.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+
+import { useAppSelector } from '../hooks';
+import * as selectors from '../selectors';
+import PaneWithCode from './PaneWithCode';
+import WarnAboutNoSymbols from './WarnAboutNoSymbols';
+
+const Assembly: React.FC = () => {
+ const assembly = useAppSelector((state) => state.output.assembly);
+ const isAssemblyInProgress = useAppSelector(selectors.isAssemblyInProgressSelector);
+ const hasAssemblySymbols = useAppSelector(selectors.hasAssemblySymbolsSelector);
+
+ return (
+
+
+ { body }
+ + {children} + + Copied! +
+ ); +}; + +const Links: React.FC = () => { + 'use memo'; + + const codeUrl = useAppSelector(selectors.codeUrlSelector); + const gistUrl = useAppSelector((state) => state.output.gist.url); + const permalink = useAppSelector(selectors.permalinkSelector); + const urloUrl = useAppSelector(selectors.urloUrlSelector); + const textChanged = useAppSelector(selectors.textChangedSinceShareSelector); + + return ( + <> +
+
+);
+
+export default Loader;
diff --git a/anneal/v1/playground/rust-anneal-playground/ui/frontend/Output/OutputPrism.module.css b/anneal/v1/playground/rust-anneal-playground/ui/frontend/Output/OutputPrism.module.css
new file mode 100644
index 0000000000..c2225ef3cb
--- /dev/null
+++ b/anneal/v1/playground/rust-anneal-playground/ui/frontend/Output/OutputPrism.module.css
@@ -0,0 +1,3 @@
+.container {
+ composes: -bodyMonospace from '../shared.module.css';
+}
diff --git a/anneal/v1/playground/rust-anneal-playground/ui/frontend/Output/OutputPrism.tsx b/anneal/v1/playground/rust-anneal-playground/ui/frontend/Output/OutputPrism.tsx
new file mode 100644
index 0000000000..8a5ccef75a
--- /dev/null
+++ b/anneal/v1/playground/rust-anneal-playground/ui/frontend/Output/OutputPrism.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+import Prism from '../Prism';
+
+import * as styles from './OutputPrism.module.css';
+
+interface OutputPrismProps {
+ children?: string;
+ language: 'rust_mir' | 'rust_errors';
+}
+
+const OutputPrism: React.FC
+ {code}
+
+
+
+ )
+);
+
+export default Section;
diff --git a/anneal/v1/playground/rust-anneal-playground/ui/frontend/Output/SimplePane.tsx b/anneal/v1/playground/rust-anneal-playground/ui/frontend/Output/SimplePane.tsx
new file mode 100644
index 0000000000..f5835e06cd
--- /dev/null
+++ b/anneal/v1/playground/rust-anneal-playground/ui/frontend/Output/SimplePane.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+
+import Header from './Header';
+import Loader from './Loader';
+import OutputPrism from './OutputPrism';
+import Section from './Section';
+
+interface HighlightErrorsProps {
+ children?: string;
+ label: string;
+}
+
+const onOutputPrismCopy: React.ClipboardEventHandler = (event) => {
+ // Blank out HTML copy data.
+ // Though linkified output is handy in the Playground, it does more harm
+ // than good when copied elsewhere, and terminal output is usable on its own.
+ const selection = document.getSelection();
+ if (selection) {
+ event.clipboardData.setData('text/plain', selection.toString());
+ event.preventDefault();
+ }
+};
+
+const HighlightErrors: React.FC{children}
+ {children}
+
+);
+
+export interface SimplePaneProps extends ReallySimplePaneProps {
+ children?: React.ReactNode;
+ kind: string;
+}
+
+export interface ReallySimplePaneProps {
+ requestsInProgress: number;
+ stdout?: string;
+ stderr?: string;
+ error?: string;
+}
+
+const SimplePane: React.FC
+ {props.requestsInProgress > 0 &&
+ {props.error}
+
+ {props.stderr}
+
+ {props.stdout}
+
+ {props.children}
+
+);
+
+export default SimplePane;
diff --git a/anneal/v1/playground/rust-anneal-playground/ui/frontend/Output/WarnAboutNoSymbols.tsx b/anneal/v1/playground/rust-anneal-playground/ui/frontend/Output/WarnAboutNoSymbols.tsx
new file mode 100644
index 0000000000..5f77c84e0b
--- /dev/null
+++ b/anneal/v1/playground/rust-anneal-playground/ui/frontend/Output/WarnAboutNoSymbols.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+
+import Section from './Section';
+
+export interface WarnAboutNoSymbolsProps {
+ isInProgress: boolean;
+ hasSymbols: boolean;
+ name: string;
+}
+
+const WarnAboutNoSymbols: React.FC#[unsafe(no_mangle)] attribute to
+ {'\n'}
+ functions you want to see {name} for. Generic functions
+ {'\n'}
+ only generate {name} when concrete types are provided.
+
+ ⣿
+
+ );
+};
+
+const makeStyleFromPixels = (cssProps: [string, number | undefined][]): React.CSSProperties => {
+ const massagedProps = cssProps
+ .filter(([_k, v]) => v !== undefined)
+ .map(([k, v]) => [k, `${v}px`]);
+ return Object.fromEntries(massagedProps) as React.CSSProperties;
+};
+
+const ResizableArea: React.FC = () => {
+ 'use memo';
+
+ const somethingToShow = useAppSelector(selectors.getSomethingToShow);
+ const isFocused = useAppSelector(selectors.isOutputFocused);
+ const orientation = useAppSelector(selectors.orientation);
+
+ const container = useRef
+
+
+
+
+
+
+ );
+};
+
+const WebSocketStatus: React.FC = () => {
+ const enabled = useAppSelector(selectors.showGemSelector);
+ const status = useAppSelector(selectors.websocketStatusSelector);
+
+ if (!enabled) {
+ return null;
+ }
+
+ const style: React.CSSProperties = {
+ position: 'absolute',
+ left: '1em',
+ bottom: '1em',
+ zIndex: '1',
+ };
+
+ switch (status.state) {
+ case 'connected':
+ style.color = 'green';
+ return
+
+
+
+
+
+ ⬤
;
+ case 'disconnected':
+ style.color = 'grey';
+ return ⬤
;
+ case 'error':
+ style.color = 'red';
+ return (
+
+ ⬤
+
+ );
+ }
+};
+
+const Playground: React.FC = () => {
+ const showNotifications = useAppSelector(selectors.anyNotificationsToShowSelector);
+
+ return (
+ <>
+
+
+ {showNotifications &&
+
+
+
+
+
+
+ {children}
+
+
+ );
+};
+
+export default Prism;
diff --git a/anneal/v1/playground/rust-anneal-playground/ui/frontend/Router.tsx b/anneal/v1/playground/rust-anneal-playground/ui/frontend/Router.tsx
new file mode 100644
index 0000000000..3d75de197c
--- /dev/null
+++ b/anneal/v1/playground/rust-anneal-playground/ui/frontend/Router.tsx
@@ -0,0 +1,109 @@
+import React from 'react';
+import { Reducer, UnknownAction } from '@reduxjs/toolkit';
+
+import { createBrowserHistory as createHistory, Path, Location } from 'history';
+import { createRouter, PlainOrThunk, RouterObject, StoreArg } from './uss-router';
+import UssRouter from './uss-router/Router';
+
+import qs from 'qs';
+import Route from 'route-parser';
+
+import * as actions from './actions';
+import { State } from './reducers';
+import { Channel, Edition, Mode, Page } from './types';
+
+const homeRoute = new Route('/');
+const helpRoute = new Route('/help');
+
+interface Substate {
+ page: Page;
+ configuration: {
+ channel: Channel;
+ mode: Mode;
+ edition: Edition;
+ };
+ output: {
+ gist: {
+ id?: string;
+ }
+ }
+}
+
+const stateSelector = ({ page, configuration: { channel, mode, edition}, output }: State): Substate => ({
+ page,
+ configuration: {
+ channel,
+ mode,
+ edition,
+ },
+ output: {
+ gist: {
+ id: output.gist.id,
+ },
+ },
+});
+
+const stateToLocation = ({ page, configuration, output }: Substate): Partial
+
+
+
+ );
+};
+
+const MoreButton: React.FC-
+
- + + +
- + + +
Format this code with Rustfmt.
+ Catch common mistakes and improve the code using the Clippy linter.
+
+ Execute {miriText} in the Miri interpreter to detect certain
+ cases of undefined behavior (like out-of-bounds memory access).
+
+
+ Expand macros in code using the nightly compiler.
+
+
+ dispatch(editCode(c))}
+ execute={() => dispatch(actions.performPrimaryAction())}
+ />
+
+ );
+};
+
+export default Editor;
diff --git a/anneal/v1/playground/rust-anneal-playground/ui/frontend/editor/MonacoEditor.tsx b/anneal/v1/playground/rust-anneal-playground/ui/frontend/editor/MonacoEditor.tsx
new file mode 100644
index 0000000000..e714fabf29
--- /dev/null
+++ b/anneal/v1/playground/rust-anneal-playground/ui/frontend/editor/MonacoEditor.tsx
@@ -0,0 +1,13 @@
+import React, { Suspense } from 'react';
+
+import { CommonEditorProps } from '../types';
+
+const MonacoEditorLazy = React.lazy(() => import('./MonacoEditorCore'));
+
+const MonacoEditor: React.FC(payload: P, sequenceNumber: number) => ({ + payload, + meta: { + websocket: true, + sequenceNumber, + }, +}); + +const sequenceNumberMatches = +
(whenMatch: (state: Draft ) => {
+ const {
+ payload,
+ meta: { sequenceNumber },
+ } = action;
+
+ if (sequenceNumber === state.sequenceNumber) {
+ whenMatch(state, payload);
+ }
+ };
+
+const slice = createSlice({
+ name: 'output/execute',
+ initialState,
+ reducers: {
+ wsExecuteRequest: {
+ reducer: (state, action: WsPayloadAction = PayloadAction<
+ P,
+ T,
+ { sequenceNumber: number }
+>;
+
+export const createWebsocketResponseAction = {
+ throw 'Should never be executed by JS';
+ }
+ actionCreator.type = type;
+ actionCreator.match = function (action: unknown): action is WsPayloadAction (
+ creator: { type: T },
+ payload: P,
+) =>
+ z.object({
+ type: z.literal(creator.type),
+ payload,
+ meta: z.object({
+ // deliberately omitting `websocket` to avoid sending the server's
+ // responses back to the server infinitely
+ sequenceNumber: z.number(),
+ }),
+ });
+
+export const createWebsocketResponse =