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>
2022-01-25 10:10:12 +08:00
parent 90a0057d33
commit d925369a1f
66 changed files with 2769 additions and 0 deletions
--- a/test-tools/wamr-ide/VSCode-Extension/resource/debug/README.md
+++ b/test-tools/wamr-ide/VSCode-Extension/resource/debug/README.md
@ -0,0 +1,11 @@
+### If you want to enable `source debugging` for this extension, please build `lldb` firstly following this [instruction](../../../../../doc/source_debugging.md#debugging-with-interpreter).
+
+### After building(`linux` for example), create `bin` folder and `lib` folder respectively in current directory, add following necessary target files into the folders.
+
+    ```shell
+     /llvm/build-lldb/bin/lldb # move this file to resource/debug/bin/
+     /llvm/build-lldb/bin/lldb-vscode # move this file to resource/debug/bin/
+     /llvm/build-lldb/lib/liblldb.so.13 # move this file to resource/debug/lib/
+    ```
+
+### Then you can start the extension and run the execute source debugging by clicking the `debug` button in the extension panel.
--- a/test-tools/wamr-ide/VSCode-Extension/resource/scripts/CMakeLists.txt
+++ b/test-tools/wamr-ide/VSCode-Extension/resource/scripts/CMakeLists.txt
@ -0,0 +1,40 @@
+# Copyright (C) 2019 Intel Corporation.  All rights reserved.
+# SPDX-License-Identifier: Apache-2.0 WITH LLVM-exception
+
+cmake_minimum_required (VERSION 2.9)
+
+project(Main)
+
+include(${CMAKE_CURRENT_SOURCE_DIR}/project.cmake)
+
+set (CMAKE_SYSROOT /opt/wamr-sdk/app/libc-builtin-sysroot)
+
+set (CMAKE_C_FLAGS " -nostdlib -g -Wno-unused-command-line-argument " CACHE INTERNAL "")
+
+set (CMAKE_CXX_FLAGS " -nostdlib -g" CACHE INTERNAL "")
+
+set (CMAKE_C_FLAGS "${CMAKE_C_FLAGS} -z stack-size=${STACK_SIZE}")
+
+set (CMAKE_EXE_LINKER_FLAGS
+    "-Wl,--initial-memory=${INIT_MEM_SIZE},--max-memory=${MAX_MEM_SIZE}, \
+     -Wl,--no-entry,")
+
+set (CMAKE_EXE_LINKER_FLAGS
+    "${CMAKE_EXE_LINKER_FLAGS} \
+     ${EXPORTED_SYMBOLS},")
+
+set (CMAKE_EXE_LINKER_FLAGS
+    "${CMAKE_EXE_LINKER_FLAGS} \
+    -Wl,--allow-undefined-file=${CMAKE_SYSROOT}/share/defined-symbols.txt" CACHE INTERNAL "")
+
+set (SRC_LIST
+    ${PROJECT_SRC_LIST})
+
+set (HEADER_LIST
+    ${CMAKE_CURRENT_SOURCE_DIR}/../include
+    ${PROJECT_INCLUDES})
+
+include_directories(${HEADER_LIST})
+
+add_executable (${OUTPUT_FILE_NAME} ${SRC_LIST})
+
--- a/test-tools/wamr-ide/VSCode-Extension/resource/scripts/boot_debugger_server.bat
+++ b/test-tools/wamr-ide/VSCode-Extension/resource/scripts/boot_debugger_server.bat
@ -0,0 +1,14 @@
+@REM Copyright (C) 2019 Intel Corporation.  All rights reserved.
+@REM SPDX-License-Identifier: Apache-2.0 WITH LLVM-exception
+
+@echo off
+set target_name=%1
+
+docker run -it --name=wasm-debug-server-ctr ^
+           -v "%cd%":/mnt ^
+           -p 1234:1234 ^
+           wasm-debug-server:1.0 ^
+           /bin/bash -c "./debug.sh %target_name%"
+
+@REM stop and remove wasm-debug-server-container
+docker stop wasm-debug-server-ctr && docker rm wasm-debug-server-ctr
--- a/test-tools/wamr-ide/VSCode-Extension/resource/scripts/boot_debugger_server.sh
+++ b/test-tools/wamr-ide/VSCode-Extension/resource/scripts/boot_debugger_server.sh
@ -0,0 +1,14 @@
+# Copyright (C) 2019 Intel Corporation.  All rights reserved.
+# SPDX-License-Identifier: Apache-2.0 WITH LLVM-exception
+
+#!/bin/bash
+
+target_name=$1
+
+docker run -it --name=wasm-debug-server-ctr \
+           -v $(pwd):/mnt \
+           -p 1234:1234 \
+           wasm-debug-server:1.0 \
+           /bin/bash -c "./debug.sh ${target_name}"
+
+docker stop wasm-debug-server-ctr && docker rm wasm-debug-server-ctr
--- a/test-tools/wamr-ide/VSCode-Extension/resource/scripts/build.bat
+++ b/test-tools/wamr-ide/VSCode-Extension/resource/scripts/build.bat
@ -0,0 +1,14 @@
+@REM Copyright (C) 2019 Intel Corporation.  All rights reserved.
+@REM SPDX-License-Identifier: Apache-2.0 WITH LLVM-exception
+
+@echo off
+set AoT_Binary_Name=%1
+
+@REM start a container, mount current project path to container/mnt
+docker run --name=wasm-toolchain-provider-ctr ^
+                -it -v %cd%:/mnt ^
+                wasm-toolchain-provider:1.0  ^
+                /bin/bash -c "./build_wasm.sh %AoT_Binary_Name%"
+
+@REM stop and remove wasm-toolchain-ctr container
+docker stop wasm-toolchain-provider-ctr && docker rm wasm-toolchain-provider-ctr
--- a/test-tools/wamr-ide/VSCode-Extension/resource/scripts/build.sh
+++ b/test-tools/wamr-ide/VSCode-Extension/resource/scripts/build.sh
@ -0,0 +1,19 @@
+# Copyright (C) 2019 Intel Corporation.  All rights reserved.
+# SPDX-License-Identifier: Apache-2.0 WITH LLVM-exception
+
+#!/bin/bash
+
+AoT_Binary_Name=$1
+
+# start & run docker image and build wasm
+if test ! -z "$(docker ps -a | grep wasm-toolchain-ctr)"; then
+    sudo docker rm wasm-toolchain-ctr
+fi
+
+sudo docker run --name=wasm-toolchain-provider-ctr \
+                -it -v $(pwd):/mnt \
+                wasm-toolchain-provider:1.0  \
+                /bin/bash -c "./build_wasm.sh $AoT_Binary_Name"
+
+# stop and remove wasm-toolchain-ctr container
+sudo docker stop wasm-toolchain-provider-ctr && sudo docker rm wasm-toolchain-provider-ctr
--- a/test-tools/wamr-ide/VSCode-Extension/resource/scripts/project.cmake
+++ b/test-tools/wamr-ide/VSCode-Extension/resource/scripts/project.cmake
@ -0,0 +1,17 @@
+# Copyright (C) 2019 Intel Corporation.  All rights reserved.
+# SPDX-License-Identifier: Apache-2.0 WITH LLVM-exception
+
+set (OUTPUT_FILE_NAME)
+
+set (INIT_MEM_SIZE)
+
+set (MAX_MEM_SIZE)
+
+set (STACK_SIZE)
+
+set (EXPORTED_SYMBOLS)
+
+set (PROJECT_SRC_LIST)
+
+set (PROJECT_INCLUDES)
+
--- a/test-tools/wamr-ide/VSCode-Extension/resource/scripts/run.bat
+++ b/test-tools/wamr-ide/VSCode-Extension/resource/scripts/run.bat
@ -0,0 +1,13 @@
+@REM Copyright (C) 2019 Intel Corporation.  All rights reserved.
+@REM SPDX-License-Identifier: Apache-2.0 WITH LLVM-exception
+
+@echo off
+set target_name=%1
+
+docker run -it --name=wasm-executor-ctr ^
+           -v "%cd%":/mnt ^
+           wasm-debug-server:1.0 ^
+           /bin/bash -c "./run.sh %target_name%"
+
+@REM stop and remove wasm-executor-ctr
+docker stop wasm-executor-ctr && docker rm wasm-executor-ctr
--- a/test-tools/wamr-ide/VSCode-Extension/resource/scripts/run.sh
+++ b/test-tools/wamr-ide/VSCode-Extension/resource/scripts/run.sh
@ -0,0 +1,12 @@
+# Copyright (C) 2019 Intel Corporation.  All rights reserved.
+# SPDX-License-Identifier: Apache-2.0 WITH LLVM-exception
+
+#!/bin/bash
+target_name=$1
+
+docker run -it --name=wasm-debug-server-ctr \
+           -v $(pwd):/mnt \
+           wasm-debug-server:1.0 \
+           /bin/bash -c "./run.sh ${target_name}"
+
+docker stop wasm-debug-server-ctr && docker rm wasm-debug-server-ctr
--- a/test-tools/wamr-ide/VSCode-Extension/resource/webview/css/style.css
+++ b/test-tools/wamr-ide/VSCode-Extension/resource/webview/css/style.css
@ -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;
+}
--- a/test-tools/wamr-ide/VSCode-Extension/resource/webview/js/configbuildtarget.js
+++ b/test-tools/wamr-ide/VSCode-Extension/resource/webview/js/configbuildtarget.js
@ -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,
+    });
+}
--- a/test-tools/wamr-ide/VSCode-Extension/resource/webview/js/newproj.js
+++ b/test-tools/wamr-ide/VSCode-Extension/resource/webview/js/newproj.js
@ -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;
+        }
+    });
+}
--- a/test-tools/wamr-ide/VSCode-Extension/resource/webview/page/configBuildTarget.html
+++ b/test-tools/wamr-ide/VSCode-Extension/resource/webview/page/configBuildTarget.html
@ -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>
--- a/test-tools/wamr-ide/VSCode-Extension/resource/webview/page/newProject.html
+++ b/test-tools/wamr-ide/VSCode-Extension/resource/webview/page/newProject.html
@ -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>