Launch todo.setup() from app for clarity

README.md

@@ -28,18 +28,22 @@ Use `import` statements in your application to pull in the library's CSS and Jav
 // Imports
 import 'dna-engine/dist/dna-engine.css';
 import 'dna-engine';
-
-// Initialization
-const dna = globalThis.dna.initGlobal(window);
 ```
 
 Then use `dna.registerContext(appName, appObject)` to expose your application so its functions can
 be used as callbacks from web pages:
 ```javascript
 const myApp = {
-   doSomething() { ... }
+   doSomething(elem) {
+      console.log('myApp.doSomething() was called.');
+      },
    };
-dna.registerContext('myApp', myApp);
+
+dna.registerContext('myApp', myApp);  //give dna-engine access to your code
+```
+Now in the HTML you can wire up a button to call the function:
+```html
+<button data-on-click=myApp.doSomething>Do Something</button>
 ```
 
 See the example code in [app.js](src/js/app.js).

package.json

@@ -56,7 +56,7 @@
       "rimraf": "~5.0",
       "run-scripts-util": "~1.2",
       "style-loader": "~3.3",
-      "webpack": "~5.88",
+      "webpack": "~5.89",
       "webpack-cli": "~5.1"
    }
 }

src/index.html

@@ -11,7 +11,7 @@
       <header>
          <h1>To Do List</h1>
       </header>
-      <main data-on-load=todo.setup>
+      <main>
          <input type=text id=task-title data-on-enter-key=todo.add autofocus>
          <button data-on-click=todo.add>Add Task</button>
          <div class=tasks>

src/js/app.js

@@ -15,6 +15,7 @@ const todo = {
          done:  false,
          };
       dna.clone('task', task, { fade: true });
+      console.log(dna.getModels('task'));  //display array of tasks in the js console
       },
 
    setup() {
@@ -31,5 +32,5 @@ const todo = {
    };
 
 // Initialization
-dna.initGlobal(window);
 dna.registerContext('todo', todo);  //expose application functions to be callbacks from web page
+dna.dom.onReady(todo.setup);