diff --git a/docs/data/material/components/autocomplete/top100Films.ts b/docs/data/material/components/autocomplete/top100Films.ts new file mode 100644 index 00000000000000..3226dcbc8ba7f3 --- /dev/null +++ b/docs/data/material/components/autocomplete/top100Films.ts @@ -0,0 +1,129 @@ +// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top +const top100Films = [ + { label: 'The Shawshank Redemption', year: 1994 }, + { label: 'The Godfather', year: 1972 }, + { label: 'The Godfather: Part II', year: 1974 }, + { label: 'The Dark Knight', year: 2008 }, + { label: '12 Angry Men', year: 1957 }, + { label: "Schindler's List", year: 1993 }, + { label: 'Pulp Fiction', year: 1994 }, + { + label: 'The Lord of the Rings: The Return of the King', + year: 2003, + }, + { label: 'The Good, the Bad and the Ugly', year: 1966 }, + { label: 'Fight Club', year: 1999 }, + { + label: 'The Lord of the Rings: The Fellowship of the Ring', + year: 2001, + }, + { + label: 'Star Wars: Episode V - The Empire Strikes Back', + year: 1980, + }, + { label: 'Forrest Gump', year: 1994 }, + { label: 'Inception', year: 2010 }, + { + label: 'The Lord of the Rings: The Two Towers', + year: 2002, + }, + { label: "One Flew Over the Cuckoo's Nest", year: 1975 }, + { label: 'Goodfellas', year: 1990 }, + { label: 'The Matrix', year: 1999 }, + { label: 'Seven Samurai', year: 1954 }, + { + label: 'Star Wars: Episode IV - A New Hope', + year: 1977, + }, + { label: 'City of God', year: 2002 }, + { label: 'Se7en', year: 1995 }, + { label: 'The Silence of the Lambs', year: 1991 }, + { label: "It's a Wonderful Life", year: 1946 }, + { label: 'Life Is Beautiful', year: 1997 }, + { label: 'The Usual Suspects', year: 1995 }, + { label: 'Léon: The Professional', year: 1994 }, + { label: 'Spirited Away', year: 2001 }, + { label: 'Saving Private Ryan', year: 1998 }, + { label: 'Once Upon a Time in the West', year: 1968 }, + { label: 'American History X', year: 1998 }, + { label: 'Interstellar', year: 2014 }, + { label: 'Casablanca', year: 1942 }, + { label: 'City Lights', year: 1931 }, + { label: 'Psycho', year: 1960 }, + { label: 'The Green Mile', year: 1999 }, + { label: 'The Intouchables', year: 2011 }, + { label: 'Modern Times', year: 1936 }, + { label: 'Raiders of the Lost Ark', year: 1981 }, + { label: 'Rear Window', year: 1954 }, + { label: 'The Pianist', year: 2002 }, + { label: 'The Departed', year: 2006 }, + { label: 'Terminator 2: Judgment Day', year: 1991 }, + { label: 'Back to the Future', year: 1985 }, + { label: 'Whiplash', year: 2014 }, + { label: 'Gladiator', year: 2000 }, + { label: 'Memento', year: 2000 }, + { label: 'The Prestige', year: 2006 }, + { label: 'The Lion King', year: 1994 }, + { label: 'Apocalypse Now', year: 1979 }, + { label: 'Alien', year: 1979 }, + { label: 'Sunset Boulevard', year: 1950 }, + { + label: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', + year: 1964, + }, + { label: 'The Great Dictator', year: 1940 }, + { label: 'Cinema Paradiso', year: 1988 }, + { label: 'The Lives of Others', year: 2006 }, + { label: 'Grave of the Fireflies', year: 1988 }, + { label: 'Paths of Glory', year: 1957 }, + { label: 'Django Unchained', year: 2012 }, + { label: 'The Shining', year: 1980 }, + { label: 'WALL·E', year: 2008 }, + { label: 'American Beauty', year: 1999 }, + { label: 'The Dark Knight Rises', year: 2012 }, + { label: 'Princess Mononoke', year: 1997 }, + { label: 'Aliens', year: 1986 }, + { label: 'Oldboy', year: 2003 }, + { label: 'Once Upon a Time in America', year: 1984 }, + { label: 'Witness for the Prosecution', year: 1957 }, + { label: 'Das Boot', year: 1981 }, + { label: 'Citizen Kane', year: 1941 }, + { label: 'North by Northwest', year: 1959 }, + { label: 'Vertigo', year: 1958 }, + { + label: 'Star Wars: Episode VI - Return of the Jedi', + year: 1983, + }, + { label: 'Reservoir Dogs', year: 1992 }, + { label: 'Braveheart', year: 1995 }, + { label: 'M', year: 1931 }, + { label: 'Requiem for a Dream', year: 2000 }, + { label: 'Amélie', year: 2001 }, + { label: 'A Clockwork Orange', year: 1971 }, + { label: 'Like Stars on Earth', year: 2007 }, + { label: 'Taxi Driver', year: 1976 }, + { label: 'Lawrence of Arabia', year: 1962 }, + { label: 'Double Indemnity', year: 1944 }, + { + label: 'Eternal Sunshine of the Spotless Mind', + year: 2004, + }, + { label: 'Amadeus', year: 1984 }, + { label: 'To Kill a Mockingbird', year: 1962 }, + { label: 'Toy Story 3', year: 2010 }, + { label: 'Logan', year: 2017 }, + { label: 'Full Metal Jacket', year: 1987 }, + { label: 'Dangal', year: 2016 }, + { label: 'The Sting', year: 1973 }, + { label: '2001: A Space Odyssey', year: 1968 }, + { label: "Singin' in the Rain", year: 1952 }, + { label: 'Toy Story', year: 1995 }, + { label: 'Bicycle Thieves', year: 1948 }, + { label: 'The Kid', year: 1921 }, + { label: 'Inglourious Basterds', year: 2009 }, + { label: 'Snatch', year: 2000 }, + { label: '3 Idiots', year: 2009 }, + { label: 'Monty Python and the Holy Grail', year: 1975 }, +]; + +export default top100Films; diff --git a/docs/scripts/formattedTSDemos.js b/docs/scripts/formattedTSDemos.js index abdf96b6263d12..3994bfa860312c 100644 --- a/docs/scripts/formattedTSDemos.js +++ b/docs/scripts/formattedTSDemos.js @@ -56,6 +56,7 @@ async function getFiles(root) { } else if ( stat.isFile() && /\.tsx?$/.test(filePath) && + !filePath.endsWith('types.ts') && !filePath.endsWith('.d.ts') && !ignoreList.some((ignorePath) => filePath.endsWith(path.normalize(ignorePath))) ) { diff --git a/docs/src/modules/sandbox/CodeSandbox.ts b/docs/src/modules/sandbox/CodeSandbox.ts index 8a4bdc7744a3ba..26f51d384a47e2 100644 --- a/docs/src/modules/sandbox/CodeSandbox.ts +++ b/docs/src/modules/sandbox/CodeSandbox.ts @@ -47,10 +47,7 @@ function createReactApp(demoData: DemoData) { content: CRA.getRootIndex(demoData), }, [`src/Demo.${ext}`]: { - content: flattenRelativeImports( - demoData.raw, - demoData.relativeModules?.map((file) => file.module), - ), + content: flattenRelativeImports(demoData.raw), }, // Spread the relative modules ...(demoData.relativeModules && @@ -60,7 +57,7 @@ function createReactApp(demoData: DemoData) { ...acc, // Remove the path and keep the filename [`src/${curr.module.replace(/^.*[\\/]/g, '')}`]: { - content: curr.raw, + content: flattenRelativeImports(curr.raw), }, }), {}, diff --git a/docs/src/modules/sandbox/FlattenRelativeImports.ts b/docs/src/modules/sandbox/FlattenRelativeImports.ts index a6e3668d71be63..44bfdc247e6e6f 100644 --- a/docs/src/modules/sandbox/FlattenRelativeImports.ts +++ b/docs/src/modules/sandbox/FlattenRelativeImports.ts @@ -1,10 +1,3 @@ -export default function flattenRelativeImports(rawCode: string, modulePaths: string[] = []) { - let newCode = rawCode; - modulePaths.forEach((path: string) => { - const pathWithoutExtension = path.replace(/\.[a-z]*$/g, ''); - // Move the relative import to the current directory - const newPath = `./${pathWithoutExtension.replace(/^.*[\\/]/g, '')}`; - newCode = newCode.replace(pathWithoutExtension, newPath); - }); - return newCode; +export default function flattenRelativeImports(rawCode: string) { + return rawCode.replace(/from (['"])\..*\//g, `from $1./`); } diff --git a/docs/src/modules/sandbox/StackBlitz.ts b/docs/src/modules/sandbox/StackBlitz.ts index 558527e34374ed..5002b015ea93bc 100644 --- a/docs/src/modules/sandbox/StackBlitz.ts +++ b/docs/src/modules/sandbox/StackBlitz.ts @@ -52,10 +52,7 @@ function createReactApp(demoData: DemoData) { const files: Record = { 'index.html': CRA.getHtml(demoData), [`index.${ext}`]: CRA.getRootIndex(demoData), - [`Demo.${ext}`]: flattenRelativeImports( - demoData.raw, - demoData.relativeModules?.map((file) => file.module), - ), + [`Demo.${ext}`]: flattenRelativeImports(demoData.raw), // Spread the relative modules ...(demoData.relativeModules && // Transform the relative modules array into an object @@ -63,7 +60,7 @@ function createReactApp(demoData: DemoData) { (acc, curr) => ({ ...acc, // Remove the path and keep the filename - [`${curr.module.replace(/^.*[\\/]/g, '')}`]: curr.raw, + [`${curr.module.replace(/^.*[\\/]/g, '')}`]: flattenRelativeImports(curr.raw), }), {}, )), diff --git a/packages/markdown/loader.js b/packages/markdown/loader.js index 62a90a2fda9d7e..3b05c43194d004 100644 --- a/packages/markdown/loader.js +++ b/packages/markdown/loader.js @@ -148,11 +148,12 @@ module.exports = async function demoLoader() { * @param {*} moduleFilepath * @param {*} variant * @param {*} importModuleID + * @returns {string} The name of the imported module along with a resolved extension if not provided * @example detectRelativeImports('ComboBox.js', '', JS', './top100Films') => relativeModules.set('ComboBox.js', new Map([['./top100Films.js', ['JS']]])) */ function detectRelativeImports(demoName, moduleFilepath, variant, importModuleID) { + let relativeModuleFilename = importModuleID; if (importModuleID.startsWith('.')) { - let relativeModuleFilename = importModuleID; const demoMap = relativeModules.get(demoName); // If the moduleID does not end with an extension, or ends with an unsupported extension (e.g. ".styling") we need to resolve it // Fastest way to get a file extension, see: https://stackoverflow.com/a/12900504/ @@ -198,6 +199,27 @@ module.exports = async function demoLoader() { } } } + return relativeModuleFilename; + } + + /** + * Inserts the moduleData into the relativeModules object + * @param string demoName + * @param {*} moduleData + * @param string variant + * @example updateRelativeModules(demoName, {module: 'constants.js', raw: ... }, 'JS') => demos[demoName].relativeModules[variant].push(moduleData) + */ + function updateRelativeModules(demoName, moduleData, variant) { + if (demos[demoName].relativeModules[variant]) { + // Avoid duplicates + if ( + !demos[demoName].relativeModules[variant].some((elem) => elem.module === moduleData.module) + ) { + demos[demoName].relativeModules[variant].push(moduleData); + } + } else { + demos[demoName].relativeModules[variant] = [moduleData]; + } } await Promise.all( @@ -438,32 +460,105 @@ module.exports = async function demoLoader() { demos[demoName].relativeModules = {}; } + const addedModulesRelativeToModulePath = new Set(); await Promise.all( Array.from(relativeModules.get(demoName)).map(async ([relativeModuleID, variants]) => { - let raw = ''; - try { - raw = await fs.readFile(path.join(path.dirname(moduleFilepath), relativeModuleID), { - encoding: 'utf8', - }); - } catch { - throw new Error( - `Could not find a module for the relative import "${relativeModuleID}" in the demo "${demoName}"`, + for (const variant of variants) { + let raw = ''; + const relativeModuleFilePath = path.join( + path.dirname(moduleFilepath), + relativeModuleID, ); - } - const moduleData = { module: relativeModuleID, raw }; - const modules = demos[demoName].relativeModules; + // the file has already been processed + if (addedModulesRelativeToModulePath.has(relativeModuleFilePath)) { + continue; + } - variants.forEach((variant) => { - if (modules[variant]) { - // Avoid duplicates - if (!modules[variant].some((elem) => elem.module === relativeModuleID)) { - modules[variant].push(moduleData); + try { + // We are only iterating trough an array that looks + // like this: ['JS', 'TS'], so it is safe to await + // eslint-disable-next-line no-await-in-loop + raw = await fs.readFile(relativeModuleFilePath, { + encoding: 'utf8', + }); + + const importedProcessedModuleIDs = new Set(); + const importedProcessedModulesIDsParents = new Map(); + // Find the relative paths in the relative module + extractImports(raw).forEach((importModuleID) => { + // detect relative import + const importModuleIdWithExtension = detectRelativeImports( + relativeModuleID, + relativeModuleFilePath, + variant, + importModuleID, + ); + if (importModuleID.startsWith('.')) { + importedProcessedModuleIDs.add(importModuleIdWithExtension); + importedProcessedModulesIDsParents.set( + importModuleIdWithExtension, + relativeModuleFilePath, + ); + } + }); + + updateRelativeModules(demoName, { module: relativeModuleID, raw }, variant); + addedModulesRelativeToModulePath.add(relativeModuleFilePath); + + // iterate recursively over the relative imports + while (importedProcessedModuleIDs.size > 0) { + for (const entry of importedProcessedModuleIDs) { + if (entry.startsWith('.')) { + const entryModuleFilePath = path.join( + path.dirname(importedProcessedModulesIDsParents.get(entry)), + entry, + ); + + // We are only iterating trough an array that looks + // like this: ['JS', 'TS'], so it is safe to await + // eslint-disable-next-line no-await-in-loop + const rawEntry = await fs.readFile(entryModuleFilePath, { encoding: 'utf8' }); + + extractImports(rawEntry).forEach((importModuleID) => { + // detect relative import + const importModuleIdWithExtension = detectRelativeImports( + relativeModuleID, + entryModuleFilePath, + variant, + importModuleID, + ); + if (importModuleID.startsWith('.')) { + importedProcessedModuleIDs.add(importModuleIdWithExtension); + importedProcessedModulesIDsParents.set( + importModuleIdWithExtension, + entryModuleFilePath, + ); + } + }); + + if (!addedModulesRelativeToModulePath.has(entryModuleFilePath)) { + const modulePathDirectory = moduleFilepath + .split('/') + .slice(0, -1) + .join('/'); + const moduleData = { + module: `.${entryModuleFilePath.replace(modulePathDirectory, '')}`, + raw: rawEntry, + }; + updateRelativeModules(demoName, moduleData, variant); + addedModulesRelativeToModulePath.add(entryModuleFilePath); + } + } + importedProcessedModuleIDs.delete(entry); + } } - } else { - modules[variant] = [moduleData]; + } catch { + throw new Error( + `Could not find a module for the relative import "${relativeModuleID}" in the demo "${demoName}"`, + ); } - }); + } }), ); }