Pattern to share data between SPFx webparts without using global variables, cookies or web storage

ShareDataBetweenWebparts.js

var SharedData = (function () {
    function SharedData() {
    }
    SharedData.prototype.loadData = function () {
        console.log("Loading data (should only be called once)");
        SharedData.loadingData = true;
        // simulate AJAX call to retrieve data
        return SharedData.loadingPromise = new Promise(function (resolve, reject) {
            setTimeout(function () {
                SharedData.loadedData = true;
                resolve("Data returned");
            }, 2000);
        });
    };
    SharedData.prototype.getData = function () {
        console.log("getData - loadingData: " + (SharedData.loadingData === true) + ", loadedData: " + (SharedData.loadedData === true));
        if (SharedData.loadingData || SharedData.loadedData) {
            console.log("Returning promise instead of reloading data");
            return SharedData.loadingPromise;
        }
        else {
            return this.loadData();
        }
    };
    return SharedData;
}());
/*
TESTS
=====
- test that statics are shared across multiple instances and data is only loaded once*/
var shared = new SharedData();
var shared2 = new SharedData();
shared.getData().then(console.log);
shared2.getData().then(console.log);
/*
- test that data is returned after promise has resolved */
setTimeout(function () { shared2.getData().then(console.log); }, 4000);
/*
Tests output the following to the console
====================================
getData - loadingData: false, loadedData: false
Loading data (should only be called once)

getData - loadingData: true, loadedData: false
Returning promise instead of reloading data
Data returned
Data returned

getData - loadingData: true, loadedData: true
Returning promise instead of reloading data
Data returned
*/ 

ShareDataBetweenWebparts.ts

class SharedData {    
    static loadingData: boolean;
    static loadedData: boolean;
    static loadingPromise: Promise<any>

    private loadData(): Promise<any> {
        console.log("Loading data (should only be called once)");
        SharedData.loadingData = true;

        // simulate AJAX call to retrieve data
        return SharedData.loadingPromise = new Promise<any>((resolve, reject) => {
            setTimeout(() => {
                SharedData.loadedData = true;
                resolve("Data returned");
            }, 2000);
        });
    }

    public getData() {
        console.log(`getData - loadingData: ${SharedData.loadingData === true}, loadedData: ${SharedData.loadedData === true}`);

        if (SharedData.loadingData || SharedData.loadedData) {
            console.log("Returning promise instead of reloading data");            
            return SharedData.loadingPromise;
        }
        else {            
            return this.loadData();
        }
    }

    constructor() {
        
    }
}


/*
TESTS
=====
- test that statics are shared across multiple instances and data is only loaded once*/
var shared = new SharedData();
var shared2 = new SharedData();
shared.getData().then(console.log);
shared2.getData().then(console.log);

/*
- test that data is returned after promise has resolved */
setTimeout(() => { shared2.getData().then(console.log); }, 4000);

/*
Tests output the following to the console
====================================
getData - loadingData: false, loadedData: false
Loading data (should only be called once)

getData - loadingData: true, loadedData: false
Returning promise instead of reloading data
Data returned
Data returned

getData - loadingData: true, loadedData: true
Returning promise instead of reloading data
Data returned
*/