Fixed knobs-addon performance issues

addons/knobs/package.json

@@ -34,6 +34,7 @@
     "babel-runtime": "^6.23.0",
     "deep-equal": "^1.0.1",
     "insert-css": "^1.0.0",
+    "lodash.debounce": "^4.0.8",
     "moment": "^2.18.1",
     "prop-types": "^15.5.8",
     "react-color": "^2.11.4",

addons/knobs/src/KnobManager.js

@@ -65,11 +65,12 @@ export default class KnobManager {
       return;
     }
     this.calling = true;
+    const timestamp = +new Date();
 
     setTimeout(() => {
       this.calling = false;
       // emit to the channel and trigger a panel re-render
-      this.channel.emit('addon:knobs:setKnobs', this.knobStore.getAll());
+      this.channel.emit('addon:knobs:setKnobs', { knobs: this.knobStore.getAll(), timestamp });
     }, PANEL_UPDATE_INTERVAL);
   }
 }

addons/knobs/src/components/Panel.js

@@ -1,8 +1,11 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import debounce from 'lodash.debounce';
 import PropForm from './PropForm';
 import Types from './types';
 
+const getTimestamp = () => +new Date();
+
 const styles = {
   panelWrapper: {
     width: '100%',
@@ -44,35 +47,50 @@ export default class Panel extends React.Component {
     this.handleChange = this.handleChange.bind(this);
     this.setKnobs = this.setKnobs.bind(this);
     this.reset = this.reset.bind(this);
+    this.setOptions = this.setOptions.bind(this);
 
     this.state = { knobs: {} };
+    this.options = {};
+
+    this.lastEdit = getTimestamp();
     this.loadedFromUrl = false;
     this.props.channel.on('addon:knobs:setKnobs', this.setKnobs);
+    this.props.channel.on('addon:knobs:setOptions', this.setOptions);
   }
 
   componentWillUnmount() {
     this.props.channel.removeListener('addon:knobs:setKnobs', this.setKnobs);
   }
 
-  setKnobs(knobs) {
+  setOptions(options = { debounce: false, timestamps: false }) {
+    this.options = options;
+
+    if (options.debounce) {
+      this.emitChange = debounce(this.emitChange, options.debounce.wait, { leading: options.debounce.leading });
+    }
+  }
+
+  setKnobs({ knobs, timestamp }) {
     const queryParams = {};
     const { api, channel } = this.props;
 
-    Object.keys(knobs).forEach(name => {
-      const knob = knobs[name];
-      // For the first time, get values from the URL and set them.
-      if (!this.loadedFromUrl) {
-        const urlValue = api.getQueryParam(`knob-${name}`);
-
-        if (urlValue !== undefined) {
-          // If the knob value present in url
-          knob.value = Types[knob.type].deserialize(urlValue);
-          channel.emit('addon:knobs:knobChange', knob);
+    if (!this.options.timestamps || !timestamp || this.lastEdit <= timestamp) {
+      Object.keys(knobs).forEach(name => {
+        const knob = knobs[name];
+        // For the first time, get values from the URL and set them.
+        if (!this.loadedFromUrl) {
+          const urlValue = api.getQueryParam(`knob-${name}`);
+
+          if (urlValue !== undefined) {
+            // If the knob value present in url
+            knob.value = Types[knob.type].deserialize(urlValue);
+            channel.emit('addon:knobs:knobChange', knob);
+          }
         }
-      }
 
-      queryParams[`knob-${name}`] = Types[knob.type].serialize(knob.value);
-    });
+        queryParams[`knob-${name}`] = Types[knob.type].serialize(knob.value);
+      });
+    }
 
     this.loadedFromUrl = true;
     api.setQueryParams(queryParams);
@@ -83,8 +101,13 @@ export default class Panel extends React.Component {
     this.props.channel.emit('addon:knobs:reset');
   }
 
+  emitChange(changedKnob) {
+    this.props.channel.emit('addon:knobs:knobChange', changedKnob);
+  }
+
   handleChange(changedKnob) {
-    const { api, channel } = this.props;
+    this.lastEdit = getTimestamp();
+    const { api } = this.props;
     const { knobs } = this.state;
     const { name, type, value } = changedKnob;
     const newKnobs = { ...knobs };
@@ -99,7 +122,7 @@ export default class Panel extends React.Component {
     queryParams[`knob-${name}`] = Types[type].serialize(value);
 
     api.setQueryParams(queryParams);
-    channel.emit('addon:knobs:knobChange', changedKnob);
+    this.setState({ knobs: newKnobs }, this.emitChange(changedKnob));
   }
 
   render() {

addons/knobs/src/components/WrapStory.js

@@ -33,9 +33,9 @@ export default class WrapStory extends React.Component {
     this.props.knobStore.unsubscribe(this.setPaneKnobs);
   }
 
-  setPaneKnobs() {
+  setPaneKnobs(timestamp = +new Date()) {
     const { channel, knobStore } = this.props;
-    channel.emit('addon:knobs:setKnobs', knobStore.getAll());
+    channel.emit('addon:knobs:setKnobs', { knobs: knobStore.getAll(), timestamp });
   }
 
   knobChanged(change) {
@@ -52,7 +52,7 @@ export default class WrapStory extends React.Component {
     const { knobStore, storyFn, context } = this.props;
     knobStore.reset();
     this.setState({ storyContent: storyFn(context) });
-    this.setPaneKnobs();
+    this.setPaneKnobs(false);
   }
 
   render() {

addons/knobs/src/components/__tests__/Panel.js

@@ -46,7 +46,7 @@ describe('Panel', () => {
         },
       };
 
-      setKnobsHandler(knobs);
+      setKnobsHandler({ knobs, timestamp: +new Date() });
       const knobFromUrl = {
         name: 'foo',
         value: testQueryParams['knob-foo'],
@@ -95,7 +95,7 @@ describe('Panel', () => {
       // Make it act like that url params are already checked
       wrapper.instance().loadedFromUrl = true;
 
-      setKnobsHandler(knobs);
+      setKnobsHandler({ knobs, timestamp: +new Date() });
       const knobFromStory = {
         'knob-foo': knobs.foo.value,
         'knob-baz': knobs.baz.value,

addons/knobs/src/index.js

@@ -59,3 +59,12 @@ export function withKnobs(storyFn, context) {
   const channel = addons.getChannel();
   return manager.wrapStory(channel, storyFn, context);
 }
+
+export function withKnobsOptions(options = {}) {
+  return (...args) => {
+    const channel = addons.getChannel();
+    channel.emit('addon:knobs:setOptions', options);
+
+    return withKnobs(...args);
+  };
+}

addons/knobs/storybook-addon-knobs.d.ts

@@ -17,6 +17,10 @@ interface NumberOptions {
 	step: number,
 }
 
+interface withKnobs {
+	(storyFn: Function, context: StoryContext): React.ReactElement<IWrapStoryProps>;
+}
+
 export function knob<T>(name: string, options: KnobOption<T>): T;
 
 export function text(name: string, value: string | null): string;
@@ -42,4 +46,4 @@ interface IWrapStoryProps {
   initialContent?: Object;
 }
 
-export function withKnobs(storyFn: Function, context: StoryContext): React.ReactElement<IWrapStoryProps>;
+export function withKnobsOptions(options: Object): (storyFn: Function, context: StoryContext) => withKnobs;