webpack-to-do-app

Sample "To Do" application powered by dna-dom and built with webpack

A) Setup

Build the project by running build.sh.command or by using the commands:

$ cd webpack-to-do-app
$ npm install
$ npm test
$ open docs/index.html

The build process creates a docs folder:

webpack-to-do-app/
   docs/
      bundle.js
      index.html

B) Online Example

Instead of running locally, you can check out this version:
dna-dom.github.io/webpack-to-do-app

C) Modules

webpack treats the dna-dom library as a module.  Use import statements in your application to pull in the library's JavaScript and CSS:

app.js

// Imports
import { dna } from 'dna-dom';
import '../css/app.css';

app.css

/* Imports */
@import "dna-dom/dna-dom.css";

Then use dna.registerContext(appName, appObject) to expose your application so its functions can be used as callbacks from web pages:

const myApp = {
   doSomething(elem) {
      console.info('myApp.doSomething() was called.');
      },
   };

dna.registerContext('myApp', myApp);  //give dna-dom access to your code

Now in the HTML you can wire up a button to call the function:

<button data-on-click=myApp.doSomething>Do Something</button>

See the example code in app.js.

Additional documentation:
dna-dom.org

---

MIT License