From b44e59682a8512cc69feb311b39307a3761b3d53 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Samuel=20=C5=A0tancl?= Date: Sun, 23 May 2021 18:35:03 +0200 Subject: [PATCH] v0.1.15 --- dist/index.d.ts | 56 +++++++++++++++++++++++++++------- dist/index.js | 22 +++++++++++--- package.json | 2 +- src/index.ts | 80 ++++++++++++++++++++++++------------------------- 4 files changed, 105 insertions(+), 55 deletions(-) diff --git a/dist/index.d.ts b/dist/index.d.ts index 84effa1..52fea7d 100644 --- a/dist/index.d.ts +++ b/dist/index.d.ts @@ -1,19 +1,54 @@ declare type ComponentConstructor = (...args: any[]) => object; -export declare class AlpineComponent { +export declare abstract class AlpineComponent { /** Retrieve the root component DOM node. */ - $el?: Element; + $el: HTMLElement; /** Retrieve DOM elements marked with x-ref inside the component. */ - $refs?: { - [name: string]: Element; + $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: () => 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; +} +export interface Alpine { + version: string; + pauseMutationObserver: boolean; + magicProperties: { + [name: string]: (el: HTMLElement) => 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; + start: () => void; + addMagicProperty: (name: string, callback: ($el: HTMLElement) => void) => void; + clone: (component: ComponentController, newEl: HTMLElement) => void; + [key: string]: any; +} +export declare interface ComponentController { + $el: HTMLElement; + $data: ProxyConstructor; + $nextTickStack: CallableFunction[]; + $showDirectiveStack: any[]; + $watchers: { + [name: string]: CallableFunction; + }; + unobservedData: AlpineComponent; + getUnobservedData: () => AlpineComponent; + updateElements: (rootEl: HTMLElement, extraVars?: () => {}) => void; + updateElement: (el: HTMLElement, extraVars?: () => {}) => void; + evaluateReturnExpression: (el: HTMLElement, expression: string, extraVars?: () => {}) => void; + [key: string]: any; } export declare function registerComponents(components: { [name: string]: Function; @@ -22,5 +57,6 @@ export declare function registerComponents(components: { }; export declare function component(name: string, component?: Function): ComponentConstructor; export declare function convertClassToAlpineConstructor(component: any): ComponentConstructor; -declare const _default: () => void; -export default _default; +export declare function addTitles(): void; +export declare function bootstrap(): void; +export {}; diff --git a/dist/index.js b/dist/index.js index 9ea0d21..86f6904 100644 --- a/dist/index.js +++ b/dist/index.js @@ -1,6 +1,6 @@ "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); -exports.convertClassToAlpineConstructor = exports.component = exports.registerComponents = exports.AlpineComponent = void 0; +exports.bootstrap = exports.addTitles = exports.convertClassToAlpineConstructor = exports.component = exports.registerComponents = exports.AlpineComponent = void 0; class AlpineComponent { } exports.AlpineComponent = AlpineComponent; @@ -18,8 +18,8 @@ function component(name, component = null) { if (component['prototype'] instanceof AlpineComponent) { component = convertClassToAlpineConstructor(component); } - // @ts-ignore window.AlpineComponents[name] = component; + return component; } exports.component = component; function convertClassToAlpineConstructor(component) { @@ -36,11 +36,25 @@ function convertClassToAlpineConstructor(component) { }; } exports.convertClassToAlpineConstructor = convertClassToAlpineConstructor; -exports.default = () => { +function addTitles() { + window.Alpine.onBeforeComponentInitialized((component) => { + if (!component.$el.hasAttribute('x-title')) { + if (component.$data.constructor.prototype instanceof AlpineComponent) { + component.$el.setAttribute('x-title', component.$data.constructor.name); + } + } + }); +} +exports.addTitles = addTitles; +function bootstrap() { window.AlpineComponents = {}; const deferrer = window.deferLoadingAlpine || function (callback) { callback(); }; window.deferLoadingAlpine = function (callback) { window.Alpine.component = component; deferrer(callback); }; -}; +} +exports.bootstrap = bootstrap; +if (window.AlpineComponents === undefined) { + bootstrap(); +} diff --git a/package.json b/package.json index f33f7e8..065b40f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@leanadmin/alpine-typescript", - "version": "0.1.14", + "version": "0.1.15", "description": "TypeScript support for Alpine.js", "main": "dist/index.js", "repository": { diff --git a/src/index.ts b/src/index.ts index 99f3079..29955bf 100644 --- a/src/index.ts +++ b/src/index.ts @@ -25,50 +25,50 @@ export abstract class AlpineComponent { } export interface Alpine { - version: string; - pauseMutationObserver: boolean; - magicProperties: { [name: string]: (el: HTMLElement) => 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; - start: () => void; - addMagicProperty: ( - name: string, - callback: ($el: HTMLElement) => void, - ) => void; - clone: (component: ComponentController, newEl: HTMLElement) => void; + version: string; + pauseMutationObserver: boolean; + magicProperties: { [name: string]: (el: HTMLElement) => 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; + start: () => void; + addMagicProperty: ( + name: string, + callback: ($el: HTMLElement) => void, + ) => void; + clone: (component: ComponentController, newEl: HTMLElement) => void; - [key: string]: any; + [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; + $el: HTMLElement; + $data: ProxyConstructor; + $nextTickStack: CallableFunction[]; + $showDirectiveStack: any[]; + $watchers: { [name: string]: CallableFunction }; + unobservedData: AlpineComponent; + getUnobservedData: () => AlpineComponent; + 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 } {