Reorganize the code/selection/position into a map of files

This will allow us to have multiple files, such as a Cargo.toml.

Author: shepmaster

ui/frontend/local_storage.spec.ts

@@ -26,7 +26,7 @@ describe('restoring saved state', () => {
     });
 
     expect(parsed?.configuration?.orientation).toEqual('vertical');
-    expect(parsed?.code).toEqual('not default code');
+    expect(parsed?.files?.entries).toEqual('not default code');
     expect(parsed?.notifications?.seenRustSurvey2018).toBe(true);
   });
 

ui/frontend/local_storage.ts

@@ -3,7 +3,7 @@
 // playground.
 
 import State from './state';
-import {removeVersion, initializeStorage, PartialState} from './storage';
+import {moveCode, removeVersion, initializeStorage, PartialState, MovedCode} from './storage';
 import { AssemblyFlavor, DemangleAssembly, Editor, Orientation, PairCharacters, ProcessAssembly } from './types';
 import { codeSelector } from './selectors';
 
@@ -100,16 +100,22 @@ function migrate(state: V1Configuration | V2Configuration): CurrentConfiguration
   }
 }
 
+function rename(result: V2Configuration): MovedCode<V2Configuration> {
+  return moveCode(result);
+}
+
 export function deserialize(savedState: string): PartialState {
   if (!savedState) { return undefined; }
 
   const parsedState = JSON.parse(savedState);
   if (!parsedState) { return undefined; }
 
-  const result = migrate(parsedState);
-  if (!result) { return undefined; }
+  const migrated = migrate(parsedState);
+  if (!migrated) { return undefined; }
+
+  const renamed = rename(migrated);
 
-  return removeVersion(result);
+  return removeVersion(renamed);
 }
 
 export default initializeStorage({

ui/frontend/reducers/code.ts

@@ -0,0 +1,85 @@
+import { Action, ActionType } from '../actions';
+import { makePosition, Entries, File } from '../types';
+
+const DEFAULT_MAIN_RS = `fn main() {
+    println!("Hello, world!");
+}`;
+
+const makeFile = (code: string): File => ({
+  code,
+  position: makePosition(0, 0),
+  selection: {},
+  lastEdited: new Date(),
+});
+
+const SINGLE_FILE_FILENAME = 'playground.rs';
+
+export const makeState = (code: string): State => ({
+  current: SINGLE_FILE_FILENAME,
+  entries: { [SINGLE_FILE_FILENAME]: makeFile(code) },
+});
+
+const DEFAULT: State = makeState(DEFAULT_MAIN_RS);
+
+export type State = {
+  current: string;
+  entries: Entries;
+}
+
+const reduceSingleFile = (state: State, callback: (entry: File) => File) => {
+  let entries = state.entries;
+  const entry = callback(entries[SINGLE_FILE_FILENAME]);
+  entries = { ...entries, [SINGLE_FILE_FILENAME]: entry };
+  return { ...state, entries };
+};
+
+const reduceSingleFileCode = (state: State, callback: (code: string) => string) => {
+  return reduceSingleFile(state, (entry) => {
+    const code = callback(entry.code);
+    return { ...entry, code, lastEdited: new Date() };
+  });
+}
+
+export default function files(state = DEFAULT, action: Action): State {
+  switch (action.type) {
+    // These are actions for the one-file mode
+
+    case ActionType.RequestGistLoad:
+      return reduceSingleFileCode(state, () => '');
+
+    case ActionType.GistLoadSucceeded:
+      return reduceSingleFileCode(state, () => action.code);
+
+    case ActionType.EditCode:
+      return reduceSingleFileCode(state, () => action.code);
+
+    case ActionType.AddMainFunction:
+      return reduceSingleFileCode(state, code => `${code}\n\n${DEFAULT_MAIN_RS}`);
+
+    case ActionType.AddImport:
+      return reduceSingleFileCode(state, code => action.code + code);
+
+    case ActionType.EnableFeatureGate:
+      return reduceSingleFileCode(state, code => `#![feature(${action.featureGate})]\n${code}`);
+
+    case ActionType.FormatSucceeded:
+      return reduceSingleFileCode(state, () => action.code);
+
+    case ActionType.GotoPosition: {
+      const { line, column } = action;
+      return reduceSingleFile(state, entry => {
+        return {...entry, position: { line, column }};
+      });
+    }
+
+    case ActionType.SelectText: {
+      const { start, end } = action;
+      return reduceSingleFile(state, entry => {
+        return {...entry, selection: { start, end }};
+      });
+    }
+
+    default:
+      return state;
+  }
+}

ui/frontend/reducers/files.ts

@@ -1,29 +1,25 @@
 import { combineReducers } from 'redux';
 
 import browser from './browser';
-import code from './code';
 import configuration from './configuration';
 import crates from './crates';
+import files from './files';
 import globalConfiguration from './globalConfiguration';
 import notifications from './notifications';
 import output from './output';
 import page from './page';
-import position from './position';
-import selection from './selection';
 import versions from './versions';
 import websocket from './websocket';
 
 const playgroundApp = combineReducers({
   browser,
-  code,
   configuration,
   crates,
+  files,
   globalConfiguration,
   notifications,
   output,
   page,
-  position,
-  selection,
   versions,
   websocket,
 });

ui/frontend/reducers/index.ts

@@ -14,9 +14,17 @@ import {
   Version,
 } from '../types';
 
-export const codeSelector = (state: State) => state.code;
-export const positionSelector = (state: State) => state.position;
-export const selectionSelector = (state: State) => state.selection;
+const currentEntryNameSelector = (state: State) => state.files.current;
+const entriesSelector = (state: State) => state.files.entries;
+
+const currentEntrySelector = createSelector(
+  currentEntryNameSelector,
+  entriesSelector,
+  (name, entries) => ({ ...entries[name], name }));
+
+export const codeSelector = createSelector(currentEntrySelector, entry => entry.code);
+export const positionSelector = createSelector(currentEntrySelector, entry => entry.position);
+export const selectionSelector = createSelector(currentEntrySelector, entry => entry.selection);
 
 const HAS_TESTS_RE = /^\s*#\s*\[\s*test\s*([^"]*)]/m;
 export const hasTestsSelector = createSelector(codeSelector, code => !!code.match(HAS_TESTS_RE));

ui/frontend/reducers/position.ts

@@ -3,21 +3,36 @@
 // when we reopen a closed tab.
 
 import { State } from './reducers';
-import {removeVersion, initializeStorage, PartialState} from './storage';
+import {moveCode, removeVersion, initializeStorage, PartialState, MovedCode} from './storage';
 import { codeSelector } from './selectors';
+import { PrimaryAction } from './types';
 
 const CURRENT_VERSION = 1;
 
+interface V1Configuration {
+  version: 1;
+  configuration: {
+    primaryAction: PrimaryAction,
+  };
+  code: string;
+}
+
+type CurrentConfiguration = V1Configuration;
+
 export function serialize(state: State): string {
   const code = codeSelector(state);
-
-  return JSON.stringify({
+  const conf: CurrentConfiguration = {
     version: CURRENT_VERSION,
     configuration: {
       primaryAction: state.configuration.primaryAction,
     },
     code,
-  });
+  };
+  return JSON.stringify(conf);
+}
+
+function rename(result: V1Configuration): MovedCode<V1Configuration> {
+  return moveCode(result);
 }
 
 export function deserialize(savedState: string): PartialState {
@@ -28,11 +43,9 @@ export function deserialize(savedState: string): PartialState {
 
   if (parsedState.version !== CURRENT_VERSION) { return undefined; }
 
-  // This assumes that the keys we serialize with match the keys in the
-  // live state. If that's no longer true, an additional renaming step
-  // needs to be added.
+  const renamed = rename(parsedState);
 
-  return removeVersion(parsedState);
+  return removeVersion(renamed);
 }
 
 export default initializeStorage({

ui/frontend/reducers/selection.ts

@@ -1,6 +1,7 @@
 import { DeepPartial } from 'ts-essentials';
 
 import State from './state';
+import { makeState } from './reducers/files';
 
 type SimpleStorage = Pick<Storage, 'getItem' | 'setItem'>;
 
@@ -19,6 +20,19 @@ interface InitializedStorage {
   saveChanges: (state: State) => void;
 }
 
+type FileStateSlice = Pick<State, 'files'>;
+export type MovedCode<T> = Omit<T, 'code'> & FileStateSlice;
+
+export function moveCode<T extends { code: string }>(data: T): MovedCode<T> {
+  const code = data.code;
+
+  const munged: Record<string, unknown> = {...data};
+  delete munged.code;
+  const removed = munged as Omit<T, 'code'>;
+
+  return { ...removed, files: makeState(code) };
+}
+
 export function removeVersion<T extends { version: unknown }>(data: T): Omit<T, 'version'> {
   const munged: Record<string, unknown> = {...data};
   delete munged.version;

ui/frontend/selectors/index.ts

@@ -13,6 +13,16 @@ export interface Selection {
   end?: Position;
 }
 
+export interface File {
+  code: string;
+  position: Position;
+  selection: Selection;
+  lastEdited: Date;
+  lastSaved?: Date;
+}
+
+export type Entries = { [k: string]: File };
+
 export interface Crate {
   id: string;
   name: string;