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 { reacttree - +
diff --git a/src/webview/components/Navbar.tsx b/src/webview/components/Navbar.tsx index 61890030..5853697e 100644 --- a/src/webview/components/Navbar.tsx +++ b/src/webview/components/Navbar.tsx @@ -17,32 +17,33 @@ interface vscode { declare const vscode: vscode; const Navbar = ({ rootFile }: any) => { - // onChange function that will send a message to the extension when the user selects a file - const fileMessage = (e: any) => { - const filePath = e.target.files[0].path; - // Reset event target value to null so the same file selection causes onChange event to trigger - e.target.value = null; - if (filePath) { - vscode.postMessage({ - type: "onFile", - value: filePath - }); - } - }; + // Listen for messages from the extension + React.useEffect(() => { + window.addEventListener('message', (event) => { + const message = event.data; + if (message.type === 'currentFilePath') { + sendFileMessage(message.value); + } else if (message.type === 'parsed-data') { + console.log('Restoring tree data:', message.value); // Add log + } + }); + }, []); + // onChange function that will send a message to the extension when the user selects a file +function sendFileMessage(filePath: string) { + vscode.postMessage({ + type: 'onFile', + value: filePath, + }); +} console.log('ROOT', rootFile) // Render section return (
- {fileMessage(e);}}/>
- - {/* */} +
);