pattern-lab / starterkit-mustache-acidtest Goto Github PK
View Code? Open in Web Editor NEWCross-platform acid tests for Pattern Lab
License: MIT License
Cross-platform acid tests for Pattern Lab
License: MIT License
I am using Pattern Lab Node -2.12.0
on Mac
, with Node v7.5.0
, using the Gulp
Edition. Patternlab mustache is in version 1.0.2
.
Command gulp -v
returns the following :
[10:51:05] CLI version 1.4.0
[10:51:05] Local version 4.0.0-alpha.2
Pattern Lab Node -2.0.0
on Linux Ubuntu 15
, with PHP 5.6.11-1ubuntu3.4
, using the mustache
edition. Patternlab mustache engine is in version 2.0.0
.
php -v -> PHP 5.6.11-1ubuntu3.4 (cli)
It is mentioned in documentation that the data inheritance plugin exists only for the PHP version of Patternlab. I have used the Node/Mustache/Gulp version up to now. I am at the point, in a rather large styleguide, where, having established most of the lower level components as draft items, I am organizing my files so as to create higher level structures, like templates and pages. This requires turning most of the draft mustache markup into dynamic pseudocode that consumes the data layer, in order to keep everything DRY and keep the components interoperable. I am very pleased with the way things are looking.
I have wrestled for the past couple of days with the inheritance model, scratching my head trying to undestand why the behaviour seems so different from what the documentation creates, in terms of expectations. I could not override, for example, a H1 atom in a top level template with a local json file.
I have decided to run a small test case to follow the flow of the data, using the base data layer, an atom, an organism and a template, using the best of my understanding about the proper use of the data layer. The results where a discovery and everything became clear.
To have a quiet mind about this issue, I have decided to download and install the php version of Patternlab with the demo-kit and add my components, data and listitem files and data. Out of the box, without any further add-ons, the php version did exactly what I expected. The output and source files used for the test are below.
It seems like in the node version, the data can be overridden if and only if the template being displayed directly (organism) imports the lower level component (atom). Moving up the chain one level (template), if the previous component (organism) is included, the atom level component will use the base level data and ignore any alterations proposed in json files located at the organism or template levels.
The behaviour is slightly different, depending on whether the data inheritance plugin is on or off. When it is off, there is no data trickle down effect from the organism to the template when displaying the atom. When it is off, presuming the atom data is not overridden, organism level data targetting the atom will show when looking at the template.
For the tests below, the data-inheritance plugin was ON. Turning it off still lets me override the atom into the template, which is at least half the battle and represents the most important battle, in terms of architectural consequences for a design system.
Thank you so much for having a look at my issue
=== ATOM ===
atom + dummy-atom-base-content
=== ORGANISM ===
organism + dummy-organism-base-content
atom + dummy-atom-organism-level-content
dummy-atom-list-item-content-1
atom + dummy-atom-organism-level-content
dummy-atom-list-item-content-2
=== TEMPLATE ===
organism + dummy-organism-template-level-content
atom + dummy-atom-organism-level-content
dummy-atom-list-item-content-1
atom + dummy-atom-organism-level-content
dummy-atom-list-item-content-2
dummy-template-template-level-content
=== ATOM ===
atom + dummy-atom-base-content
=== ORGANISM ===
organism + dummy-organism-base-content
atom + dummy-atom-organism-level-content
dummy-atom-list-item-content-3
atom + dummy-atom-organism-level-content
dummy-atom-list-item-content-5
=== TEMPLATE ===
organism + dummy-organism-template-level-content
atom + dummy-atom-template-level-content
dummy-atom-list-item-content-template-level-000001
atom + dummy-atom-template-level-content
dummy-atom-list-item-content-template-level-000002
dummy-template-template-level-content
{
"dummy": {
"dummy-atom": {
"classes" : "dummy-atom-base-classes",
"content" : "dummy-atom-base-content"
},
"dummy-organism": {
"classes" : "dummy-organism-base-classes",
"content" : "dummy-organism-base-content"
},
"dummy-template": {
"classes" : "dummy-template-base-classes",
"content" : "dummy-template-base-content"
}
},
[...] ,[...] ,[...]
}
{
"1" : {
"dummy-list": {
"dummy-list-atom" : {
"listitem" : "dummy-atom-list-item-content-1"
},
"dummy-list-organism" : {
"listitem" : "dummy-organism-list-item-content-1"
}
},
[...] ,[...] ,[...]
},
"2" : {
"dummy-list": {
"dummy-list-atom" : {
"listitem" : "dummy-atom-list-item-content-2"
},
"dummy-list-organism" : {
"listitem" : "dummy-organism-list-item-content-2"
}
},
[...] ,[...] ,[...]
},
[...] ,[...] ,[...]
}
<div class="dummy-atom {{ dummy.dummy-atom.classes }}">
atom +
{{ dummy.dummy-atom.content }}
<blockquote>{{ dummy-list.dummy-list-atom.listitem }}</blockquote>
</div>
{
"dummy": {
"dummy-atom": {
"classes" : "dummy-atom-organism-level-classes",
"content" : "dummy-atom-organism-level-content"
}
}
}
<div class="dummy-organism {{ dummy.dummy-organism.classes }}">
organism +
{{ dummy.dummy-organism.content }}
{{# listItems.two }}
{{> atoms-dummy-atom }}
{{/ listItems.two }}
</div>
{
"dummy": {
"dummy-atom": {
"classes" : "dummy-atom-template-level-classes",
"content" : "dummy-atom-template-level-content"
},
"dummy-organism": {
"classes" : "dummy-organism-template-level-classes",
"content" : "dummy-organism-template-level-content"
},
"dummy-template": {
"classes" : "dummy-template-template-level-classes",
"content" : "dummy-template-template-level-content"
}
}
}
{
"1": {
"dummy-list": {
"dummy-list-atom" : {
"listitem" : "dummy-atom-list-item-content-template-level-000001"
},
"dummy-list-organism" : {
"listitem" : "dummy-organism-list-item-content-template-level-000001"
}
}
},
"2": {
"dummy-list": {
"dummy-list-atom" : {
"listitem" : "dummy-atom-list-item-content-template-level-000002"
},
"dummy-list-organism" : {
"listitem" : "dummy-organism-list-item-content-template-level-000002"
}
}
}
}
<div class="dummy-template {{ dummy.dummy-template.classes }}">
{{> organisms-dummy-organism }}
{{ dummy.dummy-template.content }}
</div>
Hello again, Brian,
We have found, when migrating our style guide from the node distro to the php distro that the following occurs :
Case - 1 -- pseudo patterns with numbers
A .json variant pseudo pattern starting with a number will fail in the php version, for example,
Both 2 column variants will be created in the public directory. The parser @ Rule.php may shout a warning in some cases over the variant starting with number immediately following the tilde symbol. The Patternlab menu will not be updated, the file~2columns.json variant will not be foud in the patternlab menus, despite being properly compiled in /public/_patterns.
The partials discovery mechanism is broken when importing a file containing decimal numbers
Note the similitude in between the nomenclature for the two files with distinct names.They follow the exact same pattern.
My understanding it that it would be a healthy time saver to document the fact that it is not a good idea to use decimal in the mustache filename. Make it a use case in the example of that which will not work.
http://patternlab.io/docs/pattern-including.html
Thank you for your help, happy holidays!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.