Jun 8, 2019 · May 27, 2019 · Jun 2, 2019 · Jun 2, 2019 · Jun 2, 2019 · Jun 2, 2019
diff --git a/package.json b/package.json
 "scripts": {
 "vscode:prepublish": "npm run build",
 "machine": "node ./out/state/index.js",
 "build": "npm run compile && npm run build:web",
 "build:web": "tsc -pweb-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",
diff --git a/src/editor/commands/index.ts b/src/editor/commands/index.ts
      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),
diff --git a/src/editor/views/createWebview.ts b/src/editor/views/createWebview.ts
 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
 */
    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')
        // 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)
    }

    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
    }
 }

diff --git a/web-app/.env b/web-app/.env
 PUBLIC_URL=./
diff --git a/web-app/package.json b/web-app/package.json
 {
  "name": "web-app",
  "name": "coderoad-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
diff --git a/web-app/public/index.html b/web-app/public/index.html
 <!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 isinstalled 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 isadded 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.
      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.

      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>
diff --git a/web-app/public/manifest.json b/web-app/public/manifest.json
 {
  "short_name": "React App",
  "name": "Create React App Sample",
  "short_name": "CodeRoad",
  "name": "CodeRoad",
  "icons": [
    {
      "src": "favicon.ico",
diff --git a/web-app/src/App.tsx b/web-app/src/App.tsx
 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>
  );
diff --git a/web-app/src/index.tsx b/web-app/src/index.tsx
 import './index.css';
 import App from './App';

 ReactDOM.render(<App />, document.getElementById('root'));

 ReactDOM.render(<App />, document.getElementById('root') as HTMLElement)
diff --git a/web-app/tsconfig.json b/web-app/tsconfig.json
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "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"
  ]
 }
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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 -pweb-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",
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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),
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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
		*/
Expand All		@@ -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')
Expand All		@@ -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)
Expand DownExpand Up		@@ -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
		}
		}

Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,5 +1,5 @@
		{
		"name": "web-app",
		"name": "coderoad-app",
		"version": "0.1.0",
		"private": true,
		"dependencies": {
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -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 isinstalled 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 isadded 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.
Expand All		@@ -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.

Expand All		@@ -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>
Original file line number	Diff line number	Diff line change
		@@ -1,6 +1,6 @@
		{
		"short_name": "React App",
		"name": "Create React App Sample",
		"short_name": "CodeRoad",
		"name": "CodeRoad",
		"icons": [
		{
		"src": "favicon.ico",
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -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>
		);
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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)
Original file line number	Diff line number	Diff line change
Expand Up		@@ -3,7 +3,6 @@
		"target": "es5",
		"lib": [
		"dom",
		"dom.iterable",
		"esnext"
		],
		"allowJs": true,
Expand All		@@ -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"
		]
		}