/
jsxDecorator.tsx
200 lines (164 loc) · 6.43 KB
/
jsxDecorator.tsx
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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
import React, { createElement, ReactElement } from 'react';
import reactElementToJSXString, { Options } from 'react-element-to-jsx-string';
import dedent from 'ts-dedent';
import deprecate from 'util-deprecate';
import { addons, StoryContext } from '@storybook/addons';
import { logger } from '@storybook/client-logger';
import { SourceType, SNIPPET_RENDERED } from '../../shared';
import { getDocgenSection } from '../../lib/docgen';
import { isMemo, isForwardRef } from './lib';
type JSXOptions = Options & {
/** How many wrappers to skip when rendering the jsx */
skip?: number;
/** Whether to show the function in the jsx tab */
showFunctions?: boolean;
/** Whether to format HTML or Vue markup */
enableBeautify?: boolean;
/** Override the display name used for a component */
displayName?: string | Options['displayName'];
/** Deprecated: A function ran after the story is rendered */
onBeforeRender?(dom: string): string;
/** A function ran after a story is rendered (prefer this over `onBeforeRender`) */
transformSource?(dom: string, context?: StoryContext): string;
};
/** Run the user supplied onBeforeRender function if it exists */
const applyBeforeRender = (domString: string, options: JSXOptions) => {
if (typeof options.onBeforeRender !== 'function') {
return domString;
}
const deprecatedOnBeforeRender = deprecate(
options.onBeforeRender,
dedent`
StoryFn.parameters.jsx.onBeforeRender was deprecated.
Prefer StoryFn.parameters.jsx.transformSource instead.
See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-onbeforerender for details.
`
);
return deprecatedOnBeforeRender(domString);
};
/** Run the user supplied transformSource function if it exists */
const applyTransformSource = (domString: string, options: JSXOptions, context?: StoryContext) => {
if (typeof options.transformSource !== 'function') {
return domString;
}
return options.transformSource(domString, context);
};
/** Apply the users parameters and render the jsx for a story */
export const renderJsx = (code: React.ReactElement, options: JSXOptions) => {
if (typeof code === 'undefined') {
logger.warn('Too many skip or undefined component');
return null;
}
let renderedJSX = code;
const Type = renderedJSX.type;
for (let i = 0; i < options.skip; i += 1) {
if (typeof renderedJSX === 'undefined') {
logger.warn('Cannot skip undefined element');
return null;
}
if (React.Children.count(renderedJSX) > 1) {
logger.warn('Trying to skip an array of elements');
return null;
}
if (typeof renderedJSX.props.children === 'undefined') {
logger.warn('Not enough children to skip elements.');
if (typeof renderedJSX.type === 'function' && renderedJSX.type.name === '') {
renderedJSX = <Type {...renderedJSX.props} />;
}
} else if (typeof renderedJSX.props.children === 'function') {
renderedJSX = renderedJSX.props.children();
} else {
renderedJSX = renderedJSX.props.children;
}
}
const displayNameDefaults =
typeof options.displayName === 'string'
? { showFunctions: true, displayName: () => options.displayName }
: {
// To get exotic component names resolving properly
displayName: (el: any): string =>
el.type.displayName ||
getDocgenSection(el.type, 'displayName') ||
(el.type.name !== '_default' ? el.type.name : null) ||
(typeof el.type === 'function' ? 'No Display Name' : null) ||
(isForwardRef(el.type) ? el.type.render.name : null) ||
(isMemo(el.type) ? el.type.type.name : null) ||
el.type,
};
const filterDefaults = {
filterProps: (value: any, key: string): boolean => value !== undefined,
};
const opts = {
...displayNameDefaults,
...filterDefaults,
...options,
};
const result = React.Children.map(code, (c) => {
// @ts-ignore FIXME: workaround react-element-to-jsx-string
const child = typeof c === 'number' ? c.toString() : c;
let string = applyBeforeRender(reactElementToJSXString(child, opts as Options), options);
if (string.indexOf('"') > -1) {
const matches = string.match(/\S+=\\"([^"]*)\\"/g);
if (matches) {
matches.forEach((match) => {
string = string.replace(match, match.replace(/"/g, "'"));
});
}
}
return string;
}).join('\n');
return result.replace(/function\s+noRefCheck\(\)\s+\{\}/, '() => {}');
};
const defaultOpts = {
skip: 0,
showFunctions: false,
enableBeautify: true,
showDefaultProps: false,
};
export const skipJsxRender = (context: StoryContext) => {
const sourceParams = context?.parameters.docs?.source;
const isArgsStory = context?.parameters.__isArgsStory;
// always render if the user forces it
if (sourceParams?.type === SourceType.DYNAMIC) {
return false;
}
// never render if the user is forcing the block to render code, or
// if the user provides code, or if it's not an args story.
return !isArgsStory || sourceParams?.code || sourceParams?.type === SourceType.CODE;
};
const isMdx = (node: any) => node.type?.displayName === 'MDXCreateElement' && !!node.props?.mdxType;
const mdxToJsx = (node: any) => {
if (!isMdx(node)) return node;
const { mdxType, originalType, children, ...rest } = node.props;
let jsxChildren = [] as ReactElement[];
if (children) {
const array = Array.isArray(children) ? children : [children];
jsxChildren = array.map(mdxToJsx);
}
return createElement(originalType, rest, ...jsxChildren);
};
export const jsxDecorator = (storyFn: any, context: StoryContext) => {
const story = storyFn();
// We only need to render JSX if the source block is actually going to
// consume it. Otherwise it's just slowing us down.
if (skipJsxRender(context)) {
return story;
}
const channel = addons.getChannel();
const options = {
...defaultOpts,
...(context?.parameters.jsx || {}),
} as Required<JSXOptions>;
// Exclude decorators from source code snippet by default
const storyJsx = context?.parameters.docs?.source?.excludeDecorators
? context.originalStoryFn(context.args)
: story;
const sourceJsx = mdxToJsx(storyJsx);
let jsx = '';
const rendered = renderJsx(sourceJsx, options);
if (rendered) {
jsx = applyTransformSource(rendered, options, context);
}
channel.emit(SNIPPET_RENDERED, (context || {}).id, jsx);
return story;
};