parse webview from jsdom

Author: ShMcK

.gitignore

@@ -1,6 +1,7 @@
 node_modules
 .vscode-test/
 *.vsix
+.DS_Store
 
 # local
 .env

package-lock.json

@@ -32,6 +32,7 @@
   "dependencies": {
     "@types/mocha": "^5.2.7",
     "dotenv": "^8.1.0",
+    "jsdom": "^15.1.1",
     "vscode": "^1.1.36",
     "xstate": "^4.6.7"
   },
@@ -40,6 +41,7 @@
     "@types/dotenv": "^6.1.1",
     "@types/glob": "^7.1.1",
     "@types/graphql": "^14.5.0",
+    "@types/jsdom": "^12.2.4",
     "@types/node": "^12.7.5",
     "assert": "^2.0.0",
     "concurrently": "^4.1.2",

package.json

@@ -1,7 +1,8 @@
 import {Action} from 'typings'
 import * as path from 'path'
 import * as vscode from 'vscode'
-import Channel from '../Channel'
+import {JSDOM} from 'jsdom'
+import Channel from '../channel'
 
 const getNonce = (): string => {
 	let text = ''
@@ -30,13 +31,14 @@ class ReactWebView {
 	private channel: Channel
 
 	public constructor({extensionPath, workspaceState}: ReactWebViewProps) {
+		console.log(`extPath ${extensionPath}`)
 		this.extensionPath = extensionPath
 
 		// Create and show a new webview panel
 		this.panel = this.createWebviewPanel(vscode.ViewColumn.Two)
 
 		// Set the webview initial html content
-		this.panel.webview.html = this.getHtmlForWebview()
+		this.getHtmlForWebview()
 
 		// Listen for when the panel is disposed
 		// This happens when the user closes the panel or when the panel is closed programmatically
@@ -65,15 +67,15 @@ class ReactWebView {
 
 		// prevents new panels from going on top of coderoad panel
 		vscode.window.onDidChangeActiveTextEditor((textEditor?: vscode.TextEditor) => {
-			console.log('onDidChangeActiveTextEditor')
-			console.log(textEditor)
+			// console.log('onDidChangeActiveTextEditor')
+			// console.log(textEditor)
 			if (!textEditor || textEditor.viewColumn !== vscode.ViewColumn.Two) {
 				updateWindows()
 			}
 		})
 		// // prevents moving coderoad panel on top of left panel
 		vscode.window.onDidChangeVisibleTextEditors((textEditor: vscode.TextEditor[]) => {
-			console.log('onDidChangeVisibleTextEditors')
+			// console.log('onDidChangeVisibleTextEditors')
 			updateWindows()
 		})
 
@@ -97,7 +99,7 @@ class ReactWebView {
 		Promise.all(this.disposables.map((x) => x.dispose()))
 	}
 
-	private createWebviewPanel(column: number): vscode.WebviewPanel {
+	private createWebviewPanel = (column: number): vscode.WebviewPanel => {
 		const viewType = 'CodeRoad'
 		const title = 'CodeRoad'
 		const config = {
@@ -111,62 +113,64 @@ class ReactWebView {
 		return vscode.window.createWebviewPanel(viewType, title, column, config)
 	}
 
-	private getHtmlForWebview(): string {
-		const buildUri = vscode.Uri.file(path.join(this.extensionPath, 'build')).with({scheme: 'vscode-resource'})
+	private getHtmlForWebview = async (): Promise<void> => {
+
+		const dom = await JSDOM.fromFile('./build/index.html')
+
+		const {document} = dom.window
+
+		const base: HTMLBaseElement = document.createElement('base')
+		base.href = vscode.Uri.file(path.join(this.extensionPath, 'build')).with({scheme: 'vscode-resource'}).path
+		document.head.appendChild(base)
 
 		const manifest = require(path.join(this.extensionPath, 'build', 'asset-manifest.json'))
 
-		const getSrc = (manifestName: string): any => {
-			const file = manifest.files[manifestName]
-			const uriPath = vscode.Uri.file(path.join(this.extensionPath, 'build', file))
-			return uriPath.with({scheme: 'vscode-resource'})
+		const nonces: string[] = []
+
+		const scripts: HTMLScriptElement[] = Array.from(document.getElementsByTagName('script'))
+		for (const script of scripts) {
+			const nonce: string = getNonce()
+			nonces.push(nonce)
+			script.nonce = nonce
+			const uriPath = vscode.Uri.file(path.join(this.extensionPath, 'build', script.src))
+			uriPath.with({scheme: 'vscode-resource'})
+		}
+
+		// add run-time script from webpack
+		const runTimeScript = document.createElement('script')
+		runTimeScript.src = manifest.files['runtime-main.js']
+		runTimeScript.nonce = getNonce()
+		nonces.push(runTimeScript.nonce)
+		vscode.Uri.file(path.join(this.extensionPath, 'build', runTimeScript.src)).with({scheme: 'vscode-resource'})
+		document.body.appendChild(runTimeScript)
+
+		const styles: HTMLLinkElement[] = Array.from(document.getElementsByTagName('link'))
+		for (const style of styles) {
+			if (style.href) {
+				const uriPath = vscode.Uri.file(path.join(this.extensionPath, 'build', style.href))
+				uriPath.with({scheme: 'vscode-resource'})
+			}
 		}
 
-		const styles = [
-			'main.css',
-			// get style chunk
-			Object.keys(manifest.files).find(f => f.match(/^static\/css\/.+\.css$/)) || ''
-		].map(style => getSrc(style))
-
-		// map over scripts
-		const scripts = [{
-			file: './webpackBuild.js',
-		}, {
-			manifest: 'runtime~main.js',
-		}, {
-			manifest: 'main.js',
-		}, {
-			// get js chunk
-			manifest: Object.keys(manifest.files).find(f => f.match(/^static\/js\/.+\.js$/)),
-		}].map(script => ({
-			nonce: getNonce(),
-			src: script.manifest ? getSrc(script.manifest) : script.file
-		}))
-
-		const indexHtml = `<!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'>
-						<meta http-equiv='Content-Security-Policy' content="font-src vscode-resource://*; img-src vscode-resource: https:; script-src ${scripts.map(script => `'nonce-${script.nonce}'`).join(' ')}; style-src vscode-resource: 'unsafe-inline' http: https: data:;">
-						<title>React App</title>
-
-						<link rel='manifest' href='./manifest.json' />
-						<link rel='stylesheet' href='https://unpkg.com/@alifd/next/dist/next.css' />
-						${styles.map(styleUri => `<link rel='stylesheet' type='text/css' href='${styleUri}'>`).join('\n')}
-						
-						<base href='${buildUri}/'>
-				</head>
-
-				<body>
-						<noscript>You need to enable JavaScript to run this app.</noscript>
-						<div id='root' style='background-color:white; padding: 1rem;'>Loading...</div>
-						${scripts.map(s => `<script nonce='${s.nonce}' src='${s.src}'></script>`).join('\n')}
-				</body>
-		</html>`
-
-		return indexHtml
+
+		// content security policy
+		const cspMeta: HTMLMetaElement = document.createElement('meta')
+		cspMeta.httpEquiv = 'Content-Security-Policy'
+		cspMeta.content = [
+			`default-src 'none';`,
+			'font-src vscode-resource://*;',
+			'img-src vscode-resource: https:;',
+			`script-src ${nonces.map(nonce => `'nonce-${nonce}'`).join(' ')};`,
+			`style-src 'unsafe-inline' vscode-resource: http: https: data:;`
+		].join(' ')
+		document.head.appendChild(cspMeta)
+
+
+		const html = dom.serialize()
+
+		console.log(html)
+
+		this.panel.webview.html = html
 	}
 
 }

src/editor/ReactWebView.ts

@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "build": "react-scripts build",
-    "postbuild": "cp -R ./build/ ../build/ && cp public/webpackBuild.js ../build/webpackBuild.js",
+    "postbuild": "cp -R ./build/ ../build/",
     "build-storybook": "build-storybook",
     "start": "react-scripts start",
     "storybook": "start-storybook -p 6006",
@@ -37,7 +37,6 @@
     "ramda": "^0.26.1",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
-    "react-scripts": "^3.1.2",
     "reselect": "^4.0.0",
     "typescript": "^3.6.3",
     "xstate": "^4.6.7"
@@ -60,6 +59,7 @@
     "babel-loader": "^8.0.6",
     "babel-plugin-import": "^1.12.1",
     "node-sass": "^4.12.0",
+    "react-scripts": "3.1.2",
     "sass-loader": "^8.0.0",
     "typescript-eslint-parser": "^22.0.0"
   }