|
| 1 | +import*asvscodefrom'vscode' |
| 2 | +import*asCRfrom'typings' |
| 3 | +import*aspathfrom'path' |
| 4 | + |
| 5 | +importgetNoncefrom'./utils/nonce' |
| 6 | +importonReceivefrom'./onReceive' |
| 7 | + |
| 8 | +/** |
| 9 | + * Manages React webview panels |
| 10 | + */ |
| 11 | +classReactPanel{ |
| 12 | +/** |
| 13 | + * Track the currently panel. Only allow a single panel to exist at a time. |
| 14 | + */ |
| 15 | +publicstaticcurrentPanel:ReactPanel|undefined=undefined |
| 16 | + |
| 17 | +privatereadonly_panel:vscode.WebviewPanel |
| 18 | +privatereadonly_extensionPath:string |
| 19 | +private_disposables:vscode.Disposable[]=[] |
| 20 | + |
| 21 | +publicstaticasynccreateOrShow(extensionPath:string):Promise<void>{ |
| 22 | +consthasActiveEditor=vscode.window.activeTextEditor |
| 23 | + |
| 24 | +if(!hasActiveEditor){ |
| 25 | +thrownewError('Should have an open file on launch') |
| 26 | +} |
| 27 | +constcolumn=vscode.ViewColumn.Two |
| 28 | + |
| 29 | +// If we already have a panel, show it. |
| 30 | +// Otherwise, create a new panel. |
| 31 | +if(ReactPanel.currentPanel){ |
| 32 | +ReactPanel.currentPanel._panel.reveal(column) |
| 33 | +}else{ |
| 34 | +ReactPanel.currentPanel=newReactPanel(extensionPath,column) |
| 35 | +} |
| 36 | +} |
| 37 | + |
| 38 | +privateconstructor(extensionPath:string,column:vscode.ViewColumn){ |
| 39 | +this._extensionPath=extensionPath |
| 40 | + |
| 41 | +constviewType='CodeRoad' |
| 42 | +consttitle='CodeRoad' |
| 43 | +constconfig={ |
| 44 | +// Enable javascript in the webview |
| 45 | +enableScripts:true, |
| 46 | + |
| 47 | +// And restric the webview to only loading content from our extension's `media` directory. |
| 48 | +localResourceRoots:[vscode.Uri.file(path.join(this._extensionPath,'build'))], |
| 49 | + |
| 50 | +// prevents destroying the window when it is in the background |
| 51 | +retainContextWhenHidden:true, |
| 52 | +} |
| 53 | + |
| 54 | +// Create and show a new webview panel |
| 55 | +this._panel=vscode.window.createWebviewPanel(viewType,title,column,config) |
| 56 | + |
| 57 | +// Set the webview's initial html content |
| 58 | +this._panel.webview.html=this._getHtmlForWebview() |
| 59 | + |
| 60 | +// Listen for when the panel is disposed |
| 61 | +// This happens when the user closes the panel or when the panel is closed programatically |
| 62 | +this._panel.onDidDispose(()=>this.dispose(),null,this._disposables) |
| 63 | + |
| 64 | +// Handle messages from the webview |
| 65 | +this._panel.webview.onDidReceiveMessage(onReceive,null,this._disposables) |
| 66 | +} |
| 67 | + |
| 68 | +publicasyncpostMessage(action:CR.Action):Promise<void>{ |
| 69 | +// Send a message to the webview webview. |
| 70 | +// You can send any JSON serializable data. |
| 71 | +constsuccess=awaitthis._panel.webview.postMessage(action) |
| 72 | +if(!success){ |
| 73 | +thrownewError(`Message post failure:${JSON.stringify(action)}`) |
| 74 | +} |
| 75 | +} |
| 76 | + |
| 77 | +publicdispose():void{ |
| 78 | +ReactPanel.currentPanel=undefined |
| 79 | + |
| 80 | +// Clean up our resources |
| 81 | +this._panel.dispose() |
| 82 | + |
| 83 | +while(this._disposables.length){ |
| 84 | +constx=this._disposables.pop() |
| 85 | +if(x){ |
| 86 | +x.dispose() |
| 87 | +} |
| 88 | +} |
| 89 | +} |
| 90 | + |
| 91 | +private_getHtmlForWebview():string{ |
| 92 | +// eslint-disable-next-line |
| 93 | +constmanifest=require(path.join(this._extensionPath,'build','asset-manifest.json')) |
| 94 | +constmainScript=manifest['main.js'] |
| 95 | +constmainStyle=manifest['main.css'] |
| 96 | + |
| 97 | +constscriptPathOnDisk=vscode.Uri.file(path.join(this._extensionPath,'build',mainScript)) |
| 98 | +constscriptUri=scriptPathOnDisk.with({scheme:'vscode-resource'}) |
| 99 | +conststylePathOnDisk=vscode.Uri.file(path.join(this._extensionPath,'build',mainStyle)) |
| 100 | +conststyleUri=stylePathOnDisk.with({scheme:'vscode-resource'}) |
| 101 | + |
| 102 | +// Use a nonce to whitelist which scripts can be run |
| 103 | +constnonce=getNonce() |
| 104 | + |
| 105 | +return`<!DOCTYPE html> |
| 106 | +<html lang="en"> |
| 107 | +<head> |
| 108 | +<meta charset="utf-8"> |
| 109 | +<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"> |
| 110 | +<meta name="theme-color" content="#000000"> |
| 111 | +<title>React App</title> |
| 112 | +<link rel="stylesheet" type="text/css" href="${styleUri}"> |
| 113 | +<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src vscode-resource: https:; script-src 'nonce-${nonce}';style-src vscode-resource: 'unsafe-inline' http: https: data:;"> |
| 114 | + <base href="${vscode.Uri.file(path.join(this._extensionPath,'build')).with({scheme:'vscode-resource'})}/"> |
| 115 | + <style></style> |
| 116 | +</head> |
| 117 | +
|
| 118 | +<body> |
| 119 | +<noscript>You need to enable JavaScript to run this app.</noscript> |
| 120 | +<div id="root"></div> |
| 121 | +
|
| 122 | +<script nonce="${nonce}" src="${scriptUri}"></script> |
| 123 | +</body> |
| 124 | +</html>` |
| 125 | +} |
| 126 | +} |
| 127 | + |
| 128 | +exportdefaultReactPanel |