archtechx/alpine-typescript
1
0
Fork 0
mirror of https://github.com/archtechx/alpine-typescript.git synced 2025-12-11 22:34:03 +00:00
Code Activity

Add ComponentController

Browse source 
Add ComponentController & switch to [definite assignment assertions](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-7.html#definite-assignment-assertions)
This commit is contained in:
Rafik El Hadi Houari 2021-05-18 15:39:04 +01:00 • committed by GitHub
parent 5104b5c62d
commit 47fff0c639
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 30 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

41
src/index.ts
View file

@ -4,22 +4,22 @@ type ComponentConstructor = (...args: any[]) => object;
export abstract class AlpineComponent {
/** Retrieve the root component DOM node. */
$el?: HTMLElement;
$el!: HTMLElement;
/** Retrieve DOM elements marked with x-ref inside the component. */
$refs?: { [name: string]: HTMLElement };
$refs!: { [name: string]: HTMLElement };
/** Retrieve the native browser "Event" object within an event listener. */
$event?: Event;
$event!: Event;
/** Create a CustomEvent and dispatch it using .dispatchEvent() internally. */
$dispatch?: (event: string, data: object) => void;
$dispatch!: (event: string, data: object) => void;
/** Execute a given expression AFTER Alpine has made its reactive DOM updates. */
$nextTick?: (callback: (_: any) => void) => void;
$nextTick!: (callback: (_: any) => void) => void;
/** Will fire a provided callback when a component property you "watched" gets changed. */
$watch?: (property: string, callback: (value: any) => void) => void;
$watch!: (property: string, callback: (value: any) => void) => void;
[key: string]: any;
}
@ -29,13 +29,13 @@ export interface Alpine {
pauseMutationObserver: boolean;
magicProperties: { [name: string]: (el: HTMLElement) => void };
ignoreFocusedForValueBinding: boolean;
onComponentInitializeds: Array<(component: AlpineComponent) => void>;
onBeforeComponentInitializeds: Array<(component: AlpineComponent) => void>;
onComponentInitializeds: Array<(component: ComponentController) => void>;
onBeforeComponentInitializeds: Array<(component: ComponentController) => void>;
onComponentInitialized: (
callback: (component: AlpineComponent) => void,
callback: (component: ComponentController) => void,
) => void;
onBeforeComponentInitialized: (
callback: (component: AlpineComponent) => void,
callback: (component: ComponentController) => void,
) => void;
listenForNewUninitializedComponentsAtRunTime: () => undefined;
discoverUninitializedComponents: (
@ -48,10 +48,29 @@ export interface Alpine {
name: string,
callback: ($el: HTMLElement) => void,
) => void;
clone: (component: AlpineComponent, newEl: HTMLElement) => void;
clone: (component: ComponentCComponentControllerontroller, newEl: HTMLElement) => void;
[key: string]: any;
}
export declare interface ComponentController {
$el: HTMLElement;
$data: ProxyConstructor;
$nextTickStack: CallableFunction[];
$showDirectiveStack: any[];
$watchers: { [name: string]: CallableFunction };
unobservedData: AlpineComponentData;
getUnobservedData: () => AlpineComponentData;
updateElements: (rootEl: HTMLElement, extraVars?: () => {}) => void;
updateElement: (el: HTMLElement, extraVars?: () => {}) => void;
evaluateReturnExpression: (
el: HTMLElement,
expression: string,
extraVars?: () => {}
) => void;
[key: string]: any;
}
export function registerComponents(components: { [name: string]: Function }): { [name: string]: ComponentConstructor } {
Object.entries(components).forEach(([name, file]) => {
component(name, file);