Vanillin (preview)

Vanillin is a JavaScript DOM user interface library.

Try it out at the playground.

Installing

For the latest stable version:

npm install vanillinjs

For dev builds:

npm install vanillinjs@dev

Using Vanillin

1. With including global library:

   index.html:

   <button onclick="onclick()">Click</button>
   <script src="node_modules/vanillinjs/vanillin.bundle.js"></script> <!-- Or any other bundle location -->
   <script>
     vanillin.bindDOM(document.querySelector("button"), console.log, console.error, {
       onclick() {
         console.log("clicked");
       }
     });
   </script>

2. With webpack:

   $ npm install webpack webpack-cli

   index.js:

   import { bindDOM } from "vanillinjs/vanillin-0";
   bindDOM(document.querySelector("button"), console.log, console.error, {
     onclick() {
       console.log("clicked");
     }
   });

   or

   import vanillin from "vanillinjs";
   vanillin.bindDOM(document.querySelector("button"), console.log, console.error, {
     onclick() {
       console.log("clicked");
     }
   });

   Build with webpack.config.js:

   const path = require("path");
   
   module.exports = {
     entry: "./index.js",
     output: {
       path: path.resolve(__dirname),
       filename: "bundle.js"
     }
   };

   run:

   $ webpack

   and run index.html page:

   <button onclick="onclick()">Click</button>
   <script src="bundle.js"></script>

Documentation

Available at docs page and on GitHub repository.

Development

For development repository installation use following:

git clone git@github.com:metaes/vanillin.git
cd vanillin
npm install

Contribution

Use GitHub issues or pull requests.

License

MIT.