A lightweight front-end framework that provides two-way binding, repeating templates and UI navigation
The library consists of 3 constructors that each provides one of the above mentioned features; Binder, Repeater, and Navigator. You set instructions straight on HTML elements in the DOM via attributes like 'xxx-bind', then create instances of the classes to consume and execute those actions. Elements are linked to instances via a "target class" which can be added to any elements classList at any time. The classes work together or alone.
Install the npm package: npm -i xxx-framework
.
Optionally you can add dev dependencies if you want to run examples in the browser: npm -i xxx-framework --save-dev
.
To load the framework in the browser you have 2 options:
a) Include the bundled version directly in the browser as you would any script, you will then be able to access it on window.xxx
, but you'll get an error until you've loaded the dependencies, as so:
<script src="path/to/xxx/dist/xxx.js" type="text/javascript"></script>
<script type="text/javascript">
try{
new window.xxx.Binder('foo');
}catch(err){
console.error(err); // E_DEPENDENCY
};
</script>
<script src="path/to/libbetter/dist/libbetter.js" type="text/javascript"></script>
<script src="path/to/smarties/smarties.js" type="text/javascript"></script>
<script type="text/javascript">
console.log(window.xxx); // {Binder: ƒ, Repeater: ƒ, Navigator: ƒ}
</script>
b) Require the package into another script, initialize it with it's dependencies, then bundle that.
var libbetter=require('libbetter');
var Smarties=require('libbetter');
var xxx=require('xxx-framework')(Object.assign({},libbetter,Smarties));
console.log(xxx); // {Binder: ƒ, Repeater: ƒ, Navigator: ƒ}
<script src="path/to/xxx/dist/xxx.js" type="text/javascript">
If you've installed dev dependencies you can npm run dev
and go to http://localhost:8080
to see them in action, else you'll have to check out the code.