Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix default behavior of nested patterns #1232

Merged
merged 3 commits into from
Aug 23, 2020
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
9 changes: 6 additions & 3 deletions packages/core/src/lib/object_factory.js
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,10 @@ const Pattern = function(
const info = this.getPatternInfo(
pathObj,
patternlab,
isPromoteToFlatPatternRun
isPromoteToFlatPatternRun ||
(patternlab &&
patternlab.config &&
patternlab.config.allPatternsAreDeeplyNested)
Comment on lines +45 to +47
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@JosefBredereck I can't wait for when we can switch to using Node 14+ which now supports optional chaining natively, no Babel transpiling required!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, I was using patternlab?.config?.allPatternsAreDeeplyNested first, but then it did not work. (Had still V13.x)

But we need to be careful since not everyone uses V14+ now and maybe not for a long time.

);

this.fileName = pathObj.name; // '00-colors'
Expand Down Expand Up @@ -258,7 +261,7 @@ Pattern.prototype = {
*
* @param {Patternlab} patternlab Current patternlab instance
*/
promoteFromFlatPatternToDirectory: function(patternlab) {
promoteFromDirectoryToFlatPattern: function(patternlab) {
const p = new Pattern(this.relPath, this.jsonFileData, patternlab, true);
// Only reset the specific fields, not everything
Object.assign(this, {
Expand Down Expand Up @@ -287,7 +290,7 @@ Pattern.prototype = {
const info = {
// 00-colors(.mustache) is deeply nested in 00-atoms-/00-global/00-colors
patternlab: patternlab,
patternHasOwnDir: !isPromoteToFlatPatternRun
patternHasOwnDir: isPromoteToFlatPatternRun
? path.basename(pathObj.dir).replace(prefixMatcher, '') ===
pathObj.name.replace(prefixMatcher, '') ||
path.basename(pathObj.dir).replace(prefixMatcher, '') ===
Expand Down
7 changes: 3 additions & 4 deletions packages/core/src/lib/readDocumentation.js
Original file line number Diff line number Diff line change
Expand Up @@ -56,12 +56,11 @@ module.exports = function(pattern, patternlab) {
}

if (
!markdownObject.hasOwnProperty('deeplyNested') ||
(markdownObject.hasOwnProperty('deeplyNested') &&
!markdownObject.deeplyNested)
markdownObject.hasOwnProperty('deeplyNested') &&
markdownObject.deeplyNested
) {
// Reset to pattern without own pattern-directory
pattern.promoteFromFlatPatternToDirectory(patternlab);
pattern.promoteFromDirectoryToFlatPattern(patternlab);
}
} else {
logger.warning(`error processing markdown for ${pattern.patternPartial}`);
Expand Down
25 changes: 11 additions & 14 deletions packages/core/test/object_factory_tests.js
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ tap.test(
path.sep +
'colors.mustache'
);
test.equals(p.name, '00-atoms-00-global-00-colors');
test.equals(p.name, '00-atoms-00-global-colors');
test.equals(p.subdir, path.join('00-atoms', '00-global', '00-colors'));
test.equals(p.fileName, 'colors');
test.equals(p.fileExtension, '.mustache');
Expand All @@ -88,9 +88,9 @@ tap.test(
test.equals(p.patternName, 'Colors');
test.equals(
p.getPatternLink(pl),
'00-atoms-00-global-00-colors' +
'00-atoms-00-global-colors' +
path.sep +
'00-atoms-00-global-00-colors.rendered.html'
'00-atoms-00-global-colors.rendered.html'
);
test.equals(p.patternGroup, 'atoms');
test.equals(p.patternSubGroup, 'global');
Expand All @@ -117,8 +117,8 @@ tap.test('test Pattern name for variants correctly initialzed', function(test) {
d: 123,
}
);
test.equals(p1.name, '00-atoms-00-global-00-colors-variant');
test.equals(p2.name, '00-atoms-00-global-00-colors-variant-minus');
test.equals(p1.name, '00-atoms-00-global-colors-variant');
test.equals(p2.name, '00-atoms-00-global-colors-variant-minus');
Comment on lines -120 to +121
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So glad to see this going away -- this has always been one of those annoying things with how the filename / URL structure was assembled 👍

test.end();
});

Expand Down Expand Up @@ -153,10 +153,10 @@ tap.test('test Pattern with own-directory gets resetted as expected', function(
test
) {
var p = new Pattern('00-atoms/00-button/button.mustache', { d: 123 }, pl);
p.promoteFromFlatPatternToDirectory(pl);
p.promoteFromDirectoryToFlatPattern(pl);

test.equals(p.relPath, path.join('00-atoms', '00-button', 'button.mustache'));
test.equals(p.name, '00-atoms-00-button-button');
test.equals(p.name, '00-atoms-00-button');
test.equals(p.subdir, path.join('00-atoms', '00-button'));
test.equals(p.fileName, 'button');
test.equals(p.fileExtension, '.mustache');
Expand All @@ -165,13 +165,10 @@ tap.test('test Pattern with own-directory gets resetted as expected', function(
test.equals(p.patternName, 'Button');
test.equals(
p.getPatternLink(pl),
path.join(
'00-atoms-00-button-button',
'00-atoms-00-button-button.rendered.html'
)
path.join('00-atoms-00-button', '00-atoms-00-button.rendered.html')
);
test.equals(p.patternGroup, 'atoms');
test.equals(p.flatPatternPath, '00-atoms-00-button');
test.equals(p.flatPatternPath, '00-atoms');
test.equals(p.patternPartial, 'atoms-button');
test.equals(p.template, '');
test.equals(p.lineage.length, 0);
Expand Down Expand Up @@ -255,7 +252,7 @@ tap.test(
'00-atoms/00-global/00-colors-alt/colors-alt~variant.mustache',
{ d: 123 }
);
test.equals(p.name, '00-atoms-00-global-00-colors-alt-variant');
test.equals(p.name, '00-atoms-00-global-colors-alt-variant');
test.equals(p.flatPatternPath, '00-atoms-00-global');
test.equals(p.patternBaseName, 'colors-alt-variant');

Expand Down Expand Up @@ -295,7 +292,7 @@ tap.test('test Patterns that are nested deeper without own directory', function(
'00-atoms/00-global/00-random-folder/00-another-folder/00-colors-alt/colors-alt.mustache',
{ d: 123 }
);
test.equals(p.name, '00-atoms-00-global-00-colors-alt');
test.equals(p.name, '00-atoms-00-global-colors-alt');
test.equals(p.flatPatternPath, '00-atoms-00-global');

var p = new Pattern(
Expand Down
2 changes: 2 additions & 0 deletions packages/docs/src/docs/pattern-organization.md
Original file line number Diff line number Diff line change
Expand Up @@ -59,3 +59,5 @@ The `deeplyNested` attribute is used to toggle the pattern building behavior and

- **deeplyNested not set or false** - Pattern won't be handled as a deeply nested pattern
- **deeplyNested: true** - Pattern will be handled like mentioned under [Deeper Nesting](#heading-deeper-nesting)

To turn on this behavior globally, just add `"allPatternsAreDeeplyNested": true` to your `patternlab-config.json`.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

+1 so existing PL installs not already switched to using allPatternsAreDeeplyNested won't run into any file name / path changes; just applies to the new spec we're moving towards.