AlpineElement interface

archtechx · May 23, 2021 · 61e1704 · 61e1704
1 parent 459caba
commit 61e1704
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 24 deletions.
diff --git a/dist/index.d.ts b/dist/index.d.ts
@@ -1,10 +1,10 @@
 declare type ComponentConstructor = (...args: any[]) => object;
 export declare abstract class AlpineComponent {
     /** Retrieve the root component DOM node. */
-    $el: HTMLElement;
+    $el: AlpineElement;
     /** Retrieve DOM elements marked with x-ref inside the component. */
     $refs: {
-        [name: string]: HTMLElement;
+        [name: string]: AlpineElement;
     };
     /** Retrieve the native browser "Event" object within an event listener. */
     $event: Event;
@@ -20,23 +20,23 @@ export interface Alpine {
     version: string;
     pauseMutationObserver: boolean;
     magicProperties: {
-        [name: string]: (el: HTMLElement) => void;
+        [name: string]: (el: AlpineElement) => void;
     };
     ignoreFocusedForValueBinding: boolean;
     onComponentInitializeds: Array<(component: ComponentController) => void>;
     onBeforeComponentInitializeds: Array<(component: ComponentController) => void>;
     onComponentInitialized: (callback: (component: ComponentController) => void) => void;
     onBeforeComponentInitialized: (callback: (component: ComponentController) => void) => void;
     listenForNewUninitializedComponentsAtRunTime: () => undefined;
-    discoverUninitializedComponents: (callback: (rootEl: HTMLElement) => void, el?: HTMLElement) => void;
-    discoverComponents: (callback: (rootEl: HTMLElement) => void) => void;
+    discoverUninitializedComponents: (callback: (rootEl: AlpineElement) => void, el?: AlpineElement) => void;
+    discoverComponents: (callback: (rootEl: AlpineElement) => void) => void;
     start: () => void;
-    addMagicProperty: (name: string, callback: ($el: HTMLElement) => void) => void;
-    clone: (component: ComponentController, newEl: HTMLElement) => void;
+    addMagicProperty: (name: string, callback: ($el: AlpineElement) => void) => void;
+    clone: (component: ComponentController, newEl: AlpineElement) => void;
     [key: string]: any;
 }
 export declare interface ComponentController {
-    $el: HTMLElement;
+    $el: AlpineElement;
     $data: ProxyConstructor;
     $nextTickStack: CallableFunction[];
     $showDirectiveStack: any[];
@@ -45,9 +45,9 @@ export declare interface ComponentController {
     };
     unobservedData: AlpineComponent;
     getUnobservedData: () => AlpineComponent;
-    updateElements: (rootEl: HTMLElement, extraVars?: () => {}) => void;
-    updateElement: (el: HTMLElement, extraVars?: () => {}) => void;
-    evaluateReturnExpression: (el: HTMLElement, expression: string, extraVars?: () => {}) => void;
+    updateElements: (rootEl: AlpineElement, extraVars?: () => {}) => void;
+    updateElement: (el: AlpineElement, extraVars?: () => {}) => void;
+    evaluateReturnExpression: (el: AlpineElement, expression: string, extraVars?: () => {}) => void;
     [key: string]: any;
 }
 export declare function registerComponents(components: {
@@ -59,6 +59,9 @@ export declare function component(name: string, component?: Function): Component
 export declare function convertClassToAlpineConstructor(component: any): ComponentConstructor;
 export declare function addTitles(): void;
 export declare function bootstrap(): void;
+export interface AlpineElement extends HTMLElement {
+    __x: ComponentController;
+}
 declare global {
     interface Window {
         Alpine: Alpine;

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@leanadmin/alpine-typescript",
-    "version": "0.1.16",
+    "version": "0.1.17",
     "description": "TypeScript support for Alpine.js",
     "main": "dist/index.js",
     "repository": {

diff --git a/src/index.ts b/src/index.ts
@@ -2,10 +2,10 @@ type ComponentConstructor = (...args: any[]) => object;
 
 export abstract class AlpineComponent {
     /** Retrieve the root component DOM node. */
-    $el!: HTMLElement;
+    $el!: AlpineElement;
 
     /** Retrieve DOM elements marked with x-ref inside the component. */
-    $refs!: { [name: string]: HTMLElement };
+    $refs!: { [name: string]: AlpineElement };
 
     /** Retrieve the native browser "Event" object within an event listener. */
     $event!: Event;
@@ -25,7 +25,7 @@ export abstract class AlpineComponent {
 export interface Alpine {
     version: string;
     pauseMutationObserver: boolean;
-    magicProperties: { [name: string]: (el: HTMLElement) => void };
+    magicProperties: { [name: string]: (el: AlpineElement) => void };
     ignoreFocusedForValueBinding: boolean;
     onComponentInitializeds: Array<(component: ComponentController) => void>;
     onBeforeComponentInitializeds: Array<(component: ComponentController) => void>;
@@ -37,32 +37,32 @@ export interface Alpine {
     ) => void;
     listenForNewUninitializedComponentsAtRunTime: () => undefined;
     discoverUninitializedComponents: (
-        callback: (rootEl: HTMLElement) => void,
-        el?: HTMLElement,
+        callback: (rootEl: AlpineElement) => void,
+        el?: AlpineElement,
     ) => void;
-    discoverComponents: (callback: (rootEl: HTMLElement) => void) => void;
+    discoverComponents: (callback: (rootEl: AlpineElement) => void) => void;
     start: () => void;
     addMagicProperty: (
         name: string,
-        callback: ($el: HTMLElement) => void,
+        callback: ($el: AlpineElement) => void,
     ) => void;
-    clone: (component: ComponentController, newEl: HTMLElement) => void;
+    clone: (component: ComponentController, newEl: AlpineElement) => void;
 
     [key: string]: any;
 }
 
 export declare interface ComponentController {
-    $el: HTMLElement;
+    $el: AlpineElement;
     $data: ProxyConstructor;
     $nextTickStack: CallableFunction[];
     $showDirectiveStack: any[];
     $watchers: { [name: string]: CallableFunction };
     unobservedData: AlpineComponent;
     getUnobservedData: () => AlpineComponent;
-    updateElements: (rootEl: HTMLElement, extraVars?: () => {}) => void;
-    updateElement: (el: HTMLElement, extraVars?: () => {}) => void;
+    updateElements: (rootEl: AlpineElement, extraVars?: () => {}) => void;
+    updateElement: (el: AlpineElement, extraVars?: () => {}) => void;
     evaluateReturnExpression: (
-        el: HTMLElement,
+        el: AlpineElement,
         expression: string,
         extraVars?: () => {}
     ) => void;
@@ -136,6 +136,10 @@ if (window.AlpineComponents === undefined) {
     bootstrap();
 }
 
+export interface AlpineElement extends HTMLElement {
+    __x: ComponentController;
+}
+
 declare global {
     interface Window {
         Alpine: Alpine;