Updated Webpack and switched to ts-loader to fix issue #10

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

package.json

@@ -7,8 +7,11 @@
   },
   "devDependencies": {
     "awesome-typescript-loader": "3.2.3",
+    "ts-loader": "^4.4.1",
     "typescript": "2.5.3",
-    "webpack": "2.2.0",
-    "webpack-dev-server": "2.2.0"
+    "webpack": "4.12.0",
+    "webpack-cli": "^3.0.8",
+    "webpack-command": "^0.2.1",
+    "webpack-dev-server": "3.1.4"
   }
 }

src/app.ts

@@ -1,27 +1,48 @@
-import { renderTodos } from './utils';
+import * as fromStore from "./store";
 
-const input = document.querySelector('input') as HTMLInputElement;
-const button = document.querySelector('button') as HTMLButtonElement;
-const destroy = document.querySelector('.unsubscribe') as HTMLButtonElement;
-const todoList = document.querySelector('.todos') as HTMLLIElement;
+import { renderTodos } from "./utils";
+
+const input = document.querySelector("input") as HTMLInputElement;
+const button = document.querySelector("button") as HTMLButtonElement;
+const destroy = document.querySelector(".unsubscribe") as HTMLButtonElement;
+const todoList = document.querySelector(".todos") as HTMLLIElement;
+
+const reducers = {
+  todos: fromStore.reducer
+};
+
+const store = new fromStore.Store(reducers);
+
+console.log(store);
 
 button.addEventListener(
-  'click',
+  "click",
   () => {
     if (!input.value.trim()) return;
 
     const payload = { label: input.value, complete: false };
 
-    console.log(payload);
+    store.dispatch({
+      type: "ADD_TODO",
+      payload
+    });
 
-    input.value = '';
+    console.log(store.value);
+
+    input.value = "";
   },
   false
 );
 
-todoList.addEventListener('click', function(event) {
+store.subscribe(state => {
+  renderTodos(state.todos.data);
+});
+
+todoList.addEventListener("click", function(event) {
   const target = event.target as HTMLButtonElement;
-  if (target.nodeName.toLowerCase() === 'button') {
+  if (target.nodeName.toLowerCase() === "button") {
     console.log(target);
   }
 });
+
+store.subscribe(state => console.log('STATE:::', state));

src/store/index.ts

@@ -0,0 +1,2 @@
+export * from './store';
+export * from './reducers';

src/store/reducers.ts

@@ -0,0 +1,22 @@
+export const initialState = {
+  loaded: false,
+  loading: false,
+  data: [{ label: "Eat pizza", complete: false }]
+};
+
+export function reducer(
+  state = initialState,
+  action: { type: string; payload: any }
+) {
+  switch (action.type) {
+    case "ADD_TODO": {
+      const todo = action.payload;
+      const data = [...state.data, todo];
+      return {
+        ...state,
+        data
+      };
+    }
+  }
+  return state;
+}

src/store/store.ts

@@ -0,0 +1,37 @@
+export class Store {
+  private subscribers: Function[];
+  private reducers: { [key: string]: Function };
+  private state: { [key: string]: any };
+
+  constructor(reducers = {}, initialState = {}) {
+    this.subscribers = [];
+    this.reducers = reducers;
+    this.state = initialState;
+  }
+
+  get value() {
+    return this.state;
+  }
+
+  subscribe(fn) {
+    this.subscribers = [...this.subscribers, fn];
+    this.notify();
+  }
+
+  dispatch(action) {
+    this.state = this.reduce(this.state, action);
+    this.notify();
+  }
+
+  private notify() {
+    this.subscribers.forEach(fn => fn(this.value));
+  }
+
+  private reduce(state, action) {
+    const newState = {};
+    for (const prop in this.reducers) {
+      newState[prop] = this.reducers[prop](state[prop], action);
+    }
+    return newState;
+  }
+}

tsconfig.json

@@ -6,7 +6,7 @@
     "outDir": "dist",
     "noEmitOnError": true,
     "strictNullChecks": true,
-    "sourceMap": false,
+    "sourceMap": true,
     "experimentalDecorators": true
   }
 }

webpack.config.js

@@ -1,5 +1,7 @@
 module.exports = {
+  mode: "development",
   entry: './src/app.ts',
+  devtool: 'inline-source-map',
   output: {
     filename: 'app.js',
     path: __dirname + '/dist/',
@@ -14,7 +16,8 @@ module.exports = {
     rules: [
       {
         test: /\.ts$/,
-        use: 'awesome-typescript-loader',
+        use: 'ts-loader',
+        exclude: /node_modules/
       },
     ],
   },