test_tube_merchant/module/merchantFormV2.mjs

import { ViewData, MerchantData } from './data.mjs';

export let MerchantFormV2; 

if (foundry.applications) {
    const { ApplicationV2, HandlebarsApplicationMixin } = foundry.applications.api;

    MerchantFormV2 = class MerchantFormV2 extends HandlebarsApplicationMixin(ApplicationV2) {
        viewData = new ViewData();

        static DEFAULT_OPTIONS = {
            id: "test_tube_merchant",
            form: {
                handler: '',
                submitOnChange: false,
                closeOnSubmit: false
            },
            position: {
                width: "auto",
                height: "auto",
            },
            tag: "form",
            window: {
                icon: "fa-light fa-money-bill-wheat",
                title: "TTM.name"
            }
        };

        get title() {
            return game.i18n.localize(this.options.window.title);
        }

        static PARTS = {
            foo: {
                template: "./modules/test_tube_merchant/templates/merchant.hbs"
            }
        }

        _prepareContext(options) {
            // const context = super._prepareContext(options);
            const context = {};
            context.footer = `${game.i18n.localize("TTM.footer")} <a href="${game.i18n.localize("TTM.boostSite")}">${game.i18n.localize("TTM.boostSite")}</a>`;
            context.itemsTypes = this.viewData.itemsTypes;
            context.categories = this.viewData.categories;
            console.log("Preparing", context);
            return context;
        }

        _bindEvents() {
            const html = this.element;

            this.merchantItemsTypes = html.querySelector('[id="MerchantItemsTypes"]');
            this.categoriesTypes = html.querySelector('[id="CategoriesTypes"]');

            html.querySelector('#setNewMerchant').addEventListener('click', async () => {
                const tokens = canvas.tokens.controlled;
                merchantData.newMerchant(tokens, this.merchantItemsTypes, this.categoriesTypes);
            });

            html.querySelector('#editMerchant').addEventListener('click', async () => {
                const tokens = canvas.tokens.controlled;
                merchantData.editMerchant(tokens, this.merchantItemsTypes, this.categoriesTypes);
            });

            html.querySelector('#randomCategories').addEventListener('click', async () => {
                const categories = await merchantData.randomLevelWithDice();
                this.categoriesTypes.value = categories;
            });

            html.querySelector('#randomTypes').addEventListener('click', async () => {
                const types = await merchantData.randomTypesWithDice(this.viewData.itemsTypes);
                this.merchantItemsTypes.value = types;
            });

            html.querySelector('#randomMerchant').addEventListener('click', async () => {
                const tokens = canvas.tokens.controlled;
                const itemsTypes = this.viewData.itemsTypes;
                await merchantData.randomMerchant(tokens, this.merchantItemsTypes, this.categoriesTypes, itemsTypes);
            });
        }

        async _onRender(...args) {
            await super._onRender(...args);
            this._bindEvents();
        }
    };
} else {
    MerchantFormV2 = class MerchantFormV2 extends FormApplication {
        viewData = new ViewData();
    };
}

export const merchantData = new MerchantData();