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.

1bdc5ec4 — pyros2097

Merge pull request #1 from pyros2097/class_based_atom

Files changed (19) hide show

element.d.ts +47 -0
element.js +451 -0
element.test.js +366 -0
example/app-counter.js +91 -0
example/index.js +38 -0
example/main.js +0 -30
example/server.js +45 -0
example/styles.css +567 -0
src/lit-html.js → lit-html.js +0 -0
package-lock.json +2 -2
package.json +9 -13
page.d.ts +26 -0
page.js +61 -0
page.test.js +85 -0
readme.md +84 -22
src/index.d.ts +0 -60
src/index.js +0 -497
src/ssr.js +0 -24
test/index.test.js +0 -266

element.d.ts ADDED Viewed

@@ -0,0 +1,47 @@
+import { Config } from './page';
+export declare 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 default class AtomsElement {
+  static register(): () => void;
+  static observedAttributes: Array<string>;
+  static getElement: (name: string) => AtomsElement | undefined;
+  config: Config;
+  location: Location;
+  attrs: {[key: string]: any};
+  state: {[key: string]: any};
+  computed: {[key: string]: any};
+  styles: () => string;
+}
+// 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 ADDED Viewed

@@ -0,0 +1,451 @@
+import { html, render as litRender, directive, NodePart, AttributePart, PropertyPart, isPrimitive } from './lit-html.js';
+const isBrowser = typeof window !== 'undefined';
+export { html, isBrowser };
+// Taken from emotion
+const murmur2 = (str) => {
+  var h = 0;
+  var k,
+    i = 0,
+    len = str.length;
+  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);
+    k = (k & 0xffff) * 0x5bd1e995 + (((k >>> 16) * 0xe995) << 16);
+    k ^= k >>> 24;
+    h = ((k & 0xffff) * 0x5bd1e995 + (((k >>> 16) * 0xe995) << 16)) ^ ((h & 0xffff) * 0x5bd1e995 + (((h >>> 16) * 0xe995) << 16));
+  }
+  switch (len) {
+    case 3:
+      h ^= (str.charCodeAt(i + 2) & 0xff) << 16;
+    case 2:
+      h ^= (str.charCodeAt(i + 1) & 0xff) << 8;
+    case 1:
+      h ^= str.charCodeAt(i) & 0xff;
+      h = (h & 0xffff) * 0x5bd1e995 + (((h >>> 16) * 0xe995) << 16);
+  }
+  h ^= h >>> 13;
+  h = (h & 0xffff) * 0x5bd1e995 + (((h >>> 16) * 0xe995) << 16);
+  return ((h ^ (h >>> 15)) >>> 0).toString(36);
+};
+const hyphenate = (s) => s.replace(/[A-Z]|^ms/g, '-$&').toLowerCase();
+export const convertStyles = (prefix, obj, parentClassName, indent = '') => {
+  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 { className, cssText: cssText + `\n${indent}}` };
+};
+export const css = (obj) => {
+  Object.keys(obj).forEach((key) => {
+    const value = obj[key];
+    const { className, cssText } = convertStyles(key, value);
+    obj[key] = className;
+    obj[className] = cssText;
+  });
+  obj.toString = () => {
+    return Object.keys(obj).reduce((acc, key) => {
+      acc += key.includes('-') ? obj[key] + '\n\n' : '';
+      return acc;
+    }, '');
+  };
+  return obj;
+};
+const lastAttributeNameRegex =
+  /([ \x09\x0a\x0c\x0d])([^\0-\x1F\x7F-\x9F "'>=/]+)([ \x09\x0a\x0c\x0d]*=[ \x09\x0a\x0c\x0d]*(?:[^ \x09\x0a\x0c\x0d"'`<>=]*|"[^"]*|'[^']*))$/;
+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 render = 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 += render(v);
+          });
+        } else if (type === 'object') {
+          // TemplateResult
+          if (value.strings && value.type === 'html') {
+            js += text;
+            js += render(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);
+        }
+      });
+      return js;
+    };
+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 previousClassesCache = new WeakMap();
+export const classMap = isBrowser
+  ? directive((classInfo) => (part) => {
+      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();
+      }
+    })
+  : (classes) => {
+      let value = '';
+      for (const key in classes) {
+        if (classes[key]) {
+          value += `${value.length ? ' ' : ''}${key}`;
+        }
+      }
+      return value;
+    };
+const logError = (msg) => {
+  if (isBrowser ? window.__DEV__ : global.__DEV) {
+    console.warn(msg);
+  }
+};
+const validator = (type, validate) => (innerType) => {
+  const isPrimitiveType = ['number', 'string', 'boolean'].includes(type);
+  const common = {
+    type: type,
+    parse: isPrimitiveType ? (attr) => attr : (attr) => (attr ? JSON.parse(attr.replace(/'/g, `"`)) : null),
+    validate: (context, data) => {
+      if (data === null || typeof data === 'undefined') {
+        if (common.__required) {
+          logError(`'${context}' Field is required`);
+        }
+        return;
+      }
+      if (!isPrimitiveType) {
+        validate(innerType, context, data);
+      } else {
+        const dataType = typeof data;
+        if (dataType !== type) {
+          logError(`'${context}' Expected type '${type}' got type '${dataType}'`);
+        }
+      }
+    },
+  };
+  common.required = () => {
+    common.__required = true;
+    return common;
+  };
+  common.default = (fnOrValue) => {
+    common.__default = fnOrValue;
+    return common;
+  };
+  common.compute = (...args) => {
+    const fn = args[args.length - 1];
+    const deps = args.slice(0, args.length - 1);
+    common.__compute = {
+      fn,
+      deps,
+    };
+    return common;
+  };
+  return common;
+};
+export const number = validator('number');
+export const string = validator('string');
+export const boolean = validator('boolean');
+export const object = validator('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 = validator('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);
+  }
+});
+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 registry = {};
+const BaseElement = isBrowser ? window.HTMLElement : class {};
+export class AtomsElement extends BaseElement {
+  static register() {
+    registry[this.name] = this;
+    if (isBrowser) {
+      if (window.customElements.get(this.name)) {
+        return;
+      } else {
+        window.customElements.define(this.name, registry[this.name]);
+      }
+    }
+  }
+  static getElement(name) {
+    return registry[name];
+  }
+  static get observedAttributes() {
+    if (!this.attrTypes) {
+      return [];
+    }
+    return Object.keys(this.attrTypes).map((k) => k.toLowerCase());
+  }
+  constructor(ssrAttributes) {
+    super();
+    this._dirty = false;
+    this._connected = false;
+    this._state = {};
+    this.ssrAttributes = ssrAttributes;
+    this.config = isBrowser ? window.config : global.config;
+    this.location = isBrowser ? window.location : global.location;
+    this.stylesMounted = false;
+  }
+  connectedCallback() {
+    this._connected = true;
+    if (isBrowser) {
+      this.update();
+    }
+  }
+  disconnectedCallback() {
+    this._connected = false;
+  }
+  attributeChangedCallback(key, oldValue, newValue) {
+    if (this._connected) {
+      this.update();
+    }
+  }
+  update() {
+    if (this._dirty) {
+      return;
+    }
+    this._dirty = true;
+    this.enqueueUpdate();
+  }
+  _performUpdate() {
+    if (!this._connected) {
+      return;
+    }
+    this.renderTemplate();
+    this._dirty = false;
+  }
+  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());
+  }
+  get attrs() {
+    return Object.keys(this.constructor.attrTypes).reduceRight((acc, key) => {
+      const attrType = this.constructor.attrTypes[key];
+      const newValue = isBrowser ? this.getAttribute(key.toLowerCase()) : this.ssrAttributes.find((item) => item.name === key.toLowerCase())?.value;
+      const data = attrType.parse(newValue);
+      attrType.validate(`<${this.constructor.name}> ${key}`, data);
+      acc[key] = data;
+      return acc;
+    }, {});
+  }
+  get state() {
+    return Object.keys(this.constructor.stateTypes).reduceRight((acc, key) => {
+      const stateType = this.constructor.stateTypes[key];
+      if (!this._state[key] && typeof stateType.__default !== 'undefined') {
+        this._state[key] = typeof stateType.__default === 'function' ? stateType.__default(this.attrs, this._state) : stateType.__default;
+      }
+      acc[key] = this._state[key];
+      acc[`set${key[0].toUpperCase()}${key.slice(1)}`] = (v) => {
+        // TODO: check type on set
+        this._state[key] = typeof v === 'function' ? v(this._state[key]) : v;
+        this.update();
+      };
+      return acc;
+    }, {});
+  }
+  get computed() {
+    return Object.keys(this.constructor.computedTypes).reduceRight((acc, key) => {
+      const type = this.constructor.computedTypes[key];
+      const state = this.state;
+      const values = type.__compute.deps.reduce((acc, key) => {
+        if (typeof state[key] !== undefined) {
+          acc.push(state[key]);
+        }
+        return acc;
+      }, []);
+      acc[key] = type.__compute.fn(...values);
+      return acc;
+    }, {});
+  }
+  renderTemplate() {
+    const template = this.render();
+    const result = render(template, this);
+    if (isBrowser) {
+      if (!this.stylesMounted) {
+        this.appendChild(document.createElement('style')).textContent = this.constructor.styles.toString();
+        this.stylesMounted = true;
+      }
+    } else {
+      return `
+        ${result}
+        <style>
+        ${this.constructor.styles.toString()}
+        </style>
+      `;
+    }
+  }
+}
+export 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 };
+};

element.test.js ADDED Viewed

@@ -0,0 +1,366 @@
+import { expect, test, jest } from '@jest/globals';
+import { AtomsElement, html, render, number, boolean, string, array, object, unsafeHTML, css, classMap } from './element.js';
+global.__DEV = true;
+const primitives = [
+  {
+    type: 'number',
+    valid: [123, 40.5, 6410],
+    invalid: ['123', false, {}, [], new Date()],
+  },
+  {
+    type: 'boolean',
+    valid: [false, true],
+    invalid: ['123', 123, {}, [], new Date()],
+  },
+  {
+    type: 'string',
+    valid: ['', '123'],
+    invalid: [123, false, {}, [], new Date()],
+  },
+];
+const primitiveTypes = {
+  number: number,
+  boolean: boolean,
+  string: string,
+};
+primitives.forEach((value) =>
+  it(`${value.type}`, () => {
+    const spy = jest.spyOn(global.console, 'warn').mockImplementation();
+    const context = 'key';
+    const validator = primitiveTypes[value.type]();
+    const validatorReq = primitiveTypes[value.type]().required();
+    expect(validator.type).toEqual(value.type);
+    expect(validator.__required).toEqual(undefined);
+    expect(validatorReq.__required).toEqual(true);
+    validator.validate(context);
+    for (const v of value.valid) {
+      validator.validate(context, v);
+      validatorReq.validate(context, v);
+    }
+    validatorReq.validate(context);
+    expect(console.warn).toHaveBeenCalledWith(`'key' Field is required`);
+    for (const v of value.invalid) {
+      validator.validate(context, v);
+      expect(console.warn).toHaveBeenCalledWith(`'key' Expected type '${value.type}' got type '${typeof v}'`);
+    }
+    spy.mockRestore();
+  }),
+);
+test('object', () => {
+  const spy = jest.spyOn(global.console, 'warn').mockImplementation();
+  const context = 'data';
+  object({}).validate(context, { name: '123' });
+  object({ name: string() }).validate(context, { name: '123' });
+  object({ name: string().required() }).validate(context, { name: '' });
+  object({ name: string().required() }).validate(context, {});
+  expect(console.warn).toHaveBeenCalledWith(`'data.name' Field is required`);
+  const schema = object({
+    address: object({
+      street: string(),
+    }),
+  });
+  schema.validate(context, {});
+  schema.validate(context, '123');
+  expect(console.warn).toHaveBeenCalledWith(`'data' Expected object literal '{}' got 'string'`);
+  schema.validate(context, {
+    address: {},
+  });
+  schema.validate(context, {
+    address: '123',
+  });
+  expect(console.warn).toHaveBeenCalledWith(`'data.address' Expected object literal '{}' got 'string'`);
+  schema.validate(context, {
+    address: {
+      street: 'avenue 1',
+    },
+  });
+  schema.validate(context, {
+    address: {
+      street: false,
+    },
+  });
+  expect(console.warn).toHaveBeenCalledWith(`'data.address.street' Expected type 'string' got type 'boolean'`);
+  const schema2 = object({
+    address: object({
+      street: string().required(),
+    }),
+  });
+  schema2.validate(context, {});
+  schema2.validate(context, {
+    address: {
+      street: '11th avenue',
+    },
+  });
+  schema2.validate(context, {
+    address: {},
+  });
+  expect(console.warn).toHaveBeenCalledWith(`'data.address.street' Field is required`);
+  spy.mockRestore();
+});
+test('array', () => {
+  const spy = jest.spyOn(global.console, 'warn').mockImplementation();
+  const context = 'items';
+  array(string()).validate(context, ['123']);
+  array(string()).validate(context, [123]);
+  expect(console.warn).toHaveBeenCalledWith(`'items[0]' Expected type 'string' got type 'number'`);
+  array(array(string())).validate(context, [['123']]);
+  array(array(string())).validate(context, [[123]]);
+  expect(console.warn).toHaveBeenCalledWith(`'items[0][0]' Expected type 'string' got type 'number'`);
+  const schema = object({
+    street: string().required(),
+  });
+  array(schema).validate(context, []);
+  array(schema).validate(context, [{ street: '123' }, { street: '456' }, { street: '789' }]);
+  array(schema).validate(context, [{}]);
+  expect(console.warn).toHaveBeenCalledWith(`'items[0].street' Field is required`);
+  array(schema).validate(context, [{ street: false }]);
+  expect(console.warn).toHaveBeenCalledWith(`'items[0].street' Expected type 'string' got type 'boolean'`);
+  array(schema).validate(context, [{ street: '123' }, {}]);
+  expect(console.warn).toHaveBeenCalledWith(`'items[1].street' Field is required`);
+  array(schema).validate(context, [{ street: '123' }, { street: false }]);
+  expect(console.warn).toHaveBeenCalledWith(`'items[1].street' Expected type 'string' got type 'boolean'`);
+  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' } };
+  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 = await render(template);
+  expect(res).toEqual(`
+    <div>
+      <app-counter name="123" class="abc high" age="1" details1="{'name':'123','address':{'street':'1'}}" items="[1,2,3]"></app-counter>
+    </div>
+  `);
+});
+test('render attribute keys', async () => {
+  const template = html`
+    <div>
+      <app-counter name="123" perPage="1"></app-counter>
+    </div>
+  `;
+  const res = await render(template);
+  expect(res).toEqual(`
+    <div>
+      <app-counter name="123" perPage="1"></app-counter>
+    </div>
+  `);
+});
+test('render attributes within quotes', async () => {
+  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 = await render(template);
+  expect(res).toEqual(`
+    <div>
+      <app-counter name="123" class="high" age="1" details1="{'name':'123','address':{'street':'1'}}" items="[1,2,3]"></app-counter>
+    </div>
+  `);
+});
+test('render unsafeHTML', async () => {
+  const textContent = `<div><p class="123">this is unsafe</p></div>`;
+  const template = html` <div>${unsafeHTML(textContent)}</div> `;
+  const res = await render(template);
+  expect(res).toEqual(` <div><div><p class="123">this is unsafe</p></div></div> `);
+});
+test('render classMap show', async () => {
+  const hide = false;
+  const template = html` <div class="abc ${classMap({ show: !hide })}"></div> `;
+  const res = await render(template);
+  expect(res).toEqual(` <div class="abc show"></div> `);
+});
+test('render classMap hide', async () => {
+  const hide = true;
+  const template = html` <div class="abc ${classMap({ show: !hide })}"></div> `;
+  const res = await render(template);
+  expect(res).toEqual(` <div class="abc "></div> `);
+});
+test('render single template', async () => {
+  const template = html` <div>${html`NoCountry ${false}`}</div> `;
+  const res = await render(template);
+  expect(res).toEqual(` <div>NoCountry false</div> `);
+});
+test('render multi template', async () => {
+  const template = html`
+    <div>
+      ${[1, 2].map(
+        (v) => html`
+          <app-item meta="${{ index: v }}" @click=${() => {}} .handleClick=${() => {}}>
+            <button @click=${() => {}}>+</button>
+          </app-item>
+        `,
+      )}
+    </div>
+  `;
+  const res = await render(template);
+  expect(res).toEqual(`
+    <div>
+          <app-item meta="{'index':1}">
+            <button>+</button>
+          </app-item>
+          <app-item meta="{'index':2}">
+            <button>+</button>
+          </app-item>
+    </div>
+  `);
+});
+test('AtomsElement', async () => {
+  class AppItem extends AtomsElement {
+    static name = 'app-item';
+    static attrTypes = {
+      perPage: string().required(),
+      address: object({
+        street: string().required(),
+      }).required(),
+    };
+    static stateTypes = {
+      count: number().required().default(0),
+    };
+    static computedTypes = {
+      sum: number()
+        .required()
+        .compute('count', (count) => {
+          return count + 10;
+        }),
+    };
+    static styles = css({
+      div: {
+        color: 'red',
+      },
+    });
+    render() {
+      const {
+        perPage,
+        address: { street },
+      } = this.attrs;
+      const { count, setCount } = this.state;
+      const { sum } = this.computed;
+      return html`
+        <div perPage=${perPage}>
+          <p>street: ${street}</p>
+          <p>count: ${count}</p>
+          <p>sum: ${sum}</p>
+          ${this.renderItem()}
+        </div>
+      `;
+    }
+  }
+  AppItem.register();
+  const Clazz = AtomsElement.getElement('app-item');
+  expect(Clazz.name).toEqual(AppItem.name);
+  const instance = new AppItem([
+    { name: 'address', value: JSON.stringify({ street: '123' }).replace(/"/g, `'`) },
+    { name: 'perpage', value: '1' },
+  ]);
+  instance.renderItem = () => html`<div><p>render item 1</p></div>`;
+  expect(AppItem.observedAttributes).toEqual(['perpage', 'address']);
+  const res = instance.renderTemplate();
+  expect(res).toEqual(`
+        <div perPage="1">
+          <p>street: 123</p>
+          <p>count: 0</p>
+          <p>sum: 10</p>
+          <div><p>render item 1</p></div>
+        </div>
+        <style>
+        .div-1gao8uk {
+  color: red;
+}
+        </style>
+      `);
+});

example/app-counter.js ADDED Viewed

@@ -0,0 +1,91 @@
+import { createElement, html, css, object, number, string } from '../element.js';
+const name = () => 'app-counter';
+const attrTypes = () => ({
+  name: string().required(),
+  meta: object({
+    start: number(),
+  }),
+});
+const stateTypes = () => ({
+  count: number()
+    .required()
+    .default((attrs) => attrs.meta?.start || 0),
+});
+const computedTypes = () => ({
+  sum: number()
+    .required()
+    .compute('count', (count) => {
+      return count + 10;
+    }),
+});
+const styles = css({
+  title: {
+    fontSize: '20px',
+    marginBottom: '0.5rem',
+    textAlign: 'center',
+  },
+  span: {
+    fontSize: '16px',
+  },
+  container: {
+    display: 'flex',
+    flex: 1,
+    flexDirection: 'row',
+    fontSize: '32px',
+    color: 'rgba(55, 65, 81, 1)',
+  },
+  mx: {
+    marginLeft: '5rem',
+    marginRight: '5rem',
+    fontSize: '30px',
+    fontFamily: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace`,
+  },
+  button: {
+    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, meta } = attrs;
+  const { count, setCount } = state;
+  const { sum } = computed;
+  return html`
+    <div>
+      <div class=${styles.title}>
+        Counter: ${name}
+        <span class=${styles.span}>starts at ${meta?.start}</span>
+      </div>
+      <div class=${styles.container}>
+        <button class=${styles.button} @click=${() => setCount((v) => v - 1)}>-</button>
+        <div class=${styles.mx}>
+          <h1>${count}</h1>
+        </div>
+        <button class=${styles.button} @click=${() => setCount((v) => v + 1)}>+</button>
+      </div>
+      <div class=${styles.mx}>
+        <h1>Sum: ${sum}</h1>
+      </div>
+    </div>
+  `;
+};
+export default createElement({
+  name,
+  attrTypes,
+  stateTypes,
+  computedTypes,
+  styles,
+  render,
+});

example/index.js ADDED Viewed

@@ -0,0 +1,38 @@
+import { html, css } from '../element.js';
+import { createPage } from '../page.js';
+import './app-counter.js';
+const route = () => {
+  return '/counter';
+};
+const styles = css({
+  center: {
+    display: 'flex',
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+const head = ({ config }) => {
+  return html`
+    <title>${config.title}</title>
+    <link href="/styles.css" rel="stylesheet" as="style" />
+  `;
+};
+const body = () => {
+  return html`
+    <div class=${styles.center}>
+      <app-counter name="1" meta="{'start': 5}"></app-counter>
+    </div>
+  `;
+};
+export default createPage({
+  route,
+  styles,
+  head,
+  body,
+});

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>`));

example/server.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`,
+  '/styles.css': `${__dirname}/styles.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/styles.css ADDED Viewed

@@ -0,0 +1,567 @@
+/*! tailwindcss v2.1.2 | MIT License | https://tailwindcss.com */
+/*! 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;
+}
+/**
+Use a more readable tab size (opinionated).
+*/
+html {
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+}
+/**
+1. Correct the line height in all browsers.
+2. Prevent adjustments of font size after orientation changes in iOS.
+*/
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+/*
+Sections
+========
+*/
+/**
+Remove the margin in all browsers.
+*/
+body {
+  margin: 0;
+}
+/**
+Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
+*/
+body {
+  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';
+}
+/*
+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] {
+  -webkit-text-decoration: underline dotted;
+  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.
+1. Remove the inheritance of text transform in Firefox.
+*/
+button,
+select {
+  /* 1 */
+  /* 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;
+}
+/**
+ * Manually forked from SUIT CSS Base: https://github.com/suitcss/base
+ * A thin layer on top of normalize.css that provides a starting point more
+ * suitable for web applications.
+ */
+/**
+ * Removes the default spacing and border for appropriate elements.
+ */
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+  margin: 0;
+}
+button {
+  /* background-color: transparent; */
+  kground-image: none;
+  /* background-image: none; */
+}
+/**
+ * Work around a Firefox/IE bug where the transparent `button` background
+ * results in a loss of the default `button` focus styles.
+ */
+button:focus {
+  outline: 1px dotted;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+ol,
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+/**
+ * Tailwind custom reset styles
+ */
+/**
+ * 1. Use the user's configured `sans` font-family (with Tailwind's default
+ *    sans-serif font stack as a fallback) as a sane default.
+ * 2. Use Tailwind's default "normal" line-height so the user isn't forced
+ *    to override it to ensure consistency even when using the default theme.
+ */
+html {
+  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'; /* 1 */
+  line-height: 1.5; /* 2 */
+}
+/**
+ * Inherit font-family and line-height from `html` so users can set them as
+ * a class directly on the `html` element.
+ */
+body {
+  font-family: inherit;
+  line-height: inherit;
+}
+/**
+ * 1. Prevent padding and border from affecting element width.
+ *
+ *    We used to set this in the html element and inherit from
+ *    the parent element for everything else. This caused issues
+ *    in shadow-dom-enhanced elements like <details> where the content
+ *    is wrapped by a div with box-sizing set to `content-box`.
+ *
+ *    https://github.com/mozdevs/cssremedy/issues/4
+ *
+ *
+ * 2. Allow adding a border to an element by just adding a border-width.
+ *
+ *    By default, the way the browser specifies that an element should have no
+ *    border is by setting it's border-style to `none` in the user-agent
+ *    stylesheet.
+ *
+ *    In order to easily add borders to elements by just setting the `border-width`
+ *    property, we change the default border-style for all elements to `solid`, and
+ *    use border-width to hide them instead. This way our `border` utilities only
+ *    need to set the `border-width` property instead of the entire `border`
+ *    shorthand, making our border utilities much more straightforward to compose.
+ *
+ *    https://github.com/tailwindcss/tailwindcss/pull/116
+ */
+*,
+::before,
+::after {
+  box-sizing: border-box; /* 1 */
+  border-width: 0; /* 2 */
+  border-style: solid; /* 2 */
+  border-color: #e5e7eb; /* 2 */
+}
+/*
+ * Ensure horizontal rules are visible by default
+ */
+hr {
+  border-top-width: 1px;
+}
+/**
+ * Undo the `border-style: none` reset that Normalize applies to images so that
+ * our `border-{width}` utilities have the expected effect.
+ *
+ * The Normalize reset is unnecessary for us since we default the border-width
+ * to 0 on all elements.
+ *
+ * https://github.com/tailwindcss/tailwindcss/issues/362
+ */
+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;
+}
+table {
+  border-collapse: collapse;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+/**
+ * Reset links to optimize for opt-in styling instead of
+ * opt-out.
+ */
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+/**
+ * Reset form element properties that are easy to forget to
+ * style explicitly so you don't inadvertently introduce
+ * styles that deviate from your design system. These styles
+ * supplement a partial reset that is already applied by
+ * normalize.css.
+ */
+button,
+input,
+optgroup,
+select,
+textarea {
+  padding: 0;
+  line-height: inherit;
+  color: inherit;
+}
+/**
+ * Use the configured 'mono' font family for elements that
+ * are expected to be rendered with a monospace font, falling
+ * back to the system monospace stack if there is no configured
+ * 'mono' font family.
+ */
+pre,
+code,
+kbd,
+samp {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+}
+/**
+ * Make replaced elements `display: block` by default as that's
+ * the behavior you want almost all of the time. Inspired by
+ * CSS Remedy, with `svg` added as well.
+ *
+ * https://github.com/mozdevs/cssremedy/issues/14
+ */
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block;
+  vertical-align: middle;
+}
+/**
+ * Constrain images and videos to the parent width and preserve
+ * their intrinsic aspect ratio.
+ *
+ * https://github.com/mozdevs/cssremedy/issues/14
+ */
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+html {
+  width: 100%;
+  height: 100%;
+}
+body {
+  background-color: white;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 0%;
+  min-width: 320px;
+  margin: 0px;
+  min-height: 100vh;
+  line-height: 1.4;
+  font-weight: 400;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  color: rgba(44, 62, 80, 1);
+  direction: ltr;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+}

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

File without changes

package-lock.json CHANGED Viewed

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

package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "atoms-element",
-  "version": "1.2.1",
+  "version": "2.1.0",
   "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": [
     "pyros.sh",
@@ -10,28 +10,24 @@
     "server side rendering",
     "client",
     "server",
-    "hooks",
     "react",
-    "lit-html",
+    "lit-html"
-    "lit-html-server",
-    "haunted",
-    "tonic",
-    "atomico",
-    "fuco"
   ],
-  "license": "MIT",
-  "main": "src/index.js",
   "files": [
+    "lit-html.js",
+    "element.js",
+    "element.d.ts",
-    "src",
+    "page.js",
-    "example"
+    "page.d.ts"
   ],
-  "typings": "src/index.d.ts",
+  "license": "MIT",
   "author": "pyros.sh",
   "type": "module",
   "engines": {
     "node": ">=14.0.0"
   },
   "scripts": {
+    "example": "node example/server.js",
     "test": "NODE_OPTIONS=--experimental-vm-modules jest"
   },
   "devDependencies": {

page.d.ts ADDED Viewed

@@ -0,0 +1,26 @@
+export declare 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 declare type Data = any;
+export declare type Item = any;
+export class Page {
+  config: Config;
+  data: Data;
+  item: Item;
+  route: () => string;
+  styles: () => string;
+  head: () => string;
+  body: () => string;
+}

page.js ADDED Viewed

@@ -0,0 +1,61 @@
+import parse5 from 'parse5';
+import { AtomsElement, render } from './element.js';
+export const 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);
+    }
+    if (child.childNodes) {
+      find(child);
+    }
+  }
+};
+export const ssr = (template) => {
+  const text = render(template);
+  const h = parse5.parseFragment(text);
+  find(h);
+  return parse5.serialize(h);
+};
+export const createPage = ({ route, datapaths, head, body, styles }) => {
+  return ({ config, data, item, headScript, bodyScript }) => {
+    const isProd = process.env.NODE_ENV === 'production';
+    const props = { config, data, item };
+    const headHtml = ssr(head(props));
+    const bodyHtml = ssr(body(props));
+    return `
+      <!DOCTYPE html>
+      <html lang="${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>
+            ${styles.toString()}
+          </style>
+          ${headScript}
+        </head>
+        <body>
+          ${bodyHtml}
+          <script>
+            window.__DEV__ = ${!isProd};
+            window.config = ${JSON.stringify(config)};
+            window.data = ${JSON.stringify(data)};
+            window.item = ${JSON.stringify(item)};
+          </script>
+          ${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 { createPage } from './page.js';
+test('Page', () => {
+  const route = () => {
+    const langPart = this.config.lang === 'en' ? '' : `/${this.config.lang}`;
+    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} />
+    `;
+  };
+  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,
+    styles,
+  });
+  const scripts = '<script type="module"><script>';
+  const res = renderPage({ config: { lang: 'en', title: '123' }, headScript: scripts, bodyScript: scripts });
+  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-1gao8uk {
+  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>
+  `);
+});

readme.md CHANGED Viewed

@@ -3,12 +3,10 @@
 [![Version](https://img.shields.io/npm/v/atoms-element?style=flat-square&color=blue)](https://www.npmjs.com/package/atoms-element)
 ![Test](https://github.com/pyros2097/atoms-element/actions/workflows/main.yml/badge.svg)
-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. Data props are attributes on the custom element by default so its easier to debug and functions/handlers are
-methods attached to the element.
+A simple web component library for defining your custom elements. It works on both client and server. It follows the same principles of react. Data props are attributes on the custom element by default so its easier to debug and functions/handlers are attached to the element.
 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
+[haunted](https://github.com/matthewp/haunted) as it was react-like with hooks but was lost on how to implement server rendering. Libraries like
 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).
@@ -23,7 +21,7 @@ After going through all these libraries,
 5. [Atomico](https://github.com/atomicojs/atomico)
 6. [fuco](https://github.com/wtnbass/fuco)
-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 web component for now. Atomico has implemented proper SSR with hydration so I might need to look into that in the future or
+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.
 ## Installation
@@ -35,38 +33,102 @@ npm i atoms-element
 ## Example
 ```js
-import { defineElement, html, object, number, string, useState } from 'atoms-element';
+import { createElement, html, css, object, number, string } from 'atoms-element/element.js';
-import { ssr } from 'atoms-element/src/ssr.js';
+import { ssr } from 'atoms-element/page.js';
+const name = () => 'app-counter';
-const attrTypes = {
+const attrTypes = () => ({
-  name: string.isRequired,
+  name: string().required(),
   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;
+    }),
+});
+const styles = css({
+  title: {
+    fontSize: '20px',
+    marginBottom: '0.5rem',
+    textAlign: 'center',
+  },
+  span: {
+    fontSize: '16px',
+  },
+  container: {
+    display: 'flex',
+    flex: 1,
+    flexDirection: 'row',
+    fontSize: '32px',
+    color: 'rgba(55, 65, 81, 1)',
+  },
+  mx: {
+    marginLeft: '5rem',
+    marginRight: '5rem',
+    fontSize: '30px',
+    fontFamily: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace`,
+  },
+  button: {
+    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 Counter = ({ name, meta }) => {
+const render = ({ attrs, state, computed }) => {
+  const { name, meta } = attrs;
-  const [count, setCount] = useState(meta?.start || 0);
+  const { count, setCount } = state;
+  const { sum } = computed;
   return html`
     <div>
+      <div class=${styles.title}>
+        Counter: ${name}
-      <div class="font-bold mb-2">Counter: ${name}</div>
+        <span class=${styles.span}>starts at ${meta?.start}</span>
+      </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>
         </div>
-        <button @click=${() => setCount((v) => v + 1)}>+</button>
+        <button class=${styles.button} @click=${() => setCount((v) => v + 1)}>+</button>
+      </div>
+      <div class=${styles.mx}>
+        <h1>Sum: ${sum}</h1>
       </div>
     </div>
   `;
 };
-defineElement('app-counter', Counter, attrTypes);
+export default createElement({
+  name,
+  attrTypes,
+  stateTypes,
+  computedTypes,
+  styles,
+  render,
+});
 console.log(ssr(html`<app-counter name="1"></app-counter>`));
 ```
 This works in node, to make it work in the client side you need to either compile atoms-element using esintall or esbuild to an esm module and then
 rewrite the path from 'atoms-element' to 'web_modules/atoms-element/index.js' or if you can host the node_modules in a web server and change the path to
-the import 'node_modules/atoms-element/index.js'
+the import 'atoms-element/element.js'

src/index.d.ts DELETED Viewed

@@ -1,60 +0,0 @@
-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 Config = {
-  version: string
-  url: string
-  image: string
-  author: string
-  languages: Array<string>
-  title: string
-  description: string
-  keywords: string
-  categories: Array<string>
-  tags: Array<string>
-  strings: {[key: string]: string}
-}
-export declare 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 declare const useState: <S>(initialState: S | (() => S)) => [S, Dispatch<SetStateAction<S>>];
-export declare const useEffect: (effect: EffectCallback, deps?: DependencyList) => void;
-export declare const useLayoutEffect: (effect: EffectCallback, deps?: DependencyList) => void;
-export declare const useReducer: <R extends ReducerWithoutAction<any>, I>(
-  reducer: R,
-  initializerArg: I,
-  initializer: (arg: I) => ReducerStateWithoutAction<R>
-) => [ReducerStateWithoutAction<R>, DispatchWithoutAction];
-export declare const useCallback: <T extends (...args: any[]) => any>(callback: T, deps: DependencyList) => T;
-export declare const useMemo: <T>(factory: () => T, deps: DependencyList | undefined) => T;
-// function useImperativeHandle<T, R extends T>(ref: Ref<T>|undefined, init: () => R, deps?: DependencyList): void;
-export declare const useRef: <T>(initialValue: T | null | undefined) => MutableRefObject<T>;
-export declare const useConfig: () => Config;
-export declare const useLocation: () => Location;

src/index.js DELETED Viewed

@@ -1,497 +0,0 @@
-import { html, render as litRender, directive, NodePart, AttributePart, PropertyPart, isPrimitive } from './lit-html.js';
-const registry = {};
-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 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 render = 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 += render(v);
-          });
-        } else if (type === 'object') {
-          // TemplateResult
-          if (value.strings && value.type === 'html') {
-            js += text;
-            js += render(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);
-        }
-      });
-      return js;
-    };
-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 previousClassesCache = new WeakMap();
-export const classMap = isBrowser
-  ? directive((classInfo) => (part) => {
-      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();
-      }
-    })
-  : (classes) => {
-      let value = '';
-      for (const key in classes) {
-        if (classes[key]) {
-          value += `${value.length ? ' ' : ''}${key}`;
-        }
-      }
-      return value;
-    };
-let currentCursor;
-let currentComponent;
-let logError = (msg) => {
-  console.warn(msg);
-};
-export const setLogError = (fn) => {
-  logError = fn;
-};
-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 __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);
-export const useConfig = () => {
-  if (isBrowser) {
-    return window.config;
-  }
-  return global.config;
-};
-export const useLocation = () => {
-  if (isBrowser) {
-    return window.location;
-  }
-  return global.location;
-};
-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 window.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());
-const BaseElement = isBrowser ? window.HTMLElement : class {};
-export class AtomsElement extends BaseElement {
-  constructor() {
-    super();
-    this._dirty = false;
-    this._connected = false;
-    this.hooks = {
-      values: [],
-      deps: [],
-      effects: [],
-      layoutEffects: [],
-      cleanup: [],
-    };
-    this.props = {};
-    this.attrTypes = {};
-    this.name = '';
-    this.renderer = () => {};
-    this.attrTypes = {};
-    this.funcKeys = [];
-    this.attrTypesMap = {};
-  }
-  connectedCallback() {
-    this._connected = true;
-    if (isBrowser) {
-      this.update();
-    } else {
-      __setCurrent__(this);
-    }
-  }
-  disconnectedCallback() {
-    this._connected = false;
-    let cleanup;
-    while ((cleanup = this.hooks.cleanup.shift())) {
-      cleanup();
-    }
-  }
-  attributeChangedCallback(key, oldValue, newValue) {
-    const attr = this.attrTypesMap[key];
-    if (!attr) {
-      return;
-    }
-    const data = attr.propType.parse(newValue);
-    attr.propType.validate(`<${this.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() {
-    if (isBrowser) {
-      this.funcKeys.forEach((key) => {
-        this.props[key] = this[key];
-      });
-      render(this.renderer(this.props), this);
-    } else {
-      __setCurrent__(this);
-      return render(this.renderer(this.props), this);
-    }
-  }
-}
-export const getElement = (name) => registry[name];
-export function defineElement(name, fn, attrTypes = {}) {
-  const keys = Object.keys(attrTypes);
-  registry[name] = {
-    fn,
-    attrTypes,
-    Clazz: class extends AtomsElement {
-      constructor(attrs) {
-        super();
-        this.name = name;
-        this.renderer = fn;
-        this.attrTypes = attrTypes;
-        this.funcKeys = keys.filter((key) => attrTypes[key].type === 'function');
-        this.attrTypesMap = keys
-          .filter((key) => attrTypes[key].type !== 'function')
-          .reduce((acc, key) => {
-            acc[key.toLowerCase()] = {
-              propName: key,
-              propType: attrTypes[key],
-            };
-            return acc;
-          }, {});
-        if (attrs) {
-          attrs.forEach((item) => {
-            this.attributeChangedCallback(item.name, null, item.value);
-          });
-        }
-      }
-      static get observedAttributes() {
-        return keys.map((k) => k.toLowerCase());
-      }
-    },
-  };
-  if (isBrowser) {
-    if (window.customElements.get(name)) {
-      return;
-    } else {
-      window.customElements.define(name, registry[name].Clazz);
-    }
-  }
-}

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);
-};

test/index.test.js DELETED Viewed

@@ -1,266 +0,0 @@
-import { expect, test, jest } from '@jest/globals';
-import {
-  html,
-  render,
-  number,
-  boolean,
-  string,
-  array,
-  object,
-  setLogError,
-  defineElement,
-  getElement,
-  useConfig,
-  useLocation,
-  useState,
-  unsafeHTML,
-  classMap,
-} from '../src/index.js';
-const logMock = jest.fn();
-setLogError(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('useConfig', async () => {
-  expect(useConfig()).toBe(undefined);
-  global.config = {};
-  expect(useConfig()).toMatchObject({});
-});
-test('useLocation', async () => {
-  expect(useLocation()).toBe(undefined);
-  global.location = {};
-  expect(useLocation()).toMatchObject({});
-});
-test('render', async () => {
-  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 = await render(template);
-  expect(res).toEqual(`
-    <div>
-      <app-counter name="123" class="abc high" age="1" details1="{'name':'123','address':{'street':'1'}}" items="[1,2,3]"></app-counter>
-    </div>
-  `);
-});
-test('render attribute keys', async () => {
-  const template = html`
-    <div>
-      <app-counter name="123" perPage="1"></app-counter>
-    </div>
-  `;
-  const res = await render(template);
-  expect(res).toEqual(`
-    <div>
-      <app-counter name="123" perPage="1"></app-counter>
-    </div>
-  `);
-});
-test('render attributes within quotes', async () => {
-  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 = await render(template);
-  expect(res).toEqual(`
-    <div>
-      <app-counter name="123" class="high" age="1" details1="{'name':'123','address':{'street':'1'}}" items="[1,2,3]"></app-counter>
-    </div>
-  `);
-});
-test('render unsafeHTML', async () => {
-  const textContent = `<div><p class="123">this is unsafe</p></div>`;
-  const template = html` <div>${unsafeHTML(textContent)}</div> `;
-  const res = await render(template);
-  expect(res).toEqual(` <div><div><p class="123">this is unsafe</p></div></div> `);
-});
-test('render classMap show', async () => {
-  const hide = false;
-  const template = html` <div class="abc ${classMap({ show: !hide })}"></div> `;
-  const res = await render(template);
-  expect(res).toEqual(` <div class="abc show"></div> `);
-});
-test('render classMap hide', async () => {
-  const hide = true;
-  const template = html` <div class="abc ${classMap({ show: !hide })}"></div> `;
-  const res = await render(template);
-  expect(res).toEqual(` <div class="abc "></div> `);
-});
-test('render single template', async () => {
-  const template = html` <div>${html`NoCountry ${false}`}</div> `;
-  const res = await render(template);
-  expect(res).toEqual(` <div>NoCountry false</div> `);
-});
-test('render multi template', async () => {
-  const template = html` <div>${[1, 2].map((v) => html` <app-item meta="${{ index: v }}" @click=${() => {}} .handleClick=${() => {}}></app-item>`)}</div> `;
-  const res = await render(template);
-  expect(res).toEqual(` <div> <app-item meta="{'index':1}"></app-item> <app-item meta="{'index':2}"></app-item></div> `);
-});
-test('defineElement', async () => {
-  const attrTypes = {
-    perPage: string.isRequired,
-    address: object({
-      street: string.isRequired,
-    }).isRequired,
-  };
-  const AppItem = ({ perPage, address: { street } }) => {
-    const [count] = useState(0);
-    return html`
-      <div perPage=${perPage}>
-        <p>street: ${street}</p>
-        <p>count: ${count}</p>
-      </div>
-    `;
-  };
-  defineElement('app-item', AppItem, attrTypes);
-  const { Clazz } = getElement('app-item');
-  const instance = new Clazz([
-    { name: 'address', value: JSON.stringify({ street: '123' }).replace(/"/g, `'`) },
-    { name: 'perpage', value: '1' },
-  ]);
-  expect(Clazz.observedAttributes).toEqual(['perpage', 'address']);
-  const res = await instance.render();
-  expect(res).toEqual(`
-      <div perPage="1">
-        <p>street: 123</p>
-        <p>count: 0</p>
-      </div>
-    `);
-});

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