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.

20e01ad9 — Peter John

improve render function

Files changed (6) hide show

package.json +6 -0
readme.md +4 -4
src/index.js +152 -123
src/lit-html-server.js +37 -632
src/lit-html.js +8 -8
test/index.test.js +32 -18

package.json CHANGED Viewed

@@ -29,5 +29,11 @@
   },
   "jest": {
     "transform": {}
+  },
+  "prettier": {
+    "printWidth": 160,
+    "singleQuote": true,
+    "arrowParens": "always",
+    "trailingComma": "all"
   }
 }

readme.md CHANGED Viewed

@@ -4,13 +4,13 @@
 ![Test](https://github.com/pyros2097/atoms-element/actions/workflows/main.yml/badge.svg)
 A simple web component library for defining your custom elements. It works on both client and server. It supports hooks and follows the same
-principles of react. Props are attributes on the custom element by default so its easier to debug.
+principles of react. Data props are attributes on the custom element by default so its easier to debug and functions/handlers are
+methods attached to the element.
 It uses slightly modified versions of these libraries,
-1. [lit-html](https://github.com/lit/lit) on the client
+1. [lit-html](https://github.com/lit/lit)
-2. [lit-html-server](https://github.com/popeindustries/lit-html-server) on the server
-3. [fuco](https://github.com/wtnbass/fuco)
+2. [fuco](https://github.com/wtnbass/fuco)
 ## Installation

src/index.js CHANGED Viewed

@@ -1,100 +1,124 @@
-import { html as litHtml, render as litRender, directive as litDirective, NodePart, AttributePart, PropertyPart, isPrimitive } from './lit-html.js';
+import { html, render as litRender, directive, NodePart, AttributePart, PropertyPart, isPrimitive } from './lit-html.js';
-import { html as litServerHtml, directive as litServerDirective, isNodePart, isAttributePart, unsafePrefixString, renderToString } from './lit-html-server.js';
 const registry = {};
 const isBrowser = typeof window !== 'undefined';
-export const html = isBrowser ? litHtml : litServerHtml;
+export { html, isBrowser };
-export const render = isBrowser ? litRender : renderToString;
+export const render = isBrowser
+  ? litRender
+  : (template) => {
+      let js = '';
+      template.strings.forEach((text, i) => {
+        const value = template.values[i];
-export const directive = isBrowser ? litDirective : litServerDirective;
+        // TODO: remove @click @mouseleave= .handleClick props
+        // either here or in lit-html
+        // console.log('text', text);
+        const type = typeof value;
+        js += text;
+        if (value === null || !(type === 'object' || type === 'function' || type === 'undefined')) {
+          js += type !== 'string' ? String(value) : value;
+        } else if (Array.isArray(value)) {
+          // Array of TemplateResult
+          value.forEach((v) => {
+            js += render(v);
+          });
+        } else if (type === 'object') {
+          // TemplateResult
+          if (value.strings && value.type === 'html') {
+            js += render(value);
+          } else {
+            js += JSON.stringify(value).replace(/"/g, `'`);
+          }
+        } else if (type == 'function') {
+          js += value();
+        } else if (type !== 'undefined') {
+          js += value.toString();
+        } else {
+          // console.log('value', value);
+        }
+      });
+      return js;
+    };
 const previousValues = new WeakMap();
+export const unsafeHTML = isBrowser
-export const unsafeHTML = directive(value => part => {
+  ? directive((value) => (part) => {
-  if (isBrowser) {
-    if (!(part instanceof NodePart)) {
+      if (!(part instanceof NodePart)) {
-      throw new Error('unsafeHTML can only be used in text bindings');
+        throw new Error('unsafeHTML can only be used in text bindings');
-    }
+      }
-    const previousValue = previousValues.get(part);
+      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;
+        return;
-    }
+      }
-    const template = document.createElement('template');
+      const template = document.createElement('template');
-    template.innerHTML = value; // innerHTML casts to string internally
+      template.innerHTML = value; // innerHTML casts to string internally
-    const fragment = document.importNode(template.content, true);
+      const fragment = document.importNode(template.content, true);
-    part.setValue(fragment);
+      part.setValue(fragment);
-    previousValues.set(part, { value, fragment });
+      previousValues.set(part, { value, fragment });
-  } else {
-    if (!isNodePart(part)) {
-      throw Error('The `unsafeHTML` directive can only be used in text nodes');
-    }
-    part.setValue(`${unsafePrefixString}${value}`);
-  }
-});
+    })
+  : (value) => value;
 const previousClassesCache = new WeakMap();
+export const classMap = isBrowser
-export const classMap = directive(classInfo => part => {
+  ? 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 ' + 'and must be the only part in the attribute.');
+        throw new Error('The `classMap` directive must be used in the `class` attribute ' + 'and must be the only part in the attribute.');
-    }
-    const { committer } = part;
-    const { element } = committer;
-    let previousClasses = previousClassesCache.get(part);
-    if (previousClasses === undefined) {
-      // Write static classes once
-      // Use setAttribute() because className isn't a string on SVG elements
-      element.setAttribute('class', committer.strings.join(' '));
-      previousClassesCache.set(part, (previousClasses = new Set()));
-    }
-    const classList = element.classList;
-    // Remove old classes that no longer apply
-    // We use forEach() instead of for-of so that re don't require down-level
-    // iteration.
-    previousClasses.forEach(name => {
-      if (!(name in classInfo)) {
-        classList.remove(name);
-        previousClasses.delete(name);
       }
+      const { committer } = part;
+      const { element } = committer;
+      let previousClasses = previousClassesCache.get(part);
+      if (previousClasses === undefined) {
+        // Write static classes once
+        // Use setAttribute() because className isn't a string on SVG elements
+        element.setAttribute('class', committer.strings.join(' '));
+        previousClassesCache.set(part, (previousClasses = new Set()));
-    });
+      }
+      const classList = element.classList;
-    // Add or remove classes based on their classMap value
+      // 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) => {
-    for (const name in classInfo) {
+        if (!(name in classInfo)) {
-      const value = classInfo[name];
-      if (value != previousClasses.has(name)) {
-        // We explicitly want a loose truthy check of `value` because it seems
-        // more convenient that '' and 0 are skipped.
-        if (value) {
-          classList.add(name);
-          previousClasses.add(name);
-        } else {
           classList.remove(name);
           previousClasses.delete(name);
         }
+      });
+      // Add or remove classes based on their classMap value
+      for (const name in classInfo) {
+        const value = classInfo[name];
+        if (value != previousClasses.has(name)) {
+          // We explicitly want a loose truthy check of `value` because it seems
+          // more convenient that '' and 0 are skipped.
+          if (value) {
+            classList.add(name);
+            previousClasses.add(name);
+          } else {
+            classList.remove(name);
+            previousClasses.delete(name);
+          }
+        }
       }
-    }
-    if (typeof classList.commit === 'function') {
+      if (typeof classList.commit === 'function') {
-      classList.commit();
+        classList.commit();
-    }
-  } else {
-    if (!isAttributePart(part) || part.name !== 'class') {
-      throw Error('The `classMap` directive can only be used in the `class` attribute');
-    }
-    const classes = classInfo;
-    let value = '';
-    for (const key in classes) {
-      if (classes[key]) {
-        value += `${value.length ? ' ' : ''}${key}`;
       }
+    })
+  : (classes) => {
+      let value = '';
+      for (const key in classes) {
+        if (classes[key]) {
+          value += `${value.length ? ' ' : ''}${key}`;
-    }
+        }
-    part.setValue(value);
-  }
+      }
+      return value;
-});
+    };
 let currentCursor;
 let currentComponent;
-let logError = msg => {
+let logError = (msg) => {
   console.warn(msg);
 };
-export const setLogError = fn => {
+export const setLogError = (fn) => {
   logError = fn;
 };
@@ -104,10 +128,10 @@ const checkRequired = (context, data) => {
   }
 };
-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') {
@@ -134,9 +158,9 @@ const checkPrimitive = primitiveType => {
 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) => {
@@ -180,7 +204,7 @@ export const array = checkComplex('array', (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++;
@@ -193,20 +217,20 @@ export const hooks = config => {
   return h.values[index];
 };
-export const __setCurrent__ = c => {
+export const __setCurrent__ = (c) => {
   currentComponent = c;
   currentCursor = 0;
 };
-export const useDispatchEvent = name =>
+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 =>
+export const useRef = (initialValue) =>
   hooks({
     oncreate: (_h, _c) => ({ current: initialValue }),
   });
-export const useState = initialState =>
+export const useState = (initialState) =>
   hooks({
     oncreate: (h, c, i) => [
       typeof initialState === 'function' ? initialState() : initialState,
@@ -287,14 +311,14 @@ const batch = (runner, pick, callback) => {
     while ((p = pick(q))) 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 window.MessageChannel();
     ch.port1.onmessage = flush;
@@ -303,9 +327,9 @@ const task = flush => {
     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 enqueueUpdate = batch(microtask, fifo, (c) => c._performUpdate());
 const BaseElement = isBrowser ? window.HTMLElement : class {};
@@ -392,7 +416,7 @@ export class AtomsElement extends BaseElement {
   render() {
     if (isBrowser) {
-      this.funcKeys.forEach(key => {
+      this.funcKeys.forEach((key) => {
         this.props[key] = this[key];
       });
       render(this.renderer(this.props), this);
@@ -402,41 +426,46 @@ export class AtomsElement extends BaseElement {
     }
   }
 }
-export const getElement = name => registry[name];
+export const getElement = (name) => registry[name];
 export function defineElement(name, fn, attrTypes = {}) {
   const keys = Object.keys(attrTypes);
+  registry[name] = {
+    fn,
+    attrTypes,
-  registry[name] = class extends AtomsElement {
+    clazz: class extends AtomsElement {
-    constructor(attrs) {
+      constructor(attrs) {
-      super();
+        super();
-      this.name = name;
+        this.name = name;
-      this.renderer = fn;
+        this.renderer = fn;
-      this.attrTypes = attrTypes;
+        this.attrTypes = attrTypes;
-      this.funcKeys = keys.filter(key => attrTypes[key].type === 'function');
+        this.funcKeys = keys.filter((key) => attrTypes[key].type === 'function');
-      this.attrTypesMap = keys
+        this.attrTypesMap = keys
-        .filter(key => attrTypes[key].type !== 'function')
+          .filter((key) => attrTypes[key].type !== 'function')
-        .reduce((acc, key) => {
+          .reduce((acc, key) => {
-          acc[key.toLowerCase()] = {
+            acc[key.toLowerCase()] = {
-            propName: key,
+              propName: key,
-            propType: attrTypes[key],
+              propType: attrTypes[key],
-          };
+            };
-          return acc;
+            return acc;
-        }, {});
+          }, {});
-      if (attrs) {
+        if (attrs) {
-        attrs.forEach(item => {
+          attrs.forEach((item) => {
-          this.attributeChangedCallback(item.name, null, item.value);
+            this.attributeChangedCallback(item.name, null, item.value);
-        });
+          });
+        }
       }
-    }
-    static get observedAttributes() {
+      static get observedAttributes() {
-      return keys;
+        return keys;
-    }
+      }
+    },
   };
   if (isBrowser) {
     if (window.customElements.get(name)) {
       return;
+    } else {
+      window.customElements.define(name, registry[name].clazz);
     }
-    window.customElements.define(name, registry[name]);
   }
 }

src/lit-html-server.js CHANGED Viewed

@@ -1,230 +1,3 @@
-/* SNOWPACK PROCESS POLYFILL (based on https://github.com/calvinmetcalf/node-process-es6) */
-function defaultSetTimout() {
-  throw new Error('setTimeout has not been defined');
-}
-function defaultClearTimeout() {
-  throw new Error('clearTimeout has not been defined');
-}
-var cachedSetTimeout = defaultSetTimout;
-var cachedClearTimeout = defaultClearTimeout;
-var globalContext;
-if (typeof window !== 'undefined') {
-  globalContext = window;
-} else if (typeof self !== 'undefined') {
-  globalContext = self;
-} else {
-  globalContext = {};
-}
-if (typeof globalContext.setTimeout === 'function') {
-  cachedSetTimeout = setTimeout;
-}
-if (typeof globalContext.clearTimeout === 'function') {
-  cachedClearTimeout = clearTimeout;
-}
-function runTimeout(fun) {
-  if (cachedSetTimeout === setTimeout) {
-    //normal enviroments in sane situations
-    return setTimeout(fun, 0);
-  }
-  // if setTimeout wasn't available but was latter defined
-  if ((cachedSetTimeout === defaultSetTimout || !cachedSetTimeout) && setTimeout) {
-    cachedSetTimeout = setTimeout;
-    return setTimeout(fun, 0);
-  }
-  try {
-    // when when somebody has screwed with setTimeout but no I.E. maddness
-    return cachedSetTimeout(fun, 0);
-  } catch (e) {
-    try {
-      // When we are in I.E. but the script has been evaled so I.E. doesn't trust the global object when called normally
-      return cachedSetTimeout.call(null, fun, 0);
-    } catch (e) {
-      // same as above but when it's a version of I.E. that must have the global object for 'this', hopfully our context correct otherwise it will throw a global error
-      return cachedSetTimeout.call(this, fun, 0);
-    }
-  }
-}
-function runClearTimeout(marker) {
-  if (cachedClearTimeout === clearTimeout) {
-    //normal enviroments in sane situations
-    return clearTimeout(marker);
-  }
-  // if clearTimeout wasn't available but was latter defined
-  if ((cachedClearTimeout === defaultClearTimeout || !cachedClearTimeout) && clearTimeout) {
-    cachedClearTimeout = clearTimeout;
-    return clearTimeout(marker);
-  }
-  try {
-    // when when somebody has screwed with setTimeout but no I.E. maddness
-    return cachedClearTimeout(marker);
-  } catch (e) {
-    try {
-      // When we are in I.E. but the script has been evaled so I.E. doesn't  trust the global object when called normally
-      return cachedClearTimeout.call(null, marker);
-    } catch (e) {
-      // same as above but when it's a version of I.E. that must have the global object for 'this', hopfully our context correct otherwise it will throw a global error.
-      // Some versions of I.E. have different rules for clearTimeout vs setTimeout
-      return cachedClearTimeout.call(this, marker);
-    }
-  }
-}
-var queue = [];
-var draining = false;
-var currentQueue;
-var queueIndex = -1;
-function cleanUpNextTick() {
-  if (!draining || !currentQueue) {
-    return;
-  }
-  draining = false;
-  if (currentQueue.length) {
-    queue = currentQueue.concat(queue);
-  } else {
-    queueIndex = -1;
-  }
-  if (queue.length) {
-    drainQueue();
-  }
-}
-function drainQueue() {
-  if (draining) {
-    return;
-  }
-  var timeout = runTimeout(cleanUpNextTick);
-  draining = true;
-  var len = queue.length;
-  while (len) {
-    currentQueue = queue;
-    queue = [];
-    while (++queueIndex < len) {
-      if (currentQueue) {
-        currentQueue[queueIndex].run();
-      }
-    }
-    queueIndex = -1;
-    len = queue.length;
-  }
-  currentQueue = null;
-  draining = false;
-  runClearTimeout(timeout);
-}
-function nextTick(fun) {
-  var args = new Array(arguments.length - 1);
-  if (arguments.length > 1) {
-    for (var i = 1; i < arguments.length; i++) {
-      args[i - 1] = arguments[i];
-    }
-  }
-  queue.push(new Item(fun, args));
-  if (queue.length === 1 && !draining) {
-    runTimeout(drainQueue);
-  }
-}
-// v8 likes predictible objects
-function Item(fun, array) {
-  this.fun = fun;
-  this.array = array;
-}
-Item.prototype.run = function () {
-  this.fun.apply(null, this.array);
-};
-var title = 'browser';
-var platform = 'browser';
-var browser = true;
-var argv = [];
-var version = ''; // empty string to avoid regexp issues
-var versions = {};
-var release = {};
-var config = {};
-function noop() { }
-var on = noop;
-var addListener = noop;
-var once = noop;
-var off = noop;
-var removeListener = noop;
-var removeAllListeners = noop;
-var emit = noop;
-function binding(name) {
-  throw new Error('process.binding is not supported');
-}
-function cwd() { return '/' }
-function chdir(dir) {
-  throw new Error('process.chdir is not supported');
-} function umask() { return 0; }
-// from https://github.com/kumavis/browser-process-hrtime/blob/master/index.js
-var performance = globalContext.performance || {};
-var performanceNow =
-  performance.now ||
-  performance.mozNow ||
-  performance.msNow ||
-  performance.oNow ||
-  performance.webkitNow ||
-  function () { return (new Date()).getTime() };
-// generate timestamp or delta
-// see http://nodejs.org/api/process.html#process_process_hrtime
-function hrtime(previousTimestamp) {
-  var clocktime = performanceNow.call(performance) * 1e-3;
-  var seconds = Math.floor(clocktime);
-  var nanoseconds = Math.floor((clocktime % 1) * 1e9);
-  if (previousTimestamp) {
-    seconds = seconds - previousTimestamp[0];
-    nanoseconds = nanoseconds - previousTimestamp[1];
-    if (nanoseconds < 0) {
-      seconds--;
-      nanoseconds += 1e9;
-    }
-  }
-  return [seconds, nanoseconds]
-}
-var startTime = new Date();
-function uptime() {
-  var currentTime = new Date();
-  var dif = currentTime - startTime;
-  return dif / 1000;
-}
-var process = {
-  nextTick: nextTick,
-  title: title,
-  browser: browser,
-  env: { "NODE_ENV": "production" },
-  argv: argv,
-  version: version,
-  versions: versions,
-  on: on,
-  addListener: addListener,
-  once: once,
-  off: off,
-  removeListener: removeListener,
-  removeAllListeners: removeAllListeners,
-  emit: emit,
-  binding: binding,
-  cwd: cwd,
-  chdir: chdir,
-  umask: umask,
-  hrtime: hrtime,
-  platform: platform,
-  release: release,
-  config: config,
-  uptime: uptime
-};
 /**
  * Collection of shared utilities used by directives.
  * Manually added to ensure that directives can be used by both index.js and browser.js
@@ -285,153 +58,6 @@ function isDirective(fn) {
   return typeof fn === 'function' && fn.isDirective;
 }
-/**
- * Define new directive for "fn".
- * The passed function should be a factory function,
- * and must return a function that will eventually be called with a Part instance
- *
- * @param { (...args: Array<unknown>) => (part: Part) => void } fn
- * @returns { (...args: Array<unknown>) => (part: Part) => void }
- */
-function directive(fn) {
-  return function directive(...args) {
-    const result = fn(...args);
-    if (typeof result !== 'function') {
-      throw Error('directives are factory functions and must return a function when called');
-    }
-    // @ts-ignore
-    result.isDirective = true;
-    return result;
-  };
-}
-/* global ReadableStream */
-/**
- * A custom Readable stream factory for rendering a template result to a stream
- *
- * @param { TemplateResult } result - a template result returned from call to "html`...`"
- * @param { TemplateResultProcessor } processor
- * @param { RenderOptions } [options]
- * @returns { ReadableStream }
- */
-function browserStreamTemplateRenderer(result, processor, options) {
-  if (typeof ReadableStream === 'undefined') {
-    throw Error('ReadableStream not supported on this platform');
-  }
-  if (typeof TextEncoder === 'undefined') {
-    throw Error('TextEncoder not supported on this platform');
-  }
-  return new ReadableStream({
-    // @ts-ignore
-    process: null,
-    start(controller) {
-      const encoder = new TextEncoder();
-      const underlyingSource = this;
-      let stack = [result];
-      this.process = processor.getProcessor(
-        {
-          push(chunk) {
-            if (chunk === null) {
-              controller.close();
-              return false;
-            }
-            controller.enqueue(encoder.encode(chunk.toString()));
-            // Pause processing (return "false") if stream is full
-            return controller.desiredSize != null ? controller.desiredSize > 0 : true;
-          },
-          destroy(err) {
-            controller.error(err);
-            underlyingSource.process = undefined;
-            // @ts-ignore
-            stack = undefined;
-          },
-        },
-        stack,
-        16384,
-        options
-      );
-    },
-    pull() {
-      this.process();
-    },
-  });
-}
-/**
- * A minimal Buffer class that implements a partial brower Buffer API around strings.
- * This module should be provided as an alias for Node's built-in 'buffer' module
- * when run in the browser.
- * @see package.json#browser
- */
-class Buffer {
-  /**
-   * Determine if 'buffer' is a buffer
-   *
-   * @param { any } buffer
-   * @returns { boolean }
-   */
-  static isBuffer(buffer) {
-    return buffer != null && typeof buffer === 'object' && buffer.string !== undefined;
-  }
-  /**
-   * Create buffer from 'string'
-   *
-   * @param { string } string
-   * @returns { Buffer }
-   */
-  static from(string) {
-    string = typeof string === 'string' ? string : String(string);
-    return new Buffer(string);
-  }
-  /**
-   * Join 'buffers' into a single string
-   *
-   * @param { Array<any> } buffers
-   * @param { number } [length]
-   * @returns { Buffer }
-   */
-  static concat(buffers, length) {
-    let string = '';
-    for (let i = 0, n = buffers.length; i < n; i++) {
-      const buffer = buffers[i];
-      string += typeof buffer === 'string' ? buffer : String(buffer);
-    }
-    if (length !== undefined && string.length > length) {
-      string = string.slice(0, length);
-    }
-    return new Buffer(string);
-  }
-  /**
-   * Construct Buffer instance
-   *
-   * @param { string } string
-   */
-  constructor(string) {
-    this.string = string;
-  }
-  /**
-   * Stringify
-   *
-   * @returns { string }
-   */
-  toString() {
-    return this.string;
-  }
-}
 /**
  * Determine whether "result" is a TemplateResult
  *
@@ -443,17 +69,6 @@ function isTemplateResult(result) {
   return result && typeof result.template !== 'undefined' && typeof result.values !== 'undefined';
 }
-/**
- * Determine if "promise" is a Promise instance
- *
- * @param { unknown } promise
- * @returns { promise is Promise<unknown> }
- */
-function isPromise(promise) {
-  // @ts-ignore
-  return promise != null && promise.then != null;
-}
 /**
  * Determine if "iterator" is an synchronous iterator
  *
@@ -470,28 +85,6 @@ function isSyncIterator(iterator) {
   );
 }
-/**
- * Determine if "iterator" is an asynchronous iterator
- *
- * @param { unknown } iterator
- * @returns { iterator is AsyncIterable<unknown> }
- */
-function isAsyncIterator(iterator) {
-  // @ts-ignore
-  return iterator != null && typeof iterator[Symbol.asyncIterator] === 'function';
-}
-/**
- * Determine if "result" is an iterator result object
- *
- * @param { unknown } result
- * @returns { result is IteratorResult<unknown, unknown> }
- */
-function isIteratorResult(result) {
-  // @ts-ignore
-  return result != null && typeof result === 'object' && 'value' in result && 'done' in result;
-}
 /**
  * Determine if "value" is an object
  *
@@ -596,7 +189,7 @@ class Part {
   /**
    * No-op
    */
-  commit() { }
+  commit() {}
 }
 /**
@@ -652,11 +245,7 @@ class AttributePart extends Part {
     for (let i = 0; i < this.length; i++) {
       const string = this.strings[i];
-      let value = resolveAttributeValue(
-        values[i],
-        this,
-        options !== undefined ? options.serializePropertyAttributes : false
+      let value = resolveAttributeValue(values[i], this, options !== undefined ? options.serializePropertyAttributes : false);
-      );
       // Bail if 'nothing'
       if (value === nothing) {
@@ -669,23 +258,6 @@ class AttributePart extends Part {
       if (isBuffer(value)) {
         chunks.push(value);
         chunkLength += value.length;
-      } else if (isPromise(value)) {
-        // Lazy init for uncommon scenario
-        if (pendingChunks === undefined) {
-          pendingChunks = [];
-        }
-        // @ts-ignore
-        const index = chunks.push(value) - 1;
-        pendingChunks.push(
-          value.then((value) => {
-            // @ts-ignore
-            chunks[index] = value;
-            // @ts-ignore
-            chunkLength += value.length;
-          })
-        );
       } else if (isArray(value)) {
         for (const chunk of value) {
           chunks.push(chunk);
@@ -721,11 +293,7 @@ class BooleanAttributePart extends AttributePart {
     this.nameAsBuffer = Buffer.from(this.name);
-    if (
-      strings.length !== 2 ||
-      strings[0] === EMPTY_STRING_BUFFER ||
+    if (strings.length !== 2 || strings[0] === EMPTY_STRING_BUFFER || strings[1] === EMPTY_STRING_BUFFER) {
-      strings[1] === EMPTY_STRING_BUFFER
-    ) {
       throw Error('Boolean attributes can only contain a single expression');
     }
   }
@@ -744,10 +312,6 @@ class BooleanAttributePart extends AttributePart {
       value = resolveDirectiveValue(value, this);
     }
-    if (isPromise(value)) {
-      return value.then((value) => (value ? this.nameAsBuffer : EMPTY_STRING_BUFFER));
-    }
     return value ? this.nameAsBuffer : EMPTY_STRING_BUFFER;
   }
 }
@@ -770,9 +334,7 @@ class PropertyAttributePart extends AttributePart {
       const value = super.getValue(values, options);
       const prefix = Buffer.from('.');
-      return value instanceof Promise
-        ? value.then((value) => Buffer.concat([prefix, value]))
-        : Buffer.concat([prefix, value]);
+      return Buffer.concat([prefix, value]);
     }
     return EMPTY_STRING_BUFFER;
@@ -818,17 +380,13 @@ function resolveAttributeValue(value, part, serialiseObjectsAndArrays = false) {
   if (isPrimitive(value)) {
     const string = typeof value !== 'string' ? String(value) : value;
     // Escape if not prefixed with unsafePrefixString, otherwise strip prefix
-    return Buffer.from(
-      string.indexOf(unsafePrefixString) === 0 ? string.slice(33) : escape(string, 'attribute')
+    return Buffer.from(string.indexOf(unsafePrefixString) === 0 ? string.slice(33) : escape(string, 'attribute'));
-    );
   } else if (typeof value === 'object') {
     return Buffer.from(JSON.stringify(value).replace(/"/g, `'`));
   } else if (isBuffer(value)) {
     return value;
   } else if (serialiseObjectsAndArrays && (isObject(value) || isArray(value))) {
     return Buffer.from(escape(JSON.stringify(value), 'attribute'));
-  } else if (isPromise(value)) {
-    return value.then((value) => resolveAttributeValue(value, part, serialiseObjectsAndArrays));
   } else if (isSyncIterator(value)) {
     if (!isArray(value)) {
       value = Array.from(value);
@@ -843,7 +401,7 @@ function resolveAttributeValue(value, part, serialiseObjectsAndArrays = false) {
         }
         values.push(value);
         return values;
-      }, [])
+      }, []),
     );
   } else {
     return Buffer.from(String(value));
@@ -872,15 +430,10 @@ function resolveNodeValue(value, part) {
     return Buffer.from(
       string.indexOf(unsafePrefixString) === 0
         ? string.slice(33)
-        : escape(
-          string,
-          part.tagName === 'script' || part.tagName === 'style' ? part.tagName : 'text'
+        : escape(string, part.tagName === 'script' || part.tagName === 'style' ? part.tagName : 'text'),
-        )
     );
   } else if (isTemplateResult(value) || isBuffer(value)) {
     return value;
-  } else if (isPromise(value)) {
-    return value.then((value) => resolveNodeValue(value, part));
   } else if (isSyncIterator(value)) {
     if (!isArray(value)) {
       value = Array.from(value);
@@ -895,8 +448,6 @@ function resolveNodeValue(value, part) {
       values.push(value);
       return values;
     }, []);
-  } else if (isAsyncIterator(value)) {
-    return resolveAsyncIteratorValue(value, part);
   } else {
     throw Error(`unknown NodePart value: ${value}`);
   }
@@ -1035,37 +586,6 @@ class DefaultTemplateResultProcessor {
               breakLoop = !flushBuffer();
               processing = !breakLoop;
             }
-          } else if (isPromise(chunk)) {
-            // Flush buffered data before waiting for Promise
-            flushBuffer();
-            // "processing" is still true, so prevented from restarting until Promise resolved
-            breakLoop = true;
-            // Add pending Promise for value to stack
-            stack.unshift(chunk);
-            chunk
-              .then((chunk) => {
-                // Handle IteratorResults from AsyncIterator
-                if (isIteratorResult(chunk)) {
-                  if (chunk.done) {
-                    // Clear resolved Promise
-                    stack.shift();
-                    // Clear AsyncIterator
-                    stack.shift();
-                  } else {
-                    // Replace resolved Promise with IteratorResult value
-                    stack[0] = chunk.value;
-                  }
-                } else {
-                  // Replace resolved Promise with value
-                  stack[0] = chunk;
-                }
-                processing = false;
-                process();
-              })
-              .catch((err) => {
-                stack.length = 0;
-                renderer.destroy(err);
-              });
           } else if (isArray(chunk)) {
             // First remove existing Array if at top of stack (not added by pending TemplateResult)
             if (stack[0] === chunk) {
@@ -1073,14 +593,6 @@ class DefaultTemplateResultProcessor {
               stack.shift();
             }
             stack.unshift(...chunk);
-          } else if (isAsyncIterator(chunk)) {
-            popStack = false;
-            // Add AsyncIterator back to stack (will be cleared when done iterating)
-            if (stack[0] !== chunk) {
-              stack.unshift(chunk);
-            }
-            // Add pending Promise for IteratorResult to stack
-            stack.unshift(chunk[Symbol.asyncIterator]().next());
           } else {
             stack.length = 0;
             return renderer.destroy(Error(`unknown chunk type: ${chunk}`));
@@ -1165,96 +677,11 @@ function promiseTemplateRenderer(result, processor, asBuffer = false, options) {
       },
       stack,
       0,
-      options
+      options,
     )();
   });
 }
-/**
- * A minimal Readable stream class to prevent browser parse errors resulting from
- * the static importing of Node-only code.
- * This module should be provided as an alias for Node's built-in 'stream' module
- * when run in the browser.
- * @see package.json#browser
- */
-class Readable { }
-/**
- * Factory for StreamTemplateRenderer instances
- *
- * @param { TemplateResult } result - a template result returned from call to "html`...`"
- * @param { TemplateResultProcessor } processor
- * @param { RenderOptions } [options]
- * @returns { Readable }
- */
-function streamTemplateRenderer(result, processor, options) {
-  return new StreamTemplateRenderer(result, processor, options);
-}
-/**
- * A custom Readable stream class for rendering a template result to a stream
- */
-class StreamTemplateRenderer extends Readable {
-  /**
-   * Constructor
-   *
-   * @param { TemplateResult } result - a template result returned from call to "html`...`"
-   * @param { TemplateResultProcessor } processor
-   * @param { RenderOptions } [options]
-   */
-  constructor(result, processor, options) {
-    super({ autoDestroy: true });
-    this.stack = [result];
-    this.process = processor.getProcessor(this, this.stack, 16384, options);
-  }
-  /**
-   * Extend Readable.read()
-   */
-  _read() {
-    if (this.process !== undefined) {
-      this.process();
-    }
-  }
-  /**
-   * Extend Readalbe.destroy()
-   *
-   * @param { Error | null } [err]
-   */
-  _destroy(err) {
-    if (err) {
-      this.emit('error', err);
-    }
-    this.emit('close');
-    // @ts-ignore
-    this.process = undefined;
-    // @ts-ignore
-    this.stack = undefined;
-    this.removeAllListeners();
-  }
-}
-/**
- * @license
- * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
- * This code may only be used under the BSD style license found at
- * http://polymer.github.io/LICENSE.txt
- * The complete set of authors may be found at
- * http://polymer.github.io/AUTHORS.txt
- * The complete set of contributors may be found at
- * http://polymer.github.io/CONTRIBUTORS.txt
- * Code distributed by Google as part of the polymer project is also
- * subject to an additional IP rights grant found at
- * http://polymer.github.io/PATENTS.txt
- */
-/**
- * An expression marker with embedded unique key to avoid collision with
- * possible text in templates.
- */
-const marker = `{{lit-${String(Math.random()).slice(2)}}}`;
 /**
  * This regex extracts the attribute name preceding an attribute-position
  * expression. It does this by matching the syntax allowed for attributes
@@ -1305,11 +732,8 @@ class Template {
    * @param { TemplateProcessor } processor
    */
   constructor(strings, processor) {
-    /** @type { Array<Buffer | null> } */
     this.strings = [];
-    /** @type { Array<Part | null> } */
     this.parts = [];
     this._prepare(strings, processor);
   }
@@ -1381,11 +805,7 @@ class Template {
             part = processor.handleAttributeExpressions(name, attributeStrings, tagName);
           } else {
-            part = processor.handleAttributeExpressions(
-              name,
-              [EMPTY_STRING_BUFFER$1, EMPTY_STRING_BUFFER$1],
+            part = processor.handleAttributeExpressions(name, [EMPTY_STRING_BUFFER$1, EMPTY_STRING_BUFFER$1], tagName);
-              tagName
-            );
           }
         }
       } else {
@@ -1578,9 +998,6 @@ function reduce(buffer, chunks, chunk) {
     return EMPTY_STRING_BUFFER$2;
   } else if (isArray(chunk)) {
     return chunk.reduce((buffer, chunk) => reduce(buffer, chunks, chunk), buffer);
-  } else if (isPromise(chunk) || isAsyncIterator(chunk)) {
-    chunks.push(buffer, chunk);
-    return EMPTY_STRING_BUFFER$2;
   }
 }
@@ -1596,12 +1013,6 @@ const DEFAULT_TEMPLATE_FN = (value) => html`${value}`;
 const defaultTemplateProcessor = new DefaultTemplateProcessor();
 const defaultTemplateResultProcessor = new DefaultTemplateResultProcessor();
 const templateCache = new Map();
-const streamRenderer =
-  typeof process !== 'undefined' &&
-    typeof process.versions !== 'undefined' &&
-    typeof process.versions.node !== 'undefined'
-    ? streamTemplateRenderer
-    : browserStreamTemplateRenderer;
 /**
  * Interprets a template literal as an HTML template that can be
@@ -1622,17 +1033,6 @@ function html(strings, ...values) {
   return new TemplateResult(template, values);
 }
-/**
- * Render a template result to a Readable stream
- *
- * @param { unknown } result - a template result returned from call to "html`...`"
- * @param { RenderOptions } [options]
- * @returns { import('stream').Readable | ReadableStream }
- */
-function renderToStream(result, options) {
-  return streamRenderer(getRenderResult(result), defaultTemplateResultProcessor, options);
-}
 /**
  * Render a template result to a string resolving Promise.
  *
@@ -1641,28 +1041,7 @@ function renderToStream(result, options) {
  * @returns { Promise<string> }
  */
 function renderToString(result, options) {
-  return promiseTemplateRenderer(
-    getRenderResult(result),
-    defaultTemplateResultProcessor,
-    false,
-    options
-  );
-}
-/**
- * Render a template result to a Buffer resolving Promise.
- *
- * @param { unknown } result - a template result returned from call to "html`...`"
+  return promiseTemplateRenderer(getRenderResult(result), defaultTemplateResultProcessor, false, options);
- * @param { RenderOptions } [options]
- * @returns { Promise<Buffer> }
- */
-function renderToBuffer(result, options) {
-  return promiseTemplateRenderer(
-    getRenderResult(result),
-    defaultTemplateResultProcessor,
-    true,
-    options
-  );
 }
 /**
@@ -1676,4 +1055,30 @@ function getRenderResult(result) {
   return !isTemplateResult(result) ? DEFAULT_TEMPLATE_FN(result) : result;
 }
-export { AttributePart, BooleanAttributePart, DefaultTemplateProcessor, DefaultTemplateResultProcessor, EventAttributePart, NodePart, Part, PropertyAttributePart, Template, TemplateResult, defaultTemplateProcessor, defaultTemplateResultProcessor, directive, html, isAttributePart, isDirective, isNodePart, isTemplateResult, nothing, renderToBuffer, renderToStream, renderToString, html as svg, templateCache, unsafePrefixString };
+export {
+  AttributePart,
+  BooleanAttributePart,
+  DefaultTemplateProcessor,
+  DefaultTemplateResultProcessor,
+  EventAttributePart,
+  NodePart,
+  Part,
+  PropertyAttributePart,
+  Template,
+  TemplateResult,
+  defaultTemplateProcessor,
+  defaultTemplateResultProcessor,
+  directive,
+  html,
+  isAttributePart,
+  isDirective,
+  isNodePart,
+  isTemplateResult,
+  nothing,
+  renderToBuffer,
+  renderToStream,
+  renderToString,
+  html as svg,
+  templateCache,
+  unsafePrefixString,
+};

src/lit-html.js CHANGED Viewed

@@ -53,13 +53,13 @@ const directives = new WeakMap();
  * });
  */
 const directive =
-  f =>
+  (f) =>
   (...args) => {
     const d = f(...args);
     directives.set(d, true);
     return d;
   };
-const isDirective = o => {
+const isDirective = (o) => {
   return typeof o === 'function' && directives.has(o);
 };
@@ -304,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('');
@@ -488,7 +488,7 @@ class TemplateInstance {
  * before any untrusted expressions have been mixed in. Therefor it is
  * considered safe by construction.
  */
-const policy = typeof window !== 'undefined' && 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
@@ -601,10 +601,10 @@ 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');
 };
-const isIterable = value => {
+const isIterable = (value) => {
   return (
     Array.isArray(value) ||
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -999,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;
@@ -1041,7 +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 } : o.capture);
+const getOptions = (o) => o && (eventOptionsSupported ? { capture: o.capture, passive: o.passive, once: o.once } : o.capture);
 /**
  * @license

test/index.test.js CHANGED Viewed

@@ -18,7 +18,7 @@ import {
 const logMock = jest.fn();
 setLogError(logMock);
-const expectError = msg => expect(logMock).toHaveBeenCalledWith(msg);
+const expectError = (msg) => expect(logMock).toHaveBeenCalledWith(msg);
 const primitives = [
   {
@@ -41,7 +41,7 @@ const primitives = [
   },
 ];
-primitives.forEach(value =>
+primitives.forEach((value) =>
   it(`${value.type}`, () => {
     const context = 'key';
     expect(value.validator.type).toEqual(value.type);
@@ -57,7 +57,7 @@ primitives.forEach(value =>
       value.validator.validate(context, v);
       expectError(`'key' Expected type '${value.type}' got type '${typeof v}'`);
     }
-  })
+  }),
 );
 test('object', () => {
@@ -136,11 +136,23 @@ test('array', () => {
   expectError(`'items[1].street' Expected type 'string' got type 'boolean'`);
 });
+test('useConfig', async () => {
+  expect(useConfig()).toBe(undefined);
+  global.config = {};
+  expect(useConfig()).toMatchObject({});
+});
+test('useLocation', async () => {
+  expect(useLocation()).toBe(undefined);
+  global.location = {};
+  expect(useLocation()).toMatchObject({});
+});
 test('render', async () => {
   const data = { name: '123', address: { street: '1' } };
   const template = html`
     <div>
-      <app-counter name="123" details=${data}></app-counter>
+      <app-counter name="123" details="${data}"></app-counter>
     </div>
   `;
   const res = await render(template);
@@ -151,6 +163,20 @@ test('render', async () => {
   `);
 });
+test('render single template', async () => {
+  const template = html` <div>${html`NoCountry ${false}`}</div> `;
+  const res = await render(template);
+  expect(res).toEqual(` <div>NoCountry false</div> `);
+});
+test('render multu template', async () => {
+  const template = html` <div>${[1, 2].map((v) => html` <app-item meta="${{ index: v }}" @click=${() => {}} .handleClick=${() => {}}></app-item>`)}</div> `;
+  const res = await render(template);
+  expect(res).toEqual(
+    ` <div> <app-item meta="{'index':1}" @click=undefined .handleClick=undefined></app-item> <app-item meta="{'index':2}" @click=undefined .handleClick=undefined></app-item></div> `,
+  );
+});
 test('defineElement', async () => {
   const attrTypes = {
     address: object({
@@ -167,8 +193,8 @@ test('defineElement', async () => {
     `;
   };
   defineElement('app-item', AppItem, attrTypes);
-  const Clazz = getElement('app-item');
+  const { clazz } = getElement('app-item');
-  const instance = new Clazz([{ name: 'address', value: JSON.stringify({ street: '123' }).replace(/"/g, `'`) }]);
+  const instance = new clazz([{ name: 'address', value: JSON.stringify({ street: '123' }).replace(/"/g, `'`) }]);
   const res = await instance.render();
   expect(res).toEqual(`
       <div>
@@ -177,15 +203,3 @@ test('defineElement', async () => {
       </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({});
-});

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