use optdata()

src/core/inline-idl-parser.js

@@ -2,9 +2,9 @@
 // Parses an inline IDL string (`{{ idl string }}`)
 //  and renders its components as HTML
 
+import { optdata, showInlineError } from "./utils";
 import hyperHTML from "nanohtml";
 import raw from "nanohtml/raw";
-import { showInlineError } from "./utils";
 const idlPrimitiveRegex = /^[a-z]+(\s+[a-z]+)+$/; // {{unrestricted double}} {{ double }}
 const exceptionRegex = /\B"([^"]*)"\B/; // {{ "SomeException" }}
 const methodRegex = /(\w+)\((.*)\)$/;
@@ -154,15 +154,12 @@ function renderInternalSlot(details) {
   const { identifier, parent, renderParent } = details;
   const { identifier: linkFor } = parent || {};
   const lt = `[[${identifier}]]`;
-  const dot = parent && renderParent ? "." : "";
-  const anchor = hyperHTML`<a
+  const html = hyperHTML`${parent && renderParent ? "." : ""}[[<a
     data-xref-type="attribute"
-    data-lt="${lt}">${identifier}</a>`;
-  if (linkFor) {
-    anchor.dataset.linkFor = linkFor;
-    anchor.dataset.xrefFor = linkFor;
-  }
-  return hyperHTML`${dot}[[${anchor}]]${""}`; // TODO: remove dangling empty string
+    ${optdata("link-for", linkFor)}
+    ${optdata("xref-for", linkFor)}
+    data-lt="${lt}">${identifier}</a>]]`;
+  return html;
 }
 
 /**
@@ -207,15 +204,13 @@ function renderMethod(details) {
 function renderEnum(details) {
   const { identifier, enumValue, parent } = details;
   const forContext = parent ? parent.identifier : identifier;
-  const anchor = hyperHTML`<a
+  const html = hyperHTML`"<a
     data-xref-type="enum-value"
     data-link-for="${forContext}"
     data-xref-for="${forContext}"
-    >${enumValue}</a>`;
-  if (!enumValue) {
-    anchor.dataset.lt = "the-empty-string";
-  }
-  return hyperHTML`"${anchor}"`;
+    ${optdata("lt", !enumValue ? "the-empty-string" : null)}
+    >${enumValue}</a>"`;
+  return html;
 }
 
 /**

src/core/inlines.js

@@ -10,6 +10,7 @@ import {
   InsensitiveStringSet,
   getTextNodes,
   norm,
+  optdata,
   refTypeFromContext,
   showInlineError,
   showInlineWarning,
@@ -138,11 +139,7 @@ function inlineVariableMatches(matched) {
   // remove "|" at the beginning and at the end, then split at an optional `:`
   const matches = matched.slice(1, -1).split(":", 2);
   const [varName, type] = matches.map(s => s.trim());
-  const element = hyperHTML`<var>${varName}</var>`;
-  if (type) {
-    element.dataset.type = type;
-  }
-  return element;
+  return hyperHTML`<var ${optdata("type", type)}>${varName}</var>`;
 }
 
 /**
@@ -161,15 +158,10 @@ function inlineAnchorMatches(matched) {
     : [null, content];
   const processedContent = processInlineContent(text);
   const forContext = isFor ? norm(isFor) : null;
-  const anchor = hyperHTML`<a>${processedContent}</a>`;
-  if (forContext) {
-    anchor.dataset.linkFor = forContext;
-    anchor.dataset.xrefFor = forContext;
-  }
-  if (linkingText) {
-    anchor.dataset.lt = linkingText;
-  }
-  return anchor;
+  return hyperHTML`<a
+    ${optdata("link-for", forContext)}
+    ${optdata("xref-for", forContext)}
+    ${optdata("lt", linkingText)}>${processedContent}</a>`;
 }
 
 function inlineCodeMatches(matched) {

src/core/utils.js

@@ -851,3 +851,16 @@ function* walkTree(walker) {
     yield /** @type {T} */ (walker.currentNode);
   }
 }
+
+/**
+ * Generates an object with data-${name} field, useful for templating libraries.
+ * @param {string} dataAttrName
+ * @param {*} value
+ */
+export function optdata(dataAttrName, value) {
+  if (value == null) {
+    // null or undefined
+    return {};
+  }
+  return { [`data-${dataAttrName}`]: value };
+}

src/core/webidl.js

@@ -6,7 +6,12 @@
 //  - don't use generated content in the CSS!
 import * as webidl2 from "webidl2";
 import { decorateDfn, findDfn } from "./dfn-finder.js";
-import { flatten, showInlineError, showInlineWarning } from "./utils.js";
+import {
+  flatten,
+  optdata,
+  showInlineError,
+  showInlineWarning,
+} from "./utils.js";
 import css from "text!../../assets/webidl.css";
 import hyperHTML from "nanohtml";
 import { registerDefinition } from "./dfn-map.js";
@@ -66,14 +71,10 @@ const templates = {
         }
       }
     }
-    const anchor = hyperHTML`<a data-xref-type="${type}">${wrapped}</a>`;
-    if (cite) {
-      anchor.dataset.cite = cite;
-    }
-    if (lt) {
-      anchor.dataset.lt = lt;
-    }
-    return anchor;
+    return hyperHTML`<a
+      data-xref-type="${type}"
+      ${optdata("cite", cite)}
+      ${optdata("lt", lt)}>${wrapped}</a>`;
   },
   name(escaped, { data, parent }) {
     if (data.idlType && data.idlType.type === "argument-type") {
@@ -162,13 +163,11 @@ function defineIdlName(escaped, data, parent) {
   }
 
   const unlinkedAnchor = hyperHTML`<a
+    ${optdata("idl", data.partial ? "partial" : null)}
     data-link-type="${linkType}"
     data-title="${data.name}"
     data-xref-type="${linkType}"
     >${escaped}</a>`;
-  if (data.partial) {
-    unlinkedAnchor.dataset.idl = "partial";
-  }
 
   const showWarnings =
     name && data.type !== "typedef" && !(data.partial && !dfn);

src/w3c/templates/sotd.js

@@ -1,5 +1,6 @@
 // @ts-check
 import html from "nanohtml";
+import { optdata } from "../../core/utils";
 import raw from "nanohtml/raw";
 
 export default (conf, opts) => {
@@ -218,8 +219,8 @@ function renderDeliverer(conf) {
   const wontBeRec = recNotExpected
     ? "The group does not expect this document to become a W3C Recommendation."
     : "";
-  const paragraph = html`
-    <p>
+  return html`
+    <p ${optdata("deliverer", isNote ? wgId : null)}>
       ${producers} ${wontBeRec}
       ${!isNote && !isIGNote
         ? html`
@@ -258,10 +259,6 @@ function renderDeliverer(conf) {
         : ""}
     </p>
   `;
-  if (isNote) {
-    paragraph.dataset.deliverer = wgId;
-  }
-  return paragraph;
 }
 
 function noteForSubmission(conf, opts) {