@nent/core
Version:
183 lines (180 loc) • 6.6 kB
JavaScript
/*!
* NENT 2022
*/
import { r as registerInstance, h, H as Host, a as getElement } from './index-916ca544.js';
import { r as resolveChildElementXAttributes } from './elements-1b845a48.js';
import { D as DATA_EVENTS } from './interfaces-8c5cd1b8.js';
import { f as filterData } from './jsonata.worker-8bcb5e74.js';
import { resolveTokens, hasToken } from './tokens-78f8cdbe.js';
import { R as ROUTE_EVENTS } from './interfaces-3b78db83.js';
import { s as state$1 } from './state-adf07580.js';
import { f as debugIf, b as warnIf } from './logging-5a93c8af.js';
import { C as CommonStateSubscriber } from './state-subscriber-eb44164a.js';
import { a as state } from './state-27a8a5bc.js';
import { v as valueToArray } from './values-ddfac998.js';
import './expressions-2c27c47c.js';
import './factory-acbf0d3d.js';
import './index-f7016b94.js';
import './index-4bfabbbd.js';
import './promises-584c4ece.js';
import './strings-47d55561.js';
const ContentDataRepeat = class {
constructor(hostRef) {
registerInstance(this, hostRef);
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-2c27c47c.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 getElement(this); }
};
export { ContentDataRepeat as n_content_repeat };