main.js

//@ts-check

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

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

    let undefinedConstants = oldState.undefinedConstants;
    let definedConstants = oldState.definedConstants;
    let options = oldState.options;

    console.log("Started");


    // 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 'update':
                {
                    update(message.undefinedConstants, message.definedConstants, message.options);
                    break;
                }

        }
    });

    /**
     * @param {Array<{name: string, value: string}>} undefinedConstants
     * @param {Array<{name: string, value: string}>} definedConstants
     * @param {Array<{name: string, value: string}>} options
     */
    function update(undefinedConstants, definedConstants, options) {
        function addListItem(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);
        }

        const undefinedUl = document.querySelector("#undefined-constants");
        const definedUl = document.querySelector("#defined-constants");
        const optionsUl = document.querySelector("#options");

        for (const parameter of undefinedConstants) {
            addListItem(undefinedUl, parameter.name, parameter.value);
        }

        for (const parameter of definedConstants) {
            addListItem(definedUl, parameter.name, parameter.value);
        }

        for (const option of options) {
            addListItem(optionsUl, option.name, option.value);
        }

        vscode.setState({ definedConstants: definedConstants, undefinedConstants: undefinedConstants, options: options });
    }
}());