riot/esm/utils/create-runtime-slots.js

Simple and elegant component-based UI library

/* Riot v10.1.2, @license MIT */
import { template as create } from '../dependencies/@riotjs/dom-bindings/dist/dom-bindings.js';
import bindingTypes from '../dependencies/@riotjs/util/binding-types.js';
import { COMPONENTS_IMPLEMENTATION_MAP } from '../dependencies/@riotjs/util/constants.js';
import expressionTypes from '../dependencies/@riotjs/util/expression-types.js';
import { generateSlotsFromString } from '../dependencies/@riotjs/compiler/dist/compiler.essential.js';

/**
 * Create slots reading the inner HTML of the node
 * @param {HTMLElement} el element we are going to mount
 * @returns {[]|null} Slots array
 */
function createRuntimeSlots(el) {
  if (!el.innerHTML.trim()) return null
  const slotsCode = generateSlotsFromString(el.outerHTML);

  // clear the DOM node once read
  el.innerHTML = '';

  // parse the element html to create the runtime bindings
  return Function(`return ${slotsCode}`)()(
    create,
    expressionTypes,
    bindingTypes,
    (name) => COMPONENTS_IMPLEMENTATION_MAP.get(name),
  )
}

export { createRuntimeSlots as default };