Merge pull request #1 from ayoayco/perf/optimize

feat: preserve props types

README.md

@@ -135,7 +135,7 @@ this.setAttribute('my-name','hello');
 Therefore, this will tell the browser that the UI needs a render if the attribute is one of the component's observed attributes we explicitly provided with `static properties = ['my-name']`;
 
 > The `props` property of `WebComponent` works like `HTMLElement.dataset`, except `dataset` is only for attributes prefixed with `data-`. A camelCase counterpart using `props` will give read/write access to any attribute, with or without the `data-` prefix.
-> However, note that like `HTMLElement.dataset`, values assigned to properties using `WebComponent.props` is always converted into string. This will be improved in later versions.
+> Another advantage over `HTMLElement.dataset` is that `WebComponent.props` can hold primitive types `number`, `boolean`, and `string`.
 
 ### Alternatives
 

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "web-component-base",
-  "version": "1.13.2",
+  "version": "1.13.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "web-component-base",
-      "version": "1.13.2",
+      "version": "1.13.3",
       "license": "MIT",
       "workspaces": [
         "site"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "web-component-base",
-  "version": "1.13.2",
+  "version": "1.13.3",
   "description": "A zero-dependency, ~600 Bytes (minified & gzipped), JS base class for creating reactive custom elements easily",
   "main": "WebComponent.js",
   "type": "module",

src/WebComponent.js

@@ -87,72 +87,79 @@ export class WebComponent extends HTMLElement {
     this.onDestroy();
   }
 
-  /**
-   * @param {string} property
-   * @param {any} previousValue
-   * @param {any} currentValue
-   */
   attributeChangedCallback(property, previousValue, currentValue) {
     const camelCaps = this.#getCamelCaps(property);
 
     if (previousValue !== currentValue) {
       this[property] = currentValue === "" || currentValue;
       this[camelCaps] = this[property]; // remove on v2
-      this.props[camelCaps] = this[property];
+
+      this.#handleUpdateProp(camelCaps, currentValue);
 
       this.render();
       this.onChanges({ property, previousValue, currentValue });
     }
   }
 
-  /**
-   * Converts a kebab-cased string into camelCaps
-   * @param {string} kebab string in kebab-case
-   * @returns {string}
-   */
+  #handleUpdateProp(key, value) {
+    const restored = this.#restoreType(value, this.#typeMap[key]);
+
+    if (restored !== this.props[key]) this.props[key] = value;
+  }
+
   #getCamelCaps(kebab) {
     return kebab.replace(/-./g, (x) => x[1].toUpperCase());
   }
 
-  /**
-   * Proxy handler for observed attribute - property counterpart
-   * @param {(qualifiedName: string, value: string) => void} setter
-   * @returns
-   */
-  #handler = (setter) => ({
-    set(obj, prop, newValue) {
-      const oldValue = obj[prop];
+  #typeMap = {};
 
-      obj[prop] = newValue;
+  #restoreType = (value, type) => {
+    switch (type) {
+      case "string":
+        return value;
+      case "number":
+      case "boolean":
+        return JSON.parse(value);
+      default:
+        return value;
+    }
+  };
 
-      /**
-       * Converts camelCaps string into kebab-case
-       * @param {string} str
-       * @returns {string}
-       */
-      const getKebab = (str) =>
-        str.replace(
+  #handler(setter, typeMap) {
+    const getKebab = (str) => {
+      return str.replace(
         /[A-Z]+(?![a-z])|[A-Z]/g,
         ($, ofs) => (ofs ? "-" : "") + $.toLowerCase()
       );
+    };
 
-      if (oldValue != newValue) {
+    return {
+      set(obj, prop, value) {
+        const oldValue = obj[prop];
+
+        if (!(prop in typeMap)) {
+          typeMap[prop] = typeof value;
+        }
+
+        if (oldValue !== value) {
+          obj[prop] = value;
           const kebab = getKebab(prop);
-        setter(kebab, newValue);
+          setter(kebab, value);
         }
 
         return true;
       },
-  });
+    };
+  }
 
-  /**
-   * Initialize the `props` proxy object
-   */
   #initializeProps() {
     if (!this.#props) {
       this.#props = new Proxy(
         {},
-        this.#handler((key, value) => this.setAttribute(key, value))
+        this.#handler(
+          (key, value) => this.setAttribute(key, value),
+          this.#typeMap
+        )
       );
     }
   }

type-restore/Counter.mjs

@@ -0,0 +1,15 @@
+// @ts-check
+import WebComponent from "../src/WebComponent.js";
+
+export class Counter extends WebComponent {
+  static properties = ["count"];
+  onInit() {
+    this.props.count = 0;
+    this.onclick = ()=> ++this.props.count
+  }
+  get template() {
+    return `<button>${this.props.count}</button>`;
+  }
+}
+
+customElements.define("my-counter", Counter);

type-restore/HelloWorld.mjs

@@ -0,0 +1,14 @@
+import WebComponent from "../src/WebComponent.js";
+
+export class HelloWorld extends WebComponent {
+  static properties = ["name"];
+  onInit() {
+    this.props.name = 'a';
+    this.onclick = ()=> this.props.name += 'a'
+  }
+  get template() {
+    return `<button>W${this.props.name}h!</button>`;
+  }
+}
+
+customElements.define("my-hello-world", HelloWorld);

type-restore/Object.mjs

@@ -0,0 +1,15 @@
+import WebComponent from "../src/WebComponent.js";
+
+export class ObjectText extends WebComponent {
+  static properties = ["object"];
+  onInit() {
+    this.props.object = {
+        hello: 'world'
+    };
+  }
+  get template() {
+    return `<textarea>${this.props.object}</textarea>`;
+  }
+}
+
+customElements.define("my-object", ObjectText);

type-restore/Toggle.mjs

@@ -0,0 +1,18 @@
+// @ts-check
+import WebComponent from "../src/WebComponent.js";
+
+export class Toggle extends WebComponent {
+  static properties = ["toggle"];
+  onInit() {
+    this.props.toggle = false;
+    this.onclick = ()=>this.handleToggle()
+  }
+  handleToggle() {
+      this.props.toggle = !this.props.toggle;
+  }
+  get template() {
+    return `<button id="toggle">${this.props.toggle ? 'On':'Off'}</button>`;
+  }
+}
+
+customElements.define("my-toggle", Toggle);

type-restore/index.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>WC demo</title>
+    <script type="module" src="Counter.mjs"></script>
+    <script type="module" src="Toggle.mjs"></script>
+    <script type="module" src="HelloWorld.mjs"></script>
+    <script type="module" src="Object.mjs"></script>
+    <style>
+      * {
+        font-size: larger
+      }
+    </style>
+  </head>
+  <body>
+    <div>
+      Counter: <my-counter></my-counter>
+    </div>
+    <div>
+      Toggle: <my-toggle></my-toggle>
+    </div>
+    <div>
+      String: <my-hello-world />
+    </div>
+    <div>
+      Object: <my-object />
+    </div>
+  </body>
+</html>