4c11234 | 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.

4c11234 — Peter John 2026-08-07T11:52:39+05:30

improve rendering

Generated files not shown: package-lock.json

Files changed (8) hide show

__snapshots__/index.test.js.snap +0 -352
examples/e2e.spec.js +68 -0
examples/server.js +33 -3
index.js +14 -20
index.test.js +47 -48
index.test.js.snapshot +47 -0
lit-html.js +0 -1244
package.json +7 -8

__snapshots__/index.test.js.snap DELETED Viewed

@@ -1,352 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`createElement styles are scoped and injected via SSR 1`] = `
-"@scope (styled-element) {
-    :scope {
-      display: flex;
-    }
-    .count {
-      color: magenta;
-    }
-}
-"
-`;
-exports[`createElement with attrs and hooks 1`] = `
-"
-      <div>
-        <div>
-          <span>perPage: 5</span> </div> </div> <span>Count: 3</span>  <button>Set</button> "
-`;
-exports[`createElement without attrs 1`] = `" <div></div>"`;
-exports[`createPage 1`] = `
-"
-      <!DOCTYPE html>
-      <html lang=\\"en\\">
-        <head>
-          <meta charset=\\"utf-8\\" />
-          <meta http-equiv=\\"x-ua-compatible\\" content=\\"ie=edge\\" />
-          <meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=utf-8\\">
-          <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=5.0, shrink-to-fit=no\\">
-          <link rel=\\"sitemap\\" type=\\"application/xml\\" href=\\"/sitemap.xml\\" />
-          <link rel=\\"icon\\" type=\\"image/png\\" href=\\"/assets/icon.png\\" />
-      <title>123</title> <meta name=\\"title\\" content=\\"123\\"/> <meta name=\\"description\\" content=\\"123\\"/>
-          <style id=\\"global\\">
-            *, ::before, ::after {
-    box-sizing: border-box;
-    border-width: 0;
-    border-style: solid;
-    border-color: #e5e7eb;
-}
-hr {
-    height: 0;
-    color: inherit;
-    border-top-width: 1px;
-}
-abbr[title] {
-    -webkit-text-decoration: underline dotted;
-    text-decoration: underline dotted;
-}
-b, strong {
-    font-weight: bolder;
-}
-code, kbd, samp, pre {
-    font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
-    font-size: 1em;
-}
-small {
-    font-size: 80%;
-}
-sub, sup {
-    font-size: 75%;
-    line-height: 0;
-    position: relative;
-    vertical-align: baseline;
-}
-sub {
-    bottom: -0.25em;
-}
-sup {
-    top: -0.5em;
-}
-table {
-    text-indent: 0;
-    border-color: inherit;
-    border-collapse: collapse;
-}
-button, input, optgroup, select, textarea {
-    font-size: 100%;
-    margin: 0;
-    padding: 0;
-    line-height: inherit;
-    color: inherit;
-}
-button, select {
-}
-button, [type='button'], [type='reset'], [type='submit'] {
-}
-::-moz-focus-inner {
-    border-style: none;
-    padding: 0;
-}
-:-moz-focusring {
-    outline: 1px dotted ButtonText;
-}
-:-moz-ui-invalid {
-    box-shadow: none;
-}
-legend {
-    padding: 0;
-}
-progress {
-    vertical-align: baseline;
-}
-::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
-    height: auto;
-}
-[type='search'] {
-    -webkit-appearance: textfield;
-    outline-offset: -2px;
-}
-::-webkit-search-decoration {
-    -webkit-appearance: none;
-}
-::-webkit-file-upload-button {
-    -webkit-appearance: button;
-    font: inherit;
-}
-summary {
-    display: list-item;
-}
-blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre {
-    margin: 0;
-}
-button {
-    background-image: none;
-      outline: 1px dotted, 5px auto -webkit-focus-ring-color;
-}
-fieldset {
-    margin: 0;
-    padding: 0;
-}
-ol, ul {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-}
-img {
-    border-style: solid;
-}
-textarea {
-    resize: vertical;
-}
-input::-moz-placeholder, textarea::-moz-placeholder {
-    opacity: 1;
-    color: #9ca3af;
-}
-input:-ms-input-placeholder, textarea:-ms-input-placeholder {
-    opacity: 1;
-    color: #9ca3af;
-}
-input::placeholder, textarea::placeholder {
-    opacity: 1;
-    color: #9ca3af;
-}
-button, [role='button'] {
-    cursor: pointer;
-}
-h1, h2, h3, h4, h5, h6 {
-    font-size: inherit;
-    font-weight: inherit;
-}
-a {
-    color: inherit;
-    text-decoration: inherit;
-}
-pre, code, kbd, samp {
-    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
-}
-img, svg, video, canvas, audio, iframe, embed, object {
-    display: block;
-    vertical-align: middle;
-}
-img, video {
-    max-width: 100%;
-    height: auto;
-}
-html {
-    -moz-tab-size: 4;
-    -o-tab-size: 4;
-    tab-size: 4;
-    line-height: 1.5;
-    -webkit-text-size-adjust: 100%;
-    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-    width: 100%;
-    height: 100%;
-}
-body {
-    margin: 0px;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-    line-height: 1.4;
-    background-color: white;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    flex: 1 1 0%;
-    min-width: 320px;
-    min-height: 100vh;
-    font-weight: 400;
-    color: rgba(44, 62, 80, 1);
-    direction: ltr;
-    font-synthesis: none;
-    text-rendering: optimizeLegibility;
-}
-          </style>
-          <script type=\\"module\\"><script>
-        </head>
-        <body>
-      <div>
-        <app-header></app-header> <main class=\\"flex flex-1 flex-col mt-20 items-center\\">
-          <h1 class=\\"text-5xl\\">123</h1> </main> </div>
-          <script>
-            window.props = {\\"config\\":{\\"title\\":\\"123\\"}};
-          </script>
-          <script type=\\"module\\"><script>
-        </body>
-      </html>
-  "
-`;
-exports[`css tagged template 1`] = `
-"
-    :scope {
-      display: flex;
-    }
-    button {
-      color: magenta;
-    }
-  "
-`;
-exports[`render attribute keys 1`] = `
-"
-    <div>
-      <app-counter name=\\"123\\" perPage=\\"1\\"></app-counter> </div>"
-`;
-exports[`render attributes within quotes 1`] = `
-"
-    <div>
-      <app-counter name=\\"123\\" class=\\"high\\" age=\\"1\\" details1=\\"{'name':'123','address':{'street':'1'}}\\" items=\\"[1,2,3]\\"></app-counter> </div>"
-`;
-exports[`render multi template 1`] = `
-"
-    <div>
-          <app-item meta=\\"{'index':1}\\">
-            <button>+</button> </app-item> <app-item meta=\\"{'index':2}\\">
-            <button>+</button> </app-item> </div>"
-`;
-exports[`render single template 1`] = `" <div>NoCountry false</div>"`;
-exports[`render unsafeHTML 1`] = `" <div><div><p class=\\"123\\">this is unsafe</p></div></div>"`;
-exports[`renderHtml 1`] = `
-"
-    <div>
-      <app-counter name=\\"123\\" class=\\"abc high\\" age=\\"1\\" details1=\\"{'name':'123','address':{'street':'1'}}\\" items=\\"[1,2,3]\\"></app-counter> </div>"
-`;
-exports[`renderHtml escapes text and attribute values 1`] = `"<div class=\\"a&quot; onmouseover=&quot;alert(1)\\">&lt;script&gt;alert(1)&lt;/script&gt;</div>"`;

examples/e2e.spec.js ADDED Viewed

@@ -0,0 +1,68 @@
+// Real-browser test for the example app, run with: npm run test:e2e
+// Requires Chromium once: npx playwright install chromium
+// Named .spec.js (not .test.js) so it's never picked up by a bare `node --test`.
+import { test, before, after } from 'node:test';
+import assert from 'node:assert/strict';
+import { spawn } from 'node:child_process';
+import { chromium } from 'playwright';
+const PORT = 3987;
+const BASE_URL = `http://localhost:${PORT}/`;
+let serverProcess;
+let browser;
+let page;
+const pageErrors = [];
+before(async () => {
+  serverProcess = spawn(process.execPath, ['examples/server.js', String(PORT)], { stdio: 'ignore' });
+  const deadline = Date.now() + 15000;
+  for (;;) {
+    try {
+      if ((await fetch(BASE_URL)).ok) break;
+    } catch {
+      // server not up yet
+    }
+    if (Date.now() > deadline) throw new Error('example server did not start in time');
+    await new Promise((resolve) => setTimeout(resolve, 200));
+  }
+  browser = await chromium.launch();
+  page = await browser.newPage();
+  page.on('pageerror', (err) => pageErrors.push(err.message));
+  await page.goto(BASE_URL, { waitUntil: 'networkidle' });
+  await page.waitForSelector('app-counter');
+});
+after(async () => {
+  await browser?.close();
+  serverProcess?.kill();
+});
+test('renders each counter exactly once, with no leftover duplicate SSR markup', async () => {
+  const counters = page.locator('app-counter');
+  assert.strictEqual(await counters.count(), 2);
+  for (let i = 0; i < 2; i++) {
+    assert.strictEqual(await counters.nth(i).locator('h1').count(), 1, `counter ${i} should render exactly one <h1>`);
+  }
+});
+test('clicking +/- updates the counter and the shared total reducer', async () => {
+  const first = page.locator('app-counter').nth(0);
+  const second = page.locator('app-counter').nth(1);
+  await first.getByRole('button', { name: '+' }).click();
+  await first.getByRole('button', { name: '+' }).click();
+  await first.getByRole('button', { name: '+' }).click();
+  await second.getByRole('button', { name: '+' }).click();
+  await first.getByRole('button', { name: '-' }).click();
+  assert.strictEqual((await first.locator('h1').textContent()).trim(), '2');
+  assert.strictEqual((await second.locator('h1').textContent()).trim(), '1');
+  assert.strictEqual((await page.locator('app-total h1').textContent()).trim(), 'Total of 2 Counters: 3');
+});
+test('no console/page errors were thrown', () => {
+  assert.deepStrictEqual(pageErrors, []);
+});

examples/server.js CHANGED Viewed

@@ -1,22 +1,37 @@
 import http from 'http';
 import fs from 'fs';
+import path from 'path';
 import { fileURLToPath } from 'url';
 import { dirname } from 'path';
 import renderPage from './pages/index.js';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
+const rootDir = path.join(__dirname, '..');
 const port = process.argv[2] || 3000;
 const elements = ['app-counter.js', 'app-total.js'];
 const srcMap = {
-  '/index.js': `${__dirname}/../index.js`,
+  '/index.js': `${rootDir}/index.js`,
-  '/lit-html.js': `${__dirname}/../lit-html.js`,
   '/store.js': `${__dirname}/store.js`,
 };
 elements.forEach((el) => {
   srcMap['/elements/' + el] = `${__dirname}/elements/${el}`;
 });
+// lit-html and mutative are real npm dependencies (not vendored), so the
+// browser needs an import map for the bare specifiers index.js uses, plus
+// the packages' files served as-is — their internal imports are all
+// relative, so no other wiring is needed.
+const importMap = {
+  imports: {
+    'lit-html': '/node_modules/lit-html/lit-html.js',
+    'lit-html/directive-helpers.js': '/node_modules/lit-html/directive-helpers.js',
+    'lit-html/directives/unsafe-html.js': '/node_modules/lit-html/directives/unsafe-html.js',
+    mutative: '/node_modules/mutative/dist/mutative.esm.mjs',
+  },
+};
+const nodeModulesDir = path.join(rootDir, 'node_modules');
 http
   .createServer((req, res) => {
     if (req.url.includes('/api/posts')) {
@@ -40,7 +55,7 @@ http
         props: {
           config: { lang: 'en', title: 'Counter App' },
         },
-        headScript: '',
+        headScript: `<script type="importmap">${JSON.stringify(importMap)}</script>`,
         bodyScript: `
           <script type="module">
           ${elements.map((el) => `import './elements/${el}';`).join('\n')}
@@ -50,12 +65,27 @@ http
       res.end(html);
       return;
     }
+    if (req.url.startsWith('/node_modules/')) {
+      const relative = req.url.slice('/node_modules/'.length);
+      const filename = path.normalize(path.join(nodeModulesDir, relative));
+      if (filename.startsWith(nodeModulesDir) && fs.existsSync(filename)) {
+        res.setHeader('Content-type', 'application/javascript');
+        res.end(fs.readFileSync(filename));
+      } else {
+        res.statusCode = 404;
+        res.end();
+      }
+      return;
+    }
     const filename = srcMap[req.url];
     if (filename) {
       const data = fs.readFileSync(filename);
       res.setHeader('Content-type', 'application/javascript');
       res.end(data);
+      return;
     }
+    res.statusCode = 404;
+    res.end();
   })
   .listen(parseInt(port));

index.js CHANGED Viewed

@@ -1,4 +1,6 @@
-import { html, render as litRender, directive, NodePart, isPrimitive } from './lit-html.js';
+import { html, render as litRender } from 'lit-html';
+import { isTemplateResult } from 'lit-html/directive-helpers.js';
+import { unsafeHTML as litUnsafeHTML } from 'lit-html/directives/unsafe-html.js';
 import { create } from 'mutative';
 const isBrowser = typeof window !== 'undefined';
@@ -255,14 +257,14 @@ export const renderHtml = isBrowser
         } else if (value === null || !(type === 'object' || type === 'function' || type === 'undefined')) {
           const str = type !== 'string' ? String(value) : value;
           js += wrapAttribute(attrName, suffix, text, attrName ? escapeAttribute(str) : escapeText(str));
-        } else if (Array.isArray(value) && value.find((item) => item && item.strings && item.type === 'html')) {
+        } else if (Array.isArray(value) && value.find((item) => item && isTemplateResult(item))) {
           js += text;
           value.forEach((v) => {
             js += renderHtml(v);
           });
         } else if (type === 'object') {
           // TemplateResult
-          if (value.strings && value.type === 'html') {
+          if (isTemplateResult(value)) {
             js += text;
             js += renderHtml(value);
           } else {
@@ -434,23 +436,7 @@ const pageStyles = {
   },
 };
-const previousValues = new WeakMap();
-export const unsafeHTML = isBrowser
-  ? directive((value) => (part) => {
-      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 });
-    })
-  : (value) => ({ [UNSAFE_HTML]: true, value });
+export const unsafeHTML = isBrowser ? litUnsafeHTML : (value) => ({ [UNSAFE_HTML]: true, value });
 const fifo = (q) => q.shift();
 const filo = (q) => q.pop();
@@ -557,6 +543,7 @@ export const createElement = (meta, renderFn) => {
       super();
       this._dirty = false;
       this._connected = false;
+      this._hydrated = false;
       this.attrs = ssrAttrs || {};
       this.state = {};
       this.hooks = {
@@ -655,6 +642,13 @@ export const createElement = (meta, renderFn) => {
           injectedStyleTags.add(name);
           document.getElementById('global').textContent += styles;
         }
+        if (!this._hydrated) {
+          // lit-html's render() appends into the container rather than replacing its
+          // content, so any server-rendered light-DOM markup must be discarded before
+          // the first client-side render or it's left behind as an inert duplicate.
+          this._hydrated = true;
+          this.textContent = '';
+        }
         renderHtml(template, this);
       } else {
         return renderHtml(template);

index.test.js CHANGED Viewed

@@ -1,9 +1,8 @@
+import { test } from 'node:test';
-import { expect, test, jest } from '@jest/globals';
+import assert from 'node:assert/strict';
 import { getElement, createElement, createPage, createReducer, html, renderHtml, unsafeHTML, css, useReducer, useEffect } from './index.js';
-global.__DEV = true;
-test('css tagged template', () => {
+test('css tagged template', (t) => {
   const color = 'magenta';
   const styles = css`
     :scope {
@@ -13,10 +12,10 @@ test('css tagged template', () => {
       color: ${color};
     }
   `;
-  expect(styles).toMatchSnapshot();
+  t.assert.snapshot(styles);
 });
-test('createElement styles are scoped and injected via SSR', () => {
+test('createElement styles are scoped and injected via SSR', (t) => {
   const Styled = () => {
     return html` <div class="count"></div> `;
   };
@@ -30,10 +29,10 @@ test('createElement styles are scoped and injected via SSR', () => {
   `;
   createElement({ url: '/styled-element.js' }, Styled);
   const Clazz = getElement('styled-element');
-  expect(Clazz.styles).toMatchSnapshot();
+  t.assert.snapshot(Clazz.styles);
 });
-test('renderHtml', () => {
+test('renderHtml', (t) => {
   const age = 1;
   const data = { name: '123', address: { street: '1' } };
   const items = [1, 2, 3];
@@ -44,20 +43,20 @@ test('renderHtml', () => {
     </div>
   `;
   const res = renderHtml(template);
-  expect(res).toMatchSnapshot();
+  t.assert.snapshot(res);
 });
-test('render attribute keys', () => {
+test('render attribute keys', (t) => {
   const template = html`
     <div>
       <app-counter name="123" perPage="1"></app-counter>
     </div>
   `;
   const res = renderHtml(template);
-  expect(res).toMatchSnapshot();
+  t.assert.snapshot(res);
 });
-test('render attributes within quotes', () => {
+test('render attributes within quotes', (t) => {
   const age = 1;
   const data = { name: '123', address: { street: '1' } };
   const items = [1, 2, 3];
@@ -68,33 +67,33 @@ test('render attributes within quotes', () => {
     </div>
   `;
   const res = renderHtml(template);
-  expect(res).toMatchSnapshot();
+  t.assert.snapshot(res);
 });
-test('render unsafeHTML', () => {
+test('render unsafeHTML', (t) => {
   const textContent = `<div><p class="123">this is unsafe</p></div>`;
   const template = html` <div>${unsafeHTML(textContent)}</div> `;
   const res = renderHtml(template);
-  expect(res).toMatchSnapshot();
+  t.assert.snapshot(res);
 });
-test('renderHtml escapes text and attribute values', () => {
+test('renderHtml escapes text and attribute values', (t) => {
   const evil = '<script>alert(1)</script>';
   const quote = 'a" onmouseover="alert(1)';
   const template = html`<div class="${quote}">${evil}</div>`;
   const res = renderHtml(template);
-  expect(res).not.toContain('<script>');
+  assert.ok(!res.includes('<script>'));
-  expect(res).not.toContain('onmouseover="alert(1)"');
+  assert.ok(!res.includes('onmouseover="alert(1)"'));
-  expect(res).toMatchSnapshot();
+  t.assert.snapshot(res);
 });
-test('render single template', () => {
+test('render single template', (t) => {
   const template = html` <div>${html`NoCountry ${false}`}</div> `;
   const res = renderHtml(template);
-  expect(res).toMatchSnapshot();
+  t.assert.snapshot(res);
 });
-test('render multi template', () => {
+test('render multi template', (t) => {
   const template = html`
     <div>
       ${[1, 2].map(
@@ -107,10 +106,10 @@ test('render multi template', () => {
     </div>
   `;
   const res = renderHtml(template);
-  expect(res).toMatchSnapshot();
+  t.assert.snapshot(res);
 });
-test('createReducer', () => {
+test('createReducer', (t) => {
   const countReducer = createReducer({
     initial: {
       count: 0,
@@ -125,24 +124,24 @@ test('createReducer', () => {
       },
     },
   });
-  const mock = jest.fn();
+  const mock = t.mock.fn();
   countReducer.subscribe(mock);
   const before = countReducer.getValue();
   countReducer.actions.increment(4);
-  expect(countReducer.getValue().count).toEqual(4);
+  assert.strictEqual(countReducer.getValue().count, 4);
-  expect(mock).toHaveBeenCalledWith({ count: 4, other: { untouched: true } });
+  assert.deepStrictEqual(mock.mock.calls[0].arguments, [{ count: 4, other: { untouched: true } }]);
   countReducer.actions.decrement(1);
-  expect(countReducer.getValue().count).toEqual(3);
+  assert.strictEqual(countReducer.getValue().count, 3);
-  expect(mock).toHaveBeenCalledWith({ count: 3, other: { untouched: true } });
+  assert.deepStrictEqual(mock.mock.calls[1].arguments, [{ count: 3, other: { untouched: true } }]);
   countReducer.actions.decrement(2);
   const after = countReducer.getValue();
-  expect(after.count).toEqual(1);
+  assert.strictEqual(after.count, 1);
-  expect(mock).toHaveBeenCalledWith({ count: 1, other: { untouched: true } });
+  assert.deepStrictEqual(mock.mock.calls[2].arguments, [{ count: 1, other: { untouched: true } }]);
-  expect(after).not.toBe(before);
+  assert.notStrictEqual(after, before);
-  expect(after.other).toBe(before.other);
+  assert.strictEqual(after.other, before.other);
 });
-test('useReducer selector only updates when the selected slice changes', () => {
+test('useReducer selector only updates when the selected slice changes', (t) => {
   const store = createReducer({
     initial: { count: 0, other: 0 },
     reducer: {
@@ -161,18 +160,18 @@ test('useReducer selector only updates when the selected slice changes', () => {
   const Clazz = getElement('count-only');
   const instance = new Clazz();
   instance.render();
-  const updateSpy = jest.fn();
+  const updateSpy = t.mock.fn();
   instance.update = updateSpy;
   store.actions.incOther();
-  expect(updateSpy).not.toHaveBeenCalled();
+  assert.strictEqual(updateSpy.mock.callCount(), 0);
   store.actions.incCount();
-  expect(updateSpy).toHaveBeenCalledTimes(1);
+  assert.strictEqual(updateSpy.mock.callCount(), 1);
 });
-test('useEffect cleanup runs on disconnect', () => {
+test('useEffect cleanup runs on disconnect', (t) => {
-  const cleanup = jest.fn();
+  const cleanup = t.mock.fn();
   createElement({ url: '/cleanup-element.js' }, () => {
     useEffect(() => cleanup, []);
     return html` <div></div> `;
@@ -181,23 +180,23 @@ test('useEffect cleanup runs on disconnect', () => {
   const instance = new Clazz();
   instance.render();
   instance._flushEffects();
-  expect(cleanup).not.toHaveBeenCalled();
+  assert.strictEqual(cleanup.mock.callCount(), 0);
   instance.disconnectedCallback();
-  expect(cleanup).toHaveBeenCalledTimes(1);
+  assert.strictEqual(cleanup.mock.callCount(), 1);
 });
-test('createElement without attrs', () => {
+test('createElement without attrs', (t) => {
   createElement({ url: '/base-element.js' }, () => {
     return html` <div></div> `;
   });
   const Clazz = getElement('base-element');
   const instance = new Clazz();
   const res = instance.render();
-  expect(res).toMatchSnapshot();
+  t.assert.snapshot(res);
 });
-test('createElement with attrs and hooks', () => {
+test('createElement with attrs and hooks', (t) => {
   createElement({ url: '/base-element.js' }, ({ perPage }) => {
     const { count, actions } = useReducer({
       initial: {
@@ -224,11 +223,11 @@ test('createElement with attrs and hooks', () => {
   const Clazz = getElement('base-element');
   const instance = new Clazz({ perPage: 5 });
   const res = instance.render();
-  expect(Clazz.observedAttributes).toEqual(['perpage']);
+  assert.deepStrictEqual(Clazz.observedAttributes, ['perpage']);
-  expect(res).toMatchSnapshot();
+  t.assert.snapshot(res);
 });
-test('createPage', () => {
+test('createPage', (t) => {
   const route = () => {
     const langPart = this.config.lang === 'en' ? '' : `/${this.config.lang}`;
     return `${langPart}`;
@@ -258,5 +257,5 @@ test('createPage', () => {
   });
   const scripts = '<script type="module"><script>';
   const res = renderPage({ lang: 'en', props: { config: { title: '123' } }, headScript: scripts, bodyScript: scripts });
-  expect(res).toMatchSnapshot();
+  t.assert.snapshot(res);
 });

index.test.js.snapshot ADDED Viewed

@@ -0,0 +1,47 @@
+exports[`createElement styles are scoped and injected via SSR 1`] = `
+"@scope (styled-element) {\\n\\n    :scope {\\n      display: flex;\\n    }\\n    .count {\\n      color: magenta;\\n    }\\n  \\n}\\n"
+`;
+exports[`createElement with attrs and hooks 1`] = `
+"\\n      <div>\\n        <div>\\n          <span>perPage: 5</span> </div> </div> <span>Count: 3</span>  <button>Set</button> "
+`;
+exports[`createElement without attrs 1`] = `
+" <div></div>"
+`;
+exports[`createPage 1`] = `
+"\\n      <!DOCTYPE html>\\n      <html lang=\\"en\\">\\n        <head>\\n          <meta charset=\\"utf-8\\" />\\n          <meta http-equiv=\\"x-ua-compatible\\" content=\\"ie=edge\\" />\\n          <meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=utf-8\\">\\n          <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=5.0, shrink-to-fit=no\\">\\n          <link rel=\\"sitemap\\" type=\\"application/xml\\" href=\\"/sitemap.xml\\" />\\n          <link rel=\\"icon\\" type=\\"image/png\\" href=\\"/assets/icon.png\\" />\\n          \\n      <title>123</title> <meta name=\\"title\\" content=\\"123\\"/> <meta name=\\"description\\" content=\\"123\\"/>\\n          <style id=\\"global\\">\\n            *, ::before, ::after {\\n\\n    box-sizing: border-box;\\n    border-width: 0;\\n    border-style: solid;\\n    border-color: #e5e7eb;\\n\\n}\\nhr {\\n\\n    height: 0;\\n    color: inherit;\\n    border-top-width: 1px;\\n\\n}\\nabbr[title] {\\n\\n    -webkit-text-decoration: underline dotted;\\n    text-decoration: underline dotted;\\n\\n}\\nb, strong {\\n\\n    font-weight: bolder;\\n\\n}\\ncode, kbd, samp, pre {\\n\\n    font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;\\n    font-size: 1em;\\n\\n}\\nsmall {\\n\\n    font-size: 80%;\\n\\n}\\nsub, sup {\\n\\n    font-size: 75%;\\n    line-height: 0;\\n    position: relative;\\n    vertical-align: baseline;\\n\\n}\\nsub {\\n\\n    bottom: -0.25em;\\n\\n}\\nsup {\\n\\n    top: -0.5em;\\n\\n}\\ntable {\\n\\n    text-indent: 0;\\n    border-color: inherit;\\n    border-collapse: collapse;\\n\\n}\\nbutton, input, optgroup, select, textarea {\\n\\n    font-size: 100%;\\n    margin: 0;\\n    padding: 0;\\n    line-height: inherit;\\n    color: inherit;\\n\\n}\\nbutton, select {\\n\\n\\n}\\nbutton, [type='button'], [type='reset'], [type='submit'] {\\n\\n\\n}\\n::-moz-focus-inner {\\n\\n    border-style: none;\\n    padding: 0;\\n\\n}\\n:-moz-focusring {\\n\\n    outline: 1px dotted ButtonText;\\n\\n}\\n:-moz-ui-invalid {\\n\\n    box-shadow: none;\\n\\n}\\nlegend {\\n\\n    padding: 0;\\n\\n}\\nprogress {\\n\\n    vertical-align: baseline;\\n\\n}\\n::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\\n\\n    height: auto;\\n\\n}\\n[type='search'] {\\n\\n    -webkit-appearance: textfield;\\n    outline-offset: -2px;\\n\\n}\\n::-webkit-search-decoration {\\n\\n    -webkit-appearance: none;\\n\\n}\\n::-webkit-file-upload-button {\\n\\n    -webkit-appearance: button;\\n    font: inherit;\\n\\n}\\nsummary {\\n\\n    display: list-item;\\n\\n}\\nblockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre {\\n\\n    margin: 0;\\n\\n}\\nbutton {\\n\\n    background-image: none;\\n\\n      outline: 1px dotted, 5px auto -webkit-focus-ring-color;\\n\\n}\\nfieldset {\\n\\n    margin: 0;\\n    padding: 0;\\n\\n}\\nol, ul {\\n\\n    list-style: none;\\n    margin: 0;\\n    padding: 0;\\n\\n}\\nimg {\\n\\n    border-style: solid;\\n\\n}\\ntextarea {\\n\\n    resize: vertical;\\n\\n}\\ninput::-moz-placeholder, textarea::-moz-placeholder {\\n\\n    opacity: 1;\\n    color: #9ca3af;\\n\\n}\\ninput:-ms-input-placeholder, textarea:-ms-input-placeholder {\\n\\n    opacity: 1;\\n    color: #9ca3af;\\n\\n}\\ninput::placeholder, textarea::placeholder {\\n\\n    opacity: 1;\\n    color: #9ca3af;\\n\\n}\\nbutton, [role='button'] {\\n\\n    cursor: pointer;\\n\\n}\\nh1, h2, h3, h4, h5, h6 {\\n\\n    font-size: inherit;\\n    font-weight: inherit;\\n\\n}\\na {\\n\\n    color: inherit;\\n    text-decoration: inherit;\\n\\n}\\npre, code, kbd, samp {\\n\\n    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;\\n\\n}\\nimg, svg, video, canvas, audio, iframe, embed, object {\\n\\n    display: block;\\n    vertical-align: middle;\\n\\n}\\nimg, video {\\n\\n    max-width: 100%;\\n    height: auto;\\n\\n}\\nhtml {\\n\\n    -moz-tab-size: 4;\\n    -o-tab-size: 4;\\n    tab-size: 4;\\n    line-height: 1.5;\\n    -webkit-text-size-adjust: 100%;\\n    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';\\n    width: 100%;\\n    height: 100%;\\n\\n}\\nbody {\\n\\n    margin: 0px;\\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\\n    line-height: 1.4;\\n    background-color: white;\\n    width: 100%;\\n    height: 100%;\\n    display: flex;\\n    flex-direction: column;\\n    flex: 1 1 0%;\\n    min-width: 320px;\\n    min-height: 100vh;\\n    font-weight: 400;\\n    color: rgba(44, 62, 80, 1);\\n    direction: ltr;\\n    font-synthesis: none;\\n    text-rendering: optimizeLegibility;\\n\\n}\\n\\n            \\n          </style>\\n          <script type=\\"module\\"><script>\\n        </head>\\n        <body>\\n          \\n      <div>\\n        <app-header></app-header> <main class=\\"flex flex-1 flex-col mt-20 items-center\\">\\n          <h1 class=\\"text-5xl\\">123</h1> </main> </div>\\n          <script>\\n            window.props = {\\"config\\":{\\"title\\":\\"123\\"}};\\n          </script>\\n          <script type=\\"module\\"><script>\\n        </body>\\n      </html>\\n  "
+`;
+exports[`css tagged template 1`] = `
+"\\n    :scope {\\n      display: flex;\\n    }\\n    button {\\n      color: magenta;\\n    }\\n  "
+`;
+exports[`render attribute keys 1`] = `
+"\\n    <div>\\n      <app-counter name=\\"123\\" perPage=\\"1\\"></app-counter> </div>"
+`;
+exports[`render attributes within quotes 1`] = `
+"\\n    <div>\\n      <app-counter name=\\"123\\" class=\\"high\\" age=\\"1\\" details1=\\"{'name':'123','address':{'street':'1'}}\\" items=\\"[1,2,3]\\"></app-counter> </div>"
+`;
+exports[`render multi template 1`] = `
+"\\n    <div>\\n      \\n          <app-item meta=\\"{'index':1}\\">\\n            <button>+</button> </app-item> <app-item meta=\\"{'index':2}\\">\\n            <button>+</button> </app-item> </div>"
+`;
+exports[`render single template 1`] = `
+" <div>NoCountry false</div>"
+`;
+exports[`render unsafeHTML 1`] = `
+" <div><div><p class=\\"123\\">this is unsafe</p></div></div>"
+`;
+exports[`renderHtml 1`] = `
+"\\n    <div>\\n      <app-counter name=\\"123\\" class=\\"abc high\\" age=\\"1\\" details1=\\"{'name':'123','address':{'street':'1'}}\\" items=\\"[1,2,3]\\"></app-counter> </div>"
+`;
+exports[`renderHtml escapes text and attribute values 1`] = `
+"<div class=\\"a&quot; onmouseover=&quot;alert(1)\\">&lt;script&gt;alert(1)&lt;/script&gt;</div>"
+`;

lit-html.js DELETED Viewed

@@ -1,1244 +0,0 @@
-/**
- * @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 = typeof window !== 'undefined' && 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,
-};

package.json CHANGED Viewed

@@ -14,7 +14,6 @@
     "lit-html"
   ],
   "files": [
-    "lit-html.js",
     "index.js",
     "index.d.ts"
   ],
@@ -22,17 +21,16 @@
   "author": "pyrossh",
   "type": "module",
   "engines": {
-    "node": ">=14.0.0"
+    "node": ">=22.3.0"
   },
   "scripts": {
-    "example": "node example/server.js",
+    "example": "node examples/server.js",
+    "test": "node --test index.test.js",
+    "test:update-snapshots": "node --test --test-update-snapshots index.test.js",
-    "test": "NODE_OPTIONS=--experimental-vm-modules jest"
+    "test:e2e": "node --test examples/e2e.spec.js"
   },
   "devDependencies": {
-    "jest": "^27.0.5"
+    "playwright": "^1.62.1"
-  },
-  "jest": {
-    "transform": {}
   },
   "prettier": {
     "printWidth": 160,
@@ -41,6 +39,7 @@
     "trailingComma": "all"
   },
   "dependencies": {
+    "lit-html": "^3.3.3",
     "mutative": "^1.3.0"
   }
 }

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.