Improved signature with xml, cache, and attribute

WebReflection · Jun 11, 2021 · 3ec1411 · 3ec1411
1 parent 39f52e8
commit 3ec1411
Show file tree

Hide file tree

Showing 4 changed files with 216 additions and 147 deletions.
diff --git a/cjs/index.js b/cjs/index.js
@@ -1,6 +1,12 @@
 'use strict';
 /*! (c) Andrea Giammarchi - ISC */
 
+class Bound {
+  constructor(_) {
+    this._ = _;
+  }
+}
+
 const empty = /^(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr)$/i;
 const er = '<☠>';
 const re = /^on([A-Z])/;
@@ -12,14 +18,17 @@ const place = (_, $) => ('@' + $.toLowerCase());
  * @param {any} value the attribute value.
  * @returns {object} An object with `name` and `value` fields.
  */
-const attribute = (name, value) => {
-  const type = typeof value;
-  switch (type) {
+const defaultAttribute = (name, value) => {
+  switch (typeof value) {
     case 'string':
+    case 'number':
       return {name, value};
     case 'boolean':
       return {name: '?' + name, value};
     case 'object':
+    case 'undefined':
+      if (value == null)
+        return {name, value};
       if (value instanceof Bound)
         return {name: '.' + name, value: value._};
   }
@@ -29,69 +38,80 @@ const attribute = (name, value) => {
 const bind = value => new Bound(value);
 exports.bind = bind;
 
+/**
+ * @typedef {object} config - optionally configure the pragma function
+ * @property {function} [attribute=defaultAttribute] - a `callback(name, value)` to return a `{name, value}` literal.
+ * @property {Map<string,string[]>} [cache=new Map] - a cache for already known/parsed templates.
+ * @property {boolean} [xml=false] - treat nodes as XML with self-closing tags.
+ */
+
 /**
  * Return an `h` / pragma function usable with JSX transformation.
- * @param {function} tag A template literal tag function to invoke.
- * @param {Map<string,string[]>?} cache A cache to avoid passing along different arrays per same template / values.
- * @returns {function} The `h` / pragma function to use with JSX.
+ * @param {function} tag a template literal tag function to invoke.
+ * @param {config={}} config an optional configuration object.
+ * @returns {function} the `h` / `React.createElement` like pragma function to use with JSX.
  */
-const createPragma = (tag, cache) => {
-  if (!cache)
-    cache = new Map;
-  return function h(entry, attributes, ...children) {
-    const component = typeof entry === 'function';
-    if (component && !('tagName' in entry)) {
-      (attributes || (attributes = {})).children = children;
-      return 'prototype' in entry ? new entry(attributes) : entry(attributes);
+const createPragma = (
+  tag,
+  {
+    attribute = defaultAttribute,
+    cache = new Map,
+    xml = false
+  } = {}
+) => function h(entry, attributes, ...children) {
+  const component = typeof entry === 'function';
+  // avoid dealing with µbe classes
+  if (component && !('tagName' in entry)) {
+    // pass {...props, children} to the component
+    (attributes || (attributes = {})).children = children;
+    return 'prototype' in entry ? new entry(attributes) : entry(attributes);
+  }
+  const template = ['<'];
+  const args = [template];
+  let i = 0;
+  if (component) {
+    args.push(entry);
+    i = template.push('') - 1;
+  }
+  else
+    template[i] += entry;
+  for (const key in attributes) {
+    const {name, value} = attribute(key, attributes[key]);
+    template[i] += ` ${name}="`;
+    args.push(value);
+    i = template.push('"') - 1;
+  }
+  const {length} = children;
+  template[i] += (length || !xml) ? '>' : ' />';
+  for (let child, j = 0; j < length; j++) {
+    child = children[j];
+    if (typeof child === 'string')
+      template[i] += child;
+    else {
+      args.push(child);
+      i = template.push('') - 1;
     }
-    const template = ['<'];
-    const args = [null];
-    let i = 0;
+  }
+  if (
+    length || (
+      !xml && (
+        (component && !empty.test(component.tagName)) ||
+        !empty.test(entry)
+      )
+    )
+  ) {
     if (component) {
+      template[i] += '</';
       args.push(entry);
-      i = template.push('') - 1;
+      template.push('>');
     }
     else
-      template[i] += entry;
-    for (const key in attributes) {
-      const {name, value} = attribute(key, attributes[key]);
-      args.push(value);
-      template[i] += ` ${name}="`;
-      i = template.push('"') - 1;
-    }
-    template[i] += '>';
-    const {length} = children;
-    for (let child, j = 0; j < length; j++) {
-      child = children[j];
-      if (typeof child === 'string')
-        template[i] += child;
-      else {
-        args.push(child);
-        i = template.push('') - 1;
-      }
-    }
-    if (
-      0 < length ||
-      (component && !empty.test(component.tagName)) ||
-      !empty.test(entry)
-    ) {
-      if (component) {
-        template[i] += '</';
-        args.push(entry);
-        template.push('>');
-      }
-      else
-        template[i] += `</${entry}>`;
-    }
-    const whole = template.join(er);
-    args[0] = cache.get(whole) || template;
-    if (args[0] === template)
-      cache.set(whole, template);
-    return tag.apply(this, args);
-  };
+      template[i] += `</${entry}>`;
+  }
+  const whole = template.join(er);
+  args[0] = cache.get(whole) || template;
+  if (args[0] === template)
+    cache.set(whole, template);
+  return tag.apply(this, args);
 };
 exports.createPragma = createPragma;
-
-function Bound(_) {
-  this._ = _;
-}
diff --git a/esm/index.js b/esm/index.js
@@ -1,5 +1,11 @@
 /*! (c) Andrea Giammarchi - ISC */
 
+class Bound {
+  constructor(_) {
+    this._ = _;
+  }
+}
+
 const empty = /^(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr)$/i;
 const er = '<☠>';
 const re = /^on([A-Z])/;
@@ -11,14 +17,17 @@ const place = (_, $) => ('@' + $.toLowerCase());
  * @param {any} value the attribute value.
  * @returns {object} An object with `name` and `value` fields.
  */
-const attribute = (name, value) => {
-  const type = typeof value;
-  switch (type) {
+const defaultAttribute = (name, value) => {
+  switch (typeof value) {
     case 'string':
+    case 'number':
       return {name, value};
     case 'boolean':
       return {name: '?' + name, value};
     case 'object':
+    case 'undefined':
+      if (value == null)
+        return {name, value};
       if (value instanceof Bound)
         return {name: '.' + name, value: value._};
   }
@@ -27,70 +36,79 @@ const attribute = (name, value) => {
 
 export const bind = value => new Bound(value);
 
+/**
+ * @typedef {object} config - optionally configure the pragma function
+ * @property {function} [attribute=defaultAttribute] - a `callback(name, value)` to return a `{name, value}` literal.
+ * @property {Map<string,string[]>} [cache=new Map] - a cache for already known/parsed templates.
+ * @property {boolean} [xml=false] - treat nodes as XML with self-closing tags.
+ */
+
 /**
  * Return an `h` / pragma function usable with JSX transformation.
- * @param {function} tag A template literal tag function to invoke.
- * @param {Map<string,string[]>?} cache A cache to avoid passing along different arrays per same template / values.
- * @returns {function} The `h` / pragma function to use with JSX.
+ * @param {function} tag a template literal tag function to invoke.
+ * @param {config={}} config an optional configuration object.
+ * @returns {function} the `h` / `React.createElement` like pragma function to use with JSX.
  */
-export const createPragma = (tag, cache) => {
-  if (!cache)
-    cache = new Map;
-  return function h(entry, attributes, ...children) {
-    const component = typeof entry === 'function';
-    // avoid dealing with ube classes
-    if (component && !('tagName' in entry)) {
-      // pass {...props, children} to the component
-      (attributes || (attributes = {})).children = children;
-      return 'prototype' in entry ? new entry(attributes) : entry(attributes);
+export const createPragma = (
+  tag,
+  {
+    attribute = defaultAttribute,
+    cache = new Map,
+    xml = false
+  } = {}
+) => function h(entry, attributes, ...children) {
+  const component = typeof entry === 'function';
+  // avoid dealing with µbe classes
+  if (component && !('tagName' in entry)) {
+    // pass {...props, children} to the component
+    (attributes || (attributes = {})).children = children;
+    return 'prototype' in entry ? new entry(attributes) : entry(attributes);
+  }
+  const template = ['<'];
+  const args = [template];
+  let i = 0;
+  if (component) {
+    args.push(entry);
+    i = template.push('') - 1;
+  }
+  else
+    template[i] += entry;
+  for (const key in attributes) {
+    const {name, value} = attribute(key, attributes[key]);
+    template[i] += ` ${name}="`;
+    args.push(value);
+    i = template.push('"') - 1;
+  }
+  const {length} = children;
+  template[i] += (length || !xml) ? '>' : ' />';
+  for (let child, j = 0; j < length; j++) {
+    child = children[j];
+    if (typeof child === 'string')
+      template[i] += child;
+    else {
+      args.push(child);
+      i = template.push('') - 1;
     }
-    const template = ['<'];
-    const args = [null];
-    let i = 0;
+  }
+  if (
+    length || (
+      !xml && (
+        (component && !empty.test(component.tagName)) ||
+        !empty.test(entry)
+      )
+    )
+  ) {
     if (component) {
+      template[i] += '</';
       args.push(entry);
-      i = template.push('') - 1;
+      template.push('>');
     }
     else
-      template[i] += entry;
-    for (const key in attributes) {
-      const {name, value} = attribute(key, attributes[key]);
-      args.push(value);
-      template[i] += ` ${name}="`;
-      i = template.push('"') - 1;
-    }
-    template[i] += '>';
-    const {length} = children;
-    for (let child, j = 0; j < length; j++) {
-      child = children[j];
-      if (typeof child === 'string')
-        template[i] += child;
-      else {
-        args.push(child);
-        i = template.push('') - 1;
-      }
-    }
-    if (
-      0 < length ||
-      (component && !empty.test(component.tagName)) ||
-      !empty.test(entry)
-    ) {
-      if (component) {
-        template[i] += '</';
-        args.push(entry);
-        template.push('>');
-      }
-      else
-        template[i] += `</${entry}>`;
-    }
-    const whole = template.join(er);
-    args[0] = cache.get(whole) || template;
-    if (args[0] === template)
-      cache.set(whole, template);
-    return tag.apply(this, args);
-  };
+      template[i] += `</${entry}>`;
+  }
+  const whole = template.join(er);
+  args[0] = cache.get(whole) || template;
+  if (args[0] === template)
+    cache.set(whole, template);
+  return tag.apply(this, args);
 };
-
-function Bound(_) {
-  this._ = _;
-}