From 77df2743c576cbba47b17597a6c03c668f6d6b27 Mon Sep 17 00:00:00 2001 From: Juergen Kunz Date: Wed, 31 Dec 2025 09:47:38 +0000 Subject: [PATCH] feat(dees-editor-workspace): improve TypeScript IntelliSense, auto-run workspace init commands, and watch node_modules for new packages --- changelog.md | 11 ++ ts_web/00_commitinfo_data.ts | 2 +- .../dees-editor-workspace.ts | 126 ++++++++++++- .../typescript-intellisense.ts | 177 +++++++++++++++--- 4 files changed, 282 insertions(+), 34 deletions(-) diff --git a/changelog.md b/changelog.md index c8286cc..eefc243 100644 --- a/changelog.md +++ b/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 diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts index 1e8abab..e9899bb 100644 --- a/ts_web/00_commitinfo_data.ts +++ b/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.' } diff --git a/ts_web/elements/00group-editor/dees-editor-workspace/dees-editor-workspace.ts b/ts_web/elements/00group-editor/dees-editor-workspace/dees-editor-workspace.ts index 316f0d4..8331708 100644 --- a/ts_web/elements/00group-editor/dees-editor-workspace/dees-editor-workspace.ts +++ b/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(); + +// 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 | 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 { + 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 { 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); } } } diff --git a/ts_web/elements/00group-editor/dees-editor-workspace/typescript-intellisense.ts b/ts_web/elements/00group-editor/dees-editor-workspace/typescript-intellisense.ts index 90a2e18..290a740 100644 --- a/ts_web/elements/00group-editor/dees-editor-workspace/typescript-intellisense.ts +++ b/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 packageJson = JSON.parse( - await this.executionEnvironment.readFile(packageJsonPath) - ); + const packageJsonExists = await this.executionEnvironment.exists(packageJsonPath); + console.log(`[IntelliSense] package.json exists: ${packageJsonExists}`); + + 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}`; - if (await this.executionEnvironment.exists(fullTypesPath)) { - const content = await this.executionEnvironment.readFile(fullTypesPath); - ts.typescriptDefaults.addExtraLib( - content, - `file://${fullTypesPath}` - ); - return true; - } + // Load all .d.ts files from the package, not just the entry point + // Modern packages often have multiple declaration files with imports + await this.loadAllDtsFilesFromPackage(basePath); + 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); - ts.typescriptDefaults.addExtraLib( - content, - `file://${dtsPath}` - ); + console.log(`[IntelliSense] Found types at: ${dtsPath}`); + await this.loadAllDtsFilesFromPackage(basePath); 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 { + /** + * Recursively load all .d.ts files from a package directory + */ + private async loadAllDtsFilesFromPackage(basePath: string): Promise { 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 { + 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 { + 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); - ts.typescriptDefaults.addExtraLib( - content, - `file://${indexPath}` - ); + // Load all .d.ts files from the @types package + await this.loadAllDtsFilesFromPackage(basePath); 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 { + public async processContentChange(content: string, filePath?: string): Promise { 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 { + 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); } }