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.

a4d51747 — Peter John

new class based approach

Files changed (2) hide show

src/index.js +128 -167
test/index.test.js +62 -76

src/index.js CHANGED Viewed

@@ -1,6 +1,5 @@
 import { html, render as litRender, directive, NodePart, AttributePart, PropertyPart, isPrimitive } from './lit-html.js';
-const registry = {};
 const isBrowser = typeof window !== 'undefined';
 export { html, isBrowser };
@@ -138,14 +137,10 @@ export const classMap = isBrowser
       return value;
     };
-let currentCursor;
-let currentComponent;
-let logError = (msg) => {
+const logError = (msg) => {
+  if (isBrowser ? window.__DEV__ : global.__DEV) {
-  console.warn(msg);
+    console.warn(msg);
-};
+  }
-export const setLogError = (fn) => {
-  logError = fn;
 };
 const checkRequired = (context, data) => {
@@ -230,62 +225,20 @@ export const array = checkComplex('array', (innerType, context, data) => {
 });
 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) =>
+// export const useReducer = (reducer, initialState) =>
-  hooks({
+//   hooks({
-    oncreate: (h, c, i) => [
+//     oncreate: (h, c, i) => [
-      initialState,
+//       initialState,
-      function dispatch(action) {
+//       function dispatch(action) {
-        const state = h.values[i][0];
+//         const state = h.values[i][0];
-        const nextState = reducer(state, action);
+//         const nextState = reducer(state, action);
-        if (!Object.is(state, nextState)) {
+//         if (!Object.is(state, nextState)) {
-          h.values[i][0] = nextState;
+//           h.values[i][0] = nextState;
-          c.update();
+//           c.update();
-        }
+//         }
-      },
+//       },
-    ],
+//     ],
-  });
+//   });
 const depsChanged = (prev, next) => prev == null || next.some((f, i) => !Object.is(f, prev[i]));
 export const useEffect = (handler, deps) =>
   hooks({
@@ -296,39 +249,39 @@ export const useEffect = (handler, deps) =>
       }
     },
   });
+// createHooks(config) {
+//   const index = this.currentCursor++;
+//   if (this.hooks.values.length <= index && config.oncreate) {
+//     this.hooks.values[index] = config.oncreate(this.hooks, this, index);
+//   }
+//   if (config.onupdate) {
+//     this.hooks.values[index] = config.onupdate(this.hooks, this, index);
+//   }
+//   return this.hooks.values[index];
+// }
+//
-export const useLayoutEffect = (handler, deps) =>
+// export const useLayoutEffect = (handler, deps) =>
-  hooks({
+//   hooks({
-    onupdate(h, _, i) {
+//     onupdate(h, _, i) {
-      if (!deps || depsChanged(h.deps[i], deps)) {
+//       if (!deps || depsChanged(h.deps[i], deps)) {
-        h.deps[i] = deps || [];
+//         h.deps[i] = deps || [];
-        h.layoutEffects[i] = handler;
+//         h.layoutEffects[i] = handler;
-      }
+//       }
-    },
+//     },
-  });
+//   });
-export const useMemo = (fn, deps) =>
+// export const useMemo = (fn, deps) =>
-  hooks({
+//   hooks({
-    onupdate(h, _, i) {
+//     onupdate(h, _, i) {
-      let value = h.values[i];
+//       let value = h.values[i];
-      if (!deps || depsChanged(h.deps[i], deps)) {
+//       if (!deps || depsChanged(h.deps[i], deps)) {
-        h.deps[i] = deps || [];
+//         h.deps[i] = deps || [];
-        value = fn();
+//         value = fn();
-      }
+//       }
-      return value;
+//       return value;
-    },
+//     },
-  });
+//   });
-export const useCallback = (callback, deps) => useMemo(() => callback, deps);
+// 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 = [];
@@ -358,33 +311,60 @@ const enqueueEffects = batch(task, filo, (c) => c._flushEffects('effects'));
 const enqueueUpdate = batch(microtask, fifo, (c) => c._performUpdate());
 const BaseElement = isBrowser ? window.HTMLElement : class {};
+const count = [0];
+const registry = {};
 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 getNextIndex() {
+    count[0] = count[0] + 1;
+    return count[0];
+  }
+  static get observedAttributes() {
+    if (!this.attrTypes) {
+      return [];
+    }
+    return Object.keys(this.attrTypes)
+      .filter((key) => this.attrTypes[key].type !== 'function')
+      .map((k) => k.toLowerCase());
+  }
-  constructor() {
+  constructor(attrs) {
     super();
+    this._id = `atoms:${this.constructor.getNextIndex()}`;
     this._dirty = false;
     this._connected = false;
     this.hooks = {
+      currentCursor: 0,
       values: [],
       deps: [],
       effects: [],
       layoutEffects: [],
       cleanup: [],
     };
-    this.props = {};
-    this.attrTypes = {};
+    this.attrs = attrs;
-    this.name = '';
-    this.renderer = () => {};
+    this.config = isBrowser ? window.config : global.config;
-    this.attrTypes = {};
-    this.funcKeys = [];
-    this.attrTypesMap = {};
+    this.location = isBrowser ? window.location : global.location;
   }
   connectedCallback() {
     this._connected = true;
     if (isBrowser) {
       this.update();
-    } else {
-      __setCurrent__(this);
     }
   }
   disconnectedCallback() {
@@ -396,13 +376,6 @@ export class AtomsElement extends BaseElement {
   }
   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();
     }
@@ -415,16 +388,18 @@ export class AtomsElement extends BaseElement {
     this._dirty = true;
     enqueueUpdate(this);
   }
   _performUpdate() {
     if (!this._connected) {
       return;
     }
+    this.hooks.currentCursor = 0;
-    __setCurrent__(this);
+    render(this.render(), this);
-    this.render();
     enqueueLayoutEffects(this);
     enqueueEffects(this);
     this._dirty = false;
   }
   _flushEffects(effectKey) {
     const effects = this.hooks[effectKey];
     const cleanups = this.hooks.cleanup;
@@ -440,58 +415,44 @@ export class AtomsElement extends BaseElement {
     }
   }
-  render() {
+  useState(initialState) {
+    const index = this.hooks.currentCursor++;
-    this.funcKeys.forEach((key) => {
+    if (this.hooks.values.length <= index) {
-      this.props[key] = this[key];
+      this.hooks.values[index] = [
+        typeof initialState === 'function' ? initialState() : initialState,
+        (nextState) => {
+          const state = this.hooks.values[index][0];
+          if (typeof nextState === 'function') {
+            nextState = nextState(state);
+          }
+          if (!Object.is(state, nextState)) {
+            this.hooks.values[index][0] = nextState;
+            this.update();
+          }
-    });
+        },
-    if (isBrowser) {
-      render(this.renderer(this.props), this);
-    } else {
+      ];
-      __setCurrent__(this);
-      return render(this.renderer(this.props), this);
     }
+    return this.hooks.values[index];
   }
-}
-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() {
+  useRef() {
-        return keys.map((k) => k.toLowerCase());
+    const index = this.currentCursor++;
-      }
-    },
-  };
-  if (isBrowser) {
-    if (window.customElements.get(name)) {
+    if (this.hooks.values.length <= index) {
-      return;
-    } else {
-      window.customElements.define(name, registry[name].Clazz);
+      this.hooks.values[index] = { current: initialValue };
     }
+    return this.hooks.values[index];
+  }
+  getAttrs() {
+    return Object.keys(this.constructor.attrTypes)
+      .filter((key) => this.constructor.attrTypes[key].type !== 'function')
+      .reduceRight((acc, key) => {
+        const attrType = this.constructor.attrTypes[key];
+        const newValue = isBrowser ? this.getAttribute(key.toLowerCase()) : this.attrs.find((item) => item.name === key.toLowerCase()).value;
+        const data = attrType.parse(newValue);
+        attrType.validate(`<${this.constructor.name}> ${key}`, data);
+        acc[key] = data;
+        return acc;
+      }, {});
   }
 }

test/index.test.js CHANGED Viewed

@@ -1,27 +1,7 @@
 import { expect, test, jest } from '@jest/globals';
-import {
-  html,
-  render,
-  number,
-  boolean,
-  string,
-  array,
-  func,
-  object,
-  setLogError,
-  defineElement,
-  getElement,
-  useConfig,
-  useLocation,
-  useState,
-  unsafeHTML,
-  classMap,
-} from '../src/index.js';
+import { AtomsElement, html, render, number, boolean, string, array, func, object, unsafeHTML, classMap } from '../src/index.js';
-const logMock = jest.fn();
+global.__DEV = true;
-setLogError(logMock);
-const expectError = (msg) => expect(logMock).toHaveBeenCalledWith(msg);
 const primitives = [
   {
@@ -46,6 +26,7 @@ const primitives = [
 primitives.forEach((value) =>
   it(`${value.type}`, () => {
+    const spy = jest.spyOn(global.console, 'warn').mockImplementation();
     const context = 'key';
     expect(value.validator.type).toEqual(value.type);
     expect(value.validator.isRequired.type).toEqual(value.type);
@@ -55,21 +36,23 @@ primitives.forEach((value) =>
       value.validator.isRequired.validate(context, v);
     }
     value.validator.isRequired.validate(context);
-    expectError(`'key' Field is required`);
+    expect(console.warn).toHaveBeenCalledWith(`'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}'`);
+      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.isRequired }).validate(context, { name: '' });
   object({ name: string.isRequired }).validate(context, {});
-  expectError(`'data.name' Field is required`);
+  expect(console.warn).toHaveBeenCalledWith(`'data.name' Field is required`);
   const schema = object({
     address: object({
@@ -78,14 +61,14 @@ test('object', () => {
   });
   schema.validate(context, {});
   schema.validate(context, '123');
-  expectError(`'data' Expected object literal '{}' got 'string'`);
+  expect(console.warn).toHaveBeenCalledWith(`'data' Expected object literal '{}' got 'string'`);
   schema.validate(context, {
     address: {},
   });
   schema.validate(context, {
     address: '123',
   });
-  expectError(`'data.address' Expected object literal '{}' got 'string'`);
+  expect(console.warn).toHaveBeenCalledWith(`'data.address' Expected object literal '{}' got 'string'`);
   schema.validate(context, {
     address: {
       street: 'avenue 1',
@@ -96,7 +79,7 @@ test('object', () => {
       street: false,
     },
   });
-  expectError(`'data.address.street' Expected type 'string' got type 'boolean'`);
+  expect(console.warn).toHaveBeenCalledWith(`'data.address.street' Expected type 'string' got type 'boolean'`);
   const schema2 = object({
     address: object({
@@ -112,17 +95,19 @@ test('object', () => {
   schema2.validate(context, {
     address: {},
   });
-  expectError(`'data.address.street' Field is required`);
+  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]);
-  expectError(`'items[0]' Expected type 'string' got type 'number'`);
+  expect(console.warn).toHaveBeenCalledWith(`'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'`);
+  expect(console.warn).toHaveBeenCalledWith(`'items[0][0]' Expected type 'string' got type 'number'`);
   const schema = object({
     street: string.isRequired,
@@ -130,25 +115,14 @@ test('array', () => {
   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`);
+  expect(console.warn).toHaveBeenCalledWith(`'items[0].street' Field is required`);
   array(schema).validate(context, [{ street: false }]);
-  expectError(`'items[0].street' Expected type 'string' got type 'boolean'`);
+  expect(console.warn).toHaveBeenCalledWith(`'items[0].street' Expected type 'string' got type 'boolean'`);
   array(schema).validate(context, [{ street: '123' }, {}]);
-  expectError(`'items[1].street' Field is required`);
+  expect(console.warn).toHaveBeenCalledWith(`'items[1].street' Field is required`);
   array(schema).validate(context, [{ street: '123' }, { street: false }]);
-  expectError(`'items[1].street' Expected type 'string' got type 'boolean'`);
+  expect(console.warn).toHaveBeenCalledWith(`'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 = {};
+  spy.mockRestore();
-  expect(useLocation()).toMatchObject({});
 });
 test('render', async () => {
@@ -256,38 +230,50 @@ test('render multi template', async () => {
   `);
 });
-test('defineElement', async () => {
+test('AtomsElement', async () => {
+  class AppItem extends AtomsElement {
+    static name = 'app-item';
-  const attrTypes = {
+    static attrTypes = {
-    perPage: string.isRequired,
+      perPage: string.isRequired,
-    address: object({
+      address: object({
-      street: string.isRequired,
+        street: string.isRequired,
-    }).isRequired,
+      }).isRequired,
-    renderItem: func(),
+      renderItem: func(),
-  };
+    };
+    static css = ``;
+    render() {
+      const {
+        perPage,
-  const AppItem = ({ perPage, address: { street }, renderItem }) => {
+        address: { street },
+      } = this.getAttrs();
-    const [count] = useState(0);
+      const [count] = this.useState(0);
-    return html`
+      return html`
-      <div perPage=${perPage}>
+        <div perPage=${perPage}>
-        <p>street: ${street}</p>
+          <p>street: ${street}</p>
-        <p>count: ${count}</p>
+          <p>count: ${count}</p>
-        ${renderItem()}
+          ${this.renderItem()}
-      </div>
+        </div>
-    `;
+      `;
-  };
+    }
+  }
-  defineElement('app-item', AppItem, attrTypes);
+  AppItem.register();
-  const { Clazz } = getElement('app-item');
+  const Clazz = AtomsElement.getElement('app-item');
+  expect(Clazz.name).toEqual(AppItem.name);
-  const instance = new Clazz([
+  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(Clazz.observedAttributes).toEqual(['perpage', 'address', 'renderitem']);
+  expect(AppItem.observedAttributes).toEqual(['perpage', 'address']);
-  const res = await instance.render();
+  const res = await render(instance.render());
   expect(res).toEqual(`
-      <div perPage="1">
+        <div perPage="1">
-        <p>street: 123</p>
+          <p>street: 123</p>
-        <p>count: 0</p>
+          <p>count: 0</p>
-        <div><p>render item 1</p></div>
+          <div><p>render item 1</p></div>
-      </div>
+        </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.