[ENG-1029] Fix pnpm assets gen not working with Prettier 3.0 (#1272)

Fix assets generation breaking due to prettier update to 3.0
 - Make assets generation async
 - Update prettier and babel deps

apps/desktop/package.json

@@ -30,7 +30,7 @@
 		"@iarna/toml": "^2.2.5",
 		"@sd/config": "workspace:*",
 		"@tauri-apps/cli": "1.3.1",
-		"@types/babel-core": "^6.25.7",
+		"@types/babel__core": "^7.20.1",
 		"@types/react": "^18.0.21",
 		"@types/react-dom": "^18.0.6",
 		"@vitejs/plugin-react": "^2.1.0",

apps/mobile/package.json

@@ -61,7 +61,7 @@
 		"zod": "~3.22.2"
 	},
 	"devDependencies": {
-		"@babel/core": "^7.22.1",
+		"@babel/core": "^7.22.11",
 		"@rnx-kit/metro-config": "^1.3.8",
 		"@sd/config": "workspace:*",
 		"@types/react": "~18.0.38",

interface/package.json

@@ -77,7 +77,7 @@
 	},
 	"devDependencies": {
 		"@sd/config": "workspace:*",
-		"@types/babel-core": "^6.25.7",
+		"@types/babel__core": "^7.20.1",
 		"@types/loadable__component": "^5.13.4",
 		"@types/node": "^18.11.9",
 		"@types/react": "^18.0.21",

package.json

@@ -38,8 +38,8 @@
 		"@storybook/react-vite": "^7.0.20",
 		"@trivago/prettier-plugin-sort-imports": "^4.2.0",
 		"cspell": "^6.31.1",
-		"prettier": "^3.0.1",
-		"prettier-plugin-tailwindcss": "^0.4.1",
+		"prettier": "^3.0.3",
+		"prettier-plugin-tailwindcss": "^0.5.3",
 		"rimraf": "^4.4.1",
 		"turbo": "^1.10.2",
 		"turbo-ignore": "^0.3.0",

packages/assets/icons/index.ts

@@ -36,6 +36,7 @@ import Entity from './Entity.png';
 import Entity_Light from './Entity_Light.png';
 import Executable from './Executable.png';
 import Executable_Light from './Executable_Light.png';
+import Executable_Light_old from './Executable_Light_old.png';
 import Executable_old from './Executable_old.png';
 import Face_Light from './Face_Light.png';
 import Folder from './Folder.png';
@@ -129,6 +130,7 @@ export {
 	Entity_Light,
 	Executable,
 	Executable_Light,
+	Executable_Light_old,
 	Executable_old,
 	Face_Light,
 	Folder,

packages/assets/scripts/generate.mjs

@@ -8,62 +8,65 @@
  *
  * The generated index files will have the name `index.ts` and will be located in the root of each asset folder.
  */
-import fs from 'fs';
-import { dirname, join } from 'path';
+import fs from 'node:fs/promises';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
 import prettier from 'prettier';
-import { fileURLToPath } from 'url';
 
 const assetFolders = ['icons', 'images', 'svgs/brands', 'svgs/ext/Extras', 'svgs/ext/Code'];
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 
-assetFolders.forEach((folder) => {
-	const indexFilePath = join(__dirname, '..', folder, 'index.ts');
-	const assetsFolderPath = join(__dirname, '..', folder);
+prettier.resolveConfig(join(__dirname, '..', '..', '..', '.prettierrc.js')).then((options) =>
+	Promise.all(
+		assetFolders.map(async (folder) => {
+			const indexFilePath = join(__dirname, '..', folder, 'index.ts');
+			const assetsFolderPath = join(__dirname, '..', folder);
 
-	// Delete the index file if it already exists.
-	if (fs.existsSync(indexFilePath)) {
-		fs.unlinkSync(indexFilePath);
-	}
-
-	const fileNames = fs.readdirSync(assetsFolderPath);
-
-	// Generate the import statements for each asset.
-	const assetImports = fileNames
-		.filter((fileName) => fileName !== 'index.ts' && !/(^|\/)\.[^\/\.]/g.test(fileName))
-		.map((fileName) => {
-			const variableName = fileName.split('.')[0].replace(/-/g, '');
-			if (folder.startsWith('svgs')) {
-				return `import { ReactComponent as ${variableName} } from './${fileName}';`;
+			if (await fs.access(indexFilePath).then(() => true, () => false)) {
+				// Delete the index file if it already exists.
+				await fs.unlink(indexFilePath);
 			}
-			return `import ${variableName} from './${fileName}';`;
+
+			const fileNames = await fs.readdir(assetsFolderPath);
+
+			// Generate the import statements for each asset.
+			const assetImports = fileNames
+				.filter((fileName) => fileName !== 'index.ts' && !/(^|\/)\.[^\/\.]/g.test(fileName))
+				.map((fileName) => {
+					const variableName = fileName.split('.')[0].replace(/-/g, '');
+					if (folder.startsWith('svgs')) {
+						return `import { ReactComponent as ${variableName} } from './${fileName}';`;
+					}
+					return `import ${variableName} from './${fileName}';`;
+				})
+				.join('\n');
+
+			// Generate the export statements for each asset.
+			const assetExports = fileNames
+				.filter((fileName) => fileName !== 'index.ts' && !/(^|\/)\.[^\/\.]/g.test(fileName))
+				.map((fileName) => `${fileName.split('.')[0].replace(/-/g, '')}`)
+				.join(',\n');
+
+			// Generate the index file content.
+			const indexFileContent = await prettier.format(
+				`
+				/*
+				 * This file was automatically generated by a script.
+				 * To regenerate this file, run: pnpm assets gen
+				 */
+
+				${assetImports}
+
+				export {
+					${assetExports}
+				};`,
+				{ ...options, parser: 'typescript' }
+			);
+
+			// Write the index file.
+			await fs.writeFile(indexFilePath, indexFileContent);
 		})
-		.join('\n');
-
-	// Generate the export statements for each asset.
-	const assetExports = fileNames
-		.filter((fileName) => fileName !== 'index.ts' && !/(^|\/)\.[^\/\.]/g.test(fileName))
-		.map((fileName) => {
-			const variableName = fileName.split('.')[0].replace(/-/g, '');
-			return `${variableName},`;
-		})
-		.join('\n');
-
-	// Generate the index file content.
-	const indexFileContent = `
-	/*
-	* This file was automatically generated by a script.
-	* To regenerate this file, run: pnpm assets gen
-	*/
-
-${assetImports}\n\nexport {\n  ${assetExports}\n};\n`;
-
-	// Write the index file.
-	prettier.resolveConfig(join(__dirname, '..', '..', '..', '.prettierrc.js')).then((options) => {
-		fs.writeFileSync(
-			indexFilePath,
-			prettier.format(indexFileContent, { ...options, parser: 'typescript' })
-		);
-	});
-});
+	)
+);

packages/ui/package.json

@@ -49,7 +49,7 @@
 		"zod": "~3.22.2"
 	},
 	"devDependencies": {
-		"@babel/core": "^7.19.3",
+		"@babel/core": "^7.22.11",
 		"@sd/config": "workspace:*",
 		"@storybook/types": "^7.0.24",
 		"@tailwindcss/typography": "^0.5.7",