mtrl-addons 0.2.1 → 0.2.2

package/build.js

@@ -1,201 +1,377 @@
 // build.js
-import { mkdir } from 'fs/promises'
-import { existsSync } from 'fs'
-import { join, dirname } from 'path'
-import { fileURLToPath } from 'url'
+import { mkdir } from "fs/promises";
+import { existsSync } from "fs";
+import { join, dirname, extname } from "path";
+import { fileURLToPath } from "url";
+import { watch } from "fs";
 
-const __dirname = dirname(fileURLToPath(import.meta.url))
-const isWatch = process.argv.includes('--watch')
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const isWatch = process.argv.includes("--watch");
 const isProduction =
-  process.argv.includes('--production') ||
-  process.env.NODE_ENV === 'production'
+  process.argv.includes("--production") ||
+  process.env.NODE_ENV === "production";
 
 // Define consistent output paths
-const DIST_DIR = join(__dirname, 'dist')
-const JS_OUTPUT = join(DIST_DIR, 'index.js')
-const MJS_OUTPUT = join(DIST_DIR, 'index.mjs')
+const DIST_DIR = join(__dirname, "dist");
+const JS_OUTPUT = join(DIST_DIR, "index.js");
+const MJS_OUTPUT = join(DIST_DIR, "index.mjs");
+const CSS_OUTPUT = join(DIST_DIR, "styles.css");
+const STYLES_ENTRY = join(__dirname, "src/styles/index.scss");
 
 // Log build mode
-console.log(`Building in ${isProduction ? 'PRODUCTION' : 'DEVELOPMENT'} mode`)
+console.log(`Building in ${isProduction ? "PRODUCTION" : "DEVELOPMENT"} mode`);
+
+const buildStyles = async () => {
+  console.log("┌─────────────────────────────────────────");
+  console.log("│ SCSS Build");
+  console.log("│ Mode:", isProduction ? "PRODUCTION" : "DEVELOPMENT");
+  console.log("└─────────────────────────────────────────");
+
+  try {
+    // Check if source file exists
+    if (!existsSync(STYLES_ENTRY)) {
+      console.log("⚠️ No SCSS entry found at", STYLES_ENTRY);
+      return true; // Not an error, just no styles to build
+    }
+
+    // Build sass arguments
+    const sassArgs = [
+      "sass",
+      STYLES_ENTRY,
+      CSS_OUTPUT,
+      isProduction ? "--style=compressed" : "--style=expanded",
+    ];
+
+    // Add source map in development
+    if (!isProduction) {
+      sassArgs.push("--source-map");
+    } else {
+      sassArgs.push("--no-source-map");
+    }
+
+    const sassProcess = Bun.spawn(["npx", ...sassArgs], {
+      cwd: __dirname,
+      stdio: ["inherit", "pipe", "pipe"],
+    });
+
+    const stdout = await new Response(sassProcess.stdout).text();
+    const stderr = await new Response(sassProcess.stderr).text();
+    const exitCode = await sassProcess.exited;
+
+    if (exitCode !== 0) {
+      console.error("❌ SCSS build failed");
+      if (stdout.trim()) console.error("STDOUT:", stdout);
+      if (stderr.trim()) console.error("STDERR:", stderr);
+      return false;
+    }
+
+    // Get file size
+    const cssSize = existsSync(CSS_OUTPUT)
+      ? (await Bun.file(CSS_OUTPUT).size) / 1024
+      : 0;
+
+    console.log("✓ SCSS build successful");
+    console.log(`  CSS bundle: ${cssSize.toFixed(2)} KB`);
+
+    return true;
+  } catch (error) {
+    console.error("❌ SCSS build error:", error.message);
+
+    // Check if sass is available
+    try {
+      const checkSass = Bun.spawn(["npx", "sass", "--version"], {
+        stdio: ["inherit", "pipe", "pipe"],
+      });
+      const versionExitCode = await checkSass.exited;
+
+      if (versionExitCode !== 0) {
+        console.error("💡 Sass compiler not found. Install it with:");
+        console.error("   npm install -D sass");
+        console.error("   or");
+        console.error("   bun add -D sass");
+      }
+    } catch {
+      console.error("💡 Sass compiler not found. Install it with:");
+      console.error("   npm install -D sass");
+      console.error("   or");
+      console.error("   bun add -D sass");
+    }
+
+    return false;
+  }
+};
 
 const buildApp = async () => {
   try {
-    console.log('┌─────────────────────────────────────────')
-    console.log('│ JavaScript Build')
-    console.log('│ Mode:', isProduction ? 'PRODUCTION' : 'DEVELOPMENT')
-    console.log('│ Minify:', isProduction ? 'Yes' : 'No')
-    console.log('│ Sourcemaps:', isProduction ? 'No' : 'Yes (inline)')
-    console.log('└─────────────────────────────────────────')
+    console.log("┌─────────────────────────────────────────");
+    console.log("│ JavaScript Build");
+    console.log("│ Mode:", isProduction ? "PRODUCTION" : "DEVELOPMENT");
+    console.log("│ Minify:", isProduction ? "Yes" : "No");
+    console.log("│ Sourcemaps:", isProduction ? "No" : "Yes (inline)");
+    console.log("└─────────────────────────────────────────");
 
     // Create dist directory if it doesn't exist
-    await mkdir(DIST_DIR, { recursive: true })
+    await mkdir(DIST_DIR, { recursive: true });
 
     // Build CJS version
     const cjsResult = await Bun.build({
-      entrypoints: [join(__dirname, 'src/index.ts')],
+      entrypoints: [join(__dirname, "src/index.ts")],
       outdir: DIST_DIR,
       minify: isProduction,
-      sourcemap: isProduction ? 'none' : 'inline',
-      format: 'cjs',
-      target: 'node',
-      external: ['mtrl']
-    })
+      sourcemap: isProduction ? "none" : "inline",
+      format: "cjs",
+      target: "node",
+      external: ["mtrl"],
+    });
 
     // Build ESM version
     const esmResult = await Bun.build({
-      entrypoints: [join(__dirname, 'src/index.ts')],
+      entrypoints: [join(__dirname, "src/index.ts")],
       outdir: DIST_DIR,
       minify: isProduction,
-      sourcemap: isProduction ? 'none' : 'inline',
-      format: 'esm',
-      target: 'node',
+      sourcemap: isProduction ? "none" : "inline",
+      format: "esm",
+      target: "node",
       naming: {
-        entry: 'index.mjs'
+        entry: "index.mjs",
       },
-      external: ['mtrl']
-    })
+      external: ["mtrl"],
+    });
 
     if (!cjsResult.success || !esmResult.success) {
-      console.error('❌ JavaScript build failed')
-      console.error(cjsResult.logs)
-      console.error(esmResult.logs)
-      return false
+      console.error("❌ JavaScript build failed");
+      console.error(cjsResult.logs);
+      console.error(esmResult.logs);
+      return false;
     }
 
-    console.log('✓ JavaScript build successful')
+    console.log("✓ JavaScript build successful");
     console.log(
-      `  CJS bundle: ${((await Bun.file(JS_OUTPUT).size) / 1024).toFixed(2)} KB`
-    )
+      `  CJS bundle: ${((await Bun.file(JS_OUTPUT).size) / 1024).toFixed(2)} KB`,
+    );
     console.log(
       `  ESM bundle: ${((await Bun.file(MJS_OUTPUT).size) / 1024).toFixed(
-        2
-      )} KB`
-    )
+        2,
+      )} KB`,
+    );
 
     // Generate type definitions with better error handling
-    console.log('Generating TypeScript declarations...')
+    console.log("Generating TypeScript declarations...");
 
     try {
       const tscProcess = Bun.spawn(
-        ['tsc', '--emitDeclarationOnly', '--outDir', DIST_DIR],
+        ["tsc", "--emitDeclarationOnly", "--outDir", DIST_DIR],
         {
           cwd: __dirname,
-          stdio: ['inherit', 'pipe', 'pipe']
-        }
-      )
+          stdio: ["inherit", "pipe", "pipe"],
+        },
+      );
 
       // Capture stdout and stderr
-      const stdout = await new Response(tscProcess.stdout).text()
-      const stderr = await new Response(tscProcess.stderr).text()
+      const stdout = await new Response(tscProcess.stdout).text();
+      const stderr = await new Response(tscProcess.stderr).text();
 
-      const tscExitCode = await tscProcess.exited
+      const tscExitCode = await tscProcess.exited;
 
       if (tscExitCode !== 0) {
-        console.error('❌ TypeScript declaration generation failed')
-        console.error('Exit code:', tscExitCode)
+        console.warn(
+          "⚠️ TypeScript declaration generation had errors (non-blocking)",
+        );
         if (stdout.trim()) {
-          console.error('STDOUT:', stdout)
+          console.warn(
+            "STDOUT:",
+            stdout.slice(0, 500) + (stdout.length > 500 ? "..." : ""),
+          );
         }
         if (stderr.trim()) {
-          console.error('STDERR:', stderr)
+          console.warn(
+            "STDERR:",
+            stderr.slice(0, 500) + (stderr.length > 500 ? "..." : ""),
+          );
         }
 
         // Check if tsc is available
-        const whichResult = Bun.spawn(['which', 'tsc'], { stdio: ['inherit', 'pipe', 'pipe'] })
-        const tscPath = await new Response(whichResult.stdout).text()
+        const whichResult = Bun.spawn(["which", "tsc"], {
+          stdio: ["inherit", "pipe", "pipe"],
+        });
+        const tscPath = await new Response(whichResult.stdout).text();
         if (!tscPath.trim()) {
-          console.error('💡 TypeScript compiler (tsc) not found. Install it with:')
-          console.error('   npm install -g typescript')
-          console.error('   or')
-          console.error('   bun add -g typescript')
+          console.error(
+            "💡 TypeScript compiler (tsc) not found. Install it with:",
+          );
+          console.error("   npm install -g typescript");
+          console.error("   or");
+          console.error("   bun add -g typescript");
         }
 
-        return false
+        // Continue build despite tsc errors (JS bundles are still valid)
+        return true;
       }
 
-      console.log('✓ TypeScript declarations generated')
+      console.log("✓ TypeScript declarations generated");
       if (stdout.trim()) {
-        console.log('TSC output:', stdout)
+        console.log("TSC output:", stdout);
       }
 
-      return true
+      return true;
     } catch (tscError) {
-      console.error('❌ Error running TypeScript compiler:', tscError.message)
+      console.warn("⚠️ Error running TypeScript compiler:", tscError.message);
 
       // Check if TypeScript is installed
       try {
-        const checkTsc = Bun.spawn(['tsc', '--version'], { stdio: ['inherit', 'pipe', 'pipe'] })
-        const versionOutput = await new Response(checkTsc.stdout).text()
-        const versionExitCode = await checkTsc.exited
+        const checkTsc = Bun.spawn(["tsc", "--version"], {
+          stdio: ["inherit", "pipe", "pipe"],
+        });
+        const versionOutput = await new Response(checkTsc.stdout).text();
+        const versionExitCode = await checkTsc.exited;
 
         if (versionExitCode === 0) {
-          console.log('TypeScript version:', versionOutput.trim())
+          console.log("TypeScript version:", versionOutput.trim());
         } else {
-          console.error('💡 TypeScript compiler not properly installed. Install with:')
-          console.error('   npm install -g typescript')
-          console.error('   or')
-          console.error('   bun add -g typescript')
+          console.warn(
+            "💡 TypeScript compiler not properly installed. Install with:",
+          );
+          console.warn("   npm install -g typescript");
+          console.warn("   or");
+          console.warn("   bun add -g typescript");
         }
       } catch (versionError) {
-        console.error('💡 TypeScript compiler not found. Install it with:')
-        console.error('   npm install -g typescript')
-        console.error('   or')
-        console.error('   bun add -g typescript')
+        console.warn("💡 TypeScript compiler not found. Install it with:");
+        console.warn("   npm install -g typescript");
+        console.warn("   or");
+        console.warn("   bun add -g typescript");
       }
 
-      return false
+      // Continue build despite tsc errors (JS bundles are still valid)
+      return true;
     }
   } catch (error) {
-    console.error('❌ JavaScript build error:', error)
-    console.error(error.stack)
-    return false
+    console.error("❌ JavaScript build error:", error);
+    console.error(error.stack);
+    return false;
   }
-}
+};
+
+const buildAll = async () => {
+  const jsSuccess = await buildApp();
+  const cssSuccess = await buildStyles();
+  return jsSuccess && cssSuccess;
+};
 
 const build = async () => {
   try {
-    const startTime = Date.now()
+    const startTime = Date.now();
 
-    console.log('┌───────────────────────────────────────────────')
-    console.log('│ 🚀 MTRL-Addons Build Process')
-    console.log('│ Mode:', isProduction ? '🏭 PRODUCTION' : '🔧 DEVELOPMENT')
-    console.log('│ Watch:', isWatch ? '✓ Enabled' : '✗ Disabled')
-    console.log('└───────────────────────────────────────────────')
-    console.log('')
+    console.log("┌───────────────────────────────────────────────");
+    console.log("│ 🚀 MTRL-Addons Build Process");
+    console.log("│ Mode:", isProduction ? "🏭 PRODUCTION" : "🔧 DEVELOPMENT");
+    console.log("│ Watch:", isWatch ? "✓ Enabled" : "✗ Disabled");
+    console.log("└───────────────────────────────────────────────");
+    console.log("");
 
     // Create output directory
-    await mkdir(DIST_DIR, { recursive: true })
+    await mkdir(DIST_DIR, { recursive: true });
 
-    // Build JavaScript
-    const jsSuccess = await buildApp()
+    // Build JavaScript and CSS
+    const buildSuccess = await buildAll();
 
-    const buildTime = ((Date.now() - startTime) / 1000).toFixed(2)
+    const buildTime = ((Date.now() - startTime) / 1000).toFixed(2);
 
     if (isWatch && !isProduction) {
-      console.log('')
-      console.log('┌───────────────────────────────────────────────')
-      console.log('│ 👀 Watching for changes...')
-      console.log('└───────────────────────────────────────────────')
+      console.log("");
+      console.log("┌───────────────────────────────────────────────");
+      console.log("│ 👀 Watching for changes...");
+      console.log("└───────────────────────────────────────────────");
+
+      // Watch src directory for changes
+      const srcDir = join(__dirname, "src");
+      let debounceTimer = null;
+      let isBuilding = false;
+
+      const rebuild = async (changedFile) => {
+        if (isBuilding) return;
+        isBuilding = true;
+
+        const ext = changedFile ? extname(changedFile) : "";
+        const isStyleChange = [".scss", ".css"].includes(ext);
+        const isJsChange = [".ts", ".tsx"].includes(ext);
+
+        console.log("");
+        console.log("┌───────────────────────────────────────────────");
+        console.log(
+          `│ 🔄 Change detected${changedFile ? ` (${changedFile})` : ""}, rebuilding...`,
+        );
+        console.log("└───────────────────────────────────────────────");
+
+        const rebuildStart = Date.now();
+        let success;
+
+        // Selective rebuild based on file type
+        if (isStyleChange) {
+          success = await buildStyles();
+        } else if (isJsChange) {
+          success = await buildApp();
+        } else {
+          success = await buildAll();
+        }
+
+        const rebuildTime = ((Date.now() - rebuildStart) / 1000).toFixed(2);
+
+        console.log("");
+        console.log(
+          `│ ${success ? "✅" : "⚠️"} Rebuild completed in ${rebuildTime}s`,
+        );
+        console.log("│ 👀 Watching for changes...");
+        console.log("└───────────────────────────────────────────────");
+
+        isBuilding = false;
+      };
+
+      const watchHandler = (eventType, filename) => {
+        if (!filename) return;
+
+        // Only watch .ts, .tsx, .scss and .css files
+        const ext = extname(filename);
+        if (![".ts", ".tsx", ".scss", ".css"].includes(ext)) return;
+
+        // Debounce rapid changes
+        if (debounceTimer) clearTimeout(debounceTimer);
+        debounceTimer = setTimeout(() => {
+          rebuild(filename);
+        }, 100);
+      };
+
+      // Watch recursively using fs.watch
+      const watchDir = (dir) => {
+        watch(dir, { recursive: true }, watchHandler);
+      };
+
+      watchDir(srcDir);
+      console.log(`│ Watching: ${srcDir}`);
 
-      // Watch implementation would go here
+      // Keep process alive
+      process.on("SIGINT", () => {
+        console.log("\n│ 👋 Stopping watch mode...");
+        process.exit(0);
+      });
     } else {
-      console.log('')
-      console.log('┌───────────────────────────────────────────────')
-      console.log(`│ ✅ Build completed in ${buildTime}s`)
-      if (!jsSuccess) {
-        console.log('│ ⚠️ Build completed with some errors')
+      console.log("");
+      console.log("┌───────────────────────────────────────────────");
+      console.log(`│ ✅ Build completed in ${buildTime}s`);
+      if (!buildSuccess) {
+        console.log("│ ⚠️ Build completed with some errors");
       }
-      console.log('└───────────────────────────────────────────────')
+      console.log("└───────────────────────────────────────────────");
 
       // Only exit with error code in non-watch mode if there were failures
-      if (!isWatch && !jsSuccess) {
-        process.exit(1)
+      if (!isWatch && !buildSuccess) {
+        process.exit(1);
       }
     }
   } catch (error) {
-    console.error('❌ Build failed with error:', error)
-    process.exit(1)
+    console.error("❌ Build failed with error:", error);
+    process.exit(1);
   }
-}
+};
 
-build()
+build();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mtrl-addons",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Additional components and utilities for the mtrl system, featuring forms, specialized elements, and extended functionality for modern applications",
   "type": "module",
   "main": "index.ts",
@@ -43,6 +43,7 @@
     "jsdom": "^26.1.0",
     "madge": "^8.0.0",
     "mtrl": "^0.2.8",
+    "sass": "^1.94.2",
     "standard": "^17.0.0",
     "typescript": "^5.0.0"
   }