@nent/core/dist/components/n-content-markdown.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, forceUpdate, h, Host } from '@stencil/core/internal/client';
import { e as eventBus } from './index2.js';
import { f as debugIf, e as error } from './logging.js';
import { d as resolveSrc, b as resolveRemoteContent, r as replaceHtmlInElement } from './remote.js';
import { r as resolveChildElementXAttributes } from './elements2.js';
import { b as createWorkerProxy, a as evaluatePredicate } from './expressions.js';
import { D as DATA_EVENTS } from './interfaces3.js';
import { f as filterData } from './jsonata.worker.js';
import { resolveTokens } from './tokens.js';
import { d as dedent } from './utils.js';
import { s as state } from './state4.js';
import { a as state$1, o as onChange } from './state.js';

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

const ContentMarkdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    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 this; }
}, [0, "n-content-markdown", {
    "src": [1],
    "mode": [1],
    "resolveTokens": [4, "resolve-tokens"],
    "deferLoad": [1028, "defer-load"],
    "when": [1],
    "noCache": [4, "no-cache"],
    "json": [1],
    "location": [32]
  }]);
function defineCustomElement$1() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["n-content-markdown"];
  components.forEach(tagName => { switch (tagName) {
    case "n-content-markdown":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, ContentMarkdown);
      }
      break;
  } });
}

const NContentMarkdown = ContentMarkdown;
const defineCustomElement = defineCustomElement$1;

export { NContentMarkdown, defineCustomElement };