refactor: simplify render helper to reduce size (#97)

Author: web-padawan

Diff for: package.json

@@ -168,7 +168,7 @@
     },
     {
       "path": "hsl-string-color-picker.js",
-      "limit": "2.7 KB"
+      "limit": "2.6 KB"
     },
     {
       "path": "hsla-color-picker.js",
@@ -184,7 +184,7 @@
     },
     {
       "path": "hsv-string-color-picker.js",
-      "limit": "2.7 KB"
+      "limit": "2.6 KB"
     },
     {
       "path": "hsva-color-picker.js",
@@ -204,7 +204,7 @@
     },
     {
       "path": "rgba-color-picker.js",
-      "limit": "2.95 KB"
+      "limit": "2.9 KB"
     },
     {
       "path": "rgba-string-color-picker.js",

Diff for: src/lib/components/color-picker.ts

@@ -1,5 +1,5 @@
 import { equalColorObjects } from '../utils/compare.js';
-import { fire, tpl } from '../utils/dom.js';
+import { fire, render } from '../utils/dom.js';
 import type { AnyColor, ColorModel, HsvaColor } from '../types';
 import { Hue } from './hue.js';
 import { Saturation } from './saturation.js';
@@ -54,9 +54,8 @@ export abstract class ColorPicker<C extends AnyColor> extends HTMLElement {
 
   constructor() {
     super();
-    const template = tpl(`<style>${this[$css].join('')}</style>`);
     const root = this.attachShadow({ mode: 'open' });
-    root.appendChild(template.content.cloneNode(true));
+    render(root, `<style>${this[$css].join('')}</style>`);
     root.addEventListener('move', this);
     this[$parts] = this[$sliders].map((slider) => new slider(root));
   }

Diff for: src/lib/components/slider.ts

@@ -1,5 +1,5 @@
 import type { HsvaColor } from '../types.js';
-import { fire, tpl } from '../utils/dom.js';
+import { fire, render } from '../utils/dom.js';
 import { clamp } from '../utils/math.js';
 
 export interface Offset {
@@ -81,10 +81,10 @@ export abstract class Slider {
   declare xy: boolean;
 
   constructor(root: ShadowRoot, part: string, aria: string, xy: boolean) {
-    const template = tpl(
+    render(
+      root,
       `<div role="slider" tabindex="0" part="${part}" ${aria}><div part="${part}-pointer"></div></div>`
     );
-    root.appendChild(template.content.cloneNode(true));
 
     const el = root.querySelector(`[part=${part}]`) as HTMLElement;
     el.addEventListener('mousedown', this);

Diff for: src/lib/entrypoints/hex-input.ts

@@ -1,8 +1,6 @@
 import type { ColorPickerEventListener, ColorPickerEventMap } from '../types';
 import { validHex } from '../utils/validate.js';
-import { tpl } from '../utils/dom.js';
-
-const template = tpl('<slot><input part="input" spellcheck="false"></slot>');
+import { render } from '../utils/dom.js';
 
 // Escapes all non-hexadecimal characters including "#"
 const escape = (hex: string, alpha: boolean) =>
@@ -85,7 +83,7 @@ export class HexInputBase extends HTMLElement {
     super();
 
     const root = this.attachShadow({ mode: 'open' });
-    root.appendChild(template.content.cloneNode(true));
+    render(root, '<slot><input part="input" spellcheck="false"></slot>');
     const slot = root.firstElementChild as HTMLSlotElement;
     slot.addEventListener('slotchange', () => this[$init](root));
   }

Diff for: src/lib/utils/dom.ts

@@ -1,13 +1,13 @@
 const cache: Record<string, HTMLTemplateElement> = {};
 
-export const tpl = (html: string): HTMLTemplateElement => {
+export const render = (root: ShadowRoot, html: string): void => {
   let template = cache[html];
   if (!template) {
     template = document.createElement('template');
     template.innerHTML = html;
     cache[html] = template;
   }
-  return template;
+  root.appendChild(template.content.cloneNode(true));
 };
 
 export const fire = (target: HTMLElement, type: string, detail: Record<string, unknown>): void => {