fetcher.js

class Fetcher {
    constructor(scenesObj, startScene = 0) {
        this.scenes = scenesObj;
        this.currentScene = startScene
        this.init()

    }
    init() {
        this.target = document.createElement("div")
        this.target.id = "stage"
        document.body.appendChild(this.target)
        this.loadScene(this.scenes[this.currentScene].page, this.scenes[this.currentScene].script);

    }
    loadScene(path, jsPath, ) {

        fetch(path /*, options */)
            .then((response) => response.text())
            .then((html) => {
                this.target.innerHTML = html;
                let newScript = document.createElement("script");
                newScript.src = jsPath;
                this.target.appendChild(newScript);
            })
            .catch((error) => {
                console.warn(error);
            });


    }
    loadSceneNumber(num){
this.loadNextScene(this.scenes[num].page, this.scenes[num].script)
    }
    loadNextScene() {
        this.currentScene += 1
        this.loadScene(this.scenes[this.currentScene].page, this.scenes[this.currentScene].script, this.scenes[this.currentScene]?.req);
        console.log(this.scenes[this.currentScene])
    }

}

simple and dirty way how to compose webpages