1.14.0

chore: use package exports
feat: new attachEffect utility
2023-11-30 20:18:15 +01:00 · 2023-11-30 20:18:09 +01:00 · 2023-11-30 20:04:41 +01:00 · 2023-11-30 16:42:07 +01:00 · 2023-11-30 16:35:33 +01:00 · 2023-11-30 15:39:13 +01:00
19 changed files with 173 additions and 37 deletions
--- a/attach-effect/Counter.mjs
+++ b/attach-effect/Counter.mjs
@ -0,0 +1,25 @@
+// @ts-check
+import WebComponent from "../src/WebComponent.js";
+import { attachEffect } from "../src/attach-effect.js";
+
+export class Counter extends WebComponent {
+  static properties = ["count"];
+  onInit() {
+    this.props.count = 0;
+    this.onclick = () => ++this.props.count;
+    attachEffect(
+      this.props.count,
+      (count) => console.log(count)
+    );
+  }
+
+  afterViewInit(){
+    attachEffect(this.props.count, (count) => console.log(count + 100));
+  }
+
+  get template() {
+    return `<button id="btn">${this.props.count}</button>`;
+  }
+}
+
+customElements.define("my-counter", Counter);
--- a/attach-effect/index.html
+++ b/attach-effect/index.html
@ -0,0 +1,13 @@
+<!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>
+  </head>
+  <body>
+    <h1>Attach Effect Test</h1>
+    <my-counter></my-counter>
+  </body>
+</html>
--- a/examples/demo/BooleanPropTest.mjs
+++ b/examples/demo/BooleanPropTest.mjs
@ -1,4 +1,4 @@
-import WebComponent from "../src/WebComponent.js";
+import WebComponent from "../../src/WebComponent.js";

 export class BooleanPropTest extends WebComponent {
  static properties = ["is-inline", "anotherone"];
--- a/examples/demo/Counter.mjs
+++ b/examples/demo/Counter.mjs
@ -1,5 +1,5 @@
 // @ts-check
-import WebComponent from "../src/WebComponent.js";
+import WebComponent from "../../src/WebComponent.js";

 export class Counter extends WebComponent {
  static properties = ["count"];
--- a/examples/demo/HelloWorld.mjs
+++ b/examples/demo/HelloWorld.mjs
@ -1,5 +1,5 @@
 // @ts-check
-import WebComponent from "../src/WebComponent.js";
+import WebComponent from "../../src/WebComponent.js";

 export class HelloWorld extends WebComponent {
  static properties = ["count", "emotion"];
--- a/examples/demo/SimpleText.mjs
+++ b/examples/demo/SimpleText.mjs
@ -1,6 +1,5 @@
 // @ts-check
-
-import { WebComponent } from "../src/WebComponent.js";
+import WebComponent from "../../src/WebComponent.js";

 class SimpleText extends WebComponent {
  clickCallback() {
--- a/examples/demo/index.html
+++ b/examples/demo/index.html
@ -4,10 +4,10 @@
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WC demo</title>
-    <script type="module" src="HelloWorld.mjs"></script>
-    <script type="module" src="SimpleText.mjs"></script>
-    <script type="module" src="BooleanPropTest.mjs"></script>
-    <script type="module" src="Counter.mjs"></script>
+    <script type="module" src="./HelloWorld.mjs"></script>
+    <script type="module" src="./SimpleText.mjs"></script>
+    <script type="module" src="./BooleanPropTest.mjs"></script>
+    <script type="module" src="./Counter.mjs"></script>
  </head>
  <body>
    <hello-world emotion="sad"></hello-world>
--- a/examples/pens/counter-toggle.html
+++ b/examples/pens/counter-toggle.html
@ -0,0 +1,58 @@
+<!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>
+    <style>
+      * {
+        font-size: larger;
+      }
+    </style>
+    <script type="module">
+      import WebComponent from "https://unpkg.com/web-component-base@1.13.3/WebComponent.min.js";
+
+      /**
+       * @see https://ayco.io/n/web-component-base
+       */
+      class Counter extends WebComponent {
+        static properties = ["count"];
+        onInit() {
+          this.props.count = 0;
+          this.onclick = () => ++this.props.count;
+        }
+        onChanges(changes) {
+          console.log(changes);
+          // now click the button & check your devtools console
+        }
+        get template() {
+          return `<button>${this.props.count}</button>`;
+        }
+      }
+
+      class Toggle extends WebComponent {
+        static properties = ["toggle"];
+        onInit() {
+          this.props.toggle = false;
+          this.onclick = () => (this.props.toggle = !this.props.toggle);
+        }
+        get template() {
+          return `<button>${this.props.toggle ? "On" : "Off"}</button>`;
+        }
+      }
+
+      customElements.define("my-counter", Counter);
+      customElements.define("my-toggle", Toggle);
+    </script>
+  </head>
+  <body>
+    <div>
+      Counter:
+      <my-counter />
+    </div>
+    <div>
+      Toggle:
+      <my-toggle />
+    </div>
+  </body>
+</html>
--- a/examples/type-restore/Counter.mjs
+++ b/examples/type-restore/Counter.mjs
@ -1,5 +1,5 @@
 // @ts-check
-import WebComponent from "../src/WebComponent.js";
+import WebComponent from "../../src/WebComponent.js";

 export class Counter extends WebComponent {
  static properties = ["count"];
--- a/examples/type-restore/HelloWorld.mjs
+++ b/examples/type-restore/HelloWorld.mjs
@ -1,4 +1,4 @@
-import WebComponent from "../src/WebComponent.js";
+import WebComponent from "../../src/WebComponent.js";

 export class HelloWorld extends WebComponent {
  static properties = ["name"];
--- a/examples/type-restore/Object.mjs
+++ b/examples/type-restore/Object.mjs
@ -1,4 +1,4 @@
-import WebComponent from "../src/WebComponent.js";
+import WebComponent from "../../src/WebComponent.js";

 export class ObjectText extends WebComponent {
  static properties = ["object"];
--- a/examples/type-restore/Toggle.mjs
+++ b/examples/type-restore/Toggle.mjs
@ -1,5 +1,5 @@
 // @ts-check
-import WebComponent from "../src/WebComponent.js";
+import WebComponent from "../../src/WebComponent.js";

 export class Toggle extends WebComponent {
  static properties = ["toggle"];
--- a/examples/type-restore/index.html
+++ b/examples/type-restore/index.html
@ -4,10 +4,10 @@
    <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>
+    <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
--- a/package-lock.json
+++ b/package-lock.json
@ -1,12 +1,12 @@
 {
  "name": "web-component-base",
-  "version": "1.13.3",
+  "version": "1.14.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "web-component-base",
-      "version": "1.13.3",
+      "version": "1.14.0",
      "license": "MIT",
      "workspaces": [
        "site"
--- a/package.json
+++ b/package.json
@ -1,9 +1,22 @@
 {
  "name": "web-component-base",
-  "version": "1.13.3",
+  "version": "1.14.0",
  "description": "A zero-dependency, ~600 Bytes (minified & gzipped), JS base class for creating reactive custom elements easily",
-  "main": "WebComponent.js",
  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./WebComponent.js",
+      "types": "./WebComponent.d.ts"
+    },
+    "./WebComponent.min.js": {
+      "import": "./WebComponent.min.js",
+      "types": "./WebComponent.d.ts"
+    },
+    "./attach-effect": {
+      "import": "./attach-effect.js",
+      "types": "./attach-effect.d.ts"
+    }
+  },
  "scripts": {
    "start": "npx simple-server .",
    "demo": "npx simple-server .",
--- a/site/.npmrc
+++ b/site/.npmrc
@ -1,2 +0,0 @@
-shamefully-hoist=true
-strict-peer-dependencies=false
--- a/site/nitro.config.mjs
+++ b/site/nitro.config.mjs
@ -1,2 +1 @@
-import McFly from "@mcflyjs/config";
-export default defineNitroConfig({ ...McFly() });
+export default defineNitroConfig({ extends: '@mcflyjs/config' });
--- a/src/WebComponent.js
+++ b/src/WebComponent.js
@ -24,7 +24,6 @@ export class WebComponent extends HTMLElement {
   * Read-only property containing camelCase counterparts of observed attributes.
   * @see https://www.npmjs.com/package/web-component-base#prop-access
   * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset
-   * @typedef {{[name: string]: any}} PropStringMap
   * @type {PropStringMap}
   */
  get props() {
@ -53,11 +52,7 @@ export class WebComponent extends HTMLElement {

  /**
   * Triggered when an attribute value changes
-   * @param {{
-   *  property: string,
-   *  previousValue: any,
-   *  currentValue: any
-   * }} changes
+   * @param {Changes} changes
   */
  onChanges(changes) {}

@ -125,7 +120,11 @@ export class WebComponent extends HTMLElement {
    }
  };

-  #handler(setter, typeMap) {
+  #effectsMap = {};
+
+  #handler(setter, meta) {
+    const effectsMap = meta.#effectsMap;
+    const typeMap = meta.#typeMap;
    const getKebab = (str) => {
      return str.replace(
        /[A-Z]+(?![a-z])|[A-Z]/g,
@ -141,14 +140,25 @@ export class WebComponent extends HTMLElement {
          typeMap[prop] = typeof value;
        }

-        if (oldValue !== value) {
+        if (value.attach === "effect") {
+          if (!effectsMap[prop]) {
+            effectsMap[prop] = [];
+          }
+          effectsMap[prop].push(value.callback);
+        } else if (oldValue !== value) {
          obj[prop] = value;
+          effectsMap[prop]?.forEach((f) => f(value));
          const kebab = getKebab(prop);
          setter(kebab, value);
        }

        return true;
      },
+      get(obj, prop) {
+        Object.getPrototypeOf(obj[prop]).proxy = meta.#props;
+        Object.getPrototypeOf(obj[prop]).prop = prop;
+        return obj[prop];
+      },
    };
  }

@ -156,13 +166,19 @@ export class WebComponent extends HTMLElement {
    if (!this.#props) {
      this.#props = new Proxy(
        {},
-        this.#handler(
-          (key, value) => this.setAttribute(key, value),
-          this.#typeMap
-        )
+        this.#handler((key, value) => this.setAttribute(key, value), this)
      );
    }
  }
 }

 export default WebComponent;
+
+/**
+ * @typedef {{
+ *  property: string,
+ *  previousValue: any,
+ *  currentValue: any
+ * }} Changes
+ * @typedef {{[name: string]: any}} PropStringMap
+ */
--- a/src/attach-effect.js
+++ b/src/attach-effect.js
@ -0,0 +1,15 @@
+/**
+ *
+ * @typedef { import('./WebComponent.js').Changes} Changes
+ * @typedef { import('./WebComponent.js').PropStringMap} PropStringMap
+ * @param {Object} obj
+ * @param {(newValue: any) => void} callback
+ */
+export function attachEffect(obj, callback) {
+  const { proxy, prop } = Object.getPrototypeOf(obj);
+
+  proxy[prop] = {
+    attach: "effect",
+    callback,
+  };
+}
Author	SHA1	Message	Date
Ayo	2be5a3b81a	1.14.0	2023-11-30 20:18:15 +01:00
Ayo	caa386590d	chore: use package exports	2023-11-30 20:18:09 +01:00
Ayo	a9b9ada5e3	feat: new attachEffect utility	2023-11-30 20:04:41 +01:00
Ayo	aa30c99487	fix: import urls	2023-11-30 16:42:07 +01:00
Ayo	91a245ee2f	Merge branch 'main' of github.com:ayoayco/web-component-base into feat/attach-effect	2023-11-30 16:35:33 +01:00
Ayo	9ba0337223	add examples pen	2023-11-30 15:39:13 +01:00
Ayo	d2a96b4fa4	initial attach effect	2023-11-26 02:26:30 +01:00