feat: implement low priority tasks

- Add TypeScript gradual adoption (tsconfig.json)
  - Allow JS files, enable checking gradually
  - Path mapping for @app, @packages, @templates
- Set up bundle size monitoring (scripts/bundle-size-check.js)
  - Checks JS/CSS file sizes against limits
  - Warns on large bundles (>500KB JS, >100KB CSS)
  - Add check-bundle-size script to package.json
- Update TODO.md with progress

Author: khulnasoft-bot

package.json

@@ -24,7 +24,8 @@
     "format": "prettier --write apps/*/app/**/*.js packages/**/*.js",
     "audit": "pnpm audit --audit-level moderate",
     "prepare": "husky",
-    "validate-build": "bash scripts/validate-build.sh"
+    "validate-build": "bash scripts/validate-build.sh",
+    "check-bundle-size": "node scripts/bundle-size-check.js"
   },
   "lint-staged": {
     "*.js": [

scripts/bundle-size-check.js

@@ -0,0 +1,120 @@
+#!/usr/bin/env node
+
+/**
+ * Bundle Size Monitoring Script
+ * Checks JS/CSS bundle sizes and alerts on significant increases
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+// Configuration
+const CONFIG = {
+  distDir: 'dist',
+  maxSizes: {
+    js: 500 * 1024, // 500KB per JS chunk
+    css: 100 * 1024, // 100KB per CSS file
+    total: 2 * 1024 * 1024 // 2MB total
+  },
+  // Optional: store previous sizes for comparison
+  sizeHistoryFile: '.bundle-size-history.json'
+};
+
+// Get file size in human readable format
+function formatSize(bytes) {
+  if (bytes < 1024) return bytes + ' B';
+  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(2) + ' KB';
+  return (bytes / (1024 * 1024)).toFixed(2) + ' MB';
+}
+
+// Get all files of a specific type
+function getFiles(dir, ext, results = []) {
+  try {
+    const files = fs.readdirSync(dir);
+    for (const file of files) {
+      const fullPath = path.join(dir, file);
+      const stat = fs.statSync(fullPath);
+      if (stat.isDirectory()) {
+        getFiles(fullPath, ext, results);
+      } else if (file.endsWith(ext)) {
+        results.push(fullPath);
+      }
+    }
+  } catch (e) {
+    console.error(`Error reading directory ${dir}:`, e.message);
+  }
+  return results;
+}
+
+// Main check function
+function checkBundleSizes() {
+  console.log('🔍 Checking bundle sizes...\n');
+
+  if (!fs.existsSync(CONFIG.distDir)) {
+    console.error('❌ Error: dist/ directory not found. Run "pnpm build" first.');
+    process.exit(1);
+  }
+
+  // Get all JS and CSS files
+  const jsFiles = getFiles(CONFIG.distDir, '.js');
+  const cssFiles = getFiles(CONFIG.distDir, '.css');
+
+  let hasWarnings = false;
+  let totalSize = 0;
+
+  // Check JS files
+  console.log('📜 JavaScript files:');
+  for (const file of jsFiles) {
+    const stats = fs.statSync(file);
+    const size = stats.size;
+    totalSize += size;
+    const relativePath = path.relative(CONFIG.distDir, file);
+    const sizeStr = formatSize(size);
+
+    if (size > CONFIG.maxSizes.js) {
+      console.log(`  ❌ ${relativePath}: ${sizeStr} (exceeds ${formatSize(CONFIG.maxSizes.js)})`);
+      hasWarnings = true;
+    } else {
+      console.log(`  ✅ ${relativePath}: ${sizeStr}`);
+    }
+  }
+
+  // Check CSS files
+  console.log('\n🎨 CSS files:');
+  for (const file of cssFiles) {
+    const stats = fs.statSync(file);
+    const size = stats.size;
+    totalSize += size;
+    const relativePath = path.relative(CONFIG.distDir, file);
+    const sizeStr = formatSize(size);
+
+    if (size > CONFIG.maxSizes.css) {
+      console.log(`  ❌ ${relativePath}: ${sizeStr} (exceeds ${formatSize(CONFIG.maxSizes.css)})`);
+      hasWarnings = true;
+    } else {
+      console.log(`  ✅ ${relativePath}: ${sizeStr}`);
+    }
+  }
+
+  // Check total size
+  console.log(`\n📊 Total bundle size: ${formatSize(totalSize)}`);
+  if (totalSize > CONFIG.maxSizes.total) {
+    console.log(`❌ Total size exceeds limit of ${formatSize(CONFIG.maxSizes.total)}`);
+    hasWarnings = true;
+  }
+
+  // Summary
+  console.log('\n' + '='.repeat(50));
+  if (hasWarnings) {
+    console.log('⚠️  Bundle size warnings detected!');
+    console.log('   Consider code splitting or lazy loading.');
+  } else {
+    console.log('✅ All bundle sizes are within limits!');
+  }
+
+  return !hasWarnings;
+}
+
+// Run the check
+const success = checkBundleSizes();
+process.exit(success ? 0 : 1);

tsconfig.json

@@ -0,0 +1,55 @@
+{
+  "compilerOptions": {
+    // TypeScript configuration for gradual adoption
+    // Allows mixing JS and TS files during migration
+
+    // Basic settings
+    "target": "ES2020",
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "moduleResolution": "node",
+    "allowJs": true,        // Allow JS files in the project
+    "checkJs": false,       // Don't type-check JS files (enable gradually)
+    "maxNodeModuleJsDepth": 2,
+
+    // Output settings (not used with Vite, but needed for IDE)
+    "noEmit": true,
+
+    // Strictness (enable gradually)
+    "strict": false,
+    "noImplicitAny": false,
+    "strictNullChecks": false,
+    "strictFunctionTypes": false,
+    "strictBindCallApply": false,
+    "strictPropertyInitialization": false,
+    "noImplicitThis": false,
+    "alwaysStrict": false,
+
+    // Additional checks
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noImplicitReturns": false,
+
+    // Module resolution
+    "baseUrl": ".",
+    "paths": {
+      "@app/*": ["apps/main-app/app/*"],
+      "@packages/*": ["packages/*"],
+      "@templates/*": ["packages/templates/*"]
+    },
+
+    // Include/exclude
+    "include": [
+      "apps/**/*.js",
+      "packages/**/*.js",
+      "tests/**/*.js"
+    ],
+    "exclude": [
+      "node_modules",
+      "dist",
+      "**/*.spec.js",
+      "**/*.Spec.js"
+    ]
+  },
+  "compileOnSave": false
+}