diff --git a/package.json b/package.json index ee266c34..9de35920 100644 --- a/package.json +++ b/package.json @@ -1,17 +1,17 @@ { - "name": "reactree", - "displayName": "ReacTree", - "description": "React hierarchy tree visualizer and navigation tool", - "version": "1.0.7", + "name": "reactreev2", + "displayName": "ReacTreeV2", + "description": "Fixed - React hierarchy tree visualizer and navigation tool", + "version": "2.0.0", "icon": "icon.png", - "publisher": "ReacTreeDev", + "publisher": "abhi11verma", "preview": false, "engines": { "vscode": "^1.74.3" }, "repository": { "type": "git", - "url": "https://github.com/oslabs-beta/ReacTree/tree/main" + "url": "https://github.com/abhi11verma/ReacTreeV2" }, "categories": [ "Other" diff --git a/src/extension.ts b/src/extension.ts index 2cc6d95a..8be3f9ba 100644 --- a/src/extension.ts +++ b/src/extension.ts @@ -4,10 +4,16 @@ import ReacTreePanel from './panel'; export function activate(extContext: vscode.ExtensionContext) { extContext.subscriptions.push( vscode.commands.registerCommand('reacTree.start', () => { - ReacTreePanel.createOrShow(extContext); + const activeEditor = vscode.window.activeTextEditor; + if (activeEditor) { + const currentFilePath = activeEditor.document.uri.fsPath; + ReacTreePanel.createOrShow(extContext, currentFilePath); + } else { + vscode.window.showInformationMessage('No active editor found.'); + } }) ); - + // Create reacTree status bar button const item = vscode.window.createStatusBarItem( vscode.StatusBarAlignment.Right @@ -15,7 +21,7 @@ export function activate(extContext: vscode.ExtensionContext) { item.command = 'reacTree.start'; item.tooltip = 'Activate ReacTree'; - item.text = '$(type-hierarchy) Start Tree'; + item.text = '$(type-hierarchy) View Tree'; item.show(); } diff --git a/src/panel.ts b/src/panel.ts index 79db819b..3a76bd38 100644 --- a/src/panel.ts +++ b/src/panel.ts @@ -12,8 +12,10 @@ export default class ReacTreePanel { private readonly _extContext: vscode.ExtensionContext; private parser: Parser | undefined; private _disposables: vscode.Disposable[] = []; + private currentFilePath: string; - public static createOrShow(extContext: vscode.ExtensionContext) { + + public static createOrShow(extensionContext: vscode.ExtensionContext, filePath: string) { const column = vscode.window.activeTextEditor ? vscode.window.activeTextEditor.viewColumn : undefined; @@ -25,18 +27,22 @@ export default class ReacTreePanel { } else { // ReactPanel.currentPanel = new ReactPanel(extensionPath, column || vscode.ViewColumn.One); ReacTreePanel.currentPanel = new ReacTreePanel( - extContext, - vscode.ViewColumn.Two + extensionContext, + vscode.ViewColumn.Two, + filePath ); } } private constructor( extContext: vscode.ExtensionContext, - column: vscode.ViewColumn + column: vscode.ViewColumn, + filePath: string ) { this._extContext = extContext; this._extensionUri = extContext.extensionUri; + this.currentFilePath = filePath; + // Not added - state preserver** // Create and show a new webview panel @@ -63,10 +69,17 @@ export default class ReacTreePanel { // This happens when the user closes the panel or when the panel is closed programatically this._panel.onDidDispose(() => this.dispose(), null, this._disposables); + // Send the current file path to the webview + this._panel.webview.postMessage({ + type: 'currentFilePath', + value: this.currentFilePath + }); + // Handle messages from the webview this._panel.webview.onDidReceiveMessage( async (msg: any) => { switch (msg.type) { + // TODO : Removed manual file selection support and repurposed the existing tree generation functionality case 'onFile': if (!msg.value) break; //if doesnt work change to return this.parser = new Parser(msg.value); @@ -117,10 +130,11 @@ export default class ReacTreePanel { vscode.Uri.joinPath(this._extensionUri, 'out', 'main.wv.js') ); - const styleUri = webview.asWebviewUri( - vscode.Uri.joinPath(this._extensionUri, 'media', 'styles.css') - ); - + // TODO: Fix this later for customizing the view + // const styleUri = webview.asWebviewUri( + // vscode.Uri.joinPath(this._extensionUri, 'media', 'styles.css') + // ); + // // Use a nonce to whitelist which scripts can be run const nonce = getNonce(); @@ -130,7 +144,7 @@ export default class ReacTreePanel {