Skip to content

Commit 8c205ee

Browse files
sghowerisghoweri
authored
Merge pull request #992 from JosefBredereck/feature/separated-pattern-folder
Added separated pattern-folder support
2 parents abf24d4 + 6a4cec2 commit 8c205ee

File tree

3 files changed

+169
-19
lines changed

3 files changed

+169
-19
lines changed

‎packages/core/src/lib/loadPattern.js

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,13 +23,13 @@ let fs = require('fs-extra'); //eslint-disable-line prefer-const
2323
// all its associated files, and records it in patternlab.patterns[]
2424
module.exports = function(relPath, patternlab) {
2525
const relativeDepth = (relPath.match(/\w(?=\\)|\w(?=\/)/g) || []).length;
26-
if (relativeDepth > 2) {
26+
if (relativeDepth > 3) {
2727
logger.warning('');
2828
logger.warning('Warning:');
2929
logger.warning(
3030
'A pattern file: ' +
3131
relPath +
32-
' was found greater than 2 levels deep from ' +
32+
' was found greater than 3 levels deep from ' +
3333
patternlab.config.paths.source.patterns +
3434
'.'
3535
);
@@ -39,6 +39,10 @@ module.exports = function(relPath, patternlab) {
3939
logger.warning(
4040
'[patternType]/[patternSubtype]/[patternName].[patternExtension]'
4141
);
42+
logger.warning('or');
43+
logger.warning(
44+
'[patternType]/[patternSubtype]/[patternName]/[patternName].[patternExtension]'
45+
);
4246
logger.warning('');
4347
logger.warning(
4448
'While Pattern Lab may still function, assets may 404 and frontend links may break. Consider yourself warned. '

‎packages/core/src/lib/object_factory.js

Lines changed: 54 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
'use strict';
22
const patternEngines = require('./pattern_engines');
33
const path = require('path');
4-
const extend = require('util')._extend;
54

65
// patternPrefixMatcher is intended to match the leading maybe-underscore,
76
// zero or more digits, and maybe-dash at the beginning of a pattern file name we can hack them
@@ -22,14 +21,37 @@ const Pattern = function(relPath, data, patternlab) {
2221
* @param {patternlab} rendered html files for the pattern
2322
*/
2423
const pathObj = path.parse(path.normalize(relPath));
24+
const info = {};
25+
// 00-colors(.mustache) is subbed in 00-atoms-/00-global/00-colors
26+
info.hasDir =
27+
path.basename(pathObj.dir).replace(patternPrefixMatcher, '') ===
28+
pathObj.name.replace(patternPrefixMatcher, '') ||
29+
path.basename(pathObj.dir).replace(patternPrefixMatcher, '') ===
30+
pathObj.name.split('~')[0].replace(patternPrefixMatcher, '');
31+
32+
info.dir = info.hasDir ? pathObj.dir.split(path.sep).pop() : '';
33+
info.dirLevel = pathObj.dir.split(path.sep).length;
34+
2535
this.relPath = path.normalize(relPath); // '00-atoms/00-global/00-colors.mustache'
2636
this.fileName = pathObj.name; // '00-colors'
2737
this.subdir = pathObj.dir; // '00-atoms/00-global'
2838
this.fileExtension = pathObj.ext; // '.mustache'
2939

3040
// this is the unique name, subDir + fileName (sans extension)
31-
this.name =
32-
this.subdir.replace(path.sep, '-') + '-' + this.fileName.replace('~', '-'); // '00-atoms-00-global-00-colors'
41+
this.name = '';
42+
if (info.hasDir) {
43+
let variant = '';
44+
45+
if (this.fileName.indexOf('~') !== -1) {
46+
variant = '-' + this.fileName.split('~')[1];
47+
}
48+
this.name = this.subdir.replace(/[\/\\]/g, '-') + variant;
49+
} else {
50+
this.name =
51+
this.subdir.replace(/[\/\\]/g, '-') +
52+
'-' +
53+
this.fileName.replace('~', '-'); // '00-atoms-00-global-00-colors'
54+
}
3355

3456
// the JSON used to render values in the pattern
3557
this.jsonFileData = data || {};
@@ -53,24 +75,24 @@ const Pattern = function(relPath, data, patternlab) {
5375
}, '')
5476
.trim(); //this is the display name for the ui. strip numeric + hyphen prefixes
5577

56-
// the top-level pattern group this pattern belongs to. 'atoms'
57-
this.patternGroup = this.subdir
58-
.split(path.sep)[0]
59-
.replace(patternPrefixMatcher, '');
60-
6178
//00-atoms if needed
62-
this.patternType = this.subdir.split(path.sep)[0];
79+
this.patternType = this.getDirLevel(0, info);
6380

64-
// the sub-group this pattern belongs to.
65-
this.patternSubGroup = path
66-
.basename(this.subdir)
67-
.replace(patternPrefixMatcher, ''); // 'global'
81+
// the top-level pattern group this pattern belongs to. 'atoms'
82+
this.patternGroup = this.patternType.replace(patternPrefixMatcher, '');
6883

6984
//00-colors if needed
70-
this.patternSubType = path.basename(this.subdir);
85+
this.patternSubType = this.getDirLevel(1, info);
86+
87+
// the sub-group this pattern belongs to.
88+
this.patternSubGroup = this.patternSubType.replace(patternPrefixMatcher, ''); // 'global'
7189

7290
// the joined pattern group and subgroup directory
73-
this.flatPatternPath = this.subdir.replace(/[\/\\]/g, '-'); // '00-atoms-00-global'
91+
this.flatPatternPath = info.hasDir
92+
? this.subdir
93+
.replace(/[/\\]/g, '-')
94+
.replace(new RegExp('-' + info.dir + '$'), '')
95+
: this.subdir.replace(/[\/\\]/g, '-'); // '00-atoms-00-global'
7496

7597
// calculated path from the root of the public directory to the generated
7698
// (rendered!) html file for this pattern, to be shown in the iframe
@@ -189,6 +211,21 @@ Pattern.prototype = {
189211
findPartial: function(partialString) {
190212
return this.engine.findPartial(partialString);
191213
},
214+
215+
getDirLevel: function(level, info) {
216+
const items = this.subdir.split(path.sep);
217+
if (info.hasDir) {
218+
items.pop();
219+
}
220+
221+
if (items[level]) {
222+
return items[level];
223+
} else if (items[level - 1]) {
224+
return items[level - 1];
225+
} else {
226+
return '';
227+
}
228+
},
192229
};
193230

194231
// Pattern static methods
@@ -206,15 +243,15 @@ Pattern.createEmpty = function(customProps, patternlab) {
206243
}
207244

208245
const pattern = new Pattern(relPath, null, patternlab);
209-
return extend(pattern, customProps);
246+
return Object.assign(pattern, customProps);
210247
};
211248

212249
// factory: creates an Pattern object on-demand from a hash; the hash accepts
213250
// parameters that replace the positional parameters that the Pattern
214251
// constructor takes.
215252
Pattern.create = function(relPath, data, customProps, patternlab) {
216253
const newPattern = new Pattern(relPath || '', data || null, patternlab);
217-
return extend(newPattern, customProps);
254+
return Object.assign(newPattern, customProps);
218255
};
219256

220257
const CompileState = {

‎packages/core/test/object_factory_tests.js

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,66 @@ tap.test('test Pattern initializes correctly', function(test) {
6363
test.end();
6464
});
6565

66+
tap.test(
67+
'test Pattern initializes correctly with pattern in sepatated directory',
68+
function(test) {
69+
var p = new Pattern('00-atoms/00-global/00-colors/colors.mustache', {
70+
d: 123,
71+
});
72+
test.equals(
73+
p.relPath,
74+
'00-atoms' +
75+
path.sep +
76+
'00-global' +
77+
path.sep +
78+
'00-colors' +
79+
path.sep +
80+
'colors.mustache'
81+
);
82+
test.equals(p.name, '00-atoms-00-global-00-colors');
83+
test.equals(
84+
p.subdir,
85+
'00-atoms' + path.sep + '00-global' + path.sep + '00-colors'
86+
);
87+
test.equals(p.fileName, 'colors');
88+
test.equals(p.fileExtension, '.mustache');
89+
test.equals(p.jsonFileData.d, 123);
90+
test.equals(p.patternBaseName, 'colors');
91+
test.equals(p.patternName, 'Colors');
92+
test.equals(
93+
p.getPatternLink(pl),
94+
'00-atoms-00-global-00-colors' +
95+
path.sep +
96+
'00-atoms-00-global-00-colors.rendered.html'
97+
);
98+
test.equals(p.patternGroup, 'atoms');
99+
test.equals(p.patternSubGroup, 'global');
100+
test.equals(p.flatPatternPath, '00-atoms-00-global');
101+
test.equals(p.patternPartial, 'atoms-colors');
102+
test.equals(p.template, '');
103+
test.equals(p.patternPartialCode, '');
104+
test.equals(p.lineage.length, 0);
105+
test.equals(p.lineageIndex.length, 0);
106+
test.equals(p.lineageR.length, 0);
107+
test.equals(p.lineageRIndex.length, 0);
108+
test.equals(p.patternState, '');
109+
test.end();
110+
}
111+
);
112+
113+
tap.test('test Pattern name for variants correctly initialzed', function(test) {
114+
var p1 = new Pattern('00-atoms/00-global/00-colors/colors~variant.mustache', {
115+
d: 123,
116+
});
117+
var p2 = new Pattern(
118+
'00-atoms/00-global/00-colors/colors~variant-minus.json',
119+
{ d: 123 }
120+
);
121+
test.equals(p1.name, '00-atoms-00-global-00-colors-variant');
122+
test.equals(p2.name, '00-atoms-00-global-00-colors-variant-minus');
123+
test.end();
124+
});
125+
66126
tap.test('test Pattern with one-directory subdir works as expected', function(
67127
test
68128
) {
@@ -118,6 +178,49 @@ tap.test('test Pattern capitalizes patternDisplayName correctly', function(
118178
test.end();
119179
});
120180

181+
tap.test('test Pattern get dir level no sepatated pattern directory', function(
182+
test
183+
) {
184+
var p = new Pattern('00-atoms/00-global/00-colors-alt.mustache', { d: 123 });
185+
console.log(p);
186+
test.equals(p.getDirLevel(0, { hasDir: false, dirLevel: 2 }), '00-atoms');
187+
test.equals(p.getDirLevel(1, { hasDir: false, dirLevel: 2 }), '00-global');
188+
test.equals(p.getDirLevel(3, { hasDir: false, dirLevel: 2 }), '');
189+
var p = new Pattern('00-atoms/00-colors-alt.mustache', { d: 123 });
190+
test.equals(p.getDirLevel(0, { hasDir: false, dirLevel: 1 }), '00-atoms');
191+
test.equals(p.getDirLevel(1, { hasDir: false, dirLevel: 1 }), '00-atoms');
192+
test.equals(p.getDirLevel(3, { hasDir: false, dirLevel: 1 }), '');
193+
var p = new Pattern('00-colors-alt.mustache', { d: 123 });
194+
test.equals(p.getDirLevel(0, { hasDir: false, dirLevel: 0 }), '');
195+
test.equals(p.getDirLevel(1, { hasDir: false, dirLevel: 0 }), '');
196+
test.equals(p.getDirLevel(3, { hasDir: false, dirLevel: 0 }), '');
197+
test.end();
198+
});
199+
200+
tap.test(
201+
'test Pattern get dir level with sepatated pattern directory',
202+
function(test) {
203+
var p = new Pattern(
204+
'00-atoms/00-global/00-colors-alt/colors-alt.mustache',
205+
{ d: 123 }
206+
);
207+
test.equals(p.getDirLevel(0, { hasDir: true, dirLevel: 3 }), '00-atoms');
208+
test.equals(p.getDirLevel(1, { hasDir: true, dirLevel: 3 }), '00-global');
209+
test.equals(p.getDirLevel(3, { hasDir: true, dirLevel: 3 }), '');
210+
var p = new Pattern('00-atoms/00-colors-alt/colors-alt.mustache', {
211+
d: 123,
212+
});
213+
test.equals(p.getDirLevel(0, { hasDir: true, dirLevel: 2 }), '00-atoms');
214+
test.equals(p.getDirLevel(1, { hasDir: true, dirLevel: 2 }), '00-atoms');
215+
test.equals(p.getDirLevel(3, { hasDir: true, dirLevel: 2 }), '');
216+
var p = new Pattern('00-colors-alt/colors-alt.mustache', { d: 123 });
217+
test.equals(p.getDirLevel(0, { hasDir: true, dirLevel: 1 }), '');
218+
test.equals(p.getDirLevel(1, { hasDir: true, dirLevel: 1 }), '');
219+
test.equals(p.getDirLevel(3, { hasDir: true, dirLevel: 1 }), '');
220+
test.end();
221+
}
222+
);
223+
121224
tap.test('The forms of Pattern.getPatternLink() work as expected', function(
122225
test
123226
) {
@@ -146,5 +249,11 @@ tap.test('The forms of Pattern.getPatternLink() work as expected', function(
146249
path.sep +
147250
'00-atoms-00-global-00-colors.markup-only.html'
148251
);
252+
test.equals(
253+
p.getPatternLink(pl, 'custom', '.custom-extension'),
254+
'00-atoms-00-global-00-colors' +
255+
path.sep +
256+
'00-atoms-00-global-00-colors.custom-extension'
257+
);
149258
test.end();
150259
});

0 commit comments

Comments
 (0)