b8566f5 | atoms-element

git clone https://git.pyrossh.dev/atoms-element

A simple web component library for defining your custom elements. It works on both client and server.

b8566f5 — Peter John 2021-06-26T14:05:19+05:30

initial commit

Generated files not shown: package-lock.json

Files changed (8) hide show

.gitignore +1 -0
package.json +34 -0
readme.md +49 -0
src/index.js +401 -0
src/lit-html-server.js +1679 -0
src/lit-html.js +1246 -0
test/index.test.js +123 -0
test/setup.js +2 -0

.gitignore ADDED Viewed

	@@ -0,0 +1 @@
1	+ node_modules

package.json ADDED Viewed

@@ -0,0 +1,34 @@
+{
+  "name": "atoms-element",
+  "version": "1.0.0",
+  "description": "A simple web component library for defining your custom elements. It works on both client and server. It supports hooks and follows the same principles of react.",
+  "keywords": [
+    "atoms-element",
+    "pyros.sh",
+    "web component",
+    "custom element",
+    "hooks",
+    "react",
+    "lit-html",
+    "lit-html-server",
+    "fuco"
+  ],
+  "license": "MIT",
+  "main": "src/index.js",
+  "author": "pyros.sh",
+  "type": "module",
+  "engines": {
+    "node": ">=14.0.0"
+  },
+  "scripts": {
+    "test": "NODE_OPTIONS=--experimental-vm-modules jest"
+  },
+  "devDependencies": {
+    "jest": "^27.0.5"
+  },
+  "jest": {
+    "setupFilesAfterEnv": [
+      "./test/setup.js"
+    ]
+  }
+}

readme.md ADDED Viewed

@@ -0,0 +1,49 @@
+# atoms-element
+[![Version](https://img.shields.io/npm/v/atoms-element?style=flat-square&color=blue)](https://www.npmjs.com/package/atoms-element)
+A simple web component library for defining your custom elements. It works on both client and server. It supports hooks and follows the same
+principles of react. Props are attributes on the custom element by default so its easier to debug.
+It uses slightly modified versions of these libraries,
+1. [lit-html](https://github.com/lit/lit) on the client
+2. [lit-html-server](https://github.com/popeindustries/lit-html-server) on the server
+3. [fuco](https://github.com/wtnbass/fuco)
+## Installation
+```sh
+npm i atoms-element
+```
+## Usage
+```js
+import { defineElement, html, render, number } from 'atoms-element.js';
+const propTypes = {
+  name: string.isRequired,
+};
+const Counter = ({ name }) => {
+  const [count, setCount] = useState(0);
+  return html`
+    <div>
+      <div class="font-bold mb-2">Counter: ${name}</div>
+      <div class="flex flex-1 flex-row text-3xl text-gray-700">
+        <button @click=${() => setCount((v) => v - 1)}>-</button>
+        <div class="mx-20">
+          <h1 class="text-1xl">${count}</h1>
+        </div>
+        <button @click=${() => setCount((v) => v + 1)}>+</button>
+      </div>
+    </div>
+  `;
+};
+defineElement('app-counter', Counter, propTypes);
+render(html`<app-counter name="1"></app-counter>`, document.body);
+```

src/index.js ADDED Viewed

@@ -0,0 +1,401 @@
+import { html as litHtml, render as litRender, directive as litDirective, NodePart, AttributePart, PropertyPart, isPrimitive } from './lit-html.js';
+import { html as litServerHtml, directive as litServerDirective, isNodePart, isAttributePart, unsafePrefixString, renderToString } from './lit-html-server.js';
+export const registry = {};
+const isBrowser = typeof window.alert !== "undefined";
+export const html = isBrowser ? litHtml : litServerHtml;
+export const render = isBrowser ? litRender : renderToString;
+export const directive = isBrowser ? litDirective : litServerDirective;
+const previousValues = new WeakMap();
+export const unsafeHTML = directive((value) => (part) => {
+  if (isBrowser) {
+    if (!(part instanceof NodePart)) {
+      throw new Error('unsafeHTML can only be used in text bindings');
+    }
+    const previousValue = previousValues.get(part);
+    if (previousValue !== undefined && isPrimitive(value) &&
+      value === previousValue.value && part.value === previousValue.fragment) {
+      return;
+    }
+    const template = document.createElement('template');
+    template.innerHTML = value; // innerHTML casts to string internally
+    const fragment = document.importNode(template.content, true);
+    part.setValue(fragment);
+    previousValues.set(part, { value, fragment });
+  } else {
+    if (!isNodePart(part)) {
+      throw Error('The `unsafeHTML` directive can only be used in text nodes');
+    }
+    part.setValue(`${unsafePrefixString}${value}`);
+  }
+});
+const previousClassesCache = new WeakMap();
+export const classMap = directive((classInfo) => (part) => {
+  if (isBrowser) {
+    if (!(part instanceof AttributePart) || (part instanceof PropertyPart) ||
+      part.committer.name !== 'class' || part.committer.parts.length > 1) {
+      throw new Error('The `classMap` directive must be used in the `class` attribute ' +
+        'and must be the only part in the attribute.');
+    }
+    const { committer } = part;
+    const { element } = committer;
+    let previousClasses = previousClassesCache.get(part);
+    if (previousClasses === undefined) {
+      // Write static classes once
+      // Use setAttribute() because className isn't a string on SVG elements
+      element.setAttribute('class', committer.strings.join(' '));
+      previousClassesCache.set(part, previousClasses = new Set());
+    }
+    const classList = element.classList;
+    // Remove old classes that no longer apply
+    // We use forEach() instead of for-of so that re don't require down-level
+    // iteration.
+    previousClasses.forEach((name) => {
+      if (!(name in classInfo)) {
+        classList.remove(name);
+        previousClasses.delete(name);
+      }
+    });
+    // Add or remove classes based on their classMap value
+    for (const name in classInfo) {
+      const value = classInfo[name];
+      if (value != previousClasses.has(name)) {
+        // We explicitly want a loose truthy check of `value` because it seems
+        // more convenient that '' and 0 are skipped.
+        if (value) {
+          classList.add(name);
+          previousClasses.add(name);
+        }
+        else {
+          classList.remove(name);
+          previousClasses.delete(name);
+        }
+      }
+    }
+    if (typeof classList.commit === 'function') {
+      classList.commit();
+    }
+  } else {
+    if (!isAttributePart(part) || part.name !== 'class') {
+      throw Error('The `classMap` directive can only be used in the `class` attribute');
+    }
+    const classes = (classInfo);
+    let value = '';
+    for (const key in classes) {
+      if (classes[key]) {
+        value += `${value.length ? ' ' : ''}${key}`;
+      }
+    }
+    part.setValue(value);
+  }
+});
+let currentCursor;
+let currentComponent;
+export const logError = (msg) => {
+  if (window.logError) {
+    window.logError(msg);
+  } else {
+    console.warn(msg);
+  }
+}
+const checkRequired = (context, data) => {
+  if (data === null || typeof data === 'undefined') {
+    logError(`'${context}' Field is required`);
+  }
+}
+const checkPrimitive = (primitiveType) => {
+  const common = {
+    type: primitiveType,
+    parse: (attr) => attr,
+  }
+  const validate = (context, data) => {
+    if (data === null || typeof data === 'undefined') {
+      return;
+    }
+    const dataType = typeof data;
+    if (dataType !== primitiveType) {
+      logError(`'${context}' Expected type '${primitiveType}' got type '${dataType}'`);
+    }
+  }
+  return {
+    validate,
+    ...common,
+    isRequired: {
+      ...common,
+      validate: (context, data) => {
+        checkRequired(context, data);
+        validate(context, data);
+      }
+    }
+  }
+}
+const checkComplex = (complexType, validate) => {
+  const common = {
+    type: complexType,
+    parse: (attr) => attr ? JSON.parse(attr.replace(/'/g, `"`)) : null
+  };
+  return (innerType) => {
+    return {
+      ...common,
+      validate: (context, data) => {
+        if (!data) {
+          return;
+        }
+        validate(innerType, context, data)
+      },
+      isRequired: {
+        ...common,
+        validate: (context, data) => {
+          checkRequired(context, data);
+          validate(innerType, context, data);
+        }
+      },
+    }
+  }
+}
+export const number = checkPrimitive('number');
+export const string = checkPrimitive('string');
+export const boolean = checkPrimitive('boolean');
+export const object = checkComplex('object', (innerType, context, data) => {
+  if (data.constructor !== Object) {
+    logError(`'${context}' Expected object literal '{}' got '${typeof data}'`);
+  }
+  for (const key of Object.keys(innerType)) {
+    const fieldValidator = innerType[key];
+    const item = data[key];
+    fieldValidator.validate(`${context}.${key}`, item)
+  }
+});
+export const array = checkComplex('array', (innerType, context, data) => {
+  if (!Array.isArray(data)) {
+    logError(`Expected Array got ${data}`);
+  }
+  for (let i = 0; i < data.length; i++) {
+    const item = data[i];
+    innerType.validate(`${context}[${i}]`, item)
+  }
+});
+export const func = checkComplex('function', (innerType, context, data) => {
+});
+export const hooks = (config) => {
+  const h = currentComponent.hooks;
+  const c = currentComponent;
+  const index = currentCursor++;
+  if (h.values.length <= index && config.oncreate) {
+    h.values[index] = config.oncreate(h, c, index);
+  }
+  if (config.onupdate) {
+    h.values[index] = config.onupdate(h, c, index);
+  }
+  return h.values[index];
+}
+export const defaultHooks = () => ({
+  values: [],
+  deps: [],
+  effects: [],
+  layoutEffects: [],
+  cleanup: []
+});
+export const __setCurrent__ = (c) => {
+  currentComponent = c;
+  currentCursor = 0;
+}
+export const useDispatchEvent = (name) => hooks({
+  oncreate: (_, c) => (data) => c.dispatchEvent(new CustomEvent(name, data))
+});
+export const useRef = (initialValue) => hooks({
+  oncreate: (_h, _c) => ({ current: initialValue })
+});
+export const useState = (initialState) => hooks({
+  oncreate: (h, c, i) => [
+    typeof initialState === "function"
+      ? initialState()
+      : initialState,
+    function setState(nextState) {
+      const state = h.values[i][0];
+      if (typeof nextState === "function") {
+        nextState = nextState(state);
+      }
+      if (!Object.is(state, nextState)) {
+        h.values[i][0] = nextState;
+        c.update();
+      }
+    }
+  ]
+});
+export const useReducer = (reducer, initialState) => hooks({
+  oncreate: (h, c, i) => [
+    initialState,
+    function dispatch(action) {
+      const state = h.values[i][0];
+      const nextState = reducer(state, action);
+      if (!Object.is(state, nextState)) {
+        h.values[i][0] = nextState;
+        c.update();
+      }
+    }
+  ]
+});
+const depsChanged = (prev, next) => prev == null || next.some((f, i) => !Object.is(f, prev[i]));
+export const useEffect = (handler, deps) => hooks({
+  onupdate(h, _, i) {
+    if (!deps || depsChanged(h.deps[i], deps)) {
+      h.deps[i] = deps || [];
+      h.effects[i] = handler;
+    }
+  }
+});
+export const useLayoutEffect = (handler, deps) => hooks({
+  onupdate(h, _, i) {
+    if (!deps || depsChanged(h.deps[i], deps)) {
+      h.deps[i] = deps || [];
+      h.layoutEffects[i] = handler;
+    }
+  }
+});
+export const useMemo = (fn, deps) => hooks({
+  onupdate(h, _, i) {
+    let value = h.values[i];
+    if (!deps || depsChanged(h.deps[i], deps)) {
+      h.deps[i] = deps || [];
+      value = fn();
+    }
+    return value;
+  }
+});
+export const useCallback = (callback, deps) => useMemo(() => callback, deps);
+const batch = (runner, pick, callback) => {
+  const q = [];
+  const flush = () => {
+    let p;
+    while ((p = pick(q)))
+      callback(p);
+  };
+  const run = runner(flush);
+  return (c) => q.push(c) === 1 && run();
+};
+const fifo = (q) => q.shift();
+const filo = (q) => q.pop();
+const microtask = (flush) => {
+  return () => queueMicrotask(flush);
+};
+const task = (flush) => {
+  if (isBrowser) {
+    const ch = new MessageChannel();
+    ch.port1.onmessage = flush;
+    return () => ch.port2.postMessage(null);
+  }
+  else {
+    return () => setImmediate(flush);
+  }
+};
+const enqueueLayoutEffects = batch(microtask, filo, c => c._flushEffects("layoutEffects"));
+const enqueueEffects = batch(task, filo, c => c._flushEffects("effects"));
+const enqueueUpdate = batch(microtask, fifo, c => c._performUpdate());
+export function defineElement(name, fn, propTypes = {}) {
+  registry[name] = fn;
+  const keys = Object.keys(propTypes);
+  const funcKeys = keys.filter((key) => propTypes[key].type === 'function');
+  const attributes = keys.filter((key) => propTypes[key].type !== 'function').reduce((acc, key) => {
+    acc[key.toLowerCase()] = {
+      propName: key,
+      propType: propTypes[key],
+    };
+    return acc;
+  }, {});
+  if (isBrowser) {
+    if (customElements.get(name)) {
+      return;
+    }
+    customElements.define(name, class extends HTMLElement {
+      constructor() {
+        super(...arguments);
+        this._dirty = false;
+        this._connected = false;
+        this.hooks = defaultHooks();
+        this.props = {};
+        this.renderer = fn;
+      }
+      connectedCallback() {
+        this._connected = true;
+        this.update();
+      }
+      disconnectedCallback() {
+        this._connected = false;
+        let cleanup;
+        while ((cleanup = this.hooks.cleanup.shift())) {
+          cleanup();
+        }
+      }
+      static get observedAttributes() {
+        return Object.keys(attributes);
+      }
+      attributeChangedCallback(key, oldValue, newValue) {
+        const attr = attributes[key];
+        const data = attr.propType.parse(newValue);
+        attr.propType.validate(`<${name}> ${key}`, data);
+        this.props[attr.propName] = data;
+        if (this._connected) {
+          this.update();
+        }
+      }
+      update() {
+        if (this._dirty) {
+          return;
+        }
+        this._dirty = true;
+        enqueueUpdate(this);
+      }
+      _performUpdate() {
+        if (!this._connected) {
+          return;
+        }
+        __setCurrent__(this);
+        this.render();
+        enqueueLayoutEffects(this);
+        enqueueEffects(this);
+        this._dirty = false;
+      }
+      _flushEffects(effectKey) {
+        const effects = this.hooks[effectKey];
+        const cleanups = this.hooks.cleanup;
+        for (let i = 0, len = effects.length; i < len; i++) {
+          if (effects[i]) {
+            cleanups[i] && cleanups[i]();
+            const cleanup = effects[i]();
+            if (cleanup) {
+              cleanups[i] = cleanup;
+            }
+            delete effects[i];
+          }
+        }
+      }
+      render() {
+        funcKeys.forEach((key) => {
+          this.props[key] = this[key]
+        })
+        render(this.renderer(this.props), this);
+      }
+    });
+  }
+}
+export const getElement = (name) => registry[name];

src/lit-html-server.js ADDED Viewed

@@ -0,0 +1,1679 @@
+/* SNOWPACK PROCESS POLYFILL (based on https://github.com/calvinmetcalf/node-process-es6) */
+function defaultSetTimout() {
+  throw new Error('setTimeout has not been defined');
+}
+function defaultClearTimeout() {
+  throw new Error('clearTimeout has not been defined');
+}
+var cachedSetTimeout = defaultSetTimout;
+var cachedClearTimeout = defaultClearTimeout;
+var globalContext;
+if (typeof window !== 'undefined') {
+  globalContext = window;
+} else if (typeof self !== 'undefined') {
+  globalContext = self;
+} else {
+  globalContext = {};
+}
+if (typeof globalContext.setTimeout === 'function') {
+  cachedSetTimeout = setTimeout;
+}
+if (typeof globalContext.clearTimeout === 'function') {
+  cachedClearTimeout = clearTimeout;
+}
+function runTimeout(fun) {
+  if (cachedSetTimeout === setTimeout) {
+    //normal enviroments in sane situations
+    return setTimeout(fun, 0);
+  }
+  // if setTimeout wasn't available but was latter defined
+  if ((cachedSetTimeout === defaultSetTimout || !cachedSetTimeout) && setTimeout) {
+    cachedSetTimeout = setTimeout;
+    return setTimeout(fun, 0);
+  }
+  try {
+    // when when somebody has screwed with setTimeout but no I.E. maddness
+    return cachedSetTimeout(fun, 0);
+  } catch (e) {
+    try {
+      // When we are in I.E. but the script has been evaled so I.E. doesn't trust the global object when called normally
+      return cachedSetTimeout.call(null, fun, 0);
+    } catch (e) {
+      // same as above but when it's a version of I.E. that must have the global object for 'this', hopfully our context correct otherwise it will throw a global error
+      return cachedSetTimeout.call(this, fun, 0);
+    }
+  }
+}
+function runClearTimeout(marker) {
+  if (cachedClearTimeout === clearTimeout) {
+    //normal enviroments in sane situations
+    return clearTimeout(marker);
+  }
+  // if clearTimeout wasn't available but was latter defined
+  if ((cachedClearTimeout === defaultClearTimeout || !cachedClearTimeout) && clearTimeout) {
+    cachedClearTimeout = clearTimeout;
+    return clearTimeout(marker);
+  }
+  try {
+    // when when somebody has screwed with setTimeout but no I.E. maddness
+    return cachedClearTimeout(marker);
+  } catch (e) {
+    try {
+      // When we are in I.E. but the script has been evaled so I.E. doesn't  trust the global object when called normally
+      return cachedClearTimeout.call(null, marker);
+    } catch (e) {
+      // same as above but when it's a version of I.E. that must have the global object for 'this', hopfully our context correct otherwise it will throw a global error.
+      // Some versions of I.E. have different rules for clearTimeout vs setTimeout
+      return cachedClearTimeout.call(this, marker);
+    }
+  }
+}
+var queue = [];
+var draining = false;
+var currentQueue;
+var queueIndex = -1;
+function cleanUpNextTick() {
+  if (!draining || !currentQueue) {
+    return;
+  }
+  draining = false;
+  if (currentQueue.length) {
+    queue = currentQueue.concat(queue);
+  } else {
+    queueIndex = -1;
+  }
+  if (queue.length) {
+    drainQueue();
+  }
+}
+function drainQueue() {
+  if (draining) {
+    return;
+  }
+  var timeout = runTimeout(cleanUpNextTick);
+  draining = true;
+  var len = queue.length;
+  while (len) {
+    currentQueue = queue;
+    queue = [];
+    while (++queueIndex < len) {
+      if (currentQueue) {
+        currentQueue[queueIndex].run();
+      }
+    }
+    queueIndex = -1;
+    len = queue.length;
+  }
+  currentQueue = null;
+  draining = false;
+  runClearTimeout(timeout);
+}
+function nextTick(fun) {
+  var args = new Array(arguments.length - 1);
+  if (arguments.length > 1) {
+    for (var i = 1; i < arguments.length; i++) {
+      args[i - 1] = arguments[i];
+    }
+  }
+  queue.push(new Item(fun, args));
+  if (queue.length === 1 && !draining) {
+    runTimeout(drainQueue);
+  }
+}
+// v8 likes predictible objects
+function Item(fun, array) {
+  this.fun = fun;
+  this.array = array;
+}
+Item.prototype.run = function () {
+  this.fun.apply(null, this.array);
+};
+var title = 'browser';
+var platform = 'browser';
+var browser = true;
+var argv = [];
+var version = ''; // empty string to avoid regexp issues
+var versions = {};
+var release = {};
+var config = {};
+function noop() { }
+var on = noop;
+var addListener = noop;
+var once = noop;
+var off = noop;
+var removeListener = noop;
+var removeAllListeners = noop;
+var emit = noop;
+function binding(name) {
+  throw new Error('process.binding is not supported');
+}
+function cwd() { return '/' }
+function chdir(dir) {
+  throw new Error('process.chdir is not supported');
+} function umask() { return 0; }
+// from https://github.com/kumavis/browser-process-hrtime/blob/master/index.js
+var performance = globalContext.performance || {};
+var performanceNow =
+  performance.now ||
+  performance.mozNow ||
+  performance.msNow ||
+  performance.oNow ||
+  performance.webkitNow ||
+  function () { return (new Date()).getTime() };
+// generate timestamp or delta
+// see http://nodejs.org/api/process.html#process_process_hrtime
+function hrtime(previousTimestamp) {
+  var clocktime = performanceNow.call(performance) * 1e-3;
+  var seconds = Math.floor(clocktime);
+  var nanoseconds = Math.floor((clocktime % 1) * 1e9);
+  if (previousTimestamp) {
+    seconds = seconds - previousTimestamp[0];
+    nanoseconds = nanoseconds - previousTimestamp[1];
+    if (nanoseconds < 0) {
+      seconds--;
+      nanoseconds += 1e9;
+    }
+  }
+  return [seconds, nanoseconds]
+}
+var startTime = new Date();
+function uptime() {
+  var currentTime = new Date();
+  var dif = currentTime - startTime;
+  return dif / 1000;
+}
+var process = {
+  nextTick: nextTick,
+  title: title,
+  browser: browser,
+  env: { "NODE_ENV": "production" },
+  argv: argv,
+  version: version,
+  versions: versions,
+  on: on,
+  addListener: addListener,
+  once: once,
+  off: off,
+  removeListener: removeListener,
+  removeAllListeners: removeAllListeners,
+  emit: emit,
+  binding: binding,
+  cwd: cwd,
+  chdir: chdir,
+  umask: umask,
+  hrtime: hrtime,
+  platform: platform,
+  release: release,
+  config: config,
+  uptime: uptime
+};
+/**
+ * Collection of shared utilities used by directives.
+ * Manually added to ensure that directives can be used by both index.js and browser.js
+ */
+/**
+ * A value for parts that signals a Part to clear its content
+ */
+const nothing = '__nothing-lit-html-server-string__';
+/**
+ * A prefix value for strings that should not be escaped
+ */
+const unsafePrefixString = '__unsafe-lit-html-server-string__';
+/**
+ * Determine if "part" is a NodePart
+ *
+ * @param { unknown } part
+ * @returns { part is NodePart }
+ */
+function isNodePart(part) {
+  // @ts-ignore
+  return part && part.getValue !== undefined && !('name' in part);
+}
+/**
+ * Determine if "part" is an AttributePart
+ *
+ * @param { unknown } part
+ * @returns { part is AttributePart }
+ */
+function isAttributePart(part) {
+  // @ts-ignore
+  return part && part.getValue !== undefined && 'name' in part;
+}
+/**
+ * Determine if "value" is a primitive
+ *
+ * @param { unknown } value
+ * @returns { value is null|string|boolean|number }
+ */
+function isPrimitive(value) {
+  const type = typeof value;
+  return value === null || !(type === 'object' || type === 'function');
+}
+/**
+ * Determine if "obj" is a directive function
+ *
+ * @param { unknown } fn
+ * @returns { fn is Function }
+ */
+function isDirective(fn) {
+  // @ts-ignore
+  return typeof fn === 'function' && fn.isDirective;
+}
+/**
+ * Define new directive for "fn".
+ * The passed function should be a factory function,
+ * and must return a function that will eventually be called with a Part instance
+ *
+ * @param { (...args: Array<unknown>) => (part: Part) => void } fn
+ * @returns { (...args: Array<unknown>) => (part: Part) => void }
+ */
+function directive(fn) {
+  return function directive(...args) {
+    const result = fn(...args);
+    if (typeof result !== 'function') {
+      throw Error('directives are factory functions and must return a function when called');
+    }
+    // @ts-ignore
+    result.isDirective = true;
+    return result;
+  };
+}
+/* global ReadableStream */
+/**
+ * A custom Readable stream factory for rendering a template result to a stream
+ *
+ * @param { TemplateResult } result - a template result returned from call to "html`...`"
+ * @param { TemplateResultProcessor } processor
+ * @param { RenderOptions } [options]
+ * @returns { ReadableStream }
+ */
+function browserStreamTemplateRenderer(result, processor, options) {
+  if (typeof ReadableStream === 'undefined') {
+    throw Error('ReadableStream not supported on this platform');
+  }
+  if (typeof TextEncoder === 'undefined') {
+    throw Error('TextEncoder not supported on this platform');
+  }
+  return new ReadableStream({
+    // @ts-ignore
+    process: null,
+    start(controller) {
+      const encoder = new TextEncoder();
+      const underlyingSource = this;
+      let stack = [result];
+      this.process = processor.getProcessor(
+        {
+          push(chunk) {
+            if (chunk === null) {
+              controller.close();
+              return false;
+            }
+            controller.enqueue(encoder.encode(chunk.toString()));
+            // Pause processing (return "false") if stream is full
+            return controller.desiredSize != null ? controller.desiredSize > 0 : true;
+          },
+          destroy(err) {
+            controller.error(err);
+            underlyingSource.process = undefined;
+            // @ts-ignore
+            stack = undefined;
+          },
+        },
+        stack,
+        16384,
+        options
+      );
+    },
+    pull() {
+      this.process();
+    },
+  });
+}
+/**
+ * A minimal Buffer class that implements a partial brower Buffer API around strings.
+ * This module should be provided as an alias for Node's built-in 'buffer' module
+ * when run in the browser.
+ * @see package.json#browser
+ */
+class Buffer {
+  /**
+   * Determine if 'buffer' is a buffer
+   *
+   * @param { any } buffer
+   * @returns { boolean }
+   */
+  static isBuffer(buffer) {
+    return buffer != null && typeof buffer === 'object' && buffer.string !== undefined;
+  }
+  /**
+   * Create buffer from 'string'
+   *
+   * @param { string } string
+   * @returns { Buffer }
+   */
+  static from(string) {
+    string = typeof string === 'string' ? string : String(string);
+    return new Buffer(string);
+  }
+  /**
+   * Join 'buffers' into a single string
+   *
+   * @param { Array<any> } buffers
+   * @param { number } [length]
+   * @returns { Buffer }
+   */
+  static concat(buffers, length) {
+    let string = '';
+    for (let i = 0, n = buffers.length; i < n; i++) {
+      const buffer = buffers[i];
+      string += typeof buffer === 'string' ? buffer : String(buffer);
+    }
+    if (length !== undefined && string.length > length) {
+      string = string.slice(0, length);
+    }
+    return new Buffer(string);
+  }
+  /**
+   * Construct Buffer instance
+   *
+   * @param { string } string
+   */
+  constructor(string) {
+    this.string = string;
+  }
+  /**
+   * Stringify
+   *
+   * @returns { string }
+   */
+  toString() {
+    return this.string;
+  }
+}
+/**
+ * Determine whether "result" is a TemplateResult
+ *
+ * @param { unknown } result
+ * @returns { result is TemplateResult }
+ */
+function isTemplateResult(result) {
+  // @ts-ignore
+  return result && typeof result.template !== 'undefined' && typeof result.values !== 'undefined';
+}
+/**
+ * Determine if "promise" is a Promise instance
+ *
+ * @param { unknown } promise
+ * @returns { promise is Promise<unknown> }
+ */
+function isPromise(promise) {
+  // @ts-ignore
+  return promise != null && promise.then != null;
+}
+/**
+ * Determine if "iterator" is an synchronous iterator
+ *
+ * @param { unknown } iterator
+ * @returns { iterator is IterableIterator<unknown> }
+ */
+function isSyncIterator(iterator) {
+  return (
+    iterator != null &&
+    // Ignore strings (which are also iterable)
+    typeof iterator !== 'string' &&
+    // @ts-ignore
+    typeof iterator[Symbol.iterator] === 'function'
+  );
+}
+/**
+ * Determine if "iterator" is an asynchronous iterator
+ *
+ * @param { unknown } iterator
+ * @returns { iterator is AsyncIterable<unknown> }
+ */
+function isAsyncIterator(iterator) {
+  // @ts-ignore
+  return iterator != null && typeof iterator[Symbol.asyncIterator] === 'function';
+}
+/**
+ * Determine if "result" is an iterator result object
+ *
+ * @param { unknown } result
+ * @returns { result is IteratorResult<unknown, unknown> }
+ */
+function isIteratorResult(result) {
+  // @ts-ignore
+  return result != null && typeof result === 'object' && 'value' in result && 'done' in result;
+}
+/**
+ * Determine if "value" is an object
+ *
+ * @param { unknown } value
+ * @returns { value is object }
+ */
+function isObject(value) {
+  return Object.prototype.toString.call(value) === '[object Object]';
+}
+/**
+ * Determine if "value" is a Buffer
+ *
+ * @param { unknown } value
+ * @returns { value is Buffer }
+ */
+function isBuffer(value) {
+  return Buffer.isBuffer(value);
+}
+/**
+ * Determine if "value" is an Array
+ *
+ * @param { unknown } value
+ * @returns { value is Array }
+ */
+function isArray(value) {
+  return Array.isArray(value);
+}
+// https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html#output-encoding-rules-summary
+// https://github.com/mathiasbynens/jsesc/blob/master/jsesc.js
+/** @type { { [name: string]: string } } */
+const HTML_ESCAPES = {
+  '"': '&quot;',
+  "'": '&#x27;',
+  '&': '&amp;',
+  '<': '&lt;',
+  '>': '&gt;',
+};
+const RE_HTML = /["'&<>]/g;
+const RE_SCRIPT_STYLE_TAG = /<\/(script|style)/gi;
+/**
+ * Safely escape "string" for inlining
+ *
+ * @param { string } string
+ * @param { string } context - one of text|attribute|script|style
+ * @returns { string }
+ */
+function escape(string, context = 'text') {
+  switch (context) {
+    case 'script':
+    case 'style':
+      return string.replace(RE_SCRIPT_STYLE_TAG, '<\\/$1').replace(/<!--/g, '\\x3C!--');
+    case 'attribute':
+    case 'text':
+    default:
+      return string.replace(RE_HTML, (match) => HTML_ESCAPES[match]);
+  }
+}
+const EMPTY_STRING_BUFFER = Buffer.from('');
+/**
+ * Base class interface for Node/Attribute parts
+ */
+class Part {
+  /**
+   * Constructor
+   *
+   * @param { string } tagName
+   */
+  constructor(tagName) {
+    this.tagName = tagName;
+    this._value;
+  }
+  /**
+   * Store the current value.
+   * Used by directives to temporarily transfer value
+   * (value will be deleted after reading).
+   *
+   * @param { any } value
+   */
+  setValue(value) {
+    this._value = value;
+  }
+  /**
+   * Retrieve resolved string from passed "value"
+   *
+   * @param { any } value
+   * @param { RenderOptions } [options]
+   * @returns { any }
+   */
+  getValue(value, options) {
+    return value;
+  }
+  /**
+   * No-op
+   */
+  commit() { }
+}
+/**
+ * A dynamic template part for text nodes
+ */
+class NodePart extends Part {
+  /**
+   * Retrieve resolved value given passed "value"
+   *
+   * @param { any } value
+   * @param { RenderOptions } [options]
+   * @returns { any }
+   */
+  getValue(value, options) {
+    return resolveNodeValue(value, this);
+  }
+}
+/**
+ * A dynamic template part for attributes.
+ * Unlike text nodes, attributes may contain multiple strings and parts.
+ */
+class AttributePart extends Part {
+  /**
+   * Constructor
+   *
+   * @param { string } name
+   * @param { Array<Buffer> } strings
+   * @param { string } tagName
+   */
+  constructor(name, strings, tagName) {
+    super(tagName);
+    this.name = name;
+    this.strings = strings;
+    this.length = strings.length - 1;
+    this.prefix = Buffer.from(`${this.name}="`);
+    this.suffix = Buffer.from(`${this.strings[this.length]}"`);
+  }
+  /**
+   * Retrieve resolved string Buffer from passed "values".
+   * Resolves to a single string, or Promise for a single string,
+   * even when responsible for multiple values.
+   *
+   * @param { Array<unknown> } values
+   * @param { RenderOptions } [options]
+   * @returns { Buffer | Promise<Buffer> }
+   */
+  getValue(values, options) {
+    let chunks = [this.prefix];
+    let chunkLength = this.prefix.length;
+    let pendingChunks;
+    for (let i = 0; i < this.length; i++) {
+      const string = this.strings[i];
+      let value = resolveAttributeValue(
+        values[i],
+        this,
+        options !== undefined ? options.serializePropertyAttributes : false
+      );
+      // Bail if 'nothing'
+      if (value === nothing) {
+        return EMPTY_STRING_BUFFER;
+      }
+      chunks.push(string);
+      chunkLength += string.length;
+      if (isBuffer(value)) {
+        chunks.push(value);
+        chunkLength += value.length;
+      } else if (isPromise(value)) {
+        // Lazy init for uncommon scenario
+        if (pendingChunks === undefined) {
+          pendingChunks = [];
+        }
+        // @ts-ignore
+        const index = chunks.push(value) - 1;
+        pendingChunks.push(
+          value.then((value) => {
+            // @ts-ignore
+            chunks[index] = value;
+            // @ts-ignore
+            chunkLength += value.length;
+          })
+        );
+      } else if (isArray(value)) {
+        for (const chunk of value) {
+          chunks.push(chunk);
+          chunkLength += chunk.length;
+        }
+      }
+    }
+    chunks.push(this.suffix);
+    chunkLength += this.suffix.length;
+    if (pendingChunks !== undefined) {
+      return Promise.all(pendingChunks).then(() => Buffer.concat(chunks, chunkLength));
+    }
+    return Buffer.concat(chunks, chunkLength);
+  }
+}
+/**
+ * A dynamic template part for boolean attributes.
+ * Boolean attributes are prefixed with "?"
+ */
+class BooleanAttributePart extends AttributePart {
+  /**
+   * Constructor
+   *
+   * @param { string } name
+   * @param { Array<Buffer> } strings
+   * @param { string } tagName
+   * @throws error when multiple expressions
+   */
+  constructor(name, strings, tagName) {
+    super(name, strings, tagName);
+    this.nameAsBuffer = Buffer.from(this.name);
+    if (
+      strings.length !== 2 ||
+      strings[0] === EMPTY_STRING_BUFFER ||
+      strings[1] === EMPTY_STRING_BUFFER
+    ) {
+      throw Error('Boolean attributes can only contain a single expression');
+    }
+  }
+  /**
+   * Retrieve resolved string Buffer from passed "values".
+   *
+   * @param { Array<unknown> } values
+   * @param { RenderOptions } [options]
+   * @returns { Buffer | Promise<Buffer> }
+   */
+  getValue(values, options) {
+    let value = values[0];
+    if (isDirective(value)) {
+      value = resolveDirectiveValue(value, this);
+    }
+    if (isPromise(value)) {
+      return value.then((value) => (value ? this.nameAsBuffer : EMPTY_STRING_BUFFER));
+    }
+    return value ? this.nameAsBuffer : EMPTY_STRING_BUFFER;
+  }
+}
+/**
+ * A dynamic template part for property attributes.
+ * Property attributes are prefixed with "."
+ */
+class PropertyAttributePart extends AttributePart {
+  /**
+   * Retrieve resolved string Buffer from passed "values".
+   * Returns an empty string unless "options.serializePropertyAttributes=true"
+   *
+   * @param { Array<unknown> } values
+   * @param { RenderOptions } [options]
+   * @returns { Buffer | Promise<Buffer> }
+   */
+  getValue(values, options) {
+    if (options !== undefined && options.serializePropertyAttributes) {
+      const value = super.getValue(values, options);
+      const prefix = Buffer.from('.');
+      return value instanceof Promise
+        ? value.then((value) => Buffer.concat([prefix, value]))
+        : Buffer.concat([prefix, value]);
+    }
+    return EMPTY_STRING_BUFFER;
+  }
+}
+/**
+ * A dynamic template part for event attributes.
+ * Event attributes are prefixed with "@"
+ */
+class EventAttributePart extends AttributePart {
+  /**
+   * Retrieve resolved string Buffer from passed "values".
+   * Event bindings have no server-side representation,
+   * so always returns an empty string.
+   *
+   * @param { Array<unknown> } values
+   * @param { RenderOptions } [options]
+   * @returns { Buffer }
+   */
+  getValue(values, options) {
+    return EMPTY_STRING_BUFFER;
+  }
+}
+/**
+ * Resolve "value" to string if possible
+ *
+ * @param { unknown } value
+ * @param { AttributePart } part
+ * @param { boolean } [serialiseObjectsAndArrays]
+ * @returns { any }
+ */
+function resolveAttributeValue(value, part, serialiseObjectsAndArrays = false) {
+  if (isDirective(value)) {
+    value = resolveDirectiveValue(value, part);
+  }
+  if (value === nothing) {
+    return value;
+  }
+  if (isPrimitive(value)) {
+    const string = typeof value !== 'string' ? String(value) : value;
+    // Escape if not prefixed with unsafePrefixString, otherwise strip prefix
+    return Buffer.from(
+      string.indexOf(unsafePrefixString) === 0 ? string.slice(33) : escape(string, 'attribute')
+    );
+  } else if (typeof value === 'object') {
+    return Buffer.from(JSON.stringify(value).replace(/"/g, `'`));
+  } else if (isBuffer(value)) {
+    return value;
+  } else if (serialiseObjectsAndArrays && (isObject(value) || isArray(value))) {
+    return Buffer.from(escape(JSON.stringify(value), 'attribute'));
+  } else if (isPromise(value)) {
+    return value.then((value) => resolveAttributeValue(value, part, serialiseObjectsAndArrays));
+  } else if (isSyncIterator(value)) {
+    if (!isArray(value)) {
+      value = Array.from(value);
+    }
+    return Buffer.concat(
+      // @ts-ignore: already converted to Array
+      value.reduce((values, value) => {
+        value = resolveAttributeValue(value, part, serialiseObjectsAndArrays);
+        // Flatten
+        if (isArray(value)) {
+          return values.concat(value);
+        }
+        values.push(value);
+        return values;
+      }, [])
+    );
+  } else {
+    return Buffer.from(String(value));
+  }
+}
+/**
+ * Resolve "value" to string Buffer if possible
+ *
+ * @param { unknown } value
+ * @param { NodePart } part
+ * @returns { any }
+ */
+function resolveNodeValue(value, part) {
+  if (isDirective(value)) {
+    value = resolveDirectiveValue(value, part);
+  }
+  if (value === nothing || value === undefined) {
+    return EMPTY_STRING_BUFFER;
+  }
+  if (isPrimitive(value)) {
+    const string = typeof value !== 'string' ? String(value) : value;
+    // Escape if not prefixed with unsafePrefixString, otherwise strip prefix
+    return Buffer.from(
+      string.indexOf(unsafePrefixString) === 0
+        ? string.slice(33)
+        : escape(
+          string,
+          part.tagName === 'script' || part.tagName === 'style' ? part.tagName : 'text'
+        )
+    );
+  } else if (isTemplateResult(value) || isBuffer(value)) {
+    return value;
+  } else if (isPromise(value)) {
+    return value.then((value) => resolveNodeValue(value, part));
+  } else if (isSyncIterator(value)) {
+    if (!isArray(value)) {
+      value = Array.from(value);
+    }
+    // @ts-ignore: already converted to Array
+    return value.reduce((values, value) => {
+      value = resolveNodeValue(value, part);
+      // Flatten
+      if (isArray(value)) {
+        return values.concat(value);
+      }
+      values.push(value);
+      return values;
+    }, []);
+  } else if (isAsyncIterator(value)) {
+    return resolveAsyncIteratorValue(value, part);
+  } else {
+    throw Error(`unknown NodePart value: ${value}`);
+  }
+}
+/**
+ * Resolve values of async "iterator"
+ *
+ * @param { AsyncIterable<unknown> } iterator
+ * @param { NodePart } part
+ * @returns { AsyncGenerator }
+ */
+async function* resolveAsyncIteratorValue(iterator, part) {
+  for await (const value of iterator) {
+    yield resolveNodeValue(value, part);
+  }
+}
+/**
+ * Resolve value of "directive"
+ *
+ * @param { function } directive
+ * @param { Part } part
+ * @returns { unknown }
+ */
+function resolveDirectiveValue(directive, part) {
+  // Directives are synchronous, so it's safe to read and delete value
+  directive(part);
+  const value = part._value;
+  part._value = undefined;
+  return value;
+}
+/**
+ * Class representing the default Template processor.
+ * Exposes factory functions for generating Part instances to use for
+ * resolving a template's dynamic values.
+ */
+class DefaultTemplateProcessor {
+  /**
+   * Create part instance for dynamic attribute values
+   *
+   * @param { string } name
+   * @param { Array<Buffer> } strings
+   * @param { string } tagName
+   * @returns { AttributePart }
+   */
+  handleAttributeExpressions(name, strings = [], tagName) {
+    const prefix = name[0];
+    if (prefix === '.') {
+      return new PropertyAttributePart(name.slice(1), strings, tagName);
+    } else if (prefix === '@') {
+      return new EventAttributePart(name.slice(1), strings, tagName);
+    } else if (prefix === '?') {
+      return new BooleanAttributePart(name.slice(1), strings, tagName);
+    }
+    return new AttributePart(name, strings, tagName);
+  }
+  /**
+   * Create part instance for dynamic text values
+   *
+   * @param { string } tagName
+   * @returns { NodePart }
+   */
+  handleTextExpression(tagName) {
+    return new NodePart(tagName);
+  }
+}
+/* eslint no-constant-condition:0 */
+/**
+ * Class for the default TemplateResult processor
+ * used by Promise/Stream TemplateRenderers.
+ *
+ * @implements TemplateResultProcessor
+ */
+class DefaultTemplateResultProcessor {
+  /**
+   * Process "stack" and push chunks to "renderer"
+   *
+   * @param { TemplateResultRenderer } renderer
+   * @param { Array<unknown> } stack
+   * @param { number } [highWaterMark] - byte length to buffer before pushing data
+   * @param { RenderOptions } [options]
+   * @returns { () => void }
+   */
+  getProcessor(renderer, stack, highWaterMark = 0, options) {
+    /** @type { Array<Buffer> } */
+    const buffer = [];
+    let bufferLength = 0;
+    let processing = false;
+    function flushBuffer() {
+      if (buffer.length > 0) {
+        const keepPushing = renderer.push(Buffer.concat(buffer, bufferLength));
+        bufferLength = buffer.length = 0;
+        return keepPushing;
+      }
+    }
+    return function process() {
+      if (processing) {
+        return;
+      }
+      while (true) {
+        processing = true;
+        let chunk = stack[0];
+        let breakLoop = false;
+        let popStack = true;
+        // Done
+        if (chunk === undefined) {
+          flushBuffer();
+          return renderer.push(null);
+        }
+        if (isTemplateResult(chunk)) {
+          popStack = false;
+          chunk = getTemplateResultChunk(chunk, stack, options);
+        }
+        // Skip if finished reading TemplateResult (null)
+        if (chunk !== null) {
+          if (isBuffer(chunk)) {
+            buffer.push(chunk);
+            bufferLength += chunk.length;
+            // Flush buffered data if over highWaterMark
+            if (bufferLength > highWaterMark) {
+              // Break if backpressure triggered
+              breakLoop = !flushBuffer();
+              processing = !breakLoop;
+            }
+          } else if (isPromise(chunk)) {
+            // Flush buffered data before waiting for Promise
+            flushBuffer();
+            // "processing" is still true, so prevented from restarting until Promise resolved
+            breakLoop = true;
+            // Add pending Promise for value to stack
+            stack.unshift(chunk);
+            chunk
+              .then((chunk) => {
+                // Handle IteratorResults from AsyncIterator
+                if (isIteratorResult(chunk)) {
+                  if (chunk.done) {
+                    // Clear resolved Promise
+                    stack.shift();
+                    // Clear AsyncIterator
+                    stack.shift();
+                  } else {
+                    // Replace resolved Promise with IteratorResult value
+                    stack[0] = chunk.value;
+                  }
+                } else {
+                  // Replace resolved Promise with value
+                  stack[0] = chunk;
+                }
+                processing = false;
+                process();
+              })
+              .catch((err) => {
+                stack.length = 0;
+                renderer.destroy(err);
+              });
+          } else if (isArray(chunk)) {
+            // First remove existing Array if at top of stack (not added by pending TemplateResult)
+            if (stack[0] === chunk) {
+              popStack = false;
+              stack.shift();
+            }
+            stack.unshift(...chunk);
+          } else if (isAsyncIterator(chunk)) {
+            popStack = false;
+            // Add AsyncIterator back to stack (will be cleared when done iterating)
+            if (stack[0] !== chunk) {
+              stack.unshift(chunk);
+            }
+            // Add pending Promise for IteratorResult to stack
+            stack.unshift(chunk[Symbol.asyncIterator]().next());
+          } else {
+            stack.length = 0;
+            return renderer.destroy(Error(`unknown chunk type: ${chunk}`));
+          }
+        }
+        if (popStack) {
+          stack.shift();
+        }
+        if (breakLoop) {
+          break;
+        }
+      }
+    };
+  }
+}
+/**
+ * Retrieve next chunk from "result".
+ * Adds nested TemplateResults to the stack if necessary.
+ *
+ * @param { TemplateResult } result
+ * @param { Array<unknown> } stack
+ * @param { RenderOptions } [options]
+ */
+function getTemplateResultChunk(result, stack, options) {
+  let chunk = result.readChunk(options);
+  // Skip empty strings
+  if (isBuffer(chunk) && chunk.length === 0) {
+    chunk = result.readChunk(options);
+  }
+  // Finished reading, dispose
+  if (chunk === null) {
+    stack.shift();
+  } else if (isTemplateResult(chunk)) {
+    // Add to top of stack
+    stack.unshift(chunk);
+    chunk = getTemplateResultChunk(chunk, stack, options);
+  }
+  return chunk;
+}
+/**
+ * A factory for rendering a template result to a string resolving Promise
+ *
+ * @param { TemplateResult } result
+ * @param { TemplateResultProcessor } processor
+ * @param { boolean } [asBuffer]
+ * @param { RenderOptions } [options]
+ */
+function promiseTemplateRenderer(result, processor, asBuffer = false, options) {
+  return new Promise((resolve, reject) => {
+    let stack = [result];
+    /** @type { Array<Buffer> } */
+    let buffer = [];
+    let bufferLength = 0;
+    processor.getProcessor(
+      {
+        push(chunk) {
+          if (chunk === null) {
+            const concatBuffer = Buffer.concat(buffer, bufferLength);
+            resolve(asBuffer ? concatBuffer : concatBuffer.toString());
+          } else {
+            buffer.push(chunk);
+            bufferLength += chunk.length;
+          }
+          return true;
+        },
+        destroy(err) {
+          buffer.length = stack.length = bufferLength = 0;
+          // @ts-ignore
+          buffer = undefined;
+          // @ts-ignore
+          stack = undefined;
+          reject(err);
+        },
+      },
+      stack,
+      0,
+      options
+    )();
+  });
+}
+/**
+ * A minimal Readable stream class to prevent browser parse errors resulting from
+ * the static importing of Node-only code.
+ * This module should be provided as an alias for Node's built-in 'stream' module
+ * when run in the browser.
+ * @see package.json#browser
+ */
+class Readable { }
+/**
+ * Factory for StreamTemplateRenderer instances
+ *
+ * @param { TemplateResult } result - a template result returned from call to "html`...`"
+ * @param { TemplateResultProcessor } processor
+ * @param { RenderOptions } [options]
+ * @returns { Readable }
+ */
+function streamTemplateRenderer(result, processor, options) {
+  return new StreamTemplateRenderer(result, processor, options);
+}
+/**
+ * A custom Readable stream class for rendering a template result to a stream
+ */
+class StreamTemplateRenderer extends Readable {
+  /**
+   * Constructor
+   *
+   * @param { TemplateResult } result - a template result returned from call to "html`...`"
+   * @param { TemplateResultProcessor } processor
+   * @param { RenderOptions } [options]
+   */
+  constructor(result, processor, options) {
+    super({ autoDestroy: true });
+    this.stack = [result];
+    this.process = processor.getProcessor(this, this.stack, 16384, options);
+  }
+  /**
+   * Extend Readable.read()
+   */
+  _read() {
+    if (this.process !== undefined) {
+      this.process();
+    }
+  }
+  /**
+   * Extend Readalbe.destroy()
+   *
+   * @param { Error | null } [err]
+   */
+  _destroy(err) {
+    if (err) {
+      this.emit('error', err);
+    }
+    this.emit('close');
+    // @ts-ignore
+    this.process = undefined;
+    // @ts-ignore
+    this.stack = undefined;
+    this.removeAllListeners();
+  }
+}
+/**
+ * @license
+ * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
+ * This code may only be used under the BSD style license found at
+ * http://polymer.github.io/LICENSE.txt
+ * The complete set of authors may be found at
+ * http://polymer.github.io/AUTHORS.txt
+ * The complete set of contributors may be found at
+ * http://polymer.github.io/CONTRIBUTORS.txt
+ * Code distributed by Google as part of the polymer project is also
+ * subject to an additional IP rights grant found at
+ * http://polymer.github.io/PATENTS.txt
+ */
+/**
+ * An expression marker with embedded unique key to avoid collision with
+ * possible text in templates.
+ */
+const marker = `{{lit-${String(Math.random()).slice(2)}}}`;
+/**
+ * This regex extracts the attribute name preceding an attribute-position
+ * expression. It does this by matching the syntax allowed for attributes
+ * against the string literal directly preceding the expression, assuming that
+ * the expression is in an attribute-value position.
+ *
+ * See attributes in the HTML spec:
+ * https://www.w3.org/TR/html5/syntax.html#elements-attributes
+ *
+ * " \x09\x0a\x0c\x0d" are HTML space characters:
+ * https://www.w3.org/TR/html5/infrastructure.html#space-characters
+ *
+ * "\0-\x1F\x7F-\x9F" are Unicode control characters, which includes every
+ * space character except " ".
+ *
+ * So an attribute is:
+ *  * The name: any character except a control character, space character, ('),
+ *    ("), ">", "=", or "/"
+ *  * Followed by zero or more space characters
+ *  * Followed by "="
+ *  * Followed by zero or more space characters
+ *  * Followed by:
+ *    * Any character except space, ('), ("), "<", ">", "=", (`), or
+ *    * (") then any non-("), or
+ *    * (') then any non-(')
+ */
+const lastAttributeNameRegex =
+  // eslint-disable-next-line no-control-regex
+  /([ \x09\x0a\x0c\x0d])([^\0-\x1F\x7F-\x9F "'>=/]+)([ \x09\x0a\x0c\x0d]*=[ \x09\x0a\x0c\x0d]*(?:[^ \x09\x0a\x0c\x0d"'`<>=]*|"[^"]*|'[^']*))$/;
+const EMPTY_STRING_BUFFER$1 = Buffer.from('');
+const RE_QUOTE = /"[^"]*|'[^']*$/;
+/* eslint no-control-regex: 0 */
+const RE_TAG_NAME = /[a-zA-Z0-9._-]/;
+const TAG_OPEN = 1;
+const TAG_CLOSED = 0;
+const TAG_NONE = -1;
+/**
+ * A cacheable Template that stores the "strings" and "parts" associated with a
+ * tagged template literal invoked with "html`...`".
+ */
+class Template {
+  /**
+   * Create Template instance
+   *
+   * @param { TemplateStringsArray } strings
+   * @param { TemplateProcessor } processor
+   */
+  constructor(strings, processor) {
+    /** @type { Array<Buffer | null> } */
+    this.strings = [];
+    /** @type { Array<Part | null> } */
+    this.parts = [];
+    this._prepare(strings, processor);
+  }
+  /**
+   * Prepare the template's static strings,
+   * and create Part instances for the dynamic values,
+   * based on lit-html syntax.
+   *
+   * @param { TemplateStringsArray } strings
+   * @param { TemplateProcessor } processor
+   */
+  _prepare(strings, processor) {
+    const endIndex = strings.length - 1;
+    let attributeMode = false;
+    let nextString = strings[0];
+    let tagName = '';
+    for (let i = 0; i < endIndex; i++) {
+      let string = nextString;
+      nextString = strings[i + 1];
+      const [tagState, tagStateIndex] = getTagState(string);
+      let skip = 0;
+      let part;
+      // Open/close tag found at end of string
+      if (tagState !== TAG_NONE) {
+        attributeMode = tagState !== TAG_CLOSED;
+        // Find tag name if open, or if closed and no existing tag name
+        if (tagState === TAG_OPEN || tagName === '') {
+          tagName = getTagName(string, tagState, tagStateIndex);
+        }
+      }
+      if (attributeMode) {
+        const matchName = lastAttributeNameRegex.exec(string);
+        if (matchName) {
+          let [, prefix, name, suffix] = matchName;
+          // Since attributes are conditional, remove "name" and "suffix" from static string
+          string = string.slice(0, matchName.index + prefix.length);
+          const matchQuote = RE_QUOTE.exec(suffix);
+          // If attribute is quoted, handle potential multiple values
+          if (matchQuote) {
+            const quoteCharacter = matchQuote[0].charAt(0);
+            // Store any text between quote character and value
+            const attributeStrings = [Buffer.from(suffix.slice(matchQuote.index + 1))];
+            let open = true;
+            skip = 0;
+            let attributeString;
+            // Scan ahead and gather all strings for this attribute
+            while (open) {
+              attributeString = strings[i + skip + 1];
+              const closingQuoteIndex = attributeString.indexOf(quoteCharacter);
+              if (closingQuoteIndex === -1) {
+                attributeStrings.push(Buffer.from(attributeString));
+                skip++;
+              } else {
+                attributeStrings.push(Buffer.from(attributeString.slice(0, closingQuoteIndex)));
+                nextString = attributeString.slice(closingQuoteIndex + 1);
+                i += skip;
+                open = false;
+              }
+            }
+            part = processor.handleAttributeExpressions(name, attributeStrings, tagName);
+          } else {
+            part = processor.handleAttributeExpressions(
+              name,
+              [EMPTY_STRING_BUFFER$1, EMPTY_STRING_BUFFER$1],
+              tagName
+            );
+          }
+        }
+      } else {
+        part = processor.handleTextExpression(tagName);
+      }
+      this.strings.push(Buffer.from(string));
+      // @ts-ignore: part will never be undefined here
+      this.parts.push(part);
+      // Add placehholders for strings/parts that wil be skipped due to multple values in a single AttributePart
+      if (skip > 0) {
+        this.strings.push(null);
+        this.parts.push(null);
+        skip = 0;
+      }
+    }
+    this.strings.push(Buffer.from(nextString));
+  }
+}
+/**
+ * Determine if 'string' terminates with an opened or closed tag.
+ *
+ * Iterating through all characters has at worst a time complexity of O(n),
+ * and is better than the alternative (using "indexOf/lastIndexOf") which is potentially O(2n).
+ *
+ * @param { string } string
+ * @returns { Array<number> } - returns tuple "[-1, -1]" if no tag, "[0, i]" if closed tag, or "[1, i]" if open tag
+ */
+function getTagState(string) {
+  for (let i = string.length - 1; i >= 0; i--) {
+    const char = string[i];
+    if (char === '>') {
+      return [TAG_CLOSED, i];
+    } else if (char === '<') {
+      return [TAG_OPEN, i];
+    }
+  }
+  return [TAG_NONE, -1];
+}
+/**
+ * Retrieve tag name from "string" starting at "tagStateIndex" position
+ * Walks forward or backward based on "tagState" open or closed
+ *
+ * @param { string } string
+ * @param { number } tagState
+ * @param { number } tagStateIndex
+ * @returns { string }
+ */
+function getTagName(string, tagState, tagStateIndex) {
+  let tagName = '';
+  if (tagState === TAG_CLOSED) {
+    // Walk backwards until open tag
+    for (let i = tagStateIndex - 1; i >= 0; i--) {
+      const char = string[i];
+      if (char === '<') {
+        return getTagName(string, TAG_OPEN, i);
+      }
+    }
+  } else {
+    for (let i = tagStateIndex + 1; i < string.length; i++) {
+      const char = string[i];
+      if (!RE_TAG_NAME.test(char)) {
+        break;
+      }
+      tagName += char;
+    }
+  }
+  return tagName;
+}
+const EMPTY_STRING_BUFFER$2 = Buffer.from('');
+let id = 0;
+/**
+ * A class for consuming the combined static and dynamic parts of a lit-html Template.
+ * TemplateResults
+ */
+class TemplateResult {
+  /**
+   * Constructor
+   *
+   * @param { Template } template
+   * @param { Array<unknown> } values
+   */
+  constructor(template, values) {
+    this.template = template;
+    this.values = values;
+    this.id = id++;
+    this.index = 0;
+  }
+  /**
+   * Consume template result content.
+   *
+   * @param { RenderOptions } [options]
+   * @returns { unknown }
+   */
+  read(options) {
+    let buffer = EMPTY_STRING_BUFFER$2;
+    let chunk;
+    /** @type { Array<Buffer> | undefined } */
+    let chunks;
+    while ((chunk = this.readChunk(options)) !== null) {
+      if (isBuffer(chunk)) {
+        buffer = Buffer.concat([buffer, chunk], buffer.length + chunk.length);
+      } else {
+        if (chunks === undefined) {
+          chunks = [];
+        }
+        buffer = reduce(buffer, chunks, chunk) || EMPTY_STRING_BUFFER$2;
+      }
+    }
+    if (chunks !== undefined) {
+      chunks.push(buffer);
+      return chunks.length > 1 ? chunks : chunks[0];
+    }
+    return buffer;
+  }
+  /**
+   * Consume template result content one chunk at a time.
+   * @param { RenderOptions } [options]
+   * @returns { unknown }
+   */
+  readChunk(options) {
+    const isString = this.index % 2 === 0;
+    const index = (this.index / 2) | 0;
+    // Finished
+    if (!isString && index >= this.template.strings.length - 1) {
+      // Reset
+      this.index = 0;
+      return null;
+    }
+    this.index++;
+    if (isString) {
+      return this.template.strings[index];
+    }
+    const part = this.template.parts[index];
+    let value;
+    if (isAttributePart(part)) {
+      // AttributeParts can have multiple values, so slice based on length
+      // (strings in-between values are already handled the instance)
+      if (part.length > 1) {
+        value = part.getValue(this.values.slice(index, index + part.length), options);
+        this.index += part.length;
+      } else {
+        value = part.getValue([this.values[index]], options);
+      }
+    } else {
+      value = part && part.getValue(this.values[index], options);
+    }
+    return value;
+  }
+}
+/**
+ * Commit "chunk" to string "buffer".
+ * Returns new "buffer" value.
+ *
+ * @param { Buffer } buffer
+ * @param { Array<unknown> } chunks
+ * @param { unknown } chunk
+ * @returns { Buffer | undefined }
+ */
+function reduce(buffer, chunks, chunk) {
+  if (isBuffer(chunk)) {
+    return Buffer.concat([buffer, chunk], buffer.length + chunk.length);
+  } else if (isTemplateResult(chunk)) {
+    chunks.push(buffer, chunk);
+    return EMPTY_STRING_BUFFER$2;
+  } else if (isArray(chunk)) {
+    return chunk.reduce((buffer, chunk) => reduce(buffer, chunks, chunk), buffer);
+  } else if (isPromise(chunk) || isAsyncIterator(chunk)) {
+    chunks.push(buffer, chunk);
+    return EMPTY_STRING_BUFFER$2;
+  }
+}
+/**
+ * Default templateResult factory
+ *
+ * @param { unknown } value
+ * @returns { TemplateResult }
+ */
+// prettier-ignore
+const DEFAULT_TEMPLATE_FN = (value) => html`${value}`;
+const defaultTemplateProcessor = new DefaultTemplateProcessor();
+const defaultTemplateResultProcessor = new DefaultTemplateResultProcessor();
+const templateCache = new Map();
+const streamRenderer =
+  typeof process !== 'undefined' &&
+    typeof process.versions !== 'undefined' &&
+    typeof process.versions.node !== 'undefined'
+    ? streamTemplateRenderer
+    : browserStreamTemplateRenderer;
+/**
+ * Interprets a template literal as an HTML template that can be
+ * rendered as a Readable stream or String
+ *
+ * @param { TemplateStringsArray } strings
+ * @param  { ...unknown } values
+ * @returns { TemplateResult }
+ */
+function html(strings, ...values) {
+  let template = templateCache.get(strings);
+  if (template === undefined) {
+    template = new Template(strings, defaultTemplateProcessor);
+    templateCache.set(strings, template);
+  }
+  return new TemplateResult(template, values);
+}
+/**
+ * Render a template result to a Readable stream
+ *
+ * @param { unknown } result - a template result returned from call to "html`...`"
+ * @param { RenderOptions } [options]
+ * @returns { import('stream').Readable | ReadableStream }
+ */
+function renderToStream(result, options) {
+  return streamRenderer(getRenderResult(result), defaultTemplateResultProcessor, options);
+}
+/**
+ * Render a template result to a string resolving Promise.
+ *
+ * @param { unknown } result - a template result returned from call to "html`...`"
+ * @param { RenderOptions } [options]
+ * @returns { Promise<string> }
+ */
+function renderToString(result, options) {
+  return promiseTemplateRenderer(
+    getRenderResult(result),
+    defaultTemplateResultProcessor,
+    false,
+    options
+  );
+}
+/**
+ * Render a template result to a Buffer resolving Promise.
+ *
+ * @param { unknown } result - a template result returned from call to "html`...`"
+ * @param { RenderOptions } [options]
+ * @returns { Promise<Buffer> }
+ */
+function renderToBuffer(result, options) {
+  return promiseTemplateRenderer(
+    getRenderResult(result),
+    defaultTemplateResultProcessor,
+    true,
+    options
+  );
+}
+/**
+ * Retrieve TemplateResult for render
+ *
+ * @param { unknown} result
+ * @returns { TemplateResult }
+ */
+function getRenderResult(result) {
+  // @ts-ignore
+  return !isTemplateResult(result) ? DEFAULT_TEMPLATE_FN(result) : result;
+}
+export { AttributePart, BooleanAttributePart, DefaultTemplateProcessor, DefaultTemplateResultProcessor, EventAttributePart, NodePart, Part, PropertyAttributePart, Template, TemplateResult, defaultTemplateProcessor, defaultTemplateResultProcessor, directive, html, isAttributePart, isDirective, isNodePart, isTemplateResult, nothing, renderToBuffer, renderToStream, renderToString, html as svg, templateCache, unsafePrefixString };

src/lit-html.js ADDED Viewed

@@ -0,0 +1,1246 @@
+/**
+ * @license
+ * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
+ * This code may only be used under the BSD style license found at
+ * http://polymer.github.io/LICENSE.txt
+ * The complete set of authors may be found at
+ * http://polymer.github.io/AUTHORS.txt
+ * The complete set of contributors may be found at
+ * http://polymer.github.io/CONTRIBUTORS.txt
+ * Code distributed by Google as part of the polymer project is also
+ * subject to an additional IP rights grant found at
+ * http://polymer.github.io/PATENTS.txt
+ */
+const directives = new WeakMap();
+/**
+ * Brands a function as a directive factory function so that lit-html will call
+ * the function during template rendering, rather than passing as a value.
+ *
+ * A _directive_ is a function that takes a Part as an argument. It has the
+ * signature: `(part: Part) => void`.
+ *
+ * A directive _factory_ is a function that takes arguments for data and
+ * configuration and returns a directive. Users of directive usually refer to
+ * the directive factory as the directive. For example, "The repeat directive".
+ *
+ * Usually a template author will invoke a directive factory in their template
+ * with relevant arguments, which will then return a directive function.
+ *
+ * Here's an example of using the `repeat()` directive factory that takes an
+ * array and a function to render an item:
+ *
+ * ```js
+ * html`<ul><${repeat(items, (item) => html`<li>${item}</li>`)}</ul>`
+ * ```
+ *
+ * When `repeat` is invoked, it returns a directive function that closes over
+ * `items` and the template function. When the outer template is rendered, the
+ * return directive function is called with the Part for the expression.
+ * `repeat` then performs it's custom logic to render multiple items.
+ *
+ * @param f The directive factory function. Must be a function that returns a
+ * function of the signature `(part: Part) => void`. The returned function will
+ * be called with the part object.
+ *
+ * @example
+ *
+ * import {directive, html} from 'lit-html';
+ *
+ * const immutable = directive((v) => (part) => {
+ *   if (part.value !== v) {
+ *     part.setValue(v)
+ *   }
+ * });
+ */
+const directive = (f) => ((...args) => {
+  const d = f(...args);
+  directives.set(d, true);
+  return d;
+});
+const isDirective = (o) => {
+  return typeof o === 'function' && directives.has(o);
+};
+/**
+ * @license
+ * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
+ * This code may only be used under the BSD style license found at
+ * http://polymer.github.io/LICENSE.txt
+ * The complete set of authors may be found at
+ * http://polymer.github.io/AUTHORS.txt
+ * The complete set of contributors may be found at
+ * http://polymer.github.io/CONTRIBUTORS.txt
+ * Code distributed by Google as part of the polymer project is also
+ * subject to an additional IP rights grant found at
+ * http://polymer.github.io/PATENTS.txt
+ */
+/**
+ * True if the custom elements polyfill is in use.
+ */
+const isCEPolyfill = typeof window !== 'undefined' &&
+  window.customElements != null &&
+  window.customElements.polyfillWrapFlushCallback !==
+  undefined;
+/**
+ * Reparents nodes, starting from `start` (inclusive) to `end` (exclusive),
+ * into another container (could be the same container), before `before`. If
+ * `before` is null, it appends the nodes to the container.
+ */
+const reparentNodes = (container, start, end = null, before = null) => {
+  while (start !== end) {
+    const n = start.nextSibling;
+    container.insertBefore(start, before);
+    start = n;
+  }
+};
+/**
+ * Removes nodes, starting from `start` (inclusive) to `end` (exclusive), from
+ * `container`.
+ */
+const removeNodes = (container, start, end = null) => {
+  while (start !== end) {
+    const n = start.nextSibling;
+    container.removeChild(start);
+    start = n;
+  }
+};
+/**
+ * @license
+ * Copyright (c) 2018 The Polymer Project Authors. All rights reserved.
+ * This code may only be used under the BSD style license found at
+ * http://polymer.github.io/LICENSE.txt
+ * The complete set of authors may be found at
+ * http://polymer.github.io/AUTHORS.txt
+ * The complete set of contributors may be found at
+ * http://polymer.github.io/CONTRIBUTORS.txt
+ * Code distributed by Google as part of the polymer project is also
+ * subject to an additional IP rights grant found at
+ * http://polymer.github.io/PATENTS.txt
+ */
+/**
+ * A sentinel value that signals that a value was handled by a directive and
+ * should not be written to the DOM.
+ */
+const noChange = {};
+/**
+ * A sentinel value that signals a NodePart to fully clear its content.
+ */
+const nothing = {};
+/**
+ * @license
+ * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
+ * This code may only be used under the BSD style license found at
+ * http://polymer.github.io/LICENSE.txt
+ * The complete set of authors may be found at
+ * http://polymer.github.io/AUTHORS.txt
+ * The complete set of contributors may be found at
+ * http://polymer.github.io/CONTRIBUTORS.txt
+ * Code distributed by Google as part of the polymer project is also
+ * subject to an additional IP rights grant found at
+ * http://polymer.github.io/PATENTS.txt
+ */
+/**
+ * An expression marker with embedded unique key to avoid collision with
+ * possible text in templates.
+ */
+const marker = `{{lit-${String(Math.random()).slice(2)}}}`;
+/**
+ * An expression marker used text-positions, multi-binding attributes, and
+ * attributes with markup-like text values.
+ */
+const nodeMarker = `<!--${marker}-->`;
+const markerRegex = new RegExp(`${marker}|${nodeMarker}`);
+/**
+ * Suffix appended to all bound attribute names.
+ */
+const boundAttributeSuffix = '$lit$';
+/**
+ * An updatable Template that tracks the location of dynamic parts.
+ */
+class Template {
+  constructor(result, element) {
+    this.parts = [];
+    this.element = element;
+    const nodesToRemove = [];
+    const stack = [];
+    // Edge needs all 4 parameters present; IE11 needs 3rd parameter to be null
+    const walker = document.createTreeWalker(element.content, 133 /* NodeFilter.SHOW_{ELEMENT|COMMENT|TEXT} */, null, false);
+    // Keeps track of the last index associated with a part. We try to delete
+    // unnecessary nodes, but we never want to associate two different parts
+    // to the same index. They must have a constant node between.
+    let lastPartIndex = 0;
+    let index = -1;
+    let partIndex = 0;
+    const { strings, values: { length } } = result;
+    while (partIndex < length) {
+      const node = walker.nextNode();
+      if (node === null) {
+        // We've exhausted the content inside a nested template element.
+        // Because we still have parts (the outer for-loop), we know:
+        // - There is a template in the stack
+        // - The walker will find a nextNode outside the template
+        walker.currentNode = stack.pop();
+        continue;
+      }
+      index++;
+      if (node.nodeType === 1 /* Node.ELEMENT_NODE */) {
+        if (node.hasAttributes()) {
+          const attributes = node.attributes;
+          const { length } = attributes;
+          // Per
+          // https://developer.mozilla.org/en-US/docs/Web/API/NamedNodeMap,
+          // attributes are not guaranteed to be returned in document order.
+          // In particular, Edge/IE can return them out of order, so we cannot
+          // assume a correspondence between part index and attribute index.
+          let count = 0;
+          for (let i = 0; i < length; i++) {
+            if (endsWith(attributes[i].name, boundAttributeSuffix)) {
+              count++;
+            }
+          }
+          while (count-- > 0) {
+            // Get the template literal section leading up to the first
+            // expression in this attribute
+            const stringForPart = strings[partIndex];
+            // Find the attribute name
+            const name = lastAttributeNameRegex.exec(stringForPart)[2];
+            // Find the corresponding attribute
+            // All bound attributes have had a suffix added in
+            // TemplateResult#getHTML to opt out of special attribute
+            // handling. To look up the attribute value we also need to add
+            // the suffix.
+            const attributeLookupName = name.toLowerCase() + boundAttributeSuffix;
+            const attributeValue = node.getAttribute(attributeLookupName);
+            node.removeAttribute(attributeLookupName);
+            const statics = attributeValue.split(markerRegex);
+            this.parts.push({ type: 'attribute', index, name, strings: statics });
+            partIndex += statics.length - 1;
+          }
+        }
+        if (node.tagName === 'TEMPLATE') {
+          stack.push(node);
+          walker.currentNode = node.content;
+        }
+      }
+      else if (node.nodeType === 3 /* Node.TEXT_NODE */) {
+        const data = node.data;
+        if (data.indexOf(marker) >= 0) {
+          const parent = node.parentNode;
+          const strings = data.split(markerRegex);
+          const lastIndex = strings.length - 1;
+          // Generate a new text node for each literal section
+          // These nodes are also used as the markers for node parts
+          for (let i = 0; i < lastIndex; i++) {
+            let insert;
+            let s = strings[i];
+            if (s === '') {
+              insert = createMarker();
+            }
+            else {
+              const match = lastAttributeNameRegex.exec(s);
+              if (match !== null && endsWith(match[2], boundAttributeSuffix)) {
+                s = s.slice(0, match.index) + match[1] +
+                  match[2].slice(0, -boundAttributeSuffix.length) + match[3];
+              }
+              insert = document.createTextNode(s);
+            }
+            parent.insertBefore(insert, node);
+            this.parts.push({ type: 'node', index: ++index });
+          }
+          // If there's no text, we must insert a comment to mark our place.
+          // Else, we can trust it will stick around after cloning.
+          if (strings[lastIndex] === '') {
+            parent.insertBefore(createMarker(), node);
+            nodesToRemove.push(node);
+          }
+          else {
+            node.data = strings[lastIndex];
+          }
+          // We have a part for each match found
+          partIndex += lastIndex;
+        }
+      }
+      else if (node.nodeType === 8 /* Node.COMMENT_NODE */) {
+        if (node.data === marker) {
+          const parent = node.parentNode;
+          // Add a new marker node to be the startNode of the Part if any of
+          // the following are true:
+          //  * We don't have a previousSibling
+          //  * The previousSibling is already the start of a previous part
+          if (node.previousSibling === null || index === lastPartIndex) {
+            index++;
+            parent.insertBefore(createMarker(), node);
+          }
+          lastPartIndex = index;
+          this.parts.push({ type: 'node', index });
+          // If we don't have a nextSibling, keep this node so we have an end.
+          // Else, we can remove it to save future costs.
+          if (node.nextSibling === null) {
+            node.data = '';
+          }
+          else {
+            nodesToRemove.push(node);
+            index--;
+          }
+          partIndex++;
+        }
+        else {
+          let i = -1;
+          while ((i = node.data.indexOf(marker, i + 1)) !== -1) {
+            // Comment node has a binding marker inside, make an inactive part
+            // The binding won't work, but subsequent bindings will
+            // TODO (justinfagnani): consider whether it's even worth it to
+            // make bindings in comments work
+            this.parts.push({ type: 'node', index: -1 });
+            partIndex++;
+          }
+        }
+      }
+    }
+    // Remove text binding nodes after the walk to not disturb the TreeWalker
+    for (const n of nodesToRemove) {
+      n.parentNode.removeChild(n);
+    }
+  }
+}
+const endsWith = (str, suffix) => {
+  const index = str.length - suffix.length;
+  return index >= 0 && str.slice(index) === suffix;
+};
+const isTemplatePartActive = (part) => part.index !== -1;
+// Allows `document.createComment('')` to be renamed for a
+// small manual size-savings.
+const createMarker = () => document.createComment('');
+/**
+ * This regex extracts the attribute name preceding an attribute-position
+ * expression. It does this by matching the syntax allowed for attributes
+ * against the string literal directly preceding the expression, assuming that
+ * the expression is in an attribute-value position.
+ *
+ * See attributes in the HTML spec:
+ * https://www.w3.org/TR/html5/syntax.html#elements-attributes
+ *
+ * " \x09\x0a\x0c\x0d" are HTML space characters:
+ * https://www.w3.org/TR/html5/infrastructure.html#space-characters
+ *
+ * "\0-\x1F\x7F-\x9F" are Unicode control characters, which includes every
+ * space character except " ".
+ *
+ * So an attribute is:
+ *  * The name: any character except a control character, space character, ('),
+ *    ("), ">", "=", or "/"
+ *  * Followed by zero or more space characters
+ *  * Followed by "="
+ *  * Followed by zero or more space characters
+ *  * Followed by:
+ *    * Any character except space, ('), ("), "<", ">", "=", (`), or
+ *    * (") then any non-("), or
+ *    * (') then any non-(')
+ */
+const lastAttributeNameRegex =
+  // eslint-disable-next-line no-control-regex
+  /([ \x09\x0a\x0c\x0d])([^\0-\x1F\x7F-\x9F "'>=/]+)([ \x09\x0a\x0c\x0d]*=[ \x09\x0a\x0c\x0d]*(?:[^ \x09\x0a\x0c\x0d"'`<>=]*|"[^"]*|'[^']*))$/;
+/**
+ * @license
+ * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
+ * This code may only be used under the BSD style license found at
+ * http://polymer.github.io/LICENSE.txt
+ * The complete set of authors may be found at
+ * http://polymer.github.io/AUTHORS.txt
+ * The complete set of contributors may be found at
+ * http://polymer.github.io/CONTRIBUTORS.txt
+ * Code distributed by Google as part of the polymer project is also
+ * subject to an additional IP rights grant found at
+ * http://polymer.github.io/PATENTS.txt
+ */
+/**
+ * An instance of a `Template` that can be attached to the DOM and updated
+ * with new values.
+ */
+class TemplateInstance {
+  constructor(template, processor, options) {
+    this.__parts = [];
+    this.template = template;
+    this.processor = processor;
+    this.options = options;
+  }
+  update(values) {
+    let i = 0;
+    for (const part of this.__parts) {
+      if (part !== undefined) {
+        part.setValue(values[i]);
+      }
+      i++;
+    }
+    for (const part of this.__parts) {
+      if (part !== undefined) {
+        part.commit();
+      }
+    }
+  }
+  _clone() {
+    // There are a number of steps in the lifecycle of a template instance's
+    // DOM fragment:
+    //  1. Clone - create the instance fragment
+    //  2. Adopt - adopt into the main document
+    //  3. Process - find part markers and create parts
+    //  4. Upgrade - upgrade custom elements
+    //  5. Update - set node, attribute, property, etc., values
+    //  6. Connect - connect to the document. Optional and outside of this
+    //     method.
+    //
+    // We have a few constraints on the ordering of these steps:
+    //  * We need to upgrade before updating, so that property values will pass
+    //    through any property setters.
+    //  * We would like to process before upgrading so that we're sure that the
+    //    cloned fragment is inert and not disturbed by self-modifying DOM.
+    //  * We want custom elements to upgrade even in disconnected fragments.
+    //
+    // Given these constraints, with full custom elements support we would
+    // prefer the order: Clone, Process, Adopt, Upgrade, Update, Connect
+    //
+    // But Safari does not implement CustomElementRegistry#upgrade, so we
+    // can not implement that order and still have upgrade-before-update and
+    // upgrade disconnected fragments. So we instead sacrifice the
+    // process-before-upgrade constraint, since in Custom Elements v1 elements
+    // must not modify their light DOM in the constructor. We still have issues
+    // when co-existing with CEv0 elements like Polymer 1, and with polyfills
+    // that don't strictly adhere to the no-modification rule because shadow
+    // DOM, which may be created in the constructor, is emulated by being placed
+    // in the light DOM.
+    //
+    // The resulting order is on native is: Clone, Adopt, Upgrade, Process,
+    // Update, Connect. document.importNode() performs Clone, Adopt, and Upgrade
+    // in one step.
+    //
+    // The Custom Elements v1 polyfill supports upgrade(), so the order when
+    // polyfilled is the more ideal: Clone, Process, Adopt, Upgrade, Update,
+    // Connect.
+    const fragment = isCEPolyfill ?
+      this.template.element.content.cloneNode(true) :
+      document.importNode(this.template.element.content, true);
+    const stack = [];
+    const parts = this.template.parts;
+    // Edge needs all 4 parameters present; IE11 needs 3rd parameter to be null
+    const walker = document.createTreeWalker(fragment, 133 /* NodeFilter.SHOW_{ELEMENT|COMMENT|TEXT} */, null, false);
+    let partIndex = 0;
+    let nodeIndex = 0;
+    let part;
+    let node = walker.nextNode();
+    // Loop through all the nodes and parts of a template
+    while (partIndex < parts.length) {
+      part = parts[partIndex];
+      if (!isTemplatePartActive(part)) {
+        this.__parts.push(undefined);
+        partIndex++;
+        continue;
+      }
+      // Progress the tree walker until we find our next part's node.
+      // Note that multiple parts may share the same node (attribute parts
+      // on a single element), so this loop may not run at all.
+      while (nodeIndex < part.index) {
+        nodeIndex++;
+        if (node.nodeName === 'TEMPLATE') {
+          stack.push(node);
+          walker.currentNode = node.content;
+        }
+        if ((node = walker.nextNode()) === null) {
+          // We've exhausted the content inside a nested template element.
+          // Because we still have parts (the outer for-loop), we know:
+          // - There is a template in the stack
+          // - The walker will find a nextNode outside the template
+          walker.currentNode = stack.pop();
+          node = walker.nextNode();
+        }
+      }
+      // We've arrived at our part's node.
+      if (part.type === 'node') {
+        const part = this.processor.handleTextExpression(this.options);
+        part.insertAfterNode(node.previousSibling);
+        this.__parts.push(part);
+      }
+      else {
+        this.__parts.push(...this.processor.handleAttributeExpressions(node, part.name, part.strings, this.options));
+      }
+      partIndex++;
+    }
+    if (isCEPolyfill) {
+      document.adoptNode(fragment);
+      customElements.upgrade(fragment);
+    }
+    return fragment;
+  }
+}
+/**
+ * @license
+ * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
+ * This code may only be used under the BSD style license found at
+ * http://polymer.github.io/LICENSE.txt
+ * The complete set of authors may be found at
+ * http://polymer.github.io/AUTHORS.txt
+ * The complete set of contributors may be found at
+ * http://polymer.github.io/CONTRIBUTORS.txt
+ * Code distributed by Google as part of the polymer project is also
+ * subject to an additional IP rights grant found at
+ * http://polymer.github.io/PATENTS.txt
+ */
+/**
+ * Our TrustedTypePolicy for HTML which is declared using the html template
+ * tag function.
+ *
+ * That HTML is a developer-authored constant, and is parsed with innerHTML
+ * before any untrusted expressions have been mixed in. Therefor it is
+ * considered safe by construction.
+ */
+const policy = window.trustedTypes &&
+  trustedTypes.createPolicy('lit-html', { createHTML: (s) => s });
+const commentMarker = ` ${marker} `;
+/**
+ * The return type of `html`, which holds a Template and the values from
+ * interpolated expressions.
+ */
+class TemplateResult {
+  constructor(strings, values, type, processor) {
+    this.strings = strings;
+    this.values = values;
+    this.type = type;
+    this.processor = processor;
+  }
+  /**
+   * Returns a string of HTML used to create a `<template>` element.
+   */
+  getHTML() {
+    const l = this.strings.length - 1;
+    let html = '';
+    let isCommentBinding = false;
+    for (let i = 0; i < l; i++) {
+      const s = this.strings[i];
+      // For each binding we want to determine the kind of marker to insert
+      // into the template source before it's parsed by the browser's HTML
+      // parser. The marker type is based on whether the expression is in an
+      // attribute, text, or comment position.
+      //   * For node-position bindings we insert a comment with the marker
+      //     sentinel as its text content, like <!--{{lit-guid}}-->.
+      //   * For attribute bindings we insert just the marker sentinel for the
+      //     first binding, so that we support unquoted attribute bindings.
+      //     Subsequent bindings can use a comment marker because multi-binding
+      //     attributes must be quoted.
+      //   * For comment bindings we insert just the marker sentinel so we don't
+      //     close the comment.
+      //
+      // The following code scans the template source, but is *not* an HTML
+      // parser. We don't need to track the tree structure of the HTML, only
+      // whether a binding is inside a comment, and if not, if it appears to be
+      // the first binding in an attribute.
+      const commentOpen = s.lastIndexOf('<!--');
+      // We're in comment position if we have a comment open with no following
+      // comment close. Because <-- can appear in an attribute value there can
+      // be false positives.
+      isCommentBinding = (commentOpen > -1 || isCommentBinding) &&
+        s.indexOf('-->', commentOpen + 1) === -1;
+      // Check to see if we have an attribute-like sequence preceding the
+      // expression. This can match "name=value" like structures in text,
+      // comments, and attribute values, so there can be false-positives.
+      const attributeMatch = lastAttributeNameRegex.exec(s);
+      if (attributeMatch === null) {
+        // We're only in this branch if we don't have a attribute-like
+        // preceding sequence. For comments, this guards against unusual
+        // attribute values like <div foo="<!--${'bar'}">. Cases like
+        // <!-- foo=${'bar'}--> are handled correctly in the attribute branch
+        // below.
+        html += s + (isCommentBinding ? commentMarker : nodeMarker);
+      }
+      else {
+        // For attributes we use just a marker sentinel, and also append a
+        // $lit$ suffix to the name to opt-out of attribute-specific parsing
+        // that IE and Edge do for style and certain SVG attributes.
+        html += s.substr(0, attributeMatch.index) + attributeMatch[1] +
+          attributeMatch[2] + boundAttributeSuffix + attributeMatch[3] +
+          marker;
+      }
+    }
+    html += this.strings[l];
+    return html;
+  }
+  getTemplateElement() {
+    const template = document.createElement('template');
+    let value = this.getHTML();
+    if (policy !== undefined) {
+      // this is secure because `this.strings` is a TemplateStringsArray.
+      // TODO: validate this when
+      // https://github.com/tc39/proposal-array-is-template-object is
+      // implemented.
+      value = policy.createHTML(value);
+    }
+    template.innerHTML = value;
+    return template;
+  }
+}
+/**
+ * A TemplateResult for SVG fragments.
+ *
+ * This class wraps HTML in an `<svg>` tag in order to parse its contents in the
+ * SVG namespace, then modifies the template to remove the `<svg>` tag so that
+ * clones only container the original fragment.
+ */
+class SVGTemplateResult extends TemplateResult {
+  getHTML() {
+    return `<svg>${super.getHTML()}</svg>`;
+  }
+  getTemplateElement() {
+    const template = super.getTemplateElement();
+    const content = template.content;
+    const svgElement = content.firstChild;
+    content.removeChild(svgElement);
+    reparentNodes(content, svgElement.firstChild);
+    return template;
+  }
+}
+/**
+ * @license
+ * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
+ * This code may only be used under the BSD style license found at
+ * http://polymer.github.io/LICENSE.txt
+ * The complete set of authors may be found at
+ * http://polymer.github.io/AUTHORS.txt
+ * The complete set of contributors may be found at
+ * http://polymer.github.io/CONTRIBUTORS.txt
+ * Code distributed by Google as part of the polymer project is also
+ * subject to an additional IP rights grant found at
+ * http://polymer.github.io/PATENTS.txt
+ */
+const isPrimitive = (value) => {
+  return (value === null ||
+    !(typeof value === 'object' || typeof value === 'function'));
+};
+const isIterable = (value) => {
+  return Array.isArray(value) ||
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    !!(value && value[Symbol.iterator]);
+};
+/**
+ * Writes attribute values to the DOM for a group of AttributeParts bound to a
+ * single attribute. The value is only set once even if there are multiple parts
+ * for an attribute.
+ */
+class AttributeCommitter {
+  constructor(element, name, strings) {
+    this.dirty = true;
+    this.element = element;
+    this.name = name;
+    this.strings = strings;
+    this.parts = [];
+    for (let i = 0; i < strings.length - 1; i++) {
+      this.parts[i] = this._createPart();
+    }
+  }
+  /**
+   * Creates a single part. Override this to create a differnt type of part.
+   */
+  _createPart() {
+    return new AttributePart(this);
+  }
+  _getValue() {
+    const strings = this.strings;
+    const l = strings.length - 1;
+    const parts = this.parts;
+    // If we're assigning an attribute via syntax like:
+    //    attr="${foo}"  or  attr=${foo}
+    // but not
+    //    attr="${foo} ${bar}" or attr="${foo} baz"
+    // then we don't want to coerce the attribute value into one long
+    // string. Instead we want to just return the value itself directly,
+    // so that sanitizeDOMValue can get the actual value rather than
+    // String(value)
+    // The exception is if v is an array, in which case we do want to smash
+    // it together into a string without calling String() on the array.
+    //
+    // This also allows trusted values (when using TrustedTypes) being
+    // assigned to DOM sinks without being stringified in the process.
+    if (l === 1 && strings[0] === '' && strings[1] === '') {
+      const v = parts[0].value;
+      if (typeof v === 'symbol') {
+        return String(v);
+      }
+      if (typeof v === 'string' || !isIterable(v)) {
+        return v;
+      }
+    }
+    let text = '';
+    for (let i = 0; i < l; i++) {
+      text += strings[i];
+      const part = parts[i];
+      if (part !== undefined) {
+        const v = part.value;
+        if (isPrimitive(v) || !isIterable(v)) {
+          text += typeof v === 'string' ? v : String(v);
+        }
+        else {
+          for (const t of v) {
+            text += typeof t === 'string' ? t : String(t);
+          }
+        }
+      }
+    }
+    text += strings[l];
+    return text;
+  }
+  commit() {
+    if (this.dirty) {
+      this.dirty = false;
+      this.element.setAttribute(this.name, this._getValue());
+    }
+  }
+}
+/**
+ * A Part that controls all or part of an attribute value.
+ */
+class AttributePart {
+  constructor(committer) {
+    this.value = undefined;
+    this.committer = committer;
+  }
+  setValue(value) {
+    if (value !== noChange && (!isPrimitive(value) || value !== this.value)) {
+      if (typeof value === 'object') {
+        this.value = JSON.stringify(value).replace(/"/g, `'`);
+      } else {
+        this.value = value;
+      }
+      // If the value is a not a directive, dirty the committer so that it'll
+      // call setAttribute. If the value is a directive, it'll dirty the
+      // committer if it calls setValue().
+      if (!isDirective(value)) {
+        this.committer.dirty = true;
+      }
+    }
+  }
+  commit() {
+    while (isDirective(this.value)) {
+      const directive = this.value;
+      this.value = noChange;
+      directive(this);
+    }
+    if (this.value === noChange) {
+      return;
+    }
+    this.committer.commit();
+  }
+}
+/**
+ * A Part that controls a location within a Node tree. Like a Range, NodePart
+ * has start and end locations and can set and update the Nodes between those
+ * locations.
+ *
+ * NodeParts support several value types: primitives, Nodes, TemplateResults,
+ * as well as arrays and iterables of those types.
+ */
+class NodePart {
+  constructor(options) {
+    this.value = undefined;
+    this.__pendingValue = undefined;
+    this.options = options;
+  }
+  /**
+   * Appends this part into a container.
+   *
+   * This part must be empty, as its contents are not automatically moved.
+   */
+  appendInto(container) {
+    this.startNode = container.appendChild(createMarker());
+    this.endNode = container.appendChild(createMarker());
+  }
+  /**
+   * Inserts this part after the `ref` node (between `ref` and `ref`'s next
+   * sibling). Both `ref` and its next sibling must be static, unchanging nodes
+   * such as those that appear in a literal section of a template.
+   *
+   * This part must be empty, as its contents are not automatically moved.
+   */
+  insertAfterNode(ref) {
+    this.startNode = ref;
+    this.endNode = ref.nextSibling;
+  }
+  /**
+   * Appends this part into a parent part.
+   *
+   * This part must be empty, as its contents are not automatically moved.
+   */
+  appendIntoPart(part) {
+    part.__insert(this.startNode = createMarker());
+    part.__insert(this.endNode = createMarker());
+  }
+  /**
+   * Inserts this part after the `ref` part.
+   *
+   * This part must be empty, as its contents are not automatically moved.
+   */
+  insertAfterPart(ref) {
+    ref.__insert(this.startNode = createMarker());
+    this.endNode = ref.endNode;
+    ref.endNode = this.startNode;
+  }
+  setValue(value) {
+    this.__pendingValue = value;
+  }
+  commit() {
+    if (this.startNode.parentNode === null) {
+      return;
+    }
+    while (isDirective(this.__pendingValue)) {
+      const directive = this.__pendingValue;
+      this.__pendingValue = noChange;
+      directive(this);
+    }
+    const value = this.__pendingValue;
+    if (value === noChange) {
+      return;
+    }
+    if (isPrimitive(value)) {
+      if (value !== this.value) {
+        this.__commitText(value);
+      }
+    }
+    else if (value instanceof TemplateResult) {
+      this.__commitTemplateResult(value);
+    }
+    else if (value instanceof Node) {
+      this.__commitNode(value);
+    }
+    else if (isIterable(value)) {
+      this.__commitIterable(value);
+    }
+    else if (value === nothing) {
+      this.value = nothing;
+      this.clear();
+    }
+    else {
+      // Fallback, will render the string representation
+      this.__commitText(value);
+    }
+  }
+  __insert(node) {
+    this.endNode.parentNode.insertBefore(node, this.endNode);
+  }
+  __commitNode(value) {
+    if (this.value === value) {
+      return;
+    }
+    this.clear();
+    this.__insert(value);
+    this.value = value;
+  }
+  __commitText(value) {
+    const node = this.startNode.nextSibling;
+    value = value == null ? '' : value;
+    // If `value` isn't already a string, we explicitly convert it here in case
+    // it can't be implicitly converted - i.e. it's a symbol.
+    const valueAsString = typeof value === 'string' ? value : String(value);
+    if (node === this.endNode.previousSibling &&
+      node.nodeType === 3 /* Node.TEXT_NODE */) {
+      // If we only have a single text node between the markers, we can just
+      // set its value, rather than replacing it.
+      // TODO(justinfagnani): Can we just check if this.value is primitive?
+      node.data = valueAsString;
+    }
+    else {
+      this.__commitNode(document.createTextNode(valueAsString));
+    }
+    this.value = value;
+  }
+  __commitTemplateResult(value) {
+    const template = this.options.templateFactory(value);
+    if (this.value instanceof TemplateInstance &&
+      this.value.template === template) {
+      this.value.update(value.values);
+    }
+    else {
+      // Make sure we propagate the template processor from the TemplateResult
+      // so that we use its syntax extension, etc. The template factory comes
+      // from the render function options so that it can control template
+      // caching and preprocessing.
+      const instance = new TemplateInstance(template, value.processor, this.options);
+      const fragment = instance._clone();
+      instance.update(value.values);
+      this.__commitNode(fragment);
+      this.value = instance;
+    }
+  }
+  __commitIterable(value) {
+    // For an Iterable, we create a new InstancePart per item, then set its
+    // value to the item. This is a little bit of overhead for every item in
+    // an Iterable, but it lets us recurse easily and efficiently update Arrays
+    // of TemplateResults that will be commonly returned from expressions like:
+    // array.map((i) => html`${i}`), by reusing existing TemplateInstances.
+    // If _value is an array, then the previous render was of an
+    // iterable and _value will contain the NodeParts from the previous
+    // render. If _value is not an array, clear this part and make a new
+    // array for NodeParts.
+    if (!Array.isArray(this.value)) {
+      this.value = [];
+      this.clear();
+    }
+    // Lets us keep track of how many items we stamped so we can clear leftover
+    // items from a previous render
+    const itemParts = this.value;
+    let partIndex = 0;
+    let itemPart;
+    for (const item of value) {
+      // Try to reuse an existing part
+      itemPart = itemParts[partIndex];
+      // If no existing part, create a new one
+      if (itemPart === undefined) {
+        itemPart = new NodePart(this.options);
+        itemParts.push(itemPart);
+        if (partIndex === 0) {
+          itemPart.appendIntoPart(this);
+        }
+        else {
+          itemPart.insertAfterPart(itemParts[partIndex - 1]);
+        }
+      }
+      itemPart.setValue(item);
+      itemPart.commit();
+      partIndex++;
+    }
+    if (partIndex < itemParts.length) {
+      // Truncate the parts array so _value reflects the current state
+      itemParts.length = partIndex;
+      this.clear(itemPart && itemPart.endNode);
+    }
+  }
+  clear(startNode = this.startNode) {
+    removeNodes(this.startNode.parentNode, startNode.nextSibling, this.endNode);
+  }
+}
+/**
+ * Implements a boolean attribute, roughly as defined in the HTML
+ * specification.
+ *
+ * If the value is truthy, then the attribute is present with a value of
+ * ''. If the value is falsey, the attribute is removed.
+ */
+class BooleanAttributePart {
+  constructor(element, name, strings) {
+    this.value = undefined;
+    this.__pendingValue = undefined;
+    if (strings.length !== 2 || strings[0] !== '' || strings[1] !== '') {
+      throw new Error('Boolean attributes can only contain a single expression');
+    }
+    this.element = element;
+    this.name = name;
+    this.strings = strings;
+  }
+  setValue(value) {
+    this.__pendingValue = value;
+  }
+  commit() {
+    while (isDirective(this.__pendingValue)) {
+      const directive = this.__pendingValue;
+      this.__pendingValue = noChange;
+      directive(this);
+    }
+    if (this.__pendingValue === noChange) {
+      return;
+    }
+    const value = !!this.__pendingValue;
+    if (this.value !== value) {
+      if (value) {
+        this.element.setAttribute(this.name, '');
+      }
+      else {
+        this.element.removeAttribute(this.name);
+      }
+      this.value = value;
+    }
+    this.__pendingValue = noChange;
+  }
+}
+/**
+ * Sets attribute values for PropertyParts, so that the value is only set once
+ * even if there are multiple parts for a property.
+ *
+ * If an expression controls the whole property value, then the value is simply
+ * assigned to the property under control. If there are string literals or
+ * multiple expressions, then the strings are expressions are interpolated into
+ * a string first.
+ */
+class PropertyCommitter extends AttributeCommitter {
+  constructor(element, name, strings) {
+    super(element, name, strings);
+    this.single =
+      (strings.length === 2 && strings[0] === '' && strings[1] === '');
+  }
+  _createPart() {
+    return new PropertyPart(this);
+  }
+  _getValue() {
+    if (this.single) {
+      return this.parts[0].value;
+    }
+    return super._getValue();
+  }
+  commit() {
+    if (this.dirty) {
+      this.dirty = false;
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      this.element[this.name] = this._getValue();
+    }
+  }
+}
+class PropertyPart extends AttributePart {
+}
+// Detect event listener options support. If the `capture` property is read
+// from the options object, then options are supported. If not, then the third
+// argument to add/removeEventListener is interpreted as the boolean capture
+// value so we should only pass the `capture` property.
+let eventOptionsSupported = false;
+// Wrap into an IIFE because MS Edge <= v41 does not support having try/catch
+// blocks right into the body of a module
+(() => {
+  try {
+    const options = {
+      get capture() {
+        eventOptionsSupported = true;
+        return false;
+      }
+    };
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    window.addEventListener('test', options, options);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    window.removeEventListener('test', options, options);
+  }
+  catch (_e) {
+    // event options not supported
+  }
+})();
+class EventPart {
+  constructor(element, eventName, eventContext) {
+    this.value = undefined;
+    this.__pendingValue = undefined;
+    this.element = element;
+    this.eventName = eventName;
+    this.eventContext = eventContext;
+    this.__boundHandleEvent = (e) => this.handleEvent(e);
+  }
+  setValue(value) {
+    this.__pendingValue = value;
+  }
+  commit() {
+    while (isDirective(this.__pendingValue)) {
+      const directive = this.__pendingValue;
+      this.__pendingValue = noChange;
+      directive(this);
+    }
+    if (this.__pendingValue === noChange) {
+      return;
+    }
+    const newListener = this.__pendingValue;
+    const oldListener = this.value;
+    const shouldRemoveListener = newListener == null ||
+      oldListener != null &&
+      (newListener.capture !== oldListener.capture ||
+        newListener.once !== oldListener.once ||
+        newListener.passive !== oldListener.passive);
+    const shouldAddListener = newListener != null && (oldListener == null || shouldRemoveListener);
+    if (shouldRemoveListener) {
+      this.element.removeEventListener(this.eventName, this.__boundHandleEvent, this.__options);
+    }
+    if (shouldAddListener) {
+      this.__options = getOptions(newListener);
+      this.element.addEventListener(this.eventName, this.__boundHandleEvent, this.__options);
+    }
+    this.value = newListener;
+    this.__pendingValue = noChange;
+  }
+  handleEvent(event) {
+    if (typeof this.value === 'function') {
+      this.value.call(this.eventContext || this.element, event);
+    }
+    else {
+      this.value.handleEvent(event);
+    }
+  }
+}
+// We copy options because of the inconsistent behavior of browsers when reading
+// the third argument of add/removeEventListener. IE11 doesn't support options
+// at all. Chrome 41 only reads `capture` if the argument is an object.
+const getOptions = (o) => o &&
+  (eventOptionsSupported ?
+    { capture: o.capture, passive: o.passive, once: o.once } :
+    o.capture);
+/**
+ * @license
+ * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
+ * This code may only be used under the BSD style license found at
+ * http://polymer.github.io/LICENSE.txt
+ * The complete set of authors may be found at
+ * http://polymer.github.io/AUTHORS.txt
+ * The complete set of contributors may be found at
+ * http://polymer.github.io/CONTRIBUTORS.txt
+ * Code distributed by Google as part of the polymer project is also
+ * subject to an additional IP rights grant found at
+ * http://polymer.github.io/PATENTS.txt
+ */
+/**
+ * Creates Parts when a template is instantiated.
+ */
+class DefaultTemplateProcessor {
+  /**
+   * Create parts for an attribute-position binding, given the event, attribute
+   * name, and string literals.
+   *
+   * @param element The element containing the binding
+   * @param name  The attribute name
+   * @param strings The string literals. There are always at least two strings,
+   *   event for fully-controlled bindings with a single expression.
+   */
+  handleAttributeExpressions(element, name, strings, options) {
+    const prefix = name[0];
+    if (prefix === '.') {
+      const committer = new PropertyCommitter(element, name.slice(1), strings);
+      return committer.parts;
+    }
+    if (prefix === '@') {
+      return [new EventPart(element, name.slice(1), options.eventContext)];
+    }
+    if (prefix === '?') {
+      return [new BooleanAttributePart(element, name.slice(1), strings)];
+    }
+    const committer = new AttributeCommitter(element, name, strings);
+    return committer.parts;
+  }
+  /**
+   * Create parts for a text-position binding.
+   * @param templateFactory
+   */
+  handleTextExpression(options) {
+    return new NodePart(options);
+  }
+}
+const defaultTemplateProcessor = new DefaultTemplateProcessor();
+/**
+ * @license
+ * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
+ * This code may only be used under the BSD style license found at
+ * http://polymer.github.io/LICENSE.txt
+ * The complete set of authors may be found at
+ * http://polymer.github.io/AUTHORS.txt
+ * The complete set of contributors may be found at
+ * http://polymer.github.io/CONTRIBUTORS.txt
+ * Code distributed by Google as part of the polymer project is also
+ * subject to an additional IP rights grant found at
+ * http://polymer.github.io/PATENTS.txt
+ */
+/**
+ * The default TemplateFactory which caches Templates keyed on
+ * result.type and result.strings.
+ */
+function templateFactory(result) {
+  let templateCache = templateCaches.get(result.type);
+  if (templateCache === undefined) {
+    templateCache = {
+      stringsArray: new WeakMap(),
+      keyString: new Map()
+    };
+    templateCaches.set(result.type, templateCache);
+  }
+  let template = templateCache.stringsArray.get(result.strings);
+  if (template !== undefined) {
+    return template;
+  }
+  // If the TemplateStringsArray is new, generate a key from the strings
+  // This key is shared between all templates with identical content
+  const key = result.strings.join(marker);
+  // Check if we already have a Template for this key
+  template = templateCache.keyString.get(key);
+  if (template === undefined) {
+    // If we have not seen this key before, create a new Template
+    template = new Template(result, result.getTemplateElement());
+    // Cache the Template for this key
+    templateCache.keyString.set(key, template);
+  }
+  // Cache all future queries for this TemplateStringsArray
+  templateCache.stringsArray.set(result.strings, template);
+  return template;
+}
+const templateCaches = new Map();
+/**
+ * @license
+ * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
+ * This code may only be used under the BSD style license found at
+ * http://polymer.github.io/LICENSE.txt
+ * The complete set of authors may be found at
+ * http://polymer.github.io/AUTHORS.txt
+ * The complete set of contributors may be found at
+ * http://polymer.github.io/CONTRIBUTORS.txt
+ * Code distributed by Google as part of the polymer project is also
+ * subject to an additional IP rights grant found at
+ * http://polymer.github.io/PATENTS.txt
+ */
+const parts = new WeakMap();
+/**
+ * Renders a template result or other value to a container.
+ *
+ * To update a container with new values, reevaluate the template literal and
+ * call `render` with the new result.
+ *
+ * @param result Any value renderable by NodePart - typically a TemplateResult
+ *     created by evaluating a template tag like `html` or `svg`.
+ * @param container A DOM parent to render to. The entire contents are either
+ *     replaced, or efficiently updated if the same result type was previous
+ *     rendered there.
+ * @param options RenderOptions for the entire render tree rendered to this
+ *     container. Render options must *not* change between renders to the same
+ *     container, as those changes will not effect previously rendered DOM.
+ */
+const render = (result, container, options) => {
+  let part = parts.get(container);
+  if (part === undefined) {
+    removeNodes(container, container.firstChild);
+    parts.set(container, part = new NodePart(Object.assign({ templateFactory }, options)));
+    part.appendInto(container);
+  }
+  part.setValue(result);
+  part.commit();
+};
+/**
+ * @license
+ * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
+ * This code may only be used under the BSD style license found at
+ * http://polymer.github.io/LICENSE.txt
+ * The complete set of authors may be found at
+ * http://polymer.github.io/AUTHORS.txt
+ * The complete set of contributors may be found at
+ * http://polymer.github.io/CONTRIBUTORS.txt
+ * Code distributed by Google as part of the polymer project is also
+ * subject to an additional IP rights grant found at
+ * http://polymer.github.io/PATENTS.txt
+ */
+// IMPORTANT: do not change the property name or the assignment expression.
+// This line will be used in regexes to search for lit-html usage.
+// TODO(justinfagnani): inject version number at build time
+if (typeof window !== 'undefined') {
+  (window['litHtmlVersions'] || (window['litHtmlVersions'] = [])).push('1.4.1');
+}
+/**
+ * Interprets a template literal as an HTML template that can efficiently
+ * render to and update a container.
+ */
+const html = (strings, ...values) => new TemplateResult(strings, values, 'html', defaultTemplateProcessor);
+/**
+ * Interprets a template literal as an SVG template that can efficiently
+ * render to and update a container.
+ */
+const svg = (strings, ...values) => new SVGTemplateResult(strings, values, 'svg', defaultTemplateProcessor);
+export { AttributeCommitter, AttributePart, BooleanAttributePart, DefaultTemplateProcessor, EventPart, NodePart, PropertyCommitter, PropertyPart, SVGTemplateResult, Template, TemplateInstance, TemplateResult, createMarker, defaultTemplateProcessor, directive, html, isDirective, isIterable, isPrimitive, isTemplatePartActive, noChange, nothing, parts, removeNodes, render, reparentNodes, svg, templateCaches, templateFactory };

test/index.test.js ADDED Viewed

@@ -0,0 +1,123 @@
+import { expect, test, jest } from '@jest/globals'
+import { number, boolean, string, array, object } from '../src/index.js';
+const logMock = jest.fn();
+window.logError = logMock;
+const expectError = (msg) => expect(logMock).toHaveBeenCalledWith(msg);
+const primitives = [
+  {
+    type: 'number',
+    validator: number,
+    valid: [123, 40.5, 6410],
+    invalid: ['123', false, {}, [], new Date()],
+  },
+  {
+    type: 'boolean',
+    validator: boolean,
+    valid: [false, true],
+    invalid: ['123', 123, {}, [], new Date()],
+  },
+  {
+    type: 'string',
+    validator: string,
+    valid: ['', '123'],
+    invalid: [123, false, {}, [], new Date()],
+  }
+]
+primitives.forEach(value =>
+  it(`${value.type}`, () => {
+    const context = 'key'
+    expect(value.validator.type).toEqual(value.type);
+    expect(value.validator.isRequired.type).toEqual(value.type);
+    value.validator.validate(context);
+    for (const v of value.valid) {
+      value.validator.validate(context, v);
+      value.validator.isRequired.validate(context, v);
+    }
+    value.validator.isRequired.validate(context);
+    expectError(`'key' Field is required`);
+    for (const v of value.invalid) {
+      value.validator.validate(context, v);
+      expectError(`'key' Expected type '${value.type}' got type '${typeof v}'`)
+    }
+  })
+);
+test('object', () => {
+  const context = 'data';
+  object({}).validate(context, { name: '123' });
+  object({ name: string }).validate(context, { name: '123' });
+  object({ name: string.isRequired }).validate(context, { name: '' });
+  object({ name: string.isRequired }).validate(context, {});
+  expectError(`'data.name' Field is required`);
+  const schema = object({
+    address: object({
+      street: string,
+    })
+  })
+  schema.validate(context, {});
+  schema.validate(context, '123');
+  expectError(`'data' Expected object literal '{}' got 'string'`);
+  schema.validate(context, {
+    address: {},
+  });
+  schema.validate(context, {
+    address: '123',
+  });
+  expectError(`'data.address' Expected object literal '{}' got 'string'`);
+  schema.validate(context, {
+    address: {
+      street: 'avenue 1',
+    },
+  });
+  schema.validate(context, {
+    address: {
+      street: false,
+    },
+  });
+  expectError(`'data.address.street' Expected type 'string' got type 'boolean'`);
+  const schema2 = object({
+    address: object({
+      street: string.isRequired,
+    })
+  })
+  schema2.validate(context, {});
+  schema2.validate(context, {
+    address: {
+      street: '11th avenue',
+    },
+  });
+  schema2.validate(context, {
+    address: {},
+  });
+  expectError(`'data.address.street' Field is required`);
+})
+test('array', () => {
+  const context = 'items';
+  array(string).validate(context, ['123']);
+  array(string).validate(context, [123]);
+  expectError(`'items[0]' Expected type 'string' got type 'number'`);
+  array(array(string)).validate(context, [['123']]);
+  array(array(string)).validate(context, [[123]]);
+  expectError(`'items[0][0]' Expected type 'string' got type 'number'`);
+  const schema = object({
+    street: string.isRequired,
+  })
+  array(schema).validate(context, []);
+  array(schema).validate(context, [{ street: '123' }, { street: '456' }, { street: '789' }]);
+  array(schema).validate(context, [{}]);
+  expectError(`'items[0].street' Field is required`);
+  array(schema).validate(context, [{ street: false }]);
+  expectError(`'items[0].street' Expected type 'string' got type 'boolean'`);
+  array(schema).validate(context, [{ street: '123' }, {}]);
+  expectError(`'items[1].street' Field is required`);
+  array(schema).validate(context, [{ street: '123' }, { street: false }]);
+  expectError(`'items[1].street' Expected type 'string' got type 'boolean'`);
+});

test/setup.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ global.window = {}
2	+ global.Document = class { };

atoms-element v5.0.0

git clone https://git.pyrossh.dev/atoms-element

A simple web component library for defining your custom elements. It works on both client and server.