@nent/core/dist/components/n-content-repeat.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
 */
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { r as resolveChildElementXAttributes } from './elements2.js';
import { D as DATA_EVENTS } from './interfaces3.js';
import { f as filterData } from './jsonata.worker.js';
import { resolveTokens, hasToken } from './tokens.js';
import { R as ROUTE_EVENTS } from './interfaces4.js';
import { s as state$1 } from './state4.js';
import { f as debugIf, b as warnIf } from './logging.js';
import { C as CommonStateSubscriber } from './state-subscriber.js';
import { a as state } from './state.js';
import { v as valueToArray } from './values.js';

const ContentDataRepeat = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.dynamicContent = 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;
  }
  get childTemplate() {
    return this.el.querySelector('template');
  }
  get childScript() {
    return this.el.querySelector('script');
  }
  componentWillLoad() {
    debugIf(this.debug, 'n-content-repeat: loading');
    this.dataSubscription = new CommonStateSubscriber(this, 'dataEnabled', DATA_EVENTS.DataChanged);
    this.routeSubscription = new CommonStateSubscriber(this, 'routingEnabled', ROUTE_EVENTS.RouteChanged);
    if (this.childTemplate === null) {
      warnIf(this.debug, 'n-content-repeat: missing child <template> tag');
    }
    else {
      this.innerTemplate = this.childTemplate.innerHTML;
    }
    this.contentKey = `data-content`;
  }
  async componentWillRender() {
    var _a;
    if (!this.innerTemplate)
      return;
    if (this.dynamicContent && !this.noCache) {
      if (state.elementsEnabled) {
        resolveChildElementXAttributes(this.el);
      }
      return;
    }
    const remoteContent = this.el.querySelector(`.${this.contentKey}`);
    remoteContent === null || remoteContent === void 0 ? void 0 : remoteContent.remove();
    const items = await this.resolveItems();
    const innerContent = await this.resolveHtml(items);
    if (innerContent) {
      this.dynamicContent = this.el.ownerDocument.createElement('div');
      this.dynamicContent.className = this.contentKey;
      this.dynamicContent.innerHTML = innerContent;
      if (state.elementsEnabled) {
        resolveChildElementXAttributes(this.dynamicContent);
      }
      this.dynamicContent.innerHTML = innerContent;
      if (state$1 === null || state$1 === void 0 ? void 0 : state$1.router) {
        (_a = state$1.router) === null || _a === void 0 ? void 0 : _a.captureInnerLinks(this.dynamicContent);
      }
      this.el.append(this.dynamicContent);
    }
  }
  async resolveHtml(items) {
    debugIf(this.debug, 'n-content-repeat: resolving html');
    let shouldRender = !this.deferLoad;
    if (shouldRender && this.when && state.dataEnabled) {
      const { evaluatePredicate } = await import('./expressions.js').then(function (n) { return n.f; });
      shouldRender = await evaluatePredicate(this.when);
    }
    if (!shouldRender) {
      return null;
    }
    // DebugIf(this.debug, `n-content-repeat: innerItems ${JSON.stringify(this.resolvedItems || [])}`);
    if (this.innerTemplate) {
      let resolvedTemplate = '';
      return await items.reduce((previousPromise, item) => previousPromise.then(async () => resolveTokens(this.innerTemplate.slice(), false, item).then(html => {
        resolvedTemplate += html;
        return resolvedTemplate;
      })), Promise.resolve());
    }
    return null;
  }
  async resolveItems() {
    var _a;
    let items = [];
    if (this.items) {
      items = await this.resolveItemsExpression();
    }
    else if (this.childScript) {
      try {
        let text = ((_a = this.childScript.textContent) === null || _a === void 0 ? void 0 : _a.replace('\n', '')) || '';
        text =
          state.dataEnabled && hasToken(text)
            ? await resolveTokens(text, true)
            : text;
        items = valueToArray(JSON.parse(text || '[]'));
      }
      catch (error) {
        warnIf(this.debug, `n-content-repeat: unable to deserialize JSON: ${error}`);
      }
    }
    else if (this.itemsSrc) {
      items = await this.fetchJson();
    }
    else {
      warnIf(this.debug, 'n-content-repeat: you must include at least one of the following: items, json-src or a <script> element with a JSON array.');
    }
    if (this.filter) {
      let filterString = this.filter.slice();
      if (hasToken(filterString)) {
        filterString = await resolveTokens(filterString);
      }
      debugIf(this.debug, `n-content-repeat: filtering: ${filterString}`);
      items = valueToArray(await filterData(filterString, items));
    }
    return items;
  }
  async fetchJson() {
    try {
      debugIf(this.debug, `n-content-repeat: fetching items from ${this.itemsSrc}`);
      const response = await window.fetch(this.itemsSrc);
      if (response.status === 200) {
        const data = await response.json();
        return valueToArray(data);
      }
      warnIf(this.debug, `n-content-repeat: Unable to parse response from ${this.itemsSrc}`);
    }
    catch (err) {
      warnIf(this.debug, `n-content-repeat: Unable to parse response from ${this.itemsSrc}: ${err}`);
    }
    return [];
  }
  async resolveItemsExpression() {
    let items = [];
    try {
      let itemsString = this.items;
      if (itemsString && hasToken(itemsString)) {
        itemsString = await resolveTokens(itemsString);
        debugIf(this.debug, `n-content-repeat: items resolved to ${itemsString}`);
      }
      items = itemsString ? JSON.parse(itemsString) : [];
    }
    catch (error) {
      warnIf(this.debug, `n-content-repeat: unable to deserialize JSON: ${error}`);
    }
    return items;
  }
  render() {
    return (h(Host, null, h("slot", null)));
  }
  disconnectedCallback() {
    this.dataSubscription.destroy();
    this.routeSubscription.destroy();
  }
  get el() { return this; }
}, [4, "n-content-repeat", {
    "items": [1],
    "itemsSrc": [1, "items-src"],
    "filter": [1],
    "deferLoad": [1028, "defer-load"],
    "debug": [4],
    "noCache": [4, "no-cache"],
    "when": [1],
    "innerTemplate": [32],
    "resolvedTemplate": [32],
    "dynamicContent": [32]
  }]);
function defineCustomElement$1() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["n-content-repeat"];
  components.forEach(tagName => { switch (tagName) {
    case "n-content-repeat":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, ContentDataRepeat);
      }
      break;
  } });
}

const NContentRepeat = ContentDataRepeat;
const defineCustomElement = defineCustomElement$1;

export { NContentRepeat, defineCustomElement };