Skip to content

Commit 1d8ba55

Browse files
committed
Fix inline previews
1 parent 9b012ef commit 1d8ba55

File tree

49 files changed

+432
-3
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

49 files changed

+432
-3
lines changed

docs/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@
1313
"export": "rimraf docs/export && next export --threads=3 -o export && yarn build-sw",
1414
"icons": "rimraf public/static/icons/* && node ./scripts/buildIcons.js",
1515
"typescript": "tsc -p tsconfig.json",
16-
"typescript:transpile": "node scripts/formattedTSDemos",
17-
"typescript:transpile:dev": "node scripts/formattedTSDemos --watch"
16+
"typescript:transpile": "cross-env BABEL_ENV=development babel-node --extensions \".tsx,.ts,.js\" scripts/formattedTSDemos",
17+
"typescript:transpile:dev": "cross-env BABEL_ENV=development babel-node --extensions \".tsx,.ts,.js\" scripts/formattedTSDemos --watch"
1818
},
1919
"dependencies": {
2020
"@babel/core": "^7.16.0",

docs/scripts/formattedTSDemos.js

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,17 @@ async function transpileFile(tsxPath, program, ignoreCache = false) {
7575

7676
const source = await fse.readFile(tsxPath, 'utf8');
7777

78-
const { code } = await babel.transformAsync(source, { ...babelConfig, filename: tsxPath });
78+
const transformOptions = { ...babelConfig, filename: tsxPath };
79+
const enableJSXPreview = !tsxPath.includes(path.join('pages', 'premium-themes'));
80+
if (enableJSXPreview) {
81+
transformOptions.plugins = transformOptions.plugins.concat([
82+
[
83+
require.resolve('docsx/src/modules/utils/babel-plugin-jsx-preview'),
84+
{ maxLines: 16, outputFilename: `${tsxPath}.preview` },
85+
],
86+
]);
87+
}
88+
const { code } = await babel.transformAsync(source, transformOptions);
7989

8090
if (/import \w* from 'prop-types'/.test(code)) {
8191
throw new Error('TypeScript demo contains prop-types, please remove them');
Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
const fs = require('fs');
2+
3+
const pluginName = 'babel-plugin-jsx-preview';
4+
5+
/**
6+
* @returns {import('@babel/core').PluginObj}
7+
*/
8+
export default function babelPluginJsxPreview() {
9+
const wrapperTypes = ['div', 'Box', 'Stack'];
10+
11+
/**
12+
* @type {import('@babel/core').types.JSXElement | import('@babel/core').types.JSXElement['children']}
13+
*/
14+
let previewNode = null;
15+
16+
return {
17+
name: pluginName,
18+
visitor: {
19+
ExportDefaultDeclaration(path) {
20+
const { declaration } = path.node;
21+
if (declaration.type !== 'FunctionDeclaration') {
22+
return;
23+
}
24+
const { body } = declaration.body;
25+
/**
26+
* @type {import('@babel/core').types.ReturnStatement[]}
27+
*/
28+
const [lastReturn] = body
29+
.filter((statement) => {
30+
return statement.type === 'ReturnStatement';
31+
})
32+
.reverse();
33+
34+
const returnedJSX = lastReturn.argument;
35+
if (returnedJSX.type === 'JSXElement') {
36+
previewNode = returnedJSX;
37+
if (
38+
wrapperTypes.includes(previewNode.openingElement.name.name) &&
39+
previewNode.children.length > 0
40+
) {
41+
// Trim blank JSXText to normalize
42+
// return (
43+
// <div />
44+
// )
45+
// and
46+
// return (
47+
// <Stack>
48+
// <div />
49+
// ^^^^ Blank JSXText including newline
50+
// </Stacke>
51+
// )
52+
previewNode = previewNode.children.filter((child, index, children) => {
53+
const isSurroundingBlankJSXText =
54+
(index === 0 || index === children.length - 1) &&
55+
child.type === 'JSXText' &&
56+
!/[^\s]+/.test(child.value);
57+
return !isSurroundingBlankJSXText;
58+
});
59+
}
60+
}
61+
},
62+
},
63+
post(state) {
64+
const { maxLines, outputFilename } = state.opts.plugins.find((plugin) => {
65+
return plugin.key === pluginName;
66+
}).options;
67+
68+
let hasPreview = false;
69+
if (previewNode !== null) {
70+
const [startNode, endNode] = Array.isArray(previewNode)
71+
? [previewNode[0], previewNode.slice(-1)[0]]
72+
: [previewNode, previewNode];
73+
const preview = state.code.slice(startNode.start, endNode.end);
74+
75+
const previewLines = preview.split(/\n/);
76+
// The first line is already trimmed either due to trimmed blank JSXText or because it's a single node which babel already trims.
77+
// The last line is therefore the meassure for indendation
78+
const indendation = previewLines.slice(-1)[0].match(/^\s*/)[0].length;
79+
const deindentedPreviewLines = preview.split(/\n/).map((line, index) => {
80+
if (index === 0) {
81+
return line;
82+
}
83+
return line.slice(indendation);
84+
});
85+
86+
if (deindentedPreviewLines.length <= maxLines) {
87+
fs.writeFileSync(outputFilename, deindentedPreviewLines.join('\n'));
88+
hasPreview = true;
89+
}
90+
}
91+
92+
if (!hasPreview) {
93+
try {
94+
fs.unlinkSync(outputFilename);
95+
} catch (error) {
96+
// Would throw if the file doesn't exist.
97+
// But we do want to ensure that the file doesn't exist so the error is fine.
98+
}
99+
}
100+
},
101+
};
102+
}
Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<DataGrid
2+
columns={[{ field: 'username' }, { field: 'age' }]}
3+
rows={[
4+
{
5+
id: 1,
6+
username: '@MUI',
7+
age: 20,
8+
},
9+
]}
10+
/>
Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<DataGrid
2+
columns={[{ field: 'username', minWidth: 150 }, { field: 'age' }]}
3+
rows={rows}
4+
/>
Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<DataGridPro
2+
columns={[
3+
{ field: 'id' },
4+
{ field: 'username' },
5+
{ field: 'age', disableReorder: true },
6+
]}
7+
rows={rows}
8+
/>
Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<DataGridPro
2+
columns={[
3+
{ field: 'id' },
4+
{ field: 'username', minWidth: 150 },
5+
{ field: 'age', resizable: false },
6+
]}
7+
rows={rows}
8+
/>
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<DataGrid columns={columns} rows={rows} />
Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<DataGrid
2+
columns={[{ field: 'username', width: 200 }, { field: 'age' }]}
3+
rows={rows}
4+
/>
Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<DataGrid
2+
columns={[
3+
{ field: 'status', width: 130 },
4+
{ field: 'subTotal', ...usdPrice },
5+
{ field: 'total', ...usdPrice },
6+
]}
7+
rows={rows}
8+
/>

0 commit comments

Comments
 (0)