Jun 8, 2019 · May 27, 2019 · Jun 2, 2019 · Jun 2, 2019 · Jun 2, 2019 · Jun 2, 2019
diff --git a/src/editor/views/createWebview.ts b/src/editor/views/createWebview.ts
 import*asvscodefrom'vscode'
 import*asCRfrom'typings'
 import*aspathfrom'path'

 importgetNoncefrom'./utils/nonce'
 importonReceivefrom'./onReceive'

 /**
 * Manages React webview panels
 */
 classReactPanel{
 /**
     * Track the currently panel. Only allow a single panel to exist at a time.
     */
 publicstaticcurrentPanel:ReactPanel|undefined=undefined

 privatereadonly_panel:vscode.WebviewPanel
 privatereadonly_extensionPath:string
 private_disposables:vscode.Disposable[]=[]

 publicstaticasynccreateOrShow(extensionPath:string):Promise<void>{
 consthasActiveEditor=vscode.window.activeTextEditor

 if(!hasActiveEditor){
 thrownewError('Should have an open file on launch')
 }
 constcolumn=vscode.ViewColumn.Two

 // If we already have a panel, show it.
 // Otherwise, create a new panel.
 if(ReactPanel.currentPanel){
 ReactPanel.currentPanel._panel.reveal(column)
 }else{
 ReactPanel.currentPanel=newReactPanel(extensionPath,column)
 }
 }

 privateconstructor(extensionPath:string,column:vscode.ViewColumn){
 this._extensionPath=extensionPath

 constviewType='CodeRoad'
 consttitle='CodeRoad'
 constconfig={
 // Enable javascript in the webview
 enableScripts:true,

 // And restric the webview to only loading content from our extension's `media` directory.
 localResourceRoots:[vscode.Uri.file(path.join(this._extensionPath,'build'))],

 // prevents destroying the window when it is in the background
 retainContextWhenHidden:true,
 }

 // Create and show a new webview panel
 this._panel=vscode.window.createWebviewPanel(viewType,title,column,config)

 // Set the webview's initial html content
 this._panel.webview.html=this._getHtmlForWebview()

 // Listen for when the panel is disposed
 // This happens when the user closes the panel or when the panel is closed programatically
 this._panel.onDidDispose(()=>this.dispose(),null,this._disposables)

 // Handle messages from the webview
 this._panel.webview.onDidReceiveMessage(onReceive,null,this._disposables)
 }

 publicasyncpostMessage(action:CR.Action):Promise<void>{
 // Send a message to the webview webview.
 // You can send any JSON serializable data.
 constsuccess=awaitthis._panel.webview.postMessage(action)
 if(!success){
 thrownewError(`Message post failure:${JSON.stringify(action)}`)
 }
 }

 publicdispose():void{
 ReactPanel.currentPanel=undefined

 // Clean up our resources
 this._panel.dispose()

 while(this._disposables.length){
 constx=this._disposables.pop()
 if(x){
 x.dispose()
 }
 }
 }

 private_getHtmlForWebview():string{
 // eslint-disable-next-line
 constmanifest=require(path.join(this._extensionPath,'build','asset-manifest.json'))
 constmainScript=manifest['main.js']
 constmainStyle=manifest['main.css']

 constscriptPathOnDisk=vscode.Uri.file(path.join(this._extensionPath,'build',mainScript))
 constscriptUri=scriptPathOnDisk.with({scheme:'vscode-resource'})
 conststylePathOnDisk=vscode.Uri.file(path.join(this._extensionPath,'build',mainStyle))
 conststyleUri=stylePathOnDisk.with({scheme:'vscode-resource'})

 // Use a nonce to whitelist which scripts can be run
 constnonce=getNonce()

 return`<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
 <meta name="theme-color" content="#000000">
 <title>React App</title>
 <link rel="stylesheet" type="text/css" href="${styleUri}">
 <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:;">
        <base href="${vscode.Uri.file(path.join(this._extensionPath,'build')).with({scheme:'vscode-resource'})}/">
        <style></style>
 </head>

 <body>
 <noscript>You need to enable JavaScript to run this app.</noscript>
 <div id="root"></div>

 <script nonce="${nonce}" src="${scriptUri}"></script>
 </body>
 </html>`
 }
 }

 exportdefaultReactPanel
diff --git a/src/editor/views/onReceive.ts b/src/editor/views/onReceive.ts
 import*asCRfrom'typings'

 exportdefaultasync(action:CR.Action):Promise<void>=>{
 console.log('action',action)
 // TODO: call state machine
 }
diff --git a/src/editor/utils/nonce.ts → src/editor/views/utils/nonce.ts b/src/editor/utils/nonce.ts → src/editor/views/utils/nonce.ts
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,128 @@
		import*asvscodefrom'vscode'
		import*asCRfrom'typings'
		import*aspathfrom'path'

		importgetNoncefrom'./utils/nonce'
		importonReceivefrom'./onReceive'

		/**
		* Manages React webview panels
		*/
		classReactPanel{
		/**
		* Track the currently panel. Only allow a single panel to exist at a time.
		*/
		publicstaticcurrentPanel:ReactPanel\|undefined=undefined

		privatereadonly_panel:vscode.WebviewPanel
		privatereadonly_extensionPath:string
		private_disposables:vscode.Disposable[]=[]

		publicstaticasynccreateOrShow(extensionPath:string):Promise<void>{
		consthasActiveEditor=vscode.window.activeTextEditor

		if(!hasActiveEditor){
		thrownewError('Should have an open file on launch')
		}
		constcolumn=vscode.ViewColumn.Two

		// If we already have a panel, show it.
		// Otherwise, create a new panel.
		if(ReactPanel.currentPanel){
		ReactPanel.currentPanel._panel.reveal(column)
		}else{
		ReactPanel.currentPanel=newReactPanel(extensionPath,column)
		}
		}

		privateconstructor(extensionPath:string,column:vscode.ViewColumn){
		this._extensionPath=extensionPath

		constviewType='CodeRoad'
		consttitle='CodeRoad'
		constconfig={
		// Enable javascript in the webview
		enableScripts:true,

		// And restric the webview to only loading content from our extension's `media` directory.
		localResourceRoots:[vscode.Uri.file(path.join(this._extensionPath,'build'))],

		// prevents destroying the window when it is in the background
		retainContextWhenHidden:true,
		}

		// Create and show a new webview panel
		this._panel=vscode.window.createWebviewPanel(viewType,title,column,config)

		// Set the webview's initial html content
		this._panel.webview.html=this._getHtmlForWebview()

		// Listen for when the panel is disposed
		// This happens when the user closes the panel or when the panel is closed programatically
		this._panel.onDidDispose(()=>this.dispose(),null,this._disposables)

		// Handle messages from the webview
		this._panel.webview.onDidReceiveMessage(onReceive,null,this._disposables)
		}

		publicasyncpostMessage(action:CR.Action):Promise<void>{
		// Send a message to the webview webview.
		// You can send any JSON serializable data.
		constsuccess=awaitthis._panel.webview.postMessage(action)
		if(!success){
		thrownewError(`Message post failure:${JSON.stringify(action)}`)
		}
		}

		publicdispose():void{
		ReactPanel.currentPanel=undefined

		// Clean up our resources
		this._panel.dispose()

		while(this._disposables.length){
		constx=this._disposables.pop()
		if(x){
		x.dispose()
		}
		}
		}

		private_getHtmlForWebview():string{
		// eslint-disable-next-line
		constmanifest=require(path.join(this._extensionPath,'build','asset-manifest.json'))
		constmainScript=manifest['main.js']
		constmainStyle=manifest['main.css']

		constscriptPathOnDisk=vscode.Uri.file(path.join(this._extensionPath,'build',mainScript))
		constscriptUri=scriptPathOnDisk.with({scheme:'vscode-resource'})
		conststylePathOnDisk=vscode.Uri.file(path.join(this._extensionPath,'build',mainStyle))
		conststyleUri=stylePathOnDisk.with({scheme:'vscode-resource'})

		// Use a nonce to whitelist which scripts can be run
		constnonce=getNonce()

		return`<!DOCTYPE html>
		<html lang="en">
		<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
		<meta name="theme-color" content="#000000">
		<title>React App</title>
		<link rel="stylesheet" type="text/css" href="${styleUri}">
		<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:;">
		<base href="${vscode.Uri.file(path.join(this._extensionPath,'build')).with({scheme:'vscode-resource'})}/">
		<style></style>
		</head>

		<body>
		<noscript>You need to enable JavaScript to run this app.</noscript>
		<div id="root"></div>

		<script nonce="${nonce}" src="${scriptUri}"></script>
		</body>
		</html>`
		}
		}

		exportdefaultReactPanel
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,6 @@
		import*asCRfrom'typings'

		exportdefaultasync(action:CR.Action):Promise<void>=>{
		console.log('action',action)
		// TODO: call state machine
		}