(#1736) Add forceReRender support for Angular and Vue

storybookjs · Dec 27, 2017 · 597387c · 597387c
1 parent ce935e6
commit 597387c
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 13 deletions.
diff --git a/app/angular/src/client/preview/index.js b/app/angular/src/client/preview/index.js
@@ -53,3 +53,5 @@ const renderUI = () => {
 };
 
 reduxStore.subscribe(renderUI);
+
+export const forceReRender = () => render(context, true);
diff --git a/app/angular/src/client/preview/render.js b/app/angular/src/client/preview/render.js
@@ -22,7 +22,7 @@ export function renderException(error) {
   logger.error(error.stack);
 }
 
-export function renderMain(data, storyStore) {
+export function renderMain(data, storyStore, forceRender) {
   if (storyStore.size() === 0) return null;
 
   const { selectedKind, selectedStory } = data;
@@ -39,7 +39,7 @@ export function renderMain(data, storyStore) {
   //    https://github.com/storybooks/react-storybook/issues/116
 
   const reRender = selectedKind !== previousKind || previousStory !== selectedStory;
-  if (reRender) {
+  if (reRender || forceRender) {
     // We need to unmount the existing set of components in the DOM node.
     // Otherwise, React may not recrease instances for every story run.
     // This could leads to issues like below:
@@ -54,14 +54,14 @@ export function renderMain(data, storyStore) {
   return renderNgApp(story, context, reRender);
 }
 
-export default function renderPreview({ reduxStore, storyStore }) {
+export default function renderPreview({ reduxStore, storyStore }, forceRender = false) {
   const state = reduxStore.getState();
   if (state.error) {
     return renderException(state.error);
   }
 
   try {
-    return renderMain(state, storyStore);
+    return renderMain(state, storyStore, forceRender);
   } catch (ex) {
     return renderException(ex);
   }

diff --git a/app/react/src/client/preview/index.js b/app/react/src/client/preview/index.js
@@ -22,11 +22,7 @@ const isBrowser =
 
 const storyStore = new StoryStore();
 /* eslint-disable no-underscore-dangle */
-const reduxStore = createStore(
-  reducer,
-  window.__REDUX_DEVTOOLS_EXTENSION__ &&
-    window.__REDUX_DEVTOOLS_EXTENSION__({ name: 'Storybook Preview', instanceId: 'sbPreview' })
-);
+const reduxStore = createStore(reducer);
 /* eslint-enable */
 const context = { storyStore, reduxStore };
 

diff --git a/app/vue/src/client/preview/index.js b/app/vue/src/client/preview/index.js
@@ -54,3 +54,5 @@ const renderUI = () => {
 };
 
 reduxStore.subscribe(renderUI);
+
+export const forceReRender = () => render(context, true);
diff --git a/app/vue/src/client/preview/render.js b/app/vue/src/client/preview/render.js
@@ -49,7 +49,7 @@ function renderRoot(options) {
   app = new Vue(options);
 }
 
-export function renderMain(data, storyStore) {
+export function renderMain(data, storyStore, forceRender) {
   if (storyStore.size() === 0) return;
 
   const { selectedKind, selectedStory } = data;
@@ -60,7 +60,7 @@ export function renderMain(data, storyStore) {
   // renderMain() gets executed after each action. Actions will cause the whole
   // story to re-render without this check.
   //    https://github.com/storybooks/react-storybook/issues/116
-  if (selectedKind !== previousKind || previousStory !== selectedStory) {
+  if (forceRender || selectedKind !== previousKind || previousStory !== selectedStory) {
     // We need to unmount the existing set of components in the DOM node.
     // Otherwise, React may not recrease instances for every story run.
     // This could leads to issues like below:
@@ -97,14 +97,14 @@ export function renderMain(data, storyStore) {
   });
 }
 
-export default function renderPreview({ reduxStore, storyStore }) {
+export default function renderPreview({ reduxStore, storyStore }, forceRender = false) {
   const state = reduxStore.getState();
   if (state.error) {
     return renderException(state.error);
   }
 
   try {
-    return renderMain(state, storyStore);
+    return renderMain(state, storyStore, forceRender);
   } catch (ex) {
     return renderException(ex);
   }
Original file line number	Diff line number	Diff line change
Expand Up		@@ -53,3 +53,5 @@ const renderUI = () => {
		};

		reduxStore.subscribe(renderUI);

		export const forceReRender = () => render(context, true);
Original file line number	Diff line number	Diff line change
Expand Up		@@ -54,3 +54,5 @@ const renderUI = () => {
		};

		reduxStore.subscribe(renderUI);

		export const forceReRender = () => render(context, true);