working react in vscode

package.json

@@ -26,8 +26,8 @@
 	"scripts": {
 		"vscode:prepublish": "npm run build",
 		"machine": "node ./out/state/index.js",
-		"build": "npm run compile && npm run build:web",
-		"build:web": "tsc -p web-app/tsconfig.json && cp -R web-app/build/ build/",
+		"build": "npm run compile",
+		"build:web": "tsc -p tsconfig.web.json && cp -R web-app/build/ build/",
 		"compile": "tsc -p ./",
 		"watch": "tsc -watch -p ./",
 		"postinstall": "node ./node_modules/vscode/bin/install",

src/editor/commands/index.ts

@@ -22,9 +22,8 @@ export default (context: vscode.ExtensionContext): void => {
       return start(context)
     },
     [COMMANDS.OPEN_WEBVIEW]: () => {
-      console.log('webview createOrShow')
       ReactPanel.createOrShow(context.extensionPath);
-    }
+    },
     // [COMMANDS.RUN_TEST]: runTest,
     // [COMMANDS.LOAD_SOLUTION]: loadSolution,
     // [COMMANDS.QUIT]: () => quit(context.subscriptions),

src/editor/views/createWebview.ts

@@ -5,6 +5,84 @@ import * as path from 'path'
 import getNonce from './utils/nonce'
 import onReceive from './onReceive'
 
+const webpackScript = `!(function (l) {
+    function e(e) {
+        for (var r, t, n = e[0], o = e[1], u = e[2], f = 0, i = []; f < n.length; f++)
+            (t = n[f]), p[t] && i.push(p[t][0]), (p[t] = 0)
+        for (r in o) Object.prototype.hasOwnProperty.call(o, r) && (l[r] = o[r])
+        for (s && s(e); i.length;) i.shift()()
+        return c.push.apply(c, u || []), a()
+    }
+    function a() {
+        for (var e, r = 0; r < c.length; r++) {
+            for (var t = c[r], n = !0, o = 1; o < t.length; o++) {
+                var u = t[o]
+                0 !== p[u] && (n = !1)
+            }
+            n && (c.splice(r--, 1), (e = f((f.s = t[0]))))
+        }
+        return e
+    }
+    var t = {},
+        p = { 1: 0 },
+        c = []
+    function f(e) {
+        if (t[e]) return t[e].exports
+        var r = (t[e] = { i: e, l: !1, exports: {} })
+        return l[e].call(r.exports, r, r.exports, f), (r.l = !0), r.exports
+    }
+    ; (f.m = l),
+        (f.c = t),
+        (f.d = function (e, r, t) {
+            f.o(e, r) || Object.defineProperty(e, r, { enumerable: !0, get: t })
+        }),
+        (f.r = function (e) {
+            'undefined' != typeof Symbol &&
+                Symbol.toStringTag &&
+                Object.defineProperty(e, Symbol.toStringTag, { value: 'Module' }),
+                Object.defineProperty(e, '__esModule', { value: !0 })
+        }),
+        (f.t = function (r, e) {
+            if ((1 & e && (r = f(r)), 8 & e)) return r
+            if (4 & e && 'object' == typeof r && r && r.__esModule) return r
+            var t = Object.create(null)
+            if (
+                (f.r(t), Object.defineProperty(t, 'default', { enumerable: !0, value: r }), 2 & e && 'string' != typeof r)
+            )
+                for (var n in r)
+                    f.d(
+                        t,
+                        n,
+                        function (e) {
+                            return r[e]
+                        }.bind(null, n),
+                    )
+            return t
+        }),
+        (f.n = function (e) {
+            var r =
+                e && e.__esModule
+                    ? function () {
+                        return e.default
+                    }
+                    : function () {
+                        return e
+                    }
+            return f.d(r, 'a', r), r
+        }),
+        (f.o = function (e, r) {
+            return Object.prototype.hasOwnProperty.call(e, r)
+        }),
+        (f.p = './')
+        console.log('load window.wepbackJsonp')
+    var r = (window.webpackJsonp = window.webpackJsonp || []),
+        n = r.push.bind(r)
+        ; (r.push = e), (r = r.slice())
+    for (var o = 0; o < r.length; o++) e(r[o])
+    var s = n
+    a()
+})([])`
+
 /**
  * Manages React webview panels
  */
@@ -19,7 +97,7 @@ class ReactPanel {
     private _disposables: vscode.Disposable[] = []
 
     public static async createOrShow(extensionPath: string): Promise<void> {
-        const hasActiveEditor = vscode.window.activeTextEditor
+        // const hasActiveEditor = vscode.window.activeTextEditor
 
         // if (!hasActiveEditor) {
         //     throw new Error('Should have an open file on launch')
@@ -29,6 +107,7 @@ class ReactPanel {
         // If we already have a panel, show it.
         // Otherwise, create a new panel.
         if (ReactPanel.currentPanel) {
+            console.log('--- HAS CURRENT PANEL ---')
             ReactPanel.currentPanel._panel.reveal(column)
         } else {
             ReactPanel.currentPanel = new ReactPanel(extensionPath, column)
@@ -89,39 +168,51 @@ class ReactPanel {
     }
 
     private _getHtmlForWebview(): string {
+
         // eslint-disable-next-line
         const manifest = require(path.join(this._extensionPath, 'build', 'asset-manifest.json'))
-        const mainScript = manifest['main.js']
-        const mainStyle = manifest['main.css']
+        const mainScript = manifest.files['main.js']
+        // grab first chunk
+        const chunk = Object.keys(manifest.files).filter(f => f.match(/^static\/js\/.+\.js$/))[0]
+        const chunkScript = manifest.files[chunk]
+        const mainStyle = manifest.files['main.css']
 
         const scriptPathOnDisk = vscode.Uri.file(path.join(this._extensionPath, 'build', mainScript))
         const scriptUri = scriptPathOnDisk.with({ scheme: 'vscode-resource' })
+        const chunkPathOnDisk = vscode.Uri.file(path.join(this._extensionPath, 'build', chunkScript))
+        const chunkUri = chunkPathOnDisk.with({ scheme: 'vscode-resource' })
         const stylePathOnDisk = vscode.Uri.file(path.join(this._extensionPath, 'build', mainStyle))
         const styleUri = stylePathOnDisk.with({ scheme: 'vscode-resource' })
 
         // Use a nonce to whitelist which scripts can be run
         const nonce = getNonce()
+        const nonce2 = getNonce()
+        const nonce3 = getNonce()
 
-        return `<!DOCTYPE html>
+        const output = `<!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>
+                <meta name="theme-color" content="#000000">
+                <title>React App</title>
+                <link rel="manifest" href="./manifest.json" />
 				<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>
+				<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src vscode-resource: https:; script-src 'nonce-${nonce}' 'nonce-${nonce2}' 'nonce-${nonce3}'; 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">Loading...</div>
-
-				<script nonce="${nonce}" src="${scriptUri}"></script>
+                <div id="root">Loading...</div>
+                <script nonce=${nonce}>${webpackScript}</script>
+                <script nonce=${nonce2} src="${chunkUri}"></script>
+                <script nonce="${nonce3}" src="${scriptUri}"></script>
 			</body>
-			</html>`
+            </html>`
+        console.log(output)
+        return output
     }
 }
 

web-app/.env

@@ -0,0 +1 @@
+PUBLIC_URL=./

web-app/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "web-app",
+  "name": "coderoad-app",
   "version": "0.1.0",
   "private": true,
   "dependencies": {

web-app/public/index.html

@@ -1,16 +1,17 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+
+<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">
+  <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+  <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
@@ -19,12 +20,15 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
+  <title>CodeRoad</title>
+</head>
+
+<body>
+  <noscript>
+    You need to enable JavaScript to run this app.
+  </noscript>
+  <div id="root"></div>
+  <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -34,5 +38,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-  </body>
-</html>
+</body>
+
+</html>

web-app/public/manifest.json

@@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "CodeRoad",
+  "name": "CodeRoad",
   "icons": [
     {
       "src": "favicon.ico",

web-app/src/App.tsx

@@ -1,23 +1,11 @@
 import React from 'react';
-import logo from './logo.svg';
 import './App.css';
 
 const App: React.FC = () => {
   return (
     <div className="App">
       <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
+        Hello World
       </header>
     </div>
   );

web-app/src/index.tsx

@@ -3,5 +3,4 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 
-ReactDOM.render(<App />, document.getElementById('root'));
-
+ReactDOM.render(<App />, document.getElementById('root') as HTMLElement)

web-app/tsconfig.json

@@ -3,7 +3,6 @@
     "target": "es5",
     "lib": [
       "dom",
-      "dom.iterable",
       "esnext"
     ],
     "allowJs": true,
@@ -17,9 +16,20 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "preserve"
+    "jsx": "preserve",
+    "sourceMap": true,
+    "rootDir": "src",
+    "baseUrl": "src",
+    "outDir": "build"
   },
   "include": [
     "src"
+  ],
+  "exclude": [
+    "node_modules",
+    "build",
+    "scripts",
+    "jest",
+    "public"
   ]
 }