Implement WAMR-IDE with vscode extension (#943)
Implement WAMR-IDE with vscode extension to enable developing WebAssembly applications with coding, building, running and debugging support. Support both Linux and Windows, and only support putting all the tools in a docker image, e.g. wasi-sdk, wamrc, iwasm and so on. Co-authored-by: Wang Ning <justdoitwn@163.com>
This commit is contained in:
Wenyong Huang
253
test-tools/wamr-ide/VSCode-Extension/src/view/NewProjectPanel.ts
Normal file
253
test-tools/wamr-ide/VSCode-Extension/src/view/NewProjectPanel.ts
Normal file
@ -0,0 +1,253 @@
|
||||
/*
|
||||
* Copyright (C) 2019 Intel Corporation. All rights reserved.
|
||||
* SPDX-License-Identifier: Apache-2.0 WITH LLVM-exception
|
||||
*/
|
||||
|
||||
import * as vscode from 'vscode';
|
||||
import * as path from 'path';
|
||||
import * as fs from 'fs';
|
||||
import { CreateDirectory, CopyFiles } from '../utilities/directoryUtilities';
|
||||
import { getUri } from '../utilities/getUri';
|
||||
|
||||
export class NewProjectPanel {
|
||||
static USER_SET_WORKSPACE: string;
|
||||
public static currentPanel: NewProjectPanel | undefined;
|
||||
private readonly _panel: vscode.WebviewPanel;
|
||||
private _disposables: vscode.Disposable[] = [];
|
||||
|
||||
static readonly USER_INTPUT_ERR: number = -2;
|
||||
static readonly DIR_EXSITED_ERR: number = -1;
|
||||
static readonly EXCUTION_SUCCESS: number = 0;
|
||||
|
||||
/**
|
||||
* @param context extension context from extension.ts active func
|
||||
*/
|
||||
constructor(extensionUri: vscode.Uri, panel: vscode.WebviewPanel) {
|
||||
this._panel = panel;
|
||||
this._panel.webview.html = this._getHtmlForWebview(
|
||||
this._panel.webview,
|
||||
extensionUri,
|
||||
'resource/webview/page/newProject.html'
|
||||
);
|
||||
this._setWebviewMessageListener(this._panel.webview, extensionUri);
|
||||
this._panel.onDidDispose(this.dispose, null, this._disposables);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param context
|
||||
*/
|
||||
public static render(context: vscode.ExtensionContext) {
|
||||
NewProjectPanel.USER_SET_WORKSPACE = vscode.workspace
|
||||
.getConfiguration()
|
||||
.get('WAMR-IDE.configWorkspace') as string;
|
||||
|
||||
/* check if current panel is initialized */
|
||||
if (NewProjectPanel.currentPanel) {
|
||||
NewProjectPanel.currentPanel._panel.reveal(vscode.ViewColumn.One);
|
||||
} else {
|
||||
const panel = vscode.window.createWebviewPanel(
|
||||
'newProject',
|
||||
'Create project',
|
||||
vscode.ViewColumn.One,
|
||||
{
|
||||
enableScripts: true,
|
||||
retainContextWhenHidden: true,
|
||||
}
|
||||
);
|
||||
|
||||
/* create new project panel obj */
|
||||
NewProjectPanel.currentPanel = new NewProjectPanel(
|
||||
context.extensionUri,
|
||||
panel
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param projName project name input by user
|
||||
* @param template
|
||||
*/
|
||||
private _creatNewProject(
|
||||
projName: string,
|
||||
template: string,
|
||||
extensionUri: vscode.Uri
|
||||
): number {
|
||||
if (projName === '' || template === '') {
|
||||
return NewProjectPanel.USER_INTPUT_ERR;
|
||||
}
|
||||
|
||||
let ROOT_PATH = path.join(NewProjectPanel.USER_SET_WORKSPACE, projName);
|
||||
let EXT_PATH = extensionUri.fsPath;
|
||||
|
||||
/* if the direcotry has exsited, then ignore the creation and return */
|
||||
if (fs.existsSync(ROOT_PATH)) {
|
||||
if (fs.lstatSync(ROOT_PATH).isDirectory()) {
|
||||
return NewProjectPanel.DIR_EXSITED_ERR;
|
||||
}
|
||||
}
|
||||
|
||||
/* create necessary floders under the project directory */
|
||||
CreateDirectory(path.join(ROOT_PATH, '.wamr'));
|
||||
CreateDirectory(path.join(ROOT_PATH, 'include'));
|
||||
CreateDirectory(path.join(ROOT_PATH, 'src'));
|
||||
|
||||
/* copy scripts files to project_root_path/.wamr */
|
||||
CopyFiles(
|
||||
path.join(EXT_PATH, 'resource/scripts/CMakeLists.txt'),
|
||||
path.join(ROOT_PATH, '.wamr/CMakeLists.txt')
|
||||
);
|
||||
|
||||
CopyFiles(
|
||||
path.join(EXT_PATH, 'resource/scripts/project.cmake'),
|
||||
path.join(ROOT_PATH, '.wamr/project.cmake')
|
||||
);
|
||||
|
||||
return NewProjectPanel.EXCUTION_SUCCESS;
|
||||
}
|
||||
|
||||
public _getHtmlForWebview(
|
||||
webview: vscode.Webview,
|
||||
extensionUri: vscode.Uri,
|
||||
templatePath: string
|
||||
) {
|
||||
/* get toolkit uri */
|
||||
const toolkitUri = getUri(webview, extensionUri, [
|
||||
'node_modules',
|
||||
'@vscode',
|
||||
'webview-ui-toolkit',
|
||||
'dist',
|
||||
'toolkit.js',
|
||||
]);
|
||||
|
||||
const styleUri = getUri(webview, extensionUri, [
|
||||
'resource',
|
||||
'webview',
|
||||
'css',
|
||||
'style.css',
|
||||
]);
|
||||
|
||||
const mainUri = getUri(webview, extensionUri, [
|
||||
'resource',
|
||||
'webview',
|
||||
'js',
|
||||
'newproj.js',
|
||||
]);
|
||||
|
||||
const resourcePath = path.join(extensionUri.fsPath, templatePath);
|
||||
let html = fs.readFileSync(resourcePath, 'utf-8');
|
||||
html = html
|
||||
.replace(/(\${toolkitUri})/, toolkitUri.toString())
|
||||
.replace(/(\${mainUri})/, mainUri.toString())
|
||||
.replace(/(\${styleUri})/, styleUri.toString());
|
||||
|
||||
return html;
|
||||
}
|
||||
|
||||
private _setWebviewMessageListener(
|
||||
webview: vscode.Webview,
|
||||
extensionUri: vscode.Uri
|
||||
) {
|
||||
// Handle messages from the webview
|
||||
webview.onDidReceiveMessage(
|
||||
message => {
|
||||
switch (message.command) {
|
||||
case 'create_new_project':
|
||||
if (
|
||||
this._creatNewProject(
|
||||
message.projectName,
|
||||
message.template,
|
||||
extensionUri
|
||||
) === NewProjectPanel.EXCUTION_SUCCESS
|
||||
) {
|
||||
/* post message to page to inform the project creation has finished */
|
||||
webview.postMessage({
|
||||
command: 'proj_creation_finish',
|
||||
prjName: message.projectName,
|
||||
});
|
||||
} else if (
|
||||
this._creatNewProject(
|
||||
message.projectName,
|
||||
message.template,
|
||||
extensionUri
|
||||
) === NewProjectPanel.DIR_EXSITED_ERR
|
||||
) {
|
||||
vscode.window.showErrorMessage(
|
||||
'Project : ' +
|
||||
message.projectName +
|
||||
' exsits in your current root path, please change project name or root path!'
|
||||
);
|
||||
return;
|
||||
} else if (
|
||||
this._creatNewProject(
|
||||
message.projectName,
|
||||
message.template,
|
||||
extensionUri
|
||||
) === NewProjectPanel.USER_INTPUT_ERR
|
||||
) {
|
||||
vscode.window.showErrorMessage(
|
||||
'Please fill chart before your submit!'
|
||||
);
|
||||
return;
|
||||
}
|
||||
return;
|
||||
|
||||
case 'open_project':
|
||||
vscode.window.showInformationMessage(
|
||||
'Project : ' +
|
||||
message.projectName +
|
||||
' will be opened!'
|
||||
);
|
||||
let isWorkspaceEmpty: boolean;
|
||||
|
||||
let projPath = path.join(
|
||||
NewProjectPanel.USER_SET_WORKSPACE,
|
||||
message.projectName
|
||||
);
|
||||
let uri = vscode.Uri.file(projPath);
|
||||
|
||||
/**
|
||||
* check if the vscode workspace folder is empty,
|
||||
* if yes, open new window, else open in current window
|
||||
*/
|
||||
isWorkspaceEmpty = !vscode.workspace
|
||||
.workspaceFolders?.[0]
|
||||
? true
|
||||
: false;
|
||||
isWorkspaceEmpty === false
|
||||
? vscode.commands.executeCommand(
|
||||
'vscode.openFolder',
|
||||
uri,
|
||||
{
|
||||
forceNewWindow: true,
|
||||
}
|
||||
)
|
||||
: vscode.commands.executeCommand(
|
||||
'vscode.openFolder',
|
||||
uri
|
||||
);
|
||||
|
||||
case 'close_webview':
|
||||
this._panel.dispose();
|
||||
return;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
undefined,
|
||||
this._disposables
|
||||
);
|
||||
}
|
||||
|
||||
private dispose() {
|
||||
NewProjectPanel.currentPanel = undefined;
|
||||
this._panel.dispose();
|
||||
|
||||
while (this._disposables.length) {
|
||||
const disposable = this._disposables.pop();
|
||||
if (disposable) {
|
||||
disposable.dispose();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,260 @@
|
||||
/*
|
||||
* Copyright (C) 2019 Intel Corporation. All rights reserved.
|
||||
* SPDX-License-Identifier: Apache-2.0 WITH LLVM-exception
|
||||
*/
|
||||
|
||||
import * as vscode from 'vscode';
|
||||
import * as path from 'path';
|
||||
import * as fs from 'fs';
|
||||
import * as os from 'os';
|
||||
import { readFromConfigFile, writeIntoConfigFile } from '../extension';
|
||||
import { getUri } from '../utilities/getUri';
|
||||
|
||||
export class TargetConfigPanel {
|
||||
public static currentPanel: TargetConfigPanel | undefined;
|
||||
private readonly _panel: vscode.WebviewPanel;
|
||||
|
||||
private _disposables: vscode.Disposable[] = [];
|
||||
public static BUILD_ARGS = {
|
||||
output_file_name: 'main.wasm',
|
||||
init_memory_size: '131072',
|
||||
max_memory_size: '131072',
|
||||
stack_size: '4096',
|
||||
exported_symbols: 'main',
|
||||
};
|
||||
|
||||
static readonly USER_INTPUT_ERR: number = -2;
|
||||
static readonly EXCUTION_SUCCESS: number = 0;
|
||||
|
||||
/**
|
||||
*
|
||||
* @param context extension context from extension.ts active func
|
||||
* @param panelName
|
||||
*/
|
||||
constructor(panel: vscode.WebviewPanel, extensionUri: vscode.Uri) {
|
||||
this._panel = panel;
|
||||
this._panel.webview.html = this._getHtmlForWebview(
|
||||
this._panel.webview,
|
||||
extensionUri,
|
||||
'resource/webview/page/configBuildTarget.html'
|
||||
);
|
||||
this._panel.onDidDispose(this.dispose, null, this._disposables);
|
||||
this._setWebviewMessageListener(this._panel.webview);
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param context
|
||||
*/
|
||||
public static render(context: vscode.ExtensionContext) {
|
||||
/* check if current panel is initialized */
|
||||
if (TargetConfigPanel.currentPanel) {
|
||||
TargetConfigPanel.currentPanel._panel.reveal(vscode.ViewColumn.One);
|
||||
} else {
|
||||
const panel = vscode.window.createWebviewPanel(
|
||||
'targetConfig',
|
||||
'Config building target',
|
||||
vscode.ViewColumn.One,
|
||||
{
|
||||
enableScripts: true,
|
||||
retainContextWhenHidden: true,
|
||||
}
|
||||
);
|
||||
|
||||
TargetConfigPanel.currentPanel = new TargetConfigPanel(
|
||||
panel,
|
||||
context.extensionUri
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
private _configBuildArgs(
|
||||
outputFileName: string,
|
||||
initmemSize: string,
|
||||
maxmemSize: string,
|
||||
stackSize: string,
|
||||
exportedSymbols: string
|
||||
): number {
|
||||
if (
|
||||
outputFileName === '' ||
|
||||
initmemSize === '' ||
|
||||
maxmemSize === '' ||
|
||||
stackSize === '' ||
|
||||
exportedSymbols === ''
|
||||
) {
|
||||
return TargetConfigPanel.USER_INTPUT_ERR;
|
||||
}
|
||||
|
||||
let _configStr: string;
|
||||
let includePathArr = new Array();
|
||||
let excludeFileArr = new Array();
|
||||
let configJson: any;
|
||||
|
||||
let _configObj = {
|
||||
output_file_name: outputFileName,
|
||||
init_memory_size: initmemSize,
|
||||
max_memory_size: maxmemSize,
|
||||
stack_size: stackSize,
|
||||
exported_symbols: exportedSymbols,
|
||||
};
|
||||
|
||||
TargetConfigPanel.BUILD_ARGS = _configObj;
|
||||
|
||||
_configStr = readFromConfigFile();
|
||||
|
||||
if (_configStr !== '' && _configStr !== undefined) {
|
||||
configJson = JSON.parse(_configStr);
|
||||
includePathArr =
|
||||
configJson['include_paths'] === undefined
|
||||
? []
|
||||
: configJson['include_paths'];
|
||||
excludeFileArr =
|
||||
configJson['exclude_files'] === undefined
|
||||
? []
|
||||
: configJson['exclude_files'];
|
||||
}
|
||||
|
||||
writeIntoConfigFile(
|
||||
includePathArr,
|
||||
excludeFileArr,
|
||||
TargetConfigPanel.BUILD_ARGS
|
||||
);
|
||||
|
||||
return TargetConfigPanel.EXCUTION_SUCCESS;
|
||||
}
|
||||
|
||||
private _getHtmlForWebview(
|
||||
webview: vscode.Webview,
|
||||
extensionUri: vscode.Uri,
|
||||
templatePath: string
|
||||
) {
|
||||
/* get toolkit uri */
|
||||
const toolkitUri = getUri(webview, extensionUri, [
|
||||
'node_modules',
|
||||
'@vscode',
|
||||
'webview-ui-toolkit',
|
||||
'dist',
|
||||
'toolkit.js',
|
||||
]);
|
||||
|
||||
const styleUri = getUri(webview, extensionUri, [
|
||||
'resource',
|
||||
'webview',
|
||||
'css',
|
||||
'style.css',
|
||||
]);
|
||||
|
||||
const mainUri = getUri(webview, extensionUri, [
|
||||
'resource',
|
||||
'webview',
|
||||
'js',
|
||||
'configbuildtarget.js',
|
||||
]);
|
||||
|
||||
/* get config build target values and set into webview page */
|
||||
let configData, buildArgObj;
|
||||
let _output_file_name,
|
||||
_init_memory_size,
|
||||
_max_memory_size,
|
||||
_stack_size,
|
||||
_exported_symbols;
|
||||
|
||||
if (readFromConfigFile() !== '') {
|
||||
configData = JSON.parse(readFromConfigFile());
|
||||
buildArgObj = configData['build_args'];
|
||||
if (buildArgObj !== undefined) {
|
||||
_output_file_name = buildArgObj['output_file_name'];
|
||||
_init_memory_size = buildArgObj['init_memory_size'];
|
||||
_max_memory_size = buildArgObj['max_memory_size'];
|
||||
_stack_size = buildArgObj['stack_size'];
|
||||
_exported_symbols = buildArgObj['exported_symbols'];
|
||||
}
|
||||
}
|
||||
|
||||
const resourcePath = path.join(extensionUri.fsPath, templatePath);
|
||||
let html = fs.readFileSync(resourcePath, 'utf-8');
|
||||
html = html
|
||||
.replace(/(\${toolkitUri})/, toolkitUri.toString())
|
||||
.replace(/(\${mainUri})/, mainUri.toString())
|
||||
.replace(/(\${styleUri})/, styleUri.toString())
|
||||
.replace(
|
||||
/(\${output_file_val})/,
|
||||
_output_file_name === undefined ? '' : _output_file_name
|
||||
)
|
||||
.replace(
|
||||
/(\${initial_mem_size_val})/,
|
||||
_init_memory_size === undefined ? '' : _init_memory_size
|
||||
)
|
||||
.replace(
|
||||
/(\${max_mem_size_val})/,
|
||||
_max_memory_size === undefined ? '' : _max_memory_size
|
||||
)
|
||||
.replace(
|
||||
/(\${stack_size_val})/,
|
||||
_stack_size === undefined ? '' : _stack_size
|
||||
)
|
||||
.replace(
|
||||
/(\${exported_symbols_val})/,
|
||||
_exported_symbols === undefined ? '' : _exported_symbols
|
||||
);
|
||||
|
||||
return html;
|
||||
}
|
||||
|
||||
private _setWebviewMessageListener(webview: vscode.Webview) {
|
||||
webview.onDidReceiveMessage(
|
||||
message => {
|
||||
switch (message.command) {
|
||||
case 'config_build_target':
|
||||
if (
|
||||
message.outputFileName === '' ||
|
||||
message.initmemSize === '' ||
|
||||
message.maxmemSize === '' ||
|
||||
message.stackSize === '' ||
|
||||
message.exportedSymbols === ''
|
||||
) {
|
||||
vscode.window.showErrorMessage(
|
||||
'Please fill chart before your submit!'
|
||||
);
|
||||
return;
|
||||
} else if (
|
||||
this._configBuildArgs(
|
||||
message.outputFileName,
|
||||
message.initmemSize,
|
||||
message.maxmemSize,
|
||||
message.stackSize,
|
||||
message.exportedSymbols
|
||||
) === TargetConfigPanel.EXCUTION_SUCCESS
|
||||
) {
|
||||
vscode.window
|
||||
.showInformationMessage(
|
||||
'Configurations have been saved!',
|
||||
'OK'
|
||||
)
|
||||
.then(() => {
|
||||
this._panel.dispose();
|
||||
return;
|
||||
});
|
||||
}
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
undefined,
|
||||
this._disposables
|
||||
);
|
||||
}
|
||||
|
||||
private dispose() {
|
||||
TargetConfigPanel.currentPanel = undefined;
|
||||
this._panel.dispose();
|
||||
|
||||
while (this._disposables.length) {
|
||||
const disposable = this._disposables.pop();
|
||||
if (disposable) {
|
||||
disposable.dispose();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user