Fix inline previews

Author: DanailH

docs/package.json

@@ -13,8 +13,8 @@
     "export": "rimraf docs/export && next export --threads=3 -o export && yarn build-sw",
     "icons": "rimraf public/static/icons/* && node ./scripts/buildIcons.js",
     "typescript": "tsc -p tsconfig.json",
-    "typescript:transpile": "node scripts/formattedTSDemos",
-    "typescript:transpile:dev": "node scripts/formattedTSDemos --watch"
+    "typescript:transpile": "cross-env BABEL_ENV=development babel-node --extensions \".tsx,.ts,.js\" scripts/formattedTSDemos",
+    "typescript:transpile:dev": "cross-env BABEL_ENV=development babel-node --extensions \".tsx,.ts,.js\" scripts/formattedTSDemos --watch"
   },
   "dependencies": {
     "@babel/core": "^7.16.0",

docs/scripts/formattedTSDemos.js

@@ -75,7 +75,17 @@ async function transpileFile(tsxPath, program, ignoreCache = false) {
 
     const source = await fse.readFile(tsxPath, 'utf8');
 
-    const { code } = await babel.transformAsync(source, { ...babelConfig, filename: tsxPath });
+    const transformOptions = { ...babelConfig, filename: tsxPath };
+    const enableJSXPreview = !tsxPath.includes(path.join('pages', 'premium-themes'));
+    if (enableJSXPreview) {
+      transformOptions.plugins = transformOptions.plugins.concat([
+        [
+          require.resolve('docsx/src/modules/utils/babel-plugin-jsx-preview'),
+          { maxLines: 16, outputFilename: `${tsxPath}.preview` },
+        ],
+      ]);
+    }
+    const { code } = await babel.transformAsync(source, transformOptions);
 
     if (/import \w* from 'prop-types'/.test(code)) {
       throw new Error('TypeScript demo contains prop-types, please remove them');

docs/src/modules/utils/babel-plugin-jsx-preview.js

@@ -0,0 +1,102 @@
+const fs = require('fs');
+
+const pluginName = 'babel-plugin-jsx-preview';
+
+/**
+ * @returns {import('@babel/core').PluginObj}
+ */
+export default function babelPluginJsxPreview() {
+  const wrapperTypes = ['div', 'Box', 'Stack'];
+
+  /**
+   * @type {import('@babel/core').types.JSXElement | import('@babel/core').types.JSXElement['children']}
+   */
+  let previewNode = null;
+
+  return {
+    name: pluginName,
+    visitor: {
+      ExportDefaultDeclaration(path) {
+        const { declaration } = path.node;
+        if (declaration.type !== 'FunctionDeclaration') {
+          return;
+        }
+        const { body } = declaration.body;
+        /**
+         * @type {import('@babel/core').types.ReturnStatement[]}
+         */
+        const [lastReturn] = body
+          .filter((statement) => {
+            return statement.type === 'ReturnStatement';
+          })
+          .reverse();
+
+        const returnedJSX = lastReturn.argument;
+        if (returnedJSX.type === 'JSXElement') {
+          previewNode = returnedJSX;
+          if (
+            wrapperTypes.includes(previewNode.openingElement.name.name) &&
+            previewNode.children.length > 0
+          ) {
+            // Trim blank JSXText to normalize
+            // return (
+            //   <div />
+            // )
+            // and
+            // return (
+            //   <Stack>
+            //     <div />
+            // ^^^^ Blank JSXText including newline
+            //   </Stacke>
+            // )
+            previewNode = previewNode.children.filter((child, index, children) => {
+              const isSurroundingBlankJSXText =
+                (index === 0 || index === children.length - 1) &&
+                child.type === 'JSXText' &&
+                !/[^\s]+/.test(child.value);
+              return !isSurroundingBlankJSXText;
+            });
+          }
+        }
+      },
+    },
+    post(state) {
+      const { maxLines, outputFilename } = state.opts.plugins.find((plugin) => {
+        return plugin.key === pluginName;
+      }).options;
+
+      let hasPreview = false;
+      if (previewNode !== null) {
+        const [startNode, endNode] = Array.isArray(previewNode)
+          ? [previewNode[0], previewNode.slice(-1)[0]]
+          : [previewNode, previewNode];
+        const preview = state.code.slice(startNode.start, endNode.end);
+
+        const previewLines = preview.split(/\n/);
+        // The first line is already trimmed either due to trimmed blank JSXText or because it's a single node which babel already trims.
+        // The last line is therefore the meassure for indendation
+        const indendation = previewLines.slice(-1)[0].match(/^\s*/)[0].length;
+        const deindentedPreviewLines = preview.split(/\n/).map((line, index) => {
+          if (index === 0) {
+            return line;
+          }
+          return line.slice(indendation);
+        });
+
+        if (deindentedPreviewLines.length <= maxLines) {
+          fs.writeFileSync(outputFilename, deindentedPreviewLines.join('\n'));
+          hasPreview = true;
+        }
+      }
+
+      if (!hasPreview) {
+        try {
+          fs.unlinkSync(outputFilename);
+        } catch (error) {
+          // Would throw if the file doesn't exist.
+          // But we do want to ensure that the file doesn't exist so the error is fine.
+        }
+      }
+    },
+  };
+}

docs/src/pages/components/data-grid/columns/BasicColumnsGrid.tsx.preview

@@ -0,0 +1,10 @@
+<DataGrid
+  columns={[{ field: 'username' }, { field: 'age' }]}
+  rows={[
+    {
+      id: 1,
+      username: '@MUI',
+      age: 20,
+    },
+  ]}
+/>

docs/src/pages/components/data-grid/columns/ColumnMinWidthGrid.tsx.preview

@@ -0,0 +1,4 @@
+<DataGrid
+  columns={[{ field: 'username', minWidth: 150 }, { field: 'age' }]}
+  rows={rows}
+/>

docs/src/pages/components/data-grid/columns/ColumnOrderingDisabledGrid.tsx.preview

@@ -0,0 +1,8 @@
+<DataGridPro
+  columns={[
+    { field: 'id' },
+    { field: 'username' },
+    { field: 'age', disableReorder: true },
+  ]}
+  rows={rows}
+/>

docs/src/pages/components/data-grid/columns/ColumnSizingGrid.tsx.preview

@@ -0,0 +1,8 @@
+<DataGridPro
+  columns={[
+    { field: 'id' },
+    { field: 'username', minWidth: 150 },
+    { field: 'age', resizable: false },
+  ]}
+  rows={rows}
+/>

docs/src/pages/components/data-grid/columns/ColumnTypesGrid.tsx.preview

@@ -0,0 +1 @@
+<DataGrid columns={columns} rows={rows} />

docs/src/pages/components/data-grid/columns/ColumnWidthGrid.tsx.preview

@@ -0,0 +1,4 @@
+<DataGrid
+  columns={[{ field: 'username', width: 200 }, { field: 'age' }]}
+  rows={rows}
+/>

docs/src/pages/components/data-grid/columns/CustomColumnTypesGrid.tsx.preview

@@ -0,0 +1,8 @@
+<DataGrid
+  columns={[
+    { field: 'status', width: 130 },
+    { field: 'subTotal', ...usdPrice },
+    { field: 'total', ...usdPrice },
+  ]}
+  rows={rows}
+/>