Skip to content
This repository was archived by the owner on Dec 10, 2019. It is now read-only.

Commit 3654730

Browse files
committed
documentation and cleanup
closes #4
1 parent d252c19 commit 3654730

File tree

4 files changed

+62
-14
lines changed

4 files changed

+62
-14
lines changed

README.md

Lines changed: 39 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,39 @@
1-
# plugin-node-tab
1+
![license](https://img.shields.io/github/license/pattern-lab/plugin-node-tab.svg)
2+
[![npm](https://img.shields.io/npm/v/plugin-node-tab.svg)](https://www.npmjs.com/package/plugin-node-tab)
3+
[![Gitter](https://img.shields.io/gitter/room/pattern-lab/php.svg)](https://gitter.im/pattern-lab/php)
4+
5+
# Tab Plugin for Pattern Lab Node
6+
7+
The Tab Plugin allows Pattern Lab Node users to see sibling files next to a pattern in the filesystem, displaying them as additional tabs alongside the template and HTML tabs in both the Style Guide frontend and the single-pattern info modal.
8+
9+
## Installation
10+
11+
To add the Tab Plugin to your project using [npm](http://npmjs.com/) type:
12+
13+
npm install plugin-node-tab --save
14+
15+
Or add it directly to your project's `package.json` file and run `npm install`
16+
17+
Post installation, the plugin will prompt you for what filetypes you want to add tabs for.
18+
19+
```
20+
$ Specify filetype(s) to create a tab for. Separate multiple filetypes with a space, pipe or comma. Example: js css >>>
21+
```
22+
23+
## Expected Structure
24+
25+
With the Tab Plugin installed, you can now accompany pattern template files with the file types of your choice and expect Pattern Lab to show them as tabs. The file structure would be similar to that of `pattern.json` or `pattern.md` files, except that it will be `pattern.<<type>>`.
26+
27+
For example, if we added a` css` tab:
28+
29+
```
30+
./_patterns/foo/bar
31+
├── pattern.mustache (the pattern template)
32+
├── pattern.md (optional pattern-specific documentation and metadata)
33+
├── pattern.json (optional pattern-specific data)
34+
└── pattern.css (the tab you added.)
35+
```
36+
37+
## Enabling / Disabling the Plugin
38+
39+
After install, you may manually enable or disable the plugin by removing it from the `patternlab-config.json` file. Installation added a key called `plugin-node-tab` to it. In the future this will be possible via CLI.

dist/js/plugin-node-tab.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
11
var PluginTab = {
22

3+
/**
4+
* The function defined as the onready callback within the plugin configuration.
5+
*/
36
init: function () {
47

58
//placeholder that will be replaced during configuation
9+
//most plugins could probably just implement logic here instead.
610
/*SNIPPETS*/
711

812
}

index.js

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,17 +14,19 @@ function onPatternIterate(patternlab, pattern) {
1414

1515
/**
1616
* Define what events you wish to listen to here
17+
* For a full list of events - check out https://github.com/pattern-lab/patternlab-node/wiki/Creating-Plugins#events
1718
* @param patternlab - global data store which has the handle to the event emitter
1819
*/
1920
function registerEvents(patternlab) {
20-
21-
//TODO: list all possible events
21+
//register our handler at the appropriate time of execution
2222
patternlab.events.on('patternlab-pattern-write-end', onPatternIterate);
2323
}
2424

2525
/**
2626
* A single place to define the frontend configuration
27-
*/
27+
* This configuration is outputted to the frontend explicitly as well as included in the plugins object.
28+
*
29+
*/
2830
function getPluginFrontendConfig() {
2931
return {
3032
'name':'pattern-lab\/' + pluginName,
@@ -37,7 +39,7 @@ function getPluginFrontendConfig() {
3739
}
3840

3941
/**
40-
* The entry point for the plugin. You should not have to alter this code.
42+
* The entry point for the plugin. You should not have to alter this code much under many circumstances.
4143
* Instead, alter getPluginFrontendConfig() and registerEvents() methods
4244
*/
4345
function pluginInit(patternlab) {

src/tab-loader.js

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,15 @@ const fs = require('fs-extra'),
44
path = require('path'),
55
fileTypes = require('./../package.json').fileTypes;
66

7+
/**
8+
* The backend method that is called during the patternlab-pattern-write-end event.
9+
* Responsible for looking for a companion filetype file alongside a pattern file and outputting it if found.
10+
* @param patternlab - the global data store
11+
* @param pattern - the pattern object being iterated over
12+
*/
713
function findTab(patternlab, pattern) {
814

15+
//exit if either of these two parameters are missing
916
if (!patternlab) {
1017
console.error('plugin-node-tab: patternlab object not provided to findTab');
1118
process.exit(1);
@@ -19,6 +26,7 @@ function findTab(patternlab, pattern) {
1926
//derive the custom filetype paths from the pattern relPath
2027
var customFileTypePath = path.join(patternlab.config.paths.source.patterns, pattern.relPath);
2128

29+
//loop through all configured types
2230
for (let i = 0; i < fileTypes.length; i++) {
2331

2432
customFileTypePath = customFileTypePath.substr(0, customFileTypePath.lastIndexOf(".")) + '.' + fileTypes[i];
@@ -30,30 +38,26 @@ function findTab(patternlab, pattern) {
3038
try {
3139
var tabFileNameStats = fs.statSync(tabFileName);
3240
} catch (err) {
33-
//not a file
41+
//not a file - move on quietly
3442
}
3543
if (tabFileNameStats && tabFileNameStats.isFile()) {
3644
if (patternlab.config.debug) {
3745
console.log('plugin-node-tab: copied pattern-specific custom file for ' + pattern.patternPartial);
3846
}
47+
48+
//copy the file to our output target if found
3949
fs.copySync(tabFileName, customFileTypeOutputPath);
4050
} else {
51+
52+
//otherwise write nothing to the same location - this prevents GET errors on the tab.
4153
fs.outputFileSync(customFileTypeOutputPath, '');
4254
}
4355
}
4456
catch (err) {
4557
console.log('plugin-node-tab:There was an error parsing sibling JSON for ' + pattern.relPath);
4658
console.log(err);
4759
}
48-
49-
50-
51-
5260
}
53-
54-
55-
56-
5761
}
5862

5963
module.exports = findTab;

0 commit comments

Comments
 (0)