slight template framework cleanup

web/main.js

@@ -108,8 +108,8 @@ const pokemonDisplayLookup = Object.fromEntries(
       .replace(/ F$/, " ♀");
     let spriteName = name.toLowerCase();
     if (
-      ["alcremie", "minior", "wobbuffet", "hippopotas", "hippowdon", "unfezant"].find(
-        s => spriteName.includes(s)
+      ["alcremie", "minior", "wobbuffet", "hippopotas", "hippowdon", "unfezant"].find(s =>
+        spriteName.includes(s)
       )
     ) {
       spriteName = species.toLowerCase();
@@ -223,29 +223,41 @@ const makeTemplate = (id, definition = () => ({})) => {
         return [name, element];
       })
     );
-    Object.entries(definition(...args))
-      .map(([name, settings]) => [binds[name], settings])
-      .filter(([bind]) => !!bind)
-      .forEach(([bind, settings]) =>
-        Object.entries(settings).forEach(([setting, value]) => {
-          if (setting.startsWith("@")) {
-            bind.addEventListener(setting.slice(1), value);
-          } else if (setting.startsWith("--")) {
-            bind.style.setProperty(setting, value);
-          } else if (setting === "dataset") {
-            Object.entries(value).forEach(([key, data]) => (bind.dataset[key] = data));
-          } else if (setting === "append") {
-            if (Array.isArray(value)) {
-              bind.append(...value);
+    const children = Array.from(content.children);
+    const update = (...args) => {
+      Object.entries(definition(...args))
+        .map(([name, settings]) => [binds[name], settings])
+        .filter(([bind]) => !!bind)
+        .forEach(([bind, settings]) =>
+          Object.entries(settings).forEach(([setting, value]) => {
+            if (setting.startsWith("@")) {
+              bind.addEventListener(setting.slice(1), value);
+            } else if (setting.startsWith("--")) {
+              bind.style.setProperty(setting, value);
+            } else if (setting === "dataset") {
+              Object.entries(value).forEach(([key, data]) => (bind.dataset[key] = data));
+            } else if (setting === "append") {
+              if (Array.isArray(value)) {
+                bind.append(...value);
+              } else {
+                bind.append(value);
+              }
             } else {
-              bind.append(value);
+              bind[setting] = value;
             }
-          } else {
-            bind[setting] = value;
-          }
-        })
-      );
-    return [fragment, binds];
+          })
+        );
+    };
+    update(...args);
+    return {
+      mount: root =>
+        (typeof root === "string" ? document.querySelector(root) : root).append(fragment),
+      unmount: () => children.forEach(c => c.remove()),
+      update,
+      children,
+      firstElementChild: fragment.firstElementChild,
+      fragment,
+    };
   };
 };
 
@@ -268,14 +280,15 @@ const nameSearchFormElements = document.forms.nameSearchForm.elements;
 // ---- Add Metric Selects ----
 
 const createMetricSelect = makeTemplate("metric-select-template");
-const [{ firstElementChild: sortMetricForm }] = createMetricSelect();
-const [{ firstElementChild: clusterMetricForm }] = createMetricSelect();
-
-document.getElementById("sort-metric-mount").append(sortMetricForm);
+const { firstElementChild: sortMetricForm, mount: mountSortMetricForm } =
+  createMetricSelect();
 sortMetricForm.elements.metricKind.value = "compare";
+mountSortMetricForm("#sort-metric-mount");
 
-document.getElementById("cls-metric-mount").append(clusterMetricForm);
+const { firstElementChild: clusterMetricForm, mount: mountClusterMetricForm } =
+  createMetricSelect();
 clusterMetricForm.elements.metricKind.value = "stat";
+mountClusterMetricForm("#cls-metric-mount");
 
 const updateMetricSelects = form => {
   const kind = form.elements.metricKind.value;
@@ -383,7 +396,7 @@ const createPokemonTile = makeTemplate(
           ...getColorStyles(data.hex),
         },
         [tooltip]: {
-          append: createPokemonTooltip(data)[0],
+          append: createPokemonTooltip(data).fragment,
         },
         [infoHover]: {
           "@mouseenter"({ target }) {
@@ -430,7 +443,7 @@ const renderPokemon = (list, target) => {
 
   target.append(
     ...list.map(
-      pkmn => createPokemonTile(pkmn, !!sortUseWholeImage, enableClusterFlags)[0]
+      pkmn => createPokemonTile(pkmn, !!sortUseWholeImage, enableClusterFlags).fragment
     )
   );
 };