How to use the @lrnwebcomponents/haxcms-elements/lib/core/haxcms-site-store.js.store.routerManifest function in @lrnwebcomponents/haxcms-elements

autorun(reaction => {
      this.manifest = toJS(store.routerManifest);
      if (varExists(this.manifest, "title")) {
        document.title = this.manifest.title;
      }
      if (varExists(this.manifest, "metadata.theme.variables.cssVariable")) {
        // json outline schema changed, allow other things to react
        // fake way of forcing an update of these items
        let ary = this.manifest.metadata.theme.variables.cssVariable
          .replace("--simple-colors-default-theme-", "")
          .split("-");
        ary.pop();
        this.accentColor = ary.join("-");
      }
      this.__disposer.push(reaction);
    });
    autorun(reaction => {

// dispatch to everything else caring
      const evt = new CustomEvent("json-outline-schema-active-item-changed", {
        bubbles: true,
        composed: true,
        cancelable: true,
        detail: newValue
      });
      this.dispatchEvent(evt);
      // update title as a simple nicity
      if (typeof newValue.title !== typeof undefined) {
        document.title = store.routerManifest.title + " - " + newValue.title;
      } else {
        document.title = store.routerManifest.title;
      }
    } else {
      document.title = store.routerManifest.title;
    }
  }
  /**

_locationChanged(newValue, oldValue) {
      if (!newValue || typeof newValue.route === "undefined") return;
      const location = newValue;
      const name = location.route.name;
      if (name == "home" || name == "404") {
        // if we are on the homepage then load the first item in the manifest
        // and set it active
        const firstItem = store.routerManifest.items.find(
          i => typeof i.id !== "undefined"
        );
        if (firstItem) {
          store.activeId = firstItem.id;
        }
      }
      if (this.HAXCMSThemeSettings.autoScroll) {
        window.scrollTo({
          top: 0,
          left: 0
        });
      }
    }
    /**

import("@lrnwebcomponents/haxcms-elements/lib/ui-components/layout/site-footer.js");
    const type = this.type;
    let content = "";
    if (type === "page") {
      // oh there you are
      content = `
      <h1>${store.activeItem.title}</h1>
      <div>${store.activeItemContent}</div>`;
    } else if (type === "parent") {
      // everything from the parent of this page, down
      const result = store.computeItems(
        1,
        100,
        store.activeId,
        "parent",
        store.routerManifest,
        true
      );
      for (var i in result) {
        content += await fetch("pages/" + result[i].location + "/index.html")
          .then(function(response) {
            return response.text();
          })
          .then(function(response) {
            let indent = result[i].indent + 1;
            if (indent &gt; 6) {
              indent = 6;
            }
            return `${result[i].title}
              ${response}`;
          });
      }

autorun(reaction => {
      this.manifestLength = toJS(store.routerManifest.items.length);
      this.__disposer.push(reaction);
    });
    autorun(reaction => {

autorun(reaction => {
      this.routerManifest = Object.assign({}, toJS(store.routerManifest));
      this.__disposer.push(reaction);
    });
    autorun(reaction => {

autorun(reaction => {
      this._routerManifest = Object.assign({}, toJS(store.routerManifest));
      this.__disposer.push(reaction);
    });
    if (!this.fixedId) {

autorun(reaction => {
      this.routerManifest = toJS(store.routerManifest);
      this.__disposer.push(reaction);
    });
    autorun(reaction => {

autorun(reaction => {
      this.routerManifest = toJS(store.routerManifest);
      this.__disposer.push(reaction);
    });
    autorun(reaction => {

autorun(reaction => {
      this.manifest = toJS(store.routerManifest);
      this.__disposer.push(reaction);
    });
    autorun(reaction => {