share getAliases logic between simple and tutorial

Author: ThieryMichel

examples/simple/getAliases.ts

@@ -0,0 +1,42 @@
+import path from 'path';
+import fs from 'fs';
+import { type Alias } from 'vite';
+
+export const getAliases = (): Alias[] => {
+    // In codesandbox, we won't have the packages folder
+    // We ignore errors in this case
+    try {
+        const packages = fs.readdirSync(
+            path.resolve(__dirname, '../../packages')
+        );
+        return packages
+            .map(dirName => {
+                if (dirName === 'create-react-admin') return null;
+                const packageJson = JSON.parse(
+                    fs.readFileSync(
+                        path.resolve(
+                            __dirname,
+                            '../../packages',
+                            dirName,
+                            'package.json'
+                        ),
+                        'utf8'
+                    )
+                );
+                return {
+                    find: packageJson.name,
+                    replacement: path.resolve(
+                        __dirname,
+                        `../../packages/${packageJson.name}/src`
+                    ),
+                };
+            })
+            .filter(Boolean) as Alias[];
+    } catch (error) {
+        console.warn(
+            'Unable to read packages folder to get aliases. This is expected if you are running this example in codesandbox.',
+            error
+        );
+        return [];
+    }
+};

examples/simple/vite.config.ts

@@ -1,7 +1,6 @@
 import react from '@vitejs/plugin-react';
-import path from 'path';
-import fs from 'fs';
 import { defineConfig } from 'vite';
+import { getAliases } from './getAliases';
 
 /**
  * https://vitejs.dev/config/
@@ -10,30 +9,7 @@ import { defineConfig } from 'vite';
 export default defineConfig(async () => {
     // In codesandbox, we won't have the packages folder
     // We ignore errors in this case
-    const aliases: Record<string, string> = {};
-    try {
-        const packages = fs.readdirSync(
-            path.resolve(__dirname, '../../packages')
-        );
-        for (const dirName of packages) {
-            if (dirName === 'create-react-admin') continue;
-            const packageJson = JSON.parse(
-                fs.readFileSync(
-                    path.resolve(
-                        __dirname,
-                        '../../packages',
-                        dirName,
-                        'package.json'
-                    ),
-                    'utf8'
-                )
-            );
-            aliases[packageJson.name] = path.resolve(
-                __dirname,
-                `../../packages/${packageJson.name}/src`
-            );
-        }
-    } catch {}
+    const aliases = getAliases();
 
     return {
         plugins: [react()],
@@ -43,10 +19,7 @@ export default defineConfig(async () => {
                     find: /^@mui\/icons-material\/(.*)/,
                     replacement: '@mui/icons-material/esm/$1',
                 },
-                ...Object.keys(aliases).map(packageName => ({
-                    find: packageName,
-                    replacement: aliases[packageName],
-                })),
+                ...aliases,
             ],
         },
         server: {

examples/tutorial/tsconfig.node.json

@@ -1,9 +1,9 @@
 {
-  "compilerOptions": {
-    "composite": true,
-    "module": "ESNext",
-    "moduleResolution": "Node",
-    "allowSyntheticDefaultImports": true
-  },
-  "include": ["vite.config.ts"]
+    "compilerOptions": {
+        "composite": true,
+        "module": "ESNext",
+        "moduleResolution": "Node",
+        "allowSyntheticDefaultImports": true
+    },
+    "include": ["vite.config.ts", "../simple/getAliases.ts"]
 }

examples/tutorial/vite.config.ts

@@ -1,38 +1,11 @@
-import { defineConfig } from 'vite';
+import { Alias, defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import path from 'path';
-import fs from 'fs';
+import { getAliases } from '../simple/getAliases';
 
 // https://vitejs.dev/config/
 export default defineConfig(async () => {
-    // In codesandbox, we won't have the packages folder
-    // We ignore errors in this case
-    const aliases: Record<string, string> = {};
-    try {
-        const packages = fs.readdirSync(
-            path.resolve(__dirname, '../../packages')
-        );
-        for (const dirName of packages) {
-            if (dirName === 'create-react-admin') continue;
-            const packageJson = JSON.parse(
-                fs.readFileSync(
-                    path.resolve(
-                        __dirname,
-                        '../../packages',
-                        dirName,
-                        'package.json'
-                    ),
-                    'utf8'
-                )
-            );
-            aliases[packageJson.name] = path.resolve(
-                __dirname,
-                `../../packages/${packageJson.name}/src`
-            );
-        }
-    } catch {
-        /* empty */
-    }
+    const aliases: Alias[] = getAliases();
 
     return {
         plugins: [react()],
@@ -54,10 +27,7 @@ export default defineConfig(async () => {
                         'node_modules/@mui/icons-material'
                     ),
                 },
-                ...Object.keys(aliases).map(packageName => ({
-                    find: packageName,
-                    replacement: aliases[packageName],
-                })),
+                ...aliases,
             ],
         },
     };