Extension code.

.vscode/launch.json

@@ -0,0 +1,18 @@
+// A launch configuration that compiles the extension and then opens it inside a new window
+{
+    "version": "0.1.0",
+    "configurations": [
+        {
+            "name": "Launch Extension",
+            "type": "extensionHost",
+            "request": "launch",
+            "runtimeExecutable": "${execPath}",
+            "args": [
+                "--extensionDevelopmentPath=${workspaceRoot}"
+            ],
+            "stopOnEntry": false,
+            "sourceMaps": true,
+            "outDir": "${workspaceRoot}/ext-src"
+        }
+    ]
+}

ext-src/extension.ts

@@ -0,0 +1,177 @@
+import * as path from 'path';
+import * as vscode from 'vscode';
+
+const cats = {
+    'Coding Cat': 'https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.gif',
+    'Compiling Cat': 'https://media.giphy.com/media/mlvseq9yvZhba/giphy.gif',
+    'Testing Cat': 'https://media.giphy.com/media/3oriO0OEd9QIDdllqo/giphy.gif'
+};
+
+export function activate(context: vscode.ExtensionContext) {
+
+    context.subscriptions.push(vscode.commands.registerCommand('catCoding.start', () => {
+        CatCodingPanel.createOrShow(context.extensionPath);
+    }));
+
+    context.subscriptions.push(vscode.commands.registerCommand('catCoding.doRefactor', () => {
+        if (CatCodingPanel.currentPanel) {
+            CatCodingPanel.currentPanel.doRefactor();
+        }
+    }));
+}
+
+/**
+ * Manages cat coding webview panels
+ */
+class CatCodingPanel {
+    /**
+     * Track the currently panel. Only allow a single panel to exist at a time.
+     */
+    public static currentPanel: CatCodingPanel | undefined;
+
+    private static readonly viewType = 'catCoding';
+
+    private readonly _panel: vscode.WebviewPanel;
+    private readonly _extensionPath: string;
+    private _disposables: vscode.Disposable[] = [];
+
+    public static createOrShow(extensionPath: string) {
+        const column = vscode.window.activeTextEditor ? vscode.window.activeTextEditor.viewColumn : undefined;
+
+        // If we already have a panel, show it.
+        // Otherwise, create a new panel.
+        if (CatCodingPanel.currentPanel) {
+            CatCodingPanel.currentPanel._panel.reveal(column);
+        } else {
+            CatCodingPanel.currentPanel = new CatCodingPanel(extensionPath, column || vscode.ViewColumn.One);
+        }
+    }
+
+    private constructor(extensionPath: string, column: vscode.ViewColumn) {
+        this._extensionPath = extensionPath;
+
+        // Create and show a new webview panel
+        this._panel = vscode.window.createWebviewPanel(CatCodingPanel.viewType, "Cat Coding", column, {
+            // 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, 'media')),
+				vscode.Uri.file(path.join(this._extensionPath, 'build'))
+            ]
+        });
+
+        // Set the webview's initial html content 
+        this._update();
+
+        // 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);
+
+        // Update the content based on view changes
+        this._panel.onDidChangeViewState(e => {
+            if (this._panel.visible) {
+                this._update()
+            }
+        }, null, this._disposables);
+
+        // Handle messages from the webview
+        this._panel.webview.onDidReceiveMessage(message => {
+            switch (message.command) {
+                case 'alert':
+                    vscode.window.showErrorMessage(message.text);
+                    return;
+            }
+        }, null, this._disposables);
+    }
+
+    public doRefactor() {
+        // Send a message to the webview webview.
+        // You can send any JSON serializable data.
+        this._panel.webview.postMessage({ command: 'refactor' });
+    }
+
+    public dispose() {
+        CatCodingPanel.currentPanel = undefined;
+
+        // Clean up our resources
+        this._panel.dispose();
+
+        while (this._disposables.length) {
+            const x = this._disposables.pop();
+            if (x) {
+                x.dispose();
+            }
+        }
+    }
+
+    private _update() {
+        // Vary the webview's content based on where it is located in the editor.
+        switch (this._panel.viewColumn) {
+            case vscode.ViewColumn.Two:
+                this._updateForCat('Compiling Cat');
+                return;
+
+            case vscode.ViewColumn.Three:
+                this._updateForCat('Testing Cat');
+                return;
+
+            case vscode.ViewColumn.One:
+            default:
+                this._updateForCat('Coding Cat');
+                return;
+        }
+    }
+
+    private _updateForCat(catName: keyof typeof cats) {
+        this._panel.title = catName;
+        this._panel.webview.html = this._getHtmlForWebview(cats[catName]);
+    }
+
+    private _getHtmlForWebview(catGif: string) {
+
+        // Local path to main script run in the webview
+        const scriptPathOnDisk = vscode.Uri.file(path.join(this._extensionPath, 'build', 'static', 'js', 'main.6883c34d.js'));
+
+        // And the uri we use to load this script in the webview
+		const scriptUri = scriptPathOnDisk.with({ scheme: 'vscode-resource' });
+		
+        const stylePathOnDisk = vscode.Uri.file(path.join(this._extensionPath, 'build', 'static', 'css', 'main.29266132.css'));
+
+        // And the uri we use to load this style in the webview
+        const styleUri = stylePathOnDisk.with({ scheme: 'vscode-resource' });
+		const baseStyles = `<link rel="stylesheet" type="text/css" href="${styleUri}">`;
+
+        // Use a nonce to whitelist which scripts can be run
+        // const nonce = 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>
+				${baseStyles}
+				<base href="${vscode.Uri.file(path.join(this._extensionPath, 'build')).with({ scheme: 'vscode-resource' })}/">
+			</head>
+
+			<body>
+				<noscript>You need to enable JavaScript to run this app.</noscript>
+				<div id="root"></div>
+				
+				<script src="${scriptUri}"></script>
+			</body>
+            </html>`;
+    }
+}
+
+// function getNonce() {
+//     let text = "";
+//     const possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+//     for (let i = 0; i < 32; i++) {
+//         text += possible.charAt(Math.floor(Math.random() * possible.length));
+//     }
+//     return text;
+// }

package.json

@@ -1,13 +1,40 @@
 {
   "name": "vscode-webview-react",
   "version": "0.1.0",
-  "private": true,
+  "engines": {
+    "vscode": "^1.23.0"
+  },
+  "publisher": "rebornix",
+  "activationEvents": [
+    "onCommand:catCoding.start",
+    "onCommand:catCoding.doRefactor"
+  ],
+  "main": "./ext-src/extension.js",
+  "contributes": {
+    "commands": [
+      {
+        "command": "catCoding.start",
+        "title": "Start cat coding session",
+        "category": "Cat Coding"
+      },
+      {
+        "command": "catCoding.doRefactor",
+        "title": "Do some refactoring",
+        "category": "Cat Coding"
+      }
+    ]
+  },
   "dependencies": {
     "react": "^16.3.2",
     "react-dom": "^16.3.2",
-    "react-scripts-ts": "2.16.0"
+	"react-scripts-ts": "2.16.0",
+	"vscode": "^1.1.17"
   },
   "scripts": {
+	"vscode:prepublish": "tsc -p ./",
+    "compile": "tsc -p ./",
+    "watch": "tsc -w -p ./",
+    "postinstall": "node ./node_modules/vscode/bin/install",
     "start": "react-scripts-ts start",
     "build": "react-scripts-ts build",
     "test": "react-scripts-ts test --env=jsdom",

tsconfig.json

@@ -25,6 +25,7 @@
     "acceptance-tests",
     "webpack",
     "jest",
-    "src/setupTests.ts"
+	"src/setupTests.ts",
+	".vscode-test"
   ]
 }

tslint.json

@@ -3,7 +3,8 @@
   "linterOptions": {
     "exclude": [
       "config/**/*.js",
-      "node_modules/**/*.ts"
+	  "node_modules/**/*.ts",
+	  "ext-src/**/*.ts"
     ]
   }
 }