fix: Implement # private members in MySiteCounterElement (#38)(#63)

Author: nfreear

src/components/MySiteCounterElement.js

@@ -17,76 +17,77 @@ export class MySiteCounterElement extends HTMLElement {
   static getTag () { return 'my-site-counter'; }
 
   /** @return {string} */
-  get gcid () {
+  get #gcid () {
     const GC_ID = this.getAttribute('gcid');
     if (GC_ID) return GC_ID;
     throw new Error('The "gcid" required attribute is missing.');
   }
 
-  get _guardLocalhost () {
-    if (this.getAttribute('allow-localhost')) return true;
+  get #guardLocalhost () {
+    if (this.hasAttribute('allow-localhost')) return true;
     if (location.hostname === 'localhost') return false;
 
     return true;
   }
 
-  get _guardMyself () {
+  get #guardMyself () {
     return location.hash !== '#toggle-goatcounter';
   }
 
   connectedCallback () {
-    if (!this._guardMyself) {
+    if (!this.#guardMyself) {
       return console.debug('my-site-counter:', 'Not counting myself!');
     }
-    if (!this._guardLocalhost) {
+    if (!this.#guardLocalhost) {
       return console.debug('my-site-counter:', 'Not counting localhost');
     }
 
-    const imgElement = this._createPixelImageElement();
+    const imgElement = this.#createPixelImageElement();
 
     this.attachShadow({ mode: 'open' }).appendChild(imgElement);
   }
 
-  _createPixelImageElement () {
+  #createPixelImageElement () {
     const IMG = document.createElement('img');
 
-    IMG.src = this._goatCounterImageUrl;
+    IMG.src = this.#goatCounterImageUrl;
     IMG.alt = ''; // Accessibility: a decorative image.
     IMG.setAttribute('aria-hidden', true);
     IMG.loading = 'eager';
     IMG.onerror = (ev) => {
       const { target } = ev; // error, message - Undefined (cross-origin).
-      console.error('my-site-counter ERROR:', this.gcid, IMG.src, target, ev);
+      console.error('my-site-counter ERROR:', this.#gcid, IMG.src, target, ev);
     };
     IMG.onload = (ev) => {
-      console.debug('my-site-counter OK (GoatCounter):', this.gcid, this._queryParams, this);
+      console.debug('my-site-counter OK (GoatCounter):', this.#gcid, [this]);
     };
     return IMG;
   }
 
-  get _goatCounterImageUrl () {
-    const urlParams = new URLSearchParams(this._queryParams);
-    return `https://${this.gcid}.goatcounter.com/count?${urlParams.toString()}`;
+  get #goatCounterImageUrl () {
+    return `https://${this.#gcid}.goatcounter.com/count?${this.#queryString}`;
   }
 
-  get _screenSizeAndScale () {
+  get #screenSizeAndScale () {
     const { width, height } = window.screen;
     const SCALE = parseInt(window.devicePixelRatio);
 
     return `${parseInt(width)},${parseInt(height)},${SCALE}`;
   }
 
-  get _cacheBusting () { return Math.random().toString(36).substr(2, 8); }
+  get #cacheBusting () { return Math.random().toString(36).substr(2, 8); }
 
-  get _queryParams () {
+  get #queryString () { return new URLSearchParams(this.#queryParams).toString(); }
+
+  get #queryParams () {
     return {
       p: location.pathname,
       t: document.title || '[none]',
       r: document.referrer || '',
       e: false, // Event.
       q: '', // Query, campaign.
-      s: this._screenSizeAndScale,
-      rnd: this._cacheBusting
+      s: this.#screenSizeAndScale,
+      rnd: this.#cacheBusting
     };
   }
 }