How to parse HTML string content to Hole? about uhtml HOT 7 CLOSED

import {render, html as $html, svg as $svg} from 'uhtml';

const templates = new Map;

// handle explicit html("<p>content</p>"), preserving
// the usage as regular tag`...`
const create = tag => (template, ...values) => (
  typeof template === 'string' ?
    tag(templates.get(template) || templates.set(template, [template]).get(template)) :
    tag(template, ...values)
);

const html = create($html);
const svg = create($svg);

// if used as intermediate module/helper
export {render, html, svg};

import {render, html as $html, svg as $svg} from 'uhtml';

const templates = new Map;

// handle explicit html(...args) in case these are posted/JSON
// example of args: [['a', 'c'], 'b']
const create = tag => (template, ...values) => {
  if ('raw' in template)
    return tag(template, ...values);
  const staticContent = template.join('\x01');
  let cached = templates.get(staticContent);
  if (!cached)
    templates.set(staticContent, cached = template);
  return tag(cached, ...values);
};

const html = create($html);
const svg = create($svg);

// if used as intermediate module/helper
export {render, html, svg};

// make tag function serializable
const json = (template, ...values) => [template, ...values];

// example
json`a${'b'}c`;
// [[ "a", "c" ], "b"]

import {render as $render, html as $html, svg as $svg} from 'uhtml';

// the previous code that handles ...args

// from the iframe, render JSON data
const render = (where, json) => {
  return $render(where,  unroll(...json));
};

const {isArray} = Array;
const unroll = (template, ...values) => {
  for (let i = 0, {length} = values; i < length; i++) {
    if (isArray(values[i]) && values[i].length > 0 && isArray(values[i][0]))
      values[i] = unroll(...values[i]);
  }
  return html(template, ...values);
};

const html = (template, ...values) => ({type: 'html', template, values});
const svg = (template, ...values) => ({type: 'svg', template, values});

postMessage(html`<h1>Hello ${html`<strong>World</strong>`}</h1>`);

// the render part is easier this way
const render = (where, json) => {
  return $render(where,  unroll(json));
};

const unroll = ({type, template, values}) => {
  for (let i = 0, {length} = values; i < length; i++) {
    if (
      typeof values[i] === 'object' &&
      values[i] !== null &&
      'type' in values[i] &&
      'template' in values[i] &&
      'values' in values[i]
    )
      values[i] = unroll(values[i]);
  }
  return (type === 'html' ? html : svg)(template, ...values);
};

postMessage(html.json`<h1>This is some ${'content'}</h1>`);

addEventListener('message', ({data}) => {
  render(document.body, data);
});

import {render, html} from '//cdn.skypack.dev/uhtml/json';

addEventListener('message', ({
  data: {action, where, content}
}) => {
  if (action === 'render')
    render(document.querySelector(where), content);
});

const input = value => html.json`<input value=${value} />`;
const greetings = who => html.json`
  <h1>Hello ${who} 👋</h1>
  <p>This demo simply shows uhtml via ${input('JSON')}</p>
  <p>Posted @ ${new Date().toISOString()}</p>
`;

setInterval(
  () => {
    postMessage({
      action: 'render',
      where: 'body',
      content: greetings('There')
    });
  },
  1000
);

const makeItSafe = content => content.replace(/\$/g, `&#${'$'.charCodeAt(0)};`);

const dynamic = 'class-name';
const layout = `<div class="${dynamic}">${makeItSafe('${nope}')}</div>`;