@nent/core/dist/cjs/n-content-reference.cjs.entry.js

Functional elements to add routing, data-binding, dynamic HTML, declarative actions, audio, video, and so much more. Supercharge static HTML files into web apps without script or builds.

/*!
 * NENT 2022
 */
'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-1829aebc.js');
const logging = require('./logging-37c154cf.js');
const references = require('./references-c38a5e62.js');
require('./mutex-7ae5ebad.js');
require('./index-96f3ab3f.js');

const ContentReference = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.reference = index.createEvent(this, "referenced", 6);
    /**
     * Import the script file as a module.
     */
    this.module = false;
    /**
     * Declare the script only for use when
     * modules aren't supported
     */
    this.noModule = false;
    /**
     * When inline the link/script tags are rendered in-place
     * rather than added to the head.
     */
    this.inline = false;
    /**
     * If set, disables auto-rendering of this instance.
     * To fetch the contents change to false or remove
     * attribute.
     */
    this.deferLoad = false;
    /**
     * Timeout (in milliseconds) to wait for the references
     * to load.
     */
    this.timeout = 1000;
  }
  /**
   * Force the 'load' event of the script or link element.
   * This is meant for testing.
   *
   */
  async forceLoad() {
    var _a, _b;
    (_a = this.scriptElement) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new CustomEvent('load'));
    (_b = this.linkElement) === null || _b === void 0 ? void 0 : _b.dispatchEvent(new CustomEvent('load'));
  }
  registered(type, loaded) {
    this.reference.emit({ type, loaded });
  }
  async getStylePromise(element) {
    const url = this.styleSrc;
    return new Promise(async (resolve) => {
      if (url == undefined) {
        return resolve(false);
      }
      const reffed = await references.hasReference(url);
      if (reffed) {
        return resolve(true);
      }
      this.linkElement = this.el.ownerDocument.createElement('link');
      this.linkElement.href = url;
      this.linkElement.rel = 'stylesheet';
      let loaded = false;
      this.linkElement.addEventListener('load', async () => {
        loaded = true;
        return resolve(loaded);
      });
      element.append(this.linkElement);
      await references.markReference(url);
      setTimeout(() => {
        if (!loaded) {
          logging.warn(`Stylesheet '${url}' did not load before the ${this.timeout} timeout.`);
          resolve(false);
        }
      }, this.timeout);
    });
  }
  getScriptPromise(element) {
    const url = this.scriptSrc;
    return new Promise(async (resolve) => {
      if (url == undefined) {
        return resolve(false);
      }
      const reffed = await references.hasReference(url);
      if (reffed) {
        return resolve(true);
      }
      this.scriptElement =
        this.el.ownerDocument.createElement('script');
      this.scriptElement.src = url;
      let loaded = false;
      if (this.module) {
        this.scriptElement.type = 'module';
      }
      else if (this.noModule) {
        this.scriptElement.setAttribute('nomodule', '');
      }
      this.scriptElement.addEventListener('load', async () => {
        loaded = true;
        await references.markReference(url);
        return resolve(loaded);
      });
      element.append(this.scriptElement);
      await references.markReference(url);
      setTimeout(() => {
        if (!loaded) {
          logging.warn(`Script '${url}' did not load before the ${this.timeout} timeout.`);
          resolve(false);
        }
      }, this.timeout);
    });
  }
  async componentWillRender() {
    if (this.deferLoad) {
      return;
    }
    const element = this.inline ? this.el : this.el.ownerDocument.head;
    await this.getStylePromise(element).then(loaded => this.registered(references.ReferenceType.styles, loaded));
    await this.getScriptPromise(element).then(loaded => this.registered(references.ReferenceType.script, loaded));
  }
  disconnectedCallback() { }
  get el() { return index.getElement(this); }
};

exports.n_content_reference = ContentReference;