How to use r-dom - 10 common examples

import { template as _$template } from "r-dom";
import { getNextMarker as _$getNextMarker } from "r-dom";
import { insert as _$insert } from "r-dom";
import { getNextElement as _$getNextElement } from "r-dom";

const _tmpl$ = _$template(`<span>Hello </span>`),
  _tmpl$2 = _$template(`<span> John</span>`),
  _tmpl$3 = _$template(`<span>Hello John</span>`),
  _tmpl$4 = _$template(`<span>Hello </span>`),
  _tmpl$5 = _$template(`<span> John</span>`),
  _tmpl$6 = _$template(`<span> </span>`),
  _tmpl$7 = _$template(`<span>   </span>`),
  _tmpl$8 = _$template(`<span>Hello</span>`),
  _tmpl$9 = _$template(`<span>&nbsp;&lt;Hi&gt;&nbsp;</span>`);

const trailing = _$getNextElement(_tmpl$);

const leading = _$getNextElement(_tmpl$2);
/* prettier-ignore */

const extraSpaces = _$getNextElement(_tmpl$3);

import { template as _$template } from "r-dom";
import { delegateEvents as _$delegateEvents } from "r-dom";

const _tmpl$ = _$template(`<div id="main"><button>Click Bound</button><button>Click Delegated</button><button>Click Listener</button></div>`);

const template = function () {
  const _el$ = _tmpl$.content.firstChild.cloneNode(true),
        _el$2 = _el$.firstChild,
        _el$3 = _el$2.nextSibling,
        _el$4 = _el$3.nextSibling;

  _el$2.onclick = () =&gt; console.log('bound');

  _el$3.__click = () =&gt; console.log('delegated');

  _el$4.addEventListener("click", () =&gt; console.log('listener'));

  _el$4.addEventListener("CAPS-ev", () =&gt; console.log('custom'));

  return _el$;

import { template as _$template } from "r-dom";

const _tmpl$ = _$template(
  `<div id="main"><style>div { color: red; }</style><h1>Welcome</h1><label for="entry">Edit:</label><input type="text" id="entry"></div>`
);

const template = (function() {
  const _el$ = _tmpl$.cloneNode(true),
    _el$2 = _el$.firstChild,
    _el$3 = _el$2.firstChild;

  return _el$;
})();

import { template as _$template } from "r-dom";
import { createComponent as _$createComponent } from "r-dom";

const _tmpl$ = _$template(``);

const template = _$createComponent(module.A, {});

const template2 = _$createComponent(module.a.B, {});

const template3 = _$createComponent(module.A.B, {});

const template4 = _tmpl$.cloneNode(true);

import { template as _$template } from "r-dom";
import { wrap as _$wrap } from "r-dom";
import { classList as _$classList } from "r-dom";
import { spread as _$spread } from "r-dom";

const _tmpl$ = _$template(
    `<div id="main"><h1 disabled=""><a href="/">Welcome</a></h1></div>`
  ),
  _tmpl$2 = _$template(`<div><div></div><div></div></div>`);

const template = (function() {
  const _el$ = _tmpl$.cloneNode(true),
    _el$2 = _el$.firstChild,
    _el$3 = _el$2.firstChild;

  _$spread(_el$, results, false);

  _$classList(_el$, {
    selected: selected
  });

  Object.assign(_el$.style, {

import { template as _$template } from "r-dom";
import { wrap as _$wrap } from "r-dom";
import { currentContext as _$currentContext } from "r-dom";

const _tmpl$ = _$template(``),
  _tmpl$2 = _$template(
    `<header slot="head">Title</header>`
  ),
  _tmpl$3 = _$template(``);

const template = (function() {
  const _el$ = _tmpl$.cloneNode(true);

  _el$.setAttribute("some-attr", name);

  _el$.someProp = data;
  _el$._context = _$currentContext();
  return _el$;
})();

const template2 = (function() {

import { template as _$template } from "r-dom";
import { createComponent as _$createComponent } from "r-dom";
import { wrapCondition as _$wrapCondition } from "r-dom";
import { insert as _$insert } from "r-dom";

const _tmpl$ = _$template(`<div></div>`);

const template1 = (function() {
  const _el$ = _tmpl$.cloneNode(true);

  _$insert(_el$, simple);

  return _el$;
})();

const template2 = (function() {
  const _el$2 = _tmpl$.cloneNode(true);

  _$insert(_el$2, () =&gt; state.dynamic);

  return _el$2;
})();

import { template as _$template } from "r-dom";
import { getNextElement as _$getNextElement } from "r-dom";

const _tmpl$ = _$template(
  `<div id="main"><button>Click Bound</button><button>Click Delegated</button><button>Click Listener</button></div>`
);

const template = _$getNextElement(_tmpl$, true);

import { template as _$template } from "r-dom";
import { getNextElement as _$getNextElement } from "r-dom";

const _tmpl$ = _$template(
  `<div id="main"><style>div { color: red; }</style><h1>Welcome</h1><label for="entry">Edit:</label><input type="text" id="entry"></div>`
);

const template = (function() {
  const _el$ = _$getNextElement(_tmpl$, true),
    _el$2 = _el$.firstChild,
    _el$3 = _el$2.firstChild;

  return _el$;
})();

import { template as _$template } from "r-dom";
import { getNextElement as _$getNextElement } from "r-dom";

const _tmpl$ = _$template(
  `<div id="main"><style>div { color: red; }</style><h1>Welcome</h1><label for="entry">Edit:</label><input type="text" id="entry"></div>`
);

const template = (function() {
  const _el$ = _$getNextElement(_tmpl$),
    _el$2 = _el$.firstChild,
    _el$3 = _el$2.firstChild;

  return _el$;
})();