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.

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

Addon Storysource improvements #3040

Merged
merged 11 commits into from
Feb 20, 2018
Merged
27 changes: 14 additions & 13 deletions ADDONS_SUPPORT.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,17 @@

| |[React](app/react)|[React Native](app/react-native)|[Vue](app/vue)|[Angular](app/angular)| [Polymer](app/polymer)|
| ----------- |:-------:|:-------:|:-------:|:-------:|:-------:|
|[a11y](addons/a11y) |+| | | | |
|[actions](addons/actions) |+|+|+|+|+|
|[background](addons/background)|+| | | | |
|[centered](addons/centered) |+| |+| | |
|[events](addons/events) |+| | | | |
|[graphql](addons/graphql) |+| | | | |
|[info](addons/info) |+| | | | |
|[jest](addons/jest) |+| | | | |
|[knobs](addons/knobs) |+|+|+|+|+|
|[links](addons/links) |+|+|+|+| |
|[notes](addons/notes) |+| |+|+|+|
|[storyshots](addons/storyshots)|+|+|+|+| |
|[viewport](addons/viewport) |+| | | | |
|[a11y](addons/a11y) |+| | | | |
|[actions](addons/actions) |+|+|+|+|+|
|[background](addons/background) |+| | | | |
|[centered](addons/centered) |+| |+| | |
|[events](addons/events) |+| | | | |
|[graphql](addons/graphql) |+| | | | |
|[info](addons/info) |+| | | | |
|[jest](addons/jest) |+| | | | |
|[knobs](addons/knobs) |+|+|+|+|+|
|[links](addons/links) |+|+|+|+| |
|[notes](addons/notes) |+| |+|+|+|
|[storyshots](addons/storyshots) |+|+|+|+| |
|[storysource](addons/storysource)|+| |+|+|+|
|[viewport](addons/viewport) |+| | | | |
23 changes: 23 additions & 0 deletions __mocks__/inject-decorator.ugly-comments-stories.txt
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
/* global window */
/* eslint-disable global-require, import/no-dynamic-require */

import React from 'react';

/*
eslint-disable some kind
of multi line ignore, though
I'm not sure it's possible.
*/

import { storiesOf } from '@storybook/react';

/* eslint-disable-line */ const x = 0;

// eslint-disable-line
storiesOf('Foo', module)
.add('bar', () => <div>baz</div>);

/*
This is actually a good comment that will help
users to understand what's going on here.
*/
3 changes: 2 additions & 1 deletion addons/storysource/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,8 @@
"acorn-jsx": "^4.1.1",
"acorn-stage3": "^0.5.0",
"estraverse": "^4.2.0",
"line-column": "^1.0.2",
"loader-utils": "^1.1.0",
"prettier": "^1.10.2",
"prop-types": "^15.5.10",
"react-syntax-highlighter": "^7.0.0"
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@ exports[`inject-decorator positive - angular calculates "adds" map 1`] = `
Object {
"Custom|ng-content@Default": Object {
"endLoc": Object {
"col": 3,
"col": 2,
"line": 15,
},
"startLoc": Object {
"col": 44,
"col": 43,
"line": 10,
},
},
Expand Down Expand Up @@ -38,141 +38,141 @@ exports[`inject-decorator positive calculates "adds" map 1`] = `
Object {
"Addons|Info.Decorator@Use Info as story decorator": Object {
"endLoc": Object {
"col": 74,
"col": 73,
"line": 137,
},
"startLoc": Object {
"col": 8,
"col": 7,
"line": 137,
},
},
"Addons|Info.GitHub issues@#1814": Object {
"endLoc": Object {
"col": 5,
"col": 4,
"line": 152,
},
"startLoc": Object {
"col": 3,
"col": 2,
"line": 146,
},
},
"Addons|Info.Markdown@Displays Markdown in description": Object {
"endLoc": Object {
"col": 97,
"col": 96,
"line": 44,
},
"startLoc": Object {
"col": 3,
"col": 2,
"line": 43,
},
},
"Addons|Info.Options.TableComponent@Use a custom component for the table": Object {
"endLoc": Object {
"col": 42,
"col": 41,
"line": 130,
},
"startLoc": Object {
"col": 3,
"col": 2,
"line": 127,
},
},
"Addons|Info.Options.header@Shows or hides Info Addon header": Object {
"endLoc": Object {
"col": 42,
"col": 41,
"line": 60,
},
"startLoc": Object {
"col": 3,
"col": 2,
"line": 56,
},
},
"Addons|Info.Options.inline@Inlines component inside story": Object {
"endLoc": Object {
"col": 42,
"col": 41,
"line": 52,
},
"startLoc": Object {
"col": 3,
"col": 2,
"line": 48,
},
},
"Addons|Info.Options.propTables@Shows additional component prop tables": Object {
"endLoc": Object {
"col": 42,
"col": 41,
"line": 76,
},
"startLoc": Object {
"col": 3,
"col": 2,
"line": 72,
},
},
"Addons|Info.Options.propTablesExclude@Exclude component from prop tables": Object {
"endLoc": Object {
"col": 5,
"col": 4,
"line": 89,
},
"startLoc": Object {
"col": 3,
"col": 2,
"line": 80,
},
},
"Addons|Info.Options.source@Shows or hides Info Addon source": Object {
"endLoc": Object {
"col": 42,
"col": 41,
"line": 68,
},
"startLoc": Object {
"col": 3,
"col": 2,
"line": 64,
},
},
"Addons|Info.Options.styles@Extend info styles with an object": Object {
"endLoc": Object {
"col": 44,
"col": 43,
"line": 108,
},
"startLoc": Object {
"col": 5,
"col": 4,
"line": 94,
},
},
"Addons|Info.Options.styles@Full control over styles using a function": Object {
"endLoc": Object {
"col": 44,
"col": 43,
"line": 123,
},
"startLoc": Object {
"col": 5,
"col": 4,
"line": 111,
},
},
"Addons|Info.React Docgen@Comments from Flow declarations": Object {
"endLoc": Object {
"col": 86,
"col": 85,
"line": 22,
},
"startLoc": Object {
"col": 5,
"col": 4,
"line": 19,
},
},
"Addons|Info.React Docgen@Comments from PropType declarations": Object {
"endLoc": Object {
"col": 80,
"col": 79,
"line": 16,
},
"startLoc": Object {
"col": 5,
"col": 4,
"line": 13,
},
},
"Addons|Info.React Docgen@Comments from component declaration": Object {
"endLoc": Object {
"col": 71,
"col": 70,
"line": 28,
},
"startLoc": Object {
"col": 5,
"col": 4,
"line": 25,
},
},
Expand Down Expand Up @@ -336,6 +336,22 @@ storiesOf('Addons|Info.GitHub issues', module).addDecorator(withStorySource(__ST
"
`;

exports[`inject-decorator stories with ugly comments should delete ugly comments from the generated story source 1`] = `
"import React from 'react';

import { storiesOf } from '@storybook/react';

const x = 0;

storiesOf('Foo', module).add('bar', () => <div>baz</div>);

/*
This is actually a good comment that will help
users to understand what's going on here.
*/
"
`;

exports[`inject-decorator will not change the source when there are no "storiesOf" functions 1`] = `
"while(true) {
console.log(\\"it's a kind of magic\\");
Expand Down
12 changes: 12 additions & 0 deletions addons/storysource/src/loader/default-options.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
const defaultOptions = {
prettierConfig: {
printWidth: 120,
tabWidth: 2,
bracketSpacing: true,
trailingComma: 'es5',
singleQuote: true,
},
uglyCommentsRegex: [/^eslint-.*/, /^global.*/],
};

export default defaultOptions;
104 changes: 104 additions & 0 deletions addons/storysource/src/loader/generate-helpers.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
import prettier from 'prettier';
import { handleADD, handleSTORYOF } from './parse-helpers';

const estraverse = require('estraverse');
const acorn = require('acorn');

require('acorn-stage3/inject')(acorn);
require('acorn-jsx/inject')(acorn);
require('acorn-es7')(acorn);

const acornConfig = {
ecmaVersion: '9',
sourceType: 'module',
ranges: true,
locations: true,
plugins: {
jsx: true,
stage3: true,
es7: true,
},
};

function isUglyComment(comment, uglyCommentsRegex) {
return uglyCommentsRegex.find(regex => regex.test(comment));
Copy link
Member

Choose a reason for hiding this comment

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

.some not .find

}

function generateSourceWithoutUglyComments(source, { comments, uglyCommentsRegex }) {
let lastIndex = 0;
const parts = [source];

comments
.filter(comment => isUglyComment(comment.value.trim(), uglyCommentsRegex))
.forEach(comment => {
parts.pop();

const start = source.slice(lastIndex, comment.start);
const end = source.slice(comment.end);

parts.push(start, end);
lastIndex = comment.end;
});

return parts.join('');
}

function prettifyCode(source, { prettierConfig }) {
return prettier.format(source, prettierConfig);
}

export function generateSourceWithDecorators(source, decorator) {
const comments = [];

const config = {
...acornConfig,
onComment: comments,
};

const ast = acorn.parse(source, config);

let lastIndex = 0;
const parts = [source];

estraverse.traverse(ast, {
fallback: 'iteration',
enter: node => {
if (node.type === 'CallExpression') {
lastIndex = handleSTORYOF(node, parts, source, lastIndex);
}
},
});

const newSource = parts.join(decorator);

return {
changed: lastIndex > 0,
source: newSource,
comments,
};
}

export function generateAddsMap(source) {
const ast = acorn.parse(source, acornConfig);
const adds = {};

estraverse.traverse(ast, {
fallback: 'iteration',
enter: (node, parent) => {
if (node.type === 'MemberExpression') {
handleADD(node, parent, adds);
}
},
});

return adds;
}

export function generateStorySource({ source, ...options }) {
let storySource = source;

storySource = generateSourceWithoutUglyComments(storySource, options);
storySource = prettifyCode(storySource, options);

return storySource;
}
Loading