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.

a3cc1df0 — Peter John

improve element and page

Files changed (12) hide show

element.d.ts +19 -24
element.js +81 -63
element.test.js +66 -11
example/app-counter.js +80 -46
example/index.html +0 -10
example/index.js +24 -25
example/main.js +45 -0
example/modern-normalize.css +271 -0
package-lock.json +2 -2
package.json +1 -1
page.js +36 -53
page.test.js +52 -53

element.d.ts CHANGED Viewed

@@ -1,19 +1,5 @@
 import { Config } from './page';
-export declare type Destructor = () => void | undefined;
-export declare type EffectCallback = () => (void | Destructor);
-export declare type SetStateAction<S> = S | ((prevState: S) => S);
-export declare type Dispatch<A> = (value: A) => void;
-export declare type DispatchWithoutAction = () => void;
-export declare type DependencyList = ReadonlyArray<any>;
-export declare type Reducer<S, A> = (prevState: S, action: A) => S;
-export declare type ReducerWithoutAction<S> = (prevState: S) => S;
-export declare type ReducerState<R extends Reducer<any, any>> = R extends Reducer<infer S, any> ? S : never;
-export declare type ReducerAction<R extends Reducer<any, any>> = R extends Reducer<any, infer A> ? A : never;
-export declare type ReducerStateWithoutAction<R extends ReducerWithoutAction<any>> = R extends ReducerWithoutAction<infer S> ? S : never;
-export declare interface MutableRefObject<T> {
-  current: T | null | undefined;
-}
 export declare type Location = {
   readonly ancestorOrigins: DOMStringList;
   hash: string;
@@ -38,15 +24,24 @@ export default class AtomsElement {
   config: Config;
   location: Location;
   attrs: {[key: string]: any};
+  state: {[key: string]: any};
+  computed: {[key: string]: any};
   styles: () => string;
-  useState: <S>(initialState: S | (() => S)) => [S, Dispatch<SetStateAction<S>>];
-  useEffect: (effect: EffectCallback, deps?: DependencyList) => void;
-  useLayoutEffect: (effect: EffectCallback, deps?: DependencyList) => void;
-  useReducer: <R extends ReducerWithoutAction<any>, I>(
-    reducer: R,
-    initializerArg: I,
-    initializer: (arg: I) => ReducerStateWithoutAction<R>
-  ) => [ReducerStateWithoutAction<R>, DispatchWithoutAction];
-  useCallback: <T extends (...args: any[]) => any>(callback: T, deps: DependencyList) => T;
-  useMemo: <T>(factory: () => T, deps: DependencyList | undefined) => T;
 }
+// declare type Colors = 'red' | 'purple' | 'blue' | 'green';
+// declare type Luminance = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
+// declare type BgColor = `bg-${Colors}-${Luminance}`;
+// declare type Distance = 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
+// declare type Breakpoints = 'xs:' | 'sm:' | 'md:' | 'lg:' | 'xl:' | '';
+// declare type Space = `${Breakpoints}space-${'x' | 'y'}-${Distance}`;
+// declare type ValidClass = Space | BgColor;
+// declare type Tailwind<S> = S extends `${infer Class} ${infer Rest}` ? Class extends ValidClass ? `${Class} ${Tailwind<Rest>}` : never : S extends `${infer Class}` ? Class extends ValidClass ? S : never : never;
+// declare function doSomethingWithTwClass<S>(cls: Tailwind<S>): Tailwind<S>;
+// declare const bad: never;
+// declare const bad2: never;
+// declare const bad3: never;
+// declare const bad4: never;
+// declare const good: "bg-red-400 space-x-4 md:space-x-8";
+// declare const good2: "bg-red-400 space-x-4";
+// declare const good3: "space-x-1.5 bg-blue-200";

element.js CHANGED Viewed

@@ -3,72 +3,63 @@ import { html, render as litRender, directive, NodePart, AttributePart, Property
 const isBrowser = typeof window !== 'undefined';
 export { html, isBrowser };
-const constructionToken = Symbol();
+// Taken from emotion
-class CSSResult {
-  constructor(cssText, safeToken) {
+const murmur2 = (str) => {
+  var h = 0;
+  var k,
+    i = 0,
+    len = str.length;
-    if (safeToken !== constructionToken) {
+  for (; len >= 4; ++i, len -= 4) {
+    k = (str.charCodeAt(i) & 0xff) | ((str.charCodeAt(++i) & 0xff) << 8) | ((str.charCodeAt(++i) & 0xff) << 16) | ((str.charCodeAt(++i) & 0xff) << 24);
-      throw new Error('CSSResult is not constructable. Use `unsafeCSS` or `css` instead.');
+    k = (k & 0xffff) * 0x5bd1e995 + (((k >>> 16) * 0xe995) << 16);
-    }
-    this.cssText = cssText;
+    k ^= k >>> 24;
+    h = ((k & 0xffff) * 0x5bd1e995 + (((k >>> 16) * 0xe995) << 16)) ^ ((h & 0xffff) * 0x5bd1e995 + (((h >>> 16) * 0xe995) << 16));
   }
-  toString() {
+  switch (len) {
+    case 3:
+      h ^= (str.charCodeAt(i + 2) & 0xff) << 16;
+    case 2:
+      h ^= (str.charCodeAt(i + 1) & 0xff) << 8;
+    case 1:
-    return this.cssText;
+      h ^= str.charCodeAt(i) & 0xff;
+      h = (h & 0xffff) * 0x5bd1e995 + (((h >>> 16) * 0xe995) << 16);
   }
-}
-/**
- * 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.
+  h ^= h >>> 13;
- */
-export const unsafeCSS = (value) => {
+  h = (h & 0xffff) * 0x5bd1e995 + (((h >>> 16) * 0xe995) << 16);
-  return new CSSResult(String(value), constructionToken);
+  return ((h ^ (h >>> 15)) >>> 0).toString(36);
 };
-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
+const hyphenate = (s) => s.replace(/[A-Z]|^ms/g, '-$&').toLowerCase();
-            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) => {
+export const convertStyles = (prefix, obj, parentClassName, indent = '') => {
-  const cssText = values.reduce((acc, v, idx) => acc + textFromCSSResult(v) + strings[idx + 1], strings[0]);
+  const className = parentClassName || prefix + '-' + murmur2(JSON.stringify(obj)).toString(36);
+  const cssText = Object.keys(obj).reduce((acc, key) => {
+    const value = obj[key];
+    if (typeof value === 'object') {
+      acc += '\n  ' + indent + convertStyles(prefix, value, key, indent + '  ').cssText;
+    } else {
+      acc += '  ' + indent + hyphenate(key) + ': ' + value + ';\n';
+    }
+    return acc;
+  }, `${parentClassName ? '' : '.'}${className} {\n`);
-  return new CSSResult(cssText, constructionToken);
+  return { className, cssText: cssText + `\n${indent}}` };
 };
-// const cssSymbol = Symbol();
+export const css = (obj) => {
+  Object.keys(obj).forEach((key) => {
+    const value = obj[key];
-// const hasCSSSymbol = (value: unknown): value is HasCSSSymbol => {
+    const { className, cssText } = convertStyles(key, value);
-//   return value && (value as HasCSSSymbol)[cssSymbol] != null;
-// };
+    obj[key] = className;
+    obj[className] = cssText;
+  });
+  obj.toString = () => {
-// const resolve = (value: unknown): string => {
+    return Object.keys(obj).reduce((acc, key) => {
-//   if (typeof value === "number") return String(value);
-//   if (hasCSSSymbol(value)) return value[cssSymbol];
-//   throw new TypeError(`${value} is not supported type.`);
-// };
-// export const css = (strings: readonly string[], ...values: unknown[]) => ({
-//   [cssSymbol]: strings
-//     .slice(1)
-//     .reduce((acc, s, i) => acc + resolve(values[i]) + s, strings[0]),
+      acc += key.includes('-') ? obj[key] + '\n\n' : '';
+      return acc;
-// });
+    }, '');
+  };
-// export const unsafeCSS = (css: string) => ({ [cssSymbol]: css });
+  return obj;
-// root.appendChild(document.createElement("style")).textContent = cssStyle;
+};
 const lastAttributeNameRegex =
   /([ \x09\x0a\x0c\x0d])([^\0-\x1F\x7F-\x9F "'>=/]+)([ \x09\x0a\x0c\x0d]*=[ \x09\x0a\x0c\x0d]*(?:[^ \x09\x0a\x0c\x0d"'`<>=]*|"[^"]*|'[^']*))$/;
@@ -275,7 +266,6 @@ export const array = validator('array', (innerType, context, data) => {
   }
 });
-const normalizeCss = `html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}`;
 const fifo = (q) => q.shift();
 const filo = (q) => q.pop();
 const microtask = (flush) => () => queueMicrotask(flush);
@@ -292,7 +282,7 @@ const task = (flush) => {
 const registry = {};
 const BaseElement = isBrowser ? window.HTMLElement : class {};
-export default class AtomsElement extends BaseElement {
+export class AtomsElement extends BaseElement {
   static register() {
     registry[this.name] = this;
     if (isBrowser) {
@@ -419,11 +409,10 @@ export default class AtomsElement extends BaseElement {
     const result = render(template, this);
     if (isBrowser) {
       if (!this.stylesMounted) {
-        this.appendChild(document.createElement('style')).textContent = normalizeCss + '\n' + this.constructor.styles.toString();
+        this.appendChild(document.createElement('style')).textContent = this.constructor.styles.toString();
         this.stylesMounted = true;
       }
     } else {
-      // ${normalizeCss}
       return `
         ${result}
         <style>
@@ -433,3 +422,32 @@ export default class AtomsElement extends BaseElement {
     }
   }
 }
+const createElement = ({ name, attrTypes, stateTypes, computedTypes, styles, render }) => {
+  const Element = class extends AtomsElement {
+    static name = name();
+    static attrTypes = attrTypes();
+    static stateTypes = stateTypes();
+    static computedTypes = computedTypes();
+    static styles = styles;
+    constructor(ssrAttributes) {
+      super(ssrAttributes);
+    }
+    render() {
+      return render({
+        attrs: this.attrs,
+        state: this.state,
+        computed: this.computed,
+      });
+    }
+  };
+  Element.register();
+  return { name, attrTypes, stateTypes, computedTypes, styles, render };
+};
+export default createElement;

element.test.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { expect, test, jest } from '@jest/globals';
-import AtomsElement, { html, render, number, boolean, string, array, object, unsafeHTML, css, classMap } from './element.js';
+import { AtomsElement, html, render, number, boolean, string, array, object, unsafeHTML, css, classMap } from './element.js';
 global.__DEV = true;
@@ -130,6 +130,60 @@ test('array', () => {
   spy.mockRestore();
 });
+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.toString()).toEqual(`.button-1t9ijgh {
+  color: magenta;
+  font-size: 10px;
+  @media screen and (min-width:40em) {
+    font-size: 64px;
+  }
+  :hover {
+    color: black;
+  }
+  @media screen and (min-width:56em) {
+    :hover {
+      color: navy;
+    }
+  }
+}
+.container-1dvem0h {
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+}
+`);
+});
 test('render', async () => {
   const age = 1;
   const data = { name: '123', address: { street: '1' } };
@@ -258,11 +312,11 @@ test('AtomsElement', async () => {
         }),
     };
-    static styles = css`
+    static styles = css({
-      div {
+      div: {
-        color: red;
+        color: 'red',
-      }
+      },
-    `;
+    });
     render() {
       const {
@@ -301,11 +355,12 @@ test('AtomsElement', async () => {
         </div>
         <style>
-      div {
+        .div-1gao8uk {
-        color: red;
+  color: red;
-      }
+}
         </style>
       `);
 });

example/app-counter.js CHANGED Viewed

@@ -1,53 +1,87 @@
-import AtomsElement, { html, css, object, number, string } from '../element.js';
+import createElement, { html, css, object, number, string } from '../element.js';
-class Counter extends AtomsElement {
-  static name = 'app-counter';
+const name = () => 'app-counter';
-  static attrTypes = {
+const attrTypes = () => ({
-    name: string().required(),
+  name: string().required(),
-    meta: object({
+  meta: object({
-      start: number(),
+    start: number(),
+  }),
+});
+const stateTypes = () => ({
+  count: number()
+    .required()
+    .default((attrs) => attrs.meta?.start || 0),
+});
+const computedTypes = () => ({
+  sum: number()
+    .required()
+    .compute('count', (count) => {
+      return count + 10;
     }),
-  };
-  static stateTypes = {
-    count: number()
-      .required()
-      .default((attrs) => attrs.meta?.start || 0),
-  };
-  static computedTypes = {
-    sum: number()
-      .required()
-      .compute('count', (count) => {
-        return count + 10;
-      }),
+});
-  };
-  static styles = css`
-    .container {
-    }
-  `;
+const styles = css({
+  title: {
+    fontSize: '24px',
+    marginBottom: '0.5rem',
+  },
-  render() {
+  container: {
+    display: 'flex',
+    flex: 1,
+    flexDirection: 'row',
+    fontSize: '32px',
+    color: 'gray',
+  },
+  mx: {
+    marginLeft: '40px',
+    marginRight: '40px',
+  },
+  button: {
+    // margin: 0,
+    // padding: 0,
+    // cursor: 'pointer',
+    // backgroundImage: 'none',
+    // '-webkitAppearance': 'button',
+    // textTransform: 'none',
+    // fontSize: '100%',
+    paddingTop: '0.5rem',
+    paddingBottom: '0.5rem',
+    paddingLeft: '1rem',
+    paddingRight: '1rem',
+    color: 'rgba(55, 65, 81, 1)',
+    borderRadius: '0.25rem',
+    backgroundColor: 'rgba(209, 213, 219, 1)',
+  },
+});
+const render = ({ attrs, state, computed }) => {
-    const { name } = this.attrs;
+  const { name } = attrs;
-    const { count, setCount } = this.state;
+  const { count, setCount } = state;
-    const { sum } = this.computed;
+  const { sum } = computed;
-    return html`
+  return html`
-      <div>
+    <div>
-        <div class="font-bold mb-2">Counter: ${name}</div>
+      <div class=${styles.title}>Counter: ${name}</div>
-        <div class="flex flex-1 flex-row text-3xl text-gray-700">
+      <div class=${styles.container}>
-          <button @click=${() => setCount((v) => v - 1)}>-</button>
+        <button class=${styles.button} @click=${() => setCount((v) => v - 1)}>-</button>
-          <div class="mx-20">
+        <div class=${styles.mx}>
-            <h1 class="text-1xl">${count}</h1>
+          <h1>${count}</h1>
-            <h1 class="text-1xl">${sum}</h1>
+          <h1>${sum}</h1>
-          </div>
-          <button @click=${() => setCount((v) => v + 1)}>+</button>
         </div>
+        <button class=${styles.button} @click=${() => setCount((v) => v + 1)}>+</button>
       </div>
+    </div>
-    `;
+  `;
-  }
+};
-}
+export default createElement({
+  name,
+  attrTypes,
+  stateTypes,
-Counter.register();
+  computedTypes,
+  styles,
+  render,
+});

example/index.html DELETED Viewed

@@ -1,10 +0,0 @@
-<html>
-  <body>
-    <div>
-      <app-counter name="1"></app-counter>
-    </div>
-    <script type="module">
-      import './app-counter.js';
-    </script>
-  </body>
-</html>

example/index.js CHANGED Viewed

@@ -1,32 +1,31 @@
 import { html, css } from '../element.js';
-import Page from '../page.js';
+import createPage from '../page.js';
 import './app-counter.js';
-class CounterPage extends Page {
+const route = () => {
-  route() {
-    return '/counter';
+  return '/counter';
-  }
+};
-  datapaths() {
-    return '/data/items/**';
+const styles = () => css({});
-  }
-  styles() {
+const head = ({ config }) => {
-    return css``;
+  return html`
+    <title>${config.title}</title>
+    <link href="/modern-normalize.css" rel="stylesheet" as="style" />
+  `;
-  }
+};
-  head({ config }) {
+const body = () => {
+  return html`
+    <div>
-    return html` <title>${config.title}</title> `;
+      <app-counter name="1" meta="{'start': 5}"></app-counter>
+    </div>
+  `;
-  }
+};
+export default createPage({
+  route,
+  styles,
+  head,
-  body() {
+  body,
-    return html`
-      <div>
-        <app-counter name="1"></app-counter>
-      </div>
-    `;
+});
-  }
-}
-const counterPage = new CounterPage({ config: { lang: 'en', title: 'Counter App' } });
-console.log(counterPage.render());

example/main.js ADDED Viewed

@@ -0,0 +1,45 @@
+import http from 'http';
+import fs from 'fs';
+import { fileURLToPath } from 'url';
+import path, { dirname } from 'path';
+import renderIndex from './index.js';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const port = process.argv[2] || 3000;
+const map = {
+  '/element.js': `${__dirname}/../element.js`,
+  '/lit-html.js': `${__dirname}/../lit-html.js`,
+  '/modern-normalize.css': `${__dirname}/modern-normalize.css`,
+  '/app-counter.js': `${__dirname}/app-counter.js`,
+  '.js': 'text/javascript',
+  '.css': 'text/css',
+};
+http
+  .createServer(function (req, res) {
+    if (req.url === '/') {
+      res.statusCode = 200;
+      res.setHeader('Content-type', 'text/html');
+      const html = renderIndex({
+        config: { lang: 'en', title: 'Counter App' },
+        headScript: '',
+        bodyScript: `
+          <script type="module">
+           import './app-counter.js';
+          </script>
+        `,
+      });
+      res.end(html);
+      return;
+    }
+    const filename = map[req.url];
+    const data = fs.readFileSync(filename);
+    const ext = path.parse(filename).ext;
+    res.setHeader('Content-type', map[ext] || 'text/plain');
+    res.end(data);
+  })
+  .listen(parseInt(port));
+console.log(`Server listening on port ${port}`);

example/modern-normalize.css ADDED Viewed

@@ -0,0 +1,271 @@
+/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
+/*
+Document
+========
+*/
+/**
+Use a better box model (opinionated).
+*/
+*,
+::before,
+::after {
+  box-sizing: border-box;
+}
+/**
+1. Correct the line height in all browsers.
+2. Prevent adjustments of font size after orientation changes in iOS.
+3. Use a more readable tab size (opinionated).
+*/
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+  -moz-tab-size: 4; /* 3 */
+  tab-size: 4; /* 3 */
+}
+/*
+Sections
+========
+*/
+/**
+1. Remove the margin in all browsers.
+2. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
+*/
+body {
+  margin: 0; /* 1 */
+  font-family: system-ui, -apple-system, /* Firefox supports this but not yet system-ui */ 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji',
+    'Segoe UI Emoji'; /* 2 */
+}
+/*
+Grouping content
+================
+*/
+/**
+1. Add the correct height in Firefox.
+2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+*/
+hr {
+  height: 0; /* 1 */
+  color: inherit; /* 2 */
+}
+/*
+Text-level semantics
+====================
+*/
+/**
+Add the correct text decoration in Chrome, Edge, and Safari.
+*/
+abbr[title] {
+  text-decoration: underline dotted;
+}
+/**
+Add the correct font weight in Edge and Safari.
+*/
+b,
+strong {
+  font-weight: bolder;
+}
+/**
+1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
+2. Correct the odd 'em' font sizing in all browsers.
+*/
+code,
+kbd,
+samp,
+pre {
+  font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+/**
+Add the correct font size in all browsers.
+*/
+small {
+  font-size: 80%;
+}
+/**
+Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
+*/
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+sub {
+  bottom: -0.25em;
+}
+sup {
+  top: -0.5em;
+}
+/*
+Tabular data
+============
+*/
+/**
+1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+*/
+table {
+  text-indent: 0; /* 1 */
+  border-color: inherit; /* 2 */
+}
+/*
+Forms
+=====
+*/
+/**
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+*/
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+/**
+Remove the inheritance of text transform in Edge and Firefox.
+*/
+button,
+select {
+  text-transform: none;
+}
+/**
+Correct the inability to style clickable types in iOS and Safari.
+*/
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+  -webkit-appearance: button;
+}
+/**
+Remove the inner border and padding in Firefox.
+*/
+::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+/**
+Restore the focus styles unset by the previous rule.
+*/
+:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+/**
+Remove the additional ':invalid' styles in Firefox.
+See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
+*/
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+/**
+Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
+*/
+legend {
+  padding: 0;
+}
+/**
+Add the correct vertical alignment in Chrome and Firefox.
+*/
+progress {
+  vertical-align: baseline;
+}
+/**
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+/**
+1. Correct the odd appearance in Chrome and Safari.
+2. Correct the outline style in Safari.
+*/
+[type='search'] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+/**
+Remove the inner padding in Chrome and Safari on macOS.
+*/
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+/**
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Change font properties to 'inherit' in Safari.
+*/
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+/*
+Interactive
+===========
+*/
+/*
+Add the correct display in Chrome and Safari.
+*/
+summary {
+  display: list-item;
+}

package-lock.json CHANGED Viewed

@@ -1,11 +1,11 @@
 {
   "name": "atoms-element",
-  "version": "1.2.1",
+  "version": "2.0.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "version": "1.2.1",
+      "version": "2.0.0",
       "license": "MIT",
       "dependencies": {
         "parse5": "^6.0.1"

package.json CHANGED Viewed

@@ -33,7 +33,7 @@
     "node": ">=14.0.0"
   },
   "scripts": {
-    "example": "npx serve ./",
+    "example": "node example/main.js",
     "test": "NODE_OPTIONS=--experimental-vm-modules jest"
   },
   "devDependencies": {

page.js CHANGED Viewed

@@ -1,57 +1,38 @@
 import parse5 from 'parse5';
-import AtomsElement, { render } from './element.js';
+import { AtomsElement, render } from './element.js';
-export default class Page {
+const find = (node) => {
+  for (const child of node.childNodes) {
+    if (AtomsElement.getElement(child.tagName)) {
-  constructor({ config, data, item, headScript, bodyScript }) {
+      const Clazz = AtomsElement.getElement(child.tagName);
-    this.config = config;
-    this.data = data;
+      const instance = new Clazz(child.attrs);
-    this.item = item;
-    this.headScript = headScript;
+      const res = instance.renderTemplate();
+      const frag = parse5.parseFragment(res);
-    this.bodyScript = bodyScript;
+      child.childNodes.push(...frag.childNodes);
-  }
+    }
-  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 = instance.renderTemplate();
-        const frag = parse5.parseFragment(res);
-        child.childNodes.push(...frag.childNodes);
-        child.childNodes.push({
-          nodeName: 'style',
-          tagName: 'style',
-          attrs: [],
-          childNodes: [
-            {
-              nodeName: '#text',
-              value: Clazz.styles.toString(),
-            },
-          ],
-        });
-      }
-      if (child.childNodes) {
+    if (child.childNodes) {
-        this.find(child);
+      find(child);
-      }
     }
   }
+};
-  ssr(template) {
+const ssr = (template) => {
-    const text = render(template);
+  const text = render(template);
-    const h = parse5.parseFragment(text);
+  const h = parse5.parseFragment(text);
-    this.find(h);
+  find(h);
-    return parse5.serialize(h);
+  return parse5.serialize(h);
-  }
+};
+const createPage = ({ route, datapaths, head, body, styles }) => {
-  render() {
+  return ({ config, data, item, headScript, bodyScript }) => {
     const isProd = process.env.NODE_ENV === 'production';
-    const props = { config: this.config, data: this.data, item: this.item };
+    const props = { config, data, item };
-    const headHtml = this.ssr(this.head(props));
+    const headHtml = ssr(head(props));
+    const bodyHtml = ssr(body(props));
-    const stylesCss = this.styles(props);
+    const stylesCss = styles(props);
-    const bodyHtml = this.ssr(this.body(props));
     return `
       <!DOCTYPE html>
-      <html lang="${this.config.lang}">
+      <html lang="${config.lang}">
         <head>
           <meta charset="utf-8" />
           <meta http-equiv="x-ua-compatible" content="ie=edge" />
@@ -61,21 +42,23 @@ export default class Page {
           <link rel="icon" type="image/png" href="/assets/icon.png" />
           ${headHtml}
           <style>
-            ${stylesCss}
+            ${stylesCss.toString()}
           </style>
-          ${this.headScript}
+          ${headScript}
         </head>
         <body>
           ${bodyHtml}
           <script>
             window.__DEV__ = ${!isProd};
-            window.config = ${JSON.stringify(this.config)};
+            window.config = ${JSON.stringify(config)};
-            window.data = ${JSON.stringify(this.data)};
+            window.data = ${JSON.stringify(data)};
-            window.item = ${JSON.stringify(this.item)};
+            window.item = ${JSON.stringify(item)};
           </script>
-          ${this.bodyScript}
+          ${bodyScript}
         </body>
       </html>
   `;
-  }
+  };
-}
+};
+export default createPage;

page.test.js CHANGED Viewed

@@ -1,46 +1,44 @@
 import { expect, test } from '@jest/globals';
 import { html, css } from './element.js';
-import Page from './page.js';
+import createPage from './page.js';
 test('Page', () => {
-  class MainPage extends Page {
+  const route = () => {
-    route() {
-      const langPart = this.config.lang === 'en' ? '' : `/${this.config.lang}`;
+    const langPart = this.config.lang === 'en' ? '' : `/${this.config.lang}`;
-      return `${langPart}`;
+    return `${langPart}`;
-    }
+  };
+  const styles = () =>
+    css({
+      div: {
+        color: 'red',
+      },
+    });
+  const head = ({ config }) => {
+    return html`
+      <title>${config.title}</title>
+      <meta name="title" content=${config.title} />
+      <meta name="description" content=${config.title} />
+    `;
+  };
-    styles() {
+  const body = ({ config }) => {
-      return css`
+    return html`
-        div {
-          color: red;
+      <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>
-      `;
+    `;
-    }
-    head() {
-      const { title } = this.config;
-      return html`
-        <title>${title}</title>
-        <meta name="title" content=${title} />
-        <meta name="description" content=${title} />
-      `;
+  };
+  const renderPage = createPage({
+    route,
-    }
+    head,
-    body() {
+    body,
-      const { title } = this.config;
-      return html`
-        <div>
+    styles,
-          <app-header></app-header>
-          <main class="flex flex-1 flex-col mt-20 items-center">
-            <h1 class="text-5xl">${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 = renderPage({ config: { lang: 'en', title: '123' }, headScript: scripts, bodyScript: scripts });
-  const res = mainPage.render();
   expect(res).toEqual(`
       <!DOCTYPE html>
       <html lang="en">
@@ -52,28 +50,29 @@ test('Page', () => {
           <link rel="sitemap" type="application/xml" href="/sitemap.xml" />
           <link rel="icon" type="image/png" href="/assets/icon.png" />
-        <title>123</title>
+      <title>123</title>
-        <meta name="title" content="123">
+      <meta name="title" content="123">
-        <meta name="description" content="123">
+      <meta name="description" content="123">
           <style>
-        div {
+            .div-1gao8uk {
-          color: red;
+  color: red;
-        }
+}
           </style>
           <script type="module"><script>
         </head>
         <body>
-        <div>
+      <div>
-          <app-header></app-header>
+        <app-header></app-header>
-          <main class="flex flex-1 flex-col mt-20 items-center">
+        <main class="flex flex-1 flex-col mt-20 items-center">
-            <h1 class="text-5xl">123</h1>
+          <h1 class="text-5xl">123</h1>
-          </main>
+        </main>
-        </div>
+      </div>
           <script>
             window.__DEV__ = true;
             window.config = {"lang":"en","title":"123"};

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