Ytils JsMrg

Ytils JsMrg

Ytils JsMrg@GitHub

A CLI tool to empower the development of JavaScript libraries with a strong support for HTML containing strings.

Merge HTML or other JavaScript files into one bigger JavaScript file and enjoy working with HTML containing variables as simple as this:

var foo = "/**jsmrg htmlvar <file.html> */";

Merge (JavaScript) file contents into other files like this:

/**jsmrg include <file.js> */

What JsMrg can do for your JavaScript project

Minimize the pain of strings with HTML1

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.

1 = 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

dotnet application.jsmrg.ytils.com.dll ./source.js ./target.js

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

JsMrg allows you to merge other files into your working file. Let's have an example. Watch out for /**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);
    };
	
}());