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

Allow ignoring props #353

Merged
merged 2 commits into from
Mar 14, 2017
Merged

Allow ignoring props #353

merged 2 commits into from
Mar 14, 2017

Conversation

n1313
Copy link
Collaborator

@n1313 n1313 commented Mar 14, 2017

This PR allows marking props with @ignore JSDoc tag to make RSG ignore them when rendering the documentation. Fixes #331

@codecov-io
Copy link

codecov-io commented Mar 14, 2017

Codecov Report

Merging #353 into next will increase coverage by 0.04%.
The diff coverage is 100%.

@@            Coverage Diff            @@
##             next    #353      +/-   ##
=========================================
+ Coverage   94.36%   94.4%   +0.04%     
=========================================
  Files          73      73              
  Lines        1011    1019       +8     
  Branches      207     209       +2     
=========================================
+ Hits          954     962       +8     
  Misses         57      57
Impacted Files Coverage Δ
loaders/utils/getProps.js 100% <100%> (ø)

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 4450a8f...9036e6f. Read the comment docs.

Copy link
Member

@sapegin sapegin left a comment

Choose a reason for hiding this comment

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

Awesome feature, thanks!

<_class
inline={true}
text="Label
@ignore"
Copy link
Member

Choose a reason for hiding this comment

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

Looks like it renders it ;-)

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Hmmm, that's weird.

const doclets = getDocletsObject(prop.description);
// Remove ignored props
if (doclets && doclets.ignore) {
delete doc.props[propName];
Copy link
Member

Choose a reason for hiding this comment

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

Looks like something is wrong with the code or the test — this line is not covered.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

I was testing the wrong thing :(

@n1313
Copy link
Collaborator Author

n1313 commented Mar 14, 2017

Updated the PR, please take a look.

@sapegin sapegin merged commit 7e7e939 into next Mar 14, 2017
@sapegin sapegin deleted the ignore-props branch March 14, 2017 13:19
@sapegin
Copy link
Member

sapegin commented Mar 14, 2017

Cool, thanks!

sapegin pushed a commit that referenced this pull request Mar 29, 2017
sapegin added a commit that referenced this pull request Mar 31, 2017
[link to medium article]()

## Highlights

1. create-react-app support out of the box.
2. New webpack configuration options + user config auto load.

## Breaking changes

### create-react-app support

Now Styleguidst works with [create-react-app](https://github.com/facebookincubator/create-react-app) even without config.

It will load components from `src/components/**/*.js`. And example files from `Component/Readme.md` or `Component/Component.md`.

### User webpack config auto load

By default Styleguidist will try to find `webpack.config.js` in your project’s root directory and use it.

If your webpack config is located somewhere else, you need to load it manually:

```javascript
module.exports = {
  webpackConfig: require('./configs/webpack.js')
};
```

> **Note:** `entry`, `externals`, `output`, `watch`, `stats` and `devtool` options will be ignored.

> **Note:** `CommonsChunkPlugins`, `HtmlWebpackPlugin`, `UglifyJsPlugin`, `HotModuleReplacementPlugin` plugins will be ignored because Styleguidist already includes them or they may break Styleguidist.

> **Note:** Babelified webpack configs (like `webpack.config.babel.js`) are not supported. We recommend to convert your config to native Node — Node 6 supports [many ES6 features](http://node.green/).

### Easier webpack configuration

With the new [webpackConfig](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Configuration.md#webpackconfig):

```javascript
module.exports = {
  webpackConfig: {
    module: {
      loaders: [
        // Babel loader, will use your project’s .babelrc
        {
          test: /\.jsx?$/,
          exclude: /node_modules/,
          loader: 'babel-loader',
        },
        // Other loaders that is needed for your components
        {
          test: /\.css$/,
          loader: 'style-loader!css-loader?modules',
        },
      ],
    },
  },
};
```

See the new [webpack configuration guide](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Webpack.md) for more examples.

Also:

* `include`/`exclude` options in you webpack loaders are no longer required.
* JSON loader will be added automatically if needed.

### No global Lodash in examples

Lodash will not be available in examples as `_`. You can load function you need with the new [context](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Configuration.md#context) option:

```javascript
module.exports = {
  context: {
    forEach: 'lodash/forEach',
    map: 'lodash/map',
  },
};
```

Or replicate previous behavior though it’s not recommended:

```javascript
module.exports = {
  context: {
    _: 'lodash',
  },
};
```

### Use JSS for styling instead of CSS Modules

Use config option [theme](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Configuration.md#theme) to change fonts, colors, etc. and option [styles](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Configuration.md#styles) to tweak style of particular Styleguidist’s components:

```javascript
module.exports = {
	theme: {
		link: 'firebrick',
		linkHover: 'salmon',
		font: '"Comic Sans MS", "Comic Sans", cursive',
	},
	styles: {
		Logo: {
			logo: {
				animation: 'blink ease-in-out 300ms infinite',
			},
			'@Keyframes blink': {
				to: { opacity: 0 },
			},
		},
	},
};
```

We now use [JSS](http://cssinjs.org/) under the hoood.

### New default config options

* `components`: `src/components/**/*.js`
* `getExampleFilename`: `Component/Readme.md` or `Component/Component.md`
* `title`: `<app name from package.json> Style Guide`

### New default dev-server port

Default port is now 6060 because create-react-app uses 3000 too.

### Use findAllExportedComponentDefinitions as a default resolver

Fixes #260.

### Drop npm2 support

## Other changes and new features

* New config option [require](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Configuration.md#require) to add new webpack entries like polyfills and custom styles
* New config option [ignore](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Configuration.md#ignore) to exclude components from the style guide.
* New config option [showSidebar](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Configuration.md#showsidebar) (#310)
* Ignoring props with `@ignore` JSDoc tag (#353)
* `objectOf` propType support (#347)
* `updateWebpackConfig` option was renamed to `dangerouslyUpdateWebpackConfig` and should be used in very rare cases when `webpackConfig` isn’t enough
* Style guide config validation
* Reduced build size

## Bug fixes

* Path for `template` config option should be relative to style guide config (#211)
* Do not show isolated links on Markdown examples (#251)
* Show function PropType.func’s source in a tooltip (#343)
* Escape and highlight code in Markdown in descriptions (#284)
* Do not change level of Markdown headings (#329)
* Search should work for subsections (#245)
* Better anchors navigation with unique slugs (#318)
* User’s html-loader should not affect Styleguidist (#312)
* Show webpack build errors and warnings
* Exit with error code when build fails
* Show error when no components found on style guide start
* Do not fail when one of the files doesn’t export a component

---

https://github.com/n1313
https://github.com/okonet
https://github.com/kof
sapegin added a commit that referenced this pull request Mar 31, 2017
Huge thanks to @n1313, @okonet and @kof for help with this release!

## Highlights

1. create-react-app support out of the box.
2. New webpack configuration options + user config auto load.

## Breaking changes

### create-react-app support

Now Styleguidst works with [create-react-app](https://github.com/facebookincubator/create-react-app) even without config.

It will load components from `src/components/**/*.js`. And example files from `Component/Readme.md` or `Component/Component.md`.

### User webpack config auto load

By default Styleguidist will try to find `webpack.config.js` in your project’s root directory and use it.

If your webpack config is located somewhere else, you need to load it manually:

```javascript
module.exports = {
  webpackConfig: require('./configs/webpack.js')
};
```

> **Note:** `entry`, `externals`, `output`, `watch`, `stats` and `devtool` options will be ignored.

> **Note:** `CommonsChunkPlugins`, `HtmlWebpackPlugin`, `UglifyJsPlugin`, `HotModuleReplacementPlugin` plugins will be ignored because Styleguidist already includes them or they may break Styleguidist.

> **Note:** Babelified webpack configs (like `webpack.config.babel.js`) are not supported. We recommend to convert your config to native Node — Node 6 supports [many ES6 features](http://node.green/).

### Easier webpack configuration

With the new [webpackConfig](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Configuration.md#webpackconfig):

```javascript
module.exports = {
  webpackConfig: {
    module: {
      loaders: [
        // Babel loader, will use your project’s .babelrc
        {
          test: /\.jsx?$/,
          exclude: /node_modules/,
          loader: 'babel-loader',
        },
        // Other loaders that is needed for your components
        {
          test: /\.css$/,
          loader: 'style-loader!css-loader?modules',
        },
      ],
    },
  },
};
```

See the new [webpack configuration guide](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Webpack.md) for more examples.

Also:

* `include`/`exclude` options in you webpack loaders are no longer required.
* JSON loader will be added automatically if needed.

### No global Lodash in examples

Lodash will not be available in examples as `_`. You can load function you need with the new [context](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Configuration.md#context) option:

```javascript
module.exports = {
  context: {
    forEach: 'lodash/forEach',
    map: 'lodash/map',
  },
};
```

Or replicate previous behavior though it’s not recommended:

```javascript
module.exports = {
  context: {
    _: 'lodash',
  },
};
```

### Use JSS for styling instead of CSS Modules

Use config option [theme](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Configuration.md#theme) to change fonts, colors, etc. and option [styles](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Configuration.md#styles) to tweak style of particular Styleguidist’s components:

```javascript
module.exports = {
	theme: {
		link: 'firebrick',
		linkHover: 'salmon',
		font: '"Comic Sans MS", "Comic Sans", cursive',
	},
	styles: {
		Logo: {
			logo: {
				animation: 'blink ease-in-out 300ms infinite',
			},
			'@Keyframes blink': {
				to: { opacity: 0 },
			},
		},
	},
};
```

We now use [JSS](http://cssinjs.org/) under the hoood.

### New default config options

* `components`: `src/components/**/*.js`
* `getExampleFilename`: `Component/Readme.md` or `Component/Component.md`
* `title`: `<app name from package.json> Style Guide`

### New default dev-server port

Default port is now 6060 because create-react-app uses 3000 too.

### Use findAllExportedComponentDefinitions as a default resolver

Fixes #260.

### Drop npm2 support

## Other changes and new features

* New config option [require](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Configuration.md#require) to add new webpack entries like polyfills and custom styles
* New config option [ignore](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Configuration.md#ignore) to exclude components from the style guide.
* New config option [showSidebar](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Configuration.md#showsidebar) (#310)
* Ignoring props with `@ignore` JSDoc tag (#353)
* `objectOf` propType support (#347)
* `updateWebpackConfig` option was renamed to `dangerouslyUpdateWebpackConfig` and should be used in very rare cases when `webpackConfig` isn’t enough
* Style guide config validation
* Reduced build size

## Bug fixes

* Path for `template` config option should be relative to style guide config (#211)
* Do not show isolated links on Markdown examples (#251)
* Show function PropType.func’s source in a tooltip (#343)
* Escape and highlight code in Markdown in descriptions (#284)
* Do not change level of Markdown headings (#329)
* Search should work for subsections (#245)
* Better anchors navigation with unique slugs (#318)
* User’s html-loader should not affect Styleguidist (#312)
* Show webpack build errors and warnings
* Exit with error code when build fails
* Show error when no components found on style guide start
* Do not fail when one of the files doesn’t export a component
sapegin added a commit that referenced this pull request Mar 31, 2017
Huge thanks to @n1313, @okonet and @kof for help with this release!

## Highlights

1. create-react-app support out of the box.
2. New webpack configuration options + user config auto load.

## Breaking changes

### create-react-app support

Now Styleguidst works with [create-react-app](https://github.com/facebookincubator/create-react-app) even without config.

It will load components from `src/components/**/*.js`. And example files from `Component/Readme.md` or `Component/Component.md`.

### User webpack config auto load

By default Styleguidist will try to find `webpack.config.js` in your project’s root directory and use it.

If your webpack config is located somewhere else, you need to load it manually:

```javascript
module.exports = {
  webpackConfig: require('./configs/webpack.js')
};
```

> **Note:** `entry`, `externals`, `output`, `watch`, `stats` and `devtool` options will be ignored.

> **Note:** `CommonsChunkPlugins`, `HtmlWebpackPlugin`, `UglifyJsPlugin`, `HotModuleReplacementPlugin` plugins will be ignored because Styleguidist already includes them or they may break Styleguidist.

> **Note:** Babelified webpack configs (like `webpack.config.babel.js`) are not supported. We recommend to convert your config to native Node — Node 6 supports [many ES6 features](http://node.green/).

### Easier webpack configuration

With the new [webpackConfig](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Configuration.md#webpackconfig):

```javascript
module.exports = {
  webpackConfig: {
    module: {
      loaders: [
        // Babel loader, will use your project’s .babelrc
        {
          test: /\.jsx?$/,
          exclude: /node_modules/,
          loader: 'babel-loader',
        },
        // Other loaders that is needed for your components
        {
          test: /\.css$/,
          loader: 'style-loader!css-loader?modules',
        },
      ],
    },
  },
};
```

See the new [webpack configuration guide](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Webpack.md) for more examples.

Also:

* `include`/`exclude` options in you webpack loaders are no longer required.
* JSON loader will be added automatically if needed.

### No global Lodash in examples

Lodash will not be available in examples as `_`. You can load function you need with the new [context](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Configuration.md#context) option:

```javascript
module.exports = {
  context: {
    forEach: 'lodash/forEach',
    map: 'lodash/map',
  },
};
```

Or replicate previous behavior though it’s not recommended:

```javascript
module.exports = {
  context: {
    _: 'lodash',
  },
};
```

### Use JSS for styling instead of CSS Modules

Use config option [theme](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Configuration.md#theme) to change fonts, colors, etc. and option [styles](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Configuration.md#styles) to tweak style of particular Styleguidist’s components:

```javascript
module.exports = {
	theme: {
		link: 'firebrick',
		linkHover: 'salmon',
		font: '"Comic Sans MS", "Comic Sans", cursive',
	},
	styles: {
		Logo: {
			logo: {
				animation: 'blink ease-in-out 300ms infinite',
			},
			'@Keyframes blink': {
				to: { opacity: 0 },
			},
		},
	},
};
```

We now use [JSS](http://cssinjs.org/) under the hoood.

### New default config options

* `components`: `src/components/**/*.js`
* `getExampleFilename`: `Component/Readme.md` or `Component/Component.md`
* `title`: `<app name from package.json> Style Guide`

### New default dev-server port

Default port is now 6060 because create-react-app uses 3000 too.

### Use findAllExportedComponentDefinitions as a default resolver

Fixes #260.

### Drop npm2 support

## Other changes and new features

* New config option [require](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Configuration.md#require) to add new webpack entries like polyfills and custom styles
* New config option [ignore](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Configuration.md#ignore) to exclude components from the style guide.
* New config option [showSidebar](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Configuration.md#showsidebar) (#310)
* Ignoring props with `@ignore` JSDoc tag (#353)
* `objectOf` propType support (#347)
* `updateWebpackConfig` option was renamed to `dangerouslyUpdateWebpackConfig` and should be used in very rare cases when `webpackConfig` isn’t enough
* Style guide config validation
* Reduced build size

## Bug fixes

* Path for `template` config option should be relative to style guide config (#211)
* Do not show isolated links on Markdown examples (#251)
* Show function PropType.func’s source in a tooltip (#343)
* Escape and highlight code in Markdown in descriptions (#284)
* Do not change level of Markdown headings (#329)
* Search should work for subsections (#245)
* Better anchors navigation with unique slugs (#318)
* User’s html-loader should not affect Styleguidist (#312)
* Show webpack build errors and warnings
* Exit with error code when build fails
* Show error when no components found on style guide start
* Do not fail when one of the files doesn’t export a component
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants