@nent/core/dist/cjs/n-content-template.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 state = require('./state-f97ff0e6.js');
const remote = require('./remote-d40ac61b.js');
const elements = require('./elements-87859bcf.js');
const interfaces = require('./interfaces-95d0415a.js');
const jsonata_worker = require('./jsonata.worker-5efab898.js');
const tokens = require('./tokens-4f8bcd42.js');
const utils = require('./utils-1f59272d.js');
const interfaces$1 = require('./interfaces-1da33056.js');
const state$1 = require('./state-246c735d.js');
const stateSubscriber = require('./state-subscriber-0ded559f.js');
require('./index-96f3ab3f.js');
require('./expressions-531d82f5.js');
require('./factory-0d7ddff9.js');
require('./index-637e8c28.js');
require('./values-b2399e33.js');
require('./promises-463f4e01.js');
require('./strings-fe5a8e44.js');

const ContentTemplate = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.contentClass = 'dynamic';
    this.contentElement = null;
    /**
     * If set, disables auto-rendering of this instance.
     * To fetch the contents change to false or remove
     * attribute.
     */
    this.deferLoad = false;
    /**
     * Turn on debug statements for load, update and render events.
     */
    this.debug = false;
    /**
     * Force render with data & route changes.
     */
    this.noCache = false;
    /**
     * Cross Origin Mode
     */
    this.mode = 'cors';
    /**
     * When declared, the child script tag is required and should be
     * the query text for the request. Also, this forces the HTTP
     * method to 'POST'.
     */
    this.graphql = false;
  }
  get childTemplate() {
    return this.el.querySelector('template');
  }
  get childScript() {
    return this.el.querySelector('script');
  }
  componentWillLoad() {
    this.dataSubscription = new stateSubscriber.CommonStateSubscriber(this, 'dataEnabled', interfaces.DATA_EVENTS.DataChanged);
    this.routeSubscription = new stateSubscriber.CommonStateSubscriber(this, 'routingEnabled', interfaces$1.ROUTE_EVENTS.RouteChanged);
    if (this.childTemplate !== null) {
      this.innerTemplate = this.childTemplate.innerHTML;
    }
  }
  async componentWillRender() {
    let shouldRender = !this.deferLoad;
    if (shouldRender && this.when && state.state.dataEnabled) {
      const { evaluatePredicate } = await Promise.resolve().then(function () { return require('./expressions-531d82f5.js'); }).then(function (n) { return n.expressions; });
      shouldRender = await evaluatePredicate(this.when);
    }
    if (shouldRender)
      this.contentElement = await this.resolveContentElement();
    else
      this.contentElement = null;
  }
  async resolveContentElement() {
    var _a;
    const content = await this.getContent();
    if (content == null)
      return null;
    const container = document.createElement(this.innerTemplate ? 'div' : 'span');
    container.innerHTML = content;
    container.className = this.contentClass;
    if (state.state.elementsEnabled) {
      elements.resolveChildElementXAttributes(container);
    }
    if (state$1.state.router) {
      (_a = state$1.state.router) === null || _a === void 0 ? void 0 : _a.captureInnerLinks(container);
    }
    return container;
  }
  async getContent() {
    let content = null;
    const data = await this.resolveData();
    if (this.innerTemplate) {
      content = await tokens.resolveTokens(this.innerTemplate, false, data);
    }
    else if (this.text) {
      content = await tokens.resolveTokens(this.text, false, data);
    }
    return content;
  }
  async resolveData() {
    var _a;
    let data = {};
    if (this.el.dataset) {
      Object.assign(data, this.el.dataset);
    }
    if (this.childScript !== null && !this.graphql) {
      try {
        const json = JSON.parse(this.childScript.textContent || '');
        data = Object.assign(data, json);
      }
      catch (error) {
        logging.warn(`n-content-template: unable to deserialize JSON: ${error}`);
      }
    }
    if (this.src) {
      try {
        data = this.graphql
          ? await remote.fetchJson(window, this.src, this.mode, 'POST', JSON.stringify({
            query: utils.dedent(((_a = this.childScript) === null || _a === void 0 ? void 0 : _a.textContent) || ''),
          }))
          : await remote.fetchJson(window, this.src, this.mode);
        if (this.filter) {
          logging.debugIf(this.debug, `n-content-template: filtering: ${this.filter}`);
          data = await jsonata_worker.filterData(this.filter, data);
        }
      }
      catch (error) {
        logging.warn(`n-content-template: unable to fetch and filter data data ${error}`);
      }
    }
    return data;
  }
  render() {
    remote.replaceHtmlInElement(this.el, `.${this.contentClass}`, this.contentElement);
    return null;
  }
  disconnectedCallback() {
    this.dataSubscription.destroy();
    this.routeSubscription.destroy();
  }
  get el() { return index.getElement(this); }
};

exports.n_content_template = ContentTemplate;