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.

38cee1ba — Peter John

add state typings and improve stuff

Files changed (4) hide show

example/app-counter.js +37 -58
index.d.ts +22 -11
index.js +430 -572
index.test.js +35 -1

example/app-counter.js CHANGED Viewed

@@ -1,64 +1,43 @@
-import { createElement, html, object, number, string } from '../index.js';
+import { createElement, createState, html } from '../index.js';
+export default createElement({
-const name = () => 'app-counter';
+  name: 'app-counter',
-const attrTypes = () => ({
+  attrs: {
-  name: string().required(),
+    name: '',
-  meta: object({
+    meta: {
-    start: number(),
+      start: '',
-  }),
+    },
-});
-const stateTypes = () => ({
-  count: number()
-    .required()
-    .default((attrs) => attrs.meta?.start || 0)
-    .action('increment', ({ state }) => state.setCount(state.count + 1))
-    .action('decrement', ({ state }) => state.setCount(state.count - 1)),
-});
-const computedTypes = () => ({
-  sum: number()
-    .required()
-    .compute('count', (count) => {
-      return count + 10;
-    }),
+  },
-  warningClass: string()
+  state: {
-    .required()
+    count: 0,
-    .compute('count', (count) => {
-      return count > 10 ? 'text-red-500' : '';
-    }),
+  },
+  reducer: {
+    increment: (state) => ({ ...state, count: state.count + 1 }),
+    decrement: (state) => ({ ...state, count: state.count - 1 }),
-});
+  },
-const render = ({ attrs, state, computed }) => {
+  render: ({ attrs, state, actions }) => {
-  const { name, meta } = attrs;
+    const { name, meta } = attrs;
-  const { count, increment, decrement } = state;
+    const { count } = state;
-  const { sum, warningClass } = computed;
+    const sum = count + 10;
+    const warningClass = count > 10 ? 'text-red-500' : '';
-  return html`
+    return html`
-    <div>
+      <div>
-      <div class="mb-2">
+        <div class="mb-2">
-        Counter: ${name}
+          Counter: ${name}
-        <span>starts at ${meta?.start}</span>
+          <span>starts at ${meta?.start}</span>
-      </div>
+        </div>
-      <div class="flex flex-1 flex-row items-center text-gray-700">
+        <div class="flex flex-1 flex-row items-center text-gray-700">
-        <button class="bg-gray-300 text-gray-700 rounded hover:bg-gray-200 px-4 py-2 text-3xl focus:outline-none" @click=${decrement}>-</button>
+          <button class="bg-gray-300 text-gray-700 rounded hover:bg-gray-200 px-4 py-2 text-3xl focus:outline-none" @click=${actions.decrement}>-</button>
+          <div class="mx-20">
+            <h1 class="text-3xl font-mono ${warningClass}">${count}</h1>
+          </div>
+          <button class="bg-gray-300 text-gray-700 rounded hover:bg-gray-200 px-4 py-2 text-3xl focus:outline-none" @click=${actions.increment}>+</button>
+        </div>
         <div class="mx-20">
-          <h1 class="text-3xl font-mono ${warningClass}">${count}</h1>
+          <h1 class="text-xl font-mono">Sum: ${sum}</h1>
         </div>
-        <button class="bg-gray-300 text-gray-700 rounded hover:bg-gray-200 px-4 py-2 text-3xl focus:outline-none" @click=${increment}>+</button>
       </div>
-      <div class="mx-20">
-        <h1 class="text-xl font-mono">Sum: ${sum}</h1>
-      </div>
-    </div>
-  `;
+    `;
-};
+  },
-export default createElement({
-  name,
-  attrTypes,
-  stateTypes,
-  computedTypes,
-  render,
 });

index.d.ts CHANGED Viewed

@@ -44,16 +44,6 @@ export class AtomsElement {
 export const getConfig = () => Config;
 export const getLocation = () => Location;
-export type CreateElementProps = {
-  name: () => string;
-  attrTypes?: () => {[key: string]: any};
-  stateTypes?: () => {[key: string]: any};
-  computedTypes?: () => {[key: string]: any};
-  render:  () => any
-}
-export const createElement = (props: CreateElementProps) => CreateElementProps;
 export type PageRenderProps = {
   props: any;
   headScript: string;
@@ -61,4 +51,25 @@ export type PageRenderProps = {
 }
 export type Handler = (props: any) => string;
-export const createPage = (props: { head: Handler, body: Handler}) => (props: PageRenderProps) => string;
+export const createPage = (props: { head: Handler, body: Handler}) => (props: PageRenderProps) => string;
+export type State<P, Q> = {
+  getState: () => P;
+  subscribe: (fn: (v: P) => void) => void;
+} & { [K in keyof Q]: (v: any) => void}
+export function createState<P, Q extends {[k: string]: (state: P, v: any) => P}>(props: { state: P, reducer: Q }): State<P, Q>;
+export type ElementState<P, Q> = P & { [K in keyof Q]: (v: any) => void}
+export type CreateElementProps<N, P, Q> = {
+  name: string;
+  attrs: N;
+  state: State<P, Q>;
+  reducer: Q
+  render:  (props: { attrs: N, state: P, actions: { [K in keyof Q]: (v: any) => void;} }) => any
+}
+export function createElement<N, P, Q extends {[k: string]: (state: P, v: any) => P}>(props: CreateElementProps<N, P, Q>): CreateElementProps<N, P, Q>;

index.js CHANGED Viewed

@@ -3,6 +3,280 @@ import { html, render as litRender, directive, NodePart, isPrimitive } from './l
 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 tagRE = /<[a-zA-Z0-9\-\!\/](?:"[^"]*"|'[^']*'|[^'">])*>/g;
+const whitespaceRE = /^\s*$/;
+const attrRE = /\s([^'"/\s><]+?)[\s/>]|([^\s=]+)=\s?(".*?"|'.*?')/g;
+const voidElements = ['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'param', 'source', 'track', 'wbr'];
+const parseTag = (tag) => {
+  const res = {
+    type: 'tag',
+    name: '',
+    voidElement: false,
+    attrs: {},
+    children: [],
+  };
+  const tagMatch = tag.match(/<\/?([^\s]+?)[/\s>]/);
+  if (tagMatch) {
+    res.name = tagMatch[1];
+    if (voidElements.includes(tagMatch[1]) || tag.charAt(tag.length - 2) === '/') {
+      res.voidElement = true;
+    }
+    // handle comment tag
+    if (res.name.startsWith('!--')) {
+      const endIndex = tag.indexOf('-->');
+      return {
+        type: 'comment',
+        comment: endIndex !== -1 ? tag.slice(4, endIndex) : '',
+      };
+    }
+  }
+  const reg = new RegExp(attrRE);
+  let result = null;
+  for (;;) {
+    result = reg.exec(tag);
+    if (result === null) {
+      break;
+    }
+    if (!result[0].trim()) {
+      continue;
+    }
+    if (result[1]) {
+      const attr = result[1].trim();
+      let arr = [attr, ''];
+      if (attr.indexOf('=') > -1) {
+        arr = attr.split('=');
+      }
+      res.attrs[arr[0]] = arr[1];
+      reg.lastIndex--;
+    } else if (result[2]) {
+      res.attrs[result[2]] = result[3].trim().substring(1, result[3].length - 1);
+    }
+  }
+  return res;
+};
+const parseHtml = (html) => {
+  const result = [];
+  const arr = [];
+  let current;
+  let level = -1;
+  // handle text at top level
+  if (html.indexOf('<') !== 0) {
+    var end = html.indexOf('<');
+    result.push({
+      type: 'text',
+      content: end === -1 ? html : html.substring(0, end),
+    });
+  }
+  html.replace(tagRE, function (tag, index) {
+    const isOpen = tag.charAt(1) !== '/';
+    const isComment = tag.startsWith('<!--');
+    const start = index + tag.length;
+    const nextChar = html.charAt(start);
+    let parent;
+    if (isComment) {
+      const comment = parseTag(tag);
+      // if we're at root, push new base node
+      if (level < 0) {
+        result.push(comment);
+        return result;
+      }
+      parent = arr[level];
+      parent.children.push(comment);
+      return result;
+    }
+    if (isOpen) {
+      level++;
+      current = parseTag(tag);
+      if (!current.voidElement && nextChar && nextChar !== '<') {
+        current.children.push({
+          type: 'text',
+          content: html.slice(start, html.indexOf('<', start)),
+        });
+      }
+      // if we're at root, push new base node
+      if (level === 0) {
+        result.push(current);
+      }
+      parent = arr[level - 1];
+      if (parent) {
+        parent.children.push(current);
+      }
+      arr[level] = current;
+    }
+    if (!isOpen || current.voidElement) {
+      if (level > -1 && (current.voidElement || current.name === tag.slice(2, -1))) {
+        level--;
+        // move current up a level to match the end tag
+        current = level === -1 ? result : arr[level];
+      }
+      if (nextChar !== '<' && nextChar) {
+        // trailing text node
+        // if we're at the root, push a base text node. otherwise add as
+        // a child to the current node.
+        parent = level === -1 ? result : arr[level].children;
+        // calculate correct end of the content slice in case there's
+        // no tag after the text node.
+        const end = html.indexOf('<', start);
+        let content = html.slice(start, end === -1 ? undefined : end);
+        // if a node is nothing but whitespace, collapse it as the spec states:
+        // https://www.w3.org/TR/html4/struct/text.html#h-9.1
+        if (whitespaceRE.test(content)) {
+          content = ' ';
+        }
+        // don't add whitespace-only text nodes if they would be trailing text nodes
+        // or if they would be leading whitespace-only text nodes:
+        //  * end > -1 indicates this is not a trailing text node
+        //  * leading node is when level is -1 and parent has length 0
+        if ((end > -1 && level + parent.length >= 0) || content !== ' ') {
+          parent.push({
+            type: 'text',
+            content: content,
+          });
+        }
+      }
+    }
+  });
+  return result;
+};
+const stringifyAttrs = (attrs) => {
+  const buff = [];
+  for (let key in attrs) {
+    buff.push(key + '="' + attrs[key] + '"');
+  }
+  if (!buff.length) {
+    return '';
+  }
+  return ' ' + buff.join(' ');
+};
+const stringifyHtml = (buff, doc) => {
+  switch (doc.type) {
+    case 'text':
+      return buff + doc.content;
+    case 'tag':
+      buff += '<' + doc.name + (doc.attrs ? stringifyAttrs(doc.attrs) : '') + (doc.voidElement ? '/>' : '>');
+      if (doc.voidElement) {
+        return buff;
+      }
+      return buff + doc.children.reduce(stringifyHtml, '') + '</' + doc.name + '>';
+    case 'comment':
+      buff += '<!--' + doc.comment + '-->';
+      return buff;
+  }
+};
+const hydrate = (node) => {
+  const Clazz = getElement(node.name);
+  if (Clazz) {
+    const newAttrs = {};
+    Object.keys(node.attrs).forEach((key) => {
+      const newValue = node.attrs[key];
+      newAttrs[key] = newValue && newValue.startsWith(`{`) ? JSON.parse(newValue.replace(/'/g, `"`)) : newValue;
+    });
+    const instance = new Clazz(newAttrs);
+    const res = instance.render();
+    node.children = parseHtml(res);
+  }
+  if (node.children) {
+    for (const child of node.children) {
+      hydrate(child);
+    }
+  }
+};
+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 renderHtml = 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 += renderHtml(v);
+          });
+        } else if (type === 'object') {
+          // TemplateResult
+          if (value.strings && value.type === 'html') {
+            js += text;
+            js += renderHtml(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);
+        }
+      });
+      const nodes = parseHtml(js);
+      for (const node of nodes) {
+        hydrate(node);
+      }
+      const html = nodes.reduce((acc, node) => {
+        return acc + stringifyHtml('', node);
+      }, '');
+      return html;
+    };
 const hyphenate = (s) => s.replace(/[A-Z]|^ms/g, '-$&').toLowerCase();
 const percent = (v) => (v * 100).toFixed(2) + '%';
 const createStyle = (...kvs) => {
@@ -57,7 +331,8 @@ const extractClasses = (html) => {
   return str;
 };
-export const getClassList = (template) => {
+const getClassList = (template) => {
+  // need to have this incase of shadowDom
   // const classes = template.strings.reduce((acc, item) => acc + extractClasses(item), '').split(' ');
   const classes = [];
   template.values.forEach((item) => {
@@ -70,19 +345,6 @@ export const getClassList = (template) => {
   return classes;
 };
-export const apply = (classes) => {
-  const classStyles = {};
-  classes.split(' ').forEach((cls) => {
-    const styles = classLookup[cls];
-    if (styles) {
-      Object.keys(styles).forEach((key) => {
-        classStyles[key] = styles[key];
-      });
-    }
-  });
-  return classStyles;
-};
 export const generateTWStyleSheet = (classList) => {
   let styleSheet = ``;
   classList.forEach((cls) => {
@@ -630,593 +892,190 @@ const pageStyles = {
     display: 'flex',
     flexDirection: 'column',
     flex: '1 1 0%',
-    minWidth: '320px',
-    minHeight: '100vh',
-    fontWeight: 400,
-    color: 'rgba(44, 62, 80, 1)',
-    direction: 'ltr',
-    fontSynthesis: 'none',
-    textRendering: 'optimizeLegibility',
-  },
-};
-// hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-indigo-500
-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 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;
-  };
-  common.action = (name, fn) => {
-    if (!common.__handlers) {
-      common.__handlers = {};
-    }
-    common.__handlers[name] = fn;
-    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 microtask = (flush) => () => queueMicrotask(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(attrs) {
-    super();
-    this._dirty = false;
-    this._connected = false;
-    this.attrs = attrs || {};
-    this.state = {};
-    this.config = isBrowser ? window.config : global.config;
-    this.location = isBrowser ? window.location : global.location;
-    this.prevClassList = [];
-    if (!isBrowser) {
-      this.initState();
-    } else {
-      // this.shadow = this.attachShadow({ mode: 'open' });
-    }
-  }
-  initAttrs() {
-    Object.keys(this.constructor.attrTypes).forEach((key) => {
-      const attrType = this.constructor.attrTypes[key];
-      const newValue = this.getAttribute(key.toLowerCase());
-      const data = attrType.parse(newValue);
-      attrType.validate(`<${this.constructor.name}> ${key}`, data);
-      this.attrs[key] = data;
-    });
-  }
-  initState() {
-    Object.keys(this.constructor.stateTypes).forEach((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;
-      }
-      const setKey = `set${key[0].toUpperCase()}${key.slice(1)}`;
-      this.state[setKey] = (v) => {
-        // TODO: check type on set
-        this.state[key] = typeof v === 'function' ? v(this.state[key]) : v;
-        this.update();
-      };
-      if (stateType.__handlers) {
-        Object.keys(stateType.__handlers).map((hkey) => {
-          this.state[hkey] = () => stateType.__handlers[hkey]({ attrs: this.attrs, state: this.state });
-        });
-      }
-    });
-  }
-  connectedCallback() {
-    this._connected = true;
-    this.initAttrs();
-    this.initState();
-    this.update();
-  }
-  disconnectedCallback() {
-    this._connected = false;
-  }
-  attributeChangedCallback(key, oldValue, newValue) {
-    if (this._connected) {
-      this.initAttrs();
-      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 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((dacc, key) => {
-        if (typeof state[key] !== undefined) {
-          dacc.push(state[key]);
-        }
-        return dacc;
-      }, []);
-      acc[key] = type.__compute.fn(...values);
-      return acc;
-    }, {});
-  }
-  renderTemplate() {
-    const template = this.render();
-    if (isBrowser) {
-      // TODO: this can be optimized when we know whether the value belongs in a class (AttributePart)
-      // maybe do this in lit-html itselfs
-      const newClassList = getClassList(template).filter((cls) => {
-        const globalStyles = document.getElementById('global').textContent;
-        return !globalStyles.includes('.' + cls);
-      });
-      if (newClassList.length > 0) {
-        document.getElementById('global').textContent += generateTWStyleSheet(newClassList);
-      }
-      render(template, this);
-      // For shadows only
-      // if (!this.styleElement) {
-      //   render(template, this.shadow);
-      //   const styleSheet = generateTWStyleSheet(classList);
-      //   this.prevClassList = classList;
-      //   this.styleElement = document.createElement('style');
-      //   this.shadow.appendChild(this.styleElement).textContent = css(pageStyles) + styleSheet;
-      // } else {
-      //   const missingClassList = classList.filter((cls) => !this.prevClassList.includes(cls));
-      //   if (missingClassList.length > 0) {
-      //     const styleSheet = generateTWStyleSheet(missingClassList);
-      //     this.styleElement.textContent += '\n' + styleSheet;
-      //     this.prevClassList.push(...missingClassList);
-      //   }
-      //   render(template, this.shadow);
-      // }
-    } else {
-      return render(template);
-    }
-  }
-}
-export const getConfig = () => (isBrowser ? window.props.config : global.props.config);
-export const getLocation = () => (isBrowser ? window.location : global.location);
-export const createElement = ({ name, attrTypes, stateTypes, computedTypes, render }) => {
-  const Element = class extends AtomsElement {
-    static name = name();
-    static attrTypes = attrTypes ? attrTypes() : {};
-    static stateTypes = stateTypes ? stateTypes() : {};
-    static computedTypes = computedTypes ? computedTypes() : {};
-    render() {
-      return render({
-        attrs: this.attrs,
-        state: this.state,
-        computed: this.computed,
-      });
-    }
-  };
-  Element.register();
-  return { name, attrTypes, stateTypes, computedTypes, render };
-};
-const lastAttributeNameRegex =
-  /([ \x09\x0a\x0c\x0d])([^\0-\x1F\x7F-\x9F "'>=/]+)([ \x09\x0a\x0c\x0d]*=[ \x09\x0a\x0c\x0d]*(?:[^ \x09\x0a\x0c\x0d"'`<>=]*|"[^"]*|'[^']*))$/;
-const tagRE = /<[a-zA-Z0-9\-\!\/](?:"[^"]*"|'[^']*'|[^'">])*>/g;
-const whitespaceRE = /^\s*$/;
-const attrRE = /\s([^'"/\s><]+?)[\s/>]|([^\s=]+)=\s?(".*?"|'.*?')/g;
-const voidElements = ['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'param', 'source', 'track', 'wbr'];
-const parseTag = (tag) => {
-  const res = {
-    type: 'tag',
-    name: '',
-    voidElement: false,
-    attrs: {},
-    children: [],
-  };
-  const tagMatch = tag.match(/<\/?([^\s]+?)[/\s>]/);
-  if (tagMatch) {
-    res.name = tagMatch[1];
-    if (voidElements.includes(tagMatch[1]) || tag.charAt(tag.length - 2) === '/') {
-      res.voidElement = true;
-    }
-    // handle comment tag
-    if (res.name.startsWith('!--')) {
-      const endIndex = tag.indexOf('-->');
-      return {
-        type: 'comment',
-        comment: endIndex !== -1 ? tag.slice(4, endIndex) : '',
-      };
-    }
-  }
-  const reg = new RegExp(attrRE);
-  let result = null;
-  for (;;) {
-    result = reg.exec(tag);
-    if (result === null) {
-      break;
-    }
-    if (!result[0].trim()) {
-      continue;
-    }
+    minWidth: '320px',
+    minHeight: '100vh',
+    fontWeight: 400,
+    color: 'rgba(44, 62, 80, 1)',
+    direction: 'ltr',
+    fontSynthesis: 'none',
+    textRendering: 'optimizeLegibility',
+  },
+};
-    if (result[1]) {
-      const attr = result[1].trim();
+// hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-indigo-500
-      let arr = [attr, ''];
+const previousValues = new WeakMap();
+export const unsafeHTML = isBrowser
-      if (attr.indexOf('=') > -1) {
+  ? directive((value) => (part) => {
-        arr = attr.split('=');
+      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;
-      res.attrs[arr[0]] = arr[1];
-      reg.lastIndex--;
-    } else if (result[2]) {
+const fifo = (q) => q.shift();
-      res.attrs[result[2]] = result[3].trim().substring(1, result[3].length - 1);
+const microtask = (flush) => () => queueMicrotask(flush);
-    }
-  }
+export const createState = ({ state, reducer }) => {
+  let initial = state;
+  const subs = new Set();
+  return {
+    getValue: () => initial,
+    subscribe: (fn) => {
+      subs.add(fn);
+    },
+    unsubscribe: (fn) => {
+      subs.remove(fn);
+    },
+    actions: Object.keys(reducer).reduce((acc, key) => {
+      const reduce = reducer[key];
+      acc[key] = (v) => {
+        initial = reduce(initial, v);
+        subs.forEach((sub) => {
+          sub(initial);
+        });
+      };
-  return res;
+      return acc;
+    }, {}),
+  };
 };
-const parseHtml = (html) => {
-  const result = [];
-  const arr = [];
-  let current;
-  let level = -1;
+const registry = {};
+export const getConfig = () => (isBrowser ? window.props.config : global.props.config);
+export const getLocation = () => (isBrowser ? window.location : global.location);
-  // handle text at top level
+export const getElement = (name) => registry[name];
+export const registerElement = (name, clazz) => {
+  registry[name] = clazz;
+  if (isBrowser) {
-  if (html.indexOf('<') !== 0) {
+    if (window.customElements.get(name)) {
-    var end = html.indexOf('<');
-    result.push({
+      return;
-      type: 'text',
+    } else {
-      content: end === -1 ? html : html.substring(0, end),
+      window.customElements.define(name, registry[name]);
-    });
+    }
   }
-  html.replace(tagRE, function (tag, index) {
-    const isOpen = tag.charAt(1) !== '/';
-    const isComment = tag.startsWith('<!--');
-    const start = index + tag.length;
-    const nextChar = html.charAt(start);
-    let parent;
-    if (isComment) {
-      const comment = parseTag(tag);
-      // if we're at root, push new base node
-      if (level < 0) {
-        result.push(comment);
-        return result;
-      }
+};
-      parent = arr[level];
+const BaseElement = isBrowser ? window.HTMLElement : class {};
+export const createElement = ({ name, attrs, state, reducer, render: renderFn }) => {
-      parent.children.push(comment);
+  const Element = class extends BaseElement {
-      return result;
+    static get observedAttributes() {
+      return Object.keys(attrs || {}).map((k) => k.toLowerCase());
     }
-    if (isOpen) {
+    constructor(ssrAttrs) {
-      level++;
+      super();
+      this._dirty = false;
+      this._connected = false;
-      current = parseTag(tag);
+      this.attrs = ssrAttrs || attrs;
+      this.state = createState({ state, reducer });
+      this.config = isBrowser ? window.config : global.config;
-      if (!current.voidElement && nextChar && nextChar !== '<') {
+      this.location = isBrowser ? window.location : global.location;
-        current.children.push({
-          type: 'text',
+      // this.prevClassList = [];
-          content: html.slice(start, html.indexOf('<', start)),
+      // this.shadow = this.attachShadow({ mode: 'open' });
-        });
-      }
+    }
-      // if we're at root, push new base node
-      if (level === 0) {
+    connectedCallback() {
+      this._connected = true;
+      this.state.subscribe(() => this.update());
-        result.push(current);
+      this.update();
-      }
+    }
+    disconnectedCallback() {
-      parent = arr[level - 1];
+      this._connected = false;
+      this.state.unsubscribe(() => this.update());
+    }
+    attributeChangedCallback(key, oldValue, newValue) {
+      this.attrs[key] = newValue && newValue.startsWith(`{`) ? JSON.parse(newValue.replace(/'/g, `"`)) : newValue;
-      if (parent) {
+      if (this._connected) {
-        parent.children.push(current);
+        this.update();
       }
-      arr[level] = current;
     }
+    update() {
-    if (!isOpen || current.voidElement) {
+      if (this._dirty) {
-      if (level > -1 && (current.voidElement || current.name === tag.slice(2, -1))) {
-        level--;
+        return;
-        // move current up a level to match the end tag
-        current = level === -1 ? result : arr[level];
       }
-      if (nextChar !== '<' && nextChar) {
+      this._dirty = true;
-        // trailing text node
+      this.enqueueUpdate();
-        // if we're at the root, push a base text node. otherwise add as
-        // a child to the current node.
+    }
-        parent = level === -1 ? result : arr[level].children;
-        // calculate correct end of the content slice in case there's
-        // no tag after the text node.
+    _performUpdate() {
-        const end = html.indexOf('<', start);
-        let content = html.slice(start, end === -1 ? undefined : end);
-        // if a node is nothing but whitespace, collapse it as the spec states:
-        // https://www.w3.org/TR/html4/struct/text.html#h-9.1
-        if (whitespaceRE.test(content)) {
+      if (!this._connected) {
-          content = ' ';
-        }
-        // don't add whitespace-only text nodes if they would be trailing text nodes
-        // or if they would be leading whitespace-only text nodes:
-        //  * end > -1 indicates this is not a trailing text node
-        //  * leading node is when level is -1 and parent has length 0
-        if ((end > -1 && level + parent.length >= 0) || content !== ' ') {
-          parent.push({
+        return;
-            type: 'text',
-            content: content,
-          });
-        }
       }
+      this.render();
+      this._dirty = false;
     }
-  });
+    batch(runner, pick, callback) {
-  return result;
+      const q = [];
+      const flush = () => {
+        let p;
+        while ((p = pick(q))) callback(p);
-};
+      };
-const stringifyAttrs = (attrs) => {
-  const buff = [];
+      const run = runner(flush);
-  for (let key in attrs) {
-    buff.push(key + '="' + attrs[key] + '"');
+      q.push(this) === 1 && run();
-  }
+    }
-  if (!buff.length) {
-    return '';
-  }
-  return ' ' + buff.join(' ');
-};
-const stringifyHtml = (buff, doc) => {
-  switch (doc.type) {
+    enqueueUpdate() {
-    case 'text':
-      return buff + doc.content;
+      this.batch(microtask, fifo, () => this._performUpdate());
-    case 'tag':
-      buff += '<' + doc.name + (doc.attrs ? stringifyAttrs(doc.attrs) : '') + (doc.voidElement ? '/>' : '>');
-      if (doc.voidElement) {
-        return buff;
-      }
+    }
-      return buff + doc.children.reduce(stringifyHtml, '') + '</' + doc.name + '>';
-    case 'comment':
-      buff += '<!--' + doc.comment + '-->';
-      return buff;
-  }
-};
+    render() {
-const hydrate = (node) => {
+      const template = renderFn({
+        attrs: this.attrs,
-  const Clazz = AtomsElement.getElement(node.name);
+        state: this.state.getValue(),
-  if (Clazz) {
-    const newAttrs = {};
+        actions: this.state.actions,
-    Object.keys(node.attrs).forEach((key) => {
+      });
-      const attrType = Clazz.attrTypes[key];
-      if (attrType) {
+      if (isBrowser) {
+        // TODO: this can be optimized when we know whether the value belongs in a class (AttributePart)
+        // maybe do this in lit-html itselfs
+        const newClassList = getClassList(template).filter((cls) => {
+          const globalStyles = document.getElementById('global').textContent;
+          return !globalStyles.includes('.' + cls);
+        });
+        if (newClassList.length > 0) {
+          document.getElementById('global').textContent += generateTWStyleSheet(newClassList);
+        }
+        renderHtml(template, this);
+        // For shadows only
+        // if (!this.styleElement) {
+        //   render(template, this.shadow);
+        //   const styleSheet = generateTWStyleSheet(classList);
-        newAttrs[key] = attrType.parse(node.attrs[key]);
+        //   this.prevClassList = classList;
+        //   this.styleElement = document.createElement('style');
+        //   this.shadow.appendChild(this.styleElement).textContent = css(pageStyles) + styleSheet;
+        // } else {
+        //   const missingClassList = classList.filter((cls) => !this.prevClassList.includes(cls));
+        //   if (missingClassList.length > 0) {
+        //     const styleSheet = generateTWStyleSheet(missingClassList);
+        //     this.styleElement.textContent += '\n' + styleSheet;
+        //     this.prevClassList.push(...missingClassList);
+        //   }
+        //   render(template, this.shadow);
+        // }
       } else {
-        newAttrs[key] = node.attrs[key];
+        return renderHtml(template);
       }
-    });
-    const instance = new Clazz(newAttrs);
-    const res = instance.renderTemplate();
-    node.children = parseHtml(res);
-  }
-  if (node.children) {
-    for (const child of node.children) {
-      hydrate(child);
     }
-  }
-};
+  };
-const wrapAttribute = (attrName, suffix, text, v) => {
-  let buffer = text;
-  const hasQuote = suffix && suffix.includes(`="`);
-  if (attrName && !hasQuote) {
+  registerElement(name, Element);
-    buffer += `"`;
-  }
-  buffer += v;
-  if (attrName && !hasQuote) {
+  return { name, attrs, state, render: renderFn };
-    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);
-        }
-      });
-      const nodes = parseHtml(js);
-      for (const node of nodes) {
-        hydrate(node);
-      }
-      const html = nodes.reduce((acc, node) => {
-        return acc + stringifyHtml('', node);
-      }, '');
-      return html;
-    };
 export const createPage = ({ head, body }) => {
   return ({ headScript, bodyScript, lang, props }) => {
-    const isProd = process.env.NODE_ENV === 'production';
-    const headHtml = render(head(props));
+    const headHtml = renderHtml(head(props));
-    const bodyHtml = render(body(props));
+    const bodyHtml = renderHtml(body(props));
     const classes = extractClasses(bodyHtml);
     return `
       <!DOCTYPE html>
@@ -1238,7 +1097,6 @@ export const createPage = ({ head, body }) => {
         <body>
           ${bodyHtml}
           <script>
-            window.__DEV__ = ${!isProd};
             window.props = ${JSON.stringify(props)};
           </script>
           ${bodyScript}

index.test.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { expect, test, jest } from '@jest/globals';
-import { AtomsElement, createElement, createPage, html, render, number, boolean, string, array, object, unsafeHTML, css } from './index.js';
+import { AtomsElement, createElement, createPage, createState, html, render, number, boolean, string, array, object, unsafeHTML, css } from './index.js';
 global.__DEV = true;
@@ -50,6 +50,40 @@ primitives.forEach((value) =>
   }),
 );
+test.only('createState', () => {
+  // computed: {
+  //     sum: (state, v) => state.count + v,
+  //   },
+  const countState = createState({
+    state: {
+      count: 0,
+    },
+    reducer: {
+      increment: (state, a) => ({ ...state, count: state.count + a }),
+      decrement: (state, a) => ({ ...state, count: state.count - a }),
+    },
+  });
+  createElement({
+    name: 'hello',
+    attrs: {
+      name: '123',
+    },
+    state: countState,
+    render: ({ attrs, state, actions }) => {
+      console.log('attrs', attrs);
+    },
+  });
+  // countState.subscribe((v) => {
+  //   console.log(v);
+  // });
+  // countState.increment(4);
+  // console.log(countState.sum(21));
+  // countState.decrement(1);
+  // console.log(countState.sum(21));
+  // countState.decrement(2);
+  // console.log(countState.sum(21));
+});
 test('object', () => {
   const spy = jest.spyOn(global.console, 'warn').mockImplementation();
   const context = 'data';

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