Reference replacement mistake

[th0r]

1. Make file app.js with the following code:

var el = document.getElementById('app');

2. Revision this script using gulp and the following task:

gulp.task('hash-app', () => {
    var RevAll = require('gulp-rev-all');
    var revAll = new RevAll();

    return gulp
        .src('app.js')
        .pipe(revAll.revision())
        .pipe(gulp.dest('.'));
});

3. As result app.c8c8c872.js file appears with the following content:

var app = document.getElementById('app.c8c8c872');

Seems like the plugin thinks that 'app' in document.getElementById('app') is a reference and replaces it.

[circlingthesun]

You can specify an annotator and replacer to resolve these issues. The annotator splits your files into subsections that can be annotated and the replacer does the reference replacement taking into account the annotations. See my comment near the bottom of #86 for an implementation.

[circlingthesun]

Also see https://github.com/smysnk/gulp-rev-all#annotater--replacer

[th0r]

@circlingthesun Is there any way to just say hey, don't be too clever and replace only filenames with extensions?

[circlingthesun]

Not without modifying the code. At the moment the regular expressions are used to find potential references and then they are reused to replace them. So what you need to do is modify the regular expression that is used to replace matched references so that the extension is included for .js files. Specifying this as the replacer should work:

var replacer = function(fragment, replaceRegExp, newReference, referencedFile){
    var regExp =  replaceRegExp;;

    if(referencedFile.path.match(/.js$/)){
       // Make the extension manditory
        var regExpParts = replaceRegExp.toString().split('/');
        var opts = regExpParts.pop();
        regExpParts.splice(0, 1); // Remove the leading slash
        var regexStr = regExpParts.join('\/').replace('(\\.js)?', '(\\.js)');
        regExp = new RegExp(regexStr, opts);   
    }
    fragment.contents = fragment.contents.replace(regExp, '$1' + newReference + '$3$4');
};

[th0r]

@circlingthesun Pain...but thanks

[circlingthesun]

Yeah, I've been meaning to write a better interface to this but I've not found the time.

[sixinli]

would love to have an easier way to only replace matches with file extension, but thanks for the example!

[dietrich-stein]

Great module! Also, 👍 for an extensions option.

[werts]

great extension at all, but what i have got a wrong replace,for i had adding annotator and replacer,it doesnt work exactly at all, inside annotator,i have added angular.module to identify a module within angular.

annotator: function(contents, path) {
                var moduleLoaderRegex = /(?:define|angular\.module|require|System\.register|System\.import)\s*\(\s*(?:(?:['"][^'"]*['"]\s?,\s?)?(?:\[[^\]]*|(?:function))|(?:['"][^'"]*['"]\s?))/g;
                var safeShortSubList = [];
                var result;

                while (result = moduleLoaderRegex.exec(contents)) {
                    if (!result) {
                        continue;
                    }
                    safeShortSubList.push(result[0]);
                }

some mistakes look like this:

"use strict";angular.module("app.18126505").controller("AppCtrl"

and the rest is the same with yours.

[cbfranca]

I'm with one similar problem and honestly i don't understand how can do that. (#177 )

[curiousercreative]

It's not obvious from the responses above, but the following disables this feature altogether it seems:

  RevAll.revision({
    replacer: function () {}
  })

@circlingthesun it seems this function would only operate on javascript files to start (no stylesheets) and it's a side-effects only function so this seems safe if we only want to rewrite the filenames in the filesystem but not our compiled code.

[Vojnuk]

I will mostly reference @circlingthesun code, as it pointed me in right direction.

Main problem is with regex that target extensionless js references, as we can see in Revisioner.js. Standard regExp works just fine with eg. var el = document.getElementById('app') code, meaning it doesnt change it.

    var isJSReference = reference.path.match(/\.js$/);

    // Extensionless javascript file references has to to be qouted
    if (isJSReference) {
      regExp =
        "(" + qoutes + ")(" + escapedRefPathBase + ")()(" + qoutes + "|$)";
      regExps.push(new RegExp(regExp, "g"));
    }

    // Expect left and right sides of the reference to be a non-filename type character, escape special regex chars
    regExp =
      "(" +
      nonFileNameChar +
      ")(" +
      escapedRefPathBase +
      ")(" +
      escapedRefPathExt +
      ")(" +
      nonFileNameChar +
      "|$)";
    regExps.push(new RegExp(regExp, "g"));

Now take a look at output, and see how isJSReference code block regexp is executed:

That regexp we need to change, making it similar to standard regexp:

                replacer: function (fragment, replaceRegExp, newReference, referencedFile) {
                    var regExp = replaceRegExp;

                    var regExpParts = replaceRegExp.toString().split("/");
                    var opts = regExpParts.pop();
                    regExpParts.splice(0, 1); // Remove the leading slash

                    // only important change to @circlingthesun code
                    // with it we change empty capture group in isJSReference code block, 
                    // adding js extension during search for replacement
                    var regexStr = regExpParts.join("/").replace(")()", ")(\\.js)");

                    regExp = new RegExp(regexStr, opts);
      
                    fragment.contents = fragment.contents.replace(
                        regExp,
                        "$1" + newReference + "$3$4"
                    );
                    console.log("replaceRegExp-NEW:", regExp);
                },

So best way would be to disable isJSReference code block regexp with some kind of option, i might do that with pr when i caught some time.