Ytils

What JsMrg can do for your JavaScript project

Minimize the pain of strings with HTML¹

Imagine you are writing a JavaScript library or component that will add more or less complex HTML (e.g. the Yupput dialogue) to the DOM.

You have different choices. The browser support for template strings looks okay, and yes, the Internet Explorer will turn into a Zombie pretty soon. Of course you can create dozens of lines of string concatenation. You may also have good reasons for dozens of document.createElement(); lines to achieve your goal.

All of these variants may justify their existence. JsMrg adds another choice.

¹ = Or any XML-alike external file content

Use .html files and assign them to your vars

You may have JavaScript code like this:

var foo = "foo";
var bar = "bar";
var html = "/**jsmrg htmlvar escdoublequotes htmlVar.html %d%foo %d%bar */";
                    

... and a HTML file named htmlVar.html like this:

<div class="someContainer">
  <div class="{{foo}}">{{bar}}</div>
</div>
                    

When running

where source.js addresses files via /** jsmrg (...) */ commands like shown above, you will receive a generated target.js like this:

var foo = "foo";
var bar = "bar";
var html = "<div class=\"someContainer\">  <div class=\"" + foo + "\">" + bar + "</div></div>";
                    

Merge (JavaScript) files

Combining files to a single one

It is possible to create a combined file from several. This is the simplest use case for the include function of JsMrg.

Assuming we want to combine three JavaScript files into one, we run JsMrg on, for example, the following file.

/**jsmrg include file1.js */
/**jsmrg include file2.js */
/**jsmrg include file3.js */

Injecting files

JsMrg allows you to merge other files into your working file. Let's have an example. Watch out for the /**jsmrg include (...) */ command.

(function(){

    "use strict";
    if (!window.YTILS) {

        /**jsmrg include NamespaceDeclaration.js */
    }

    Ytils.foo.bar = function(shoutOut) {

        alert(shoutOut);
    };
	
}());

The file NamespaceDeclaration.js may look like this:

window.Ytils = { };
YTILS.foo = { };

The JsMrg result will look like this:

(function(){

    "use strict";
    if (!window.Ytils) {

        window.Ytils = { };
        Ytils.foo = { };
    }

    Ytils.foo.bar = function(shoutOut) {

        alert(shoutOut);
    };
	
}());