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.

Sign up for GitHub

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

refactor: enable fileendings separated by more than one dot #1459

Draft
wants to merge 16 commits into
base: dev
Choose a base branch
from
Draft

refactor: enable fileendings separated by more than one dot #1459

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
5386288
refactor: enabled fileendings separated with more than one dot
mfranzke Dec 27, 2022
8dd40f4
Merge branch 'dev' into 1030-fully-support-htmltwig-suffix
mfranzke Dec 27, 2022
8e292d9
Merge branch 'dev' into 1030-fully-support-htmltwig-suffix
mfranzke Dec 28, 2022
452ad5e
refactor: we also want the pattern extension to include the full "ext…
mfranzke Dec 28, 2022
4cf86b6
docs: added entry regarding a multi dotted fileextension
mfranzke Dec 28, 2022
7e763c3
Merge branch 'dev' into 1030-fully-support-htmltwig-suffix
mfranzke Dec 28, 2022
0ada4f1
Merge branch 'dev' into 1030-fully-support-htmltwig-suffix
mfranzke Dec 29, 2022
ca8e50e
Merge branch 'dev' into 1030-fully-support-htmltwig-suffix
mfranzke Dec 30, 2022
195e671
Merge branch 'dev' into 1030-fully-support-htmltwig-suffix
mfranzke Jan 3, 2023
a0b1546
Merge branch 'dev' into 1030-fully-support-htmltwig-suffix
mfranzke Jan 8, 2023
351168e
Merge branch 'dev' into 1030-fully-support-htmltwig-suffix
mfranzke Jan 9, 2023
7359320
Merge branch 'dev' into 1030-fully-support-htmltwig-suffix
mfranzke Jan 14, 2023
775d485
Merge branch 'dev' into 1030-fully-support-htmltwig-suffix
mfranzke Jan 31, 2023
e940bc3
Merge branch 'dev' into 1030-fully-support-htmltwig-suffix
mfranzke Feb 1, 2023
9c014ca
Merge branch 'dev' into 1030-fully-support-htmltwig-suffix
mfranzke Feb 12, 2023
0e87f2d
Merge branch 'dev' into 1030-fully-support-htmltwig-suffix
mfranzke Mar 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 23 additions & 8 deletions packages/core/src/lib/object_factory.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,19 +41,29 @@ const Pattern = function (
*/
const pathObj = path.parse(this.relPath);

// We need to check for templates with a fileextension that contains multiple dots like e.g. .html.twig
if (
patternlab?.config?.patternExtension?.includes('.') &&
this.relPath.endsWith('.' + patternlab.config.patternExtension)
) {
this.fileExtension = '.' + patternlab.config.patternExtension; // e.g. '.html.twig'
this.fileName = path.basename(this.relPath, this.fileExtension); // e.g. 'colors'
} else {
this.fileExtension = pathObj.ext; // e.g. '.hbs'
this.fileName = pathObj.name; // e.g. 'colors'
}
this.subdir = pathObj.dir; // 'atoms/global'

const info = this.getPatternInfo(
pathObj,
patternlab,
isPromoteToFlatPatternRun ||
(patternlab &&
patternlab.config &&
patternlab.config.allPatternsAreDeeplyNested)
patternlab.config.allPatternsAreDeeplyNested),
this.fileName
);

this.fileName = pathObj.name; // 'colors'
this.subdir = pathObj.dir; // 'atoms/global'
this.fileExtension = pathObj.ext; // '.mustache'

// TODO: Remove if block when dropping ordering by prefix and keep else code
// (When we drop the info about the old ordering is deprecated)
if (
Expand Down Expand Up @@ -341,15 +351,20 @@ Pattern.prototype = {
*
* @param pathObj path.parse() object containing useful path information
*/
getPatternInfo: (pathObj, patternlab, isPromoteToFlatPatternRun) => {
getPatternInfo: (
pathObj,
patternlab,
isPromoteToFlatPatternRun,
filename
) => {
const info = {
// colors(.mustache) is deeply nested in atoms-/global/colors
patternlab: patternlab,
patternHasOwnDir: isPromoteToFlatPatternRun
? path.basename(pathObj.dir).replace(prefixMatcher, '') ===
pathObj.name.replace(prefixMatcher, '') ||
filename.replace(prefixMatcher, '') ||
path.basename(pathObj.dir).replace(prefixMatcher, '') ===
pathObj.name.split('~')[0].replace(prefixMatcher, '')
filename.split('~')[0].replace(prefixMatcher, '')
: false,
};

Expand Down
2 changes: 1 addition & 1 deletion packages/docs/src/docs/advanced-config-options.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ Possibility to define whether the initial viewport width on opening pattern lab

Sets default active pattern info code panel by file extension - if unset, uses the value out of _patternExtension_ config value, or instead use value `html` to display the html code initially, or the value defined for the _patternExtension_.

**default**: _patternExtension_ value (`"hbs"` | `"mustache"` | `"twig"` | `"html"`)
**default**: _patternExtension_ value (`"hbs"` | `"mustache"` | `"twig"` | `"html.twig"` | `"html"`)

## ishControlsHide

Expand Down
4 changes: 2 additions & 2 deletions packages/engine-handlebars/lib/engine_handlebars.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,8 +124,8 @@ const engine_handlebars = {
* assume it's already present
*/
spawnMeta: function (config) {
this.spawnFile(config, '_head.hbs');
this.spawnFile(config, '_foot.hbs');
this.spawnFile(config, '_head.' + config.patternExtension);
Copy link
Contributor

Choose a reason for hiding this comment

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

This could be dangerous.
When pattern lab discovers multiple pattern engines, it will try to spawn the file found in the engine's folder located under _meta/head...
In that case, the file will not be found, and an error will be thrown here

patternlab-node/packages/engine-handlebars/lib/engine_handlebars.js

Line 116 in 4cf86b6

const metaFileContent = fs.readFileSync(

You can either catch the error and ignore it, or you revert it to its former state.

Another issue could be, that by chance the file will be taken, but the output for the twig file will be overwritten by the content of the hbs file. In that case, it could lead to an error when serving pattern lab because it has a different rendering engine.

Copy link
Contributor

Choose a reason for hiding this comment

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

I would rather look into the engineFileExtensions and when the config.patternExtension is included there, output the required file. (In that case, we need to read the file we deliver with the engine from the _meta folder and spawn it as the configured extension in config.patternExtension.

this.spawnFile(config, '_foot.' + config.patternExtension);
},

/**
Expand Down
4 changes: 2 additions & 2 deletions packages/engine-mustache/lib/engine_mustache.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,8 +104,8 @@ const engine_mustache = {
* assume it's already present
*/
spawnMeta: function (config) {
this.spawnFile(config, '_head.mustache');
this.spawnFile(config, '_foot.mustache');
this.spawnFile(config, '_head.' + config.patternExtension);
this.spawnFile(config, '_foot.' + config.patternExtension);
},

// find and return any {{> template-name }} within pattern
Expand Down
7 changes: 5 additions & 2 deletions packages/engine-twig-php/lib/engine_twig_php.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ let patternLabConfig = {};
const engine_twig_php = {
engine: TwigRenderer,
engineName: 'twig-php',
engineFileExtension: '.twig',
engineFileExtension: ['.twig', '.html.twig'],
expandPartials: false,
findPartialsRE:
/{[%{]\s*.*?(?:extends|include|embed|from|import|use)\(?\s*['"](.+?)['"][\s\S]*?\)?\s*[%}]}/g,
Expand Down Expand Up @@ -123,7 +123,10 @@ const engine_twig_php = {
*/
spawnMeta(config) {
const { paths } = config;
['_head.twig', '_foot.twig'].forEach((fileName) => {
[
'_head.' + config.patternExtension,
'_foot.' + config.patternExtension,
].forEach((fileName) => {
const metaFilePath = path.resolve(paths.source.meta, fileName);
try {
fs.statSync(metaFilePath);
Expand Down
6 changes: 3 additions & 3 deletions packages/engine-twig/lib/engine_twig.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,7 @@ let patternLabConfig = {};
const engine_twig = {
engine: twing,
engineName: 'twig',
engineFileExtension: '.twig',
engineFileExtension: ['.twig', '.html.twig'],

// regexes, stored here so they're only compiled once
findPartialsRE:
Expand Down Expand Up @@ -277,8 +277,8 @@ const engine_twig = {
* assume it's already present
*/
spawnMeta: function (config) {
this.spawnFile(config, '_head.twig');
this.spawnFile(config, '_foot.twig');
this.spawnFile(config, '_head.' + config.patternExtension);
this.spawnFile(config, '_foot.' + config.patternExtension);
},

/**
Expand Down