rename store to controller, update data flow section

README.md

@@ -351,8 +351,16 @@ however exclusively using custom DOM events.
   usually resulting in some parent component state change which is in turn
   propagated downwards through data events.
 
-The data store is factored into a separate behavior (`TodoStore`).
+The business logic is factored into a pure functional core
-It only receives and dispatches events and encapsulates all of the data logic.
+([TodoLogic.js](./public/scripts/TodoLogic.js)).
+This is a good idea in many UI architectures as it encapsulates
+state transitions in a portable, testable unit.
+
+The controller is factored into a separate behavior
+([TodoController.js](./public/scripts/TodoController.js)).
+It only receives and dispatches events,
+calling the business logic to apply changes and emit state.
+It also handles persistence in Local Storage.
 
 Listening to and dispatching events is slightly verbose with standard APIs and
 certainly justifies introducing helpers.
@@ -363,7 +371,8 @@ concisely with standard APIs.
 Reference:
 
 - [TodoDay.js](./public/scripts/TodoDay.js)
-- [TodoStore.js](./public/scripts/TodoStore.js)
+- [TodoController.js](./public/scripts/TodoController.js)
+- [TodoLogic.js](./public/scripts/TodoLogic.js)
 
 #### 3.2.3. Rendering
 

public/index.html

@@ -18,6 +18,7 @@
     <link rel="modulepreload" href="scripts/AppIcon.js" />
     <link rel="modulepreload" href="scripts/AppSortable.js" />
     <link rel="modulepreload" href="scripts/TodoApp.js" />
+    <link rel="modulepreload" href="scripts/TodoController.js" />
     <link rel="modulepreload" href="scripts/TodoCustomList.js" />
     <link rel="modulepreload" href="scripts/TodoDay.js" />
     <link rel="modulepreload" href="scripts/TodoFrameCustom.js" />
@@ -25,8 +26,9 @@
     <link rel="modulepreload" href="scripts/TodoItem.js" />
     <link rel="modulepreload" href="scripts/TodoItemInput.js" />
     <link rel="modulepreload" href="scripts/TodoList.js" />
-    <link rel="modulepreload" href="scripts/TodoStore.js" />
+    <link rel="modulepreload" href="scripts/TodoLogic.js" />
     <link rel="modulepreload" href="scripts/util.js" />
+    <link rel="modulepreload" href="scripts/uuid.js" />
 
     <link rel="stylesheet" href="styles/base.css" />
     <link rel="stylesheet" href="styles/app-button.css" />

public/scripts/TodoApp.js

@@ -2,10 +2,10 @@ import { AppCollapsible } from './AppCollapsible.js';
 import { AppFlip } from './AppFlip.js';
 import { AppFps } from './AppFps.js';
 import { AppIcon } from './AppIcon.js';
+import { TodoController } from './TodoController.js';
 import { TodoFrameCustom } from './TodoFrameCustom.js';
 import { TodoFrameDays } from './TodoFrameDays.js';
 import { TodoLogic } from './TodoLogic.js';
-import { TodoStore } from './TodoStore.js';
 
 /**
  * @param {HTMLElement} el
@@ -43,7 +43,7 @@ export function TodoApp(el) {
     removeTimeout: 200,
   });
 
-  TodoStore(el);
+  TodoController(el);
 
   el.querySelectorAll('.app-collapsible').forEach(AppCollapsible);
   el.querySelectorAll('.app-icon').forEach(AppIcon);
@@ -89,7 +89,7 @@ export function TodoApp(el) {
     });
   });
 
-  // Listen to the TodoStore's data.
+  // Listen to the TodoController's data.
   // This is the main update.
   // Everything else is related to drag & drop or FLIP animations.
   el.addEventListener('todoData', (e) => {
@@ -104,7 +104,7 @@ export function TodoApp(el) {
   el.addEventListener('draggableCancel', flip);
   el.addEventListener('draggableDrop', flip);
 
-  el.dispatchEvent(new CustomEvent('loadTodoStore'));
+  el.dispatchEvent(new CustomEvent('loadTodoData'));
 
   function update() {
     el.querySelectorAll('.todo-frame').forEach((el) =>

public/scripts/TodoController.js

@@ -3,11 +3,11 @@ import { TodoLogic } from './TodoLogic.js';
 /**
  * @param {HTMLElement} el
  */
-export function TodoStore(el) {
+export function TodoController(el) {
   let todoData = TodoLogic.initTodoData();
   let saveTimeout;
 
-  el.addEventListener('loadTodoStore', load);
+  el.addEventListener('loadTodoData', load);
 
   for (const action of [
     'addTodoItem',