Any tools available for auto syncing the .js files

Question

I'm working on themeing/skining of website using Absurd.js. I have theme data stored in data1.js, data2.js, data3.js and so on which passes data to the controller.js file. Changing the variable values affects the entire site with the values. Moreover we are using MultiTenant platform, where controller is one common file and data is dependent on instance of main branch. Each instance is for each client and have their own skinning (skin comes from data file).

Challenge I'm facing is, if I add a new parameter to one data file, I have to update/add all the data.js file with that parameter. Add it to the function call and as well update my contoller.js file to receive that new parameter. Its becoming tedious.

Question: Is there any tool out there to help with the file synchronization

To be more clear here is the sample file

data1.js
========

var primaryThemeColor = "#343344";

/* Primary Button Theme Colors*/
var primaryBtnBgColor = "#1A7483";
var primaryBtnBgHoverColor = "#0e233b";
var primaryBtnBorderColor = "#0093D2";
var primaryBtnFontColor = "#1A3567";
var primaryBtnFontHoverColor = "#D1ECF2";
skinComponent(primaryThemeColor, 
        primaryBtnBgColor,
        primaryBtnBgHoverColor,
        primaryBtnBorderColor,
        primaryBtnFontColor,
        primaryBtnFontHoverColor);

data2.js

var primaryThemeColor = "#413098";

/* Primary Button Theme Colors*/
var primaryBtnBgColor = "#38471A";
var primaryBtnBgHoverColor = "#b332e0";
var primaryBtnBorderColor = "#2d3300";
var primaryBtnFontColor = "#671A33";
var primaryBtnFontHoverColor = "#D3D3D3";
skinComponent(primaryThemeColor, 
        primaryBtnBgColor,
        primaryBtnBgHoverColor,
        primaryBtnBorderColor,
        primaryBtnFontColor,
        primaryBtnFontHoverColor);

data3.js, data4.js and so on... Here is my controller file

contoller.js
============
constructor: function(primaryThemeColor, 
        primaryBtnBgColor,
        primaryBtnBgHoverColor,
        primaryBtnBorderColor, 
        primaryBtnFontColor,
        primaryBtnFontHoverColor){
        this.primaryThemeColor = primaryThemeColor;
        this.primaryBtnBgColor = primaryBtnBgColor;
        this.primaryBtnBgHoverColor = primaryBtnBgHoverColor;
        this.primaryBtnBorderColor = primaryBtnBorderColor;
        this.primaryBtnFontColor = primaryBtnFontColor;
        this.primaryBtnFontHoverColor = primaryBtnFontHoverColor;
});

Answer 1

You could do something like this. Although I feel like this is ill suited for a large amount of variations... I would imagine serving them with a persistant storage solution with a DB would be the best if these became too numerous.

var primaryThemeColor           = ['#343344','#413098','#FFFFFF'];

/* Primary Button Theme Colors*/
var primaryBtnBgColor           = ['#38471A','#38471A','#FFFFFF'];
var primaryBtnBgHoverColor      = ['#0e233b','#b332e0','#FFFFFF'];

//...

var choice = 1; //or 0 or 2

//...
constructor: function(primaryThemeColor[choice], 
        primaryBtnBgColor[choice],
        primaryBtnBgHoverColor[choice],

Answer 2

Merging the "controller" and "skinning" into one js object would enable you to implement that object across multiple js files where you could change the properties. This would provide a more reusable piece of code than what you have currently.

Since you're using jQuery, consider using a jQuery extension/widget so you can make use of the library's selectors. You could certainly do this with pure javascript as well.

Here's an example of a jQuery extension:

/// START PLUGIN:
(function($) {

  $.fn.skinnify = function(options) {

    // default settings
    // data1
    var defaults = {
      primaryThemeColor: "#343344",
      primaryBtnBgColor: "#1A7483",
      primaryBtnBgHoverColor: "#0e233b",
      primaryBtnBorderColor: "#0093D2",
      primaryBtnFontColor: "#1A3567",
      primaryBtnFontHoverColor: "#D1ECF2"
    };

    // extend the settings to include "options"
    var settings = $.extend({}, defaults, options);

    return this.each(function() {
      // you'd need to do all of them...
      $(this).css({
        "background-color": settings.primaryBtnBgColor,
        "border-color:": settings.primaryBtnBorderColor,
        "color": settings.primaryBtnBorderColor
      });

      // hover is interesting...
      $(this).on('hover', function() {
        $(this).css({
          "color": settings.primaryBtnFontHoverColor,
          "cursor": "pointer",
        });
      });

    });

  };

}(jQuery));
/// END PLUGIN



// DATA.js
// can be called like this in any file and defaults apply:
$('#foo').skinnify();


// or you can set up your a settings object in a new file and then run the extension
// just make sure you load the skinning js file first!
var data2 = {
  primaryThemeColor: "#413098",
  primaryBtnBgColor: "#38471A",
  primaryBtnBgHoverColor: "#b332e0",
  primaryBtnBorderColor: "#2d3300",
  primaryBtnFontColor: "#671A33",
  primaryBtnFontHoverColor: "#D3D3D3",
}

// new settings
$('#bar').skinnify(data2);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="foo">Button foo</div>
<div id="bar">Button bar</div>