feat(dees-editor-workspace): improve TypeScript IntelliSense, auto-run workspace init commands, and watch node_modules for new packages

changelog.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## 2025-12-31 - 3.19.0 - feat(dees-editor-workspace)
+improve TypeScript IntelliSense, auto-run workspace init commands, and watch node_modules for new packages
+
+- Execute an onInit command from /npmextra.json on workspace initialization (e.g., run pnpm install).
+- Add npmextra.json and an import test file (importtest.ts) plus a sample dependency in the scaffold to test package imports.
+- Add node_modules watcher with debounce to auto-scan and load package types after installs.
+- Enhance TypeScript IntelliSense: recursively load all .d.ts files from packages and @types packages, add package.json as extra lib, and log progress/errors for debugging.
+- Change processContentChange signature to accept optional filePath and trigger a diagnostic refresh when new types are loaded.
+- Expose scanAndLoadNewPackageTypes to scan top-level and scoped packages and load their types.
+- Add start/stop logic for the node_modules watcher in workspace lifecycle to avoid leaks and handle cleanup.
+
 ## 2025-12-31 - 3.18.0 - feat(filetree)
 add filesystem watch support to WebContainer environment and auto-refresh file tree; improve icon handling and context menu behavior
 

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '3.18.0',
+  version: '3.19.0',
   description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 }

ts_web/elements/00group-editor/dees-editor-workspace/dees-editor-workspace.ts

@@ -10,7 +10,7 @@ import {
 } from '@design.estate/dees-element';
 import * as domtools from '@design.estate/dees-domtools';
 import { themeDefaultStyles } from '../../00theme.js';
-import type { IExecutionEnvironment } from '../../00group-runtime/index.js';
+import type { IExecutionEnvironment, IFileWatcher } from '../../00group-runtime/index.js';
 import { WebContainerEnvironment } from '../../00group-runtime/index.js';
 import type { FileSystemTree } from '@webcontainer/api';
 import '../dees-editor-monaco/dees-editor-monaco.js';
@@ -56,6 +56,9 @@ export class DeesEditorWorkspace extends DeesElement {
                   build: 'tsc',
                   dev: 'tsc --watch',
                 },
+                dependencies: {
+                  '@push.rocks/smartpromise': '^4.2.3',
+                },
                 devDependencies: {
                   typescript: '^5.0.0',
                 },
@@ -65,6 +68,19 @@ export class DeesEditorWorkspace extends DeesElement {
             ),
           },
         },
+        'npmextra.json': {
+          file: {
+            contents: JSON.stringify(
+              {
+                deesEditorWorkspace: {
+                  onInit: 'pnpm install',
+                },
+              },
+              null,
+              2
+            ),
+          },
+        },
         'tsconfig.json': {
           file: {
             contents: JSON.stringify(
@@ -125,6 +141,28 @@ export function formatName(name: string): string {
 export function createUser(firstName: string, lastName: string): IUser {
   return { firstName, lastName };
 }
+`,
+              },
+            },
+            'importtest.ts': {
+              file: {
+                contents: `// Test npm package imports
+import * as smartpromise from '@push.rocks/smartpromise';
+
+// This should have IntelliSense showing defer() method
+const deferred = smartpromise.defer<string>();
+
+// Test using the deferred promise
+async function testSmartPromise() {
+  setTimeout(() => {
+    deferred.resolve('Hello from smartpromise!');
+  }, 100);
+
+  const result = await deferred.promise;
+  console.log(result);
+}
+
+testSmartPromise();
 `,
               },
             },
@@ -199,6 +237,10 @@ export function createUser(firstName: string, lastName: string): IUser {
   private intelliSenseManager: TypeScriptIntelliSenseManager | null = null;
   private intelliSenseInitialized: boolean = false;
 
+  // node_modules watcher for auto-loading types
+  private nodeModulesWatcher: IFileWatcher | null = null;
+  private nodeModulesDebounceTimeout: ReturnType<typeof setTimeout> | null = null;
+
   // Auto-save functionality
   @state()
   accessor autoSave: boolean = false;
@@ -753,6 +795,7 @@ export function createUser(firstName: string, lastName: string): IUser {
       clearInterval(this.autoSaveInterval);
       this.autoSaveInterval = null;
     }
+    this.stopNodeModulesWatcher();
   }
 
   public async firstUpdated() {
@@ -783,6 +826,10 @@ export function createUser(firstName: string, lastName: string): IUser {
       } else if (!this.executionEnvironment.ready) {
         await this.executionEnvironment.init();
       }
+
+      // Execute onInit command from npmextra.json if present
+      await this.executeOnInitCommand();
+
       // IntelliSense is initialized lazily when first file is opened (Monaco loads on demand)
     } catch (error) {
       console.error('Failed to initialize workspace:', error);
@@ -793,6 +840,34 @@ export function createUser(firstName: string, lastName: string): IUser {
     }
   }
 
+  /**
+   * Execute onInit command from npmextra.json if present
+   * This allows automatic setup like `pnpm install` on workspace initialization
+   */
+  private async executeOnInitCommand(): Promise<void> {
+    if (!this.executionEnvironment) return;
+
+    try {
+      if (await this.executionEnvironment.exists('/npmextra.json')) {
+        const content = await this.executionEnvironment.readFile('/npmextra.json');
+        const config = JSON.parse(content);
+        const onInit = config?.deesEditorWorkspace?.onInit;
+
+        if (onInit && typeof onInit === 'string') {
+          console.log('Executing onInit command:', onInit);
+          // Parse command and args
+          const [cmd, ...args] = onInit.split(' ');
+          const process = await this.executionEnvironment.spawn(cmd, args);
+          // Wait for completion
+          const exitCode = await process.exit;
+          console.log('onInit command completed with exit code:', exitCode);
+        }
+      }
+    } catch (error) {
+      console.warn('Failed to execute onInit command:', error);
+    }
+  }
+
   private async initializeIntelliSense(): Promise<void> {
     if (!this.executionEnvironment) return;
     if (this.intelliSenseInitialized) return;
@@ -816,6 +891,51 @@ export function createUser(firstName: string, lastName: string): IUser {
 
     // Set up marker listener for Problems panel
     this.setupMarkerListener();
+
+    // Start watching node_modules for package installations
+    this.startNodeModulesWatcher();
+
+    // Initial scan for any existing packages
+    await this.intelliSenseManager.scanAndLoadNewPackageTypes();
+  }
+
+  /**
+   * Watch node_modules for changes (e.g., after pnpm install)
+   * and automatically load types for new packages
+   */
+  private startNodeModulesWatcher(): void {
+    if (!this.executionEnvironment || this.nodeModulesWatcher) return;
+
+    try {
+      this.nodeModulesWatcher = this.executionEnvironment.watch(
+        '/node_modules',
+        (_event, _filename) => {
+          // Debounce - pnpm install creates many file changes
+          if (this.nodeModulesDebounceTimeout) {
+            clearTimeout(this.nodeModulesDebounceTimeout);
+          }
+          this.nodeModulesDebounceTimeout = setTimeout(async () => {
+            if (this.intelliSenseManager) {
+              await this.intelliSenseManager.scanAndLoadNewPackageTypes();
+            }
+          }, 2000); // 2 second debounce for package installation
+        },
+        { recursive: true }
+      );
+    } catch (error) {
+      console.warn('Could not watch node_modules:', error);
+    }
+  }
+
+  private stopNodeModulesWatcher(): void {
+    if (this.nodeModulesWatcher) {
+      this.nodeModulesWatcher.stop();
+      this.nodeModulesWatcher = null;
+    }
+    if (this.nodeModulesDebounceTimeout) {
+      clearTimeout(this.nodeModulesDebounceTimeout);
+      this.nodeModulesDebounceTimeout = null;
+    }
   }
 
   private async handleFileSelect(e: CustomEvent<{ path: string; name: string }>) {
@@ -853,7 +973,7 @@ export function createUser(firstName: string, lastName: string): IUser {
         // Process the initial file content for IntelliSense
         const language = this.getLanguageFromPath(path);
         if (this.intelliSenseManager && (language === 'typescript' || language === 'javascript')) {
-          await this.intelliSenseManager.processContentChange(content);
+          await this.intelliSenseManager.processContentChange(content, path);
         }
       }
     } catch (error) {
@@ -912,7 +1032,7 @@ export function createUser(firstName: string, lastName: string): IUser {
       // Process content for IntelliSense (TypeScript/JavaScript files)
       const language = this.getLanguageFromPath(this.activeFilePath);
       if (this.intelliSenseManager && (language === 'typescript' || language === 'javascript')) {
-        this.intelliSenseManager.processContentChange(newContent);
+        this.intelliSenseManager.processContentChange(newContent, this.activeFilePath);
       }
     }
   }

ts_web/elements/00group-editor/dees-editor-workspace/typescript-intellisense.ts

@@ -175,10 +175,14 @@ export class TypeScriptIntelliSenseManager {
     if (!this.monacoInstance || !this.executionEnvironment) return;
     if (this.loadedLibs.has(packageName)) return;
 
+    console.log(`[IntelliSense] Loading types for package: ${packageName}`);
+
     try {
       const typesLoaded = await this.tryLoadPackageTypes(packageName);
+      console.log(`[IntelliSense] tryLoadPackageTypes result for ${packageName}: ${typesLoaded}`);
       if (!typesLoaded) {
-        await this.tryLoadAtTypesPackage(packageName);
+        const atTypesLoaded = await this.tryLoadAtTypesPackage(packageName);
+        console.log(`[IntelliSense] tryLoadAtTypesPackage result for ${packageName}: ${atTypesLoaded}`);
       }
       this.loadedLibs.add(packageName);
     } catch (error) {
@@ -191,30 +195,33 @@ export class TypeScriptIntelliSenseManager {
     if (!this.executionEnvironment || !ts) return false;
 
     const basePath = `/node_modules/${packageName}`;
+    console.log(`[IntelliSense] Checking package at: ${basePath}`);
 
     try {
       // Check package.json for types field
       const packageJsonPath = `${basePath}/package.json`;
-      if (await this.executionEnvironment.exists(packageJsonPath)) {
+      const packageJsonExists = await this.executionEnvironment.exists(packageJsonPath);
-        const packageJson = JSON.parse(
+      console.log(`[IntelliSense] package.json exists: ${packageJsonExists}`);
-          await this.executionEnvironment.readFile(packageJsonPath)
+
-        );
+      if (packageJsonExists) {
+        const packageJsonContent = await this.executionEnvironment.readFile(packageJsonPath);
+        const packageJson = JSON.parse(packageJsonContent);
+
+        // Add package.json to Monaco so TypeScript can resolve the types field
+        ts.typescriptDefaults.addExtraLib(packageJsonContent, `file://${packageJsonPath}`);
+        console.log(`[IntelliSense] Added package.json: ${packageJsonPath}`);
 
         const typesPath = packageJson.types || packageJson.typings;
+        console.log(`[IntelliSense] types field: ${typesPath}`);
         if (typesPath) {
-          const fullTypesPath = `${basePath}/${typesPath}`;
+          // Load all .d.ts files from the package, not just the entry point
-          if (await this.executionEnvironment.exists(fullTypesPath)) {
+          // Modern packages often have multiple declaration files with imports
-            const content = await this.executionEnvironment.readFile(fullTypesPath);
+          await this.loadAllDtsFilesFromPackage(basePath);
-            ts.typescriptDefaults.addExtraLib(
+          return true;
-              content,
-              `file://${fullTypesPath}`
-            );
-            return true;
-          }
         }
       }
 
-      // Try common locations
+      // Try common locations - if any exist, load all .d.ts files
       const commonPaths = [
         `${basePath}/index.d.ts`,
         `${basePath}/dist/index.d.ts`,
@@ -223,24 +230,65 @@ export class TypeScriptIntelliSenseManager {
 
       for (const dtsPath of commonPaths) {
         if (await this.executionEnvironment.exists(dtsPath)) {
-          const content = await this.executionEnvironment.readFile(dtsPath);
+          console.log(`[IntelliSense] Found types at: ${dtsPath}`);
-          ts.typescriptDefaults.addExtraLib(
+          await this.loadAllDtsFilesFromPackage(basePath);
-            content,
-            `file://${dtsPath}`
-          );
           return true;
         }
       }
 
+      console.log(`[IntelliSense] No types found for ${packageName}`);
       return false;
-    } catch {
+    } catch (error) {
+      console.error(`[IntelliSense] Error loading package types:`, error);
       return false;
     }
   }
 
-  private async tryLoadAtTypesPackage(packageName: string): Promise<boolean> {
+  /**
+   * Recursively load all .d.ts files from a package directory
+   */
+  private async loadAllDtsFilesFromPackage(basePath: string): Promise<void> {
     const ts = this.tsApi;
-    if (!this.executionEnvironment || !ts) return false;
+    if (!this.executionEnvironment || !ts) return;
+
+    await this.loadDtsFilesFromDirectory(basePath);
+  }
+
+  /**
+   * Recursively load .d.ts files from a directory
+   */
+  private async loadDtsFilesFromDirectory(dirPath: string): Promise<void> {
+    const ts = this.tsApi;
+    if (!this.executionEnvironment || !ts) return;
+
+    try {
+      const entries = await this.executionEnvironment.readDir(dirPath);
+
+      for (const entry of entries) {
+        const fullPath = dirPath === '/' ? `/${entry.name}` : `${dirPath}/${entry.name}`;
+
+        // Skip nested node_modules (shouldn't happen in a package but be safe)
+        if (entry.name === 'node_modules') continue;
+
+        if (entry.type === 'directory') {
+          await this.loadDtsFilesFromDirectory(fullPath);
+        } else if (entry.type === 'file' && entry.name.endsWith('.d.ts')) {
+          try {
+            const content = await this.executionEnvironment.readFile(fullPath);
+            console.log(`[IntelliSense] Adding extra lib: ${fullPath} (${content.length} chars)`);
+            ts.typescriptDefaults.addExtraLib(content, `file://${fullPath}`);
+          } catch (error) {
+            console.warn(`[IntelliSense] Failed to read .d.ts file: ${fullPath}`, error);
+          }
+        }
+      }
+    } catch (error) {
+      console.warn(`[IntelliSense] Failed to read directory: ${dirPath}`, error);
+    }
+  }
+
+  private async tryLoadAtTypesPackage(packageName: string): Promise<boolean> {
+    if (!this.executionEnvironment) return false;
 
     // Handle scoped packages: @scope/package -> @types/scope__package
     const typesPackageName = packageName.startsWith('@')
@@ -252,11 +300,8 @@ export class TypeScriptIntelliSenseManager {
     try {
       const indexPath = `${basePath}/index.d.ts`;
       if (await this.executionEnvironment.exists(indexPath)) {
-        const content = await this.executionEnvironment.readFile(indexPath);
+        // Load all .d.ts files from the @types package
-        ts.typescriptDefaults.addExtraLib(
+        await this.loadAllDtsFilesFromPackage(basePath);
-          content,
-          `file://${indexPath}`
-        );
         return true;
       }
       return false;
@@ -267,11 +312,83 @@ export class TypeScriptIntelliSenseManager {
 
   /**
    * Process content change and load types for any new imports
+   * @param content The file content to parse for imports
+   * @param filePath Optional file path to trigger diagnostic refresh
    */
-  public async processContentChange(content: string): Promise<void> {
+  public async processContentChange(content: string, filePath?: string): Promise<void> {
     const imports = this.parseImports(content);
+    let typesLoaded = false;
+
     for (const packageName of imports) {
-      await this.loadTypesForPackage(packageName);
+      if (!this.loadedLibs.has(packageName)) {
+        await this.loadTypesForPackage(packageName);
+        typesLoaded = true;
+      }
+    }
+
+    // If we loaded new types and have a file path, trigger diagnostic refresh
+    if (typesLoaded && filePath && this.monacoInstance) {
+      this.triggerDiagnosticRefresh(filePath);
+    }
+  }
+
+  /**
+   * Force Monaco to re-validate a file by touching its model.
+   * This is needed because addExtraLib doesn't always trigger re-validation.
+   */
+  private triggerDiagnosticRefresh(filePath: string): void {
+    if (!this.monacoInstance) return;
+
+    const uri = this.monacoInstance.Uri.parse(`file://${filePath}`);
+    const model = this.monacoInstance.editor.getModel(uri);
+
+    if (model) {
+      // Touch the model to trigger re-validation
+      // We do this by getting and re-setting the same value
+      const currentValue = model.getValue();
+      model.setValue(currentValue);
+      console.log(`[IntelliSense] Triggered diagnostic refresh for: ${filePath}`);
+    }
+  }
+
+  /**
+   * Scan node_modules for packages and load types for any not yet loaded.
+   * Called when node_modules changes (e.g., after pnpm install).
+   */
+  public async scanAndLoadNewPackageTypes(): Promise<void> {
+    if (!this.executionEnvironment) return;
+
+    try {
+      // Check if node_modules exists
+      if (!await this.executionEnvironment.exists('/node_modules')) return;
+
+      // Read top-level node_modules
+      const entries = await this.executionEnvironment.readDir('/node_modules');
+
+      for (const entry of entries) {
+        if (entry.type !== 'directory') continue;
+
+        if (entry.name.startsWith('@')) {
+          // Scoped package - read subdirectories
+          try {
+            const scopedPath = `/node_modules/${entry.name}`;
+            const scopedEntries = await this.executionEnvironment.readDir(scopedPath);
+            for (const scopedEntry of scopedEntries) {
+              if (scopedEntry.type === 'directory') {
+                const packageName = `${entry.name}/${scopedEntry.name}`;
+                await this.loadTypesForPackage(packageName);
+              }
+            }
+          } catch {
+            // Skip if we can't read scoped directory
+          }
+        } else if (!entry.name.startsWith('.')) {
+          // Regular package
+          await this.loadTypesForPackage(entry.name);
+        }
+      }
+    } catch (error) {
+      console.warn('Failed to scan node_modules:', error);
     }
   }