forked from storybookjs/storybook
-
Notifications
You must be signed in to change notification settings - Fork 1
/
render.ts
87 lines (71 loc) · 2.21 KB
/
render.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
import { global } from '@storybook/global';
import { dedent } from 'ts-dedent';
import type { RenderContext } from '@storybook/types';
import type { OptionsArgs, EmberRenderer } from './types';
const { document } = global;
declare let Ember: any;
const rootEl = document.getElementById('storybook-root');
function loadEmberApp() {
const config = global.require(`${global.STORYBOOK_NAME}/config/environment`);
return global.require(`${global.STORYBOOK_NAME}/app`).default.create({
autoboot: false,
rootElement: rootEl,
...config.APP,
});
}
const app = loadEmberApp();
let lastPromise = app.boot();
let hasRendered = false;
let isRendering = false;
function render(options: OptionsArgs, el: EmberRenderer['canvasElement']) {
if (isRendering) return;
isRendering = true;
const { template, context = {}, element } = options;
if (hasRendered) {
lastPromise = lastPromise.then((instance: any) => instance.destroy());
}
lastPromise = lastPromise
.then(() => {
const appInstancePrivate = app.buildInstance();
return appInstancePrivate.boot().then(() => appInstancePrivate);
})
.then((instance: any) => {
instance.register(
'component:story-mode',
Ember.Component.extend({
layout: template || options,
...context,
})
);
const component = instance.lookup('component:story-mode');
if (element) {
component.appendTo(element);
element.appendTo(el);
} else {
component.appendTo(el);
}
hasRendered = true;
isRendering = false;
return instance;
});
}
export function renderToCanvas(
{ storyFn, kind, name, showMain, showError }: RenderContext<EmberRenderer>,
canvasElement: EmberRenderer['canvasElement']
) {
const element = storyFn();
if (!element) {
showError({
title: `Expecting a Ember element from the story: "${name}" of "${kind}".`,
description: dedent`
Did you forget to return the Ember element from the story?
Use "() => hbs('{{component}}')" or "() => { return {
template: hbs\`{{component}}\`
} }" when defining the story.
`,
});
return;
}
showMain();
render(element, canvasElement);
}