perf: cache the class token value and skip the token list while parsing

cjs/dom/token-list.js

@@ -1,5 +1,5 @@
 'use strict';
-const {OWNER_ELEMENT} = require('../shared/symbols.js');
+const {OWNER_ELEMENT, VALUE} = require('../shared/symbols.js');
 const {setAttribute} = require('../shared/attributes.js');
 
 const {Attr} = require('../interface/attr.js');
@@ -10,6 +10,7 @@ const addTokens = (self, tokens) => {
     if (token)
       add.call(self, token);
   }
+  self[VALUE] = null;
 };
 
 const update = ({[OWNER_ELEMENT]: ownerElement, value}) => {
@@ -31,14 +32,31 @@ class DOMTokenList extends Set {
   constructor(ownerElement) {
     super();
     this[OWNER_ELEMENT] = ownerElement;
+    // the joined value is asked for by every class selector: keep it until a token changes
+    this[VALUE] = null;
     const attribute = ownerElement.getAttributeNode('class');
     if (attribute)
       addTokens(this, attribute.value.split(/\s+/));
   }
 
   get length() { return this.size; }
 
-  get value() { return [...this].join(' '); }
+  get value() {
+    return this[VALUE] || (this[VALUE] = [...this].join(' '));
+  }
+
+  clear() {
+    this[VALUE] = null;
+    super.clear();
+  }
+
+  /**
+   * @param {string} token
+   */
+  delete(token) {
+    this[VALUE] = null;
+    return super.delete(token);
+  }
 
   /**
    * @param  {...string} tokens
@@ -74,6 +92,7 @@ class DOMTokenList extends Set {
       update(this);
     }
     else if (force || arguments.length === 1) {
+      this[VALUE] = null;
       super.add(token);
       update(this);
       return true;
@@ -89,6 +108,7 @@ class DOMTokenList extends Set {
     if (this.has(token)) {
       this.delete(token);
       super.add(newToken);
+      this[VALUE] = null;
       update(this);
       return true;
     }

cjs/html/document.js

@@ -10,9 +10,10 @@ const {customElements} = require('../interface/custom-element-registry.js');
 const {HTMLElement} = require('./element.js');
 
 const createHTMLElement = (ownerDocument, builtin, localName, options) => {
-  if (!builtin && htmlClasses.has(localName)) {
+  if (!builtin) {
     const Class = htmlClasses.get(localName);
-    return new Class(ownerDocument, localName);
+    if (Class)
+      return new Class(ownerDocument, localName);
   }
   const {[CUSTOM_ELEMENTS]: {active, registry}} = ownerDocument;
   if (active) {

cjs/shared/parse-from-string.js

@@ -27,12 +27,23 @@ const append = (self, node, active) => {
   return node;
 };
 
+/** Same tokens as a DOMTokenList would hold: no empty entries, no duplicates, single spaces. */
+const classTokens = value => {
+  const tokens = [];
+  for (const token of value.split(/\s+/)) {
+    if (token && !tokens.includes(token))
+      tokens.push(token);
+  }
+  return tokens.join(' ');
+};
+
 const attribute = (element, end, attribute, value, active) => {
   attribute[VALUE] = value;
   attribute.ownerElement = element;
   knownSiblings(end[PREV], attribute, end);
+  // the token list is built on demand: while it does not exist, only the value needs the tokens
   if (attribute.name === 'class')
-    element.className = value;
+    attribute[VALUE] = classTokens(value);
   if (active)
     attributeChangedCallback(element, attribute.name, null, value);
 };

esm/dom/token-list.js

@@ -1,4 +1,4 @@
-import {OWNER_ELEMENT} from '../shared/symbols.js';
+import {OWNER_ELEMENT, VALUE} from '../shared/symbols.js';
 import {setAttribute} from '../shared/attributes.js';
 
 import {Attr} from '../interface/attr.js';
@@ -9,6 +9,7 @@ const addTokens = (self, tokens) => {
     if (token)
       add.call(self, token);
   }
+  self[VALUE] = null;
 };
 
 const update = ({[OWNER_ELEMENT]: ownerElement, value}) => {
@@ -30,14 +31,31 @@ export class DOMTokenList extends Set {
   constructor(ownerElement) {
     super();
     this[OWNER_ELEMENT] = ownerElement;
+    // the joined value is asked for by every class selector: keep it until a token changes
+    this[VALUE] = null;
     const attribute = ownerElement.getAttributeNode('class');
     if (attribute)
       addTokens(this, attribute.value.split(/\s+/));
   }
 
   get length() { return this.size; }
 
-  get value() { return [...this].join(' '); }
+  get value() {
+    return this[VALUE] || (this[VALUE] = [...this].join(' '));
+  }
+
+  clear() {
+    this[VALUE] = null;
+    super.clear();
+  }
+
+  /**
+   * @param {string} token
+   */
+  delete(token) {
+    this[VALUE] = null;
+    return super.delete(token);
+  }
 
   /**
    * @param  {...string} tokens
@@ -73,6 +91,7 @@ export class DOMTokenList extends Set {
       update(this);
     }
     else if (force || arguments.length === 1) {
+      this[VALUE] = null;
       super.add(token);
       update(this);
       return true;
@@ -88,6 +107,7 @@ export class DOMTokenList extends Set {
     if (this.has(token)) {
       this.delete(token);
       super.add(newToken);
+      this[VALUE] = null;
       update(this);
       return true;
     }

esm/html/document.js

@@ -9,9 +9,10 @@ import {customElements} from '../interface/custom-element-registry.js';
 import {HTMLElement} from './element.js';
 
 const createHTMLElement = (ownerDocument, builtin, localName, options) => {
-  if (!builtin && htmlClasses.has(localName)) {
+  if (!builtin) {
     const Class = htmlClasses.get(localName);
-    return new Class(ownerDocument, localName);
+    if (Class)
+      return new Class(ownerDocument, localName);
   }
   const {[CUSTOM_ELEMENTS]: {active, registry}} = ownerDocument;
   if (active) {

esm/shared/parse-from-string.js

@@ -26,12 +26,23 @@ const append = (self, node, active) => {
   return node;
 };
 
+/** Same tokens as a DOMTokenList would hold: no empty entries, no duplicates, single spaces. */
+const classTokens = value => {
+  const tokens = [];
+  for (const token of value.split(/\s+/)) {
+    if (token && !tokens.includes(token))
+      tokens.push(token);
+  }
+  return tokens.join(' ');
+};
+
 const attribute = (element, end, attribute, value, active) => {
   attribute[VALUE] = value;
   attribute.ownerElement = element;
   knownSiblings(end[PREV], attribute, end);
+  // the token list is built on demand: while it does not exist, only the value needs the tokens
   if (attribute.name === 'class')
-    element.className = value;
+    attribute[VALUE] = classTokens(value);
   if (active)
     attributeChangedCallback(element, attribute.name, null, value);
 };

types/esm/dom/token-list.d.ts

@@ -4,7 +4,11 @@
 export class DOMTokenList extends Set<any> implements globalThis.DOMTokenList {
     constructor(ownerElement: any);
     get length(): number;
-    get value(): string;
+    get value(): any;
+    /**
+     * @param {string} token
+     */
+    delete(token: string): boolean;
     /**
      * @param  {...string} tokens
      */
@@ -31,6 +35,4 @@ export class DOMTokenList extends Set<any> implements globalThis.DOMTokenList {
      * @param {string} token
      */
     supports(): boolean;
-    [OWNER_ELEMENT]: any;
 }
-import { OWNER_ELEMENT } from '../shared/symbols.js';