Initial commit
This commit is contained in:
Gordon
116
ext-src/ReactPanel.ts
Normal file
116
ext-src/ReactPanel.ts
Normal file
@ -0,0 +1,116 @@
|
||||
import * as path from 'path';
|
||||
import * as vscode from 'vscode';
|
||||
|
||||
export default class ReactPanel {
|
||||
public static currentPanel: ReactPanel | undefined;
|
||||
|
||||
private static readonly viewType = 'react';
|
||||
|
||||
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 (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;
|
||||
|
||||
// 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, 'build'))
|
||||
]
|
||||
});
|
||||
|
||||
// Set the webview's initial html content
|
||||
this._panel.webview.html = this._getHtmlForWebview();
|
||||
|
||||
// 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);
|
||||
}
|
||||
|
||||
public doRefactor() {
|
||||
this._panel.webview.postMessage({ command: 'refactor' });
|
||||
}
|
||||
|
||||
public dispose() {
|
||||
ReactPanel.currentPanel = undefined;
|
||||
|
||||
// Clean up our resources
|
||||
this._panel.dispose();
|
||||
|
||||
while (this._disposables.length) {
|
||||
const x = this._disposables.pop();
|
||||
if (x) {
|
||||
x.dispose();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private _getHtmlForWebview() {
|
||||
const manifest = require(path.join(this._extensionPath, 'build', 'asset-manifest.json'));
|
||||
const mainScript = manifest['main.js'];
|
||||
const mainStyle = manifest['main.css'];
|
||||
|
||||
const scriptPathOnDisk = vscode.Uri.file(path.join(this._extensionPath, 'build', mainScript));
|
||||
const scriptUri = scriptPathOnDisk.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();
|
||||
|
||||
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>
|
||||
<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' })}/">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
|
||||
<script nonce="${nonce}" 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;
|
||||
}
|
||||
@ -1,131 +1,77 @@
|
||||
import * as path from 'path';
|
||||
import * as kanbn from '@basementuniverse/kanbn/src/main';
|
||||
import * as vscode from 'vscode';
|
||||
import ReactPanel from './ReactPanel';
|
||||
|
||||
let statusBarItem: vscode.StatusBarItem;
|
||||
|
||||
export function activate(context: vscode.ExtensionContext) {
|
||||
|
||||
context.subscriptions.push(vscode.commands.registerCommand('react-webview.start', () => {
|
||||
ReactPanel.createOrShow(context.extensionPath);
|
||||
}));
|
||||
// Register a command to initialise kanbn in the current workspace. This command will be invoked when the status
|
||||
// bar item is clicked in a workspace where kanbn isn't already initialised.
|
||||
const initialiseCommandId = 'kanbn.init';
|
||||
context.subscriptions.push(vscode.commands.registerCommand(initialiseCommandId, async () => {
|
||||
|
||||
// If no workspace folder is opened, we can't initialise kanbn
|
||||
if (vscode.workspace.workspaceFolders === undefined) {
|
||||
vscode.window.showErrorMessage('You need to open a workspace before initialising kanbn.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Otherwise, check if kanbn is already initialised in the current workspace
|
||||
console.log(kanbn.getMainFolder());
|
||||
// Prints /home/gordon/.kanbn because presumably vscode runs extension code with process.cwd() as /home/<user>
|
||||
// TODO update kanbn to inject root (see const ROOT in kanbn/src/main.js) into every method that needs it...
|
||||
|
||||
// if (vscode.workspace.workspaceFolders !== undefined) {
|
||||
// const name = await vscode.window.showInputBox({
|
||||
// value: '',
|
||||
// placeHolder: 'The project name.',
|
||||
// validateInput: text => {
|
||||
// return text.length < 1 ? 'The project name cannot be empty.' : null;
|
||||
// }
|
||||
// });
|
||||
// if (name !== undefined) {
|
||||
// vscode.window.showInformationMessage(`creating with ${name}`);
|
||||
// }
|
||||
// }
|
||||
// TODO initialise kanbn board
|
||||
// updateStatusBarItem();
|
||||
// console.log(kanbn);
|
||||
// console.log(`kanbn initialised: ${await kanbn.initialised()}`);
|
||||
}));
|
||||
|
||||
// Register a command to open the kanbn board. This command will be invoked when the status bar item is clicked
|
||||
// in a workspace where kanbn has already been initialised.
|
||||
const openBoardCommandId = 'kanbn.open';
|
||||
context.subscriptions.push(vscode.commands.registerCommand(openBoardCommandId, () => {
|
||||
ReactPanel.createOrShow(context.extensionPath);
|
||||
}));
|
||||
|
||||
// If a workspace folder is open, add a status bar item and start watching for file changes
|
||||
if (vscode.workspace.workspaceFolders !== undefined) {
|
||||
statusBarItem = vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Left, 0);
|
||||
statusBarItem.command = openBoardCommandId;
|
||||
context.subscriptions.push(statusBarItem);
|
||||
updateStatusBarItem();
|
||||
|
||||
const uri = vscode.workspace.workspaceFolders[0].uri.fsPath;
|
||||
const fileWatcher = vscode.workspace.createFileSystemWatcher(new vscode.RelativePattern(uri, '.kanbn/*'));
|
||||
fileWatcher.onDidChange(e => {
|
||||
// TODO update kanbn board
|
||||
updateStatusBarItem();
|
||||
console.log(e);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Manages react webview panels
|
||||
*/
|
||||
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 = 'react';
|
||||
|
||||
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 (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;
|
||||
|
||||
// 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, 'build'))
|
||||
]
|
||||
});
|
||||
|
||||
// Set the webview's initial html content
|
||||
this._panel.webview.html = this._getHtmlForWebview();
|
||||
|
||||
// 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);
|
||||
}
|
||||
|
||||
public doRefactor() {
|
||||
// Send a message to the webview webview.
|
||||
// You can send any JSON serializable data.
|
||||
this._panel.webview.postMessage({ command: 'refactor' });
|
||||
}
|
||||
|
||||
public dispose() {
|
||||
ReactPanel.currentPanel = undefined;
|
||||
|
||||
// Clean up our resources
|
||||
this._panel.dispose();
|
||||
|
||||
while (this._disposables.length) {
|
||||
const x = this._disposables.pop();
|
||||
if (x) {
|
||||
x.dispose();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private _getHtmlForWebview() {
|
||||
const manifest = require(path.join(this._extensionPath, 'build', 'asset-manifest.json'));
|
||||
const mainScript = manifest['main.js'];
|
||||
const mainStyle = manifest['main.css'];
|
||||
|
||||
const scriptPathOnDisk = vscode.Uri.file(path.join(this._extensionPath, 'build', mainScript));
|
||||
const scriptUri = scriptPathOnDisk.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();
|
||||
|
||||
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>
|
||||
<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' })}/">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
|
||||
<script nonce="${nonce}" src="${scriptUri}"></script>
|
||||
</body>
|
||||
</html>`;
|
||||
}
|
||||
export function deactivate(): void {
|
||||
//
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
function updateStatusBarItem(): void {
|
||||
if (statusBarItem === undefined) {
|
||||
return;
|
||||
}
|
||||
statusBarItem.text = `$(project) Not initialised`;
|
||||
statusBarItem.show();
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user