How to use the @lrnwebcomponents/utils/utils.js.varExists function in @lrnwebcomponents/utils

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 => {

setTimeout(() => {
            let frag = document.createRange().createContextualFragment(html);
            this.appendChild(frag);
            const evt = new CustomEvent(
              "json-outline-schema-active-body-changed",
              {
                bubbles: true,
                composed: true,
                cancelable: false,
                detail: { html }
              }
            );
          }, 5);
        });
        // if there are, dynamically import them
        if (varExists(this.manifest, "metadata.node.dynamicElementLoader")) {
          let tagsFound = findTagsInHTML(html);
          const basePath = this.pathFromUrl(
            decodeURIComponent(import.meta.url)
          );
          for (var i in tagsFound) {
            const tagName = tagsFound[i];
            if (
              this.manifest.metadata.node.dynamicElementLoader[tagName] &&
              !window.customElements.get(tagName)
            ) {
              import(`${basePath}../../../../../${
                this.manifest.metadata.node.dynamicElementLoader[tagName]
              }`)
                .then(response => {
                  //console.log(tagName + ' dynamic import');
                })

autorun(reaction => {
        const __manifest = toJS(store.manifest);
        if (__manifest && varExists(__manifest, "title")) {
          document.title = __manifest.title;
        }
        if (
          __manifest &&
          varExists(__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 = __manifest.metadata.theme.variables.cssVariable
            .replace("--simple-colors-default-theme-", "")
            .split("-");
          ary.pop();
          // simple colors "accent color" property
          this.accentColor = ary.join("-");
          var color = varGet(
            __manifest,
            "metadata.theme.variables.cssVariable",
            null
          );
          // fallback if color wasn't set via css var
          if (color == null) {

autorun(reaction => {
        const __manifest = toJS(store.manifest);
        if (__manifest && varExists(__manifest, "title")) {
          document.title = __manifest.title;
        }
        if (
          __manifest &&
          varExists(__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 = __manifest.metadata.theme.variables.cssVariable
            .replace("--simple-colors-default-theme-", "")
            .split("-");
          ary.pop();
          // simple colors "accent color" property
          this.accentColor = ary.join("-");
          var color = varGet(
            __manifest,

setTimeout(() => {
          if (store.themeElement.childNodes.length === 0) {
            let frag = document.createRange().createContextualFragment(html);
            store.themeElement.appendChild(frag);
            this.dispatchEvent(
              new CustomEvent("json-outline-schema-active-body-changed", {
                bubbles: true,
                composed: true,
                cancelable: false,
                detail: html
              })
            );
          }
        }, 5);
        // if there are, dynamically import them
        if (varExists(this.manifest, "metadata.node.dynamicElementLoader")) {
          let tagsFound = findTagsInHTML(html);
          const basePath = this.pathFromUrl(
            decodeURIComponent(import.meta.url)
          );
          for (var i in tagsFound) {
            const tagName = tagsFound[i];
            if (
              this.manifest.metadata.node.dynamicElementLoader[tagName] &&
              !window.customElements.get(tagName)
            ) {
              import(`${basePath}../../../../${
                this.manifest.metadata.node.dynamicElementLoader[tagName]
              }`)
                .then(response => {
                  // useful to debug if dynamic references are coming in
                  //console.log(tagName + ' dynamic import');

get themeData() {
    if (this.manifest) {
      var themeData = {};
      // this is required so better be...
      if (varExists(this.manifest, "metadata.theme")) {
        themeData = this.manifest.metadata.theme;
      } else {
        // fallback juuuuust to be safe...
        themeData = {
          "haxcms-basic-theme": {
            element: "haxcms-basic-theme",
            path:
              "@lrnwebcomponents/haxcms-elements/lib/core/themes/haxcms-basic-theme.js",
            name: "Basic theme",
            variables: {
              image: "assets/banner.jpg",
              icon: "icons:record-voice-over",
              hexCode: "#da004e",
              cssVariable: "pink"
            }
          }

"haxcms-basic-theme": {
            element: "haxcms-basic-theme",
            path:
              "@lrnwebcomponents/haxcms-elements/lib/core/themes/haxcms-basic-theme.js",
            name: "Basic theme",
            variables: {
              image: "assets/banner.jpg",
              icon: "icons:record-voice-over",
              hexCode: "#da004e",
              cssVariable: "pink"
            }
          }
        };
      }
      // ooo you sneaky devil you...
      if (this.activeItem && varExists(this.activeItem, "metadata.theme")) {
        return this.activeItem.metadata.theme;
      }
      return themeData;
    }
  }
  /**

_manifestChanged(newValue, oldValue) {
    if (newValue && newValue.metadata && newValue.items) {
      // @todo replace this with a schema version mapper
      // once we have versions
      if (varExists(newValue, "metadata.siteName")) {
        let git = varGet(newValue, "publishing.git", {});
        newValue.metadata.site = {
          name: newValue.metadata.siteName,
          git: git,
          created: newValue.metadata.created,
          updated: newValue.metadata.updated
        };
        newValue.metadata.theme.variables = {
          image: newValue.metadata.image,
          icon: newValue.metadata.icon,
          hexCode: newValue.metadata.hexCode,
          cssVariable: newValue.metadata.cssVariable
        };
        newValue.metadata.node = {
          dynamicElementLoader: newValue.metadata.dynamicElementLoader,
          fields: newValue.metadata.fields

_getColor(manifest) {
    if (manifest && varExists(manifest, "metadata.theme.variables.hexCode")) {
      return manifest.metadata.theme.variables.hexCode;
    }
  }
  /**