@nent/core/dist/esm/n-content-markdown.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
 */
import { r as registerInstance, f as forceUpdate, h, a as getElement, H as Host } from './index-916ca544.js';
import { e as eventBus } from './index-f7016b94.js';
import { f as debugIf, e as error } from './logging-5a93c8af.js';
import { d as resolveSrc, b as resolveRemoteContent, r as replaceHtmlInElement } from './remote-0f753d9a.js';
import { r as resolveChildElementXAttributes } from './elements-1b845a48.js';
import { b as createWorkerProxy, a as evaluatePredicate } from './expressions-2c27c47c.js';
import { D as DATA_EVENTS } from './interfaces-8c5cd1b8.js';
import { f as filterData } from './jsonata.worker-8bcb5e74.js';
import { resolveTokens } from './tokens-78f8cdbe.js';
import { d as dedent } from './utils-337f03b7.js';
import { s as state } from './state-adf07580.js';
import { a as state$1, o as onChange } from './state-27a8a5bc.js';
import './factory-acbf0d3d.js';
import './index-4bfabbbd.js';
import './values-ddfac998.js';
import './promises-584c4ece.js';
import './strings-47d55561.js';

const workerPromise = import('./remarkable.worker-3e911557.js').then(m => m.worker);
const renderMarkdown = /*@__PURE__*/createWorkerProxy(workerPromise, 'stencil.remarkable.worker', 'renderMarkdown');

const ContentMarkdown = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.contentClass = 'rendered-content';
    this.renderCache = {};
    this.location = state.location;
    this.contentElement = null;
    /**
     * Cross Origin Mode
     */
    this.mode = 'cors';
    /**
     * Before rendering HTML, replace any data-tokens with their
     * resolved values. This also commands this element to
     * re-render it's HTML for data-changes. This can affect
     * performance.
     */
    this.resolveTokens = false;
    /**
     * If set, disables auto-rendering of this instance.
     * To fetch the contents change to false or remove
     * attribute.
     */
    this.deferLoad = false;
    /**
     * Force render with data & route changes.
     */
    this.noCache = false;
  }
  async getContentKey() {
    return this.src
      ? await resolveSrc(this.src)
      : this.childScript
        ? 'script'
        : null;
  }
  get canCache() {
    return this.noCache === false && this.resolveTokens === false;
  }
  get childScript() {
    return this.el.querySelector('script');
  }
  async componentWillLoad() {
    if (this.resolveTokens || this.when != undefined) {
      if (state$1.dataEnabled) {
        this.subscribeToDataEvents();
      }
      else {
        this.dataSubscription = onChange('dataEnabled', enabled => {
          if (enabled) {
            this.subscribeToDataEvents();
            this.dataSubscription();
          }
        });
      }
    }
  }
  subscribeToDataEvents() {
    this.dataSubscription = eventBus.on(DATA_EVENTS.DataChanged, () => {
      forceUpdate(this.el);
    });
  }
  async componentWillRender() {
    let shouldRender = !this.deferLoad;
    if (shouldRender && this.when)
      shouldRender = await evaluatePredicate(this.when);
    if (shouldRender) {
      if (this.contentElement && this.canCache)
        return;
      this.contentElement = await this.resolveContentElement();
    }
    else {
      this.contentElement = null;
    }
  }
  async resolveContentElement() {
    var _a;
    const key = await this.getContentKey();
    if (key && this.renderCache[key])
      return this.renderCache[key];
    const content = this.src
      ? await this.getContentFromSrc()
      : await this.getContentFromScript();
    if (content == null)
      return null;
    const div = document.createElement('div');
    div.innerHTML = (await renderMarkdown(content)) || '';
    div.className = this.contentClass;
    if (state$1.elementsEnabled)
      resolveChildElementXAttributes(div);
    (_a = state.router) === null || _a === void 0 ? void 0 : _a.captureInnerLinks(div);
    this.highlight(div);
    if (key && this.canCache)
      this.renderCache[key] = div;
    return div;
  }
  async getContentFromSrc() {
    try {
      let content = await resolveRemoteContent(window, this.src, this.mode, this.resolveTokens);
      if (content && this.json) {
        debugIf(state$1.debug, `n-content-markdown: filtering: ${this.json}`);
        const data = JSON.parse(content);
        content = await filterData(this.json, data);
      }
      return content;
    }
    catch (err) {
      error(`n-content-markdown: unable to retrieve content from ${this.src}. ${err}`);
      return null;
    }
  }
  async getContentFromScript() {
    const element = this.childScript;
    if (!(element === null || element === void 0 ? void 0 : element.textContent))
      return null;
    let content = dedent(element.textContent);
    if (this.resolveTokens)
      content = await resolveTokens(content);
    return content;
  }
  highlight(container) {
    const win = window;
    const prism = win.Prism;
    if (prism === null || prism === void 0 ? void 0 : prism.highlightAllUnder) {
      prism.highlightAllUnder(container);
    }
  }
  render() {
    replaceHtmlInElement(this.el, `.${this.contentClass}`, this.contentElement);
    return h(Host, { hidden: this.contentElement == null });
  }
  disconnectedCallback() {
    var _a;
    (_a = this.dataSubscription) === null || _a === void 0 ? void 0 : _a.call(this);
  }
  get el() { return getElement(this); }
};

export { ContentMarkdown as n_content_markdown };