main.js

// This script will be run within the webview itself
// It cannot access the main VS Code APIs directly.
(function () {
    const vscode = acquireVsCodeApi();

    const oldState = vscode.getState() || { constants: [], options: [] };

    let constants = oldState.constants;
    let options = oldState.options;

    console.log("Started");
    /**
     * @type {HTMLSelectElement}
     */
    const toolDropDown = document.getElementById("tools");
    toolDropDown.addEventListener('change', event => {
        vscode.postMessage({ type: "toolSelected", toolName: toolDropDown.options[toolDropDown.selectedIndex].value });
    });

    // Handle messages sent from the extension to the webview
    window.addEventListener('message', event => {
        const message = event.data; // The json data that the extension sent
        console.log("Received message");
        switch (message.type) {
            case 'updateConstants':
                {
                    updateConstants(message.constants);
                    break;
                }
            case 'updateOptions':
                {
                    updateOptions(message.options);
                    break;
                }
            case 'fillTools':
                {
                    fillTools(message.tools);
                    break;
                }
        }
    });


    function fillTools(tools) {
        const select = document.querySelector("#tools");
        for (const tool of tools) {
            const option = document.createElement("option");
            option.value = tool;
            option.text = tool;
            select.appendChild(option);
        }
    }

    function addConstantItem(ul, name) {
        const li = document.createElement("li");

        const nameBox = document.createElement("label");
        nameBox.id = "name-" + name;
        nameBox.appendChild(document.createTextNode(name));
        nameBox.classList.add("name");

        li.appendChild(nameBox);

        const valueBox = document.createElement("input");
        valueBox.id = "value-" + name;
        valueBox.type = "text";
        valueBox.classList.add("value");

        li.appendChild(valueBox);

        ul.appendChild(li);
    }

    function addOptionItem(ul, name, value) {
        const li = document.createElement("li");

        const nameBox = document.createElement("input");
        nameBox.id = "name-" + name;
        nameBox.type = "text";
        nameBox.value = name;
        nameBox.classList.add("name");

        li.appendChild(nameBox);

        const valueBox = document.createElement("input");
        valueBox.id = "value-" + name;
        valueBox.type = "text";
        valueBox.value = value;
        valueBox.classList.add("value");

        li.appendChild(valueBox);

        ul.appendChild(li);
    }

    /**
     * @param {Array<string>} constants
     */
    function updateConstants(constants) {
        const constantsUl = document.querySelector("#constants");

        constantsUl.innerHTML = "";

        for (const constant of constants) {
            addConstantItem(constantsUl, constant);
        }

        vscode.setState({ constants: constants });
    }

    /**
     * @param {Array<{name: string, value: string}>} options
     */
    function updateOptions(options) {
        const optionsUl = document.querySelector("#options");
        optionsUl.innerHTML = "";
        for (const option of options) {
            addListItem(optionsUl, option.name, option.value);
        }

        vscode.setState({ options: options });
    }

    vscode.postMessage({ type: "init" });
}());