From fcb86a835f639aef38f5843af6452e3a3e926593 Mon Sep 17 00:00:00 2001 From: codebyalex Date: Mon, 11 Mar 2019 11:46:20 -0400 Subject: [PATCH 1/2] Modified the component force render debounce so that knob storage occurs but the force rendering is debounced. Debouncing waits 325ms to allow for a user to finish a thought before rendering. Tested this change in the cli projects. --- addons/knobs/package.json | 1 + addons/knobs/src/registerKnobs.js | 18 +++++++++++------- 2 files changed, 12 insertions(+), 7 deletions(-) diff --git a/addons/knobs/package.json b/addons/knobs/package.json index 15f727d14c51..9afc41f926c7 100644 --- a/addons/knobs/package.json +++ b/addons/knobs/package.json @@ -31,6 +31,7 @@ "escape-html": "^1.0.3", "fast-deep-equal": "^2.0.1", "global": "^4.3.2", + "lodash.debounce": "^4.0.8", "prop-types": "^15.6.2", "qs": "^6.5.2", "react-color": "^2.17.0", diff --git a/addons/knobs/src/registerKnobs.js b/addons/knobs/src/registerKnobs.js index 687f7d59a341..e6b81396d148 100644 --- a/addons/knobs/src/registerKnobs.js +++ b/addons/knobs/src/registerKnobs.js @@ -1,11 +1,13 @@ import addons from '@storybook/addons'; import { STORY_CHANGED, FORCE_RE_RENDER, REGISTER_SUBSCRIPTION } from '@storybook/core-events'; +import debounce from 'lodash.debounce'; import KnobManager from './KnobManager'; import { CHANGE, CLICK, RESET, SET } from './shared'; export const manager = new KnobManager(); const { knobStore } = manager; +const COMPONENT_FORCE_RENDER_DEBOUNCE_DELAY_MS = 325; function forceReRender() { addons.getChannel().emit(FORCE_RE_RENDER); @@ -16,16 +18,18 @@ function setPaneKnobs(timestamp = +new Date()) { channel.emit(SET, { knobs: knobStore.getAll(), timestamp }); } -function knobChanged(change) { - const { name, value } = change; +// Increased performance by reducing the number of times a component is rendered during knob changes +const debouncedOnKnobChanged = debounce(() => { + knobStore.markAllUnused(); + forceReRender(); +}, COMPONENT_FORCE_RENDER_DEBOUNCE_DELAY_MS); - // Update the related knob and it's value. +function knobChanged(change) { + const { name } = change; + const { value } = change; // Update the related knob and it's value. const knobOptions = knobStore.get(name); - knobOptions.value = value; - knobStore.markAllUnused(); - - forceReRender(); + debouncedOnKnobChanged(); } function knobClicked(clicked) { From 48788f65e370f30f891d21f94a6fc88b4e06932e Mon Sep 17 00:00:00 2001 From: codebyalex Date: Mon, 11 Mar 2019 12:39:18 -0400 Subject: [PATCH 2/2] Removed double lodash import added during merge --- addons/knobs/src/registerKnobs.js | 1 - 1 file changed, 1 deletion(-) diff --git a/addons/knobs/src/registerKnobs.js b/addons/knobs/src/registerKnobs.js index c4ddf0f3bd4d..e6b81396d148 100644 --- a/addons/knobs/src/registerKnobs.js +++ b/addons/knobs/src/registerKnobs.js @@ -2,7 +2,6 @@ import addons from '@storybook/addons'; import { STORY_CHANGED, FORCE_RE_RENDER, REGISTER_SUBSCRIPTION } from '@storybook/core-events'; import debounce from 'lodash.debounce'; -import debounce from 'lodash.debounce'; import KnobManager from './KnobManager'; import { CHANGE, CLICK, RESET, SET } from './shared';