'use strict' ; import * as vscode from 'vscode' ; import * as path from 'path' ; import * as fs from 'fs' ; import { ExtensionUtil } from '../util/ExtensionUtil' ; import { View } from './View' ; const manifest = require ( 'ibm-blockchain-platform-ui/build/asset-manifest.json' ) ; export abstract class ReactView extends View { protected panelTitle : string ; protected panelID : string ; private readonly _extensionPath : string ; constructor ( context , panelID , panelTitle ) { super ( context , panelID , panelTitle ) ; this . _extensionPath = path . join ( ExtensionUtil . getExtensionPath ( ) , 'node_modules' , 'ibm-blockchain-platform-ui' ) ; } async getHTMLString ( webview ) { const mainScript = manifest . files [ 'main.js' ] ; const mainStyle = manifest . files [ 'main.css' ] ; const scriptPathOnDisk = vscode . Uri . file ( path . join ( this . _extensionPath , 'build' , mainScript ) ) ; const scriptContents = fs . readFileSync ( scriptPathOnDisk . fsPath ) ; const stylePathOnDisk = vscode . Uri . file ( path . join ( this . _extensionPath , 'build' , mainStyle ) ) ; const styleContents = fs . readFileSync ( stylePathOnDisk . fsPath ) ; const actualExtensionPath = ExtensionUtil . getExtensionPath ( ) ; return `<!DOCTYPE html>
                  <html lang="en">
                  <head>
                      <meta charset="utf-8">
                      <meta
                        http-equiv="Content-Security-Policy"
                        content="img-src ${ webview . cspSource } https:; style-src ${ webview . cspSource } 'unsafe-inline' http: https: data:;"
                      />
                      <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">

                      <title>React</title>
                      <style>${ styleContents . toString ( ) }</style>
                      <base href="${ webview . asWebviewUri ( vscode . Uri . file ( path . join ( actualExtensionPath , 'build' ) ) ) }/">
              <script>
                const vscode = acquireVsCodeApi();
              </script>
              </head>
              <body class="vscode-dark">
              <noscript>You need to enable JavaScript to run this app.</noscript>
              <div id="root"></div>
              <script>${ scriptContents . toString ( ) }</script>

                  </body>
                  </html>` ; } protected async abstract openPanelInner ( panel ) ; protected abstract loadComponent ( panel ) ; }