Skeletor Pattern Lab Plugin
This plugin runs Pattern Lab and is part of the Skeletor ecosystem. To learn more about Skeletor, go here.
Installation
Install this plugin into your Skeletor-equipped project via the following terminal command:
npm install --save-dev @deg-skeletor/plugin-patternlab
Configuration
Example Configuration
{
patternLabConfig: {
"cacheBust": true,
"cleanPublic" : true,
"defaultPattern": "all",
"defaultShowPatternInfo": false,
"ishControlsHide": {
"s": false,
"m": false,
"l": false,
"full": false,
"random": false,
"disco": true,
"hay": true,
"mqs": false,
"find": false,
"views-all": false,
"views-annotations": false,
"views-code": false,
"views-new": false,
"tools-all": false,
"tools-docs": false
},
"ishViewportRange": {
"s": [240, 500],
"m": [500, 800],
"l": [800, 2600]
},
"logLevel": "info",
"outputFileSuffixes": {
"rendered": ".rendered",
"rawTemplate": "",
"markupOnly": ".markup-only"
},
"paths" : {
"source" : {
"root": "./source/",
"patterns" : "./source/_patterns/",
"data" : "./source/_data/",
"meta": "./source/_meta/",
"annotations" : "./source/_annotations/",
"styleguide" : "./node_modules/styleguidekit-assets-default/dist/",
"patternlabFiles" : "./node_modules/styleguidekit-mustache-default/views"
},
"public" : {
"root" : "./public/",
"patterns" : "./public/patterns/",
"data" : "./public/styleguide/data/",
"annotations" : "./public/annotations/",
"styleguide" : "./public/styleguide/"
}
},
"patternExtension": "mustache",
"patternStateCascade": ["inprogress", "inreview", "complete"],
"patternExportDirectory": "",
"patternExportPatternPartials": [],
"serverOptions": {
"wait": 1000
},
"starterkitSubDir": "dist",
"styleGuideExcludes": [],
"theme": {
"color": "dark",
"density": "compact",
"layout": "horizontal"
}
},
method: 'build',
methodArgs: [],
patternExport: {
patternGroups: [
{
patterns: 'components/*',
dest: './dist/patterns/',
includeHeadFoot: false,
flatten: false
},
{
patterns: 'pages/*',
dest: './dist/patterns/',
includeHeadFoot: true,
flatten: true
}
],
assetPathReplacements: [
{
path: '../../images/',
replacementPath: '/images/'
},
{
path: '../../css/',
replacementPath: '/styles/'
}
]
}
}
Configuration Options
patternLabConfig
Type: Object
The configuratin object for Pattern Lab. See the official Pattern Lab documentation for configuration details.
method (optional)
Type: String
The Pattern Lab method to execute. If omitted, this option defaults to build
. Acceptable values include build
, patternsonly
, version
, help
, liststarterkits
, and loadstarterkit
.
methodArgs (optional)
Type: Array
An array of arguments to pass to the Pattern Lab method specified in the method
configuration option. For example, the value of this option could be ['@deg-skeletor/starterkit-mustache-default']
for the loadstarterkit
method.
patternExport (optional)
Type: Object
An optional configuration object for exporting patterns.
patternExport.patternGroups
Type: Array
An array of one or more pattern group objects, which define groups of patterns to export. A pattern group contains the following options:
patternGroup.patterns
Type: String
The path to the patterns to be exported. Globbing is supported. For example, components/*
would export all patterns within the components
directory.
patternGroup.dest
Type: String
The base destination directory to export the patterns to. Example: ./dist/patterns
. See the patternGroup.flatten
option below for details on how exported patterns are organized within this base destination directory.
patternGroup.includeHeadFoot (optional)
Type: Boolean
Default: false
A flag for including the pattern header and footer in the exported patterns. If false
, only a pattern's HTML will be exported.
patternGroup.flatten (optional)
Type: Boolean
Default: false
A flag for flattening all of the exported pattern files within the base destination directory. If false
, pattern files will be exported to sub-directories within the destination directory that mimic the structure of the source pattern files. For example, given a base destination directory of ./dist/patterns
, a components/frame/header.mustache
pattern would be exported to ./dist/patterns/frame/header.html
.
patternExport.assetPathReplacements
Type: Array
An array of one or more asset path replacement objects. Path replacement is useful for updating portions of asset paths (the src
of an <img>
, for example) within the HTML of patterns during export. For example, you may want to update the paths within the src
of all <img>
tags from ../../images/
to /images/
. A path replacement object contains the following options:
assetPathReplacement.path
Type: String
The asset path to target for replacement. For example, ../../images/
.
assetPathReplacement.replacementPath
Type: String
The path to replace targeted asset paths with. For example, /images/
.