UNPKG

@nent/core

Version:

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.

187 lines (182 loc) 6.93 kB
/*! * NENT 2022 */ 'use strict'; Object.defineProperty(exports, '__esModule', { value: true }); const index = require('./index-1829aebc.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 interfaces$1 = require('./interfaces-1da33056.js'); const state$1 = require('./state-246c735d.js'); const logging = require('./logging-37c154cf.js'); const stateSubscriber = require('./state-subscriber-0ded559f.js'); const state = require('./state-f97ff0e6.js'); const values = require('./values-b2399e33.js'); require('./expressions-531d82f5.js'); require('./factory-0d7ddff9.js'); require('./index-637e8c28.js'); require('./index-96f3ab3f.js'); require('./promises-463f4e01.js'); require('./strings-fe5a8e44.js'); const ContentDataRepeat = class { constructor(hostRef) { index.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() { logging.debugIf(this.debug, 'n-content-repeat: loading'); 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) { logging.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.state.elementsEnabled) { elements.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.state.elementsEnabled) { elements.resolveChildElementXAttributes(this.dynamicContent); } this.dynamicContent.innerHTML = innerContent; if (state$1.state === null || state$1.state === void 0 ? void 0 : state$1.state.router) { (_a = state$1.state.router) === null || _a === void 0 ? void 0 : _a.captureInnerLinks(this.dynamicContent); } this.el.append(this.dynamicContent); } } async resolveHtml(items) { logging.debugIf(this.debug, 'n-content-repeat: resolving html'); 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) { 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 () => tokens.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.state.dataEnabled && tokens.hasToken(text) ? await tokens.resolveTokens(text, true) : text; items = values.valueToArray(JSON.parse(text || '[]')); } catch (error) { logging.warnIf(this.debug, `n-content-repeat: unable to deserialize JSON: ${error}`); } } else if (this.itemsSrc) { items = await this.fetchJson(); } else { logging.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 (tokens.hasToken(filterString)) { filterString = await tokens.resolveTokens(filterString); } logging.debugIf(this.debug, `n-content-repeat: filtering: ${filterString}`); items = values.valueToArray(await jsonata_worker.filterData(filterString, items)); } return items; } async fetchJson() { try { logging.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 values.valueToArray(data); } logging.warnIf(this.debug, `n-content-repeat: Unable to parse response from ${this.itemsSrc}`); } catch (err) { logging.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 && tokens.hasToken(itemsString)) { itemsString = await tokens.resolveTokens(itemsString); logging.debugIf(this.debug, `n-content-repeat: items resolved to ${itemsString}`); } items = itemsString ? JSON.parse(itemsString) : []; } catch (error) { logging.warnIf(this.debug, `n-content-repeat: unable to deserialize JSON: ${error}`); } return items; } render() { return (index.h(index.Host, null, index.h("slot", null))); } disconnectedCallback() { this.dataSubscription.destroy(); this.routeSubscription.destroy(); } get el() { return index.getElement(this); } }; exports.n_content_repeat = ContentDataRepeat;