search

pattern-lab / starterkit-mustache-acidtest

Cross-platform acid tests for Pattern Lab
MIT License
2 stars 2 forks source link

Distinct inheritance model between Node & PHP versions? #4

Open Martin-B opened 7 years ago

Martin-B commented 7 years ago

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

Thank you so much for having a look at my issue

Output of Node vs PHP

Node

=== 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 ===
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>
Martin-B commented 7 years ago

I have forked the repo in order to have write access and create a pull request on a new branch.

[node-php-diff-issue-4 34b04c0] Test case files for patternlab acid test starter kit @ https://github.com/pattern-lab/starterkit-mustache-acidtest/issues/4

Thank you for taking the time to take a look, let me know if there is something I do not understand.

In all cases, the current node model does not seem to fit the bill for the sort of work I have ahead of me, it implies creating a lot of extra files and duplicating code, when compared with the inheritance model offered in the PHP version.

I will test the Altin Data Inheritance plugin again for the node distro, in a fresh install, it did not seem to get me anywhere when trying to load it up in my project.

bmuenzenmeyer commented 7 years ago

@Martin-B thanks so much for the thorough report - I will make sure to get to the bottom of this as from a node standpoint after the holiday

bmuenzenmeyer commented 7 years ago

FYI @Martin-B your Node organism screenshot is the same as your atom one - I will generate myself soon enough, but thought you'd like to know

please double-check them all actually, the node template file is misnamed it looks like

bmuenzenmeyer commented 7 years ago

i'll be troubleshooting this and reporting back my thoughts in real time.

my first inkling is that this test case needs to be further reduced. I only feel that way because I know how the Pattern Lab Node algorithm works - it has separate logic for patterns with listitems than for patterns without. isolating both use cases will help me debug further. I don't expect you to necessarily do this (you've already gone quite above and beyond with your analysis so far), I am just providing some thinking out loud to you

i know there are a couple reported limitations with listitems already in the issue log- but that's hardly a credible excuse

Martin-B commented 7 years ago

Thank your for having a look @bmuenzenmeyer!

I have fixed the screenshot nomenclature and linking, thanks for pointing it out, my files were all messed-up indeed.

In order to simplify this test case, do the following :

1

Comment out the following line in the file dummy-atom.mustache, this will silence the output of the list items data pipeline and clear the view for a better understanding : <!-- <blockquote>{{ dummy-list.dummy-list-atom.listitem }}</blockquote> -->

2

Focus you attention on only two views : the template view in the node version and in the PHP version, this is where everything can be evaluated.

Tweak the data

In order to deepen the diagnosis of the problem, I suggest you do the following, alternatively, and look at the results in the template view :

In dummy-organism.json

Replace the following objects : 

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

... with an empty object ...

{ }

In dummy-template.json

First, return the content of the dummy-organisms.json to it's initial values and in dummy-template.json replace this : 

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

... with this ...

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

This last manipulation effectively clears the way for the organism level atom data to be expressed at the template level.

My experience with the PHP version is that the data inheritance model allows for deep inheritance out of the box and this depth is slightly increased with the usage of the data inheritance plugin, which suits my use case even better.

As far as I could tell, the override behavior for listitems is symmetrical with that of the data in both versions, but I have not pushed the test past an initial functional demonstration in PHP. The limitations in the Node model for data seem to be the the same for listitems. As for the PHP version, I can obtain the sort of flexibility I need whether we are talking of data or listitems, both can be infinitely substituted along the chain.

The glitch is that a considerable amount of work has been invested already in automating the packaging of the style guide output and the hosting and deployment side of things with the node version. Hence my preference to get the Node version working like the PHP version.

Martin-B commented 6 years ago

I have migrated all my project into the PHP distribution. I still needed the convenience of piping and watching various files with gulp and doing so, I was not loosing all the work invested on that front. I have been inspired by this post to integrate Gulp into a patternlab-php distribution: https://webdesign.tutsplus.com/tutorials/combining-pattern-lab-with-gulp-for-improved-workflow--cms-22187