@deg-skeletor/plugin-patternlab

3.2.1 • Public • Published

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/.

Package Sidebar

Install

npm i @deg-skeletor/plugin-patternlab

Weekly Downloads

5

Version

3.2.1

License

ISC

Unpacked Size

46.1 kB

Total Files

18

Last publish

Collaborators

  • heaper
  • briangraves
  • aladage
  • jlawhorn
  • alejcerro