christoph/wamr
1
Fork 0
Code Releases Activity

Implement WAMR-IDE with vscode extension (#943)

Browse Source 
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
2022-01-25 10:10:12 +08:00
committed by GitHub
parent 90a0057d33
commit d925369a1f
66 changed files with 2769 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
test-tools/wamr-ide/VSCode-Extension/resource/webview/css/style.css Normal file
View File

@ -0,0 +1,70 @@
/*
* Copyright (C) 2019 Intel Corporation. All rights reserved.
* SPDX-License-Identifier: Apache-2.0 WITH LLVM-exception
*/
.box_wrapper {
display: flex;
justify-content: center;
align-items: center;
}
.form_heading {
text-align: left;
}
.form_heading vscode-divider,
.config_form_heading vscode-divider,
.form_bottom vscode-divider,
.config_form_bottom vscode-divider {
padding-bottom: 0.5rem;
}
.form_body,
.config_form_body {
display: grid;
grid-row-gap: 1rem;
padding-bottom: 0.5rem;
}
.config_form_body div,
.config_submit_btn_wrapper {
display: grid;
grid-template-columns: 4fr 8fr;
grid-column-gap: 0.5rem;
}
.form_heading,
.form_body,
.form_bottom {
width: 400px;
}
.config_form_body,
.config_form_heading,
.config_form_bottom {
width: 550px;
}
#btn_submit {
border-radius: 5px;
}
#select_div,
#text_filed_div,
.proj_submit_btn_wrapper {
display: grid;
grid-template-columns: 3fr 9fr;
grid-column-gap: 0.5rem;
}
#ipt_projName,
#tselect_dropdown,
.config_form_body vscode-text-field,
.config_form_body vscode-text-area {
width: 100%;
}
#btn {
text-align: center;
}

28
test-tools/wamr-ide/VSCode-Extension/resource/webview/js/configbuildtarget.js Normal file
View File

@ -0,0 +1,28 @@
/*
* Copyright (C) 2019 Intel Corporation. All rights reserved.
* SPDX-License-Identifier: Apache-2.0 WITH LLVM-exception
*/
const vscode = acquireVsCodeApi();
document.getElementById('btn_submit').onclick = () => {
submitFunc();
};
function submitFunc() {
let outputFileName = document.getElementById('output_file_name').value;
let initmemSize = document.getElementById('initial_mem_size').value;
let maxmemSize = document.getElementById('max_mem_size').value;
let stackSize = document.getElementById('stack_size').value;
let exportedSymbols = document.getElementById('exported_symbols').value;
vscode.postMessage({
command: 'config_build_target',
outputFileName: outputFileName,
initmemSize: initmemSize,
maxmemSize: maxmemSize,
stackSize: stackSize,
exportedSymbols: exportedSymbols,
});
}

37
test-tools/wamr-ide/VSCode-Extension/resource/webview/js/newproj.js Normal file
View File

@ -0,0 +1,37 @@
/*
* Copyright (C) 2019 Intel Corporation. All rights reserved.
* SPDX-License-Identifier: Apache-2.0 WITH LLVM-exception
*/
const vscode = acquireVsCodeApi();
document.getElementById('btn_submit').onclick = () => {
submitFunc();
};
function submitFunc() {
let projectName = document.getElementById('ipt_projName').value;
let template = document.getElementById('select_dropdown').value;
vscode.postMessage({
command: 'create_new_project',
projectName: projectName,
template: template,
});
/* get msg from ext */
window.addEventListener('message', event => {
const message = event.data;
switch (message.command) {
/* send command to open the project */
case 'proj_creation_finish':
vscode.postMessage({
command: 'open_project',
projectName: message.prjName,
});
break;
default:
break;
}
});
}

63
test-tools/wamr-ide/VSCode-Extension/resource/webview/page/configBuildTarget.html Normal file
View File

@ -0,0 +1,63 @@
<!--
-- Copyright (C) 2019 Intel Corporation. All rights reserved.
-- SPDX-License-Identifier: Apache-2.0 WITH LLVM-exception
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="module" src="${toolkitUri}"></script>
<script type="module" src="${mainUri}"></script>
<link rel="stylesheet" href="${styleUri}">
<title>New project</title>
</head>
<body>
<div class="box_wrapper">
<div class="config_form_heading">
<h2>Config building target</h2>
<vscode-divider></vscode-divider>
</div>
</div>
<div class="box_wrapper">
<div class="config_form_body">
<div>
<label><b>Output file name: </b></label>
<vscode-text-field id="output_file_name" value=${output_file_val}></vscode-text-field>
</div>
<div>
<label><b>Initial linear memory size: </b></label>
<vscode-text-field id="initial_mem_size" value=${initial_mem_size_val}></vscode-text-field>
</div>
<div>
<label><b>Max linear memory size: </b></label>
<vscode-text-field id="max_mem_size" value=${max_mem_size_val}></vscode-text-field>
</div>
<div>
<label><b>Stack size: </b></label>
<vscode-text-field id="stack_size" value=${stack_size_val}></vscode-text-field>
</div>
<div>
<label><b>Exported symbols: </b></label>
<vscode-text-area rows="3" id="exported_symbols" placeholder="Please split each symbol with comma. Like 'app_main,on_init'" value=${exported_symbols_val}></vscode-text-area>
</div>
</div>
</div>
<div class="box_wrapper">
<div class="config_form_bottom">
<vscode-divider></vscode-divider>
<div class="config_submit_btn_wrapper">
<div></div>
<div id="btn">
<vscode-button id="btn_submit"><b>Modify</b></vscode-buton>
</div>
</div>
</div>
</div>
</body>
</html>

55
test-tools/wamr-ide/VSCode-Extension/resource/webview/page/newProject.html Normal file
View File

@ -0,0 +1,55 @@
<!--
-- Copyright (C) 2019 Intel Corporation. All rights reserved.
-- SPDX-License-Identifier: Apache-2.0 WITH LLVM-exception
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="module" src="${toolkitUri}"></script>
<script type="module" src="${mainUri}"></script>
<link rel="stylesheet" href="${styleUri}">
<title>Create project</title>
</head>
<body>
<div class="box_wrapper">
<div class="form_heading">
<h2>Create project</h2>
<vscode-divider class="divider_wrapper"></vscode-divider>
</div>
</div>
<div class="box_wrapper">
<div class="form_body">
<div id="text_filed_div">
<label><b>Project Name: </b></label>
<vscode-text-field id="ipt_projName"></vscode-text-field>
</div>
<div id="select_div">
<label><b>Template:</b></label>
<vscode-dropdown id="select_dropdown">
<vscode-option value="" selected:disabled style="display:none"></vscode-option>
<vscode-option value="default">default</vscode-option>
</vscode-dropdown>
</div>
</div>
</div>
<div class="box_wrapper">
<div class="form_bottom">
<vscode-divider></vscode-divider>
<div class="proj_submit_btn_wrapper">
<div></div>
<div id="btn">
<vscode-button id="btn_submit"><b>Create</b></vscode-buton>
</div>
</div>
</div>
</div>
</body>
</html>