Data object overwritten

[ugomeda]

I'm using gulp-twig as follows (simplified) :

    return gulp.src("src/twig/*.twig")
        .pipe($.twig({
          data: {"foo": "bar"},
        }))
        .pipe(gulp.dest("dst/"));

And y have 3 templates :

{# layout.twig #}
{% if title is defined %}{{ title }}{% else %}Default title{% endif %}

{# challenge.twig #}
{% set title = "Challenge !" %}

{# home.twig #}

The output of challenge.twig is correct, but home.twig outputs Challenge !

---

I tried debugging using this :

    var data = {"foo": "bar"};
    return gulp.src("src/twig/*.twig")
        .pipe($.twig({
          data: data,
        }))
        .pipe(through.obj(function(file, encoding, callback) {
          console.log(data);
        }))
        .pipe(gulp.dest("dst/"));

And it shows that the data object is modified with the variables of my template and then shared between the twig files :

{ foo: 'bar',
  _file: <File "home.html" <Buffer 3c 21 44 4f 43 54 59 50 45 20 68 74 6d 6c 3e 0a 3c 68 74 6d 6c 20 6c 61 6e 67 3d 22 65 6e 22 3e 0a 3c 68 65 61 64 3e 0a 20 20 20 20 3c 6d 65 74 61 20 63 ...>>,
  _target: 
   { path: '/home/me/projects/teaser-2016/src/home.html',
     relative: 'home.html' },
  title: 'Challenge !',
}

[kluplau]

Did you get around this by any chance? I filed #22 which I think might be somehow related.

[ugomeda]

I just added {% set title = null %} on the pages without title as a workaround.

[simon-dt]

I'll have to look into this. Are you seeing the initial data object being mutaded by the twig templates themself?

That should not happen ...

Are you excluding the layout.twig from the src?

[jordanlev]

I'm experiencing the same issue, and I think I have a workaround (until the bug is fixed). If you use gulp-foreach to compile each template in a separate process, it seems to fix the problem of variables "leaking" between templates. However, note that if you are also providing the 'data' option when you call gulp-twig, you must also copy/clone the object that you provide (otherwise the data continues to "leak" between templates, even if you're compiling them separately via gulp-foreach).

For example, before I had this in my gulpfile:

var gulp = require('gulp');
var twig = require('gulp-twig');

var data = {
  'something' : 123,
  'anotherThing': 'hello world'
};

gulp.task('twig', function() {
  gulp.src('/path/to/my/templates/**/*.twig')
    .pipe(twig({
      base: '/path/to/my/templates',
      data: data
    }))
    .pipe(gulp.dest('/my/output/path'));
});

...so I changed it to this (note that I'm using gulp-foreach and cloning the data object):

var gulp = require('gulp');
var twig = require('gulp-twig');
var foreach = require('gulp-foreach');

var data = {
  'something' : 123,
  'anotherThing': 'hello world'
};

gulp.task('twig', function() {
  gulp.src('/path/to/my/templates/**/*.twig')
    .pipe(foreach(function(stream, file) {
      return stream.pipe(twig({
        base: '/path/to/my/templates',
        data: JSON.parse(JSON.stringify(data))
      }));
    }))
    .pipe(gulp.dest('/my/output/path'));
});

I'm honestly not sure how/why exactly this works, but so far it seems to do the trick for me.

[derekrushforth]

Any progress on this? I'm running into the same issue.

[olets]

You can use gulp-data for reliable handling of your JSON:

var gulp = require('gulp'),
    data = require('gulp-data'),
    foreach = require('gulp-foreach'),
    twig = require('gulp-twig');

// with data as a variable
var myData = {
    foo: 'bar',
    baz: 'qux'
}
gulp.task('twigWithExternalData', function() {
    return gulp.src('./src/**/*.twig')
        .pipe(data(myData))
        .pipe(foreach(function(stream, file) {
            return stream
                .pipe(twig())
        }))
        .pipe(gulp.dest('./dest/'));
});

// with data included directly
gulp.task('twigWithInternalData', function() {
    return gulp.src('./src/**/*.twig')
        .pipe(data({
            foo: 'bar',
            baz: 'qux'
        }))
        .pipe(foreach(function(stream, file) {
            return stream
                .pipe(twig())
        }))
        .pipe(gulp.dest('./dest/'));
});