How to use @lrnwebcomponents/utils - 10 common examples

tag: name,
                properties: effectiveChildren[i].HAXWiring.getHaxProperties(),
                polymer: false
              }
            });
            context.dispatchEvent(evt);
          } else {
            // @todo support CDN failover or a flag of some kind to ensure
            // this delivers locally or from remote
            // @todo need to support name spacing of packages so that we
            // don't assume they are all relative to lrnwebcomponents
            const basePath = this.pathFromUrl(
              decodeURIComponent(import.meta.url)
            );
            if (!window.customElements.get(name)) {
              let nameLocation = varGet(
                window.HaxStore,
                "instance.__appStoreData.autoloader." + name,
                `@lrnwebcomponents/${name}/${name}.js`
              );
              import(`${basePath}../../../${nameLocation}`)
                .then(response => {
                  // get the custom element definition we used to add that file
                  let CEClass = window.customElements.get(name);
                  if (!CEClass) {
                    console.error(
                      `${name} was not a valid custom element yet a load was attempted`
                    );
                  } else if (typeof CEClass.getHaxProperties === "function") {
                    this.setHaxProperties(CEClass.getHaxProperties(), name);
                  } else if (typeof CEClass.HAXWiring === "function") {
                    this.setHaxProperties(

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');

content = content.replace(re, "");
        string = "x-scope " + tags[i] + "-0";
        re = new RegExp(string, "g");
        content = content.replace(re, "");
      }
    }
    // remove empty class structures
    content = content.replace(/\sclass=\"\"/g, "");
    content = content.replace(/\sclass=\"\s\"/g, "");
    // re-apply contenteditable if needed
    this._applyContentEditable(this.editMode);
    // set active again
    window.HaxStore.write("activeNode", __active, this);
    window.HaxStore.write("activeContainerNode", __active, this);
    // oh one last thing. escape all script/style tags
    content = encapScript(content);
    if (this.globalPreferences.haxDeveloperMode) {
      console.warn(content);
    }
    return content;
  }
  /**

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');
                })

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');
                })
                .catch(error => {

if (newValue) {
      var html = newValue;
      // only append if not empty
      if (html !== null) {
        html = encapScript(newValue);
        wipeSlot(this, "*");
        // insert the content as quickly as possible, then work on the dynamic imports
        microTask.run(() => {
          setTimeout(() => {
            let frag = document.createRange().createContextualFragment(html);
            this.appendChild(frag);
          }, 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');
                })
                .catch(error => {