Inheritance of HTML files in xslt-style

Problem

Once, in the course of rewriting a large project, it became necessary to improve the mechanism for customizing html templates for different versions of our web application. In the old version, customization looked like this:

{{if app.version==versions.main}} <!-- html --> {{else if app.version==versions.custom1}} <!-- html --> {{else if app.version==versions.custom2}} <!--  html --> {{endif}} 

And this noodle was permeated the entire project. Such code is difficult to maintain and change, with active use, templates turn into an incomprehensible mess, where the business logic of displaying individual blocks is intertwined with customization for different versions.

Accustomed to convenient application version control methods using dependency injection, when different interface implementations are used depending on the version, I decided to invent my bike for an XSLT-like version control html file: grunt-html-inheritance . It allows you to replace the pieces of the base html-file with small patches.

When rewriting the project, AngularJS was chosen as the framework, so the layout in the application is stored as a set of html files that are loaded if necessary, which made it easy to implement the system for assembling these files with customization for different versions of the application.
')

Example

Let's imagine that we have the following piece of layout in the HTML file “myfile.html”:

 <div> Blah blah blah <div>Main version</div> </div> 

And, as often happens in different versions of the application, it took us that in the version of "myversion" instead of one text "Main version" displayed another: "My version". To do this with html-inheritance, you need to do 2 simple steps:

1. Add attribute to attribute that starts with “bl-”:

 <div> Blah blah blah <div bl-mytag>Main version</div> </div> 

2. Create a file “myfile.myversion.html” with a patch to the parent file:

  <div bl-mytag="replace">Custom version</div> 

Everything! When building a project, all html files will be neatly added to the specified folder with a breakdown by version:

 dist
   |
   main /
      myfile.html
   myversion /
      myfile.html

Now it’s enough to tell your application where to load html files depending on the version, and everything will work by itself!

Installation

To add grunt-html-inheritance to your project, you need to install the npm module with the command

 npm install grunt-html-inheritance --save-dev 

or add a dependency to package.json, load the task in Gruntfile.js with the command

 grunt.loadNpmTasks('grunt-html-inheritance'); 

and configure the task as follows:

 grunt.initConfig({ html_inheritance: { main: { files: { src: "**.html" //   }, options: { modules: ["version1", "version2"], //  dstDir: "../dist", //,       }, }, }, }); 

In the AngularJS application, an important prerequisite for easy switching between versions of HTML files is to use a helper to build paths to template files instead of hard writing these paths in directives and routings.

Benefits

The most interesting advantage of such a customization system is that the basic version of the project can be used without compiling html files, since the bl-attributes do not prevent the browser from displaying the source file. Also, to use such a method, you do not need to learn the new syntax of any template engine; all logic is implemented using the usual html attributes familiar to each developer.

Using

In addition to replacing the base tag in the patch described in the example above, the following modes are also available:

1. Delete - delete in the patch of the parent element
2. Insertion - insertion of an element in the patch, whereas in the main version of the element will not be
3. Attribute Modification — Remove and add attributes to the parent element, remove and add classes.

Full documentation is available on the package page or in the github repository . The module is covered with tests and needs further improvement. I invite the community to help in development, send pull requests!