garciaguimeras/TypeScriptTools

TypeScriptTools (TST)

Are you

• Fan of TypeScript?
• Bored of using jQuery on your web apps?
• Thinking that jQuery programming generates confusing and hard to maintain code?
• Needing/Wanting not to use Angular or React?

Ok, you can use glue!!

glue Controllers

Suppose you need to manage a web page fragment like that:

<div id="person-form">
    Write your name:
    <input type="text" id="person-name" />
    <button id="accept-button">Accept</button>
</div>

Using glue, you could write some code like that:

@Controller('person-form')
class PersonFormController {

    @Outlet('person-name')
    personName: Element;

    @Action('accept-button', 'click')
    onAcceptButtonClick() {
        let name = personName.getAttribute('value');
        console.log('Person name is ' + name);
    }

}

You can add some jQuery flavour to your code, including glue-jquery:

@Controller('person-form')
class PersonFormController {

    @JQueryOutlet()
    @Outlet('person-name')
    personName: JQuery;

    @Action('accept-button', 'click')
    onAcceptButtonClick() {
        let name = personName.val();
        console.log('Person name is ' + name);
    }

}

Do you need to use another controller's instance on your code?

@Controller('foo')
class FooController {
    ...
}

@Controller('bar')
class BarController {
    ...
    @Inject('foo')
    foo: FooController;
    ...
}

And if you need to capture the on-load event?

@Controller('foo')
class FooController {
    ...
    @LoadMethod()
    didLoad() {
        ...
    }
    ...
}

glue Templates

You can create a controller template using TSX, including the react-jsx-polyfill:

let template: Element = (
    <div>
        Write your name:
        <input type="text" id="person-name" />
        <button id="accept-button">Accept</button>
    </div>
)

@Template(template)
class PersonFormTemplate {

    @Outlet('person-name')
    personName: Element;

    someData: string;

    @Action('accept-button', 'click')
    onAcceptButtonClick() {
        let name = personName.getAttribute('value');
        console.log('Person name is ' + name);
    }

}

Inject it dynamically into the DOM using glue-methods:

GlueMethods.templateToController(parentController, PersonFormTemplate, 'person-form', 'parent-div');

or

GlueMethods.templateToController('parent-controller-id', PersonFormTemplate, 'person-form', 'parent-div');

or even injecting it somo initialization data

var params = {  
    someData: 'some value'    
}
GlueMethods.templateToController(parentController, PersonFormTemplate, 'person-form', 'parent-div', params);

and remove the controller dynamically from DOM:

GlueMethods.removeController('person-form');

Using glue with require.js

Include require.js on your web page:

<script src="require.js" data-main="require-main"></script>

In your main script, write something like that:

var requirements = ['glue', 'my-controller'];
require(requirements, function (glue) {
    glue.$glue.bootstrap();
});