pattern-lab / starterkit-mustache-acidtest Goto Github PK

Environment

Node

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

PHP

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) 

The problem

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.

Questions

• Is this profound discrepancy known?
• Should I look for bugs in my Node patternlab install? Where should I start?
• How difficult can I expect the migration to be, if I wanted to bring all my marbles into a php version?
• Can I expect any more of the upcoming Patternlab/Node version 3?
• Is the Altin Data inheritance plugin really supposed to work?

Thank you so much for having a look at my issue

Output of Node vs PHP

Node

• Atom: https://cl.ly/3i0w0o0r2t2k
• Organism: https://cl.ly/0E3J3A462o0J
• Template: https://cl.ly/311R3U3g1s15

=== 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

PHP

• Atom: https://cl.ly/1B153x0F243y
• Organism: https://cl.ly/3G001E35022E
• Template: https://cl.ly/12180L2c1o2s

=== 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

Files used for this test

Base level, data & listitems

data.json

{
	"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"
		}
	},
	[...] ,[...] ,[...]
}

listitems.json

{
	"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"
			}
		},
		[...] ,[...] ,[...]
	},
	[...] ,[...] ,[...]
}

Atom level - template only

dummy-atom.mustache

<div class="dummy-atom {{ dummy.dummy-atom.classes }}">
  atom +
  {{ dummy.dummy-atom.content }}
  <blockquote>{{ dummy-list.dummy-list-atom.listitem }}</blockquote>
</div>

Organism level - template & data

dummy-organism.json

{
  "dummy":  {
		"dummy-atom":  {
			"classes" : "dummy-atom-organism-level-classes",
			"content" : "dummy-atom-organism-level-content"
		}
	}
}

dummy-organism.mustache

<div class="dummy-organism {{ dummy.dummy-organism.classes }}">
  organism +
  {{ dummy.dummy-organism.content }}
  {{# listItems.two }}
    {{> atoms-dummy-atom }}
  {{/ listItems.two }}
</div>

Template level - template & data & listitems

dummy-template.json

{
  "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"
		}
  }
}

dummy-template.listitems.json

{
  "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"
              }
          }
    }
}

dummy-template.mustache

<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,

• file.mustache
• file.md
• file.json
• file.two-columns.json
• file~2columns.json

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

• This works : {{> 00-atoms/10-images/image-768-ratio-1.77-01 }}
• This does not work : {{> atoms-image-1200-ratio-1.5-01 }}, from source filename image-1200-ratio-1.5-01.mustache
• And will not work either if we add starting digits to the imported atom so as to name it as such : {{> atoms-image-1200-ratio-1.5-01 }}, from source filename 04-image-1200-ratio-1.5-01.mustache

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!

pattern-lab/patternlab-node#539