PNG: refactor explorer to avoid a class (no user impact)

public/png/explorer.js

@@ -1,6 +1,6 @@
 // @ts-check
 
-import crel from "../common/crel.js";
+import crel, { fragment } from "../common/crel.js";
 import formatBytes from "../common/formatBytes.js";
 /** @typedef {import("./nodePath.js").NodePath} NodePath */
 /** @typedef {import("../../types/png.d.ts").PngNode} PngNode */
@@ -11,21 +11,27 @@ import formatBytes from "../common/formatBytes.js";
  * @returns {NodeUi}
  */
 
-class Explorer {
-  #bytesEl = crel("div", { class: "bytes" });
-  #treeEl = crel("div", { class: "tree" });
-
-  /**
+/**
  * @param {PngNode} rootNode
  * @param {NodeUiFn} getNodeUi
+ * @returns {DocumentFragment}
  */
-  constructor(rootNode, getNodeUi) {
-    /**
+export default (rootNode, getNodeUi) => {
+  const [bytesRootEl, treeRootEl] = traverse(rootNode, [], getNodeUi);
+
+  const outerBytesEl = crel("div", { class: "bytes" }, bytesRootEl);
+  const outerTreeEl = crel("div", { class: "tree" }, treeRootEl);
+
+  return fragment(outerBytesEl, outerTreeEl);
+};
+
+/**
  * @param {PngNode} node
  * @param {NodePath} path
+ * @param {NodeUiFn} getNodeUi
  * @returns [HTMLElement, HTMLElement] Each node's bytes and tree elements.
  */
-    const traverse = (node, path) => {
+const traverse = (node, path, getNodeUi) => {
   const nodeBytesEl = crel("span", { "data-path": path });
 
   const isRoot = path.length === 0;
@@ -52,6 +58,7 @@ class Explorer {
       const [childBytesEl, childTreeEl] = traverse(
         child,
         path.concat(index),
+        getNodeUi,
       );
       if (index > 0) nodeBytesEl.append(" ");
       nodeBytesEl.append(childBytesEl);
@@ -63,21 +70,4 @@ class Explorer {
   }
 
   return [nodeBytesEl, nodeTreeEl];
-    };
-
-    // TODO: better variable names
-    const [a, b] = traverse(rootNode, []);
-    this.#bytesEl.append(a);
-    this.#treeEl.append(b);
-
-    this.el = document.createDocumentFragment();
-    this.el.append(this.#bytesEl, this.#treeEl);
-  }
-}
-
-/**
- * @param {PngNode} rootNode
- * @param {NodeUiFn} getNodeUi
- * @returns {DocumentFragment}
- */
-export default (rootNode, getNodeUi) => new Explorer(rootNode, getNodeUi).el;
+};