mtrl-addons 0.1.1 → 0.2.1

package/build.js

@@ -1,170 +1,201 @@
 // 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 } from 'path'
+import { fileURLToPath } from 'url'
 
-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')
 
 // Log build mode
-console.log(`Building in ${isProduction ? "PRODUCTION" : "DEVELOPMENT"} mode`);
+console.log(`Building in ${isProduction ? 'PRODUCTION' : 'DEVELOPMENT'} mode`)
 
 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`
-    );
+    )
     console.log(
       `  ESM bundle: ${((await Bun.file(MJS_OUTPUT).size) / 1024).toFixed(
         2
       )} KB`
-    );
-
-    // Generate type definitions
-    console.log("Generating TypeScript declarations...");
-    const tscProcess = Bun.spawn(["tsc", "--project", "tsconfig.build.json"], {
-      cwd: __dirname,
-      stdout: "pipe",
-      stderr: "pipe",
-    });
-
-    const [stdout, stderr] = await Promise.all([
-      new Response(tscProcess.stdout).text(),
-      new Response(tscProcess.stderr).text(),
-    ]);
-
-    const tscExitCode = await tscProcess.exited;
-
-    if (stderr && stderr.includes("error TS")) {
-      console.warn(
-        "⚠️ TypeScript warnings/errors (declarations may still be generated):"
-      );
-      console.warn(stderr);
-    }
+    )
+
+    // Generate type definitions with better error handling
+    console.log('Generating TypeScript declarations...')
+
+    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.error('❌ TypeScript declaration generation failed')
+        console.error('Exit code:', tscExitCode)
+        if (stdout.trim()) {
+          console.error('STDOUT:', stdout)
+        }
+        if (stderr.trim()) {
+          console.error('STDERR:', stderr)
+        }
+
+        // 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')
+        }
+
+        return false
+      }
 
-    // Check if declaration files were actually generated
-    const declarationFiles = [
-      join(DIST_DIR, "index.d.ts"),
-      join(DIST_DIR, "components/index.d.ts"),
-      join(DIST_DIR, "core/index.d.ts"),
-    ];
-
-    const declarationsGenerated = declarationFiles.some((file) =>
-      existsSync(file)
-    );
-
-    if (!declarationsGenerated) {
-      console.error(
-        "❌ TypeScript declaration generation failed - no declaration files created"
-      );
-      return false;
-    }
+      console.log('✓ TypeScript declarations generated')
+      if (stdout.trim()) {
+        console.log('TSC output:', stdout)
+      }
 
-    console.log("✓ TypeScript declarations generated");
-    return true;
+      return true
+    } catch (tscError) {
+      console.error('❌ 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.error('💡 TypeScript compiler not properly installed. Install with:')
+          console.error('   npm install -g typescript')
+          console.error('   or')
+          console.error('   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')
+      }
+
+      return false
+    }
   } 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 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();
+    const jsSuccess = await buildApp()
 
-    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 implementation would go here
     } else {
-      console.log("");
-      console.log("┌───────────────────────────────────────────────");
-      console.log(`│ ✅ Build completed in ${buildTime}s`);
+      console.log('')
+      console.log('┌───────────────────────────────────────────────')
+      console.log(`│ ✅ Build completed in ${buildTime}s`)
       if (!jsSuccess) {
-        console.log("│ ⚠️ Build completed with some errors");
+        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);
+        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.1.1",
+  "version": "0.2.1",
   "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,11 +34,13 @@
   "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",
     "standard": "^17.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";