Spike on rearranging the build and server methods. #878

roblevintennis · 2018-03-19T21:57:09Z

WIP for rearranging the print build and server methods with hopes to expose as overridable styleguide.config methods. this is for #876

I wasn't sure how this should be verified so I essentially copied examples/basic to examples/custom-message with the idea I'd get it to print the custom console message.

…ServerInstructions was foundwhen trying to run the example

roblevintennis · 2018-03-19T23:04:24Z

@sapegin I'm a bit stuck on what to do for configuring the schema to add the two new config options (the functions printBuildInstructions and printServerInstructions), and just even getting the sanitizeConfig to work at all:

That's when I try to run my new custom message example. I tried to log or throw error in scripts/utils/sanitizeConfig.js but it's not showing up in my console so I'm obviously totally misunderstanding something there, so any guidance there would be appreciated.

Update: I sort of see what's happening, it's actually using the node module version of styleguidist:

It's end of day for me, I'll hopefully figure out how to do this tomorrow

sapegin

Thanks for the PR!

sapegin · 2018-03-20T08:25:13Z

examples/custom-message/.babelrc

@@ -0,0 +1,9 @@
+{


Please use one of the existing examples (like customised), creating a new one would be an overkill ;-)

That will probably fix the issue with unknown config option too.

haha ah ok, gotcha, I'm headed to work now...will give it a whirl thanks for help @sapegin :)

…stomized folder

roblevintennis · 2018-03-20T17:46:31Z

So the issue I was having was that I intuitively ran the examples from examples dir like: examples/foo$ npm run styleguide which of course meant it'd use the node modules styleguidist. But having a look at package.json we have these covered and locally pointing to correct styleguidist.js e.g. yarn start:customised in my case. Fixed the issue.

@sapegin I think this is reviewable

P.S. I'm going to see if there's a place to add a note about using the top level package.json scripts when developing / contributing in the examples on another small documentation PR :)

sapegin · 2018-03-20T20:49:20Z

bin/styleguidist.js

@@ -94,8 +94,10 @@ function commandBuild() {
 		if (err) {
 			console.error(err);
 			process.exit(1);
+		} else if (typeof config.printBuildInstructions === 'function') {


We can be sure that if a config option has a value, then it's a function (it'd fail before otherwise), so if (config.printBuildInstructions) would be enough.

Addressed in 0eda93b

sapegin · 2018-03-20T20:53:39Z

bin/styleguidist.js

-			printInstructions(isHttps, config.serverHost, config.serverPort);
+			const configuration = Object.assign({ isHttps }, config);
+			if (typeof config.printServerInstructions === 'function') {
+				config.printServerInstructions(configuration);


I'd do config.printServerInstructions(config, { isHttps });, so config would be always a styleguide config, and extra options would be separated — less cognitive load ;-)

Gotcha. Fixed in 0eda93b

sapegin · 2018-03-20T20:54:38Z

docs/Configuration.md

+
+Type: `Function`, optional
+
+Function that allows you to override the printing of build messages to console.log. Takes the `config` object with `isHttps` merged in.


I’d show an example instead of Takes the configobject withisHttps merged in..

Great point. I removed and added example for both methods in 0eda93b

sapegin · 2018-03-20T20:55:22Z

loaders/styleguide-loader.js

@@ -19,6 +19,8 @@ const CLIENT_CONFIG_OPTIONS = [
 	'showCode',
 	'showUsage',
 	'showSidebar',
+	'printBuildInstructions',


I don't think you need this, we use this array to pass config options to React.

Removed and ran locally and nothing bad happened. Thanks for heads up

…rintServerInstructions from CLIENT_CONFIG_OPTIONS array. Cleanup calls to new methods.

roblevintennis · 2018-03-20T23:13:08Z

@sapegin thanks for your guidance. I think this is ready for another gander

sapegin · 2018-03-21T08:04:17Z

Thanks! Will include in the next release ;-)

roblevintennis · 2018-03-21T17:01:06Z

awesome thanks!

@bitionaire

👋 **[Support Styleguidist](https://opencollective.com/styleguidist) on Open Collective** 👋 ## New features ### Page per section 🚧 This is a huge improvement for large style guides: now you can show only one component at a page instead of all components. ![](https://d3vv6lp55qjaqc.cloudfront.net/items/0W2q2K2s3n2k311O1J0y/Screen%20Recording%202018-03-22%20at%2010.06%20AM.gif) To enable: ```js module.exports = { pagePerSection: true }; ``` This is an experimental feature and we need your feedback to make it better and really useful. For example, right now there’s no isolated mode. So feel free to share your ideas [in issues](https://github.com/styleguidist/react-styleguidist/issues). (#835 by @bitionaire and @stepancar, closes #494 and #768) ### “Fork me” ribbon One more step to make Styleguidist usable for documenting open source projects: ![](https://d3vv6lp55qjaqc.cloudfront.net/items/1t331n2a3v0F2i290K0Z/Image%202018-03-22%20at%209.13.11%20AM.png) New config option to enable the ribbon, define the URL and change the label: ```js module.exports = { ribbon: { url: 'http://example.com/', text: 'Fork me on GitHub' } }; ``` And two new [theme variables](https://github.com/styleguidist/react-styleguidist/blob/master/src/styles/theme.js) to change colors: `color.ribbonBackground` and `color.ribbonText`. (#861 by @glebez and @wkwiatek, part of #195, closes #647) ### Options to change CLI output on server start and build Two new options, `printServerInstructions` and `printBuildInstructions`: ```js module.exports = { printBuildInstructions(config) { console.log( `Style guide published to ${ config.styleguideDir }. Something else interesting.` ); } }; ``` (#878 by @roblevintennis, closes #876) ### Option to modify props A new option, `updateDocs` to modify props before rendering. For example, you can load a component version number from a JSON file: ```js module.exports = { updateDocs(docs) { if (docs.doclets.version) { const versionFilePath = path.resolve( path.dirname(file), docs.doclets.version ); const version = require(versionFilePath).version; docs.doclets.version = version; docs.tags.version[0].description = version; } return docs; } }; ``` (#868 by @ryanoglesby08) ### Limited support for named exports Styleguidist used to require default exports for components. Now you can use named exports too, though Styleguidist still supports only one component per file. I hope this change will make some users happier, see more details [in the docs](https://react-styleguidist.js.org/docs/components.html#loading-and-exposing-components). (#825 by @marcdavi-es, closes #820 and #633) ### Allow arrays of component paths in sections More flexibility in structuring your style guide: ```js module.exports = { sections: [ { name: 'Forms', components: [ 'lib/components/ui/Button.js', 'lib/components/ui/Input.js' ] } ] }; ``` (#794 by @glebez, closes #774) ### Sort properties by `required` and `name` attributes This change should make props tables more predictable for the users. Instead of relying on developers to sort props in a meaningful way, Styleguidist will show required props first, and sort props in each group alphabetically. To disable sorting, use the identity function: ```javascript module.exports = { sortProps: props => props }; ``` (#784 by @dotcs) ## Bug fixes * Allow `Immutable` state in examples (#870 by @nicoffee, closes #864) * Change template container ID to prevent clashes (#859 by @glebez, closes #753) * Better props definitions with Flow types (#781 by @nanot1m)

sapegin · 2018-03-22T10:26:30Z

🎉 This PR is included in version 6.5.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

roblevintennis added 2 commits March 19, 2018 14:55

Spike on rearranging the build and server methods.

30f2a86

Broken WIP .. get console errors that the Unknown config option print…

1bc7d1d

…ServerInstructions was foundwhen trying to run the example

sapegin requested changes Mar 20, 2018

View reviewed changes

Remove examples/custom-message/* and move those in to the examples/cu…

dc80be8

…stomized folder

Add some comments

9916f14

roblevintennis mentioned this pull request Mar 20, 2018

Add documentation on how to dev on examples other then basic (which i… #880

Merged

sapegin requested changes Mar 20, 2018

View reviewed changes

Update docs with examples. Remove unused printBuildInstructions and p…

0eda93b

…rintServerInstructions from CLIENT_CONFIG_OPTIONS array. Cleanup calls to new methods.

sapegin approved these changes Mar 21, 2018

View reviewed changes

sapegin added this to the 6.3.0 milestone Mar 21, 2018

Merge branch 'master' into expose-print-to-console-for-build-and-server

e708db0

sapegin merged commit a2c9c3f into styleguidist:master Mar 21, 2018

roblevintennis deleted the expose-print-to-console-for-build-and-server branch March 21, 2018 17:01

This was referenced Jul 17, 2020

[Snyk] Security upgrade react-styleguidist from 6.0.33 to 6.5.0 Bhanditz/react-styleguidist#46

Open

[Snyk] Fix for 1 vulnerabilities Bhanditz/react-styleguidist#47

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Spike on rearranging the build and server methods. #878

Spike on rearranging the build and server methods. #878

roblevintennis commented Mar 19, 2018 •

edited

Loading

roblevintennis commented Mar 19, 2018 •

edited

Loading

sapegin left a comment

sapegin Mar 20, 2018

roblevintennis Mar 20, 2018

roblevintennis commented Mar 20, 2018 •

edited

Loading

sapegin Mar 20, 2018

roblevintennis Mar 20, 2018 •

edited

Loading

sapegin Mar 20, 2018

roblevintennis Mar 20, 2018

sapegin Mar 20, 2018

roblevintennis Mar 20, 2018

sapegin Mar 20, 2018

roblevintennis Mar 20, 2018

roblevintennis commented Mar 20, 2018

sapegin commented Mar 21, 2018

roblevintennis commented Mar 21, 2018

sapegin commented Mar 22, 2018


		Type: `Function`, optional

		Function that allows you to override the printing of build messages to console.log. Takes the `config` object with `isHttps` merged in.

Spike on rearranging the build and server methods. #878

Spike on rearranging the build and server methods. #878

Conversation

roblevintennis commented Mar 19, 2018 • edited Loading

roblevintennis commented Mar 19, 2018 • edited Loading

sapegin left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

roblevintennis commented Mar 20, 2018 • edited Loading

Choose a reason for hiding this comment

roblevintennis Mar 20, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

roblevintennis commented Mar 20, 2018

sapegin commented Mar 21, 2018

roblevintennis commented Mar 21, 2018

sapegin commented Mar 22, 2018

roblevintennis commented Mar 19, 2018 •

edited

Loading

roblevintennis commented Mar 19, 2018 •

edited

Loading

roblevintennis commented Mar 20, 2018 •

edited

Loading

roblevintennis Mar 20, 2018 •

edited

Loading