Welder

Welder is an extension to jQuery that adds reactivity to UIs. It does not contain jQuery!

The API

With jQuery, you can call a few easy methods to add reactive text.

In welder, any text surrounded by {} will be treated as a variable (like template string interpolation). Any time the variable is changed, the UI will update.

.weldText and .weldHTML

The weldText and weldHTML methods act like the regular jQuery text and html methods, but enhanced with Welder. They both take a inital set of values, and (instead of returning a jQuery object) return a Welder object. This can be better visualized by an example:

let weld = $('#myElement').weldText('Hello {name}', {name: 'John'});
console.log($('#myElement').text()); // "Hello John"

Then you can change the variable without calling any functions to update the UI!

weld.name = 'Everyone';
console.log($('#myElement').text()); // "Hello Everyone"

.weld

The weld method does not replace the content of the given elements, and instead welds them in-place. For example:

<html>
	<body>
		<p id="myElement">Hey {name}, how are you?</p>
	</body>
</html>

let weld = $('#myElement').weld({name: 'John'});
weld.name = 'Everyone';

GitHub

View Github