Model-View-What sample code

mail-merge-sample.tsx

// Model

export type Recipient = {
    firstName: string;
    lastName: string;
    address: Address;
}

export type Address = {
    line1: string;
    line2?: string | undefined;
    city: string;
    state: string;
    zipCode: string;
}

// Model View Presenter

export type IMailMergeView = {
    set firstName(value: string);
    set lastName(value: string);
    set addressLine1(value: string);
    set addressLine2(value: string | undefined);
    set city(value: string | undefined);
    set countrySubdivision(value: string | undefined);
    set country(value: string);
    set postalCode(value: string | undefined);

    render(this: void): HTMLDivElement;
};

export function mailMergePresenter(model: Recipient, view: IMailMergeView) {
    view.firstName = model.firstName;
    view.lastName = model.lastName;
    view.addressLine1 = model.address.line1;
    view.addressLine2 = model.address.line2;
    view.city = model.address.city;
    view.countrySubdivision = model.address.state;
    view.country = "USA";
    view.postalCode = model.address.zipCode;
}

/*
<div>
  <span data-rel="first-name"></span> <span data-rel="last-name"></span>
</div>
*/
export function createViewForPresenter(): IMailMergeView {
    const div: HTMLDivElement = null!;
    return {
        set firstName(value: string) {
            div.querySelector(`[data-rel="first-name"]`)!.innerHTML = value;
        },
        set lastName(value: string) {
            div.querySelector(`[data-rel="last-name"]`)!.innerHTML = value;
        },
        set addressLine1(value: string) { },
        set addressLine2(value: string | undefined) { },
        set city(value: string | undefined) { },
        set countrySubdivision(value: string | undefined) { },
        set country(value: string) { },
        set postalCode(value: string | undefined) { },

        render() { 
            return div;
        }
    };
}

// Model-View-ViewModel

export type IMailMergeViewModel = {
    readonly firstName: string;
    readonly lastName: string;
    readonly addressLine1: string;
    readonly addressLine2: string | undefined;
    readonly city: string | undefined;
    readonly countrySubdivision: string | undefined;
    readonly country: string;
    readonly postalCode: string | undefined;
};

export function createMailMergeViewModel(model: Recipient): IMailMergeViewModel {
    return {
        firstName: model.firstName,
        lastName: model.lastName,
        addressLine1: model.address.line1,
        addressLine2: model.address.line2,
        city: model.address.city,
        countrySubdivision: model.address.state,
        country: "USA",
        postalCode: model.address.zipCode,
    }
}

/*
<div>
  <span data-rel="first-name"></span> <span data-rel="last-name"></span>
</div>
*/
export function createViewForViewModel(viewModel: IMailMergeViewModel): JSX.Element {
    return (
        <div>
            <span>{viewModel.firstName}</span> <span>{viewModel.lastName}</span><br/>
            <span>{viewModel.addressLine1}</span><br/>
            {viewModel.addressLine2 ? <><span>{viewModel.addressLine2}</span><br/></> : null}
        </div>
    );
}