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.

1d4524c3 — Peter John

improve structure

Files changed (10) hide show

src/index.d.ts → element.d.ts +0 -0
src/index.js → element.js +62 -22
test/index.test.js → element.test.js +8 -3
example/index.js +40 -0
example/main.js +0 -30
src/lit-html.js → lit-html.js +0 -0
package.json +0 -6
page.js +70 -0
page.test.js +85 -0
src/ssr.js +0 -24

src/index.d.ts → element.d.ts RENAMED Viewed

File without changes

src/index.js → element.js RENAMED Viewed

@@ -3,6 +3,56 @@ import { html, render as litRender, directive, NodePart, AttributePart, Property
 const isBrowser = typeof window !== 'undefined';
 export { html, isBrowser };
+const constructionToken = Symbol();
+export class CSSResult {
+  constructor(cssText, safeToken) {
+    if (safeToken !== constructionToken) {
+      throw new Error('CSSResult is not constructable. Use `unsafeCSS` or `css` instead.');
+    }
+    this.cssText = cssText;
+  }
+  toString() {
+    return this.cssText;
+  }
+}
+/**
+ * Wrap a value for interpolation in a [[`css`]] tagged template literal.
+ *
+ * This is unsafe because untrusted CSS text can be used to phone home
+ * or exfiltrate data to an attacker controlled site. Take care to only use
+ * this with trusted input.
+ */
+export const unsafeCSS = (value) => {
+  return new CSSResult(String(value), constructionToken);
+};
+const textFromCSSResult = (value) => {
+  if (value instanceof CSSResult) {
+    return value.cssText;
+  } else if (typeof value === 'number') {
+    return value;
+  } else {
+    throw new Error(
+      `Value passed to 'css' function must be a 'css' function result: ${value}. Use 'unsafeCSS' to pass non-literal values, but
+            take care to ensure page security.`,
+    );
+  }
+};
+/**
+ * Template tag which which can be used with LitElement's [[LitElement.styles |
+ * `styles`]] property to set element styles. For security reasons, only literal
+ * string values may be used. To incorporate non-literal values [[`unsafeCSS`]]
+ * may be used inside a template string part.
+ */
+export const css = (strings, ...values) => {
+  const cssText = values.reduce((acc, v, idx) => acc + textFromCSSResult(v) + strings[idx + 1], strings[0]);
+  return new CSSResult(cssText, constructionToken);
+};
 const lastAttributeNameRegex =
   /([ \x09\x0a\x0c\x0d])([^\0-\x1F\x7F-\x9F "'>=/]+)([ \x09\x0a\x0c\x0d]*=[ \x09\x0a\x0c\x0d]*(?:[^ \x09\x0a\x0c\x0d"'`<>=]*|"[^"]*|'[^']*))$/;
@@ -310,10 +360,10 @@ const enqueueLayoutEffects = batch(microtask, filo, (c) => c._flushEffects('layo
 const enqueueEffects = batch(task, filo, (c) => c._flushEffects('effects'));
 const enqueueUpdate = batch(microtask, fifo, (c) => c._performUpdate());
-const BaseElement = isBrowser ? window.HTMLElement : class {};
-const count = [0];
 const registry = {};
+const BaseElement = isBrowser ? window.HTMLElement : class {};
-export class AtomsElement extends BaseElement {
+export default class AtomsElement extends BaseElement {
   static register() {
     registry[this.name] = this;
     if (isBrowser) {
@@ -329,23 +379,15 @@ export class AtomsElement extends BaseElement {
     return registry[name];
   }
-  static getNextIndex() {
-    count[0] = count[0] + 1;
-    return count[0];
-  }
   static get observedAttributes() {
     if (!this.attrTypes) {
       return [];
     }
-    return Object.keys(this.attrTypes)
+    return Object.keys(this.attrTypes).map((k) => k.toLowerCase());
-      .filter((key) => this.attrTypes[key].type !== 'function')
-      .map((k) => k.toLowerCase());
   }
   constructor(attrs) {
     super();
-    this._id = `atoms:${this.constructor.getNextIndex()}`;
     this._dirty = false;
     this._connected = false;
     this.hooks = {
@@ -444,15 +486,13 @@ export class AtomsElement extends BaseElement {
   }
   getAttrs() {
-    return Object.keys(this.constructor.attrTypes)
+    return Object.keys(this.constructor.attrTypes).reduceRight((acc, key) => {
-      .filter((key) => this.constructor.attrTypes[key].type !== 'function')
-      .reduceRight((acc, key) => {
-        const attrType = this.constructor.attrTypes[key];
+      const attrType = this.constructor.attrTypes[key];
-        const newValue = isBrowser ? this.getAttribute(key.toLowerCase()) : this.attrs.find((item) => item.name === key.toLowerCase()).value;
+      const newValue = isBrowser ? this.getAttribute(key.toLowerCase()) : this.attrs.find((item) => item.name === key.toLowerCase())?.value;
-        const data = attrType.parse(newValue);
+      const data = attrType.parse(newValue);
-        attrType.validate(`<${this.constructor.name}> ${key}`, data);
+      attrType.validate(`<${this.constructor.name}> ${key}`, data);
-        acc[key] = data;
+      acc[key] = data;
-        return acc;
+      return acc;
-      }, {});
+    }, {});
   }
 }

test/index.test.js → element.test.js RENAMED Viewed

@@ -1,5 +1,5 @@
 import { expect, test, jest } from '@jest/globals';
-import { AtomsElement, html, render, number, boolean, string, array, func, object, unsafeHTML, classMap } from '../src/index.js';
+import AtomsElement, { html, render, number, boolean, string, array, object, unsafeHTML, css, classMap } from './element.js';
 global.__DEV = true;
@@ -239,10 +239,15 @@ test('AtomsElement', async () => {
       address: object({
         street: string.isRequired,
       }).isRequired,
-      renderItem: func(),
     };
+    styles() {
-    static css = ``;
+      return css`
+        div {
+          color: red;
+        }
+      `;
+    }
     render() {
       const {

example/index.js ADDED Viewed

@@ -0,0 +1,40 @@
+import AtomsElement, { html, object, number, string } from '../element.js';
+import Page from '../page.js';
+class Counter extends AtomsElement {
+  static name = 'app-counter';
+  static attrTypes = {
+    name: string.isRequired,
+    meta: object({
+      start: number,
+    }),
+  };
+  static styles = `
+    .container {
+    }
+  `;
+  render() {
+    const { name, meta } = this.getAttrs();
+    const [count, setCount] = this.useState(meta?.start || 0);
+    return html`
+      <div>
+        <div class="font-bold mb-2">Counter: ${name}</div>
+        <div class="flex flex-1 flex-row text-3xl text-gray-700">
+          <button @click=${() => setCount((v) => v - 1)}>-</button>
+          <div class="mx-20">
+            <h1 class="text-1xl">${count}</h1>
+          </div>
+          <button @click=${() => setCount((v) => v + 1)}>+</button>
+        </div>
+      </div>
+    `;
+  }
+}
+Counter.register();
+console.log(ssr(html`<app-counter name="1"></app-counter>`));

example/main.js DELETED Viewed

@@ -1,30 +0,0 @@
-import { defineElement, html, object, number, string, useState } from '../src/index.js';
-import { ssr } from '../src/ssr.js';
-const attrTypes = {
-  name: string.isRequired,
-  meta: object({
-    start: number,
-  }),
-};
-const Counter = ({ name, meta }) => {
-  const [count, setCount] = useState(meta?.start || 0);
-  return html`
-    <div>
-      <div class="font-bold mb-2">Counter: ${name}</div>
-      <div class="flex flex-1 flex-row text-3xl text-gray-700">
-        <button @click=${() => setCount((v) => v - 1)}>-</button>
-        <div class="mx-20">
-          <h1 class="text-1xl">${count}</h1>
-        </div>
-        <button @click=${() => setCount((v) => v + 1)}>+</button>
-      </div>
-    </div>
-  `;
-};
-defineElement('app-counter', Counter, attrTypes);
-console.log(ssr(html`<app-counter name="1"></app-counter>`));

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

File without changes

package.json CHANGED Viewed

@@ -20,12 +20,6 @@
     "fuco"
   ],
   "license": "MIT",
-  "main": "src/index.js",
-  "files": [
-    "src",
-    "example"
-  ],
-  "typings": "src/index.d.ts",
   "author": "pyros.sh",
   "type": "module",
   "engines": {

page.js ADDED Viewed

@@ -0,0 +1,70 @@
+import parse5 from 'parse5';
+import AtomsElement, { render } from './element.js';
+export default class Page {
+  constructor({ config, data, item, headScript, bodyScript }) {
+    this.config = config;
+    this.data = data;
+    this.item = item;
+    this.headScript = headScript;
+    this.bodyScript = bodyScript;
+  }
+  find(node) {
+    for (const child of node.childNodes) {
+      if (AtomsElement.getElement(child.tagName)) {
+        const Clazz = AtomsElement.getElement(child.tagName);
+        const instance = new Clazz(child.attrs);
+        const res = render(instance.render());
+        const frag = parse5.parseFragment(res);
+        child.childNodes.push(...frag.childNodes);
+      }
+      if (child.childNodes) {
+        this.find(child);
+      }
+    }
+  }
+  ssr(template) {
+    const text = render(template);
+    const h = parse5.parseFragment(text);
+    this.find(h);
+    return parse5.serialize(h);
+  }
+  render() {
+    const isProd = process.env.NODE_ENV === 'production';
+    const props = { config: this.config, data: this.data, item: this.item };
+    const headHtml = this.ssr(this.head(props));
+    const stylesCss = this.styles(props).cssText;
+    const bodyHtml = this.ssr(this.body(props));
+    return `
+      <!DOCTYPE html>
+      <html lang="${this.config.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>
+            ${stylesCss}
+          </style>
+          ${this.headScript}
+        </head>
+        <body>
+          ${bodyHtml}
+          <script>
+            window.__DEV__ = ${!isProd};
+            window.config = ${JSON.stringify(this.config)};
+            window.data = ${JSON.stringify(this.data)};
+            window.item = ${JSON.stringify(this.item)};
+          </script>
+          ${this.bodyScript}
+        </body>
+      </html>
+  `;
+  }
+}

page.test.js ADDED Viewed

@@ -0,0 +1,85 @@
+import { expect, test } from '@jest/globals';
+import { html, css } from './element.js';
+import Page from './page.js';
+test('Page', () => {
+  class MainPage extends Page {
+    route({ config }) {
+      const langPart = config.lang === 'en' ? '' : `/${config.lang}`;
+      return `${langPart}`;
+    }
+    styles({ config }) {
+      return css`
+        div {
+          color: red;
+        }
+      `;
+    }
+    head({ config }) {
+      return html`
+        <title>${config.title}</title>
+        <meta name="title" content=${config.title} />
+        <meta name="description" content=${config.title} />
+      `;
+    }
+    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 scripts = '<script type="module"><script>';
+  const mainPage = new MainPage({ config: { lang: 'en', title: '123' }, headScript: scripts, bodyScript: scripts });
+  const res = mainPage.render();
+  expect(res).toEqual(`
+      <!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>
+        div {
+          color: red;
+        }
+          </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.__DEV__ = true;
+            window.config = {"lang":"en","title":"123"};
+            window.data = undefined;
+            window.item = undefined;
+          </script>
+          <script type="module"><script>
+        </body>
+      </html>
+  `);
+});

src/ssr.js DELETED Viewed

@@ -1,24 +0,0 @@
-import parse5 from 'parse5';
-import { getElement, render } from '../src/index.js';
-export const find = async (node) => {
-  for (const child of node.childNodes) {
-    if (getElement(child.tagName)) {
-      const element = getElement(child.tagName);
-      const elementInstance = new element.Clazz(child.attrs);
-      const res = elementInstance.render();
-      const frag = parse5.parseFragment(res);
-      child.childNodes.push(...frag.childNodes);
-    }
-    if (child.childNodes) {
-      find(child);
-    }
-  }
-};
-export const ssr = (template) => {
-  const text = render(template);
-  const h = parse5.parseFragment(text);
-  find(h);
-  return parse5.serialize(h);
-};

~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.