Refactored defined constructor

chialab · Nov 13, 2023 · 0bb72a6 · 0bb72a6
1 parent b9aee43
commit 0bb72a6
Show file tree

Hide file tree

Showing 17 changed files with 901 additions and 919 deletions.
diff --git a/.changeset/four-comics-laugh.md b/.changeset/four-comics-laugh.md
@@ -0,0 +1,5 @@
+---
+'@chialab/dna': minor
+---
+
+The `define` method now returns the decorated constructor.
diff --git a/.changeset/stale-dryers-turn.md b/.changeset/stale-dryers-turn.md
@@ -0,0 +1,5 @@
+---
+'@chialab/dna': minor
+---
+
+Remove `customElementPrototype` decorator.
diff --git a/docs/guide/events.md b/docs/guide/events.md
@@ -31,22 +31,24 @@ class Button extends builtin.HTMLButtonElement {
 ```ts [get listeners]
 import { builtin, define } from '@chialab/dna';
 
-class Button extends builtin.HTMLButtonElement {
-    static get listeners() {
-        return {
-            'click': function (event) {
-                event.preventDefault();
-            },
-            'input [name="age"]': function (event, target) {
-                console.log(target.value);
-            },
-        };
+const Button = define(
+    'x-button',
+    class extends builtin.HTMLButtonElement {
+        static get listeners() {
+            return {
+                'click': function (event) {
+                    event.preventDefault();
+                },
+                'input [name="age"]': function (event, target) {
+                    console.log(target.value);
+                },
+            };
+        }
+    },
+    {
+        extends: 'button',
     }
-}
-
-define('x-button', Button, {
-    extends: 'button',
-});
+);
 ```
 
 :::
@@ -70,20 +72,21 @@ class Tracker extends Component {
 ```ts [get listeners]
 import { Component, define } from '@chialab/dna';
 
-class Tracker extends Component {
-    static get listeners() {
-        return {
-            touchmove: {
-                callback(event) {
-                    // ...
+const Tracker = define(
+    'x-tracker',
+    class extends Component {
+        static get listeners() {
+            return {
+                touchmove: {
+                    callback(event) {
+                        // ...
+                    },
+                    passive: true,
                 },
-                passive: true,
-            },
-        };
+            };
+        }
     }
-}
-
-define('x-tracker', Tracker);
+);
 ```
 
 :::
@@ -133,21 +136,22 @@ class Tracker extends Component {
 ```ts [get listeners]
 import { Component, define } from '@chialab/dna';
 
-class Tracker extends Component {
-    static get listeners() {
-        return {
-            touchmove: {
-                callback(event) {
-                    // ...
+const Tracker = define(
+    'x-tracker',
+    class extends Component {
+        static get listeners() {
+            return {
+                touchmove: {
+                    callback(event) {
+                        // ...
+                    },
+                    target: window,
+                    passive: true,
                 },
-                target: window,
-                passive: true,
-            },
-        };
+            };
+        }
     }
-}
-
-define('x-tracker', Tracker);
+);
 ```
 
 :::
@@ -177,22 +181,24 @@ class Dialog extends builtin.HTMLDialogElement {
 ```ts [get listeners]
 import { builtin, define } from '@chialab/dna';
 
-class Dialog extends builtin.HTMLDialogElement {
-    static get listeners() {
-        return {
-            'click nav button': {
-                callback(event, target) {
-                    // ...
+const Dialog = define(
+    'x-dialog',
+    class extends builtin.HTMLDialogElement {
+        static get listeners() {
+            return {
+                'click nav button': {
+                    callback(event, target) {
+                        // ...
+                    },
+                    passive: false,
                 },
-                passive: false,
-            },
-        };
+            };
+        }
+    },
+    {
+        extends: 'dialog',
     }
-}
-
-define('x-dialog', Dialog, {
-    extends: 'dialog',
-});
+);
 ```
 
 :::

diff --git a/docs/guide/index.md b/docs/guide/index.md
@@ -93,22 +93,23 @@ class HelloWorld extends Component {
 ```ts [JavaScript]
 import { Component, define, html } from '@chialab/dna';
 
-class HelloWorld extends Component {
-    static get properties() {
-        return {
-            name: {
-                type: String,
-                defaultValue: '',
-            },
-        };
-    }
-
-    render() {
-        return html`<h1>Hello ${this.name || 'world'}!</h1>`;
+const HelloWorld = define(
+    'hello-world',
+    class extends Component {
+        static get properties() {
+            return {
+                name: {
+                    type: String,
+                    defaultValue: '',
+                },
+            };
+        }
+
+        render() {
+            return html`<h1>Hello ${this.name || 'world'}!</h1>`;
+        }
     }
-}
-
-define('hello-world', HelloWorld);
+);
 ```
 
 :::
@@ -138,24 +139,26 @@ class AlertDialog extends builtin.HTMLDialogElement {
 ```ts [JavaScript]
 import { builtin, define, html } from '@chialab/dna';
 
-class AlertDialog extends builtin.HTMLDialogElement {
-    static get properties() {
-        return {
-            title: {
-                type: String,
-                defaultValue: '',
-            },
-        };
+const AlertDialog = define(
+    'alert-dialog',
+    class extends builtin.HTMLDialogElement {
+        static get properties() {
+            return {
+                title: {
+                    type: String,
+                    defaultValue: '',
+                },
+            };
+        }
+
+        render() {
+            return html`<h1>${this.title}</h1>`;
+        }
+    },
+    {
+        extends: 'dialog',
     }
-
-    render() {
-        return html`<h1>${this.title}</h1>`;
-    }
-}
-
-define('alert-dialog', AlertDialog, {
-    extends: 'dialog',
-});
+);
 ```
 
 :::

diff --git a/docs/guide/integrations.md b/docs/guide/integrations.md
@@ -20,7 +20,7 @@ import { Component, customElement } from '@chialab/dna';
 import Pickr from '@simonwep/pickr';
 
 @customElement('color-picker')
-export class ColorPicker extends Component {
+class ColorPicker extends Component {
     private pickr: Pickr;
 
     connectedCallback() {

diff --git a/docs/guide/properties.md b/docs/guide/properties.md
@@ -22,15 +22,16 @@ class Card extends Component {
 ```ts [get properties]
 import { Component, define } from '@chialab/dna';
 
-class Card extends Component {
-    static get properties() {
-        return {
-            age: Number,
-        };
+const Card = define(
+    'x-card',
+    class extends Component {
+        static get properties() {
+            return {
+                age: Number,
+            };
+        }
     }
-}
-
-define('x-card', Card);
+);
 ```
 
 :::
@@ -59,18 +60,19 @@ class Card extends Component {
 ```ts [get properties]
 import { Component, define } from '@chialab/dna';
 
-class Card extends Component {
-    static get properties() {
-        return {
-            collapsed: {
-                type: Boolean,
-                state: true,
-            },
-        };
+const Card = define(
+    'x-card',
+    class extends Component {
+        static get properties() {
+            return {
+                collapsed: {
+                    type: Boolean,
+                    state: true,
+                },
+            };
+        }
     }
-}
-
-define('x-card', Card);
+);
 ```
 
 :::
@@ -214,26 +216,27 @@ The **setter** function is invoked _before_ property validation and observers an
 ```ts
 import { Component, define } from '@chialab/dna';
 
-class Card extends Component {
-    static get properties() {
-        return {
-            phone: {
-                type: String,
-                getter(innerValue) {
-                    return innerValue;
-                },
-                setter(value) {
-                    if (!value.startsWith('+') && !value.startsWith('00')) {
-                        value = `+44 ${value}`;
-                    }
-                    return value;
+const Card = define(
+    'x-card',
+    class extends Component {
+        static get properties() {
+            return {
+                phone: {
+                    type: String,
+                    getter(innerValue) {
+                        return innerValue;
+                    },
+                    setter(value) {
+                        if (!value.startsWith('+') && !value.startsWith('00')) {
+                            value = `+44 ${value}`;
+                        }
+                        return value;
+                    },
                 },
-            },
-        };
+            };
+        }
     }
-}
-
-define('x-card', Card);
+);
 ```
 
 ## Observers

diff --git a/docs/guide/tools.md b/docs/guide/tools.md
@@ -30,7 +30,7 @@ import { Component, customElement, property } from '@chialab/dna';
  * @fires move - The map center point changed.
  */
 @customElement('x-map')
-export class MapboxMap extends Component {
+class MapboxMap extends Component {
     /**
      * The latitude value for the map center.
      */