design.estate/dees-catalog
3
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Jürgen Kunz
2025-12-31 09:47:38 +00:00
parent e4bdde1373
commit 77df2743c5
4 changed files with 282 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ts_web/00_commitinfo_data.ts
View File

@@ -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.'
}

126
ts_web/elements/00group-editor/dees-editor-workspace/dees-editor-workspace.ts
View File

@@ -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);
}
}
}

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

@@ -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<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);
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<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);
}
}