refactor: add watcher to file

Author: spartan-vutrannguyen

apps/studio/electron/main/assets/fonts/font.ts

@@ -2,17 +2,10 @@ import * as pathModule from 'path';
 import { DefaultSettings } from '@onlook/models/constants';
 import type { Font } from '@onlook/models/assets';
 import { camelCase } from 'lodash';
-import {
-    addFontVariableToAppLayout,
-    addFontVariableToPageApp,
-    removeFontVariableFromLayout,
-} from './layout';
 import { parse } from '@babel/parser';
 import traverse from '@babel/traverse';
 import * as t from '@babel/types';
 import generate from '@babel/generator';
-import { removeFontFromTailwindConfig, updateTailwindFontConfig } from './tailwind';
-import { detectRouterType } from '../../pages';
 import { readFile } from '../../code/files';
 import fs from 'fs';
 import { extractFontName, getFontFileName } from '@onlook/utility';
@@ -89,19 +82,6 @@ export const ${fontName} = ${importName}({
         newContent += fontConfig;
 
         fs.writeFileSync(fontPath, newContent);
-
-        await updateTailwindFontConfig(projectRoot, font);
-
-        const routerConfig = await detectRouterType(projectRoot);
-        if (routerConfig) {
-            if (routerConfig.type === 'app') {
-                const layoutPath = pathModule.join(routerConfig.basePath, 'layout.tsx');
-                await addFontVariableToAppLayout(layoutPath, fontName);
-            } else {
-                const appPath = pathModule.join(routerConfig.basePath, '_app.tsx');
-                await addFontVariableToPageApp(appPath, fontName);
-            }
-        }
     } catch (error) {
         console.error('Error adding font:', error);
     }
@@ -251,24 +231,6 @@ export async function removeFont(projectRoot: string, font: Font) {
 
             await fs.writeFileSync(fontPath, code);
 
-            await removeFontFromTailwindConfig(projectRoot, font);
-
-            const routerConfig = await detectRouterType(projectRoot);
-            if (routerConfig) {
-                if (routerConfig.type === 'app') {
-                    const layoutPath = pathModule.join(routerConfig.basePath, 'layout.tsx');
-                    await removeFontVariableFromLayout(layoutPath, font.id, ['html']);
-                } else {
-                    const appPath = pathModule.join(routerConfig.basePath, '_app.tsx');
-                    await removeFontVariableFromLayout(appPath, font.id, [
-                        'div',
-                        'main',
-                        'section',
-                        'body',
-                    ]);
-                }
-            }
-
             // Delete font files if found
             if (fontFilesToDelete.length > 0) {
                 for (const fileRelativePath of fontFilesToDelete) {
@@ -303,8 +265,6 @@ export async function addFonts(projectRoot: string, fonts: Font[]) {
  * Adds a local font to the project by:
  * 1. Saving the font files to the fonts folder
  * 2. Adding the font configuration to fonts.ts using next/font/local
- * 3. Updating Tailwind config with the new font family
- * 4. Adding the font variable to the appropriate layout file
  */
 export async function addLocalFont(
     projectRoot: string,
@@ -403,31 +363,6 @@ export const ${fontName} = localFont({
 
         fs.writeFileSync(fontPath, newContent);
 
-        // Update Tailwind config
-        const font: Font = {
-            id: fontName,
-            family: baseFontName,
-            subsets: ['latin'],
-            weight: fontConfigs.map((config) => config.weight),
-            styles: fontConfigs.map((config) => config.style),
-            variable: `--font-${fontName}`,
-            type: 'local',
-        };
-
-        await updateTailwindFontConfig(projectRoot, font);
-
-        // Update layout file
-        const routerConfig = await detectRouterType(projectRoot);
-        if (routerConfig) {
-            if (routerConfig.type === 'app') {
-                const layoutPath = pathModule.join(routerConfig.basePath, 'layout.tsx');
-                await addFontVariableToAppLayout(layoutPath, fontName);
-            } else {
-                const appPath = pathModule.join(routerConfig.basePath, '_app.tsx');
-                await addFontVariableToPageApp(appPath, fontName);
-            }
-        }
-
         return fontName;
     } catch (error) {
         console.error('Error adding local font:', error);

apps/studio/electron/main/assets/fonts/layout.ts

@@ -4,15 +4,14 @@ import { parse, type ParseResult } from '@babel/parser';
 import traverse from '@babel/traverse';
 import generate from '@babel/generator';
 import * as pathModule from 'path';
-import { readFile, writeFile } from '../../code/files';
+import { readFile } from '../../code/files';
 import { DefaultSettings } from '@onlook/models/constants';
 import type { Font } from '@onlook/models/assets';
 import { detectRouterType } from '../../pages/helpers';
 import {
     createStringLiteralWithFont,
     createTemplateLiteralWithFont,
     findFontClass,
-    filterFontClasses,
     removeFontsFromClassName,
 } from './utils';
 import type { TraverseCallback } from './types';
@@ -105,7 +104,7 @@ async function updateFileWithImport(
         newContent = fontImport + '\n' + newContent;
     }
 
-    await writeFile(filePath, newContent);
+    fs.writeFileSync(filePath, newContent);
 }
 
 /**
@@ -196,15 +195,17 @@ export async function addFontVariableToElement(
     }
 }
 
-export async function addFontVariableToAppLayout(
-    layoutPath: string,
-    fontName: string,
-): Promise<void> {
-    await addFontVariableToElement(layoutPath, fontName, ['html']);
-}
-
-export async function addFontVariableToPageApp(appPath: string, fontName: string): Promise<void> {
-    await addFontVariableToElement(appPath, fontName, ['div', 'main', 'section', 'body']);
+export async function addFontVariableToLayout(projectRoot: string, fontName: string) {
+    const routerConfig = await detectRouterType(projectRoot);
+    if (routerConfig) {
+        if (routerConfig.type === 'app') {
+            const layoutPath = pathModule.join(routerConfig.basePath, 'layout.tsx');
+            await addFontVariableToElement(layoutPath, fontName, ['html']);
+        } else {
+            const appPath = pathModule.join(routerConfig.basePath, '_app.tsx');
+            await addFontVariableToElement(appPath, fontName, ['div', 'main', 'section', 'body']);
+        }
+    }
 }
 
 /**
@@ -267,7 +268,7 @@ export async function removeFontVariableFromLayout(
                 }
             }
 
-            await writeFile(filePath, newContent);
+            fs.writeFileSync(filePath, newContent);
         }
     } catch (error) {
         console.error(`Error removing font variable from ${filePath}:`, error);
@@ -316,7 +317,7 @@ export async function updateFontInLayout(
     });
 
     if (result) {
-        await writeFile(filePath, result);
+        fs.writeFileSync(filePath, result);
     }
 }