The Simple Framework

Javascript 
<tsf-example>
        <input tsf-value="this.counter" type="text"></input>
        <button tsf-bind-function-click="this.click">Counter++</button>
        <p tsf-html="'The counter is :' + this.counter"></p>
    </tsf-example>

    <script src="./the-simple-framework.js"></script>
    <script>
        TSFRepository.registerComponent(class Example extends TSFComponent {
            constructor () { 
                super(); 
                this.state.counter = 0;
            }

            click(e) {
                this.state.counter += 1;
            }
        });
    </script>
Result

Angular-like functionality without all the fuss

Download Zip View on Github

Create components using custom elements

<tsf-example></tsf-example>
<script>
    TSFRepository.registerComponent(class Example extends TSFComponent {
        constructor() {
            super();
        }
    });
</script>

One- and two-way bindings via state

constructor() {
    super();
    this.state.persons = [{
        name: "Roland Brice",
        age: 39,
        children: [
            "Namond"
        ]
    },
    {
        name: "William A. Rawls",
        age: 58,
        children: [
        ]
    }];
}

Wide range of functionalities via custom attributes

<tsf-example>
    <div tsf-for-of="person of this.persons">
    <div>
        <p>ID: <span tsf-html="local.person:index"></span></p>
        <p>Name: <span tsf-html="local.person.name"></span></p>
        <p tsf-html="'Age: ' + local.person.age"></p>
        <h3 tsf-if="local.person.children.length > 0">Children: </h5>
        <div tsf-for-of="child of local.person.children">
            <p tsf-html="local.child"></p>
        </div>
    </div>
</div>
<tsf/-example>

Check out the docs for detailed information.

Visit my Github or send me an email if you found bugs or miss a feature.