[State Management] State containers improvements

package.json

@@ -164,6 +164,7 @@
     "custom-event-polyfill": "^0.3.0",
     "d3": "3.5.17",
     "d3-cloud": "1.2.5",
+    "deep-freeze-strict": "^1.1.1",
     "deepmerge": "^4.2.2",
     "del": "^5.1.0",
     "elastic-apm-node": "^3.2.0",
@@ -313,6 +314,7 @@
     "@types/classnames": "^2.2.9",
     "@types/d3": "^3.5.43",
     "@types/dedent": "^0.7.0",
+    "@types/deep-freeze-strict": "^1.1.0",
     "@types/delete-empty": "^2.0.0",
     "@types/elasticsearch": "^5.0.33",
     "@types/enzyme": "^3.9.0",

renovate.json5

@@ -210,6 +210,14 @@
           '@types/dedent',
         ],
       },
+      {
+        groupSlug: 'deep-freeze-strict',
+        groupName: 'deep-freeze-strict related packages',
+        packageNames: [
+          'deep-freeze-strict',
+          '@types/deep-freeze-strict',
+        ],
+      },
       {
         groupSlug: 'delete-empty',
         groupName: 'delete-empty related packages',

src/plugins/kibana_utils/demos/state_containers/counter.ts

@@ -19,14 +19,24 @@
 
 import { createStateContainer } from '../../public/state_containers';
 
-const container = createStateContainer(0, {
-  increment: (cnt: number) => (by: number) => cnt + by,
-  double: (cnt: number) => () => cnt * 2,
-});
+interface State {
+  count: number;
+}
+
+const container = createStateContainer(
+  { count: 0 },
+  {
+    increment: (state: State) => (by: number) => ({ count: state.count + by }),
+    double: (state: State) => () => ({ count: state.count * 2 }),
+  },
+  {
+    count: (state: State) => () => state.count,
+  }
+);
 
 container.transitions.increment(5);
 container.transitions.double();
 
-console.log(container.get()); // eslint-disable-line
+console.log(container.selectors.count()); // eslint-disable-line
 
-export const result = container.get();
+export const result = container.selectors.count();

src/plugins/kibana_utils/demos/state_containers/todomvc.ts

@@ -25,15 +25,19 @@ export interface TodoItem {
   id: number;
 }
 
-export type TodoState = TodoItem[];
+export interface TodoState {
+  todos: TodoItem[];
+}
 
-export const defaultState: TodoState = [
-  {
-    id: 0,
-    text: 'Learning state containers',
-    completed: false,
-  },
-];
+export const defaultState: TodoState = {
+  todos: [
+    {
+      id: 0,
+      text: 'Learning state containers',
+      completed: false,
+    },
+  ],
+};
 
 export interface TodoActions {
   add: PureTransition<TodoState, [TodoItem]>;
@@ -44,17 +48,34 @@ export interface TodoActions {
   clearCompleted: PureTransition<TodoState, []>;
 }
 
+export interface TodosSelectors {
+  todos: (state: TodoState) => () => TodoItem[];
+  todo: (state: TodoState) => (id: number) => TodoItem | null;
+}
+
 export const pureTransitions: TodoActions = {
-  add: state => todo => [...state, todo],
-  edit: state => todo => state.map(item => (item.id === todo.id ? { ...item, ...todo } : item)),
-  delete: state => id => state.filter(item => item.id !== id),
-  complete: state => id =>
-    state.map(item => (item.id === id ? { ...item, completed: true } : item)),
-  completeAll: state => () => state.map(item => ({ ...item, completed: true })),
-  clearCompleted: state => () => state.filter(({ completed }) => !completed),
+  add: state => todo => ({ todos: [...state.todos, todo] }),
+  edit: state => todo => ({
+    todos: state.todos.map(item => (item.id === todo.id ? { ...item, ...todo } : item)),
+  }),
+  delete: state => id => ({ todos: state.todos.filter(item => item.id !== id) }),
+  complete: state => id => ({
+    todos: state.todos.map(item => (item.id === id ? { ...item, completed: true } : item)),
+  }),
+  completeAll: state => () => ({ todos: state.todos.map(item => ({ ...item, completed: true })) }),
+  clearCompleted: state => () => ({ todos: state.todos.filter(({ completed }) => !completed) }),
+};
+
+export const pureSelectors: TodosSelectors = {
+  todos: state => () => state.todos,
+  todo: state => id => state.todos.find(todo => todo.id === id) ?? null,
 };
 
-const container = createStateContainer<TodoState, TodoActions>(defaultState, pureTransitions);
+const container = createStateContainer<TodoState, TodoActions, TodosSelectors>(
+  defaultState,
+  pureTransitions,
+  pureSelectors
+);
 
 container.transitions.add({
   id: 1,
@@ -64,6 +85,6 @@ container.transitions.add({
 container.transitions.complete(0);
 container.transitions.complete(1);
 
-console.log(container.get()); // eslint-disable-line
+console.log(container.selectors.todos()); // eslint-disable-line
 
-export const result = container.get();
+export const result = container.selectors.todos();

src/plugins/kibana_utils/docs/state_containers/README.md

@@ -18,14 +18,21 @@ your services or apps.
 ```ts
 import { createStateContainer } from 'src/plugins/kibana_utils';
 
-const container = createStateContainer(0, {
-  increment: (cnt: number) => (by: number) => cnt + by,
-  double: (cnt: number) => () => cnt * 2,
-});
+const container = createStateContainer(
+  { count: 0 },
+  {
+    increment: (state: {count: number}) => (by: number) => ({ count: state.count + by }),
+    double: (state: {count: number}) => () => ({ count: state.count * 2 }),
+  },
+  {
+    count: (state: {count: number}) => () => state.count,
+  }
+);
 
 container.transitions.increment(5);
 container.transitions.double();
-console.log(container.get()); // 10
+
+console.log(container.selectors.count()); // 10
 ```
 
 

src/plugins/kibana_utils/docs/state_containers/creation.md

@@ -32,7 +32,7 @@ Create your a state container.
 ```ts
 import { createStateContainer } from 'src/plugins/kibana_utils';
 
-const container = createStateContainer<MyState>(defaultState, {});
+const container = createStateContainer<MyState>(defaultState);
 
 console.log(container.get());
 ```

src/plugins/kibana_utils/docs/state_containers/no_react.md

@@ -1,13 +1,13 @@
 # Consuming state in non-React setting
 
-To read the current `state` of the store use `.get()` method.
+To read the current `state` of the store use `.get()` method or `getState()` alias method.
 
 ```ts
-store.get();
+stateContainer.get();
 ```
 
 To listen for latest state changes use `.state$` observable.
 
 ```ts
-store.state$.subscribe(state => { ... });
+stateContainer.state$.subscribe(state => { ... });
 ```

src/plugins/kibana_utils/docs/state_containers/react.md

@@ -9,7 +9,7 @@
 ```ts
 import { createStateContainer, createStateContainerReactHelpers } from 'src/plugins/kibana_utils';
 
-const container = createStateContainer({}, {});
+const container = createStateContainer({});
 export const {
   Provider,
   Consumer,