TASK: refactor System reducer to use TypeScript

package.json

@@ -72,7 +72,6 @@
     "tslib": "^1.9.3",
     "tslint": "^5.11.0",
     "tslint-config-prettier": "^1.15.0",
-    "tslint-immutable": "^4.7.0",
     "tslint-react": "^3.6.0",
     "typescript": "^3.0.1",
     "watch": "^1.0.2",
@@ -111,6 +110,7 @@
     "hash-sum": "^1.0.2",
     "hashlru": "2.2.0",
     "he": "^1.1.1",
+    "immer": "^1.7.4",
     "immutable": "^3.8.0",
     "lodash.assign": "^4.2.0",
     "lodash.debounce": "^4.0.8",
@@ -126,8 +126,8 @@
     "lodash.omit": "^4.5.0",
     "lodash.sortby": "^4.7.0",
     "lodash.throttle": "^4.1.1",
-    "lodash.upperfirst": "^4.3.0",
     "lodash.unescape": "4.0.1",
+    "lodash.upperfirst": "^4.3.0",
     "moment": "^2.20.1",
     "monet": "^0.8.10",
     "mousetrap": "^1.6.1",
@@ -164,6 +164,7 @@
     "redux-saga": "^0.15.0",
     "regenerator": "^0.8.46",
     "reselect": "^3.0.1",
+    "typesafe-actions": "^2.0.4",
     "url-loader": "^1.0.1",
     "uuid": "^3.2.1",
     "whatwg-fetch": "^2.0.0"

packages/neos-ui-redux-store/src/System/index.js → packages/neos-ui-redux-store/src/System/index.ts

@@ -1,7 +1,7 @@
-import {createAction} from 'redux-actions';
-import {Map} from 'immutable';
-import {$set, $get} from 'plow-js';
 import {handleActions} from '@neos-project/utils-redux';
+import produce from 'immer';
+import {$get} from 'plow-js';
+import {createAction} from 'typesafe-actions';
 
 const BOOT = '@neos/neos-ui/System/BOOT';
 const INIT = '@neos/neos-ui/System/INIT';
@@ -13,15 +13,19 @@ const REAUTHENTICATION_SUCCEEDED = '@neos/neos-ui/System/REAUTHENTICATION_SUCCEE
 // Export the action types
 //
 export const actionTypes = {
+    AUTHENTICATION_TIMEOUT,
     BOOT,
     INIT,
     READY,
-    AUTHENTICATION_TIMEOUT,
     REAUTHENTICATION_SUCCEEDED
 };
 
+interface State {
+    readonly authenticationTimeout: boolean;
+}
+
 const boot = createAction(BOOT);
-const init = createAction(INIT, state => state);
+const init = createAction(INIT, resolve => (state: State) => resolve(state));
 const ready = createAction(READY);
 const authenticationTimeout = createAction(AUTHENTICATION_TIMEOUT);
 const reauthenticationSucceeded = createAction(REAUTHENTICATION_SUCCEEDED);
@@ -30,30 +34,31 @@ const reauthenticationSucceeded = createAction(REAUTHENTICATION_SUCCEEDED);
 // Export the actions
 //
 export const actions = {
+    authenticationTimeout,
     boot,
     init,
     ready,
-    authenticationTimeout,
     reauthenticationSucceeded
 };
 
 //
 // Export the reducer
 //
 export const reducer = handleActions({
-    [INIT]: () => $set(
-        'system',
-        new Map({
-            authenticationTimeout: false
-        })
-    ),
-    [AUTHENTICATION_TIMEOUT]: () => $set('system.authenticationTimeout', true),
-    [REAUTHENTICATION_SUCCEEDED]: () => $set('system.authenticationTimeout', false)
+    [INIT]: () => (): State => ({
+        authenticationTimeout: false
+    }),
+    [AUTHENTICATION_TIMEOUT]: () => (state: State) => produce(state, draft => {
+        draft.authenticationTimeout = true;
+    }),
+    [REAUTHENTICATION_SUCCEEDED]: () => (state: State) => produce(state, draft => {
+        draft.authenticationTimeout = false;
+    })
 });
 
 //
 // Export the selectors
 //
 export const selectors = {
-    authenticationTimeout: $get('system.authenticationTimeout')
+    authenticationTimeout: (state: any) => $get(['system'], state).authenticationTimeout
 };

packages/neos-ui-redux-store/src/index.js

@@ -7,9 +7,28 @@ import * as System from './System/index';
 import * as UI from './UI/index';
 import * as User from './User/index';
 import * as ServerFeedback from './ServerFeedback/index';
+import {$set, $get} from 'plow-js';
 
 const all = {Changes, CR, System, UI, User, ServerFeedback};
 
+// TODO: we'll get rid of untyped reducers soonish, this is just for transition period
+const untypedReducersSubparts = {Changes, CR, UI, User, ServerFeedback};
+const untypedReducers = map(k => untypedReducersSubparts[k].reducer, keys(untypedReducersSubparts));
+
+// We do something similar to `combineReducers` from redux here to pass a subpart of the state to a child reducer
+// Key in this object is the substate path, and the value is the reducer
+const typedReducersSubparts = {
+    system: System.reducer
+};
+const typedReducers = map(
+    k => (state, action) => $set(
+        k,
+        typedReducersSubparts[k]($get(k, state), action),
+        state
+    ),
+    keys(typedReducersSubparts)
+);
+
 //
 // Export the actionTypes
 //
@@ -23,7 +42,7 @@ export const actions = map(a => a.actions, all);
 //
 // Export the reducer
 //
-export const reducer = handleActions(map(k => all[k].reducer, keys(all)));
+export const reducer = handleActions([...untypedReducers, ...typedReducers]);
 
 //
 // Export the selectors

packages/neos-ui/src/plow.d.ts

@@ -0,0 +1,11 @@
+// Temporary Plow typings
+// TODO: move to Plow
+declare module 'plow-js' {
+    export function $get<K1 extends keyof S, S>(path: [K1], state: S): S[K1];
+    export function $get<K1 extends keyof S, K2 extends keyof S[K1], S>(path: [K1, K2], state: S): S[K1][K2];
+    export function $get<K1 extends keyof S, K2 extends keyof S[K1], K3 extends keyof S[K1][K2], S>(path: [K1, K2, K3], state: S): S[K1][K2][K3];
+
+    export function $set<K1 extends keyof S, V extends S[K1], S>(path: [K1], value: V, state: S): S;
+    export function $set<K1 extends keyof S, K2 extends keyof S[K1], V extends S[K1][K2], S>(path: [K1, K2], value: V, state: S): S;
+    export function $set<K1 extends keyof S, K2 extends keyof S[K1], K3 extends keyof S[K1][K2], V extends S[K1][K2][K3], S>(path: [K1, K2, K3], value: V, state: S): S;
+}

packages/utils-redux/src/index.d.ts

@@ -0,0 +1,3 @@
+declare module '@neos-project/utils-redux' {
+    export function handleActions<S>(handlers: Object): (state: S, action: string) => S;
+}

tslint.json

@@ -1,5 +1,5 @@
 {
-  "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier", "tslint-immutable"],
+  "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
   "rules": {
     "interface-name": false,
     "member-ordering": false,