Shared with Script Lab

Scenario decorators.yaml

name: Scenario decorators
description: ''
author: WrathOfZombies
host: WEB
api_set: {}
script:
    content: |
        // https://jsbin.com/qotuzexeho/edit?js,console
        // https://gist.github.com/WrathOfZombies/44d8e93468b2ca6382b5e88c4b0d4ef5
        // Usage

        @track({
            name: 'Cat',
            metrics: {
                length: 1
            }
        })
        class Cat {
            name = 'Persian';

            @track('a')
            meow() {
                console.log(`My name is ${this.name}`);
            }

            @track('b')
            asyncFn() {
                return new Promise((resolve, reject) => {
                    // Use reflect-metadata to access the scenario data
                    (<any>Cat.prototype.asyncFn).scenario.mark('waiting...', { currentTime: performance.now() })
                    setTimeout(() => {
                        const now = Date.now();
                        now % 2 == 0 ? reject(new Error('Whoopsy!')) : resolve(now);
                    }, 1000);
                });
            }
        }


        (async () => {
            var cat = new Cat();
            cat.meow();

            cat.asyncFn().then(time => console.log(`The time is ${time}`))
                .catch(exception => { console.error(exception) });
        })();

        // Definition

        interface IScenarioData {
            name: string;
            metrics: any;
        }

        class Scenario {
            constructor(private data: IScenarioData) { }

            create(name: string) {
                return {
                    start: function () {
                        performance.mark(`${name}_start`);
                        console.log(`Scenario start: ${name}`);
                    },
                    mark: function (step, data) {
                        performance.mark(`${name}_${step}`);
                        console.log(`Step: ${step}`, data);
                    },
                    end: function () {
                        performance.mark(`${name}_end`);
                        performance.measure(`${name}_elapsed`, `${name}_start`, `${name}_end`);
                        const [measure] = performance.getEntriesByName(`${name}_elapsed`, 'measure');
                        console.log(`Scenario end: ${name} completed in ${measure.duration}`);
                    }
                }
            }
        }

        function track(data: IScenarioData | string): any {
            return (target: any, key: string, descriptor: PropertyDescriptor) => {
                if (typeof target === 'function' && key === undefined) {
                    // Class decorator
                    // Use reflect-metadata here instead to store information on the class
                    // We are initializing a scenario logger and storing that on the class          
                    target.prototype.logger = new Scenario(data as IScenarioData);
                } else {
                    if (descriptor && typeof descriptor.value === 'function') {
                        // Class instance method
                        const currentImplementation = descriptor.value;
                        const newImplementation = (...args) => {
                            const scenario = target.logger.create(data);
                            scenario.start();

                            // Use reflect-metadata to store the scenario data
                            newImplementation['scenario'] = scenario;
                            const result = currentImplementation(...args);
                            if (result instanceof Promise) {
                                return result.then((...args) => {
                                    scenario.end();
                                    return args;
                                }).catch((...a) => {
                                    scenario.end();
                                    throw args;
                                });
                            }
                            else {
                                scenario.end();
                                return result;
                            }
                        }
                        descriptor.value = newImplementation;
                    }
                }
            }
        }
    language: typescript
template:
    content: |
        <button id="run" class="ms-Button">
            <span class="ms-Button-label">Run</span>
        </button>
    language: html
style:
    content: "/* Your style goes here */\r\n"
    language: css
libraries: |
    office-ui-fabric-js@1.4.0/dist/css/fabric.min.css
    office-ui-fabric-js@1.4.0/dist/css/fabric.components.min.css

    core-js@2.4.1/client/core.min.js
    @types/core-js

    https://unpkg.com/@microsoft/office-js-helpers@0.8.0-beta.4/dist/office.helpers.min.js
    https://unpkg.com/@microsoft/office-js-helpers/dist/office.helpers.d.ts

    jquery@3.1.1
    @types/jquery

    lodash
    @types/lodash