atoms-element

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

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

b8566f51 — Peter John

initial commit

Files changed (18) hide show

.github/workflows/main.yml +12 -0
__snapshots__/index.test.js.snap +410 -0
example/elements/app-counter.js +63 -0
example/elements/app-total.js +13 -0
example/pages/index.js +24 -0
example/server.js +62 -0
example/store.js +11 -0
index.d.ts +48 -0
index.js +1185 -0
index.test.js +196 -0
src/lit-html.js → lit-html.js +88 -90
package-lock.json +4 -5
package.json +23 -14
readme.md +41 -29
src/index.js +0 -401
src/lit-html-server.js +0 -1679
test/index.test.js +0 -123
test/setup.js +0 -2

.github/workflows/main.yml ADDED Viewed

@@ -0,0 +1,12 @@
+name: Tests
+on: [push]
+jobs:
+  Test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 14.x
+      - uses: bahmutov/npm-install@v1
+      - run: npm test

__snapshots__/index.test.js.snap ADDED Viewed

@@ -0,0 +1,410 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`compileTw 1`] = `
+"
+        .text-white {
+          color: rgba(255, 255, 255, 1);
+        }
+        .font-bold {
+          font-weight: 700;
+        }
+        .border {
+          border-width: 1px;
+        }
+        .border-black {
+          border-color: rgba(0, 0, 0, 1);
+        }
+        .p-4 {
+          padding: 1rem;
+        }
+        .m-4 {
+          margin: 1rem;
+        }
+        .w-20 {
+          width: 5rem;
+        }
+        .h-20 {
+          height: 5rem;
+        }
+      "
+`;
+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;
+}
+        .flex {
+          display: flex;
+        }
+        .flex-1 {
+          flex: 1;
+        }
+        .flex-col {
+          flex-direction: column;
+        }
+        .mt-20 {
+          margin-top: 5rem;
+        }
+        .items-center {
+          align-items: center;
+        }
+        .text-5xl {
+          font-size: 3rem;
+line-height: 1;
+        }
+          </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 1`] = `
+"button {
+    color: magenta;
+    font-size: 10px;
+      font-size: 64px;
+      color: black;
+        color: navy;
+}
+container {
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+}
+"
+`;
+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>"
+`;

example/elements/app-counter.js ADDED Viewed

@@ -0,0 +1,63 @@
+import { useEffect } from '../../index.js';
+import { createElement, html, useReducer } from '../../index.js';
+import { totalReducer } from '../store.js';
+const Counter = ({ name, meta }) => {
+  const { count, actions, effects } = useReducer({
+    initial: {
+      count: 0,
+      data: undefined,
+      err: null,
+    },
+    reducer: {
+      increment: (state) => ({ ...state, count: state.count + 1 }),
+      decrement: (state) => ({ ...state, count: state.count - 1 }),
+      setLoading: (state, v) => ({ ...state, loading: v }),
+      setData: (state, data) => ({ ...state, data }),
+      setErr: (state, err) => ({ ...state, err }),
+    },
+    effects: {
+      loadData: async (actions, id) => {
+        try {
+          actions.setLoading(true);
+          const res = await fetch(`/api/posts/${id}`);
+          actions.setData(await res.json());
+        } catch (err) {
+          actions.setErr(err);
+        } finally {
+          actions.setLoading(false);
+        }
+      },
+    },
+  });
+  useEffect(() => {
+    effects.loadData(name);
+  }, []);
+  const increment = () => {
+    actions.increment();
+    totalReducer.actions.increment(count + 1);
+  };
+  const decrement = () => {
+    actions.decrement();
+    totalReducer.actions.decrement(count - 1);
+  };
+  const warningClass = count > 10 ? 'text-red-500' : '';
+  return html`
+    <div class="mt-10">
+      <div class="mb-2">
+        Counter: ${name}
+        <span>starts at ${meta?.start}</span>
+      </div>
+      <div class="flex flex-1 flex-row items-center text-gray-700">
+        <button class="bg-gray-300 text-gray-700 rounded hover:bg-gray-200 px-4 py-2 text-3xl focus:outline-none" @click=${decrement}>-</button>
+        <div class="mx-20">
+          <h1 class="text-3xl font-mono ${warningClass}">${count}</h1>
+        </div>
+        <button class="bg-gray-300 text-gray-700 rounded hover:bg-gray-200 px-4 py-2 text-3xl focus:outline-none" @click=${increment}>+</button>
+      </div>
+    </div>
+  `;
+};
+export default createElement(import.meta, Counter);

example/elements/app-total.js ADDED Viewed

@@ -0,0 +1,13 @@
+import { createElement, html, useReducer } from '../../index.js';
+import { totalReducer } from '../store.js';
+const Total = () => {
+  const { total } = useReducer(totalReducer);
+  return html`
+    <div class="m-20">
+      <h1 class="text-xl font-mono">Total of 2 Counters: ${total}</h1>
+    </div>
+  `;
+};
+export default createElement(import.meta, Total);

example/pages/index.js ADDED Viewed

@@ -0,0 +1,24 @@
+import { createPage, html } from '../../index.js';
+import '../elements/app-counter.js';
+import '../elements/app-total.js';
+const head = ({ config }) => {
+  return html` <title>${config.title}</title> `;
+};
+const body = () => {
+  return html`
+    <div class="flex flex-1 flex-col items-center justify-center">
+      <app-counter name="1" meta="{'start': 5}"></app-counter>
+      <app-counter name="2" meta="{'start': 7}"></app-counter>
+      </div class="mt-10">
+        <app-total></app-total>
+      </div>
+    </div>
+  `;
+};
+export default createPage({
+  head,
+  body,
+});

example/server.js ADDED Viewed

@@ -0,0 +1,62 @@
+import http from 'http';
+import fs from 'fs';
+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 port = process.argv[2] || 3000;
+const elements = ['app-counter.js', 'app-total.js'];
+const srcMap = {
+  '/index.js': `${__dirname}/../index.js`,
+  '/lit-html.js': `${__dirname}/../lit-html.js`,
+  '/store.js': `${__dirname}/store.js`,
+};
+elements.forEach((el) => {
+  srcMap['/elements/' + el] = `${__dirname}/elements/${el}`;
+});
+http
+  .createServer((req, res) => {
+    if (req.url.includes('/api/posts')) {
+      const parts = req.url.split('/');
+      const id = parts[parts.length - 1];
+      res.setHeader('Content-type', 'application/json');
+      res.end(
+        JSON.stringify({
+          id,
+          title: `post ${id}`,
+          description: ` description ${id}`,
+        }),
+      );
+      return;
+    }
+    if (req.url === '/') {
+      res.statusCode = 200;
+      res.setHeader('Content-type', 'text/html');
+      const html = renderPage({
+        lang: 'en',
+        props: {
+          config: { lang: 'en', title: 'Counter App' },
+        },
+        headScript: '',
+        bodyScript: `
+          <script type="module">
+          ${elements.map((el) => `import './elements/${el}';`).join('\n')}
+          </script>
+        `,
+      });
+      res.end(html);
+      return;
+    }
+    const filename = srcMap[req.url];
+    if (filename) {
+      const data = fs.readFileSync(filename);
+      res.setHeader('Content-type', 'application/javascript');
+      res.end(data);
+    }
+  })
+  .listen(parseInt(port));
+console.log(`Server listening on http://localhost:${port}`);

example/store.js ADDED Viewed

@@ -0,0 +1,11 @@
+import { createReducer } from '../index.js';
+export const totalReducer = createReducer({
+  initial: {
+    total: 0,
+  },
+  reducer: {
+    increment: (state) => ({ ...state, total: state.total + 1 }),
+    decrement: (state) => ({ ...state, total: state.total - 1 }),
+  },
+});

index.d.ts ADDED Viewed

@@ -0,0 +1,48 @@
+export type Config = {
+  version: string
+  url: string
+  image: string
+  author: string
+  languages: Array<string>
+  title: string
+  description: string
+  keywords: string
+  categories: Array<any>
+  tags: Array<any>
+  strings: {[key: string]: any}
+  themes: {[key: string]: any}
+}
+export type Location = {
+  readonly ancestorOrigins: DOMStringList;
+  hash: string;
+  host: string;
+  hostname: string;
+  href: string;
+  readonly origin: string;
+  pathname: string;
+  port: string;
+  protocol: string;
+  search: string;
+  assign: (url: string | URL) => void;
+  reload: () => void;
+  replace: (url: string | URL) => void;
+  toString: () => string;
+}
+export type Reducer<P, Q, R> = {
+  getValue: () => P;
+  subscribe: (fn: (v: P) => void) => void;
+} & { actions: { [K in keyof Q]: (v: any) => void}} & { effects: { [K in keyof R]: (v: any) => void}}
+export type ReducerActions<P> = {[k: string]: (state: P, v: any) => P};
+export type EffectActions<P, Q extends ReducerActions<P>> = {[k: string]: (actions: { [K in keyof Q]: (v: any) => void}, v: any) => void};
+export function createReducer<P, Q extends ReducerActions<P>>(props: { initial: P, reducer: Q }): Reducer<P, Q>;
+export function useReducer<P, Q extends ReducerActions<P>, R extends EffectActions<P, Q>>(props: Reducer<P, Q, R> | { initial: P, reducer: Q, effects: R }) : P & Reducer<P, Q, R>;
+export function createElement(meta: any, renderFn: any): any
+export type Handler = (props: any) => string;
+export function createPage(props: { head: Handler, body: Handler}): (props: { props: any, headScript: string, bodyScript: string }) => string;

index.js ADDED Viewed

@@ -0,0 +1,1185 @@
+import { html, render as litRender, directive, NodePart, isPrimitive } from './lit-html.js';
+const isBrowser = typeof window !== 'undefined';
+export { html, isBrowser };
+const lastAttributeNameRegex =
+  /([ \x09\x0a\x0c\x0d])([^\0-\x1F\x7F-\x9F "'>=/]+)([ \x09\x0a\x0c\x0d]*=[ \x09\x0a\x0c\x0d]*(?:[^ \x09\x0a\x0c\x0d"'`<>=]*|"[^"]*|'[^']*))$/;
+const tagRE = /<[a-zA-Z0-9\-\!\/](?:"[^"]*"|'[^']*'|[^'">])*>/g;
+const whitespaceRE = /^\s*$/;
+const attrRE = /\s([^'"/\s><]+?)[\s/>]|([^\s=]+)=\s?(".*?"|'.*?')/g;
+const voidElements = ['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'param', 'source', 'track', 'wbr'];
+const STRIP_COMMENTS = /(\/\/.*$)|(\/\*[\s\S]*?\*\/)|(\s*=[^,\)]*(('(?:\\'|[^'\r\n])*')|("(?:\\"|[^"\r\n])*"))|(\s*=[^,\)]*))/gm;
+const ARGUMENT_NAMES = /([^\s,]+)/g;
+const parseFuncParams = (func) => {
+  const fnStr = func.toString().replace(STRIP_COMMENTS, '');
+  const result = fnStr.slice(fnStr.indexOf('(') + 1, fnStr.indexOf(')')).match(ARGUMENT_NAMES);
+  return (result || []).filter((it) => it !== '{' && it !== '}');
+};
+const parseTag = (tag) => {
+  const res = {
+    type: 'tag',
+    name: '',
+    voidElement: false,
+    attrs: {},
+    children: [],
+  };
+  const tagMatch = tag.match(/<\/?([^\s]+?)[/\s>]/);
+  if (tagMatch) {
+    res.name = tagMatch[1];
+    if (voidElements.includes(tagMatch[1]) || tag.charAt(tag.length - 2) === '/') {
+      res.voidElement = true;
+    }
+    // handle comment tag
+    if (res.name.startsWith('!--')) {
+      const endIndex = tag.indexOf('-->');
+      return {
+        type: 'comment',
+        comment: endIndex !== -1 ? tag.slice(4, endIndex) : '',
+      };
+    }
+  }
+  const reg = new RegExp(attrRE);
+  let result = null;
+  for (;;) {
+    result = reg.exec(tag);
+    if (result === null) {
+      break;
+    }
+    if (!result[0].trim()) {
+      continue;
+    }
+    if (result[1]) {
+      const attr = result[1].trim();
+      let arr = [attr, ''];
+      if (attr.indexOf('=') > -1) {
+        arr = attr.split('=');
+      }
+      res.attrs[arr[0]] = arr[1];
+      reg.lastIndex--;
+    } else if (result[2]) {
+      res.attrs[result[2]] = result[3].trim().substring(1, result[3].length - 1);
+    }
+  }
+  return res;
+};
+const parseHtml = (html) => {
+  const result = [];
+  const arr = [];
+  let current;
+  let level = -1;
+  // handle text at top level
+  if (html.indexOf('<') !== 0) {
+    var end = html.indexOf('<');
+    result.push({
+      type: 'text',
+      content: end === -1 ? html : html.substring(0, end),
+    });
+  }
+  html.replace(tagRE, function (tag, index) {
+    const isOpen = tag.charAt(1) !== '/';
+    const isComment = tag.startsWith('<!--');
+    const start = index + tag.length;
+    const nextChar = html.charAt(start);
+    let parent;
+    if (isComment) {
+      const comment = parseTag(tag);
+      // if we're at root, push new base node
+      if (level < 0) {
+        result.push(comment);
+        return result;
+      }
+      parent = arr[level];
+      parent.children.push(comment);
+      return result;
+    }
+    if (isOpen) {
+      level++;
+      current = parseTag(tag);
+      if (!current.voidElement && nextChar && nextChar !== '<') {
+        current.children.push({
+          type: 'text',
+          content: html.slice(start, html.indexOf('<', start)),
+        });
+      }
+      // if we're at root, push new base node
+      if (level === 0) {
+        result.push(current);
+      }
+      parent = arr[level - 1];
+      if (parent) {
+        parent.children.push(current);
+      }
+      arr[level] = current;
+    }
+    if (!isOpen || current.voidElement) {
+      if (level > -1 && (current.voidElement || current.name === tag.slice(2, -1))) {
+        level--;
+        // move current up a level to match the end tag
+        current = level === -1 ? result : arr[level];
+      }
+      if (nextChar !== '<' && nextChar) {
+        // trailing text node
+        // if we're at the root, push a base text node. otherwise add as
+        // a child to the current node.
+        parent = level === -1 ? result : arr[level].children;
+        // calculate correct end of the content slice in case there's
+        // no tag after the text node.
+        const end = html.indexOf('<', start);
+        let content = html.slice(start, end === -1 ? undefined : end);
+        // if a node is nothing but whitespace, collapse it as the spec states:
+        // https://www.w3.org/TR/html4/struct/text.html#h-9.1
+        if (whitespaceRE.test(content)) {
+          content = ' ';
+        }
+        // don't add whitespace-only text nodes if they would be trailing text nodes
+        // or if they would be leading whitespace-only text nodes:
+        //  * end > -1 indicates this is not a trailing text node
+        //  * leading node is when level is -1 and parent has length 0
+        if ((end > -1 && level + parent.length >= 0) || content !== ' ') {
+          parent.push({
+            type: 'text',
+            content: content,
+          });
+        }
+      }
+    }
+  });
+  return result;
+};
+const stringifyAttrs = (attrs) => {
+  const buff = [];
+  for (let key in attrs) {
+    buff.push(key + '="' + attrs[key] + '"');
+  }
+  if (!buff.length) {
+    return '';
+  }
+  return ' ' + buff.join(' ');
+};
+const stringifyHtml = (buff, doc) => {
+  switch (doc.type) {
+    case 'text':
+      return buff + doc.content;
+    case 'tag':
+      buff += '<' + doc.name + (doc.attrs ? stringifyAttrs(doc.attrs) : '') + (doc.voidElement ? '/>' : '>');
+      if (doc.voidElement) {
+        return buff;
+      }
+      return buff + doc.children.reduce(stringifyHtml, '') + '</' + doc.name + '>';
+    case 'comment':
+      buff += '<!--' + doc.comment + '-->';
+      return buff;
+  }
+};
+const hydrate = (node) => {
+  const Clazz = getElement(node.name);
+  if (Clazz) {
+    const newAttrs = {};
+    Object.keys(node.attrs).forEach((key) => {
+      const newValue = node.attrs[key];
+      newAttrs[key] = newValue && newValue.startsWith(`{`) ? JSON.parse(newValue.replace(/'/g, `"`)) : newValue;
+    });
+    const instance = new Clazz(newAttrs);
+    const res = instance.render();
+    node.children = parseHtml(res);
+  }
+  if (node.children) {
+    for (const child of node.children) {
+      hydrate(child);
+    }
+  }
+};
+const wrapAttribute = (attrName, suffix, text, v) => {
+  let buffer = text;
+  const hasQuote = suffix && suffix.includes(`="`);
+  if (attrName && !hasQuote) {
+    buffer += `"`;
+  }
+  buffer += v;
+  if (attrName && !hasQuote) {
+    buffer += `"`;
+  }
+  return buffer;
+};
+export const renderHtml = isBrowser
+  ? litRender
+  : (template) => {
+      let js = '';
+      template.strings.forEach((text, i) => {
+        const value = template.values[i];
+        const type = typeof value;
+        let attrName, suffix;
+        const matchName = lastAttributeNameRegex.exec(text);
+        if (matchName) {
+          attrName = matchName[2];
+          suffix = matchName[3];
+        }
+        if (value === null || !(type === 'object' || type === 'function' || type === 'undefined')) {
+          js += wrapAttribute(attrName, suffix, text, type !== 'string' ? String(value) : value);
+        } else if (Array.isArray(value) && value.find((item) => item && item.strings && item.type === 'html')) {
+          js += text;
+          value.forEach((v) => {
+            js += renderHtml(v);
+          });
+        } else if (type === 'object') {
+          // TemplateResult
+          if (value.strings && value.type === 'html') {
+            js += text;
+            js += renderHtml(value);
+          } else {
+            js += wrapAttribute(attrName, suffix, text, JSON.stringify(value).replace(/"/g, `'`));
+          }
+        } else if (type == 'function') {
+          if (attrName) {
+            js += text.replace(' ' + attrName + '=', '');
+          } else {
+            // js += text;
+            // js += value();
+          }
+        } else if (type !== 'undefined') {
+          js += text;
+          js += value.toString();
+        } else {
+          js += text;
+          // console.log('value', value);
+        }
+      });
+      const nodes = parseHtml(js);
+      for (const node of nodes) {
+        hydrate(node);
+      }
+      const html = nodes.reduce((acc, node) => {
+        return acc + stringifyHtml('', node);
+      }, '');
+      return html;
+    };
+const hyphenate = (s) => s.replace(/[A-Z]|^ms/g, '-$&').toLowerCase();
+const percent = (v) => (v * 100).toFixed(2) + '%';
+const createStyle = (...kvs) => {
+  const style = {};
+  for (let i = 0; i < kvs.length; i += 2) {
+    style[hyphenate(kvs[i])] = kvs[i + 1];
+  }
+  return style;
+};
+const mapApply = (obj) =>
+  Object.keys(obj.keys).reduce((acc, key) => {
+    Object.keys(obj.values).map((vkey) => {
+      const suffix = vkey ? '-' + vkey : '';
+      const className = `${key}${suffix}`;
+      if (Array.isArray(obj.keys[key])) {
+        const args = [];
+        obj.keys[key].forEach((kk) => {
+          args.push(kk, obj.values[vkey]);
+        });
+        acc[className] = createStyle(...args);
+      } else {
+        acc[className] = createStyle(obj.keys[key], obj.values[vkey]);
+      }
+    });
+    return acc;
+  }, {});
+export const css = (obj, isChild = false, indent = '') => {
+  const cssText = Object.keys(obj).reduce((acc, key) => {
+    const value = obj[key];
+    acc += !isChild ? `${key} {\n` : '';
+    if (typeof value === 'object') {
+      acc += '\n' + css(value, true, indent + '  ');
+    } else {
+      acc += '  ' + indent + hyphenate(key) + ': ' + value + ';\n';
+    }
+    acc += !isChild ? `\n}\n` : '';
+    return acc;
+  }, '');
+  return cssText;
+};
+const extractClasses = (html) => {
+  let str = '';
+  const matches = html.match(/class=(?:["']\W+\s*(?:\w+)\()?["']([^'"]+)['"]/gim);
+  if (matches) {
+    matches.forEach((matched, i) => {
+      str += matched.replace('class="', '').replace('"', '') + (i === matches.length - 1 ? '' : ' ');
+    });
+  }
+  return str;
+};
+const getClassList = (template) => {
+  // need to have this incase of shadowDom
+  // const classes = template.strings.reduce((acc, item) => acc + extractClasses(item), '').split(' ');
+  const classes = [];
+  template.values.forEach((item) => {
+    if (typeof item === 'string') {
+      const list = item.split(' ');
+      return classes.push(...list.filter((cls) => classLookup[cls]));
+    }
+    return false;
+  });
+  return classes;
+};
+export const compileTw = (classList) => {
+  let styleSheet = ``;
+  classList.forEach((cls) => {
+    const item = classLookup[cls];
+    if (item) {
+      const className = cls.replace(`/`, `\\/`);
+      styleSheet += `
+        .${className} {
+          ${Object.keys(item)
+            .map((key) => `${key}: ${item[key]};`)
+            .join('\n')}
+        }
+      `;
+    }
+  });
+  return styleSheet;
+};
+const colors = {
+  keys: {
+    bg: 'backgroundColor',
+    text: 'color',
+    divide: 'borderColor',
+    border: 'borderColor',
+    ring: '--tw-ring-color',
+    'border-l': 'borderLeftColor',
+    'border-r': 'borderRightColor',
+    'border-t': 'borderTopColor',
+    'border-b': 'borderBottomColor',
+  },
+  values: {
+    transparent: 'transparent',
+    current: 'currentColor',
+    black: 'rgba(0, 0, 0, 1)',
+    white: 'rgba(255, 255, 255, 1)',
+    'gray-50': 'rgba(249, 250, 251, 1)',
+    'gray-100': 'rgba(243, 244, 246, 1)',
+    'gray-200': 'rgba(229, 231, 235, 1)',
+    'gray-300': 'rgba(209, 213, 219, 1)',
+    'gray-400': 'rgba(156, 163, 175, 1)',
+    'gray-500': 'rgba(107, 114, 128, 1)',
+    'gray-600': 'rgba(75, 85, 99, 1)',
+    'gray-700': 'rgba(55, 65, 81, 1)',
+    'gray-800': 'rgba(31, 41, 55, 1)',
+    'gray-900': 'rgba(17, 24, 39, 1)',
+    'red-50': 'rgba(254, 242, 242, 1)',
+    'red-100': 'rgba(254, 226, 226, 1)',
+    'red-200': 'rgba(254, 202, 202, 1)',
+    'red-300': 'rgba(252, 165, 165, 1)',
+    'red-400': 'rgba(248, 113, 113, 1)',
+    'red-500': 'rgba(239, 68, 68, 1)',
+    'red-600': 'rgba(220, 38, 38, 1)',
+    'red-700': 'rgba(185, 28, 28, 1)',
+    'red-800': 'rgba(153, 27, 27, 1)',
+    'red-900': 'rgba(127, 29, 29, 1)',
+    'yellow-50': 'rgba(255, 251, 235, 1)',
+    'yellow-100': 'rgba(254, 243, 199, 1)',
+    'yellow-200': 'rgba(253, 230, 138, 1)',
+    'yellow-300': 'rgba(252, 211, 77, 1)',
+    'yellow-400': 'rgba(251, 191, 36, 1)',
+    'yellow-500': 'rgba(245, 158, 11, 1)',
+    'yellow-600': 'rgba(217, 119, 6, 1)',
+    'yellow-700': 'rgba(180, 83, 9, 1)',
+    'yellow-800': 'rgba(146, 64, 14, 1)',
+    'yellow-900': 'rgba(120, 53, 15, 1)',
+    'green-50': 'rgba(236, 253, 245, 1)',
+    'green-100': 'rgba(209, 250, 229, 1)',
+    'green-200': 'rgba(167, 243, 208, 1)',
+    'green-300': 'rgba(110, 231, 183, 1)',
+    'green-400': 'rgba(52, 211, 153, 1)',
+    'green-500': 'rgba(16, 185, 129, 1)',
+    'green-600': 'rgba(5, 150, 105, 1)',
+    'green-700': 'rgba(4, 120, 87, 1)',
+    'green-800': 'rgba(6, 95, 70, 1)',
+    'green-900': 'rgba(6, 78, 59, 1)',
+    'blue-50': 'rgba(239, 246, 255, 1)',
+    'blue-100': 'rgba(219, 234, 254, 1)',
+    'blue-200': 'rgba(191, 219, 254, 1)',
+    'blue-300': 'rgba(147, 197, 253, 1)',
+    'blue-400': 'rgba(96, 165, 250, 1)',
+    'blue-500': 'rgba(59, 130, 246, 1)',
+    'blue-600': 'rgba(37, 99, 235, 1)',
+    'blue-700': 'rgba(29, 78, 216, 1)',
+    'blue-800': 'rgba(30, 64, 175, 1)',
+    'blue-900': 'rgba(30, 58, 138, 1)',
+    'indigo-50': 'rgba(238, 242, 255, 1)',
+    'indigo-100': 'rgba(224, 231, 255, 1)',
+    'indigo-200': 'rgba(199, 210, 254, 1)',
+    'indigo-300': 'rgba(165, 180, 252, 1)',
+    'indigo-400': 'rgba(129, 140, 248, 1)',
+    'indigo-500': 'rgba(99, 102, 241, 1)',
+    'indigo-600': 'rgba(79, 70, 229, 1)',
+    'indigo-700': 'rgba(67, 56, 202, 1)',
+    'indigo-800': 'rgba(55, 48, 163, 1)',
+    'indigo-900': 'rgba(49, 46, 129, 1)',
+    'purple-50': 'rgba(245, 243, 255, 1)',
+    'purple-100': 'rgba(237, 233, 254, 1)',
+    'purple-200': 'rgba(221, 214, 254, 1)',
+    'purple-300': 'rgba(196, 181, 253, 1)',
+    'purple-400': 'rgba(167, 139, 250, 1)',
+    'purple-500': 'rgba(139, 92, 246, 1)',
+    'purple-600': 'rgba(124, 58, 237, 1)',
+    'purple-700': 'rgba(109, 40, 217, 1)',
+    'purple-800': 'rgba(91, 33, 182, 1)',
+    'purple-900': 'rgba(76, 29, 149, 1)',
+    'pink-50': 'rgba(253, 242, 248, 1)',
+    'pink-100': 'rgba(252, 231, 243, 1)',
+    'pink-200': 'rgba(251, 207, 232, 1)',
+    'pink-300': 'rgba(249, 168, 212, 1)',
+    'pink-400': 'rgba(244, 114, 182, 1)',
+    'pink-500': 'rgba(236, 72, 153, 1)',
+    'pink-600': 'rgba(219, 39, 119, 1)',
+    'pink-700': 'rgba(190, 24, 93, 1)',
+    'pink-800': 'rgba(157, 23, 77, 1)',
+    'pink-900': 'rgba(131, 24, 67, 1)',
+  },
+};
+const spacing = {
+  keys: {
+    mr: 'marginRight',
+    ml: 'marginLeft',
+    mt: 'marginTop',
+    mb: 'marginBottom',
+    mx: ['marginLeft', 'marginRight'],
+    my: ['marginTop', 'marginBottom'],
+    m: 'margin',
+    pr: 'paddingRight',
+    pl: 'paddingLeft',
+    pt: 'paddingTop',
+    pb: 'paddingBottom',
+    px: ['paddingLeft', 'paddingRight'],
+    py: ['paddingTop', 'paddingBottom'],
+    p: 'padding',
+  },
+  values: {
+    auto: 'auto',
+    0: '0px',
+    px: '1px',
+    0.5: '0.125rem',
+    1: '0.25rem',
+    1.5: '0.375rem',
+    2: '0.5rem',
+    2.5: '0.625rem',
+    3: '0.75rem',
+    3.5: '0.875rem',
+    4: '1rem',
+    5: '1.25rem',
+    6: '1.5rem',
+    7: '1.75rem',
+    8: '2rem',
+    9: '2.25rem',
+    10: '2.5rem',
+    11: '2.75rem',
+    12: '3rem',
+    14: '3.5rem',
+    16: '4rem',
+    20: '5rem',
+    24: '6rem',
+    28: '7rem',
+    32: '8rem',
+    36: '9rem',
+    40: '10rem',
+    44: '11rem',
+    48: '12rem',
+    52: '13rem',
+    56: '14rem',
+    60: '15rem',
+    64: '16rem',
+    72: '18rem',
+    80: '20rem',
+    96: '24rem',
+  },
+};
+const radius = {
+  keys: {
+    rounded: 'borderRadius',
+    'rounded-t': 'borderTopRadius',
+    'rounded-r': 'borderRightRadius',
+    'rounded-l': 'borderLeftRadius',
+    'rounded-b': 'borderBottomRadius',
+    'rounded-tl': ['borderTopRadius', 'borderLeftRadius'],
+    'rounded-tr': ['borderTopRadius', 'borderRightRadius'],
+    'rounded-bl': ['borderBottomRadius', 'borderLeftRadius'],
+    'rounded-br': ['borderBottomRadius', 'borderRightRadius'],
+  },
+  values: {
+    none: '0px',
+    sm: '0.125rem',
+    '': '0.25rem',
+    md: '0.375rem',
+    lg: '0.5rem',
+    xl: '0.75rem',
+    '2xl': '1rem',
+    '3xl': '1.5rem',
+    full: '9999px',
+  },
+};
+const borders = {
+  keys: {
+    border: 'borderWidth',
+    'border-l': 'borderLeftWidth',
+    'border-r': 'borderRightWidth',
+    'border-t': 'borderTopWidth',
+    'border-b': 'borderBottomWidth',
+  },
+  values: {
+    '': '1px',
+    0: '0px',
+    2: '2px',
+    4: '4px',
+    8: '8px',
+  },
+};
+const sizes = {
+  keys: {
+    h: 'height',
+    w: 'width',
+    top: 'top',
+    left: 'left',
+    bottom: 'bottom',
+    right: 'right',
+    minh: 'minHeight',
+    minw: 'minWidth',
+    maxh: 'maxHeight',
+    maxw: 'maxWidth',
+  },
+  values: {
+    0: '0px',
+    px: '1px',
+    0.5: '0.125rem',
+    1: '0.25rem',
+    1.5: '0.375rem',
+    2: '0.5rem',
+    2.5: '0.625rem',
+    3: '0.75rem',
+    3.5: '0.875rem',
+    4: '1rem',
+    5: '1.25rem',
+    6: '1.5rem',
+    7: '1.75rem',
+    8: '2rem',
+    9: '2.25rem',
+    10: '2.5rem',
+    11: '2.75rem',
+    12: '3rem',
+    14: '3.5rem',
+    16: '4rem',
+    20: '5rem',
+    24: '6rem',
+    28: '7rem',
+    32: '8rem',
+    36: '9rem',
+    40: '10rem',
+    44: '11rem',
+    48: '12rem',
+    52: '13rem',
+    56: '14rem',
+    60: '15rem',
+    64: '16rem',
+    72: '18rem',
+    80: '20rem',
+    96: '24rem',
+    auto: 'auto',
+    min: 'min-content',
+    max: 'max-content',
+    '1/2': percent(1 / 2),
+    '1/4': percent(1 / 4),
+    '2/4': percent(2 / 4),
+    '3/4': percent(3 / 4),
+    '1/5': percent(1 / 5),
+    '2/5': percent(2 / 5),
+    '3/5': percent(3 / 5),
+    '4/5': percent(4 / 5),
+    '1/6': percent(1 / 6),
+    '2/6': percent(2 / 6),
+    '3/6': percent(3 / 6),
+    '4/6': percent(4 / 6),
+    '5/6': percent(5 / 6),
+    '1/12': percent(1 / 12),
+    '2/12': percent(2 / 12),
+    '3/12': percent(3 / 12),
+    '4/12': percent(4 / 12),
+    '5/12': percent(5 / 12),
+    '6/12': percent(6 / 12),
+    '7/12': percent(7 / 12),
+    '8/12': percent(8 / 12),
+    '9/12': percent(9 / 12),
+    '10/12': percent(10 / 12),
+    '11/12': percent(11 / 12),
+    full: percent(1),
+  },
+};
+const classLookup = {
+  flex: createStyle('display', 'flex'),
+  'inline-flex': createStyle('display', 'inline-flex'),
+  block: createStyle('display', 'block'),
+  'inline-block': createStyle('display', 'inline-block'),
+  inline: createStyle('display', 'inline'),
+  table: createStyle('display', 'table'),
+  'inline-table': createStyle('display', 'inline-table'),
+  'inline-table': createStyle('display', 'inline-table'),
+  grid: createStyle('display', 'grid'),
+  'inline-grid': createStyle('display', 'inline-grid'),
+  contents: createStyle('display', 'contents'),
+  'list-item': createStyle('display', 'list-item'),
+  hidden: createStyle('display', 'none'),
+  'flex-1': createStyle('flex', '1'),
+  'flex-row': createStyle('flexDirection', 'row'),
+  'flex-col': createStyle('flexDirection', 'column'),
+  'flex-wrap': createStyle('flexWrap', 'wrap'),
+  'flex-nowrap': createStyle('flexWrap', 'nowrap'),
+  'flex-wrap-reverse': createStyle('flexWrap', 'wrap-reverse'),
+  'items-baseline': createStyle('alignItems', 'baseline'),
+  'items-start': createStyle('alignItems', 'flex-start'),
+  'items-center': createStyle('alignItems', 'center'),
+  'items-end': createStyle('alignItems', 'flex-end'),
+  'items-stretch': createStyle('alignItems', 'stretch'),
+  'justify-start': createStyle('justifyContent', 'flex-start'),
+  'justify-end': createStyle('justifyContent', 'flex-end'),
+  'justify-center': createStyle('justifyContent', 'center'),
+  'justify-between': createStyle('justifyContent', 'space-between'),
+  'justify-around': createStyle('justifyContent', 'space-around'),
+  'justify-evenly': createStyle('justifyContent', 'space-evenly'),
+  'text-left': createStyle('textAlign', 'left'),
+  'text-center': createStyle('textAlign', 'center'),
+  'text-right': createStyle('textAlign', 'right'),
+  'text-justify': createStyle('textAlign', 'justify'),
+  underline: createStyle('textDecoration', 'underline'),
+  'line-through': createStyle('textDecoration', 'line-through'),
+  'no-underline': createStyle('textDecoration', 'none'),
+  'whitespace-normal': createStyle('whiteSpace', 'normal'),
+  'whitespace-nowrap': createStyle('whiteSpace', 'nowrap'),
+  'whitespace-pre': createStyle('whiteSpace', 'pre'),
+  'whitespace-pre-line': createStyle('whiteSpace', 'pre-line'),
+  'whitespace-pre-wrap': createStyle('whiteSpace', 'pre-wrap'),
+  'break-normal': createStyle('wordBreak', 'normal', 'overflowWrap', 'normal'),
+  'break-words': createStyle('wordBreak', 'break-word'),
+  'break-all': createStyle('wordBreak', 'break-all'),
+  'font-sans': createStyle(
+    'fontFamily',
+    `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"`,
+  ),
+  'font-serif': createStyle('fontFamily', `ui-serif, Georgia, Cambria, "Times New Roman", Times, serif`),
+  'font-mono': createStyle('fontFamily', `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace`),
+  'font-thin': createStyle('fontWeight', '100'),
+  'font-extralight': createStyle('fontWeight', '200'),
+  'font-light': createStyle('fontWeight', '300'),
+  'font-normal': createStyle('fontWeight', '400'),
+  'font-medium': createStyle('fontWeight', '500'),
+  'font-semibold': createStyle('fontWeight', '600'),
+  'font-bold': createStyle('fontWeight', '700'),
+  'font-extrabold': createStyle('fontWeight', '800'),
+  'font-black': createStyle('fontWeight', '900'),
+  'text-xs': createStyle('fontSize', '0.75rem', 'lineHeight', '1rem'),
+  'text-sm': createStyle('fontSize', '0.875rem', 'lineHeight', '1.25rem'),
+  'text-base': createStyle('fontSize', '1rem', 'lineHeight', '1.5rem'),
+  'text-lg': createStyle('fontSize', '1.125rem', 'lineHeight', '1.75rem'),
+  'text-xl': createStyle('fontSize', '1.25rem', 'lineHeight', '1.75rem'),
+  'text-2xl': createStyle('fontSize', '1.5rem', 'lineHeight', '2rem'),
+  'text-3xl': createStyle('fontSize', '1.875rem', 'lineHeight', '2.25rem'),
+  'text-4xl': createStyle('fontSize', '2.25rem', 'lineHeight', '2.5rem'),
+  'text-5xl': createStyle('fontSize', '3rem', 'lineHeight', '1'),
+  'text-6xl': createStyle('fontSize', '3.75rem;', 'lineHeight', '1'),
+  'text-7xl': createStyle('fontSize', '4.5rem', 'lineHeight', '1'),
+  'text-8xl': createStyle('fontSize', '6rem', 'lineHeight', '1'),
+  'text-9xl': createStyle('fontSize', '8rem', 'lineHeight', '1'),
+  'cursor-auto': createStyle('cursor', 'auto'),
+  'cursor-default': createStyle('cursor', 'default'),
+  'cursor-pointer': createStyle('cursor', 'pointer'),
+  'cursor-wait': createStyle('cursor', 'wait'),
+  'cursor-text': createStyle('cursor', 'text'),
+  'cursor-move': createStyle('cursor', 'move'),
+  'cursor-help': createStyle('cursor', 'help'),
+  'cursor-not-allowed': createStyle('cursor', 'not-allowed'),
+  'pointer-events-none': createStyle('pointerEvents', 'none'),
+  'pointer-events-auto': createStyle('pointerEvents', 'auto'),
+  'select-none': createStyle('userSelect', 'none'),
+  'select-text': createStyle('userSelect', 'text'),
+  'select-all': createStyle('userSelect', 'all'),
+  'select-auto': createStyle('userSelect', 'auto'),
+  'w-screen': '100vw',
+  'h-screen': '100vh',
+  ...mapApply(sizes),
+  ...mapApply(spacing),
+  ...mapApply(colors),
+  ...mapApply(borders),
+  ...mapApply(radius),
+  static: createStyle('position', 'static'),
+  fixed: createStyle('position', 'fixed'),
+  absolute: createStyle('position', 'absolute'),
+  relative: createStyle('position', 'relative'),
+  sticky: createStyle('position', 'sticky'),
+  'overflow-auto': createStyle('overflow', 'auto'),
+  'overflow-hidden': createStyle('overflow', 'hidden'),
+  'overflow-visible': createStyle('overflow', 'visible'),
+  'overflow-scroll': createStyle('overflow', 'scroll'),
+  'overflow-x-auto': createStyle('overflowX', 'auto'),
+  'overflow-y-auto': createStyle('overflowY', 'auto'),
+  'overflow-x-hidden': createStyle('overflowX', 'hidden'),
+  'overflow-y-hidden': createStyle('overflowY', 'hidden'),
+  'overflow-x-visible': createStyle('overflowX', 'visible'),
+  'overflow-y-visible': createStyle('overflowY', 'visible'),
+  'overflow-x-scroll': createStyle('overflowX', 'scroll'),
+  'overflow-y-scroll': createStyle('overflowY', 'scroll'),
+  'origin-center': createStyle('transformOrigin', 'center'),
+  'origin-top': createStyle('transformOrigin', 'top'),
+  'origin-top-right': createStyle('transformOrigin', 'top right'),
+  'origin-right': createStyle('transformOrigin', 'right'),
+  'origin-bottom-right': createStyle('transformOrigin', 'bottom right'),
+  'origin-bottom': createStyle('transformOrigin', 'bottom'),
+  'origin-bottom-left': createStyle('transformOrigin', 'bottom left'),
+  'origin-left': createStyle('transformOrigin', 'left'),
+  'origin-top-left': createStyle('transformOrigin', 'top left'),
+  'shadow-sm': createStyle('box-shadow', '0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(0, 0, 0, 0.05)'),
+  shadow: createStyle('box-shadow', '0 0 #0000, 0 0 #0000, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)'),
+  'shadow-md': createStyle('box-shadow', '0 0 #0000, 0 0 #0000, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)'),
+  'shadow-lg': createStyle('box-shadow', '0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)'),
+  'shadow-xl': createStyle('box-shadow', '0 0 #0000, 0 0 #0000, 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)'),
+  'shadow-2xl': createStyle('box-shadow', '0 0 #0000, 0 0 #0000, 0 25px 50px -12px rgba(0, 0, 0, 0.25)'),
+  'shadow-inner': createStyle('box-shadow', '0 0 #0000, 0 0 #0000, inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)'),
+  'shadow-none': createStyle('box-shadow', '0 0 #0000, 0 0 #0000, 0 0 #0000'),
+  'ring-inset': createStyle('--tw-ring-inset', 'insest'),
+  'ring-0': createStyle('box-shadow', ' 0 0 0 calc(0px + 0px) rgba(59, 130, 246, 0.5)'),
+  'ring-1': createStyle('box-shadow', ' 0 0 0 calc(1px + 0px) rgba(59, 130, 246, 0.5)'),
+  'ring-2': createStyle('box-shadow', ' 0 0 0 calc(2px + 0px) rgba(59, 130, 246, 0.5)'),
+  'ring-4': createStyle('box-shadow', ' 0 0 0 calc(4px + 0px) rgba(59, 130, 246, 0.5)'),
+  'ring-8': createStyle('box-shadow', ' 0 0 0 calc(8px + 0px) rgba(59, 130, 246, 0.5)'),
+  ring: createStyle('box-shadow', ' 0 0 0 calc(3px + 0px) rgba(59, 130, 246, 0.5)'),
+};
+const pageStyles = {
+  '*, ::before, ::after': {
+    boxSizing: 'border-box',
+    borderWidth: '0',
+    borderStyle: 'solid',
+    borderColor: '#e5e7eb',
+  },
+  hr: { height: '0', color: 'inherit', borderTopWidth: '1px' },
+  'abbr[title]': {
+    WebkitTextDecoration: 'underline dotted',
+    textDecoration: 'underline dotted',
+  },
+  'b, strong': { fontWeight: 'bolder' },
+  'code, kbd, samp, pre': {
+    fontFamily: "ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace",
+    fontSize: '1em',
+  },
+  small: { fontSize: '80%' },
+  'sub, sup': {
+    fontSize: '75%',
+    lineHeight: 0,
+    position: 'relative',
+    verticalAlign: 'baseline',
+  },
+  sub: { bottom: '-0.25em' },
+  sup: { top: '-0.5em' },
+  table: {
+    textIndent: '0',
+    borderColor: 'inherit',
+    borderCollapse: 'collapse',
+  },
+  'button, input, optgroup, select, textarea': {
+    fontSize: '100%',
+    margin: '0',
+    padding: '0',
+    lineHeight: 'inherit',
+    color: 'inherit',
+  },
+  'button, select': {},
+  "button, [type='button'], [type='reset'], [type='submit']": {},
+  '::-moz-focus-inner': { borderStyle: 'none', padding: '0' },
+  ':-moz-focusring': { outline: '1px dotted ButtonText' },
+  ':-moz-ui-invalid': { boxShadow: 'none' },
+  legend: { padding: '0' },
+  progress: { verticalAlign: 'baseline' },
+  '::-webkit-inner-spin-button, ::-webkit-outer-spin-button': {
+    height: 'auto',
+  },
+  "[type='search']": { WebkitAppearance: 'textfield', outlineOffset: '-2px' },
+  '::-webkit-search-decoration': { WebkitAppearance: 'none' },
+  '::-webkit-file-upload-button': {
+    WebkitAppearance: 'button',
+    font: 'inherit',
+  },
+  summary: { display: 'list-item' },
+  'blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre': {
+    margin: '0',
+  },
+  button: {
+    backgroundImage: 'none',
+    ':focus': {
+      outline: '1px dotted, 5px auto -webkit-focus-ring-color',
+    },
+  },
+  fieldset: { margin: '0', padding: '0' },
+  'ol, ul': { listStyle: 'none', margin: '0', padding: '0' },
+  img: { borderStyle: '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': { fontSize: 'inherit', fontWeight: 'inherit' },
+  a: { color: 'inherit', textDecoration: 'inherit' },
+  'pre, code, kbd, samp': {
+    fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
+  },
+  'img, svg, video, canvas, audio, iframe, embed, object': {
+    display: 'block',
+    verticalAlign: 'middle',
+  },
+  'img, video': { maxWidth: '100%', height: 'auto' },
+  html: {
+    MozTabSize: '4',
+    OTabSize: '4',
+    tabSize: 4,
+    lineHeight: 1.5,
+    WebkitTextSizeAdjust: '100%',
+    fontFamily:
+      "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',
+    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
+    lineHeight: 1.4,
+    backgroundColor: 'white',
+    width: '100%',
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    flex: '1 1 0%',
+    minWidth: '320px',
+    minHeight: '100vh',
+    fontWeight: 400,
+    color: 'rgba(44, 62, 80, 1)',
+    direction: 'ltr',
+    fontSynthesis: 'none',
+    textRendering: 'optimizeLegibility',
+  },
+};
+// hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-indigo-500
+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) => value;
+const fifo = (q) => q.shift();
+const filo = (q) => q.pop();
+const microtask = (flush) => () => queueMicrotask(flush);
+const task = (flush) => {
+  if (isBrowser) {
+    const ch = new window.MessageChannel();
+    ch.port1.onmessage = flush;
+    return () => ch.port2.postMessage(null);
+  } else {
+    return () => setImmediate(flush);
+  }
+};
+const depsChanged = (prev, next) => prev == null || next.some((f, i) => !Object.is(f, prev[i]));
+export const createAttrs = (attrs) => attrs;
+export const createReducer = ({ initial, reducer, effects }) => {
+  let value = initial;
+  const subs = new Set();
+  const actions = Object.keys(reducer).reduce((acc, key) => {
+    const reduce = reducer[key];
+    acc[key] = (v) => {
+      value = reduce(value, v);
+      subs.forEach((sub) => {
+        sub(value);
+      });
+    };
+    return acc;
+  }, {});
+  const effectActions = Object.keys(effects || {}).reduce((acc, key) => {
+    const effect = effects[key];
+    acc[key] = (v) => effect(actions, v);
+    return acc;
+  }, {});
+  return {
+    getValue: () => value,
+    subscribe: (fn) => {
+      subs.add(fn);
+    },
+    unsubscribe: (fn) => {
+      subs.remove(fn);
+    },
+    actions,
+    effects: effectActions,
+  };
+};
+const currentComponent = {
+  current: undefined,
+  set(v) {
+    this.current = v;
+    this.current.hooks.index = 0;
+  },
+  get() {
+    return this.current;
+  },
+};
+export const useReducer = (reducer) => {
+  const comp = currentComponent.get();
+  const index = comp.hooks.index++;
+  if (!comp.hooks.data[index]) {
+    comp.hooks.data[index] = reducer.subscribe ? reducer : createReducer(reducer);
+    comp.hooks.data[index].subscribe(() => comp.update());
+  }
+  const state = comp.hooks.data[index].getValue();
+  return { ...state, actions: comp.hooks.data[index].actions, effects: comp.hooks.data[index].effects };
+};
+export const useEffect = (fn, deps) => {
+  const comp = currentComponent.get();
+  const index = comp.hooks.index++;
+  if (!deps || depsChanged(comp.hooks.deps[index], deps)) {
+    comp.hooks.deps[index] = deps || [];
+    comp.hooks.effects[index] = fn;
+  }
+};
+const registry = {};
+export const getElement = (name) => registry[name];
+const BaseElement = isBrowser ? window.HTMLElement : class {};
+export const createElement = (meta, renderFn) => {
+  const funcParams = parseFuncParams(renderFn);
+  const RenderElement = class extends BaseElement {
+    static get observedAttributes() {
+      return funcParams.map((k) => k.toLowerCase());
+    }
+    constructor(ssrAttrs) {
+      super();
+      this._dirty = false;
+      this._connected = false;
+      this.attrs = ssrAttrs || {};
+      this.state = {};
+      this.hooks = {
+        index: 0,
+        data: {},
+        deps: {},
+        effects: {},
+        cleanups: {},
+      };
+      this.renderFn = renderFn;
+      // this.prevClassList = [];
+      // this.shadow = this.attachShadow({ mode: 'open' });
+    }
+    connectedCallback() {
+      this._connected = true;
+      this.update();
+    }
+    disconnectedCallback() {
+      this._connected = false;
+    }
+    attributeChangedCallback(key, oldValue, newValue) {
+      this.attrs[key] = newValue && newValue.startsWith(`{`) ? JSON.parse(newValue.replace(/'/g, `"`)) : newValue;
+      if (this._connected) {
+        this.update();
+      }
+    }
+    update() {
+      if (this._dirty) {
+        return;
+      }
+      this._dirty = true;
+      this.enqueueUpdate();
+    }
+    _performUpdate() {
+      if (!this._connected) {
+        return;
+      }
+      this.render();
+      this.enqueueEffects();
+      this._dirty = false;
+    }
+    _flushEffects() {
+      const effects = this.hooks.effects;
+      const cleanups = this.hooks.cleanups;
+      const keys = Object.keys(effects);
+      for (const key of keys) {
+        if (effects[key]) {
+          cleanups[key] && cleanups[key]();
+          const cleanup = effects[key]();
+          if (cleanup) {
+            cleanups[key] = cleanup;
+          }
+          delete effects[key];
+        }
+      }
+    }
+    batch(runner, pick, callback) {
+      const q = [];
+      const flush = () => {
+        let p;
+        while ((p = pick(q))) callback(p);
+      };
+      const run = runner(flush);
+      q.push(this) === 1 && run();
+    }
+    enqueueUpdate() {
+      this.batch(microtask, fifo, () => this._performUpdate());
+    }
+    enqueueEffects() {
+      this.batch(task, filo, () => this._flushEffects());
+    }
+    render() {
+      currentComponent.set(this);
+      const template = this.renderFn({
+        ...this.attrs,
+        config: isBrowser ? window.props.config : global?.props?.config,
+        location: isBrowser ? window.location : global?.location,
+      });
+      if (isBrowser) {
+        // TODO: this can be optimized when we know whether the value belongs in a class (AttributePart)
+        // maybe do this in lit-html itselfs
+        const newClassList = getClassList(template).filter((cls) => {
+          const globalStyles = document.getElementById('global').textContent;
+          return !globalStyles.includes('.' + cls);
+        });
+        if (newClassList.length > 0) {
+          document.getElementById('global').textContent += compileTw(newClassList);
+        }
+        renderHtml(template, this);
+        // For shadows only
+        // if (!this.styleElement) {
+        //   render(template, this.shadow);
+        //   const styleSheet = compileTw(classList);
+        //   this.prevClassList = classList;
+        //   this.styleElement = document.createElement('style');
+        //   this.shadow.appendChild(this.styleElement).textContent = css(pageStyles) + styleSheet;
+        // } else {
+        //   const missingClassList = classList.filter((cls) => !this.prevClassList.includes(cls));
+        //   if (missingClassList.length > 0) {
+        //     const styleSheet = compileTw(missingClassList);
+        //     this.styleElement.textContent += '\n' + styleSheet;
+        //     this.prevClassList.push(...missingClassList);
+        //   }
+        //   render(template, this.shadow);
+        // }
+      } else {
+        return renderHtml(template);
+      }
+    }
+  };
+  const parts = meta.url.split('/');
+  const name = parts[parts.length - 1].split('?')[0].replace('.js', '');
+  registry[name] = RenderElement;
+  if (isBrowser && !window.customElements.get(name)) {
+    window.customElements.define(name, registry[name]);
+  }
+  return renderFn;
+};
+export const createPage = ({ head, body }) => {
+  return ({ headScript, bodyScript, lang, props }) => {
+    const headHtml = renderHtml(head(props));
+    const bodyHtml = renderHtml(body(props));
+    const classes = extractClasses(bodyHtml);
+    return `
+      <!DOCTYPE html>
+      <html lang="${lang}">
+        <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" />
+          ${headHtml}
+          <style id="global">
+            ${css(pageStyles)}
+            ${compileTw(new Set(classes.split(' ')))}
+          </style>
+          ${headScript}
+        </head>
+        <body>
+          ${bodyHtml}
+          <script>
+            window.props = ${JSON.stringify(props)};
+          </script>
+          ${bodyScript}
+        </body>
+      </html>
+  `;
+  };
+};

index.test.js ADDED Viewed

@@ -0,0 +1,196 @@
+import { expect, test, jest } from '@jest/globals';
+import { getElement, createElement, createPage, createReducer, html, renderHtml, unsafeHTML, css, compileTw, useReducer } from './index.js';
+global.__DEV = true;
+test('css', () => {
+  const styles = css({
+    button: {
+      color: 'magenta',
+      fontSize: '10px',
+      '@media screen and (min-width:40em)': {
+        fontSize: '64px',
+      },
+      ':hover': {
+        color: 'black',
+      },
+      '@media screen and (min-width:56em)': {
+        ':hover': {
+          color: 'navy',
+        },
+      },
+    },
+    container: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+  });
+  expect(styles).toMatchSnapshot();
+});
+test('compileTw', () => {
+  expect(compileTw('text-white font-bold border border-black p-4 m-4 w-20 h-20'.split(' '))).toMatchSnapshot();
+});
+test('renderHtml', () => {
+  const age = 1;
+  const data = { name: '123', address: { street: '1' } };
+  const items = [1, 2, 3];
+  const highlight = 'high';
+  const template = html`
+    <div>
+      <app-counter name="123" class="abc ${highlight}" age=${age} details1=${data} items=${items}></app-counter>
+    </div>
+  `;
+  const res = renderHtml(template);
+  expect(res).toMatchSnapshot();
+});
+test('render attribute keys', () => {
+  const template = html`
+    <div>
+      <app-counter name="123" perPage="1"></app-counter>
+    </div>
+  `;
+  const res = renderHtml(template);
+  expect(res).toMatchSnapshot();
+});
+test('render attributes within quotes', () => {
+  const age = 1;
+  const data = { name: '123', address: { street: '1' } };
+  const items = [1, 2, 3];
+  const classes = 'high';
+  const template = html`
+    <div>
+      <app-counter name="123" class=${classes} age="${age}" details1="${data}" items="${items}"></app-counter>
+    </div>
+  `;
+  const res = renderHtml(template);
+  expect(res).toMatchSnapshot();
+});
+test('render unsafeHTML', () => {
+  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();
+});
+test('render single template', () => {
+  const template = html` <div>${html`NoCountry ${false}`}</div> `;
+  const res = renderHtml(template);
+  expect(res).toMatchSnapshot();
+});
+test('render multi template', () => {
+  const template = html`
+    <div>
+      ${[1, 2].map(
+        (v) => html`
+          <app-item meta="${{ index: v }}" @click=${() => {}} .handleClick=${() => {}}>
+            <button @click=${() => {}}>+</button>
+          </app-item>
+        `,
+      )}
+    </div>
+  `;
+  const res = renderHtml(template);
+  expect(res).toMatchSnapshot();
+});
+test('createReducer', () => {
+  const countReducer = createReducer({
+    initial: {
+      count: 0,
+    },
+    reducer: {
+      increment: (state, a) => ({ ...state, count: state.count + a }),
+      decrement: (state, a) => ({ ...state, count: state.count - a }),
+    },
+  });
+  const mock = jest.fn();
+  countReducer.subscribe(mock);
+  countReducer.actions.increment(4);
+  expect(countReducer.getValue().count).toEqual(4);
+  expect(mock).toBeCalledWith({ count: 4 });
+  countReducer.actions.decrement(1);
+  expect(countReducer.getValue().count).toEqual(3);
+  expect(mock).toBeCalledWith({ count: 3 });
+  countReducer.actions.decrement(2);
+  expect(countReducer.getValue().count).toEqual(1);
+  expect(mock).toBeCalledWith({ count: 1 });
+});
+test('createElement without attrs', () => {
+  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();
+});
+test('createElement with attrs and hooks', () => {
+  createElement({ url: '/base-element.js' }, ({ perPage }) => {
+    const { count, actions } = useReducer({
+      initial: {
+        count: 3,
+      },
+      reducer: {
+        setValue: (state, v) => ({ ...state, count: v }),
+      },
+    });
+    return html`
+      <div>
+        <div>
+          <span>perPage: ${perPage}</span>
+        </div>
+        </div>
+            <span>Count: ${count}</span>
+        </div>
+        <button @click=${actions.setValue}>Set</button>
+      </div>
+    `;
+  });
+  const Clazz = getElement('base-element');
+  const instance = new Clazz({ perPage: 5 });
+  const res = instance.render();
+  expect(Clazz.observedAttributes).toEqual(['perpage']);
+  expect(res).toMatchSnapshot();
+});
+test('createPage', () => {
+  const route = () => {
+    const langPart = this.config.lang === 'en' ? '' : `/${this.config.lang}`;
+    return `${langPart}`;
+  };
+  const head = ({ config }) => {
+    return html`
+      <title>${config.title}</title>
+      <meta name="title" content=${config.title} />
+      <meta name="description" content=${config.title} />
+    `;
+  };
+  const body = ({ config }) => {
+    return html`
+      <div>
+        <app-header></app-header>
+        <main class="flex flex-1 flex-col mt-20 items-center">
+          <h1 class="text-5xl">${config.title}</h1>
+        </main>
+      </div>
+    `;
+  };
+  const renderPage = createPage({
+    route,
+    head,
+    body,
+  });
+  const scripts = '<script type="module"><script>';
+  const res = renderPage({ lang: 'en', props: { config: { title: '123' } }, headScript: scripts, bodyScript: scripts });
+  expect(res).toMatchSnapshot();
+});

src/lit-html.js → lit-html.js RENAMED Viewed

@@ -52,11 +52,13 @@ const directives = new WeakMap();
  *   }
  * });
  */
-const directive = (f) => ((...args) => {
+const directive =
+  (f) =>
+  (...args) => {
-  const d = f(...args);
+    const d = f(...args);
-  directives.set(d, true);
+    directives.set(d, true);
-  return d;
+    return d;
-});
+  };
 const isDirective = (o) => {
   return typeof o === 'function' && directives.has(o);
 };
@@ -77,10 +79,7 @@ const isDirective = (o) => {
 /**
  * True if the custom elements polyfill is in use.
  */
-const isCEPolyfill = typeof window !== 'undefined' &&
+const isCEPolyfill = typeof window !== 'undefined' && window.customElements != null && window.customElements.polyfillWrapFlushCallback !== 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
@@ -173,7 +172,10 @@ class Template {
     let lastPartIndex = 0;
     let index = -1;
     let partIndex = 0;
+    const {
+      strings,
-    const { strings, values: { length } } = result;
+      values: { length },
+    } = result;
     while (partIndex < length) {
       const node = walker.nextNode();
       if (node === null) {
@@ -223,8 +225,7 @@ class Template {
           stack.push(node);
           walker.currentNode = node.content;
         }
-      }
-      else if (node.nodeType === 3 /* Node.TEXT_NODE */) {
+      } else if (node.nodeType === 3 /* Node.TEXT_NODE */) {
         const data = node.data;
         if (data.indexOf(marker) >= 0) {
           const parent = node.parentNode;
@@ -237,12 +238,10 @@ class Template {
             let s = strings[i];
             if (s === '') {
               insert = createMarker();
-            }
-            else {
+            } 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];
+                s = s.slice(0, match.index) + match[1] + match[2].slice(0, -boundAttributeSuffix.length) + match[3];
               }
               insert = document.createTextNode(s);
             }
@@ -254,15 +253,13 @@ class Template {
           if (strings[lastIndex] === '') {
             parent.insertBefore(createMarker(), node);
             nodesToRemove.push(node);
-          }
-          else {
+          } else {
             node.data = strings[lastIndex];
           }
           // We have a part for each match found
           partIndex += lastIndex;
         }
-      }
-      else if (node.nodeType === 8 /* Node.COMMENT_NODE */) {
+      } 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
@@ -279,14 +276,12 @@ class Template {
           // Else, we can remove it to save future costs.
           if (node.nextSibling === null) {
             node.data = '';
-          }
-          else {
+          } else {
             nodesToRemove.push(node);
             index--;
           }
           partIndex++;
-        }
-        else {
+        } else {
           let i = -1;
           while ((i = node.data.indexOf(marker, i + 1)) !== -1) {
             // Comment node has a binding marker inside, make an inactive part
@@ -419,9 +414,7 @@ class TemplateInstance {
     // 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 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
@@ -461,8 +454,7 @@ class TemplateInstance {
         const part = this.processor.handleTextExpression(this.options);
         part.insertAfterNode(node.previousSibling);
         this.__parts.push(part);
-      }
-      else {
+      } else {
         this.__parts.push(...this.processor.handleAttributeExpressions(node, part.name, part.strings, this.options));
       }
       partIndex++;
@@ -496,8 +488,7 @@ class TemplateInstance {
  * 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 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
@@ -540,8 +531,7 @@ class TemplateResult {
       // 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) &&
+      isCommentBinding = (commentOpen > -1 || isCommentBinding) && s.indexOf('-->', commentOpen + 1) === -1;
-        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.
@@ -553,14 +543,11 @@ class TemplateResult {
         // <!-- foo=${'bar'}--> are handled correctly in the attribute branch
         // below.
         html += s + (isCommentBinding ? commentMarker : nodeMarker);
-      }
-      else {
+      } 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] +
+        html += s.substr(0, attributeMatch.index) + attributeMatch[1] + attributeMatch[2] + boundAttributeSuffix + attributeMatch[3] + marker;
-          attributeMatch[2] + boundAttributeSuffix + attributeMatch[3] +
-          marker;
       }
     }
     html += this.strings[l];
@@ -615,13 +602,14 @@ class SVGTemplateResult extends TemplateResult {
  * http://polymer.github.io/PATENTS.txt
  */
 const isPrimitive = (value) => {
-  return (value === null ||
-    !(typeof value === 'object' || typeof value === 'function'));
+  return value === null || !(typeof value === 'object' || typeof value === 'function');
 };
 const isIterable = (value) => {
+  return (
-  return Array.isArray(value) ||
+    Array.isArray(value) ||
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    !!(value && value[Symbol.iterator]);
+    !!(value && value[Symbol.iterator])
+  );
 };
 /**
  * Writes attribute values to the DOM for a group of AttributeParts bound to a
@@ -679,8 +667,7 @@ class AttributeCommitter {
         const v = part.value;
         if (isPrimitive(v) || !isIterable(v)) {
           text += typeof v === 'string' ? v : String(v);
-        }
-        else {
+        } else {
           for (const t of v) {
             text += typeof t === 'string' ? t : String(t);
           }
@@ -772,8 +759,8 @@ class NodePart {
    * This part must be empty, as its contents are not automatically moved.
    */
   appendIntoPart(part) {
-    part.__insert(this.startNode = createMarker());
+    part.__insert((this.startNode = createMarker()));
-    part.__insert(this.endNode = createMarker());
+    part.__insert((this.endNode = createMarker()));
   }
   /**
    * Inserts this part after the `ref` part.
@@ -781,7 +768,7 @@ class NodePart {
    * This part must be empty, as its contents are not automatically moved.
    */
   insertAfterPart(ref) {
-    ref.__insert(this.startNode = createMarker());
+    ref.__insert((this.startNode = createMarker()));
     this.endNode = ref.endNode;
     ref.endNode = this.startNode;
   }
@@ -805,21 +792,16 @@ class NodePart {
       if (value !== this.value) {
         this.__commitText(value);
       }
-    }
-    else if (value instanceof TemplateResult) {
+    } else if (value instanceof TemplateResult) {
       this.__commitTemplateResult(value);
-    }
-    else if (value instanceof Node) {
+    } else if (value instanceof Node) {
       this.__commitNode(value);
-    }
-    else if (isIterable(value)) {
+    } else if (isIterable(value)) {
       this.__commitIterable(value);
-    }
-    else if (value === nothing) {
+    } else if (value === nothing) {
       this.value = nothing;
       this.clear();
-    }
-    else {
+    } else {
       // Fallback, will render the string representation
       this.__commitText(value);
     }
@@ -841,25 +823,21 @@ class NodePart {
     // 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 (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 {
+    } else {
       this.__commitNode(document.createTextNode(valueAsString));
     }
     this.value = value;
   }
   __commitTemplateResult(value) {
     const template = this.options.templateFactory(value);
-    if (this.value instanceof TemplateInstance &&
+    if (this.value instanceof TemplateInstance && this.value.template === template) {
-      this.value.template === template) {
       this.value.update(value.values);
-    }
-    else {
+    } 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
@@ -899,8 +877,7 @@ class NodePart {
         itemParts.push(itemPart);
         if (partIndex === 0) {
           itemPart.appendIntoPart(this);
-        }
-        else {
+        } else {
           itemPart.insertAfterPart(itemParts[partIndex - 1]);
         }
       }
@@ -952,8 +929,7 @@ class BooleanAttributePart {
     if (this.value !== value) {
       if (value) {
         this.element.setAttribute(this.name, '');
-      }
-      else {
+      } else {
         this.element.removeAttribute(this.name);
       }
       this.value = value;
@@ -973,8 +949,7 @@ class BooleanAttributePart {
 class PropertyCommitter extends AttributeCommitter {
   constructor(element, name, strings) {
     super(element, name, strings);
-    this.single =
-      (strings.length === 2 && strings[0] === '' && strings[1] === '');
+    this.single = strings.length === 2 && strings[0] === '' && strings[1] === '';
   }
   _createPart() {
     return new PropertyPart(this);
@@ -993,8 +968,7 @@ class PropertyCommitter extends AttributeCommitter {
     }
   }
 }
-class PropertyPart extends AttributePart {
+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
@@ -1008,14 +982,13 @@ let eventOptionsSupported = false;
       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) {
+  } catch (_e) {
     // event options not supported
   }
 })();
@@ -1042,11 +1015,10 @@ class EventPart {
     }
     const newListener = this.__pendingValue;
     const oldListener = this.value;
-    const shouldRemoveListener = newListener == null ||
+    const shouldRemoveListener =
+      newListener == null ||
-      oldListener != null &&
+      (oldListener != null &&
-      (newListener.capture !== oldListener.capture ||
+        (newListener.capture !== oldListener.capture || newListener.once !== oldListener.once || newListener.passive !== oldListener.passive));
-        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);
@@ -1061,8 +1033,7 @@ class EventPart {
   handleEvent(event) {
     if (typeof this.value === 'function') {
       this.value.call(this.eventContext || this.element, event);
-    }
-    else {
+    } else {
       this.value.handleEvent(event);
     }
   }
@@ -1070,10 +1041,7 @@ class EventPart {
 // 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 } :
+const getOptions = (o) => o && (eventOptionsSupported ? { capture: o.capture, passive: o.passive, once: o.once } : o.capture);
-    o.capture);
 /**
  * @license
@@ -1148,7 +1116,7 @@ function templateFactory(result) {
   if (templateCache === undefined) {
     templateCache = {
       stringsArray: new WeakMap(),
-      keyString: new Map()
+      keyString: new Map(),
     };
     templateCaches.set(result.type, templateCache);
   }
@@ -1206,7 +1174,7 @@ 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)));
+    parts.set(container, (part = new NodePart(Object.assign({ templateFactory }, options))));
     part.appendInto(container);
   }
   part.setValue(result);
@@ -1243,4 +1211,34 @@ const html = (strings, ...values) => new TemplateResult(strings, values, 'html',
  */
 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 };
+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-lock.json CHANGED Viewed

@@ -1,11 +1,12 @@
 {
   "name": "atoms-element",
-  "version": "1.0.0",
+  "version": "3.0.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
+      "name": "atoms-element",
-      "version": "1.0.0",
+      "version": "3.0.1",
       "license": "MIT",
       "devDependencies": {
         "jest": "^27.0.5"
@@ -1629,8 +1630,7 @@
         "esprima": "^4.0.1",
         "estraverse": "^5.2.0",
         "esutils": "^2.0.2",
-        "optionator": "^0.8.1",
+        "optionator": "^0.8.1"
-        "source-map": "~0.6.1"
       },
       "bin": {
         "escodegen": "bin/escodegen.js",
@@ -2407,7 +2407,6 @@
         "@types/node": "*",
         "anymatch": "^3.0.3",
         "fb-watchman": "^2.0.0",
-        "fsevents": "^2.3.2",
         "graceful-fs": "^4.2.4",
         "jest-regex-util": "^27.0.1",
         "jest-serializer": "^27.0.1",

package.json CHANGED Viewed

@@ -1,34 +1,43 @@
 {
   "name": "atoms-element",
-  "version": "1.0.0",
+  "version": "3.0.1",
   "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": [
+    "pyrossh",
     "atoms-element",
-    "pyros.sh",
+    "web",
-    "web component",
+    "component",
-    "custom element",
-    "hooks",
+    "ssr",
+    "client",
+    "server",
     "react",
-    "lit-html",
+    "lit-html"
+  ],
+  "files": [
-    "lit-html-server",
+    "lit-html.js",
-    "fuco"
+    "index.js",
+    "index.d.ts"
   ],
   "license": "MIT",
-  "main": "src/index.js",
-  "author": "pyros.sh",
+  "author": "pyrossh",
   "type": "module",
   "engines": {
     "node": ">=14.0.0"
   },
   "scripts": {
+    "example": "node example/server.js",
     "test": "NODE_OPTIONS=--experimental-vm-modules jest"
   },
   "devDependencies": {
     "jest": "^27.0.5"
   },
   "jest": {
+    "transform": {}
+  },
-    "setupFilesAfterEnv": [
+  "prettier": {
+    "printWidth": 160,
+    "singleQuote": true,
-      "./test/setup.js"
+    "arrowParens": "always",
-    ]
+    "trailingComma": "all"
   }
-}
+}

readme.md CHANGED Viewed

@@ -1,49 +1,61 @@
 # 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.
-[![Version](https://img.shields.io/npm/v/atoms-element?style=flat-square&color=blue)](https://www.npmjs.com/package/atoms-element)
+Data props are attributes on the custom element by default so its easier to debug and functions/handlers are attached to the 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
+I initially started researching if it was possible to server render web components but found out not one framework supported it. I liked using
+[haunted](https://github.com/matthewp/haunted) as it was react-like with hooks but was lost on how to implement server rendering. Libraries like
-principles of react. Props are attributes on the custom element by default so its easier to debug.
+JSDOM couldn't be of use since it didn't support web components and I didn't want to use puppeteer for something like this.
+After a year of thinking about it and researching it I found out this awesome framework [Tonic](https://github.com/optoolco/tonic).
-It uses slightly modified versions of these libraries,
+That was the turning point I figured out how they implemented it using a simple html parser.
-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)
+After going through all these libraries,
-## Installation
+1. [lit-html](https://github.com/lit/lit)
+2. [lit-html-server](https://github.com/popeindustries/lit-html-server)
+3. [haunted](https://github.com/matthewp/haunted)
+4. [Tonic](https://github.com/optoolco/tonic)
+5. [Atomico](https://github.com/atomicojs/atomico)
+6. [fuco](https://github.com/wtnbass/fuco)
-```sh
-npm i atoms-element
-```
+And figuring out how each one implemented their on custom elements I came up with atoms-element. It still doesn't have proper rehydration lit-html just replaces the DOM under the server rendered web component for now. Atomico has implemented proper SSR with hydration so I might need to look into that in the future or
+use it instead of lit-html. Since I made a few modifications like json attributes and attrTypes I don't know if it will easy.
-## Usage
+## Example
 ```js
-import { defineElement, html, render, number } from 'atoms-element.js';
+import { createElement, useReducer, html, renderHtml } from 'atoms-element/index.js';
-const propTypes = {
-  name: string.isRequired,
-};
-const Counter = ({ name }) => {
+const Counter = ({ name, meta }) => {
-  const [count, setCount] = useState(0);
+  const { count, actions } = useReducer({
+    initial: {
+      count: 0,
+    },
+    reducer: {
+      increment: (state) => ({ ...state, count: state.count + 1 }),
+      decrement: (state) => ({ ...state, count: state.count - 1 }),
+    },
+  });
+  const warningClass = count > 10 ? 'text-red-500' : '';
   return html`
+    <div class="mt-10">
+      <div class="mb-2">
+        Counter: ${name}
+        <span>starts at ${meta?.start}</span>
-    <div>
+      </div>
-      <div class="font-bold mb-2">Counter: ${name}</div>
-      <div class="flex flex-1 flex-row text-3xl text-gray-700">
+      <div class="flex flex-1 flex-row items-center text-gray-700">
-        <button @click=${() => setCount((v) => v - 1)}>-</button>
+        <button class="bg-gray-300 text-gray-700 rounded hover:bg-gray-200 px-4 py-2 text-3xl focus:outline-none" @click=${actions.decrement}>-</button>
         <div class="mx-20">
-          <h1 class="text-1xl">${count}</h1>
+          <h1 class="text-3xl font-mono ${warningClass}">${count}</h1>
         </div>
-        <button @click=${() => setCount((v) => v + 1)}>+</button>
+        <button class="bg-gray-300 text-gray-700 rounded hover:bg-gray-200 px-4 py-2 text-3xl focus:outline-none" @click=${actions.increment}>+</button>
       </div>
     </div>
   `;
 };
-defineElement('app-counter', Counter, propTypes);
+createElement({ url: 'app-counter.js' }, Counter);
-render(html`<app-counter name="1"></app-counter>`, document.body);
+console.log(renderHtml(html`<app-counter name="1"></app-counter>`));
 ```

src/index.js DELETED Viewed

@@ -1,401 +0,0 @@
-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 DELETED Viewed

@@ -1,1679 +0,0 @@
-/* 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 };

test/index.test.js DELETED Viewed

@@ -1,123 +0,0 @@
-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 DELETED Viewed

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

~repos /atoms-element

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

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