Repository: pyscript/pyscript
File: pyscriptjs/src/components/pyconfig.ts (TypeScript)

Code before:
    constructor() {
        super();
    }

    connectedCallback() {
        let loadedValues: object = {};
        let srcConfig: object = {};
        let inlineConfig: object = {};

        // load config from src and inline
        if (this.hasAttribute('src') && this.innerHTML!=='')
        {
            srcConfig = validateConfig(readTextFromPath(this.getAttribute('src')));
            this.code = this.innerHTML;
            this.innerHTML = '';
            inlineConfig = validateConfig(this.code);
            // first make config from src whole if it is partial
            srcConfig = mergeConfig(srcConfig, inJest() ? defaultConfig : JSON.parse(defaultConfig));
            // then merge inline config and config from src
            loadedValues = mergeConfig(inlineConfig, srcConfig);
            logger.info('config set from src attribute and inline both, merging', JSON.stringify(loadedValues));
        }
        // load config from src only
        else if (this.hasAttribute('src'))
        {
            const srcText = readTextFromPath(this.getAttribute('src'));
            srcConfig = validateConfig(srcText);
            logger.info('config set from src attribute, merging with default', srcText);
            loadedValues = mergeConfig(srcConfig, inJest() ? defaultConfig : JSON.parse(defaultConfig));
        }
        // load config from inline
        else if (this.innerHTML!=='')
        {
            this.code = this.innerHTML;
            this.innerHTML = '';
            inlineConfig = validateConfig(this.code);
            logger.info('config set from inline, merging with default', this.code);
            loadedValues = mergeConfig(inlineConfig, inJest() ? defaultConfig : JSON.parse(defaultConfig));
        }
        // load from default if still undefined
        if (Object.keys(loadedValues).length === 0) {
            logger.info('no config set, loading default', defaultConfig);
            loadedValues = inJest() ? defaultConfig : JSON.parse(defaultConfig);
        }
        // eslint-disable-next-line
        // @ts-ignore
        this.values = loadedValues;

        appConfig.set(this.values);
        logger.info('config set:', this.values);


Review comment (refactor):
This block (and the one below it) is basically the same as the one used above.

Perhaps consider abstracting ingesting from src or inline into two functions to be called appropriately in each of these conditional blocks..?

But what do I know..? I'm not a TS dev and this might be OK..?!?!

Code after:
    }

    extractFromSrc() {
        if (this.hasAttribute('src'))
        {
            logger.info('config set from src attribute');
            return validateConfig(readTextFromPath(this.getAttribute('src')));
        }
        return {};
    }

    extractFromInline() {
        if (this.innerHTML!=='')
        {
            this.code = this.innerHTML;
            this.innerHTML = '';
            logger.info('config set from inline');
            return validateConfig(this.code);
        }
        return {};
    }

    injectMetadata() {
        this.values.pyscript = {
            "version": version,
            "time": new Date().toISOString()
        };
    }

    connectedCallback() {
        let srcConfig = this.extractFromSrc();
        const inlineConfig = this.extractFromInline();
        // first make config from src whole if it is partial
        srcConfig = mergeConfig(srcConfig, defaultConfig);
        // then merge inline config and config from src
        this.values = mergeConfig(inlineConfig, srcConfig);
        this.injectMetadata();

        appConfig.set(this.values);
        logger.info('config set:', this.values);

        addInitializer(this.loadPackages);
        addInitializer(this.loadPaths);
        this.loadRuntimes();
    }

    log(msg: string) {
        const newLog = document.createElement('p');
        newLog.innerText = msg;
        this.details.appendChild(newLog);
    }