diff --git a/ext-src/extension.ts b/ext-src/extension.ts
index 3075663..e8e9a3a 100644
--- a/ext-src/extension.ts
+++ b/ext-src/extension.ts
@@ -1,159 +1,117 @@
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();
- }
- }));
+ context.subscriptions.push(vscode.commands.registerCommand('react-webview.start', () => {
+ ReactPanel.createOrShow(context.extensionPath);
+ }));
}
/**
- * Manages cat coding webview panels
+ * Manages react webview panels
*/
-class CatCodingPanel {
- /**
- * Track the currently panel. Only allow a single panel to exist at a time.
- */
- public static currentPanel: CatCodingPanel | undefined;
+class ReactPanel {
+ /**
+ * Track the currently panel. Only allow a single panel to exist at a time.
+ */
+ public static currentPanel: ReactPanel | undefined;
- private static readonly viewType = 'catCoding';
+ private static readonly viewType = 'react';
- private readonly _panel: vscode.WebviewPanel;
- private readonly _extensionPath: string;
- private _disposables: vscode.Disposable[] = [];
+ 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;
+ 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);
- }
- }
+ // If we already have a panel, show it.
+ // Otherwise, create a new panel.
+ if (ReactPanel.currentPanel) {
+ ReactPanel.currentPanel._panel.reveal(column);
+ } else {
+ ReactPanel.currentPanel = new ReactPanel(extensionPath, column || vscode.ViewColumn.One);
+ }
+ }
- private constructor(extensionPath: string, column: vscode.ViewColumn) {
- this._extensionPath = extensionPath;
+ 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,
+ // Create and show a new webview panel
+ this._panel = vscode.window.createWebviewPanel(ReactPanel.viewType, "React", 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')),
+ // And restric the webview to only loading content from our extension's `media` directory.
+ localResourceRoots: [
vscode.Uri.file(path.join(this._extensionPath, 'build'))
- ]
- });
+ ]
+ });
+
+ // Set the webview's initial html content
+ this._panel.webview.html = this._getHtmlForWebview();
- // 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);
- // 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);
+ // Handle messages from the webview
+ this._panel.webview.onDidReceiveMessage(message => {
+ switch (message.command) {
+ case 'alert':
+ vscode.window.showErrorMessage(message.text);
+ return;
+ }
+ }, null, this._disposables);
+ }
- // Update the content based on view changes
- this._panel.onDidChangeViewState(e => {
- if (this._panel.visible) {
- this._update()
- }
- }, 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' });
+ }
- // 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 dispose() {
+ ReactPanel.currentPanel = undefined;
- public doRefactor() {
- // Send a message to the webview webview.
- // You can send any JSON serializable data.
- this._panel.webview.postMessage({ command: 'refactor' });
- }
+ // Clean up our resources
+ this._panel.dispose();
- public dispose() {
- CatCodingPanel.currentPanel = undefined;
+ while (this._disposables.length) {
+ const x = this._disposables.pop();
+ if (x) {
+ x.dispose();
+ }
+ }
+ }
- // Clean up our resources
- this._panel.dispose();
+ private _getHtmlForWebview() {
- while (this._disposables.length) {
- const x = this._disposables.pop();
- if (x) {
- x.dispose();
- }
- }
- }
+ // Local path to main script run in the webview
+ const scriptPathOnDisk = vscode.Uri.file(path.join(this._extensionPath, 'build', 'static', 'js', 'main.6883c34d.js'));
- 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
+ // 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'));
+ 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' });
+ // And the uri we use to load this style in the webview
+ const styleUri = stylePathOnDisk.with({ scheme: 'vscode-resource' });
const baseStyles = ``;
- // Use a nonce to whitelist which scripts can be run
- // const nonce = getNonce();
+ // Use a nonce to whitelist which scripts can be run
+ const nonce = getNonce();
- return `
-
+ return `
+
React App
${baseStyles}
+
@@ -161,17 +119,17 @@ class CatCodingPanel {
-
+
- `;
- }
+