mtrl-addons 0.1.2 → 0.2.2

package/build.js

@@ -1,8 +1,9 @@
 // build.js
 import { mkdir } from "fs/promises";
 import { existsSync } from "fs";
-import { join, dirname } from "path";
+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");
@@ -14,10 +15,92 @@ const isProduction =
 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`);
 
+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("┌─────────────────────────────────────────");
@@ -64,34 +147,104 @@ const buildApp = async () => {
 
     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
+    // Generate type definitions with better error handling
     console.log("Generating TypeScript declarations...");
-    const tscProcess = Bun.spawn(["tsc", "--project", "tsconfig.build.json"], {
-      cwd: __dirname,
-    });
 
-    const tscExitCode = await tscProcess.exited;
-    if (tscExitCode !== 0) {
-      console.error("❌ TypeScript declaration generation failed");
-      // Check if declaration files were actually generated despite errors
-      const declarationFile = join(DIST_DIR, "index.d.ts");
-      if (existsSync(declarationFile)) {
-        console.log("⚠️ Declaration files were generated despite errors");
+    try {
+      const tscProcess = Bun.spawn(
+        ["tsc", "--emitDeclarationOnly", "--outDir", DIST_DIR],
+        {
+          cwd: __dirname,
+          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 tscExitCode = await tscProcess.exited;
+
+      if (tscExitCode !== 0) {
+        console.warn(
+          "⚠️ TypeScript declaration generation had errors (non-blocking)",
+        );
+        if (stdout.trim()) {
+          console.warn(
+            "STDOUT:",
+            stdout.slice(0, 500) + (stdout.length > 500 ? "..." : ""),
+          );
+        }
+        if (stderr.trim()) {
+          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();
+        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");
+        }
+
+        // Continue build despite tsc errors (JS bundles are still valid)
         return true;
       }
-      return false;
-    }
 
-    console.log("✓ TypeScript declarations generated");
-    return true;
+      console.log("✓ TypeScript declarations generated");
+      if (stdout.trim()) {
+        console.log("TSC output:", stdout);
+      }
+
+      return true;
+    } catch (tscError) {
+      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;
+
+        if (versionExitCode === 0) {
+          console.log("TypeScript version:", versionOutput.trim());
+        } else {
+          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.warn("💡 TypeScript compiler not found. Install it with:");
+        console.warn("   npm install -g typescript");
+        console.warn("   or");
+        console.warn("   bun add -g typescript");
+      }
+
+      // Continue build despite tsc errors (JS bundles are still valid)
+      return true;
+    }
   } catch (error) {
     console.error("❌ JavaScript build error:", error);
     console.error(error.stack);
@@ -99,6 +252,12 @@ const buildApp = async () => {
   }
 };
 
+const buildAll = async () => {
+  const jsSuccess = await buildApp();
+  const cssSuccess = await buildStyles();
+  return jsSuccess && cssSuccess;
+};
+
 const build = async () => {
   try {
     const startTime = Date.now();
@@ -113,8 +272,8 @@ const build = async () => {
     // Create output directory
     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);
 
@@ -124,18 +283,88 @@ const build = async () => {
       console.log("│ 👀 Watching for changes...");
       console.log("└───────────────────────────────────────────────");
 
-      // Watch implementation would go here
+      // 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}`);
+
+      // 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) {
+      if (!buildSuccess) {
         console.log("│ ⚠️ Build completed with some errors");
       }
       console.log("└───────────────────────────────────────────────");
 
       // Only exit with error code in non-watch mode if there were failures
-      if (!isWatch && !jsSuccess) {
+      if (!isWatch && !buildSuccess) {
         process.exit(1);
       }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mtrl-addons",
-  "version": "0.1.2",
+  "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",
@@ -10,8 +10,15 @@
     "dev": "bun run ./build.js --watch",
     "test": "bun test",
     "prepublishOnly": "bun run build",
-    "debug:list": "bun run ../mtrl-app/scripts/debug/list-addons.ts",
-    "debug:list:interactive": "bun run ../mtrl-app/scripts/debug/list-addons.ts --interactive"
+    "server:start": "pm2 start ../mtrl-app/ecosystem.config.js",
+    "server:stop": "pm2 stop mtrl-app",
+    "server:reload": "pm2 restart mtrl-app",
+    "server:logs": "pm2 logs mtrl-app",
+    "link:mtrl": "rm -rf node_modules/mtrl && ln -sf ../../mtrl node_modules/mtrl",
+    "debug:vlist": "bun run ../mtrl-app/scripts/debug/vlist examples/vlist",
+    "debug:vlist:interactive": "bun run ../mtrl-app/scripts/debug/vlist examples/vlist --interactive",
+    "debug:vlist-cursor": "bun run ../mtrl-app/scripts/debug/vlist examples/vlist-cursor",
+    "debug:vlist-cursor:interactive": "bun run ../mtrl-app/scripts/debug/vlist examples/vlist-cursor --interactive"
   },
   "repository": {
     "type": "git",
@@ -27,13 +34,16 @@
   "author": "floor",
   "license": "MIT",
   "peerDependencies": {
-    "mtrl": "^0.2.8"
+    "mtrl": "^0.5.1"
   },
   "devDependencies": {
+    "@types/jsdom": "^21.1.7",
     "@types/node": "^20.0.0",
     "bun-types": "^1.0.0",
+    "jsdom": "^26.1.0",
     "madge": "^8.0.0",
     "mtrl": "^0.2.8",
+    "sass": "^1.94.2",
     "standard": "^17.0.0",
     "typescript": "^5.0.0"
   }

package/scripts/debug/vlist-selection.ts

@@ -0,0 +1,121 @@
+// scripts/debug/vlist-selection.ts
+
+import puppeteer from "puppeteer";
+
+async function testVListSelection() {
+  console.log("🎯 Testing VList Selection Feature");
+
+  const browser = await puppeteer.launch({
+    headless: false,
+    devtools: true,
+    args: ["--no-sandbox", "--disable-setuid-sandbox"],
+  });
+
+  const page = await browser.newPage();
+
+  // Listen to console logs
+  page.on("console", (msg) => {
+    const text = msg.text();
+    if (text.includes("[Selection]") || text.includes("selection")) {
+      console.log(`💬 [${msg.type().toUpperCase()}] ${text}`);
+    }
+  });
+
+  await page.goto("http://localhost:4000/examples/vlist-addons");
+
+  // Wait for list to load
+  await page.waitForSelector(".mtrl-viewport-item", { timeout: 5000 });
+
+  console.log("📋 Page loaded, looking for list items...");
+
+  // Get info about items
+  const itemInfo = await page.evaluate(() => {
+    const items = document.querySelectorAll(".mtrl-viewport-item");
+    const firstItem = items[0];
+    const listItem = firstItem?.querySelector(".list-item, .user-item");
+
+    return {
+      viewportItemCount: items.length,
+      firstViewportItemClasses: firstItem?.className,
+      firstViewportItemDataIndex: firstItem?.getAttribute("data-index"),
+      firstListItemClasses: listItem?.className,
+      firstListItemDataId: listItem?.getAttribute("data-id"),
+      hasClickHandler: !!(window as any).listExample?.userList,
+    };
+  });
+
+  console.log("📊 Item info:", itemInfo);
+
+  // Click on the first item
+  console.log("🖱️ Clicking on first item...");
+  await page.click(".mtrl-viewport-item:first-child");
+
+  // Wait a bit for selection to process
+  await page.waitForTimeout(500);
+
+  // Check if selection class was applied
+  const selectionInfo = await page.evaluate(() => {
+    const firstItem = document.querySelector(".mtrl-viewport-item:first-child");
+    const listItem = firstItem?.querySelector(".list-item, .user-item");
+    const selectedItems = document.querySelectorAll(
+      ".mtrl-list-item--selected"
+    );
+
+    return {
+      hasSelectionClass: listItem?.classList.contains(
+        "mtrl-list-item--selected"
+      ),
+      listItemClasses: listItem?.className,
+      selectedCount: selectedItems.length,
+      userListExists: !!(window as any).listExample?.userList,
+      hasSelectItems:
+        typeof (window as any).listExample?.userList?.selectItems ===
+        "function",
+      hasGetSelectedItems:
+        typeof (window as any).listExample?.userList?.getSelectedItems ===
+        "function",
+    };
+  });
+
+  console.log("✅ Selection info after click:", selectionInfo);
+
+  // Try programmatic selection
+  console.log("🔧 Testing programmatic selection...");
+  const programmaticResult = await page.evaluate(() => {
+    const userList = (window as any).listExample?.userList;
+    if (userList && userList.selectItems) {
+      userList.selectItems([0, 1, 2]);
+      const selected = userList.getSelectedItems
+        ? userList.getSelectedItems()
+        : [];
+      return {
+        success: true,
+        selectedCount: selected.length,
+        selectedIds: selected.map((item: any) => item.id),
+      };
+    }
+    return { success: false, reason: "No selectItems method" };
+  });
+
+  console.log("📊 Programmatic selection result:", programmaticResult);
+
+  // Final check
+  await page.waitForTimeout(500);
+  const finalState = await page.evaluate(() => {
+    const selectedElements = document.querySelectorAll(
+      ".mtrl-list-item--selected"
+    );
+    return {
+      selectedElementCount: selectedElements.length,
+      selectedClasses: Array.from(selectedElements).map((el) => el.className),
+    };
+  });
+
+  console.log("🎯 Final selection state:", finalState);
+
+  // Keep browser open for inspection
+  console.log("✨ Test complete. Browser will stay open for inspection.");
+  console.log("Press Ctrl+C to exit.");
+}
+
+testVListSelection().catch(console.error);

package/src/components/index.ts

@@ -1,45 +1,9 @@
 /**
- * mtrl-addons Components
+ * Components Module Exports
  *
- * Exports all component modules
+ * Central export point for all components
  */
 
-// Export the existing list component
-export { createList } from "./list";
-
-// Export list types and utilities
-export type {
-  ListConfig,
-  ListComponent,
-  ListAPI,
-  ListState,
-  ListEvents,
-  ListItemTemplate,
-  ListScrollConfig,
-  ListSelectionConfig,
-  ListEventHandlers,
-  ListItemContext,
-} from "./list";
-
-// List configuration utilities
-export {
-  createBaseConfig,
-  getElementConfig,
-  getApiConfig,
-  getCollectionConfig,
-  getListManagerConfig,
-  validateConfig,
-} from "./list";
-
-// List features
-export { withListManager } from "./list/features/list-manager";
-export { withAPI } from "./list/api";
-
-// Components will be exported here as they're added
-// For example:
-// export { VirtualList } from './virtual-list';
-// export { DataTable } from './data-table';
-// export { InfiniteScroll } from './infinite-scroll';
-
-// Currently no other components - this is the foundation for future components
-export const componentsVersion = "0.1.0";
+// VList component (virtual list with viewport)
+export { createVList } from "./vlist";
+export type { VListConfig, VListComponent } from "./vlist/types";