Added config to debounce preview rendering while live editing #227
Conversation
| @@ -108,6 +108,10 @@ You can change settings in the `styleguide.config.js` file in your project’s r | |||
| Type: `String`, default: `base16-light`<br> | |||
| [CodeMirror theme](http://codemirror.net/demo/theme.html) name to use for syntax highlighting in examples. | |||
|
|
|||
| * **`previewDelay`**<br> | |||
| Type: `Number`, default: 0<br> | |||
There was a problem hiding this comment.
Should we use some non-zero default?
There was a problem hiding this comment.
I wasn't sure if you liked the idea, I'll set to 500ms. It's fast enough to not bother user not interested in it and enough to let other user benefit from the feature.
| const { previewDelay, showCode } = context.config; | ||
|
|
||
| // `previewDelay` may not be defined or have an invalid value, by defayult is disabled. | ||
| this.previewDelay = isFinite(previewDelay) && previewDelay > 0 ? previewDelay : 0; |
There was a problem hiding this comment.
previewDelay > 0 check looks unnecessary for me. And it’s better to do all validation in validateConfig() in config.js.
There was a problem hiding this comment.
I'll do it :) I wasn't aware of validateConfig()
|
|
||
| if (this.previewDelay) { | ||
| // if previewDelay is enabled debounce the code | ||
| this.queuedChange = debounce(queuedChange, 1000); |
There was a problem hiding this comment.
Looks like you should use previewDelay here instead of 1000 ;-)
cef62
force-pushed
the
delayed-preview-rendering
branch
from
2f1059b
to
71db575
Compare
|
I've rebased upon master and fixed as you asked. |
|
I'm not sure of why Travis is failing only in one task of one build... any suggestions? |
|
It happens sometimes. Restarting the job usually helps. Thanks! I’m merging it. |
## New features ### Isolated mode for examples Now you can open single example (not a whole component) in isolated mode:  (#225 by @cef62) ### Config option to debounce preview rendering while live editing Default value is 500. That means you’ll not see that annoying red error message box while you’re typing. (#227 by @cef62)
This is something I've often loved to have using
react-styleguidist. Basically it enables to write code in codemirror without having tens of updates on the preview panel. As side-effect is also less probable that while writing the preview will crash because of incomplete expressions.Is this something you'd like to add to the project?