@daz4126/swifty 2.0.1 → 2.2.0

package/README.md

@@ -11,10 +11,10 @@ It also uses convention over configuration to make is super simple to build site
 ## Quickstart
 
 1. `npm install @daz4126/swifty`
-2. `npx swifty init`
+2. `npx swifty init` to create a new site
+3. Edit the `template.html` file to match your default layout
+4. Change the `sitename` in `config.yaml`
+5. Add some markdown files to the 'pages' directory
 3. `npx swifty build` to build the site
-4. Edit the `template.html` file to match your default layout
-5. Change the `sitename` in `config.yaml`
-6. Add some markdown files to the 'pages' directory
-7. `npx swifty start` to rebuild and start the server
+7. `npx swifty start` to start the server
 8. Visit [http://localhost:3000](http://localhost:3000) to see your site

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@daz4126/swifty",
-  "version": "2.0.1",
+  "version": "2.2.0",
   "main": "index.js",
   "type": "module",
   "bin": {

package/src/assets.js

@@ -5,10 +5,10 @@ import sharp from "sharp";
 import { dirs, defaultConfig } from "./config.js";
 
 const validExtensions = {
-    css: [".css"],
-    js: [".js"],
-    images: [".png", ".jpg", ".jpeg", ".gif", ".svg"," .webp"],
-  };
+  css: [".css"],
+  js: [".js"],
+  images: [".png", ".jpg", ".jpeg", ".gif", ".svg", " .webp"],
+};
 
 const ensureAndCopy = async (source, destination, validExts) => {
   if (await fsExtra.pathExists(source)) {
@@ -17,64 +17,89 @@ const ensureAndCopy = async (source, destination, validExts) => {
     const files = await fs.readdir(source);
     await Promise.all(
       files
-        .filter(file => validExts.includes(path.extname(file).toLowerCase()))
-        .map(file => fsExtra.copy(path.join(source, file), path.join(destination, file)))
+        .filter((file) => validExts.includes(path.extname(file).toLowerCase()))
+        .map((file) =>
+          fsExtra.copy(path.join(source, file), path.join(destination, file)),
+        ),
     );
     console.log(`Copied valid files from ${source} to ${destination}`);
   } else {
     console.log(`No ${path.basename(source)} found in ${source}`);
   }
 };
-const copyAssets = async () => {
-  await ensureAndCopy(dirs.css, path.join(dirs.dist, 'css'), validExtensions.css);
-  await ensureAndCopy(dirs.js, path.join(dirs.dist, 'js'), validExtensions.js);
-  await ensureAndCopy(dirs.images, path.join(dirs.dist, 'images'), validExtensions.images);
+const copyAssets = async (outputDir = dirs.dist) => {
+  await ensureAndCopy(
+    dirs.css,
+    path.join(outputDir, "css"),
+    validExtensions.css,
+  );
+  await ensureAndCopy(dirs.js, path.join(outputDir, "js"), validExtensions.js);
+  await ensureAndCopy(
+    dirs.images,
+    path.join(outputDir, "images"),
+    validExtensions.images,
+  );
 };
-async function optimizeImages() {
+async function optimizeImages(outputDir = dirs.dist) {
   try {
-    const IMAGE_EXTENSIONS = ['.jpg', '.jpeg', '.png'];
-    const images_folder = path.join(dirs.dist, "images");
+    const IMAGE_EXTENSIONS = [".jpg", ".jpeg", ".png"];
+    const images_folder = path.join(outputDir, "images");
     const files = await fs.readdir(images_folder);
-    
-    await Promise.all(files.map(async (file) => {
-      const filePath = path.join(images_folder, file);
-      const ext = path.extname(file).toLowerCase();
-    
-      if (!IMAGE_EXTENSIONS.includes(ext)) return;
-    
-      const optimizedPath = path.join(images_folder, `${path.basename(file, ext)}.webp`);
-    
-      if (filePath !== optimizedPath) {
-        const image = sharp(filePath);
-        const metadata = await image.metadata();
-        const originalWidth = metadata.width || 0;
-        const maxWidth = defaultConfig.max_image_size || 800;
-        const resizeWidth = Math.min(originalWidth, maxWidth);
-    
-        await image
-          .resize({ width: resizeWidth })
-          .toFormat('webp', { quality: 80 })
-          .toFile(optimizedPath);
-    
-        await fs.unlink(filePath);
-    
-        console.log(`Optimized ${file} -> ${optimizedPath}`);
-      }
-    }));
+
+    await Promise.all(
+      files.map(async (file) => {
+        const filePath = path.join(images_folder, file);
+        const ext = path.extname(file).toLowerCase();
+
+        if (!IMAGE_EXTENSIONS.includes(ext)) return;
+
+        const optimizedPath = path.join(
+          images_folder,
+          `${path.basename(file, ext)}.webp`,
+        );
+
+        if (filePath !== optimizedPath) {
+          const image = sharp(filePath);
+          const metadata = await image.metadata();
+          const originalWidth = metadata.width || 0;
+          const maxWidth = defaultConfig.max_image_size || 800;
+          const resizeWidth = Math.min(originalWidth, maxWidth);
+
+          await image
+            .resize({ width: resizeWidth })
+            .toFormat("webp", { quality: 80 })
+            .toFile(optimizedPath);
+
+          await fs.unlink(filePath);
+
+          console.log(`Optimized ${file} -> ${optimizedPath}`);
+        }
+      }),
+    );
   } catch (error) {
-    console.error('Error optimizing images:', error);
+    console.error("Error optimizing images:", error);
   }
-};
+}
 const generateAssetImports = async (dir, tagTemplate, validExts) => {
-  if (!(await fsExtra.pathExists(dir))) return '';
+  if (!(await fsExtra.pathExists(dir))) return "";
   const files = await fs.readdir(dir);
   return files
-    .filter(file => validExts.includes(path.extname(file).toLowerCase()))
-    .sort() 
-    .map(file => tagTemplate(file))
-    .join('\n');
+    .filter((file) => validExts.includes(path.extname(file).toLowerCase()))
+    .sort()
+    .map((file) => tagTemplate(file))
+    .join("\n");
 };
-const getCssImports = () => generateAssetImports(dirs.css, (file) => `<link rel="stylesheet" href="/css/${file}" />`, validExtensions.css);
-const getJsImports = () => generateAssetImports(dirs.js, (file) => `<script src="/js/${file}"></script>`, validExtensions.js);
+const getCssImports = () =>
+  generateAssetImports(
+    dirs.css,
+    (file) => `<link rel="stylesheet" href="/css/${file}" />`,
+    validExtensions.css,
+  );
+const getJsImports = () =>
+  generateAssetImports(
+    dirs.js,
+    (file) => `<script src="/js/${file}"></script>`,
+    validExtensions.js,
+  );
 
-export { copyAssets, optimizeImages, getCssImports, getJsImports };
+export { copyAssets, optimizeImages, getCssImports, getJsImports };

package/src/build.js

@@ -2,12 +2,10 @@ import { copyAssets, optimizeImages } from "./assets.js";
 import { generatePages, createPages, addLinks } from "./pages.js";
 import { dirs } from "./config.js";
 
-async function buildSite() {
-  await copyAssets();
-  await optimizeImages();
+export default async function build(outputDir) {
+  await copyAssets(outputDir);
+  await optimizeImages(outputDir);
   const pages = await generatePages(dirs.pages);
   await addLinks(pages);
-  await createPages(pages);
+  await createPages(pages, outputDir);
 }
-
-buildSite();

package/src/cli.js

@@ -1,32 +1,60 @@
 #!/usr/bin/env node
 
+import { spawn } from "child_process";
+
 const args = process.argv.slice(2);
-const command = args[0];
-let outDir = 'dist'; // default
+let outDir = "dist"; // default
 
 // Look for --out [folder]
-const outIndex = args.indexOf('--out');
+const outIndex = args.indexOf("--out");
 if (outIndex !== -1 && args[outIndex + 1]) {
   outDir = args[outIndex + 1];
 }
 
-// Pass outDir as an environment variable
+// Pass outDir as an environment variable too (optional, still useful)
 process.env.OUT_DIR = outDir;
 
-switch (command) {
-  case "init":
-    import('./init.js');
-    break;
-  case "build":
-    import('./build.js');
-    break;
-  case "start":
-    import('./build.js').then(async () => {
-      const { execSync } = await import('child_process');
-      execSync(`npx serve ${process.env.OUT_DIR}`, { stdio: 'inherit' });
-    });
-    break;
-  default:
-    console.log(`Unknown command: ${command}`);
-    console.log(`Usage: swifty [init|build|start] [--out folder]`);
+async function main() {
+  const command = args[0];
+
+  switch (command) {
+    case "init":
+      await import("./init.js");
+      break;
+    case "build": {
+      const build = await import("./build.js");
+      if (typeof build.default === "function") {
+        await build.default(outDir);
+      }
+      break;
+    }
+    case "start": {
+      const build = await import("./build.js");
+      if (typeof build.default === "function") {
+        await build.default(outDir);
+      }
+
+      // Run watcher.js (non-blocking)
+      const watcher = await import("./watcher.js");
+      if (typeof watcher.default === "function") {
+        watcher.default(outDir);
+      }
+
+      // Start the server (blocking)
+      spawn("npx", ["serve", outDir], { stdio: "inherit" });
+      break;
+    }
+    case "watch": {
+      const watch = await import("./watcher.js");
+      if (typeof watch.default === "function") {
+        await watch.default(outDir);
+      }
+      break;
+    }
+    default:
+      console.log(`Unknown command: ${command}`);
+      console.log(`Usage: swifty [init|build|start|watch] [--out folder]`);
+  }
 }
+
+main();

package/src/init.js

@@ -22,6 +22,8 @@ breadcrumb_separator: "»"
 breadcrumb_class: swifty_breadcrumb
 link_class: swifty_link
 tag_class: tag
+default_layout_name: site
+default_link_name: links
 max_image_size: 800
 
 dateFormat: 
@@ -34,6 +36,12 @@ dateFormat:
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="icon" href="favicon.ico" sizes="48x48" type="image/x-icon">
+  <link rel="icon" href="favicon-16x16.png" sizes="16x16" type="image/x-icon">
+  <link rel="icon" href="favicon-32x32.png" sizes="32x32" type="image/png">
+  <link rel="apple-touch-icon" href="path/to/apple-touch-icon.png">
+  <link rel="icon" sizes="192x192" href="android-chrome-192x19.png">
+  <link rel="icon" sizes="512x512" href="android-chrome-512x512.png">
   <title>{{sitename}}</title>
 </head>
 <body>

package/src/pages.js

@@ -11,7 +11,7 @@ import path from "path";
 const isValid = async (filePath) => {
   try {
     const stats = await fs.stat(filePath);
-    return stats.isDirectory() || path.extname(filePath) === '.md';
+    return stats.isDirectory() || path.extname(filePath) === ".md";
   } catch (err) {
     return false; // Handle errors like file not found
   }
@@ -43,24 +43,46 @@ const generatePages = async (sourceDir, baseDir = sourceDir, parent) => {
       const root = file.name === "index.md" && !parent;
       const relativePath = path.relative(baseDir, filePath).replace(/\\/g, "/");
       const finalPath = `/${relativePath.replace(/\.md$/, "")}`;
-      const name = root ? "Home" : capitalize(file.name.replace(/\.md$/, "").replace(/-/g, " "));
+      const name = root
+        ? "Home"
+        : capitalize(file.name.replace(/\.md$/, "").replace(/-/g, " "));
       const stats = await fs.stat(filePath);
       const isDirectory = file.isDirectory();
-      const layoutFileExists = parent && await fsExtra.pathExists(`${dirs.layouts}/${parent.filename}.html`);
-      const layout = layoutFileExists ? parent.filename : parent ? parent.layout : "pages";
+      const layoutFileExists =
+        parent &&
+        (await fsExtra.pathExists(`${dirs.layouts}/${parent.filename}.html`));
+      const layout = layoutFileExists
+        ? parent.filename
+        : parent
+          ? parent.layout
+          : config.default_layout_name;
 
       const page = {
-        name, root, layout, filePath,
+        name,
+        root,
+        layout,
+        filePath,
         filename: file.name.replace(/\.md$/, ""),
         url: root ? "/" : finalPath,
         nav: !parent && !root,
-        parent: parent ? { title: parent.data.title, url: parent.url } : undefined,
+        parent: parent
+          ? { title: parent.data.title, url: parent.url }
+          : undefined,
         folder: isDirectory,
         title: name,
-        created_at: new Date(stats.birthtime).toLocaleDateString(undefined, config.dateFormat),
-        updated_at: new Date(stats.mtime).toLocaleDateString(undefined, config.dateFormat),
-        date: new Date(stats.mtime).toLocaleDateString(undefined, config.dateFormat),
-        data: root ? { ...defaultConfig } : { ...config }
+        created_at: new Date(stats.birthtime).toLocaleDateString(
+          undefined,
+          config.dateFormat,
+        ),
+        updated_at: new Date(stats.mtime).toLocaleDateString(
+          undefined,
+          config.dateFormat,
+        ),
+        date: new Date(stats.mtime).toLocaleDateString(
+          undefined,
+          config.dateFormat,
+        ),
+        data: root ? { ...defaultConfig } : { ...config },
       };
 
       if (path.extname(file.name) === ".md") {
@@ -97,7 +119,7 @@ const generatePages = async (sourceDir, baseDir = sourceDir, parent) => {
 
       // Add tags
       if (page.data.tags) {
-        page.data.tags.forEach(tag => addToTagMap(tag, page));
+        page.data.tags.forEach((tag) => addToTagMap(tag, page));
       }
 
       pages.push(page);
@@ -106,7 +128,6 @@ const generatePages = async (sourceDir, baseDir = sourceDir, parent) => {
 
     // Await all directory recursion
     await Promise.all(directoryPromises);
-
   } catch (err) {
     console.error("Error reading directory:", err);
   }
@@ -121,23 +142,29 @@ const generatePages = async (sourceDir, baseDir = sourceDir, parent) => {
       name: "Tags",
       title: "All Tags",
       layout: "pages",
-      updated_at: new Date().toLocaleDateString(undefined, defaultConfig.dateFormat),
+      updated_at: new Date().toLocaleDateString(
+        undefined,
+        defaultConfig.dateFormat,
+      ),
       data: { ...config },
-      pages: []
+      pages: [],
     };
 
     for (const [tag, pagesForTag] of tagsMap) {
       const page = {
         name: tag,
         title: tag,
-        updated_at: new Date().toLocaleDateString(undefined, defaultConfig.dateFormat),
+        updated_at: new Date().toLocaleDateString(
+          undefined,
+          defaultConfig.dateFormat,
+        ),
         url: `/tags/${tag}`,
         layout: tagLayout ? "tags" : "pages",
         data: { ...config, title: `Pages tagged with ${capitalize(tag)}` },
       };
       page.content = pagesForTag
-        .map(p => `* <a href="${p.url}">${p.title}</a>`)
-        .join('\n');
+        .map((p) => `* <a href="${p.url}">${p.title}</a>`)
+        .join("\n");
 
       tagPage.pages.push(page);
     }
@@ -148,61 +175,87 @@ const generatePages = async (sourceDir, baseDir = sourceDir, parent) => {
   return pages;
 };
 
-
-const generateLinkList = async (name,pages) => {
+const generateLinkList = async (name, pages) => {
   const partial = `${name}.md`;
   const partialPath = path.join(dirs.partials, partial);
-  const linksPath = path.join(dirs.partials, "links.md");
+  const linksPath = path.join(dirs.partials, defaultConfig.default_link_name);
   // Check if either file exists in the 'partials' folder
   const fileExists = await fsExtra.pathExists(partialPath);
   const defaultExists = await fsExtra.pathExists(linksPath);
   if (fileExists || defaultExists) {
-    const partial = await fs.readFile(fileExists ? partialPath : linksPath, "utf-8");
-    const content = await Promise.all(pages.map(page => replacePlaceholders(partial, page)));
-    return content.join('\n');
+    const partial = await fs.readFile(
+      fileExists ? partialPath : linksPath,
+      "utf-8",
+    );
+    const content = await Promise.all(
+      pages.map((page) => replacePlaceholders(partial, page)),
+    );
+    return content.join("\n");
   } else {
-    return `${pages.map(page => `<li><a href="${page.url}" class="${defaultConfig.link_class}">${page.title}</a></li>`).join`\n`}`
+    return `${pages.map((page) => `<li><a href="${page.url}" class="${defaultConfig.link_class}">${page.title}</a></li>`).join`\n`}`;
   }
 };
 
-const render = async page => {
-  const htmlContent = marked.parse(page.content); // Markdown processed once
+const render = async (page) => {
+  const replacedContent = await replacePlaceholders(page.content, page);
+  const htmlContent = marked.parse(replacedContent); // Markdown processed once
   const wrappedContent = await applyLayoutAndWrapContent(page, htmlContent);
-  const htmlWithTemplate = template.replace(/\{\{\s*content\s*\}\}/g, wrappedContent);
+  const htmlWithTemplate = template.replace(
+    /\{\{\s*content\s*\}\}/g,
+    wrappedContent,
+  );
   const finalContent = await replacePlaceholders(htmlWithTemplate, page);
   return finalContent;
 };
 
 const createPages = async (pages, distDir = dirs.dist) => {
-  await Promise.all(pages.map(async (page) => {
-    const html = await render(page);
-    const pageDir = path.join(distDir, page.url);
-    const pagePath = path.join(distDir, page.url, "index.html");
-
-    await fsExtra.ensureDir(pageDir);
-    await fs.writeFile(pagePath, html);
-    console.log(`Created file: ${pagePath}`);
-
-    if (page.folder) {
-      await createPages(page.pages, distDir); // Recursive still needs to await
-    }
-  }));
+  await Promise.all(
+    pages.map(async (page) => {
+      const html = await render(page);
+      const pageDir = path.join(distDir, page.url);
+      const pagePath = path.join(distDir, page.url, "index.html");
+      await fsExtra.ensureDir(pageDir);
+      await fs.writeFile(pagePath, html);
+      if (page.folder) {
+        await createPages(page.pages, distDir); // Recursive still needs to await
+      }
+    }),
+  );
 };
 
 const addLinks = async (pages, parent) => {
   for (const page of pages) {
     page.data ||= {};
     page.data.links_to_tags = page?.data?.tags?.length
-      ? page.data.tags.map(tag => `<a class="${defaultConfig.tag_class}" href="/tags/${tag}">${tag}</a>`).join`` : "";
-    const crumb = page.root ? "" : ` ${defaultConfig.breadcrumb_separator} <a class="${defaultConfig.breadcrumb_class}" href="${page.url}">${page.name}</a>`;
-    page.data.breadcrumbs = parent ? parent.data.breadcrumbs + crumb
-      : `<a class="${defaultConfig.breadcrumb_class}" href="/">Home</a>` + crumb;
-    page.data.links_to_children = page.pages ? await generateLinkList(page.filename, page.pages) : "";
-    page.data.links_to_siblings = await generateLinkList(page.parent?.filename || "pages", pages.filter(p => p.url !== page.url));
-    page.data.links_to_self_and_siblings = await generateLinkList(page.parent?.filename || "pages", pages);
-    page.data.nav_links = await generateLinkList("nav", pageIndex.filter(p => p.nav));
+      ? page.data.tags.map(
+          (tag) =>
+            `<a class="${defaultConfig.tag_class}" href="/tags/${tag}">${tag}</a>`,
+        ).join``
+      : "";
+    const crumb = page.root
+      ? ""
+      : ` ${defaultConfig.breadcrumb_separator} <a class="${defaultConfig.breadcrumb_class}" href="${page.url}">${page.name}</a>`;
+    page.data.breadcrumbs = parent
+      ? parent.data.breadcrumbs + crumb
+      : `<a class="${defaultConfig.breadcrumb_class}" href="/">Home</a>` +
+        crumb;
+    page.data.links_to_children = page.pages
+      ? await generateLinkList(page.filename, page.pages)
+      : "";
+    page.data.links_to_siblings = await generateLinkList(
+      page.parent?.filename || "pages",
+      pages.filter((p) => p.url !== page.url),
+    );
+    page.data.links_to_self_and_siblings = await generateLinkList(
+      page.parent?.filename || "pages",
+      pages,
+    );
+    page.data.nav_links = await generateLinkList(
+      "nav",
+      pageIndex.filter((p) => p.nav),
+    );
     if (page.pages) {
-      await addLinks(page.pages, page);  // Recursive call
+      await addLinks(page.pages, page); // Recursive call
     }
   }
 };

package/src/partials.js

@@ -6,7 +6,6 @@ import { marked } from "marked";
 
 const partialCache = new Map();
 
-
 const loadPartial = async (partialName) => {
   if (partialCache.has(partialName)) {
     return partialCache.get(partialName);
@@ -36,28 +35,39 @@ const replacePlaceholders = async (template, values) => {
   };
 
   // Replace partial includes
-  template = await replaceAsync(template, partialRegex, async (match, partialName) => {
-    let partialContent = await loadPartial(partialName);
-    partialContent = await replacePlaceholders(partialContent, values); // Recursive replacement
-    return marked(partialContent); // Convert Markdown to HTML
+  template = await replaceAsync(
+    template,
+    partialRegex,
+    async (match, partialName) => {
+      let partialContent = await loadPartial(partialName);
+      partialContent = await replacePlaceholders(partialContent, values); // Recursive replacement
+      return marked(partialContent); // Convert Markdown to HTML
+    },
+  );
+  // Replace other placeholders **only outside of code blocks**
+  const codeBlockRegex =
+    /```[\s\S]*?```|`[^`]+`|<(pre|code)[^>]*>[\s\S]*?<\/\1>/g;
+  const codeBlocks = [];
+  template = template.replace(codeBlockRegex, (match) => {
+    codeBlocks.push(match);
+    return `{{CODE_BLOCK_${codeBlocks.length - 1}}}`; // Temporary placeholder
   });
+  // Replace placeholders outside of code blocks
+  template = template.replace(/{{\s*([^}\s]+)\s*}}/g, (match, key) => {
+    return values.data && key in values?.data
+      ? values.data[key]
+      : key in values
+        ? values[key]
+        : match;
+  });
+  // Restore code blocks
+  template = template.replace(
+    /{{CODE_BLOCK_(\d+)}}/g,
+    (_, index) => codeBlocks[index],
+  );
   // replace image extensions with optimized extension
   template = template.replace(/\.(png|jpe?g|webp)/gi, ".webp");
-  // Replace other placeholders **only outside of code blocks**
-  const codeBlockRegex = /```[\s\S]*?```|`[^`]+`|<(pre|code)[^>]*>[\s\S]*?<\/\1>/g;
-    const codeBlocks = [];
-    template = template.replace(codeBlockRegex, match => {
-        codeBlocks.push(match);
-        return `{{CODE_BLOCK_${codeBlocks.length - 1}}}`; // Temporary placeholder
-    });
-    // Replace placeholders outside of code blocks
-    template = template.replace(/{{\s*([^}\s]+)\s*}}/g, (match, key) => {
-      return(values.data && key in values?.data ? values.data[key] : key in values ? values[key] : match)
-    });
-    // Restore code blocks
-    template = template.replace(/{{CODE_BLOCK_(\d+)}}/g, (_, index) => codeBlocks[index]);
-
   return template;
 };
 
-export { loadPartial, replacePlaceholders };
+export { loadPartial, replacePlaceholders };

package/src/watcher.js

@@ -1,39 +1,43 @@
-import chokidar from 'chokidar';
-import { exec } from 'child_process';
+import chokidar from "chokidar";
 
-// Define which files to watch (you can adjust based on your project structure)
-const filesToWatch = [
-    'pages/**/*.{md,html}',        // Watch JavaScript and HTML files in pages directory
-    'layouts/**/*.{html}',      // Watch JavaScript and HTML files in layouts directory
-    'images/**/*',                 // Watch all files in images directory
-    'css/**/*.{css}',              // Watch CSS files in css directory
-    'js/**/*.{js}',                // Watch JS files in js directory
-    'partials/**/*.{md,html}',     // Watch JavaScript and HTML files in partials directory
-    'template.html',                   // Watch the template HTML file
-    'config.yaml', 'config.yml', 'config.json'  // Watch YAML and JSON config files
+export default async function startWatcher(outDir = "dist") {
+  const filesToWatch = [
+    "pages/**/*.{md,html}",
+    "layouts/**/*.{html}",
+    "images/**/*",
+    "css/**/*.{css}",
+    "js/**/*.{js}",
+    "partials/**/*.{md,html}",
+    "template.html",
+    "config.yaml",
+    "config.yml",
+    "config.json",
   ];
-const buildScript = 'npm run build';  // Your build script command
 
-// Initialize watcher
-const watcher = chokidar.watch(filesToWatch, {
+  const watcher = chokidar.watch(filesToWatch, {
     persistent: true,
-    debounceDelay: 200  // Wait 200ms after the last change to trigger the build
-  })
+    ignoreInitial: true,
+    awaitWriteFinish: { stabilityThreshold: 100 },
+    debounceDelay: 200,
+  });
 
-// Event listener for file changes
-watcher.on('change', path => {
-  console.log(`File ${path} has been changed. Running build...`);
-  exec(buildScript, (error, stdout, stderr) => {
-    if (error) {
-      console.error(`Error executing build: ${error.message}`);
-      return;
-    }
-    if (stderr) {
-      console.error(`stderr: ${stderr}`);
-      return;
+  const buildModule = await import("./build.js");
+  const build = buildModule.default;
+
+  if (typeof build !== "function") {
+    console.error("❌ build.js does not export a default function.");
+    return;
+  }
+
+  watcher.on("change", async (path) => {
+    console.log(`📄 File changed: ${path}`);
+    try {
+      await build(outDir);
+      console.log("✅ Build completed");
+    } catch (error) {
+      console.error(`❌ Build failed: ${error.message}`);
     }
-    console.log(stdout);  // Output from build process
   });
-});
 
-console.log(`Watching files for changes ...`);
+  console.log(`👀 Watching for changes in ${outDir}...`);
+}