[anneal] Add playground frontend

anneal/v1/playground/rust-anneal-playground/ui/frontend/.babelrc

@@ -0,0 +1,17 @@
+{
+  "presets": [
+    [ "@babel/preset-env", {
+      "corejs": "3",
+      "modules": false,
+      "useBuiltIns": "entry",
+    }],
+    [ "@babel/react", {
+      "runtime": "automatic",
+    }],
+  ],
+  "plugins": [
+    ["babel-plugin-react-compiler", {
+      "compilationMode": "annotation",
+    }],
+  ],
+}

anneal/v1/playground/rust-anneal-playground/ui/frontend/.browserslistrc

@@ -0,0 +1,9 @@
+# https://github.com/rust-lang/rfcs/blob/master/text/1985-tiered-browser-support.md
+
+last 2 Chrome versions
+last 1 Firefox version
+Firefox ESR
+last 1 Safari version
+last 1 iOS version
+last 1 Edge version
+last 1 UCAndroid version

anneal/v1/playground/rust-anneal-playground/ui/frontend/.gitignore

@@ -0,0 +1,3 @@
+.eslintcache
+build
+node_modules

anneal/v1/playground/rust-anneal-playground/ui/frontend/.prettierignore

@@ -0,0 +1,35 @@
+pnpm-lock.yaml
+
+build
+node_modules
+
+# Not for these ready yet
+.babelrc
+*.js
+*.json
+*.scss
+
+# Remove these files when we touch them for other reasons
+ChannelMenu.tsx
+ConfigMenu.tsx
+Help.tsx
+Icon.tsx
+MenuAside.tsx
+MenuGroup.tsx
+ModeMenu.tsx
+Output.tsx
+Output/Execute.tsx
+Output/Section.tsx
+PageSwitcher.tsx
+Router.tsx
+SelectOne.tsx
+SelectableMenuItem.tsx
+ToolsMenu.tsx
+editor/AceEditorCore.tsx
+editor/MonacoEditor.tsx
+highlighting.ts
+index.tsx
+selectors/index.ts
+uss-router/Link.tsx
+uss-router/Router.tsx
+uss-router/index.ts

anneal/v1/playground/rust-anneal-playground/ui/frontend/.prettierrc.json

@@ -0,0 +1,11 @@
+{
+  "printWidth": 100,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "importOrder": ["^[./].*(?<!\\.css)$", "\\.css$"],
+  "importOrderSeparation": true,
+  "importOrderSortSpecifiers": true,
+  "plugins": [
+    "@trivago/prettier-plugin-sort-imports"
+  ]
+}

anneal/v1/playground/rust-anneal-playground/ui/frontend/.stylelintignore

@@ -0,0 +1 @@
+build

anneal/v1/playground/rust-anneal-playground/ui/frontend/.stylelintrc.json

@@ -0,0 +1,20 @@
+{
+  "extends": [
+    "stylelint-config-standard",
+    "stylelint-config-css-modules"
+  ],
+  "rules": {
+    "selector-class-pattern": [
+      "^[a-z-][a-zA-Z0-9]+$", {
+        "message": "Expected class selector to be lowerCamelCase"
+      }],
+    "value-keyword-case": ["lower", {
+      "ignoreProperties": [
+        "composes"
+      ]
+    }],
+    "at-rule-no-unknown": [true, {
+      "ignoreAtRules": ["define-mixin", "mixin"]
+    }]
+  }
+}

anneal/v1/playground/rust-anneal-playground/ui/frontend/AdvancedOptionsMenu.tsx

@@ -0,0 +1,84 @@
+import React, { useCallback } from 'react';
+
+import { Either as EitherConfig, Select as SelectConfig } from './ConfigElement';
+import MenuAside from './MenuAside';
+import MenuGroup from './MenuGroup';
+import { useAppDispatch, useAppSelector } from './hooks';
+import * as config from './reducers/configuration';
+import * as selectors from './selectors';
+import { AliasingModel, Backtrace, Edition } from './types';
+
+const MIRI_TREE_BORROWS_URL = 'https://github.com/rust-lang/miri#user-content--zmiri-tree-borrows';
+
+const TreeBorrowAside: React.FC = () => (
+  <MenuAside>
+    Code that is accepted by <a href={MIRI_TREE_BORROWS_URL}>Tree Borrows</a> may be declared
+    undefined behavior in the future.
+  </MenuAside>
+);
+
+const AdvancedOptionsMenu: React.FC = () => {
+  const isEditionDefault = useAppSelector(selectors.isEditionDefault);
+  const edition = useAppSelector((state) => state.configuration.edition);
+  const isBacktraceDefault = useAppSelector(selectors.isBacktraceDefault);
+  const backtrace = useAppSelector((state) => state.configuration.backtrace);
+  const isAliasingModelDefault = useAppSelector(selectors.isAliasingModelDefault);
+  const aliasingModel = useAppSelector((state) => state.configuration.aliasingModel);
+
+  const dispatch = useAppDispatch();
+
+  const changeEdition = useCallback((e: Edition) => dispatch(config.changeEdition(e)), [dispatch]);
+  const changeBacktrace = useCallback(
+    (b: Backtrace) => dispatch(config.changeBacktrace(b)),
+    [dispatch],
+  );
+  const changeAliasingModel = useCallback(
+    (b: AliasingModel) => dispatch(config.changeAliasingModel(b)),
+    [dispatch],
+  );
+
+  return (
+    <>
+      <MenuGroup title="Advanced options">
+        <SelectConfig
+          name="Edition"
+          value={edition}
+          isDefault={isEditionDefault}
+          onChange={changeEdition}
+        >
+          <option value={Edition.Rust2015}>2015</option>
+          <option value={Edition.Rust2018}>2018</option>
+          <option value={Edition.Rust2021}>2021</option>
+          <option value={Edition.Rust2024}>2024</option>
+        </SelectConfig>
+
+        <EitherConfig
+          id="backtrace"
+          name="Backtrace"
+          a={Backtrace.Enabled}
+          b={Backtrace.Disabled}
+          aLabel="On"
+          bLabel="Off"
+          value={backtrace}
+          isDefault={isBacktraceDefault}
+          onChange={changeBacktrace}
+        />
+      </MenuGroup>
+
+      <MenuGroup title="Miri">
+        <EitherConfig
+          id="aliasingModel"
+          name="Aliasing model"
+          a={AliasingModel.Stacked}
+          b={AliasingModel.Tree}
+          value={aliasingModel}
+          isDefault={isAliasingModelDefault}
+          onChange={changeAliasingModel}
+          aside={<TreeBorrowAside />}
+        />
+      </MenuGroup>
+    </>
+  );
+};
+
+export default AdvancedOptionsMenu;

anneal/v1/playground/rust-anneal-playground/ui/frontend/BuildMenu.module.css

@@ -0,0 +1,4 @@
+.code {
+  background: var(--code-background-color);
+  padding: 0 0.25em;
+}

anneal/v1/playground/rust-anneal-playground/ui/frontend/BuildMenu.tsx

@@ -0,0 +1,93 @@
+import React, { useCallback } from 'react';
+
+import ButtonMenuItem from './ButtonMenuItem';
+import MenuAside from './MenuAside';
+import MenuGroup from './MenuGroup';
+import * as actions from './actions';
+import { useAppDispatch, useAppSelector } from './hooks';
+import * as selectors from './selectors';
+
+import * as styles from './BuildMenu.module.css';
+
+interface BuildMenuProps {
+  close: () => void;
+}
+
+const useAppDispatchAndClose = (action: () => actions.ThunkAction, close: () => void) => {
+  const dispatch = useAppDispatch();
+
+  return useCallback(() => {
+    dispatch(action());
+    close();
+  }, [action, close, dispatch]);
+};
+
+const BuildMenu: React.FC<BuildMenuProps> = (props) => {
+  const isHirAvailable = useAppSelector(selectors.isHirAvailable);
+  const wasmLikelyToWork = useAppSelector(selectors.wasmLikelyToWork);
+
+  const compile = useAppDispatchAndClose(actions.performCompile, props.close);
+  const compileToAssembly = useAppDispatchAndClose(actions.performCompileToAssembly, props.close);
+  const compileToLLVM = useAppDispatchAndClose(actions.performCompileToLLVM, props.close);
+  const compileToMir = useAppDispatchAndClose(actions.performCompileToMir, props.close);
+  const compileToHir = useAppDispatchAndClose(actions.performCompileToNightlyHir, props.close);
+  const compileToWasm = useAppDispatchAndClose(actions.performCompileToWasm, props.close);
+  const execute = useAppDispatchAndClose(actions.performExecute, props.close);
+  const test = useAppDispatchAndClose(actions.performTest, props.close);
+  const performCargoAnneal = useAppDispatchAndClose(actions.performCargoAnneal, props.close);
+
+  return (
+    <MenuGroup title="What do you want to do?">
+      <ButtonMenuItem name="Anneal" onClick={performCargoAnneal}>
+        Runs <Code>cargo anneal verify</Code> on the code.
+      </ButtonMenuItem>
+      <ButtonMenuItem name="Run" onClick={execute}>
+        Build and run the code, showing the output. Equivalent to <Code>cargo run</Code>.
+      </ButtonMenuItem>
+      <ButtonMenuItem name="Build" onClick={compile}>
+        Build the code without running it. Equivalent to <Code>cargo build</Code>.
+      </ButtonMenuItem>
+      <ButtonMenuItem name="Test" onClick={test}>
+        Build the code and run all the tests. Equivalent to <Code>cargo test</Code>.
+      </ButtonMenuItem>
+      <ButtonMenuItem name="ASM" onClick={compileToAssembly}>
+        Build and show the resulting assembly code.
+      </ButtonMenuItem>
+      <ButtonMenuItem name="LLVM IR" onClick={compileToLLVM}>
+        Build and show the resulting LLVM IR, LLVM’s intermediate representation.
+      </ButtonMenuItem>
+      <ButtonMenuItem name="MIR" onClick={compileToMir}>
+        Build and show the resulting MIR, Rust’s control-flow-based intermediate representation.
+      </ButtonMenuItem>
+      <ButtonMenuItem name="HIR" onClick={compileToHir}>
+        Build and show the resulting HIR, Rust’s syntax-based intermediate representation.
+        {!isHirAvailable && <HirAside />}
+      </ButtonMenuItem>
+      <ButtonMenuItem name="Wasm" onClick={compileToWasm}>
+        Build a WebAssembly module for web browsers, in the .WAT textual representation.
+        {!wasmLikelyToWork && <WasmAside />}
+      </ButtonMenuItem>
+    </MenuGroup>
+  );
+};
+
+const Code: React.FC<{ children: string }> = ({ children }) => (
+  <code className={styles.code}>{children}</code>
+);
+
+const HirAside: React.FC = () => (
+  <MenuAside>
+    Note: HIR currently requires using the Nightly channel, selecting this option will switch to
+    Nightly.
+  </MenuAside>
+);
+
+const WasmAside: React.FC = () => (
+  <MenuAside>
+    Note: WebAssembly works best when using the <Code>cdylib</Code> crate type, but the source code
+    does not specify an explicit crate type. Selecting this option will change the code to specify{' '}
+    <Code>cdylib</Code>.
+  </MenuAside>
+);
+
+export default BuildMenu;

anneal/v1/playground/rust-anneal-playground/ui/frontend/ButtonMenuItem.module.css

@@ -0,0 +1,8 @@
+.name {
+  composes: -menuItemTitle from './shared.module.css';
+  margin: 0;
+}
+
+.description {
+  margin: 0;
+}

anneal/v1/playground/rust-anneal-playground/ui/frontend/ButtonMenuItem.tsx

@@ -0,0 +1,23 @@
+import React, { type JSX } from 'react';
+
+import SimpleButtonMenuItem from './SimpleButtonMenuItem';
+
+import * as styles from './ButtonMenuItem.module.css';
+
+type Button = JSX.IntrinsicElements['button'];
+
+interface ButtonMenuItemProps extends Button {
+  children: React.ReactNode;
+  name: string;
+}
+
+const ButtonMenuItem: React.FC<ButtonMenuItemProps> = ({ name, children, ...props }) => (
+  <SimpleButtonMenuItem {...props}>
+    <div className={styles.name} data-test-id="button-menu-item__name">
+      {name}
+    </div>
+    <div className={styles.description}>{children}</div>
+  </SimpleButtonMenuItem>
+);
+
+export default ButtonMenuItem;