-
Notifications
You must be signed in to change notification settings - Fork 33
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
This is a new feature: - you can now choose in settings to mount your Preview to activity bar instead of opening it in a tab. - when you change settings, current preview is going to be disposed <img width="535" alt="Screenshot 2024-03-18 at 21 49 03" src="https://github.com/software-mansion-labs/react-native-sztudio/assets/159789821/abef7f75-8ae7-4d97-827a-6b962a53dbda"> <img width="728" alt="Screenshot 2024-03-18 at 21 49 58" src="https://github.com/software-mansion-labs/react-native-sztudio/assets/159789821/803684dd-6163-4920-a1f1-8123debb9309"> --------- Co-authored-by: Filip Andrzej Kaminski <[email protected]>
- Loading branch information
1 parent
caa8b3d
commit c03ef64
Showing
6 changed files
with
263 additions
and
130 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
63 changes: 63 additions & 0 deletions
63
packages/vscode-extension/src/panels/SidepanelViewProvider.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,63 @@ | ||
| import { ExtensionContext, Uri, WebviewView, WebviewViewProvider, commands } from "vscode"; | ||
| import { generateWebviewContent } from "./webviewContentGenerator"; | ||
| import { extensionContext } from "../utilities/extensionContext"; | ||
| import { WebviewController } from "./WebviewController"; | ||
| import { Logger } from "../Logger"; | ||
|
|
||
| export class SidepanelViewProvider implements WebviewViewProvider { | ||
| public static readonly viewType = "ReactNativeIDE.view"; | ||
| public static currentProvider: SidepanelViewProvider | undefined; | ||
| private _view: any = null; | ||
| private webviewController: any = null; | ||
|
|
||
| constructor(private readonly context: ExtensionContext) { | ||
| SidepanelViewProvider.currentProvider = this; | ||
| } | ||
|
|
||
| refresh(): void { | ||
| this._view.webview.html = generateWebviewContent( | ||
| this.context, | ||
| this._view.webview, | ||
| this.context.extensionUri | ||
| ); | ||
| } | ||
|
|
||
| public static showView(context: ExtensionContext, fileName?: string, lineNumber?: number) { | ||
| if (SidepanelViewProvider.currentProvider) { | ||
| commands.executeCommand(`${SidepanelViewProvider.viewType}.focus`); | ||
| } else { | ||
| Logger.error("SidepanelViewProvider does not exist."); | ||
| return; | ||
| } | ||
|
|
||
| if (fileName !== undefined && lineNumber !== undefined) { | ||
| SidepanelViewProvider.currentProvider.webviewController.project.startPreview( | ||
| `preview:/${fileName}:${lineNumber}` | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| //called when a view first becomes visible | ||
| resolveWebviewView(webviewView: WebviewView): void | Thenable<void> { | ||
| webviewView.webview.options = { | ||
| enableScripts: true, | ||
| localResourceRoots: [ | ||
| Uri.joinPath(this.context.extensionUri, "dist"), | ||
| Uri.joinPath(this.context.extensionUri, "node_modules"), | ||
| ], | ||
| }; | ||
| webviewView.webview.html = generateWebviewContent( | ||
| this.context, | ||
| webviewView.webview, | ||
| this.context.extensionUri | ||
| ); | ||
| this._view = webviewView; | ||
| this.webviewController = new WebviewController(this._view.webview); | ||
| // Set an event listener to listen for when the webview is disposed (i.e. when the user changes | ||
| // settings or hiddes conteiner view by hand, https://code.visualstudio.com/api/references/vscode-api#WebviewView) | ||
| webviewView.onDidDispose(() => { | ||
| this.webviewController?.dispose(); | ||
| }); | ||
| commands.executeCommand("setContext", "RNIDE.previewsViewIsOpen", true); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,82 @@ | ||
| import { WebviewPanel, window, Uri, ViewColumn, ExtensionContext, commands } from "vscode"; | ||
|
|
||
| import { extensionContext } from "../utilities/extensionContext"; | ||
| import { generateWebviewContent } from "./webviewContentGenerator"; | ||
| import { WebviewController } from "./WebviewController"; | ||
|
|
||
| const OPEN_PANEL_ON_ACTIVATION = "open_panel_on_activation"; | ||
|
|
||
| export class Tabpanel { | ||
| public static currentPanel: Tabpanel | undefined; | ||
| private readonly _panel: WebviewPanel; | ||
| private webviewController: WebviewController; | ||
|
|
||
| private constructor(panel: WebviewPanel) { | ||
| this._panel = panel; | ||
|
|
||
| // Set an event listener to listen for when the panel is disposed (i.e. when the user closes | ||
| // the panel or when the panel is closed programmatically) | ||
| this._panel.onDidDispose(() => this.dispose()); | ||
|
|
||
| // Set the HTML content for the webview panel | ||
| this._panel.webview.html = generateWebviewContent( | ||
| extensionContext, | ||
| this._panel.webview, | ||
| extensionContext.extensionUri | ||
| ); | ||
|
|
||
| this.webviewController = new WebviewController(this._panel.webview); | ||
| } | ||
|
|
||
| public static render(context: ExtensionContext, fileName?: string, lineNumber?: number) { | ||
| if (Tabpanel.currentPanel) { | ||
| // If the webview panel already exists reveal it | ||
| Tabpanel.currentPanel._panel.reveal(ViewColumn.Beside); | ||
| } else { | ||
| // If a webview panel does not already exist create and show a new one | ||
|
|
||
| // If there is an empty group in the editor, we will open the panel there: | ||
| const emptyGroup = window.tabGroups.all.find((group) => group.tabs.length === 0); | ||
|
|
||
| const panel = window.createWebviewPanel( | ||
| "react-native-ide-panel", | ||
| "React Native IDE", | ||
| { viewColumn: emptyGroup?.viewColumn || ViewColumn.Beside }, | ||
| { | ||
| enableScripts: true, | ||
| localResourceRoots: [ | ||
| Uri.joinPath(context.extensionUri, "dist"), | ||
| Uri.joinPath(context.extensionUri, "node_modules"), | ||
| ], | ||
| retainContextWhenHidden: true, | ||
| } | ||
| ); | ||
| Tabpanel.currentPanel = new Tabpanel(panel); | ||
| context.workspaceState.update(OPEN_PANEL_ON_ACTIVATION, true); | ||
|
|
||
| commands.executeCommand("workbench.action.lockEditorGroup"); | ||
| commands.executeCommand("setContext", "RNIDE.panelIsOpen", true); | ||
| } | ||
|
|
||
| if (fileName !== undefined && lineNumber !== undefined) { | ||
| Tabpanel.currentPanel.webviewController.project.startPreview( | ||
| `preview:/${fileName}:${lineNumber}` | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| public dispose() { | ||
| commands.executeCommand("setContext", "RNIDE.panelIsOpen", false); | ||
| // this is triggered when the user closes the webview panel by hand, we want to reset open_panel_on_activation | ||
| // key in this case to prevent extension from automatically opening the panel next time they open the editor | ||
| extensionContext.workspaceState.update(OPEN_PANEL_ON_ACTIVATION, undefined); | ||
|
|
||
| Tabpanel.currentPanel = undefined; | ||
|
|
||
| // Dispose of the current webview panel | ||
| this._panel.dispose(); | ||
|
|
||
| //dispose of current webwiew dependencies | ||
| this.webviewController.dispose(); | ||
| } | ||
| } |
Oops, something went wrong.