pattern-lab / patternengine-php-twig Goto Github PK

It's not a big deal since it configurable, but since the files under source/_twig-components, which are meant to extend Twig itself, aren't actually Twig partials, but rather plain-ol' PHP files, I think a better naming default would be .[extension-type].php.

I think it's clearer and better for syntax highlighting.

We are wanting to include PatternLab in our CodeIgniter projects. However, we are unclear on where/how to install in such a way that it all works seamlessly. Twig isn't finding the templates when we use them in our CodeIgniter project under the application/views folder.

We really think PatternLab can help us, but we can't get past square one in terms of getting it set up.

Hi,

I notice that there is documentation on how to exend the pattern lab to add your own filters, functions, and tags. But there is also an extensions directory under _twig-components, but there is no example at all on how to load an extension.

Could one be added?

Thanks!

Is it possible to import variables for a pattern from several json files? I'm building a rather complex app where a page inherits from the section it reside in.

I'd like to have json files for each section and do something like:

// article~news.json
{
  "section": "news"
}

{# article.twig#}
{% if section == "news" %}
  {# code to import variables from '_data/section-news.json' #}
{% endif %}

I've been having issues with using any custom list items in loops within the PHP and Twig Patternlab. So far I have tried adding the JSON content both within the Pattern partials folders and also within the data folder but neither seem to be picked up within my templates and I get empty arrays rendering. I only seem to be able to use the standard data setup within the listitems.json in the data folder but even when I try to add new data to that file it still does not pick up. Is there something I am missing or is this possibly a bug?

JSON Data
{ "1" : { "coreplans" : { "id" : "silver", "plantitle" : "Silver", "summary" : "Some description text here for the silver level", "atoms-ticked" : { "one": "List item one", "two": "List item two", "three": "List item three", "four": "List item four" } } }, "2" : { "coreplans" : { "id" : "gold", "plantitle" : "Gold", "summary" : "Some description text here for the gold level", "atoms-ticked" : { "one": "List item one", "two": "List item two", "three": "List item three", "four": "List item four" } } }, "3" : { "coreplans" : { "id" : "platinum", "plantitle" : "Platinum", "summary" : "Some description text here for the platinum level", "atoms-ticked" : { "one": "List item one", "two": "List item two", "three": "List item three", "four": "List item four" } } } }

Twig loop within the template
{% for item in 1..3 %} <div class="col-sm-4"> {% include "molecules-block-plan" %} </div> {% endfor %}

Molecule block example
`

@dmolsen @EvanLovely -

The README states that files used for template inheritance (i.e., the extends tag), must go in source/_layouts.

However, in commit 16fe2ba of pattern-lab/patternengine-php-twig, the 01-homepage.twig template extend
00-site.twig from the _patterns/03-templates directory, not the _layouts directory.

Is this now possible? If so, the README should be changed.

I have been unable to find a way to generate a list of patterns as can be done in Mustache: http://patternlab.io/docs/data-listitems.html

When I have tried creating a listitems.json file for a particular pattern, like topic.listitems.json, I get an error like so:

configuring pattern lab...
PHP Fatal error: Call to protected method PatternLab\Data::getListItems() from context 'PatternLab\PatternData\Rules\PatternInfoListItemsRule' in /Library/WebServer/Documents/sitename/docroot/sites/sitename/themes/themename/patternlab/vendor/pattern-lab/core/src/PatternLab/PatternData/Rules/PatternInfoListItemsRule.php on line 54
PHP Stack trace:
PHP 1. {main}() /Library/WebServer/Documents/sitename/docroot/sites/sitename/themes/themename/patternlab/core/console:0
PHP 2. PatternLab\Console::run() /Library/WebServer/Documents/sitename/docroot/sites/sitename/themes/themename/patternlab/core/console:46
PHP 3. PatternLab\Console\Commands\GenerateCommand->run() /Library/WebServer/Documents/sitename/docroot/sites/sitename/themes/themename/patternlab/vendor/pattern-lab/core/src/PatternLab/Console.php:83
PHP 4. PatternLab\Generator->generate() /Library/WebServer/Documents/sitename/docroot/sites/sitename/themes/themename/patternlab/vendor/pattern-lab/core/src/PatternLab/Console/Commands/GenerateCommand.php:41
PHP 5. PatternLab\PatternData::gather() /Library/WebServer/Documents/sitename/docroot/sites/sitename/themes/themename/patternlab/vendor/pattern-lab/core/src/PatternLab/Generator.php:69
PHP 6. PatternLab\PatternData\Rules\PatternInfoListItemsRule->run() /Library/WebServer/Documents/sitename/docroot/sites/sitename/themes/themename/patternlab/vendor/pattern-lab/core/src/PatternLab/PatternData.php:139

Fatal error: Call to protected method PatternLab\Data::getListItems() from context 'PatternLab\PatternData\Rules\PatternInfoListItemsRule' in /Library/WebServer/Documents/sitename/docroot/sites/sitename/themes/themename/patternlab/vendor/pattern-lab/core/src/PatternLab/PatternData/Rules/PatternInfoListItemsRule.php on line 54

Call Stack:
0.0033 237016 1. {main}() /Library/WebServer/Documents/sitename/docroot/sites/sitename/themes/themename/patternlab/core/console:0
0.0416 1139488 2. PatternLab\Console::run() /Library/WebServer/Documents/sitename/docroot/sites/sitename/themes/themename/patternlab/core/console:46
0.0467 1285960 3. PatternLab\Console\Commands\GenerateCommand->run() /Library/WebServer/Documents/sitename/docroot/sites/sitename/themes/themename/patternlab/vendor/pattern-lab/core/src/PatternLab/Console.php:83
0.0874 2896088 4. PatternLab\Generator->generate() /Library/WebServer/Documents/sitename/docroot/sites/sitename/themes/themename/patternlab/vendor/pattern-lab/core/src/PatternLab/Console/Commands/GenerateCommand.php:41
0.0925 3262920 5. PatternLab\PatternData::gather() /Library/WebServer/Documents/sitename/docroot/sites/sitename/themes/themename/patternlab/vendor/pattern-lab/core/src/PatternLab/Generator.php:69
0.1008 3690656 6. PatternLab\PatternData\Rules\PatternInfoListItemsRule->run() /Library/WebServer/Documents/sitename/docroot/sites/sitename/themes/themename/patternlab/vendor/pattern-lab/core/src/PatternLab/PatternData.php:139

Warning: Command failed: PHP Fatal error: Call to protected method PatternLab\Data::getListItems() from context 'PatternLab\PatternData\Rules\PatternInfoListItemsRule' in /Library/WebServer/Documents/sitename/docroot/sites/sitename/themes/themename/patternlab/vendor/pattern-lab/core/src/PatternLab/PatternData/Rules/PatternInfoListItemsRule.php on line 54
PHP Stack trace:
PHP 1. {main}() /Library/WebServer/Documents/sitename/docroot/sites/sitename/themes/themename/patternlab/core/console:0
PHP 2. PatternLab\Console::run() /Library/WebServer/Documents/sitename/docroot/sites/sitename/themes/themename/patternlab/core/console:46
PHP 3. PatternLab\Console\Commands\GenerateCommand->run() /Library/WebServer/Documents/sitename/docroot/sites/sitename/themes/themename/patternlab/vendor/pattern-lab/core/src/PatternLab/Console.php:83
PHP 4. PatternLab\Generator->generate() /Library/WebServer/Documents/sitename/docroot/sites/sitename/themes/themename/patternlab/vendor/pattern-lab/core/src/PatternLab/Console/Commands/GenerateCommand.php:41
PHP 5. PatternLab\PatternData::gather() /Library/WebServer/Documents/sitename/docroot/sites/sitename/themes/themename/patternlab/vendor/pattern-lab/core/src/PatternLab/Generator.php:69
PHP 6. PatternLab\PatternData\Rules\PatternInfoListItemsRule->run() /Library/WebServer/Documents/sitename/docroot/sites/sitename/themes/themename/patternlab/vendor/pattern-lab/core/src/PatternLab/PatternData.php:139
Use --force to continue.

This should address any plugins that want to modify an instance with additional features (e.g. paths or extensions). Not sure if we still won't run into race conditions but it's something.

I was running into problems where the terminal told me:
Fatal error: Call to undefined method _TwigTemplate ....

After some research I found this issue has been allready described there:
pattern-lab/starterkit-twig-demo#15 (comment)

Please correct me if I'm wrong.

Especially for use cases where many StarterKits use the same Twig extensions it would be good to be able to register a class implementing Twig_ExtensionInterface.

When you include a pattern like this:
{% include "molecules-button" %}

It does not load the related button.json. Currently it's fairly easy to work around by doing this:

{% include "molecules-button"
  with {
    "element": "a",
    "text": "Button"
  }
%}

But it adds a lot of duplication.

Here's an example gist of all three files: https://gist.github.com/lewisnyman/96c3fdbcb5d0fcc1c2ae

I couldn't find the equivalent of php core/autoReloadServer.php functionality for this version.

When setting Pattern Lab to watch for changes in Terminal, OS Sierra, the following is output:

php core/console --watch
configuring pattern lab...
spawning the watch process...

And then nothing happens. Making changes to any files doesn't cause any changes/updates/rebuilds of any kind. Pressing ctrl+c still has to be used to stop watching/clear the spawning message.

Any ideas what I might be doing wrong?

I'm not sure if this is an issue with the twig extension or the core Patternlab library, but using 'longhand' includes with full paths (i.e. not the fuzzy shorthand syntax) seems to break pattern lineage.

Patterns which consist of longhand includes don't show their lineage, and also don't work with the Data Inheritance Plugin, which expects to receive lineage information.

This doesn't seem to be documented as a limitation of using longhand, is this a known issue? Unfortunately using PL in production necessitates the use of full-path includes.

Hi, not sure if Im asking this in the right place but any direction would be helpful.

Aside from documentation on the Pattern Lab site are there any other sources that go into more detail on working with json data and twig files?

Specifically what Im looking for is how to handle twig "if, for, set, etc..." statements as well as populating variables when set like foo[bar]. Ive been able to find examples of working with arrays so I was able to get that handled but Ive been looking high and low for examples of the above and just keep coming up short.

Thanks!

I'm starting our first project using Pattern Lab and I can't tell what I should commit for my team. The Twig build came with a .gitignore file that had the following:

.DS_Store
composer.lock
config/*
export/*
packages/*
public/*
source/*
vendor/*

It seems that at the very least, source/* should be committed if this is to be shared and multiple devs are to contribute. It also seems that config, packages, and vendor are needed for building correctly. I'm not sure what export is.

In public, I'm pretty sure I can ignore everything since it does seem to all build just fine from scratch. We can build on individual local machines as well as on the server.

So is this more like what should be ignored? For a team working on it together?

.DS_Store
composer.lock
public/annotations/
public/css/
public/images/
public/js/
public/patternlab-components/
public/patterns/
public/
public/favicon.ico

Is there another workflow that I'm missing? If there's a resource about this somewhere I haven't been able to find it but I'd be happy to simply be pointed there.

Also posted to SO after posting here since I'm not sure of the level of activity here. Will update here if there's a response there.

This feature would work in a similar way to the Mustache Helper feature. Twig helpers could be installed via composer and they'd register themselves. Currently this is how the Mustache helper works:

• install helper which gets registered
• on load the helper is associated with a dispatcher event
• when the pattern engine loads it fires the event and all helpers register themselves

Example mustache helper.

Dispatch events so others can hook into the set-up of the loaders.

• this is using aleksip/plugin-data-transform for attributes

This is working fine in a pattern:
<div {{ attributes.addClass('test') }}>test</div>
<div class="test">test</div>

But if this is inside a macro, I get:
<div class=""test"">test</div>

I can work around this by including the macro file like another pattern.

The commit b5ed124 prevents using the Tag embed.
The Solution is to add another Node Visitor EmbedNodeVisitor which creates an PatternDataEmbedNode exending Twig_Node_Embed.
In Addition prevent in the IncludeNodeVisitor creating a PatternDataIncludeNode class in case the $node is an object of Twig_Node_Embed.
Something like
if ($node instanceof \Twig_Node_Include && !($node instanceof \Twig_Node_Embed)) {

It seems there was a merge request (#31) for this problem, but this is still an issue.

When we are developing new templates while in php core/console --server --with-watch, if we save a twig template with a syntax error (or create any other kind of twig error) the watch task on the server stops working. This means correcting the error has no effect and the server needs to be restarted, making the watch task somewhat useless.

https://twig.symfony.com/doc/2.x/advanced.html#id1

I've actually already got a working POC patch for this that we've been using to share certain Design Token values across our Design System in a way that is Drupal / Grav friendly (vs only being available to PL):

https://github.com/bolt-design-system/bolt/blob/develop/.patches/addTwigGlobals.patch

https://github.com/bolt-design-system/bolt/blob/develop/packages/bolt-twig-extensions/globals/bolt-image-sizes.global.php

My question for @aleksip and @EvanLovely is about the way this extension gets called since I tried to do things in a more Symphony like way (in how this gets called). Thoughts?

By default, Twig has the escaping strategy set to html, meaning that HTML tags are automatically escaped. Does this escaping strategy make sense in the context of Pattern Lab? I would argue that as a developer, I should be able to put whatever I want into my data.json file (including HTML) without having to explicitly escape it. Hence, it makes sense to me to disable the escaping strategy alltogether.

When looking at the code for an individual pattern, we only see twig directives and raw text under the twig tab, such as

{% include "atoms-hero" %}




        Strategic collaboration

Notice the indentation that suggests the html hierarchy of the template, but no tags or classes displayed.

The html tab is even less instructive, simply declaring file doesn't exist.

Installed version of pattern-lab-core is 2.7.0, patternengine-php-twig is 2.0.0

If you place a link like the {{ link.pages-homepage }} the output is "0" and not the link to the homepage.

I'm that guy. Please don't hate me. This is clearly not a big deal but I thought I'd submit an issue. I'm sure you're really looking for a reason to address this.

Should be:

/**
* Load tests for the Twig PatternEngine
*/

Sorry for asking you here, but I couldn't find a better place to ask.. there's some know procedure do use this with symfony?

It would be great if the PatternEngine could support the Twig Extensions Library by default.

I used to have these packages:

"@pattern-lab/core": "^5.15.0",
"@pattern-lab/engine-twig-php": "^5.15.0",
"@pattern-lab/uikit-workshop": "^5.15.0",

And my patternlab-config.json file was created this way:

"engines": {
    "twig": {
      "namespaces": [
        {
          "id": "uikit",
          "recursive": true,
          "paths": [
            "./node_modules/@pattern-lab/uikit-workshop/views-twig"
          ]
        },
        {
          "id": "atoms",
          "recursive": true,
          "paths": [
            "./src/pattern-lab/_patterns/00-atoms"
          ]
        },
        {
          "id": "molecules",
          "recursive": true,
          "paths": [
            "./src/pattern-lab/_patterns/01-molecules"
          ]
        },
        {
          "id": "organisms",
          "recursive": true,
          "paths": [
            "./src/pattern-lab/_patterns/02-organisms"
          ]
        },
        {
          "id": "templates",
          "recursive": true,
          "paths": [
            "./src/pattern-lab/_patterns/03-templates"
          ]
        }
      ],
      "alterTwigEnv": [
        {
          "file": "alter-twig.php",
          "functions": [
            "addCustomExtension"
          ]
        }
      ]
    }
  }

Now that I finally updated my packages to:

"@pattern-lab/core": "^6.0.1",
"@pattern-lab/engine-twig-php": "^6.0.1",
"@pattern-lab/uikit-workshop": "^6.0.3",

The "twig" engines are not working, the npm run build command says that I haven't configured the twig engines properly.

I can't find an example nor (worst) documentation on how to accomplish this.

Can someone really help me please? I'll be glad, thanks

The UI Patterns module allows patterns to be created and these can be associated with Pattern Lab based twig files. Due to Drupal's hard coded .html.twig extension in ThemeManager the UI Patterns module can't load a twig file from Pattern Lab which is missing the .html portion. This means that to load a twig file from Pattern Lab it has to be renamed to html.twig and all the supporting files also need to have html in them, for example: something.html.json. This is unpleasant. Is there a way of specifying the twig files in Pattern Lab to use html.twig while retaining the name of the supporting JSON, scss and md files without 'html' in the title?

See: nuvoleweb/ui_patterns/issues/49

Hi,

Thanks for all the work that's gone into this project!

I was hoping to use the shorthand include syntax outside of Pattern Lab (in Drupal as it happens). I found the same request from 2016 in pattern-lab/edition-php-twig-standard#18. In that issue there's a workaround suggested and the issue was closed.

I was just wondering if there was any interest in trying to go further and make the pattern partial loader itself available to consumers such as Drupal? I've done a simple PoC that seems to work for me:

1. pattern-lab-php-path-src-exporter: A PL listener that dumps the pattern paths data (ie the second argument to \PatternLab\PatternEngine\Twig\Loaders\Twig\PatternPartialLoader::__construct()) to a file.
2. patternlabloader: A Drupal module that extends PatternPartialLoader to read the location of the pattern paths data file from the theme info file, and use it to construct the loader.

I'm quite new to Pattern Lab, maybe there's a better way to do this? At the moment a pain point is obviously that to get the partial loader and utility class you need patternengine-twig which needs core + deps, and really this is all for two classes: \PatternLab\PatternEngine\Twig\Loaders\Twig\PatternPartialLoader and \PatternLab\PatternEngine\Util.

Would there be any chance we could grab the pattern partial loader without the rest of pattern lab? Any advice/suggestions?

Thanks for your time and consideration!

Patternengine PHP Twig still uses Twig < 2. In my case, I create reusable component libraries with Patternlab. Those can be used in CMS out of the box. The problem is, that most of those CMS use Twig 2, thus there are some incompatibilities which don't occur for me in Patternlab, but come up when used in a Twig 2 environment.