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

Code before:
            this.appendChild(boxDiv);
            this.editor.focus();
            logger.debug(`element ${this.id} successfully connected`);
        }

        get src() {
            return this.getAttribute('src');
        }

        set src(value) {
            this.setAttribute('src', value);
        }

        attributeChangedCallback(name: string, oldVal: string, newVal: string) {
            if (name === 'src' && newVal !== oldVal) {
                void this.loadReplSrc();
            }
        }

        /**
         * Fetch url from src attribute of py-repl tags and
         * preload the code from fetch response into the Corresponding py-repl tag,
         * but please note that they will not be pre-run unless you click the runbotton.
         */
        async loadReplSrc() {
            await fetch(this.src)
                .then(response => {
                    if (response.ok) {
                        return response.text();
                    } else {
                        logger.error(
                            `loading code from ${this.src} to repl...Failed ${response.status} (${response.statusText})`,
                        );
                    }
                })
                .then(content => {
                    if (content !== void 0) {
                        const code = content.toString().replace(/[<&]/g, match => (match === '<' ? '&lt;' : '&amp;'));
                        const parentElement = this.querySelector("div[class='cm-content']");
                        let childCounts = parentElement.children.length;
                        while (childCounts-- > 1) {
                            parentElement.removeChild(parentElement.firstChild);
                        }
                        parentElement.firstElementChild.innerHTML = code;
                        logger.info(`loading code from ${this.src} to repl...success`);
                    }
                });
        }

        /** Create and configure the codemirror editor
         */

Review comment (refactor):
nit: this method is `async` for no reason (as it is) because `fetch` is used chaining `then` operations and nothing is awaiting this method to finish out there.

Here is how I'd write the code to justify that `async` nature and have it more handy in the future (if needed):

```js
const response = await fetch(this.src);
if ( !response.ok ) {
  logger.error(...);
  return;
}
const content = await response.text();
// no need to check !== void as that's never the case
// or better ... that means an error already threw before
// ... the rest of the logic
```

does this make sense? My nit is basically around simplifying this code avoiding dealing with multiple `.then(...)` when the method is already `async`.

Code after:
            this.editor = this.makeEditor(pySrc);
            const boxDiv = this.makeBoxDiv();
            this.appendChild(boxDiv);
            this.editor.focus();
            logger.debug(`element ${this.id} successfully connected`);
        }

        get src() {
            return this.getAttribute('src');
        }

        set src(value) {
            this.setAttribute('src', value);
        }

        attributeChangedCallback(name: string, oldVal: string, newVal: string) {
            if (name === 'src' && newVal !== oldVal) {
                void this.loadReplSrc();
            }
        }

        /**
         * Fetch url from src attribute of py-repl tags and
         * preload the code from fetch response into the Corresponding py-repl tag,
         * but please note that they will not be pre-run unless you click the runbotton.
         */
        async loadReplSrc() {
            try {
                const response = await robustFetch(this.src);
                if (!response.ok) {
                    return;
                }
                const cmcontentElement = this.querySelector("div[class='cm-content']");
                const { lastElementChild } = cmcontentElement;
                cmcontentElement.replaceChildren(lastElementChild);
                lastElementChild.textContent = await response.text();
                logger.info(`loading code from ${this.src} to repl...success`);
            } catch (err) {
                const e = err as Error;
                _createAlertBanner(e.message);
            }
        }

        /** Create and configure the codemirror editor
         */
        makeEditor(pySrc: string): EditorView {
            const languageConf = new Compartment();
            const extensions = [
                indentUnit.of('    '),
                basicSetup,
                languageConf.of(python()),