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.

136 lines (131 loc) 5.1 kB
/*! * NENT 2022 */ 'use strict'; const logging = require('./logging-37c154cf.js'); const state = require('./state-f97ff0e6.js'); const tokens = require('./tokens-4f8bcd42.js'); /** * It replaces the HTML of an element in the DOM with the HTML of another element * @param {HTMLElement} el - HTMLElement - the element to replace the content in * @param {string} existingSelector - The selector to find the existing element to replace. * @param {HTMLElement | null} contentElement - The element that will be inserted into the DOM. * @returns the value of the last expression. */ function replaceHtmlInElement(el, existingSelector, contentElement) { const existing = el.querySelector(existingSelector); const changed = (existing === null || existing === void 0 ? void 0 : existing.innerHTML) != (contentElement === null || contentElement === void 0 ? void 0 : contentElement.innerHTML); if (!changed) return; if (existing) { existing.remove(); } if (contentElement) { el.append(contentElement); } } /** * It fetches the content of a given URL and returns it as a string * @param {Window} win - Window - The window object of the page you're trying to fetch content from. * @param {string} src - The URL of the script to load. * @param {RequestMode} mode - The mode of the request. This can be one of the following: * @returns The content of the file at the given URL. */ async function fetchContent(win, src, mode) { const response = await win.fetch(src, { mode, }); if (response.status == 200 || response.ok) { const content = await response.text(); if (content) return content; return null; } throw new Error(`Request to ${src} was not successful: ${response.statusText}`); } /** * It fetches a JSON file from a URL, and returns the JSON data * @param {Window} win - Window - the window object of the browser * @param {string} src - The URL to fetch. * @param {RequestMode} mode - RequestMode * @param {'GET' | 'POST'} [method=GET] - The HTTP method to use. * @param {string} [body] - The body of the request. * @returns A promise that resolves to the JSON data. */ async function fetchJson(win, src, mode, method = 'GET', body) { const response = await win.fetch(src, { mode, method, body, headers: { 'content-type': 'application/json', }, }); if (response.status == 200 || response.ok) { const data = await response.json(); return data; } throw new Error(`Request to ${src} was not successful: ${response.statusText}`); } /** * It fetches the content of a remote URL, and if data services are enabled, it replaces any tokens in * the content with their corresponding values * @param {Window} win - The window object of the iframe * @param {string} src - The URL of the remote content to fetch. * @param {RequestMode} mode - RequestMode - This is the mode of the request. It can be 'cors', * 'no-cors', or 'same-origin'. * @param {boolean} tokens - boolean * @returns The data from the fetchContent function. */ async function resolveRemoteContent(win, src, mode, tokens$1) { const resolvedSrc = await resolveSrc(src); const data = await fetchContent(win, resolvedSrc, mode); // Only detokenize if data services are enabled return data && tokens$1 && state.state.dataEnabled ? await tokens.resolveTokens(data) : data; } /** * It takes a URL, fetches the content, and returns a div element with the content inside * @param {Window} win - The window object of the current page. * @param {string} src - The URL to retrieve the content from. * @param {RequestMode} mode - RequestMode * @param {string} key - The key is a unique identifier for the remote content. * @param {boolean} tokens - boolean - whether or not to replace tokens in the remote content * @param {string} [slot] - The slot name to use for the content. * @returns A div element with the content of the remote file. */ async function resolveRemoteContentElement(win, src, mode, key, tokens, slot) { try { const content = await resolveRemoteContent(win, src, mode, tokens); if (content == null) return null; const div = window.document.createElement('div'); if (slot) div.slot = 'content'; div.innerHTML = content; div.id = key; return div; } catch (_a) { logging.warn(`remote: Unable to retrieve from ${src}`); return null; } } /** * If data services are enabled and the src has a token, resolve the token, otherwise return the src * @param {string} src - The source of the image. * @returns A function that takes a string and returns a string. */ async function resolveSrc(src) { // Only detokenize if data services are enabled return state.state.dataEnabled && tokens.hasToken(src) ? await tokens.resolveTokens(src) : src; } exports.fetchContent = fetchContent; exports.fetchJson = fetchJson; exports.replaceHtmlInElement = replaceHtmlInElement; exports.resolveRemoteContent = resolveRemoteContent; exports.resolveRemoteContentElement = resolveRemoteContentElement; exports.resolveSrc = resolveSrc;