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.

00aa1505 — Peter John

improve ssr

Files changed (7) hide show

package.json +3 -4
readme.md +7 -4
src/index.d.ts +60 -0
src/index.js +248 -207
src/lit-html.js +93 -95
test/index.test.js +69 -16
test/setup.js +0 -2

package.json CHANGED Viewed

@@ -15,6 +15,7 @@
   ],
   "license": "MIT",
   "main": "src/index.js",
+  "typings": "src/index.d.ts",
   "author": "pyros.sh",
   "type": "module",
   "engines": {
@@ -27,8 +28,6 @@
     "jest": "^27.0.5"
   },
   "jest": {
-    "setupFilesAfterEnv": [
+    "transform": {}
-      "./test/setup.js"
-    ]
   }
-}
+}

readme.md CHANGED Viewed

@@ -21,14 +21,17 @@ npm i atoms-element
 ## Usage
 ```js
-import { defineElement, html, render, number } from 'atoms-element.js';
+import { defineElement, html, render, object, number, string } from 'atoms-element';
 const propTypes = {
   name: string.isRequired,
+  meta: object({
+    start: number,
+  }),
 };
-const Counter = ({ name }) => {
+const Counter = ({ name, meta }) => {
-  const [count, setCount] = useState(0);
+  const [count, setCount] = useState(meta?.start || 0);
   return html`
     <div>
@@ -46,5 +49,5 @@ const Counter = ({ name }) => {
 defineElement('app-counter', Counter, propTypes);
-render(html`<app-counter name="1"></app-counter>`, document.body);
+console.log(render(html`<app-counter name="1"></app-counter>`));
 ```

src/index.d.ts ADDED Viewed

@@ -0,0 +1,60 @@
+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 CHANGED Viewed

@@ -1,21 +1,20 @@
 import { html as litHtml, render as litRender, directive as litDirective, NodePart, AttributePart, PropertyPart, isPrimitive } from './lit-html.js';
 import { html as litServerHtml, directive as litServerDirective, isNodePart, isAttributePart, unsafePrefixString, renderToString } from './lit-html-server.js';
-export const registry = {};
+const registry = {};
-const isBrowser = typeof window.alert !== "undefined";
+const isBrowser = typeof window !== 'undefined';
 export const html = isBrowser ? litHtml : litServerHtml;
 export const render = isBrowser ? litRender : renderToString;
 export const directive = isBrowser ? litDirective : litServerDirective;
 const previousValues = new WeakMap();
-export const unsafeHTML = directive((value) => (part) => {
+export const unsafeHTML = directive(value => part => {
   if (isBrowser) {
     if (!(part instanceof NodePart)) {
       throw new Error('unsafeHTML can only be used in text bindings');
     }
     const previousValue = previousValues.get(part);
-    if (previousValue !== undefined && isPrimitive(value) &&
-      value === previousValue.value && part.value === previousValue.fragment) {
+    if (previousValue !== undefined && isPrimitive(value) && value === previousValue.value && part.value === previousValue.fragment) {
       return;
     }
     const template = document.createElement('template');
@@ -32,12 +31,10 @@ export const unsafeHTML = directive((value) => (part) => {
 });
 const previousClassesCache = new WeakMap();
-export const classMap = directive((classInfo) => (part) => {
+export const classMap = directive(classInfo => part => {
   if (isBrowser) {
-    if (!(part instanceof AttributePart) || (part instanceof PropertyPart) ||
-      part.committer.name !== 'class' || part.committer.parts.length > 1) {
+    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 ' +
+      throw new Error('The `classMap` directive must be used in the `class` attribute ' + 'and must be the only part in the attribute.');
-        'and must be the only part in the attribute.');
     }
     const { committer } = part;
     const { element } = committer;
@@ -46,13 +43,13 @@ export const classMap = directive((classInfo) => (part) => {
       // 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());
+      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) => {
+    previousClasses.forEach(name => {
       if (!(name in classInfo)) {
         classList.remove(name);
         previousClasses.delete(name);
@@ -67,8 +64,7 @@ export const classMap = directive((classInfo) => (part) => {
         if (value) {
           classList.add(name);
           previousClasses.add(name);
-        }
-        else {
+        } else {
           classList.remove(name);
           previousClasses.delete(name);
         }
@@ -81,7 +77,7 @@ export const classMap = directive((classInfo) => (part) => {
     if (!isAttributePart(part) || part.name !== 'class') {
       throw Error('The `classMap` directive can only be used in the `class` attribute');
     }
-    const classes = (classInfo);
+    const classes = classInfo;
     let value = '';
     for (const key in classes) {
       if (classes[key]) {
@@ -94,26 +90,25 @@ export const classMap = directive((classInfo) => (part) => {
 let currentCursor;
 let currentComponent;
+let logError = msg => {
+  console.warn(msg);
+};
-export const logError = (msg) => {
+export const setLogError = fn => {
-  if (window.logError) {
-    window.logError(msg);
+  logError = fn;
-  } else {
-    console.warn(msg);
-  }
+};
-}
 const checkRequired = (context, data) => {
   if (data === null || typeof data === 'undefined') {
     logError(`'${context}' Field is required`);
   }
-}
+};
-const checkPrimitive = (primitiveType) => {
+const checkPrimitive = primitiveType => {
   const common = {
     type: primitiveType,
-    parse: (attr) => attr,
+    parse: attr => attr,
-  }
+  };
   const validate = (context, data) => {
     if (data === null || typeof data === 'undefined') {
       return;
@@ -122,7 +117,7 @@ const checkPrimitive = (primitiveType) => {
     if (dataType !== primitiveType) {
       logError(`'${context}' Expected type '${primitiveType}' got type '${dataType}'`);
     }
-  }
+  };
   return {
     validate,
     ...common,
@@ -131,35 +126,35 @@ const checkPrimitive = (primitiveType) => {
       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
+    parse: attr => (attr ? JSON.parse(attr.replace(/'/g, `"`)) : null),
   };
-  return (innerType) => {
+  return innerType => {
     return {
       ...common,
       validate: (context, data) => {
         if (!data) {
           return;
         }
-        validate(innerType, context, data)
+        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');
@@ -171,7 +166,7 @@ export const object = checkComplex('object', (innerType, context, data) => {
   for (const key of Object.keys(innerType)) {
     const fieldValidator = innerType[key];
     const item = data[key];
-    fieldValidator.validate(`${context}.${key}`, item)
+    fieldValidator.validate(`${context}.${key}`, item);
   }
 });
 export const array = checkComplex('array', (innerType, context, data) => {
@@ -180,13 +175,12 @@ export const array = checkComplex('array', (innerType, context, data) => {
   }
   for (let i = 0; i < data.length; i++) {
     const item = data[i];
-    innerType.validate(`${context}[${i}]`, item)
+    innerType.validate(`${context}[${i}]`, item);
   }
 });
-export const func = checkComplex('function', (innerType, context, data) => {
+export const func = checkComplex('function', (innerType, context, data) => {});
-});
-export const hooks = (config) => {
+export const hooks = config => {
   const h = currentComponent.hooks;
   const c = currentComponent;
   const index = currentCursor++;
@@ -197,205 +191,252 @@ export const hooks = (config) => {
     h.values[index] = config.onupdate(h, c, index);
   }
   return h.values[index];
-}
-export const defaultHooks = () => ({
-  values: [],
-  deps: [],
-  effects: [],
-  layoutEffects: [],
-  cleanup: []
-});
+};
-export const __setCurrent__ = (c) => {
+export const __setCurrent__ = c => {
   currentComponent = c;
   currentCursor = 0;
-}
+};
-export const useDispatchEvent = (name) => hooks({
+export const useDispatchEvent = name =>
+  hooks({
-  oncreate: (_, c) => (data) => c.dispatchEvent(new CustomEvent(name, data))
+    oncreate: (_, c) => data => c.dispatchEvent(new CustomEvent(name, data)),
-});
+  });
-export const useRef = (initialValue) => hooks({
+export const useRef = initialValue =>
+  hooks({
-  oncreate: (_h, _c) => ({ current: initialValue })
+    oncreate: (_h, _c) => ({ current: initialValue }),
-});
+  });
-export const useState = (initialState) => hooks({
+export const useState = initialState =>
+  hooks({
-  oncreate: (h, c, i) => [
+    oncreate: (h, c, i) => [
-    typeof initialState === "function"
+      typeof initialState === 'function' ? initialState() : initialState,
-      ? initialState()
-      : initialState,
-    function setState(nextState) {
+      function setState(nextState) {
-      const state = h.values[i][0];
+        const state = h.values[i][0];
-      if (typeof nextState === "function") {
+        if (typeof nextState === 'function') {
-        nextState = nextState(state);
+          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 (!Object.is(state, nextState)) {
+      if (!deps || depsChanged(h.deps[i], deps)) {
-        h.values[i][0] = nextState;
+        h.deps[i] = deps || [];
-        c.update();
+        h.layoutEffects[i] = handler;
       }
-    }
+    },
-  ]
-});
+  });
-export const useReducer = (reducer, initialState) => hooks({
+export const useMemo = (fn, deps) =>
+  hooks({
-  oncreate: (h, c, i) => [
+    onupdate(h, _, i) {
-    initialState,
-    function dispatch(action) {
-      const state = h.values[i][0];
+      let value = h.values[i];
-      const nextState = reducer(state, action);
-      if (!Object.is(state, nextState)) {
+      if (!deps || depsChanged(h.deps[i], deps)) {
-        h.values[i][0] = nextState;
+        h.deps[i] = deps || [];
-        c.update();
+        value = fn();
       }
+      return value;
-    }
+    },
-  ]
-});
+  });
-const depsChanged = (prev, next) => prev == null || next.some((f, i) => !Object.is(f, prev[i]));
+export const useCallback = (callback, deps) => useMemo(() => callback, deps);
-export const useEffect = (handler, deps) => hooks({
+export const useConfig = () => {
-  onupdate(h, _, i) {
+  if (isBrowser) {
-    if (!deps || depsChanged(h.deps[i], deps)) {
-      h.deps[i] = deps || [];
+    return window.config;
-      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;
-    }
   }
+  return global.config;
-});
+};
-export const useMemo = (fn, deps) => hooks({
+export const useLocation = () => {
-  onupdate(h, _, i) {
+  if (isBrowser) {
-    let value = h.values[i];
-    if (!deps || depsChanged(h.deps[i], deps)) {
-      h.deps[i] = deps || [];
-      value = fn();
-    }
-    return value;
+    return window.location;
   }
+  return global.location;
-});
+};
-export const useCallback = (callback, deps) => useMemo(() => callback, deps);
 const batch = (runner, pick, callback) => {
   const q = [];
   const flush = () => {
     let p;
-    while ((p = pick(q)))
+    while ((p = pick(q))) callback(p);
-      callback(p);
   };
   const run = runner(flush);
-  return (c) => q.push(c) === 1 && run();
+  return c => q.push(c) === 1 && run();
 };
-const fifo = (q) => q.shift();
+const fifo = q => q.shift();
-const filo = (q) => q.pop();
+const filo = q => q.pop();
-const microtask = (flush) => {
+const microtask = flush => {
   return () => queueMicrotask(flush);
 };
-const task = (flush) => {
+const task = flush => {
   if (isBrowser) {
-    const ch = new MessageChannel();
+    const ch = new window.MessageChannel();
     ch.port1.onmessage = flush;
     return () => ch.port2.postMessage(null);
-  }
-  else {
+  } else {
     return () => setImmediate(flush);
   }
 };
-const enqueueLayoutEffects = batch(microtask, filo, c => c._flushEffects("layoutEffects"));
+const enqueueLayoutEffects = batch(microtask, filo, c => c._flushEffects('layoutEffects'));
-const enqueueEffects = batch(task, filo, c => c._flushEffects("effects"));
+const enqueueEffects = batch(task, filo, c => c._flushEffects('effects'));
 const enqueueUpdate = batch(microtask, fifo, c => c._performUpdate());
+const BaseElement = isBrowser ? window.HTMLElement : class {};
-export function defineElement(name, fn, propTypes = {}) {
+export class AtomsElement extends BaseElement {
+  constructor() {
+    super();
+    this._dirty = false;
-  registry[name] = fn;
+    this._connected = false;
-  const keys = Object.keys(propTypes);
-  const funcKeys = keys.filter((key) => propTypes[key].type === 'function');
-  const attributes = keys.filter((key) => propTypes[key].type !== 'function').reduce((acc, key) => {
-    acc[key.toLowerCase()] = {
+    this.hooks = {
+      values: [],
+      deps: [],
-      propName: key,
+      effects: [],
-      propType: propTypes[key],
+      layoutEffects: [],
+      cleanup: [],
     };
-    return acc;
+    this.props = {};
-  }, {});
+    this.attrTypes = {};
+    this.name = '';
+    this.renderer = () => {};
+    this.attrTypes = {};
+    this.funcKeys = [];
+    this.attrTypesMap = {};
+  }
+  connectedCallback() {
+    this._connected = true;
-  if (isBrowser) {
+    if (isBrowser) {
-    if (customElements.get(name)) {
+      this.update();
-      return;
+    } else {
+      __setCurrent__(this);
     }
-    customElements.define(name, class extends HTMLElement {
+  }
-      constructor() {
+  disconnectedCallback() {
-        super(...arguments);
-        this._dirty = false;
-        this._connected = false;
+    this._connected = false;
+    let cleanup;
-        this.hooks = defaultHooks();
+    while ((cleanup = this.hooks.cleanup.shift())) {
-        this.props = {};
+      cleanup();
-        this.renderer = fn;
-      }
+    }
-      connectedCallback() {
-        this._connected = true;
-        this.update();
-      }
+  }
-      disconnectedCallback() {
-        this._connected = false;
-        let cleanup;
-        while ((cleanup = this.hooks.cleanup.shift())) {
-          cleanup();
-        }
-      }
-      static get observedAttributes() {
+  attributeChangedCallback(key, oldValue, newValue) {
-        return Object.keys(attributes);
+    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() {
-      attributeChangedCallback(key, oldValue, newValue) {
+    if (this._dirty) {
+      return;
+    }
-        const attr = attributes[key];
+    this._dirty = true;
-        const data = attr.propType.parse(newValue);
-        attr.propType.validate(`<${name}> ${key}`, data);
-        this.props[attr.propName] = data;
+    enqueueUpdate(this);
+  }
+  _performUpdate() {
-        if (this._connected) {
+    if (!this._connected) {
+      return;
+    }
+    __setCurrent__(this);
-          this.update();
+    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];
       }
+    }
+  }
-      update() {
+  render() {
-        if (this._dirty) {
+    if (isBrowser) {
+      this.funcKeys.forEach(key => {
+        this.props[key] = this[key];
+      });
+      render(this.renderer(this.props), this);
-          return;
+    } else {
+      __setCurrent__(this);
+      return render(this.renderer(this.props), this);
-        }
+    }
-        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++) {
+export const getElement = name => registry[name];
-          if (effects[i]) {
-            cleanups[i] && cleanups[i]();
-            const cleanup = effects[i]();
-            if (cleanup) {
-              cleanups[i] = cleanup;
-            }
-            delete effects[i];
-          }
-        }
-      }
+export function defineElement(name, fn, attrTypes = {}) {
+  const keys = Object.keys(attrTypes);
+  registry[name] = class extends AtomsElement {
+    constructor(attrs) {
-      render() {
+      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) {
-        funcKeys.forEach((key) => {
+        attrs.forEach(item => {
-          this.props[key] = this[key]
+          this.attributeChangedCallback(item.name, null, item.value);
-        })
+        });
-        render(this.renderer(this.props), this);
       }
+    }
+    static get observedAttributes() {
+      return keys;
+    }
-    });
+  };
+  if (isBrowser) {
+    if (window.customElements.get(name)) {
+      return;
+    }
+    window.customElements.define(name, registry[name]);
   }
 }
-export const getElement = (name) => registry[name];

src/lit-html.js CHANGED Viewed

@@ -52,12 +52,14 @@ const directives = new WeakMap();
  *   }
  * });
  */
-const directive = (f) => ((...args) => {
+const directive =
+  f =>
+  (...args) => {
-  const d = f(...args);
+    const d = f(...args);
-  directives.set(d, true);
+    directives.set(d, true);
-  return d;
+    return d;
-});
+  };
-const isDirective = (o) => {
+const isDirective = o => {
   return typeof o === 'function' && directives.has(o);
 };
@@ -77,10 +79,7 @@ const isDirective = (o) => {
 /**
  * True if the custom elements polyfill is in use.
  */
-const isCEPolyfill = typeof window !== 'undefined' &&
+const isCEPolyfill = typeof window !== 'undefined' && window.customElements != null && window.customElements.polyfillWrapFlushCallback !== undefined;
-  window.customElements != null &&
-  window.customElements.polyfillWrapFlushCallback !==
-  undefined;
 /**
  * Reparents nodes, starting from `start` (inclusive) to `end` (exclusive),
  * into another container (could be the same container), before `before`. If
@@ -173,7 +172,10 @@ class Template {
     let lastPartIndex = 0;
     let index = -1;
     let partIndex = 0;
+    const {
+      strings,
-    const { strings, values: { length } } = result;
+      values: { length },
+    } = result;
     while (partIndex < length) {
       const node = walker.nextNode();
       if (node === null) {
@@ -223,8 +225,7 @@ class Template {
           stack.push(node);
           walker.currentNode = node.content;
         }
-      }
-      else if (node.nodeType === 3 /* Node.TEXT_NODE */) {
+      } else if (node.nodeType === 3 /* Node.TEXT_NODE */) {
         const data = node.data;
         if (data.indexOf(marker) >= 0) {
           const parent = node.parentNode;
@@ -237,12 +238,10 @@ class Template {
             let s = strings[i];
             if (s === '') {
               insert = createMarker();
-            }
-            else {
+            } else {
               const match = lastAttributeNameRegex.exec(s);
               if (match !== null && endsWith(match[2], boundAttributeSuffix)) {
-                s = s.slice(0, match.index) + match[1] +
-                  match[2].slice(0, -boundAttributeSuffix.length) + match[3];
+                s = s.slice(0, match.index) + match[1] + match[2].slice(0, -boundAttributeSuffix.length) + match[3];
               }
               insert = document.createTextNode(s);
             }
@@ -254,15 +253,13 @@ class Template {
           if (strings[lastIndex] === '') {
             parent.insertBefore(createMarker(), node);
             nodesToRemove.push(node);
-          }
-          else {
+          } else {
             node.data = strings[lastIndex];
           }
           // We have a part for each match found
           partIndex += lastIndex;
         }
-      }
-      else if (node.nodeType === 8 /* Node.COMMENT_NODE */) {
+      } else if (node.nodeType === 8 /* Node.COMMENT_NODE */) {
         if (node.data === marker) {
           const parent = node.parentNode;
           // Add a new marker node to be the startNode of the Part if any of
@@ -279,14 +276,12 @@ class Template {
           // Else, we can remove it to save future costs.
           if (node.nextSibling === null) {
             node.data = '';
-          }
-          else {
+          } else {
             nodesToRemove.push(node);
             index--;
           }
           partIndex++;
-        }
-        else {
+        } else {
           let i = -1;
           while ((i = node.data.indexOf(marker, i + 1)) !== -1) {
             // Comment node has a binding marker inside, make an inactive part
@@ -309,7 +304,7 @@ const endsWith = (str, suffix) => {
   const index = str.length - suffix.length;
   return index >= 0 && str.slice(index) === suffix;
 };
-const isTemplatePartActive = (part) => part.index !== -1;
+const isTemplatePartActive = part => part.index !== -1;
 // Allows `document.createComment('')` to be renamed for a
 // small manual size-savings.
 const createMarker = () => document.createComment('');
@@ -419,9 +414,7 @@ class TemplateInstance {
     // The Custom Elements v1 polyfill supports upgrade(), so the order when
     // polyfilled is the more ideal: Clone, Process, Adopt, Upgrade, Update,
     // Connect.
-    const fragment = isCEPolyfill ?
-      this.template.element.content.cloneNode(true) :
-      document.importNode(this.template.element.content, true);
+    const fragment = isCEPolyfill ? this.template.element.content.cloneNode(true) : document.importNode(this.template.element.content, true);
     const stack = [];
     const parts = this.template.parts;
     // Edge needs all 4 parameters present; IE11 needs 3rd parameter to be null
@@ -461,8 +454,7 @@ class TemplateInstance {
         const part = this.processor.handleTextExpression(this.options);
         part.insertAfterNode(node.previousSibling);
         this.__parts.push(part);
-      }
-      else {
+      } else {
         this.__parts.push(...this.processor.handleAttributeExpressions(node, part.name, part.strings, this.options));
       }
       partIndex++;
@@ -496,8 +488,7 @@ class TemplateInstance {
  * before any untrusted expressions have been mixed in. Therefor it is
  * considered safe by construction.
  */
-const policy = window.trustedTypes &&
-  trustedTypes.createPolicy('lit-html', { createHTML: (s) => s });
+const policy = typeof window !== 'undefined' && window.trustedTypes && trustedTypes.createPolicy('lit-html', { createHTML: s => s });
 const commentMarker = ` ${marker} `;
 /**
  * The return type of `html`, which holds a Template and the values from
@@ -540,8 +531,7 @@ class TemplateResult {
       // We're in comment position if we have a comment open with no following
       // comment close. Because <-- can appear in an attribute value there can
       // be false positives.
-      isCommentBinding = (commentOpen > -1 || isCommentBinding) &&
+      isCommentBinding = (commentOpen > -1 || isCommentBinding) && s.indexOf('-->', commentOpen + 1) === -1;
-        s.indexOf('-->', commentOpen + 1) === -1;
       // Check to see if we have an attribute-like sequence preceding the
       // expression. This can match "name=value" like structures in text,
       // comments, and attribute values, so there can be false-positives.
@@ -553,14 +543,11 @@ class TemplateResult {
         // <!-- foo=${'bar'}--> are handled correctly in the attribute branch
         // below.
         html += s + (isCommentBinding ? commentMarker : nodeMarker);
-      }
-      else {
+      } else {
         // For attributes we use just a marker sentinel, and also append a
         // $lit$ suffix to the name to opt-out of attribute-specific parsing
         // that IE and Edge do for style and certain SVG attributes.
-        html += s.substr(0, attributeMatch.index) + attributeMatch[1] +
+        html += s.substr(0, attributeMatch.index) + attributeMatch[1] + attributeMatch[2] + boundAttributeSuffix + attributeMatch[3] + marker;
-          attributeMatch[2] + boundAttributeSuffix + attributeMatch[3] +
-          marker;
       }
     }
     html += this.strings[l];
@@ -614,14 +601,15 @@ class SVGTemplateResult extends TemplateResult {
  * subject to an additional IP rights grant found at
  * http://polymer.github.io/PATENTS.txt
  */
-const isPrimitive = (value) => {
+const isPrimitive = value => {
-  return (value === null ||
-    !(typeof value === 'object' || typeof value === 'function'));
+  return value === null || !(typeof value === 'object' || typeof value === 'function');
 };
-const isIterable = (value) => {
+const isIterable = value => {
+  return (
-  return Array.isArray(value) ||
+    Array.isArray(value) ||
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    !!(value && value[Symbol.iterator]);
+    !!(value && value[Symbol.iterator])
+  );
 };
 /**
  * Writes attribute values to the DOM for a group of AttributeParts bound to a
@@ -679,8 +667,7 @@ class AttributeCommitter {
         const v = part.value;
         if (isPrimitive(v) || !isIterable(v)) {
           text += typeof v === 'string' ? v : String(v);
-        }
-        else {
+        } else {
           for (const t of v) {
             text += typeof t === 'string' ? t : String(t);
           }
@@ -772,8 +759,8 @@ class NodePart {
    * This part must be empty, as its contents are not automatically moved.
    */
   appendIntoPart(part) {
-    part.__insert(this.startNode = createMarker());
+    part.__insert((this.startNode = createMarker()));
-    part.__insert(this.endNode = createMarker());
+    part.__insert((this.endNode = createMarker()));
   }
   /**
    * Inserts this part after the `ref` part.
@@ -781,7 +768,7 @@ class NodePart {
    * This part must be empty, as its contents are not automatically moved.
    */
   insertAfterPart(ref) {
-    ref.__insert(this.startNode = createMarker());
+    ref.__insert((this.startNode = createMarker()));
     this.endNode = ref.endNode;
     ref.endNode = this.startNode;
   }
@@ -805,21 +792,16 @@ class NodePart {
       if (value !== this.value) {
         this.__commitText(value);
       }
-    }
-    else if (value instanceof TemplateResult) {
+    } else if (value instanceof TemplateResult) {
       this.__commitTemplateResult(value);
-    }
-    else if (value instanceof Node) {
+    } else if (value instanceof Node) {
       this.__commitNode(value);
-    }
-    else if (isIterable(value)) {
+    } else if (isIterable(value)) {
       this.__commitIterable(value);
-    }
-    else if (value === nothing) {
+    } else if (value === nothing) {
       this.value = nothing;
       this.clear();
-    }
-    else {
+    } else {
       // Fallback, will render the string representation
       this.__commitText(value);
     }
@@ -841,25 +823,21 @@ class NodePart {
     // If `value` isn't already a string, we explicitly convert it here in case
     // it can't be implicitly converted - i.e. it's a symbol.
     const valueAsString = typeof value === 'string' ? value : String(value);
-    if (node === this.endNode.previousSibling &&
-      node.nodeType === 3 /* Node.TEXT_NODE */) {
+    if (node === this.endNode.previousSibling && node.nodeType === 3 /* Node.TEXT_NODE */) {
       // If we only have a single text node between the markers, we can just
       // set its value, rather than replacing it.
       // TODO(justinfagnani): Can we just check if this.value is primitive?
       node.data = valueAsString;
-    }
-    else {
+    } else {
       this.__commitNode(document.createTextNode(valueAsString));
     }
     this.value = value;
   }
   __commitTemplateResult(value) {
     const template = this.options.templateFactory(value);
-    if (this.value instanceof TemplateInstance &&
+    if (this.value instanceof TemplateInstance && this.value.template === template) {
-      this.value.template === template) {
       this.value.update(value.values);
-    }
-    else {
+    } else {
       // Make sure we propagate the template processor from the TemplateResult
       // so that we use its syntax extension, etc. The template factory comes
       // from the render function options so that it can control template
@@ -899,8 +877,7 @@ class NodePart {
         itemParts.push(itemPart);
         if (partIndex === 0) {
           itemPart.appendIntoPart(this);
-        }
-        else {
+        } else {
           itemPart.insertAfterPart(itemParts[partIndex - 1]);
         }
       }
@@ -952,8 +929,7 @@ class BooleanAttributePart {
     if (this.value !== value) {
       if (value) {
         this.element.setAttribute(this.name, '');
-      }
-      else {
+      } else {
         this.element.removeAttribute(this.name);
       }
       this.value = value;
@@ -973,8 +949,7 @@ class BooleanAttributePart {
 class PropertyCommitter extends AttributeCommitter {
   constructor(element, name, strings) {
     super(element, name, strings);
-    this.single =
-      (strings.length === 2 && strings[0] === '' && strings[1] === '');
+    this.single = strings.length === 2 && strings[0] === '' && strings[1] === '';
   }
   _createPart() {
     return new PropertyPart(this);
@@ -993,8 +968,7 @@ class PropertyCommitter extends AttributeCommitter {
     }
   }
 }
-class PropertyPart extends AttributePart {
+class PropertyPart extends AttributePart {}
-}
 // Detect event listener options support. If the `capture` property is read
 // from the options object, then options are supported. If not, then the third
 // argument to add/removeEventListener is interpreted as the boolean capture
@@ -1008,14 +982,13 @@ let eventOptionsSupported = false;
       get capture() {
         eventOptionsSupported = true;
         return false;
-      }
+      },
     };
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     window.addEventListener('test', options, options);
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     window.removeEventListener('test', options, options);
-  }
-  catch (_e) {
+  } catch (_e) {
     // event options not supported
   }
 })();
@@ -1026,7 +999,7 @@ class EventPart {
     this.element = element;
     this.eventName = eventName;
     this.eventContext = eventContext;
-    this.__boundHandleEvent = (e) => this.handleEvent(e);
+    this.__boundHandleEvent = e => this.handleEvent(e);
   }
   setValue(value) {
     this.__pendingValue = value;
@@ -1042,11 +1015,10 @@ class EventPart {
     }
     const newListener = this.__pendingValue;
     const oldListener = this.value;
-    const shouldRemoveListener = newListener == null ||
+    const shouldRemoveListener =
+      newListener == null ||
-      oldListener != null &&
+      (oldListener != null &&
-      (newListener.capture !== oldListener.capture ||
+        (newListener.capture !== oldListener.capture || newListener.once !== oldListener.once || newListener.passive !== oldListener.passive));
-        newListener.once !== oldListener.once ||
-        newListener.passive !== oldListener.passive);
     const shouldAddListener = newListener != null && (oldListener == null || shouldRemoveListener);
     if (shouldRemoveListener) {
       this.element.removeEventListener(this.eventName, this.__boundHandleEvent, this.__options);
@@ -1061,8 +1033,7 @@ class EventPart {
   handleEvent(event) {
     if (typeof this.value === 'function') {
       this.value.call(this.eventContext || this.element, event);
-    }
-    else {
+    } else {
       this.value.handleEvent(event);
     }
   }
@@ -1070,10 +1041,7 @@ class EventPart {
 // We copy options because of the inconsistent behavior of browsers when reading
 // the third argument of add/removeEventListener. IE11 doesn't support options
 // at all. Chrome 41 only reads `capture` if the argument is an object.
-const getOptions = (o) => o &&
-  (eventOptionsSupported ?
-    { capture: o.capture, passive: o.passive, once: o.once } :
+const getOptions = o => o && (eventOptionsSupported ? { capture: o.capture, passive: o.passive, once: o.once } : o.capture);
-    o.capture);
 /**
  * @license
@@ -1148,7 +1116,7 @@ function templateFactory(result) {
   if (templateCache === undefined) {
     templateCache = {
       stringsArray: new WeakMap(),
-      keyString: new Map()
+      keyString: new Map(),
     };
     templateCaches.set(result.type, templateCache);
   }
@@ -1206,7 +1174,7 @@ const render = (result, container, options) => {
   let part = parts.get(container);
   if (part === undefined) {
     removeNodes(container, container.firstChild);
-    parts.set(container, part = new NodePart(Object.assign({ templateFactory }, options)));
+    parts.set(container, (part = new NodePart(Object.assign({ templateFactory }, options))));
     part.appendInto(container);
   }
   part.setValue(result);
@@ -1243,4 +1211,34 @@ const html = (strings, ...values) => new TemplateResult(strings, values, 'html',
  */
 const svg = (strings, ...values) => new SVGTemplateResult(strings, values, 'svg', defaultTemplateProcessor);
-export { AttributeCommitter, AttributePart, BooleanAttributePart, DefaultTemplateProcessor, EventPart, NodePart, PropertyCommitter, PropertyPart, SVGTemplateResult, Template, TemplateInstance, TemplateResult, createMarker, defaultTemplateProcessor, directive, html, isDirective, isIterable, isPrimitive, isTemplatePartActive, noChange, nothing, parts, removeNodes, render, reparentNodes, svg, templateCaches, templateFactory };
+export {
+  AttributeCommitter,
+  AttributePart,
+  BooleanAttributePart,
+  DefaultTemplateProcessor,
+  EventPart,
+  NodePart,
+  PropertyCommitter,
+  PropertyPart,
+  SVGTemplateResult,
+  Template,
+  TemplateInstance,
+  TemplateResult,
+  createMarker,
+  defaultTemplateProcessor,
+  directive,
+  html,
+  isDirective,
+  isIterable,
+  isPrimitive,
+  isTemplatePartActive,
+  noChange,
+  nothing,
+  parts,
+  removeNodes,
+  render,
+  reparentNodes,
+  svg,
+  templateCaches,
+  templateFactory,
+};

test/index.test.js CHANGED Viewed

@@ -1,10 +1,24 @@
-import { expect, test, jest } from '@jest/globals'
+import { expect, test, jest } from '@jest/globals';
+import {
+  html,
+  render,
+  number,
+  boolean,
+  string,
+  array,
+  object,
+  setLogError,
+  defineElement,
+  getElement,
+  useConfig,
+  useLocation,
+  useState,
-import { html, render, number, boolean, string, array, object } from '../src/index.js';
+} from '../src/index.js';
 const logMock = jest.fn();
-window.logError = logMock;
+setLogError(logMock);
-const expectError = (msg) => expect(logMock).toHaveBeenCalledWith(msg);
+const expectError = msg => expect(logMock).toHaveBeenCalledWith(msg);
 const primitives = [
   {
@@ -24,12 +38,12 @@ const primitives = [
     validator: string,
     valid: ['', '123'],
     invalid: [123, false, {}, [], new Date()],
-  }
+  },
-]
+];
 primitives.forEach(value =>
   it(`${value.type}`, () => {
-    const context = 'key'
+    const context = 'key';
     expect(value.validator.type).toEqual(value.type);
     expect(value.validator.isRequired.type).toEqual(value.type);
     value.validator.validate(context);
@@ -41,7 +55,7 @@ primitives.forEach(value =>
     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}'`)
+      expectError(`'key' Expected type '${value.type}' got type '${typeof v}'`);
     }
   })
 );
@@ -57,8 +71,8 @@ test('object', () => {
   const schema = object({
     address: object({
       street: string,
-    })
+    }),
-  })
+  });
   schema.validate(context, {});
   schema.validate(context, '123');
   expectError(`'data' Expected object literal '{}' got 'string'`);
@@ -84,8 +98,8 @@ test('object', () => {
   const schema2 = object({
     address: object({
       street: string.isRequired,
-    })
+    }),
-  })
+  });
   schema2.validate(context, {});
   schema2.validate(context, {
     address: {
@@ -96,7 +110,7 @@ test('object', () => {
     address: {},
   });
   expectError(`'data.address.street' Field is required`);
-})
+});
 test('array', () => {
   const context = 'items';
@@ -109,7 +123,7 @@ test('array', () => {
   const schema = object({
     street: string.isRequired,
-  })
+  });
   array(schema).validate(context, []);
   array(schema).validate(context, [{ street: '123' }, { street: '456' }, { street: '789' }]);
   array(schema).validate(context, [{}]);
@@ -123,7 +137,7 @@ test('array', () => {
 });
 test('render', async () => {
-  const data = { name: '123', address: { street: '1' } }
+  const data = { name: '123', address: { street: '1' } };
   const template = html`
     <div>
       <app-counter name="123" details=${data}></app-counter>
@@ -135,4 +149,43 @@ test('render', async () => {
       <app-counter name=\"123\" details=\"{'name':'123','address':{'street':'1'}}\"></app-counter>
     </div>
   `);
-})
+});
+test('defineElement', async () => {
+  const attrTypes = {
+    address: object({
+      street: string.isRequired,
+    }).isRequired,
+  };
+  const AppItem = ({ address: { street } }) => {
+    const [count] = useState(0);
+    return html`
+      <div>
+        <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, `'`) }]);
+  const res = await instance.render();
+  expect(res).toEqual(`
+      <div>
+        <p>street: 123</p>
+        <p>count: 0</p>
+      </div>
+    `);
+});
+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/setup.js DELETED Viewed

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

~repos /atoms-element

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

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