Merge pull request #899 from integer32llc/ws-frontend

Author: shepmaster

tests/spec/spec_helper.rb

@@ -79,3 +79,15 @@
     "[data-test-id = '#{id_s}']"
   end
 end
+
+RSpec.configure do |config|
+  config.after(:example, :js) do
+    page.execute_script <<~JS
+      (() => {
+        if (window.rustPlayground) {
+           window.rustPlayground.disableSyncChangesToStorage();
+        }
+      })()
+    JS
+  end
+end

ui/frontend/Playground.tsx

@@ -87,12 +87,40 @@ const ResizableArea: React.FC = () => {
   );
 };
 
+
+const WebSocketStatus: React.FC = () => {
+  const enabled = useSelector(selectors.websocketFeatureFlagEnabled);
+  const status = useSelector(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 <div style={style}>⬤</div>;
+    case 'disconnected':
+      style.color = 'grey';
+      return <div style={style}>⬤</div>;
+    case 'error':
+      style.color = 'red';
+      return <div style={style} title={status.error}>⬤</div>;
+  }
+}
+
 const Playground: React.FC = () => {
   const showNotifications = useSelector(selectors.anyNotificationsToShowSelector);
 
   return (
     <>
       <div className={styles.container}>
+        <WebSocketStatus />
         <Header />
         <ResizableArea />
       </div>

ui/frontend/actions.ts

@@ -1,13 +1,14 @@
 import fetch from 'isomorphic-fetch';
 import { ThunkAction as ReduxThunkAction } from 'redux-thunk';
 import url, { UrlObject } from 'url';
+import { z } from 'zod';
 
 import {
   clippyRequestSelector,
   formatRequestSelector,
   getCrateType,
-  isAutoBuildSelector,
   runAsTest,
+  useWebsocketSelector,
 } from './selectors';
 import State from './state';
 import {
@@ -62,6 +63,7 @@ const createAction = <T extends string, P extends {}>(type: T, props?: P) => (
 
 export enum ActionType {
   InitializeApplication = 'INITIALIZE_APPLICATION',
+  DisableSyncChangesToStorage = 'DISABLE_SYNC_CHANGES_TO_STORAGE',
   SetPage = 'SET_PAGE',
   ChangeEditor = 'CHANGE_EDITOR',
   ChangeKeybinding = 'CHANGE_KEYBINDING',
@@ -127,10 +129,38 @@ export enum ActionType {
   NotificationSeen = 'NOTIFICATION_SEEN',
   BrowserWidthChanged = 'BROWSER_WIDTH_CHANGED',
   SplitRatioChanged = 'SPLIT_RATIO_CHANGED',
+  WebSocketError = 'WEBSOCKET_ERROR',
+  WebSocketConnected = 'WEBSOCKET_CONNECTED',
+  WebSocketDisconnected = 'WEBSOCKET_DISCONNECTED',
+  WebSocketFeatureFlagEnabled = 'WEBSOCKET_FEATURE_FLAG_ENABLED',
+  WSExecuteRequest = 'WS_EXECUTE_REQUEST',
+  WSExecuteResponse = 'WS_EXECUTE_RESPONSE',
 }
 
+export const WebSocketError = z.object({
+  type: z.literal(ActionType.WebSocketError),
+  error: z.string(),
+});
+export type WebSocketError = z.infer<typeof WebSocketError>;
+
+const ExecuteExtra = z.object({
+  sequenceNumber: z.number(),
+});
+type ExecuteExtra = z.infer<typeof ExecuteExtra>;
+
+export const WSExecuteResponse = z.object({
+  type: z.literal(ActionType.WSExecuteResponse),
+  success: z.boolean(),
+  stdout: z.string(),
+  stderr: z.string(),
+  extra: ExecuteExtra,
+});
+export type WSExecuteResponse = z.infer<typeof WSExecuteResponse>;
+
 export const initializeApplication = () => createAction(ActionType.InitializeApplication);
 
+export const disableSyncChangesToStorage = () => createAction(ActionType.DisableSyncChangesToStorage);
+
 const setPage = (page: Page) =>
   createAction(ActionType.SetPage, { page });
 
@@ -192,22 +222,14 @@ interface ExecuteResponseBody {
   stderr: string;
 }
 
-interface ExecuteSuccess extends ExecuteResponseBody {
-  isAutoBuild: boolean;
-}
-
 const requestExecute = () =>
   createAction(ActionType.ExecuteRequest);
 
-const receiveExecuteSuccess = ({ stdout, stderr, isAutoBuild }: ExecuteSuccess) =>
-  createAction(ActionType.ExecuteSucceeded, { stdout, stderr, isAutoBuild });
+const receiveExecuteSuccess = ({ stdout, stderr }: ExecuteResponseBody) =>
+  createAction(ActionType.ExecuteSucceeded, { stdout, stderr });
 
-const receiveExecuteFailure = ({
-  error, isAutoBuild,
-}: {
-  error?: string, isAutoBuild: boolean,
-}) =>
-  createAction(ActionType.ExecuteFailed, { error, isAutoBuild });
+const receiveExecuteFailure = ({ error }: { error?: string }) =>
+  createAction(ActionType.ExecuteFailed, { error });
 
 function jsonGet(urlObj: string | UrlObject) {
   const urlStr = url.format(urlObj);
@@ -281,18 +303,21 @@ interface ExecuteRequestBody {
 }
 
 const performCommonExecute = (crateType: string, tests: boolean): ThunkAction => (dispatch, getState) => {
-  dispatch(requestExecute());
-
   const state = getState();
   const { code, configuration: { channel, mode, edition } } = state;
   const backtrace = state.configuration.backtrace === Backtrace.Enabled;
-  const isAutoBuild = isAutoBuildSelector(state);
 
-  const body: ExecuteRequestBody = { channel, mode, edition, crateType, tests, code, backtrace };
+  if (useWebsocketSelector(state)) {
+    return dispatch(wsExecuteRequest(channel, mode, edition, crateType, tests, code, backtrace));
+  } else {
+    dispatch(requestExecute());
+
+    const body: ExecuteRequestBody = { channel, mode, edition, crateType, tests, code, backtrace };
 
-  return jsonPost<ExecuteResponseBody>(routes.execute, body)
-    .then(json => dispatch(receiveExecuteSuccess({ ...json, isAutoBuild })))
-    .catch(json => dispatch(receiveExecuteFailure({ ...json, isAutoBuild })));
+    return jsonPost<ExecuteResponseBody>(routes.execute, body)
+      .then(json => dispatch(receiveExecuteSuccess(json)))
+      .catch(json => dispatch(receiveExecuteFailure(json)));
+  }
 };
 
 function performAutoOnly(): ThunkAction {
@@ -473,6 +498,32 @@ const PRIMARY_ACTIONS: { [index in PrimaryAction]: () => ThunkAction } = {
   [PrimaryActionCore.Wasm]: performCompileToNightlyWasmOnly,
 };
 
+let sequenceNumber = 0;
+const nextSequenceNumber = () => sequenceNumber++;
+const makeExtra = (): ExecuteExtra => ({
+  sequenceNumber: nextSequenceNumber(),
+});
+
+const wsExecuteRequest = (
+  channel: Channel,
+  mode: Mode,
+  edition: Edition,
+  crateType: string,
+  tests: boolean,
+  code: string,
+  backtrace: boolean
+) =>
+  createAction(ActionType.WSExecuteRequest, {
+    channel,
+    mode,
+    edition,
+    crateType,
+    tests,
+    code,
+    backtrace,
+    extra: makeExtra(),
+  });
+
 export const performPrimaryAction = (): ThunkAction => (dispatch, getState) => {
   const state = getState();
   const primaryAction = PRIMARY_ACTIONS[state.configuration.primaryAction];
@@ -810,6 +861,11 @@ export const browserWidthChanged = (isSmall: boolean) =>
 export const splitRatioChanged = () =>
   createAction(ActionType.SplitRatioChanged);
 
+export const websocketError = (error: string): WebSocketError => createAction(ActionType.WebSocketError, { error });
+export const websocketConnected = () => createAction(ActionType.WebSocketConnected);
+export const websocketDisconnected = () => createAction(ActionType.WebSocketDisconnected);
+export const websocketFeatureFlagEnabled = () => createAction(ActionType.WebSocketFeatureFlagEnabled);
+
 function parseChannel(s?: string): Channel | null {
   switch (s) {
     case 'stable':
@@ -897,6 +953,7 @@ export function showExample(code: string): ThunkAction {
 
 export type Action =
   | ReturnType<typeof initializeApplication>
+  | ReturnType<typeof disableSyncChangesToStorage>
   | ReturnType<typeof setPage>
   | ReturnType<typeof changePairCharacters>
   | ReturnType<typeof changeAssemblyFlavor>
@@ -962,4 +1019,10 @@ export type Action =
   | ReturnType<typeof notificationSeen>
   | ReturnType<typeof browserWidthChanged>
   | ReturnType<typeof splitRatioChanged>
+  | ReturnType<typeof websocketError>
+  | ReturnType<typeof websocketConnected>
+  | ReturnType<typeof websocketDisconnected>
+  | ReturnType<typeof websocketFeatureFlagEnabled>
+  | ReturnType<typeof wsExecuteRequest>
+  | WSExecuteResponse
   ;

ui/frontend/configureStore.ts

@@ -8,9 +8,11 @@ import { Action, initializeApplication } from './actions';
 import initializeLocalStorage from './local_storage';
 import initializeSessionStorage from './session_storage';
 import playgroundApp, { State } from './reducers';
+import { websocketMiddleware } from './websocketMiddleware';
 
 export default function configureStore(window: Window) {
   const baseUrl = url.resolve(window.location.href, '/');
+  const websocket = websocketMiddleware(window);
 
   const initialGlobalState = {
     globalConfiguration: {
@@ -29,15 +31,25 @@ export default function configureStore(window: Window) {
     sessionStorage.initialState,
   );
 
-  const middlewares = applyMiddleware<ThunkDispatch<State, {}, Action>, {}>(thunk);
+  const middlewares = applyMiddleware<ThunkDispatch<State, {}, Action>, {}>(thunk, websocket);
   const composeEnhancers: typeof compose = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
   const enhancers = composeEnhancers(middlewares);
   const store = createStore(playgroundApp, initialState, enhancers);
 
   store.subscribe(() => {
     const state = store.getState();
-    localStorage.saveChanges(state);
-    sessionStorage.saveChanges(state);
+
+    // Some automated tests run fast enough that the following interleaving is possible:
+    //
+    // 1. RSpec test finishes, local/session storage cleared
+    // 2. WebSocket connects, the state updates, and the local/session storage is saved
+    // 3. Subsequent RSpec test starts and local/session storage has been preserved
+    //
+    // We allow the tests to stop saving to sidestep that.
+    if (state.globalConfiguration.syncChangesToStorage) {
+      localStorage.saveChanges(state);
+      sessionStorage.saveChanges(state);
+    }
   })
 
   return store;

ui/frontend/declarations.d.ts

@@ -20,6 +20,6 @@ interface Window {
   __REDUX_DEVTOOLS_EXTENSION_COMPOSE__: any;
   rustPlayground: {
     setCode(code: string): void;
-    webSocket: WebSocket | null;
+    disableSyncChangesToStorage(): void;
   };
 }

ui/frontend/index.tsx

@@ -10,6 +10,7 @@ import { Provider } from 'react-redux';
 
 import {
   editCode,
+  disableSyncChangesToStorage,
   enableFeatureGate,
   gotoPosition,
   selectText,
@@ -18,19 +19,21 @@ import {
   performVersionsLoad,
   reExecuteWithBacktrace,
   browserWidthChanged,
+  websocketFeatureFlagEnabled,
 } from './actions';
 import { configureRustErrors } from './highlighting';
 import PageSwitcher from './PageSwitcher';
 import playgroundApp from './reducers';
 import Router from './Router';
 import configureStore from './configureStore';
-import openWebSocket from './websocket';
-
-// openWebSocket() may return null.
-const socket = openWebSocket(window.location);
 
 const store = configureStore(window);
 
+const params = new URLSearchParams(window.location.search);
+if (params.has('websocket')) {
+  store.dispatch(websocketFeatureFlagEnabled());
+}
+
 const z = (evt: MediaQueryList | MediaQueryListEvent) => { store.dispatch(browserWidthChanged(evt.matches)); };
 
 const maxWidthMediaQuery = window.matchMedia('(max-width: 1600px)');
@@ -53,9 +56,9 @@ window.rustPlayground = {
   setCode: code => {
     store.dispatch(editCode(code));
   },
-  // Temporarily storing this as a global to prevent it from being
-  // garbage collected (at least by Safari).
-  webSocket: socket,
+  disableSyncChangesToStorage: () => {
+    store.dispatch(disableSyncChangesToStorage());
+  },
 };
 
 const container = document.getElementById('playground');

ui/frontend/package.json

@@ -29,7 +29,8 @@
     "reselect": "^4.0.0",
     "route-parser": "^0.0.5",
     "split-grid": "^1.0.9",
-    "url": "^0.11.0"
+    "url": "^0.11.0",
+    "zod": "^3.20.3"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0",

ui/frontend/reducers/globalConfiguration.ts

@@ -1,13 +1,21 @@
-import { Action } from '../actions';
+import { Action, ActionType } from '../actions';
 
 export interface State {
   baseUrl: string;
+  syncChangesToStorage: boolean;
 }
 
 const DEFAULT: State = {
   baseUrl: '',
+  syncChangesToStorage: true,
 };
 
-export default function globalConfiguration(state = DEFAULT, _action: Action): State {
-  return state;
+export default function globalConfiguration(state = DEFAULT, action: Action): State {
+  switch (action.type) {
+    case ActionType.DisableSyncChangesToStorage: {
+      return { ...state, syncChangesToStorage: false };
+    }
+    default:
+      return state;
+  }
 }

ui/frontend/reducers/index.ts

@@ -11,6 +11,7 @@ import page from './page';
 import position from './position';
 import selection from './selection';
 import versions from './versions';
+import websocket from './websocket';
 
 const playgroundApp = combineReducers({
   browser,
@@ -24,6 +25,7 @@ const playgroundApp = combineReducers({
   position,
   selection,
   versions,
+  websocket,
 });
 
 export type State = ReturnType<typeof playgroundApp>;