Refactor version handling and sidebar setup; enhance command execution and caching mechanisms

Author: Stefterv

client/src/extension.ts

@@ -1,15 +1,14 @@
 
 import { ExtensionContext, Terminal } from 'vscode';
 
-import {
-	LanguageClient
-} from 'vscode-languageclient/node';
+import { LanguageClient } from 'vscode-languageclient/node';
 import { setupSelectedVersion } from './setupSelectedVersion';
 import { setupCommands } from './setupCommands';
 import { setupLanguageServer } from './setupLanguageServer';
 import { setupSidebar } from './setupSidebar';
 import { setupDecorators } from './setupDecorators';
 import { setupPDEFiles } from './setupPDEFiles';
+import { EventEmitter } from 'stream';
 
 
 export interface ProcessingVersion {
@@ -21,16 +20,19 @@ export const state = {
 	terminal: undefined as Terminal | undefined,
 	client: undefined as LanguageClient | undefined,
 	selectedVersion: undefined as ProcessingVersion | undefined,
+	onDidVersionChange: new EventEmitter<null>(),
 };
 
 export async function activate(context: ExtensionContext) {
 	// TODO: Detect other Processing extensions and warn the user
+	// TODO: Add a open contribution manager action (Needs Processing integration)
+	// TODO: Add checks for if a required Processing version is met (e.g, this specific feature works with 4.4.6+)
 
-	// TODO: Cache the selected version between sessions
+	// Set up the selected Processing version, awaiting because we don't want to continue until we have a version
 	await setupSelectedVersion(context);
 	setupCommands(context);
 	setupLanguageServer();
-	setupSidebar();
+	setupSidebar(context);
 	setupDecorators(context);
 	setupPDEFiles();
 }

client/src/setupCommands.ts

@@ -1,6 +1,7 @@
-import { dirname } from 'path/posix';
+import { dirname, join } from 'path';
 import { ExtensionContext, commands, Uri, window, workspace } from 'vscode';
 import { state } from './extension';
+import { tmpdir } from 'os';
 
 export function setupCommands(context: ExtensionContext) {
 	const runSketch = commands.registerCommand('processing.sketch.run', (resource: Uri) => {
@@ -59,12 +60,22 @@ export function setupCommands(context: ExtensionContext) {
 		state.terminal.sendText('\x03', false);
 	});
 
-	const openSketch = commands.registerCommand('processing.sketch.open', async (folder) => {
+	const openSketch = commands.registerCommand('processing.sketch.open', async (folder: string, isReadOnly: boolean) => {
 		if (!folder) {
 			window.showErrorMessage("No sketch folder provided.");
 			return;
 		}
-		// TODO: Copy examples/readonly sketches to a temp location and open them there
+		if (isReadOnly) {
+			const path = join(tmpdir(), `processing-sketch-${new Date().getTime()}`, folder.split('/').pop() || 'sketch');
+			try {
+				await workspace.fs.copy(Uri.file(folder), Uri.file(path), { overwrite: true });
+				folder = path;
+			} catch (error) {
+				window.showErrorMessage(`Could not open read-only sketch: ${error instanceof Error ? error.message : error}`);
+				console.error(error);
+				return;
+			}
+		}
 
 		const newWindow = workspace
 			.getConfiguration('processing')

client/src/setupLanguageServer.ts

@@ -4,24 +4,24 @@ import { Executable, LanguageClient } from 'vscode-languageclient/node';
 import { state } from './extension';
 
 export function setupLanguageServer() {
+	// TODO: Listen for version changes and restart the server
+
 	const serverOptions: Executable = {
 		command: state.selectedVersion.path,
 		args: ["lsp"]
 	};
 
-	// Options to control the language client
 	const clientOptions: LanguageClientOptions = {
-		// Register the server for plain text documents
 		documentSelector: [{ scheme: 'file', language: 'Processing' }],
 		synchronize: {
 			// Notify the server about file changes to '.clientrc files contained in the workspace
-			fileEvents: workspace.createFileSystemWatcher('**/.clientrc')
+			fileEvents: workspace.createFileSystemWatcher('**/*.{pde,java}')
 		}
 	};
 
 	// Create the language client and start the client.
 	state.client = new LanguageClient(
-		'languageServerExample',
+		'processingLanguageServer',
 		'Processing Language Server',
 		serverOptions,
 		clientOptions

client/src/setupSelectedVersion.ts

@@ -5,8 +5,24 @@ import { compareVersions } from './compareVersions';
 import { ProcessingVersion, state } from './extension';
 
 export async function setupSelectedVersion(context: ExtensionContext) {
-	// TODO: Rerun this function when the user changes the version in the settings
+	const version = context.globalState.get<string>('processing-version');
+	const path = context.globalState.get<string>('processing-path');
 
+	if (version && path) {
+		state.selectedVersion = { version, path };
+		selectProcessingVersion(context);
+	} else {
+		await selectProcessingVersion(context);
+	}
+	
+	workspace.onDidChangeConfiguration(async (e) => {
+		if (e.affectsConfiguration('processing.version')) {
+			selectProcessingVersion(context);
+		}
+	});
+}
+
+async function selectProcessingVersion(context: ExtensionContext) {
 	const config = workspace.getConfiguration('processing');
 
 	const versions = await fetchProcessingVersions(context);
@@ -55,7 +71,14 @@ export async function setupSelectedVersion(context: ExtensionContext) {
 		return;
 	}
 	state.selectedVersion = selectedVersion;
+	state.onDidVersionChange.emit(null);
+
+	// Set the cache for the next time
+	context.globalState.update('processing-path', selectedVersion.path);
+	context.globalState.update('processing-version', selectedVersion.version);
 }
+
+
 async function fetchProcessingVersions(context: ExtensionContext) {
 	const binaryPath = await getBinaryPathWithPermissions(context);
 

client/src/setupSidebar.ts

@@ -1,6 +1,6 @@
-import { exec, spawn } from 'child_process';
+import { spawn } from 'child_process';
 import { join } from 'path';
-import { Event, EventEmitter, ProviderResult, TreeDataProvider, TreeItem, TreeItemCollapsibleState, window } from 'vscode';
+import { Event, EventEmitter, ExtensionContext, ProviderResult, TreeDataProvider, TreeItem, TreeItemCollapsibleState, window } from 'vscode';
 import { state } from './extension';
 import { existsSync } from 'fs';
 
@@ -21,41 +21,54 @@ export interface Folder {
 	sketches?: Sketch[];
 }
 
-export async function setupSidebar() {
+export async function setupSidebar(context: ExtensionContext) {
 	// TODO: Show welcome screens whilst we are starting Processing
-	// TODO: Open examples as read-only or in a temporary location
-	// TODO: Reload examples and sketchbook when Processing version changes
-	// TODO: Add cache to results to speed up loading
 
-	setupExamples();
-	setupSketchbook();
+	setupSketchTreeView('sketchbook list', 'processingSidebarSketchbookView', context);
+	setupSketchTreeView('contributions examples list', 'processingSidebarExamplesView', context, true);
 }
 
-async function setupExamples() {
-	const examplesProvider = new ProcessingWindowDataProvider('contributions examples list');
-	window.createTreeView('processingSidebarExamplesView', { treeDataProvider: examplesProvider });
-}
-
-async function setupSketchbook() {
-	const sketchbookProvider = new ProcessingWindowDataProvider('sketchbook list');
-	window.createTreeView('processingSidebarSketchbookView', { treeDataProvider: sketchbookProvider });
+function setupSketchTreeView(command: string, viewId: string, context: ExtensionContext, readonly = false) {
+	const provider = new ProcessingWindowDataProvider(command, context, readonly);
+	window.createTreeView(viewId, { treeDataProvider: provider });
 }
 
 
 class ProcessingWindowDataProvider implements TreeDataProvider<FolderTreeItem | SketchTreeItem> {
 	constructor(
-		public readonly command: string
+		public readonly command: string,
+		public readonly context: ExtensionContext,
+		public readonly readonly = false
 	) {
-		this._folders = [];
+		this.cached();
 		this.populate();
+		this.listen();
 	}
-	private _folders: Folder[];
+	private _folders: Folder[] = [];
+
+	private _onDidChangeTreeData: EventEmitter<null> = new EventEmitter<null>();
+	readonly onDidChangeTreeData: Event<null> = this._onDidChangeTreeData.event;
 
-	private _onDidChangeTreeData: EventEmitter<any> = new EventEmitter<any>();
-	readonly onDidChangeTreeData: Event<any> = this._onDidChangeTreeData.event;
+	async listen() {
+		state.onDidVersionChange.on(null, async () => {
+			this.populate();
+		});
+	}
+
+	async cached() {
+		const data = await this.context.globalState.get<string>(`processing-tree-view-${this.command}-cache`);
+		if (data) {
+			try {
+				this._folders = JSON.parse(data) as Folder[];
+			} catch (e) {
+				console.error(`Error parsing cached JSON: ${e}`);
+			}
+		}
+		this._onDidChangeTreeData.fire(null);
+	}
 
 	async populate() {
-		this._folders = await this.grabSketchesWithCommand(this.command);
+		this._folders = await this.grabSketches();
 		this._onDidChangeTreeData.fire(null);
 	}
 
@@ -68,7 +81,7 @@ class ProcessingWindowDataProvider implements TreeDataProvider<FolderTreeItem |
 			return this._folders.map((folder) => new FolderTreeItem(folder)) ?? [];
 		} else {
 			const sketches = element.folder.sketches?.map((sketch) => {
-				return new SketchTreeItem(sketch);
+				return new SketchTreeItem(sketch, this.readonly);
 			}) ?? [];
 			const folders = element.folder.children?.map((folder) => {
 				return new FolderTreeItem(folder);
@@ -82,9 +95,9 @@ class ProcessingWindowDataProvider implements TreeDataProvider<FolderTreeItem |
 		}
 	}
 
-	grabSketchesWithCommand(command: string): Promise<Folder[]> {
+	grabSketches(): Promise<Folder[]> {
 		return new Promise<Folder[]>((resolve) => {
-			const process = spawn(state.selectedVersion.path, command.split(' '));
+			const process = spawn(state.selectedVersion.path, this.command.split(' '));
 			let data = '';
 			process.stdout.on('data', (chunk) => {
 				data += chunk;
@@ -96,7 +109,9 @@ class ProcessingWindowDataProvider implements TreeDataProvider<FolderTreeItem |
 					return;
 				}
 				try {
+					this.context.globalState.update(`processing-tree-view-${this.command}-cache`, data);
 					const folders = JSON.parse(data) as Folder[];
+					
 					resolve(folders);
 				} catch (e) {
 					console.error(`Error parsing JSON: ${e}`);
@@ -119,7 +134,8 @@ class FolderTreeItem extends TreeItem {
 
 class SketchTreeItem extends TreeItem {
 	constructor(
-		public readonly sketch: Sketch
+		public readonly sketch: Sketch,
+		public readonly readonly = false
 	) {
 		const label = sketch.name;
 		super(label, TreeItemCollapsibleState.None);
@@ -128,8 +144,9 @@ class SketchTreeItem extends TreeItem {
 		this.command = {
 			command: 'processing.sketch.open',
 			title: 'Open Sketch',
-			arguments: [this.sketch.path]
+			arguments: [this.sketch.path, this.readonly]
 		};
+		// TODO: add right-click menu to open in new window, open containing folder, etc.
 
 		// TODO: Make showing a preview a toggleable setting
 		const preview = `${sketch.path}/${sketch.name}.png`;