25308a9 | atoms-element

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

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

25308a9 — Peter John 2026-08-07T14:14:05+05:30

use lit

Generated files not shown: package-lock.json

Files changed (8) hide show

examples/e2e.spec.js +14 -7
examples/pages/index.js +13 -14
examples/server.js +11 -4
index.d.ts +9 -0
index.js +61 -283
index.test.js +6 -6
index.test.js.snapshot +10 -10
package.json +2 -0

examples/e2e.spec.js CHANGED Viewed

@@ -5,6 +5,7 @@ import { test, before, after } from 'node:test';
 import assert from 'node:assert/strict';
 import { spawn } from 'node:child_process';
 import { chromium } from 'playwright';
+import { createElement, getElement, html } from '../index.js';
 const PORT = 3987;
 const BASE_URL = `http://localhost:${PORT}/`;
@@ -67,15 +68,21 @@ test('no console/page errors were thrown', () => {
   assert.deepStrictEqual(pageErrors, []);
 });
-test('preserves focus across the first hydration render, without reusing the old DOM node', async () => {
+test('hydration reuses the exact SSR DOM node, so focus survives it naturally', async () => {
+  // Server-render the fixture the same way examples/server.js does, so the
+  // markup handed to the browser has real lit hydration markers rather than
+  // hand-typed HTML — hydrate() only works against genuine SSR structure.
+  const Comp = () => html`<div class="wrap"><button>-</button><button>+</button></div>`;
+  createElement({ url: '/focus-test-element.js' }, Comp);
+  const ssrMarkup = new (getElement('focus-test-element'))().render();
-  const result = await page.evaluate(async () => {
+  const result = await page.evaluate(async (markup) => {
     const { createElement, html } = await import('/index.js');
     const Comp = () => html`<div class="wrap"><button>-</button><button>+</button></div>`;
     createElement({ url: '/focus-test-element.js' }, Comp);
     const el = document.createElement('focus-test-element');
-    // fake SSR markup with the same shape the render function above produces
+    el.innerHTML = markup;
-    el.innerHTML = '<div class="wrap"><button>-</button><button>+</button></div>';
     document.body.appendChild(el);
     const originalPlus = el.querySelectorAll('button')[1];
@@ -90,9 +97,9 @@ test('preserves focus across the first hydration render, without reusing the old
     const sameNode = originalPlus === newPlus;
     el.remove();
     return { focusedBefore, focusedAfter, sameNode };
-  });
+  }, ssrMarkup);
   assert.strictEqual(result.focusedBefore, true, 'button should be focused before the hydration render runs');
-  assert.strictEqual(result.sameNode, false, 'the DOM node should have been discarded and recreated, not reused');
+  assert.strictEqual(result.sameNode, true, 'hydration should attach to the existing SSR node, not recreate it');
-  assert.strictEqual(result.focusedAfter, true, 'focus should be restored onto the equivalent new button');
+  assert.strictEqual(result.focusedAfter, true, 'focus should remain on the same node through hydration');
 });

examples/pages/index.js CHANGED Viewed

@@ -1,26 +1,25 @@
-import { createPage, css, html } from '../../index.js';
+import { createPage, css, staticHtml, unsafeHTML } from '../../index.js';
 import '../elements/app-counter.js';
 import '../elements/app-total.js';
 const head = ({ config }) => {
+  const styleTag = `<style>${css`
+    .page {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+    }
+  `}</style>`;
-  return html`
+  return staticHtml`
     <title>${config.title}</title>
-    <style>
-      ${css`
-        .page {
-          display: flex;
-          flex: 1;
-          flex-direction: column;
-          align-items: center;
-          justify-content: center;
-        }
-      `}
-    </style>
+    ${unsafeHTML(styleTag)}
   `;
 };
 const body = () => {
-  return html`
+  return staticHtml`
     <div class="page">
       <app-counter name="1" meta="{'start': 5}"></app-counter>
       <app-counter name="2" meta="{'start': 7}"></app-counter>

examples/server.js CHANGED Viewed

@@ -18,15 +18,22 @@ elements.forEach((el) => {
   srcMap['/elements/' + el] = `${__dirname}/elements/${el}`;
 });
-// lit-html and mutative are real npm dependencies (not vendored), so the
+// lit-html, @lit-labs/ssr-client and mutative are real npm dependencies (not
-// browser needs an import map for the bare specifiers index.js uses, plus
+// vendored), so the browser needs an import map for every bare specifier
-// the packages' files served as-is — their internal imports are all
+// reachable from index.js — including ones used by their own internal files,
+// since the import map is global to the page, not scoped per-package the way
+// Node's node_modules resolution is. The packages' files are served as-is;
-// relative, so no other wiring is needed.
+// their own internal imports are all relative, so no other wiring is needed.
 const importMap = {
   imports: {
     'lit-html': '/node_modules/lit-html/lit-html.js',
+    'lit-html/is-server.js': '/node_modules/lit-html/is-server.js',
+    'lit-html/directive.js': '/node_modules/lit-html/directive.js',
     'lit-html/directive-helpers.js': '/node_modules/lit-html/directive-helpers.js',
+    'lit-html/private-ssr-support.js': '/node_modules/lit-html/private-ssr-support.js',
     'lit-html/directives/unsafe-html.js': '/node_modules/lit-html/directives/unsafe-html.js',
+    '@lit-labs/ssr-client': '/node_modules/@lit-labs/ssr-client/index.js',
+    '@lit-labs/ssr/lib/server-template.js': '/node_modules/@lit-labs/ssr/lib/server-template.js',
     mutative: '/node_modules/mutative/dist/mutative.esm.mjs',
   },
 };

index.d.ts CHANGED Viewed

@@ -60,3 +60,12 @@ export function createElement(meta: any, renderFn: any): any
 export function css(strings: TemplateStringsArray, ...values: any[]): string;
 export type Handler = (props: any) => string;
 export function createPage(props: { head: Handler, body: Handler}): (props: { props: any, headScript: string, bodyScript: string }) => string;
+// staticHtml is for createPage's head/body only: unlike html, its output is never
+// hydrated, so it can bind values inside <title>/<textarea>/<script>/<style>,
+// where lit's hydration marker comments can't be inserted. Don't use it for a
+// component's own render function.
+export function staticHtml(strings: TemplateStringsArray, ...values: any[]): any;
+// Wraps an object/array value passed as a dynamic attribute binding
+// (e.g. meta=${jsonAttr(data)}) so it round-trips through this library's
+// attribute-parsing convention instead of being stringified as [object Object].
+export function jsonAttr(value: any): unknown;

index.js CHANGED Viewed

@@ -1,15 +1,24 @@
 import { html, render as litRender } from 'lit-html';
-import { isTemplateResult } from 'lit-html/directive-helpers.js';
-import { unsafeHTML as litUnsafeHTML } from 'lit-html/directives/unsafe-html.js';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
+import { directive, Directive } from 'lit-html/directive.js';
+import { hydrate as litHydrate } from '@lit-labs/ssr-client';
+// A template tagged with staticHtml is never hydrated, so unlike html it can bind
+// values inside raw-text elements (<title>, <textarea>, <script>, <style>) where
+// lit's marker comments can't be inserted. Real components nested inside (via
+// their own tag, e.g. <app-counter>) are unaffected and still hydrate normally —
+// use it for createPage's head/body, never for a component's own render function.
+import { html as staticHtml } from '@lit-labs/ssr/lib/server-template.js';
 import { create } from 'mutative';
 const isBrowser = typeof window !== 'undefined';
-export { html, isBrowser };
+export { html, isBrowser, unsafeHTML, staticHtml };
+// @lit-labs/ssr pulls in Node-only dependencies (module resolution, fetch
+// polyfills), so it can only ever be imported on the server. This project's
+// index.js is loaded directly in the browser too (no bundler), so the import
+// is conditional and dynamic — in the browser this line never executes.
+const ssr = isBrowser ? null : await import('@lit-labs/ssr');
-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;
@@ -77,223 +86,55 @@ const parseTag = (tag) => {
   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 !== ' ') {
+const parseAttrValue = (value) => (value && value.startsWith('{') ? JSON.parse(value.replace(/'/g, '"')) : value);
-          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) => {
+class JsonAttrDirective extends Directive {
-  switch (doc.type) {
-    case 'text':
-      return buff + doc.content;
-    case 'tag':
-      buff += '<' + doc.name + (doc.attrs ? stringifyAttrs(doc.attrs) : '') + (doc.voidElement ? '/>' : '>');
-      if (doc.voidElement) {
+  render(value) {
-        return buff;
-      }
-      return buff + doc.children.reduce(stringifyHtml, '') + '</' + doc.name + '>';
-    case 'comment':
-      buff += '<!--' + doc.comment + '-->';
+    return JSON.stringify(value).replace(/"/g, `'`);
-      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);
-  }
+}
+// Wrap object values passed as a dynamic attribute binding to a custom element
+// (e.g. meta=${jsonAttr(data)}) so they serialize the same way this library's
+// attribute-parsing convention (parseAttrValue) expects to read them back.
+export const jsonAttr = directive(JsonAttrDirective);
+const collectSSR = (iterable) => {
-  if (node.children) {
+  let out = '';
-    for (const child of node.children) {
+  for (const chunk of iterable) {
-      hydrate(child);
+    if (typeof chunk !== 'string') {
+      throw new Error('Async values are not supported in server-rendered templates');
     }
+    out += chunk;
   }
+  return out;
 };
+// @lit-labs/ssr renders a single template to a string with lit's hydration
+// marker comments embedded, but has no concept of this library's own custom
+// elements (its automatic custom-element expansion requires Shadow DOM, which
+// this library deliberately doesn't use). So each registered tag found in that
+// output is expanded here by rendering its own component and splicing the
+// result between its open/close tags — never by re-parsing the already
+// marked-up string, which would risk corrupting lit's marker comments.
-const wrapAttribute = (attrName, suffix, text, v) => {
+const expandCustomElements = (htmlString) => {
-  let buffer = text;
-  const hasQuote = suffix && suffix.includes(`="`);
+  const tagNames = Object.keys(registry);
-  if (attrName && !hasQuote) {
+  if (!tagNames.length) {
-    buffer += `"`;
+    return htmlString;
   }
+  const re = new RegExp(`<(${tagNames.join('|')})(?=[\\s>])([^>]*)>\\s*</\\1>`, 'g');
+  return htmlString.replace(re, (match, tagName, attrsPortion) => {
+    const { attrs } = parseTag(`<${tagName}${attrsPortion}>`);
-  buffer += v;
+    Object.keys(attrs).forEach((key) => {
+      attrs[key] = parseAttrValue(attrs[key]);
+    });
+    const RenderElementClass = registry[tagName];
+    const instance = new RenderElementClass(attrs);
-  if (attrName && !hasQuote) {
+    const innerHtml = instance.render();
-    buffer += `"`;
+    return `<${tagName}${attrsPortion}>${innerHtml}</${tagName}>`;
-  }
+  });
-  return buffer;
 };
-const escapeAttribute = (s) => s.replace(/&/g, '&amp;').replace(/"/g, '&quot;');
-const escapeText = (s) => s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
-const UNSAFE_HTML = Symbol('unsafeHtml');
-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' && value[UNSAFE_HTML]) {
-          js += wrapAttribute(attrName, suffix, text, value.value);
-        } else if (value === null || !(type === 'object' || type === 'function' || type === 'undefined')) {
-          const str = type !== 'string' ? String(value) : value;
-          js += wrapAttribute(attrName, suffix, text, attrName ? escapeAttribute(str) : escapeText(str));
-        } else if (Array.isArray(value) && value.find((item) => item && isTemplateResult(item))) {
+export const renderHtml = isBrowser ? litRender : (template) => expandCustomElements(collectSSR(ssr.render(template, {})));
-          js += text;
-          value.forEach((v) => {
-            js += renderHtml(v);
-          });
-        } else if (type === 'object') {
-          // TemplateResult
-          if (isTemplateResult(value)) {
-            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();
@@ -436,8 +277,6 @@ const pageStyles = {
   },
 };
-export const unsafeHTML = isBrowser ? litUnsafeHTML : (value) => ({ [UNSAFE_HTML]: true, value });
 const fifo = (q) => q.shift();
 const filo = (q) => q.pop();
 const microtask = (flush) => () => queueMicrotask(flush);
@@ -524,62 +363,6 @@ export const useEffect = (fn, deps) => {
   }
 };
-// Walks/matches by element position only, since lit-html injects its own comment
-// marker nodes (part boundaries, per-binding markers) that don't exist in the
-// server-rendered markup and would otherwise throw off a childNodes-based index.
-const getNodePath = (root, node) => {
-  const path = [];
-  let current = node;
-  while (current && current !== root) {
-    const parent = current.parentElement;
-    if (!parent) {
-      return null;
-    }
-    path.unshift(Array.prototype.indexOf.call(parent.children, current));
-    current = parent;
-  }
-  return current === root ? path : null;
-};
-const getNodeAtPath = (root, path) => {
-  let current = root;
-  for (const index of path) {
-    current = current && current.children[index];
-  }
-  return current || null;
-};
-const captureFocusState = (root) => {
-  const active = document.activeElement;
-  if (!active || !root.contains(active)) {
-    return null;
-  }
-  const path = getNodePath(root, active);
-  if (!path) {
-    return null;
-  }
-  const state = { path, tagName: active.tagName };
-  if (typeof active.selectionStart === 'number') {
-    state.selectionStart = active.selectionStart;
-    state.selectionEnd = active.selectionEnd;
-  }
-  return state;
-};
-const restoreFocusState = (root, state) => {
-  if (!state) {
-    return;
-  }
-  const next = getNodeAtPath(root, state.path);
-  if (!next || next.tagName !== state.tagName || typeof next.focus !== 'function') {
-    return;
-  }
-  next.focus();
-  if (state.selectionStart != null && typeof next.setSelectionRange === 'function') {
-    next.setSelectionRange(state.selectionStart, state.selectionEnd);
-  }
-};
 const registry = {};
 const injectedStyleTags = new Set();
 export const getElement = (name) => registry[name];
@@ -628,7 +411,7 @@ export const createElement = (meta, renderFn) => {
     }
     attributeChangedCallback(key, oldValue, newValue) {
-      this.attrs[key] = newValue && newValue.startsWith(`{`) ? JSON.parse(newValue.replace(/'/g, `"`)) : newValue;
+      this.attrs[key] = parseAttrValue(newValue);
       if (this._connected) {
         this.update();
       }
@@ -699,16 +482,11 @@ export const createElement = (meta, renderFn) => {
           document.getElementById('global').textContent += styles;
         }
         if (!this._hydrated) {
-          // lit-html's render() appends into the container rather than replacing its
-          // content, so any server-rendered light-DOM markup must be discarded before
+          // The server-rendered light-DOM markup already contains lit's hydration
-          // the first client-side render or it's left behind as an inert duplicate.
+          // marker comments (via @lit-labs/ssr), so the first client-side render
-          // Discarding it drops focus/selection state on whatever was focused inside,
-          // so it's captured here and restored on the equivalent node afterward.
+          // attaches to that existing DOM instead of discarding and rebuilding it.
           this._hydrated = true;
-          const focusState = captureFocusState(this);
-          this.textContent = '';
-          renderHtml(template, this);
+          litHydrate(template, this);
-          restoreFocusState(this, focusState);
         } else {
           renderHtml(template, this);
         }

index.test.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { test } from 'node:test';
 import assert from 'node:assert/strict';
-import { getElement, createElement, createPage, createReducer, html, renderHtml, unsafeHTML, css, useReducer, useEffect } from './index.js';
+import { getElement, createElement, createPage, createReducer, html, staticHtml, renderHtml, unsafeHTML, css, useReducer, useEffect, jsonAttr } from './index.js';
 test('css tagged template', (t) => {
   const color = 'magenta';
@@ -39,7 +39,7 @@ test('renderHtml', (t) => {
   const highlight = 'high';
   const template = html`
     <div>
-      <app-counter name="123" class="abc ${highlight}" age=${age} details1=${data} items=${items}></app-counter>
+      <app-counter name="123" class="abc ${highlight}" age=${age} details1=${jsonAttr(data)} items=${jsonAttr(items)}></app-counter>
     </div>
   `;
   const res = renderHtml(template);
@@ -63,7 +63,7 @@ test('render attributes within quotes', (t) => {
   const classes = 'high';
   const template = html`
     <div>
-      <app-counter name="123" class=${classes} age="${age}" details1="${data}" items="${items}"></app-counter>
+      <app-counter name="123" class=${classes} age="${age}" details1="${jsonAttr(data)}" items="${jsonAttr(items)}"></app-counter>
     </div>
   `;
   const res = renderHtml(template);
@@ -98,7 +98,7 @@ test('render multi template', (t) => {
     <div>
       ${[1, 2].map(
         (v) => html`
-          <app-item meta="${{ index: v }}" @click=${() => {}} .handleClick=${() => {}}>
+          <app-item meta="${jsonAttr({ index: v })}" @click=${() => {}} .handleClick=${() => {}}>
             <button @click=${() => {}}>+</button>
           </app-item>
         `,
@@ -233,7 +233,7 @@ test('createPage', (t) => {
     return `${langPart}`;
   };
   const head = ({ config }) => {
-    return html`
+    return staticHtml`
       <title>${config.title}</title>
       <meta name="title" content=${config.title} />
       <meta name="description" content=${config.title} />
@@ -241,7 +241,7 @@ test('createPage', (t) => {
   };
   const body = ({ config }) => {
-    return html`
+    return staticHtml`
       <div>
         <app-header></app-header>
         <main class="flex flex-1 flex-col mt-20 items-center">

index.test.js.snapshot CHANGED Viewed

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

package.json CHANGED Viewed

@@ -39,6 +39,8 @@
     "trailingComma": "all"
   },
   "dependencies": {
+    "@lit-labs/ssr": "^4.1.0",
+    "@lit-labs/ssr-client": "^1.1.8",
     "lit-html": "^3.3.3",
     "mutative": "^1.3.0"
   }

atoms-element v5.0.0

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

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