GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-04 21:01:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

Further implementation of the render function for polymer

Browse Source
This commit is contained in:
tvs 2017-11-03 13:20:08 +01:00
parent 57acec3fc6
commit bc2382c052
1 changed files with 26 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
app/polymer/src/client/preview/render.js
View File

@ -1,95 +1,41 @@
/* eslint-disable no-unused-vars */
import { document } from 'global';
// import { stripIndents } from 'common-tags';
// import Vue from 'vue';
let previousKind = '';
let previousStory = '';
// import ErrorDisplay from './ErrorDisplay.vue';
// import NoPreview from './NoPreview.vue';
// const logger = console;
// let previousKind = '';
// let previousStory = '';
// let app = null;
// let err = null;
function renderErrorDisplay(error) {
// if (err) err.$destroy();
// err = new Vue({
// el: '#error-display',
// render(h) {
// return h(
// 'div',
// { attrs: { id: 'error-display' } },
// error ? [h(ErrorDisplay, { props: { message: error.message, stack: error.stack } })] : []
// );
// },
// });
}
const rootElement = document.getElementById('root');
export function renderError(error) {
// renderErrorDisplay(error);
rootElement.innerHTML = error;
}
export function renderException(error) {
// // We always need to render redbox in the mainPage if we get an error.
// // Since this is an error, this affects to the main page as well.
// renderErrorDisplay(error);
// // Log the stack to the console. So, user could check the source code.
// logger.error(error.stack);
}
function renderRoot(options) {
// if (err) {
// renderErrorDisplay(null); // clear
// err = null;
// }
// if (app) app.$destroy();
// app = new Vue(options);
renderError(error);
console.error(error.stack);
}
export function renderMain(data, storyStore) {
document.getElementById('root').innerHTML =
'<playground-button></playground-button><h1>Testing dude</h1>';
if (storyStore.size() === 0) return;
const { selectedKind, selectedStory } = data;
const story = storyStore.getStory(selectedKind, selectedStory);
// if (storyStore.size() === 0) return;
// const { selectedKind, selectedStory } = data;
// const story = storyStore.getStory(selectedKind, selectedStory);
// // Unmount the previous story only if selectedKind or selectedStory has changed.
// // 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) {
// // 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:
// // https://github.com/storybooks/react-storybook/issues/81
// previousKind = selectedKind;
// previousStory = selectedStory;
// } else {
// return;
// }
// const context = {
// kind: selectedKind,
// story: selectedStory,
// };
// const component = story ? story(context) : NoPreview;
// if (!component) {
// const error = {
// message: `Expecting a Vue component from the story: "${selectedStory}" of "${selectedKind}".`,
// stack: stripIndents`
// Did you forget to return the Vue component from the story?
// Use "() => ({ template: '<my-comp></my-comp>' })" or "() => ({ components: MyComp, template: '<my-comp></my-comp>' })" when defining the story.
// `,
// };
// renderError(error);
// }
// renderRoot({
// el: '#root',
// render(h) {
// return h('div', { attrs: { id: 'root' } }, [h(component)]);
// },
// });
if (selectedKind !== previousKind || previousStory !== selectedStory) {
previousKind = selectedKind;
previousStory = selectedStory;
} else {
return;
}
const context = {
kind: selectedKind,
story: selectedStory,
};
const component = story
? story(context)
: "<h1>“I'd far rather be happy than right any day.” ~ Douglas Adams (also no component) </h1>";
if (!component) {
renderError(`No component found for ${selectedStory}`);
}
rootElement.innerHTML = component;
}
export default function renderPreview({ reduxStore, storyStore }) {