adding twig template as include doesn't show correct output

rebmullin commented 9 years ago

@scottnath @e2tha-e - The included twig template outputs as text in the browser: This is example content square.twig/square.twig ...see http://grab.by/KBL8

scottnath commented 9 years ago

@rebmullin please try to find the magic potion that works for the <% include... statements inside patternlab source?

Steps to find magic:

a twig that has an include from the same subcategory
running gulp serve
second terminal window on same directory (so gulp serve can stay running)
change the pattern inside ./patternlab/source/_patterns/blah-category/blah-subcategory
trigger patternlab build in second terminal window: gulp patternlab-build-public
refresh patternlab browser and changes should be there

Once we know that, we can try to fix how they should get imported.

rebmullin commented 9 years ago

okay i found out that the way to include a twig pattern is {% include "[patternType]-[patternName]" %}, so {% include 'molecules-circle' %} for example. I did a separate install of PL twig and it seems to work fine with this syntax... When I use with this syntax tho, it now fails to build (gulp build) correctly - the pattern doesn't appear on the front or back end. See error or: Starting 'patterns-import-local'... /Users/rebeccamullin/Desktop/gen2/node_modules/pattern-library-utilities/lib/convert-twig-include-paths.js:30 var newIncludePath = utility.createNewCategoryPath(options, includePath[1]); ^ TypeError: Cannot read property '1' of null at Object.exports.convertTwigIncludes (/Users/rebeccamullin/Desktop/gen2/node_modules/pattern-library-utilities/lib/convert-twig-include-paths.js:30:76) at Object.exports.getPatternFiles (/Users/rebeccamullin/Desktop/gen2/node_modules/pattern-library-utilities/lib/get-pattern-files.js:46:33) at DestroyableTransform._transform (/Users/rebeccamullin/Desktop/gen2/node_modules/pattern-library-utilities/lib/pattern-importer.js:31:32) at DestroyableTransform.Transform._read (/Users/rebeccamullin/Desktop/gen2/node_modules/pattern-library-utilities/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:184:10) at DestroyableTransform.Transform._write (/Users/rebeccamullin/Desktop/gen2/node_modules/pattern-library-utilities/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:172:12) at doWrite (/Users/rebeccamullin/Desktop/gen2/node_modules/pattern-library-utilities/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:237:10) at writeOrBuffer (/Users/rebeccamullin/Desktop/gen2/node_modules/pattern-library-utilities/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:227:5) at DestroyableTransform.Writable.write (/Users/rebeccamullin/Desktop/gen2/node_modules/pattern-library-utilities/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:194:11) at write (/Users/rebeccamullin/Desktop/gen2/node_modules/gulp/node_modules/vinyl-fs/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:623:24) at flow (/Users/rebeccamullin/Desktop/gen2/node_modules/gulp/node_modules/vinyl-fs/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:632:7)

additional notes: gulp serve and gulp patternlab-build-public work fine

scottnath commented 9 years ago

in your pattern-libary's config.yml, add a config for convertCategoryTitles inside the section for gulp-task/patternImporter

so this part:

...
  patternImporter:
    localPatterns:
      config:
        htmlTemplateDest: '{{ fileTypes.patterns.prototyperDestDir }}'
        stylesDest: '{{ fileTypes.sass.prototyperSrcDir }}/local'
        scriptsDest: '{{ fileTypes.js.prototyperSrcDir }}/local'
      taskName: 'patterns-import-local'
      src:
        - './patterns/**/pattern.yml'

becomes this:

  patternImporter:
    localPatterns:
      config:
        htmlTemplateDest: '{{ fileTypes.patterns.prototyperDestDir }}'
        stylesDest: '{{ fileTypes.sass.prototyperSrcDir }}/local'
        scriptsDest: '{{ fileTypes.js.prototyperSrcDir }}/local'
        convertCategoryTitles: false
      taskName: 'patterns-import-local'
      src:
        - './patterns/**/pattern.yml'

stop the server and try a gulp build then it will leave the internal <%include statements alone

rebmullin commented 9 years ago

hmm no errors but not seeing it being built on the frontend..? see not listed here: http://grab.by/KCfW

scottnath commented 9 years ago

in gulpfile.js look for this section:

// NPM-Imported Pattern Libraries
if (configuration.npmPatternRepos) {
  configuration.npmPatternRepos.forEach(function (repo) {
    'use strict';
    var npmImporterOptions = {
      config: {
        htmlTemplateDest: configuration.fileTypes.patterns.prototyperDestDir,
        stylesDest: configuration.fileTypes.sass.prototyperSrcDir + '/npm/' + repo.name,
        scriptsDest: configuration.fileTypes.js.prototyperSrcDir + '/npm/' + repo.name,
        convertCategoryTitles: false
      },
      taskName: 'patterns-import-npm-' + repo.name,
      src: ['./node_modules/' + repo.repoDir + '/patterns/**/pattern.yml']
    };
    patternImportTasks.push(npmImporterOptions.taskName);
    patternUtils.gulpImportPatterns(gulp, npmImporterOptions);
  });
}

and see where I added the line with convertCategoryTitles: false? add that, delete ./patternlab, gulp build

rebmullin commented 9 years ago

I am supposed to add this in addition to adding convertCategoryTitles: false to the config.yml file too, right?

when i do these 2 together, no terminal errors happen but the whole media directory (which is where these patterns are housed) are gone from PL...?

rebmullin commented 9 years ago

okay disregard above message...the include is working now when i add these updates on my end..

scottnath commented 9 years ago

Keeping this open to remember to make convertCategoryTitles a global configuration

pattern-library / generator-pattern-library

adding twig template as include doesn't show correct output #4