_00-head.twig is not displayed correctly using the twig (js) engine.

[shannonsumner-zz]

node --version
v12.16.1

I am using Pattern Lab Node vX.X.X on Windows | Mac | Linux, with Node vX.X.X, using a Gulp | Grunt | Vanilla | Custom Edition.

I am using Pattern Lab Node 'v5.9.3' on Mac with Node 'v12.16.1', using a Vanilla Edition with the engine twig installed and twig set to the pattern extension.

npm run pl:version

> pattern-lab-twig-js@1.0.0 pl:version /Users/ssumner/Documents/GitHub/pattern-lab-twig-js
> patternlab --version

5.9.3 (Pattern Lab Node Core version: 5.9.3)

Expected Behavior

_00-head.twig would be displayed correctly.

Actual Behavior

_00-head.twig is not displayed correctly.

Steps to Reproduce

npm create pattern-lab
? Please specify a directory for your Pattern Lab project. ./
? What templating language do you want to use with Pattern Lab? None
? What initial patterns do you want included in your project? Blank project (no patterns)
? Are you happy with your choices? (Hit enter for YES)? Yes
✔ ⊙ patternlab → Yay ☺. Pattern Lab Node was successfully initialized in ./

npm install @pattern-lab/engine-twig --save
npm install --save @pattern-lab/cli @pattern-lab/core @pattern-lab/uikit-workshop

Add the following to package.json:

    "test": "echo \"Error: no test specified\" && exit 1",
    "pl:build": "patternlab build --config ./patternlab-config.json",
    "pl:help": "patternlab --help",
    "pl:install": "patternlab install --config ./patternlab-config.json",
    "pl:serve": "patternlab serve --config ./patternlab-config.json",
    "pl:version": "patternlab --version"

Create empty source directory structure:

source$ find .
.
./favicon.ico
./css
./css/pattern-scaffolding.css
./css/style.css
./images
./_macros
./_macros/.gitkeep
./js
./_patterns
./_patterns/00-atoms
./_patterns/00-atoms/01-text
./_patterns/00-atoms/01-text/00-headings.twig
./_patterns/01-molecules
./_patterns/02-organisms
./_patterns/03-templates
./_patterns/04-pages
./_meta
./_meta/_00-head.twig
./_meta/_00-head.mustache
./_meta/_01-foot.twig
./_meta/_01-foot.mustache
./_layouts
./_layouts/.gitkeep
./_annotations
./_annotations/annotations.js
./_data
./_data/listitems.json
./fonts

run npm install && npm run pl:build && npm run pl:serve

Update patternExtension to twig in patternlab-config.json.

pattern-lab-twig-js.zip

[bmuenzenmeyer]

I believe in gitter you stated this was resolved? please reopen if i am misunderstanding

[shannonsumner-zz]

Please reopen. This issue is not resolved.

[ringods]

@shannonsumner As I'm the person who did work on engine-twig lately, I'll have a look at it. But can you still post the full dependencies and devDependencies from your package.json?

[shannonsumner-zz]

{
  "name": "pattern-lab-twig-js",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "pl:build": "patternlab build --config ./patternlab-config.json",
    "pl:help": "patternlab --help",
    "pl:install": "patternlab install --config ./patternlab-config.json",
    "pl:serve": "patternlab serve --config ./patternlab-config.json",
    "pl:version": "patternlab --version"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@pattern-lab/cli": "^5.9.3",
    "@pattern-lab/core": "^5.9.3",
    "@pattern-lab/engine-twig": "^5.9.3",
    "@pattern-lab/uikit-workshop": "^5.9.3"
  }
}

[ringods]

@bmuenzenmeyer I think I need a helping hand. @shannonsumner attached an example project, see the link to a ZIP file just above the screenshot.

This example project contains a single pattern: atoms-headings. After running pl:build, I get three folders under public/patterns:

• 00-atoms
• 00-atoms-01-text
• 00-atoms-01-text-00-headings

The index.html file in the first 2 folders start at line 1 with:

1589228542848" media="all" />
    <link rel="stylesheet" href="../../css/pattern-scaffolding.css?1589228542848" media="all" />

    <!-- Begin Pattern Lab (Required for Pattern Lab to run properly) -->
    <link rel="stylesheet" href="../../styleguide/css/pattern-lab.css?1589228542848" media="all">
    <!-- End Pattern Lab -->
  
  </head>
  <body class="">
...

The pattern itself 00-atoms-01-text-00-headings.rendered.html is correct and starts like:

<!DOCTYPE html>
<html class="">
  <head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width" />
    
    <link rel="stylesheet" href="../../css/style.css?1589228542848" media="all" />
    <link rel="stylesheet" href="../../css/pattern-scaffolding.css?1589228542848" media="all" />

    <!-- Begin Pattern Lab (Required for Pattern Lab to run properly) -->
    
    <!-- End Pattern Lab -->
  
  </head>
  <body class="">
...

Any idea where it goes wrong with generating the overview pages? I close by posting links to the spawnFile function of Mustache, Handlebars & Twig engines. They are the same, only differing in the extension of the meta file name:

• https://github.com/pattern-lab/patternlab-node/blob/dev/packages/engine-mustache/lib/engine_mustache.js#L84-L97
• https://github.com/pattern-lab/patternlab-node/blob/dev/packages/engine-handlebars/lib/engine_handlebars.js#L108-L121
• https://github.com/pattern-lab/patternlab-node/blob/dev/packages/engine-twig/lib/engine_twig.js#L179-L192

[ringods]

I was able to reproduce with the example project. I'm trying to debug and step through the execution flow but with the async nature of NodeJS, the execution path is hard to follow. No idea so far where the problem comes from.

@bmuenzenmeyer have you had some time to look into this?

[ringods]

A few hours ago, I updated my Homebrew setup. One of the things which got bumped was NodeJS. I am now running NodeJS v12.16.3.

Using this NodeJS version, your sample project seems to build correctly now. The changelog for this version is quite long:
https://github.com/nodejs/node/blob/master/doc/changelogs/CHANGELOG_V12.md#12.16.3
I could link a few issues which might be related to this, but I fail to pinpoint the root cause so far.

@shannonsumner can you give NodeJS v12.16.3 a try and report back your results?

[shannonsumner-zz]

I am still seeing the same issue after updating to Node 12.6.3

ssumner@MAC1234:~/Documents/GitHub/pattern-lab-twig-js$ node -v
v12.16.3
ssumner@MAC1234:~/Documents/GitHub/pattern-lab-twig-js$ npm run pl:build

> pattern-lab-twig-js@1.0.0 pl:build /Users/ssumner/Documents/GitHub/pattern-lab-twig-js
> patternlab build --config ./patternlab-config.json

Pattern Lab Node v5.10.1
Pattern Engine mustache: good to go
Pattern Engine twig: good to go
registerPartial(00-atoms-01-text-00-headings - atoms-headings - undefined - 00-atoms/01-text/00-headings.twig)
Built pattern: atoms-headings
Built Pattern Lab front end
⊙ patternlab → build: Yay, your Pattern Lab project was successfully built ☺
ssumner@MAC1234:~/Documents/GitHub/pattern-lab-twig-js$ npm run pl:serve

> pattern-lab-twig-js@1.0.0 pl:serve /Users/ssumner/Documents/GitHub/pattern-lab-twig-js
> patternlab serve --config ./patternlab-config.json

⊙ patternlab → serve: Serving your files …
Pattern Lab Node v5.10.1
Pattern Engine mustache: good to go
Pattern Engine twig: good to go
registerPartial(00-atoms-01-text-00-headings - atoms-headings - undefined - 00-atoms/01-text/00-headings.twig)
Built pattern: atoms-headings
Built Pattern Lab front end
Pattern Lab is watching for changes to files under source/
Pattern Lab is being served from http://127.0.0.1:3000

_00-head.twig is still not being displayed correctly.

[ringods]

Indeed. It was a misconfiguration on my end. When the configuration was set to twig correctly, the problem still stands unfortunately.