mirror of
https://github.com/archtechx/alpine-typescript.git
synced 2025-12-11 22:34:03 +00:00
v0.1.15
This commit is contained in:
Samuel Štancl
parent
207e9aa1e1
commit
b44e59682a
4 changed files with 105 additions and 55 deletions
56
dist/index.d.ts
vendored
56
dist/index.d.ts
vendored
|
|
@ -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 {};
|
||||
|
|
|
|||
22
dist/index.js
vendored
22
dist/index.js
vendored
|
|
@ -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();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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": {
|
||||
|
|
|
|||
80
src/index.ts
80
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 } {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue