2019-04-27 11:28:28 +02:00
|
|
|
/* eslint-disable no-console */
|
2019-01-31 16:26:21 +01:00
|
|
|
/**
|
2019-04-27 11:28:28 +02:00
|
|
|
* Transpiles TypeScript demos to formatted JavaScript.
|
2019-01-31 16:26:21 +01:00
|
|
|
* Can be used to verify that JS and TS demos are equivalent. No introduced change
|
|
|
|
|
* would indicate equivalence.
|
|
|
|
|
*/
|
2019-04-27 11:28:28 +02:00
|
|
|
|
|
|
|
|
/**
|
2023-07-28 20:43:16 +02:00
|
|
|
* List of demos or folders to ignore when transpiling.
|
|
|
|
|
* Only ignore files that aren't used in the UI.
|
2019-04-27 11:28:28 +02:00
|
|
|
*/
|
2026-03-11 12:22:49 +01:00
|
|
|
const ignoreList = ['/pages.ts'];
|
2019-04-27 11:28:28 +02:00
|
|
|
|
2019-01-31 16:26:21 +01:00
|
|
|
const path = require('path');
|
2025-08-15 13:47:49 +01:00
|
|
|
const fs = require('node:fs');
|
2019-04-27 11:28:28 +02:00
|
|
|
const babel = require('@babel/core');
|
2019-01-31 16:26:21 +01:00
|
|
|
const prettier = require('prettier');
|
2024-02-02 10:33:56 +01:00
|
|
|
const {
|
|
|
|
|
getPropTypesFromFile,
|
|
|
|
|
injectPropTypesInFile,
|
2024-02-20 21:04:40 +01:00
|
|
|
} = require('@mui/internal-scripts/typescript-to-proptypes');
|
2023-09-04 12:19:50 +02:00
|
|
|
const {
|
|
|
|
|
createTypeScriptProjectBuilder,
|
|
|
|
|
} = require('@mui-internal/api-docs-builder/utils/createTypeScriptProject');
|
2025-09-09 14:12:25 +05:30
|
|
|
const { default: yargs } = require('yargs');
|
|
|
|
|
const { hideBin } = require('yargs/helpers');
|
2024-03-15 10:02:48 +01:00
|
|
|
const { fixBabelGeneratorIssues, fixLineEndings } = require('@mui/internal-docs-utils');
|
2023-11-07 11:36:38 +01:00
|
|
|
const { default: CORE_TYPESCRIPT_PROJECTS } = require('../../scripts/coreTypeScriptProjects');
|
2019-07-18 13:53:49 +02:00
|
|
|
|
2019-04-27 11:28:28 +02:00
|
|
|
const babelConfig = {
|
|
|
|
|
presets: ['@babel/preset-typescript'],
|
2021-04-29 13:44:06 +02:00
|
|
|
plugins: [],
|
2019-04-27 11:28:28 +02:00
|
|
|
generatorOpts: { retainLines: true },
|
|
|
|
|
babelrc: false,
|
|
|
|
|
configFile: false,
|
2023-04-28 16:40:10 +05:30
|
|
|
shouldPrintComment: (comment) => !comment.startsWith(' @babel-ignore-comment-in-output'),
|
2019-04-27 11:28:28 +02:00
|
|
|
};
|
2019-01-31 16:26:21 +01:00
|
|
|
|
2019-04-27 11:28:28 +02:00
|
|
|
const workspaceRoot = path.join(__dirname, '../../');
|
|
|
|
|
|
|
|
|
|
async function getFiles(root) {
|
|
|
|
|
const files = [];
|
|
|
|
|
|
2021-12-20 08:21:00 +07:00
|
|
|
try {
|
|
|
|
|
await Promise.all(
|
2025-08-15 13:47:49 +01:00
|
|
|
(await fs.promises.readdir(root)).map(async (name) => {
|
2021-12-20 08:21:00 +07:00
|
|
|
const filePath = path.join(root, name);
|
2025-08-15 13:47:49 +01:00
|
|
|
const stat = await fs.promises.stat(filePath);
|
2021-12-20 08:21:00 +07:00
|
|
|
|
2022-06-07 09:33:46 -03:00
|
|
|
if (
|
|
|
|
|
stat.isDirectory() &&
|
|
|
|
|
!ignoreList.some((ignorePath) =>
|
|
|
|
|
filePath.startsWith(path.normalize(`${workspaceRoot}/${ignorePath}`)),
|
|
|
|
|
)
|
|
|
|
|
) {
|
2021-12-20 08:21:00 +07:00
|
|
|
files.push(...(await getFiles(filePath)));
|
|
|
|
|
} else if (
|
|
|
|
|
stat.isFile() &&
|
|
|
|
|
/\.tsx?$/.test(filePath) &&
|
2024-10-30 10:50:33 +01:00
|
|
|
!filePath.endsWith('types.ts') &&
|
2021-12-20 08:21:00 +07:00
|
|
|
!filePath.endsWith('.d.ts') &&
|
|
|
|
|
!ignoreList.some((ignorePath) => filePath.endsWith(path.normalize(ignorePath)))
|
|
|
|
|
) {
|
|
|
|
|
files.push(filePath);
|
|
|
|
|
}
|
|
|
|
|
}),
|
|
|
|
|
);
|
|
|
|
|
} catch (error) {
|
|
|
|
|
if (error.message?.includes('no such file or directory')) {
|
|
|
|
|
return [];
|
|
|
|
|
}
|
|
|
|
|
throw error;
|
|
|
|
|
}
|
2019-04-27 11:28:28 +02:00
|
|
|
|
|
|
|
|
return files;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const TranspileResult = {
|
|
|
|
|
Success: 0,
|
2020-09-17 14:45:22 +02:00
|
|
|
Failed: 1,
|
2019-04-27 11:28:28 +02:00
|
|
|
};
|
|
|
|
|
|
2023-09-04 12:19:50 +02:00
|
|
|
async function transpileFile(tsxPath, project) {
|
2020-08-30 13:40:15 +02:00
|
|
|
const jsPath = tsxPath.replace(/\.tsx?$/, '.js');
|
2019-04-27 11:28:28 +02:00
|
|
|
try {
|
2025-08-15 13:47:49 +01:00
|
|
|
const source = await fs.promises.readFile(tsxPath, 'utf8');
|
2019-08-05 13:16:48 +02:00
|
|
|
|
2021-09-08 13:48:12 +02:00
|
|
|
const transformOptions = { ...babelConfig, filename: tsxPath };
|
2024-03-13 10:34:33 +01:00
|
|
|
const enableJSXPreview =
|
|
|
|
|
!tsxPath.includes(path.join('pages', 'premium-themes')) &&
|
|
|
|
|
!tsxPath.includes(path.join('getting-started', 'templates'));
|
2021-09-08 13:48:12 +02:00
|
|
|
if (enableJSXPreview) {
|
|
|
|
|
transformOptions.plugins = transformOptions.plugins.concat([
|
|
|
|
|
[
|
|
|
|
|
require.resolve('docs/src/modules/utils/babel-plugin-jsx-preview'),
|
|
|
|
|
{ maxLines: 16, outputFilename: `${tsxPath}.preview` },
|
|
|
|
|
],
|
|
|
|
|
]);
|
|
|
|
|
}
|
|
|
|
|
const { code } = await babel.transformAsync(source, transformOptions);
|
2019-07-18 13:53:49 +02:00
|
|
|
|
|
|
|
|
if (/import \w* from 'prop-types'/.test(code)) {
|
|
|
|
|
throw new Error('TypeScript demo contains prop-types, please remove them');
|
|
|
|
|
}
|
|
|
|
|
|
2023-09-04 12:19:50 +02:00
|
|
|
console.log(tsxPath);
|
|
|
|
|
|
|
|
|
|
const propTypesAST = getPropTypesFromFile({
|
|
|
|
|
project,
|
|
|
|
|
filePath: tsxPath,
|
2019-07-18 13:53:49 +02:00
|
|
|
shouldResolveObject: ({ name }) => {
|
2023-08-15 12:35:26 +01:00
|
|
|
if (name === 'classes' || name === 'ownerState' || name === 'popper') {
|
2019-07-18 13:53:49 +02:00
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return undefined;
|
|
|
|
|
},
|
|
|
|
|
});
|
2023-09-04 12:19:50 +02:00
|
|
|
const codeWithPropTypes = injectPropTypesInFile({ components: propTypesAST, target: code });
|
2024-01-24 11:40:51 +01:00
|
|
|
const prettierConfig = await prettier.resolveConfig(jsPath, {
|
2025-07-02 14:51:14 +05:30
|
|
|
config: path.join(workspaceRoot, 'prettier.config.mjs'),
|
2020-06-18 13:02:11 +02:00
|
|
|
});
|
2024-01-24 11:40:51 +01:00
|
|
|
const prettierFormat = async (jsSource) =>
|
2019-07-18 13:53:49 +02:00
|
|
|
prettier.format(jsSource, { ...prettierConfig, filepath: jsPath });
|
2020-06-18 13:02:11 +02:00
|
|
|
|
2023-08-14 08:52:32 +02:00
|
|
|
const codeWithoutTsIgnoreComments = codeWithPropTypes.replace(/^\s*\/\/ @ts-ignore.*$/gm, '');
|
2024-01-24 11:40:51 +01:00
|
|
|
const prettified = await prettierFormat(codeWithoutTsIgnoreComments);
|
2019-04-27 11:28:28 +02:00
|
|
|
const formatted = fixBabelGeneratorIssues(prettified);
|
2019-08-05 13:16:48 +02:00
|
|
|
const correctedLineEndings = fixLineEndings(source, formatted);
|
2019-04-27 11:28:28 +02:00
|
|
|
|
2019-08-05 13:16:48 +02:00
|
|
|
// removed blank lines change potential formatting
|
2025-08-15 13:47:49 +01:00
|
|
|
await fs.promises.writeFile(jsPath, await prettierFormat(correctedLineEndings));
|
2019-04-27 11:28:28 +02:00
|
|
|
return TranspileResult.Success;
|
|
|
|
|
} catch (err) {
|
2019-07-18 13:53:49 +02:00
|
|
|
console.error('Something went wrong transpiling %s\n%s\n', tsxPath, err);
|
2019-04-27 11:28:28 +02:00
|
|
|
return TranspileResult.Failed;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2020-03-03 11:29:38 +01:00
|
|
|
async function main(argv) {
|
2020-09-17 14:45:22 +02:00
|
|
|
const { watch: watchMode, disableCache, pattern } = argv;
|
|
|
|
|
|
|
|
|
|
// TODO: Remove at some point.
|
|
|
|
|
// Though not too soon so that it isn't disruptive.
|
|
|
|
|
// It's a no-op anyway.
|
|
|
|
|
if (disableCache !== undefined) {
|
|
|
|
|
console.warn(
|
|
|
|
|
'--disable-cache does not have any effect since it is the default. In the future passing this flag will throw.',
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const filePattern = new RegExp(pattern);
|
|
|
|
|
if (pattern.length > 0) {
|
|
|
|
|
console.log(`Only considering demos matching ${filePattern}`);
|
|
|
|
|
}
|
2020-03-03 11:29:38 +01:00
|
|
|
|
2021-12-20 08:21:00 +07:00
|
|
|
const tsxFiles = [
|
|
|
|
|
...(await getFiles(path.join(workspaceRoot, 'docs/src/pages'))), // old structure
|
|
|
|
|
...(await getFiles(path.join(workspaceRoot, 'docs/data'))), // new structure
|
2023-09-04 12:19:50 +02:00
|
|
|
].filter((fileName) => filePattern.test(fileName));
|
2019-04-27 11:28:28 +02:00
|
|
|
|
2023-09-04 12:19:50 +02:00
|
|
|
const buildProject = createTypeScriptProjectBuilder(CORE_TYPESCRIPT_PROJECTS);
|
|
|
|
|
const project = buildProject('docs', { files: tsxFiles });
|
2019-07-18 13:53:49 +02:00
|
|
|
|
2019-04-27 11:28:28 +02:00
|
|
|
let successful = 0;
|
|
|
|
|
let failed = 0;
|
2023-09-04 12:19:50 +02:00
|
|
|
(
|
|
|
|
|
await Promise.all(
|
|
|
|
|
tsxFiles.map((file) => {
|
|
|
|
|
return transpileFile(file, project);
|
|
|
|
|
}),
|
|
|
|
|
)
|
|
|
|
|
).forEach((result) => {
|
2020-09-17 14:45:22 +02:00
|
|
|
switch (result) {
|
|
|
|
|
case TranspileResult.Success: {
|
|
|
|
|
successful += 1;
|
|
|
|
|
break;
|
2019-04-27 11:28:28 +02:00
|
|
|
}
|
2020-09-17 14:45:22 +02:00
|
|
|
case TranspileResult.Failed: {
|
|
|
|
|
failed += 1;
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
default: {
|
|
|
|
|
throw new Error(`No handler for ${result}`);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
2019-04-27 11:28:28 +02:00
|
|
|
|
|
|
|
|
console.log(
|
|
|
|
|
[
|
|
|
|
|
'------ Summary ------',
|
|
|
|
|
'%i demo(s) were successfully transpiled',
|
|
|
|
|
'%i demo(s) were unsuccessful',
|
|
|
|
|
].join('\n'),
|
|
|
|
|
successful,
|
|
|
|
|
failed,
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
if (!watchMode) {
|
|
|
|
|
if (failed > 0) {
|
|
|
|
|
process.exit(1);
|
|
|
|
|
}
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
tsxFiles.forEach((filePath) => {
|
2025-08-15 13:47:49 +01:00
|
|
|
fs.watchFile(filePath, { interval: 500 }, async () => {
|
2023-09-04 12:19:50 +02:00
|
|
|
if ((await transpileFile(filePath, project, true)) === 0) {
|
2019-04-27 11:28:28 +02:00
|
|
|
console.log('Success - %s', filePath);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
console.log('\nWatching for file changes...');
|
2020-03-03 11:29:38 +01:00
|
|
|
}
|
|
|
|
|
|
2025-09-09 14:12:25 +05:30
|
|
|
yargs()
|
2020-03-03 11:29:38 +01:00
|
|
|
.command({
|
|
|
|
|
command: '$0',
|
2020-07-27 15:52:52 +02:00
|
|
|
description: 'transpile TypeScript demos',
|
2020-03-03 11:29:38 +01:00
|
|
|
builder: (command) => {
|
|
|
|
|
return command
|
|
|
|
|
.option('watch', {
|
|
|
|
|
default: false,
|
|
|
|
|
description: 'transpiles demos as soon as they changed',
|
|
|
|
|
type: 'boolean',
|
|
|
|
|
})
|
|
|
|
|
.option('disable-cache', {
|
2020-09-17 14:45:22 +02:00
|
|
|
description: 'No longer supported. The cache is disabled by default.',
|
2020-03-03 11:29:38 +01:00
|
|
|
type: 'boolean',
|
2020-09-17 14:45:22 +02:00
|
|
|
})
|
|
|
|
|
.option('pattern', {
|
|
|
|
|
default: '',
|
|
|
|
|
description:
|
|
|
|
|
'Transpiles only the TypeScript demos whose filename matches the given pattern.',
|
|
|
|
|
type: 'string',
|
2020-03-03 11:29:38 +01:00
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
handler: main,
|
|
|
|
|
})
|
|
|
|
|
.help()
|
|
|
|
|
.strict(true)
|
|
|
|
|
.version(false)
|
2025-09-09 14:12:25 +05:30
|
|
|
.parse(hideBin(process.argv));
|
