@nolikein/types-livewire3 1.0.1

package/LICENCE

@@ -0,0 +1,7 @@
+Copyright © 2025 Côme Wasik
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/dist/Alpine.d.ts

@@ -0,0 +1,15 @@
+import * as Alpine from "alpinejs";
+export default Alpine;
+export type Alpine = typeof Alpine;
+/**
+ * Represent the component AlpineJs self instance (this). Usefull to pass "this" as argument to another function as "self".
+ *
+ * Usage: function myCallback(self: AlpineComponentSelf<AlpineData>) { ... }
+ */
+export type AlpineComponentSelf<AlpineData> = Alpine.InferInterceptors<AlpineData> & Alpine.XDataContext & Alpine.Magics<AlpineData>;
+/**
+ * Define a Alpine  component.
+ *
+ * The generic AlpineData describe the whole Alpine component content (data + methods).
+ */
+export type AlpineComponent<AlpineData> = AlpineData & Alpine.XDataContext & ThisType<AlpineComponentSelf<AlpineData>>;

package/dist/AlpineWired.d.ts

@@ -0,0 +1,23 @@
+import { InferInterceptors, Magics as AlpineMagics, XDataContext } from "alpinejs";
+import { LivewireMagics } from "./Livewire";
+/**
+ * An instance of all AlpineJs magics intended to be used with Laravel Livewire.
+ */
+export interface Magics<LivewireData, LivewireMethods> {
+    $wire: LivewireMagics<LivewireData, LivewireMethods>;
+}
+/**
+ * Represent the component AlpineJs self instance (this). Usefull to pass "this" as argument to another function as "self".
+ *
+ * @example
+ * function myCallback(self: AlpineComponentSelf<AlpineData, LivewireData, LivewireMethods>) { ... }
+ */
+export type AlpineComponentSelf<AlpineData, LivewireData, LivewireMethods> = InferInterceptors<AlpineData> & XDataContext & AlpineMagics<AlpineData> & Magics<LivewireData, LivewireMethods>;
+/**
+ * Define a Alpine + Livewire component.
+ *
+ * The generic AlpineData describe the whole Alpine component content (data + methods).
+ *
+ * The generics LivewireData and LivewireMethods describe the Livewire public properties and public methods.
+ */
+export type AlpineComponent<AlpineData, LivewireData, LivewireMethods> = AlpineData & XDataContext & ThisType<AlpineComponentSelf<AlpineData, LivewireData, LivewireMethods>>;

package/dist/Livewire.d.ts

@@ -0,0 +1,572 @@
+import { AlpineComponent as NativeAlpineComponent, reactive } from "alpinejs";
+export declare class Livewire {
+    /**
+     * Tell if the page rendering is finished
+     */
+    initialRenderIsFinished: boolean;
+    /**
+     * Allows to nagivate to another page.
+     * Use the Livewire's Alpinejs plugin "navigate" which is also an Alpinejs directive
+     */
+    get navigate(): (url: string) => void;
+    /**
+     * Retrive all the instances of Livewire component in the page
+     */
+    all: () => Array<Component<unknown, unknown>>;
+    /**
+     * Add a livewire directive dynamically.
+     */
+    directive: (name: string, callback: (obj: DirectiveContent) => void) => void;
+    /**
+     * Dispatch an event to a given component.
+     */
+    dispatchTo: (name: string, event: string, ...params: Array<unknown>) => void;
+    /**
+     * Start Livewire
+     */
+    start: () => void;
+    /**
+     * Retrieve the first found instance of Livewire component or (throws an error ?).
+     */
+    first: () => LivewireProxy<unknown, unknown>;
+    /**
+     * Retrieve a Livewire component instance from id.
+     */
+    find: (componentId: string) => LivewireProxy<unknown, unknown>;
+    /**
+     * Retrieve a Livewire component instance from name.
+     */
+    getByName: (name: string) => Array<LivewireProxy<unknown, unknown>>;
+    /**
+     * Register a callback to run when an internal event is triggered.
+     * The callback can return values that are stored as "finishers" and returned by the hook function.
+     */
+    hook: (name: HookNames, callback: (...params: Array<unknown>) => void) => () => void;
+    /**
+     * Dispatch an event to all components.
+     */
+    dispatch: (event: string, ...params: Array<unknown>) => void;
+    /**
+     * Register an event listener.
+     * The returned function allows to remove the event listener.
+     */
+    on: (event: string, callback: (customEvent: CustomEvent) => void) => () => void;
+    /**
+     * In addition to triggering an event, this method allows you to
+     * defer running callbacks returned from listeners and pass a
+     * value through each one so they can act like middleware.
+     *
+     * An example of using this combination to the fullest:
+     *
+     * // First let's look at the triggering phase:
+     * let finish = trigger([event name], ...[event params])
+     *
+     * return finish([pass-through value])
+     *
+     * // Now, let's look at the "listening" phase:
+     * on([event name], (...[event params]) => {
+     *     // The contents of this callback will be run immediately on trigger.
+     *
+     *     return ([pass-through value]) => {
+     *         // This callback will be run when "finish()" is called.
+     *
+     *         // The [pass-through value] can be mutated and must
+     *         // be returned for the next callback to process.
+     *         return [pass-through value]
+     *     }
+     * })
+     */
+    trigger: (name: string, ...params: Array<unknown>) => (result: unknown) => unknown;
+    /**
+     * The asynchrone version of the trigger() function.
+     */
+    triggerAsync: (name: string, ...params: Array<unknown>) => Promise<(result: unknown) => unknown>;
+}
+type HookNames = 'component.init' | 'element.init' | 'morph.updating' | 'morph.updated' | 'morph.removing' | 'morph.removed' | 'morph.adding' | 'morph.added' | 'morph' | 'morphed' | 'commit' | 'commit.prepare' | 'request';
+export interface DirectiveContent {
+    /** The node that called the directive */
+    el: HTMLElement;
+    /**
+     * The directive content parsed.
+     */
+    directive: {
+        /** The whole directive content */
+        raw: string;
+        /** The action. By example: "click" */
+        value: string;
+        /** Access the modifiers. By exemple: "prevent" */
+        modifiers: Array<string>;
+        /** The dynamic expression. By exemple: "deletePost(1)"" */
+        expression: string;
+    };
+    /**
+     * Access the current Livewire component instance.
+     */
+    component: Component<unknown, unknown>;
+    /**
+     * Register a callback to know how to destroy the component.
+     */
+    cleanup: (callback: () => void) => void;
+}
+export interface Effects {
+    listeners: Array<string>;
+    /** Contains the query string metadata of the Livewire Query string feature */
+    url?: {
+        /** Allows to always show the query string argument */
+        alwaysShow: boolean;
+        /** The query name argument */
+        as: string;
+        /** The value that remove the query string argument from the url */
+        except: string;
+        /** The method used. Can be "push" */
+        use: string;
+    };
+    scripts?: unknown;
+}
+export interface Snapshot {
+    data: Record<string, unknown>;
+    memo: {
+        /** The component id */
+        id: string;
+        /** The component name */
+        name: string;
+        /** The uri path */
+        path: string;
+        /** The http method */
+        method: string;
+        /** The request locale (e.g. "en", "fr") */
+        locale: string;
+        /**
+         * A list of any nested "child" components. Keyed by
+         * internal template ID with the component ID as the values
+        */
+        children: Record<string, Component<unknown, unknown>>;
+        /** Weather or not this component was "lazy loaded"... */
+        lazyLoaded: boolean;
+        /** A list of any validation errors thrown during the last request */
+        errors: Record<string, unknown>;
+        /** The list of  */
+        scripts?: Record<string, unknown>;
+        assets?: Record<string, unknown>;
+    };
+    /** A securely encrypted hash of the current snapshot */
+    checksum: string;
+}
+export declare class Component<LivewireData, LivewireMethods> {
+    /**
+     * A Proxy object that is typically used inside Alpine
+     * expressions as `$wire`. This is meant to provide a
+     * friendly JS object interface for Livewire components
+     */
+    $wire: LivewireProxy<LivewireData, LivewireMethods>;
+    /**
+     * The livewire component id
+     */
+    __livewireId: string;
+    /**
+     *  it represents the last-known server-side state.
+     */
+    canonical: Record<string, LivewireData>;
+    /**
+     * The component's mutable data object representing its live
+     * client-side state. More exactly, it represents the most current
+     * state of the component data. (This can be freely manipulated by end users)
+     */
+    ephemeral: Record<string, LivewireData>;
+    /**
+     * The cleanups are callbacks that are executed the component is destroying.
+     * You can add one by using addCleaup()
+     */
+    cleanups: Array<() => void>;
+    /**
+     * Add a callback that will be executed while component is destroying.
+     */
+    addCleanup: () => void;
+    /**
+     * Destroy the Livewire component.
+     */
+    cleanup(): void;
+    /**
+     * The content of the "wire:effects" html attribute.
+     * Generally filled with "listeners" and "url" when having query string.
+     */
+    effects: Effects;
+    /**
+     * The component DOM element
+     */
+    el: LivewireHTMLElement;
+    /**
+     * Retrieve the nearest Livewire parent component.
+     * Throws Error otherwise.
+     * @throws
+     */
+    get parent(): Component<unknown, unknown>;
+    /**
+     * A list of any nested "child" components. Keyed by
+     * internal template ID with the component ID as the values
+     */
+    get children(): Array<Component<unknown, unknown>>;
+    /**
+     * The livewire component id.
+     */
+    id: string;
+    /**
+     * The component name.
+     */
+    name: string;
+    /** The original state of the "effects" attribute */
+    originalEffects: {
+        listeners: Array<string>;
+    };
+    /**
+     * Contains every user registered requests when defering requests.
+     * Supposed to be empty after each defered request.
+     */
+    queuedUpdates: Record<string, unknown>;
+    /**
+     * A reactive version of `this.ephemeral`. Changes to
+     * this object will be picked up by AlpineJS expressions.
+     */
+    reactive: typeof reactive;
+    /**
+     * The un-parsed version of the above snapshot. This is used to send back to the
+     * server on the next roundtrip because JS parsing messes with PHP encoding
+     * which often results in checksum mis-matches.
+     *
+     * Also the content of the "wire:snapshot" html attribute.
+     */
+    snapshotEncoded: string;
+    /**
+     * The JSON decoded content of the "wire:snapshot" html attribute.
+     */
+    snapshot: Snapshot;
+    /**
+     * Merge the current snapshot with a given new with effects and updates.
+     * Return the dirty data.
+     * @param snapshotEncoded
+     * @param effects
+     * @param updates
+     */
+    mergeNewSnapshot(snapshotEncoded: string, effects: Effects, updates: Record<string, unknown>): Record<string, unknown>;
+    /**
+     * Queue a server update
+     * @param propertyName
+     * @param value
+     */
+    queueUpdate(propertyName: string, value: unknown): void;
+    /**
+     * Merge the queued updates with the given diff records.
+     * Note: Queued updates will take priority against ephemeral
+     * updates that have happend since them
+     * @param diff
+     */
+    mergeQueuedUpdates(diff: Record<string, unknown>): Record<string, unknown>;
+    /**
+     * Apply updates to a given objects.
+     * Supports dot-notation. (by exemple "one.two")
+     * @param object
+     * @param updates
+     */
+    applyUpdates(object: Record<string, unknown>, updates: Record<string, unknown>): Record<string, unknown>;
+    /**
+     * Merge given snapshot and html into the component then process effects.
+     * @param snapshot
+     * @param html
+     */
+    replayUpdate(snapshot: Snapshot, html: string): void;
+    /**
+     * Take the new state and side effects from the server and use them
+     * to update the existing data that users interact with.
+     * Also trigger reactive effects.
+     * @param effects
+     */
+    processEffects(effects: Effects): void;
+    /**
+     * Write the current snapshot encoded into the "wire:snapshot" html
+     * attribute and rewrite "wire:effects" with original effects.
+     */
+    inscribeSnapshotAndEffectsOnElement(): void;
+}
+/**
+ * A Reactive Alpine instance.
+ */
+export type LivewireProxy<LivewireData, LivewireMethods> = typeof Proxy & LivewireMagics<LivewireData, LivewireMethods>;
+/**
+ * The callback that will be called when the component is destroyed.
+ */
+export type CleanupCallback = () => unknown;
+/**
+ * Will store any event listener and livewire/alpinejs initializer as "x-data" or "wire:id"
+ */
+export type CleanupAttributes = Record<string, CleanupCallback>;
+/**
+ * An HTMLElement that has a Livewire component registered.
+ */
+export interface LivewireHTMLElement extends HTMLElement {
+    __livewire: Component<unknown, unknown>;
+    /**
+     * Callbacks that are run when the component is destroyed registered by attribute name
+     */
+    _x_attributeCleanups: CleanupAttributes;
+    /**
+     * Callbacks that are run when the component is destroyed.
+     */
+    _x_cleanups: Array<CleanupCallback>;
+    /**
+     * Contains all the Alpinejs detected from here.
+     */
+    _x_dataStack: Array<NativeAlpineComponent<unknown>>;
+    /**
+     * ???
+     */
+    _x_marker: number;
+}
+export interface Commit {
+    /** A snapshot object */
+    snapshot: Snapshot;
+    /** The properties to update and their values */
+    updates: Record<string, unknown>;
+    /** An array of methods (with parameters) to call server-side */
+    calls: Array<{
+        /** The method to call */
+        method: string;
+        /** A list of parameters */
+        params: Array<unknown>;
+    }>;
+}
+/**
+ * An HTMLElement that has an AlpineJs component registered
+ */
+export interface AlpineHTMLElement extends HTMLElement {
+    /**
+     * Callbacks that are run when the component is destroyed registered by attribute name
+     */
+    _x_attributeCleanups: CleanupAttributes;
+    /**
+     * Callbacks that are run when the component is destroyed.
+     */
+    _x_cleanups: Array<CleanupCallback>;
+    /**
+     * Contains all the Alpinejs detected from here.
+     */
+    _x_dataStack: Array<NativeAlpineComponent<unknown>>;
+    /**
+     * ???
+     */
+    _x_marker: number;
+}
+/**
+ * The instance created when using $entangle.
+ */
+export interface EntangleInstance {
+    _x_interceptor: boolean;
+    initialValue: unknown;
+    initialize: (a: unknown, b: unknown, c: unknown) => unknown;
+    live: EntangleInstance;
+}
+/**
+ * The Livewire tools known as $wire.
+ *
+ * The generics LivewireData and LivewireMethods describe the Livewire public properties and public methods.
+ */
+export interface LivewireMagics<LivewireData, LivewireMethods> {
+    /**
+     * Accessing the underlying Livewire component JavaScript instance
+     */
+    __instance: Component<LivewireData, LivewireMethods>;
+    parent: LivewireMagics<unknown, unknown>;
+    $el: AlpineHTMLElement;
+    $id: string;
+    /**
+     * Get the value of a property by name...
+     * Usage: $wire.$get('count')
+     *
+     * @param name
+     */
+    $get(name: string & keyof LivewireData): unknown;
+    /**
+     * Set a property on the component by name...
+     * Usage: $wire.$set('count', 5)
+     *
+     * @param name
+     * @param value The value to set
+     * @param live True by default
+     */
+    $set(name: string & keyof LivewireData, value: unknown, live?: boolean): Promise<unknown>;
+    /**
+     * Toggle the value of a boolean property...
+     * @param name
+     * @param live true by default
+     */
+    $toggle(name: string & keyof LivewireData, live?: boolean): Promise<unknown>;
+    /**
+     * Call the method
+     * Usage: $wire.$call('increment')
+     *
+     * @param method
+     * @param params
+     */
+    $call(method: string & keyof LivewireMethods, ...params: Array<unknown>): Promise<LivewireMethods[keyof LivewireMethods]>;
+    /**
+     * Entangle the value of a Livewire property with a different,
+     * arbitrary, Alpine property...
+     * Usage: <div x-data="{ count: $wire.$entangle('count') }">
+     *
+     * @param name
+     * @param live false by default
+     */
+    $entangle(name: string, live?: boolean): EntangleInstance;
+    /**
+     * Watch the value of a property for changes...
+     * Usage: Alpine.$watch('count', (value, old) => { ... })
+     *
+     * @param name
+     * @param callback
+     */
+    $watch(name: string, callback: (value: unknown, old: unknown) => void): Promise<unknown>;
+    /**
+     * Refresh a component by sending a commit to the server
+     * to re-render the HTML and swap it into the page...
+     */
+    $refresh(): Promise<unknown>;
+    /**
+     * Identical to the above `$refresh`. Just a more technical name...
+     */
+    $commit(): Promise<unknown>;
+    /**
+     * Listen for a an event dispatched from this component or its children...
+     * Usage: $wire.$on('post-created', () => { ... })
+     *
+     * @param event
+     * @param callback
+     */
+    $on(event: string, callback: (...param: Array<unknown>) => unknown): void;
+    /**
+     * Dispatch an event from this component...
+     * Usage: $wire.$dispatch('post-created', { postId: 2 })
+     *
+     * @param event
+     * @param params
+     */
+    $dispatch(event: string, ...params: Array<unknown>): void;
+    /**
+     * Dispatch an event onto another component...
+     * Usage: $wire.$dispatchTo('dashboard', 'post-created', { postId: 2 })
+     *
+     * @param otherComponentName
+     * @param event
+     * @param params
+     */
+    $dispatchTo(otherComponentName: string, event: string, params: Record<string, unknown>): void;
+    /**
+     * Dispatch an event onto this component and no others...
+     * @param event
+     * @param params
+     */
+    $dispatchSelf(event: string, params: Record<string, unknown>): void;
+    /**
+     * A JS API to upload a file directly to component
+     * rather than through `wire:model`...
+     *
+     * @param name
+     * @param file
+     * @param finish
+     * @param */
+    $upload(
+    /** The property name */
+    name: string & keyof LivewireData, 
+    /** The File JavaScript object */
+    file: File, 
+    /** Runs when the upload is finished... */
+    finish: (uploadedFilename: string) => void, 
+    /** Runs if an error is triggered mid-upload... */
+    error: () => void, 
+    /** Runs as the upload progresses... */
+    progress: (event: CustomEvent) => void): void;
+    $uploadMultiple(
+    /** The property name */
+    name: string & keyof LivewireData, 
+    /** An array of the File JavaScript object */
+    files: Array<File>, 
+    /** Runs when the upload is finished... */
+    finish: (uploadedFilename: string) => void, 
+    /** Runs if an error is triggered mid-upload... */
+    error: () => void, 
+    /** Runs as the upload progresses... */
+    progress: (event: CustomEvent) => void): void;
+    $removeUpload(name: string & keyof LivewireData, tmpFilename: string, 
+    /** Runs when the upload is finished... */
+    finish: (uploadedFilename: string) => void, 
+    /** Runs if an error is triggered mid-upload... */
+    error: () => void): void;
+    /**
+     * Livewire 2 support
+     */
+    /**
+     * Retrieve a Livewire property
+     * @param property
+     * @deprecated Use $ version of the method
+     */
+    get: (property: string & keyof LivewireData) => unknown;
+    /**
+     * Set a value for a Livewire property.
+     * @param property The Livewire property name
+     * @param value The value to set
+     * @param defer Defer set the property
+     * @deprecated Use $ version of the method
+     */
+    set: (property: string & keyof LivewireData, value: unknown, defer?: boolean) => void;
+    /**
+     * Listening for a Livewire event
+     * @param event The event name
+     * @param callback The action to perform when the event is emitted
+     * @returns
+     * @deprecated Use $ version of the method
+     */
+    on: (event: string, callback: (...param: Array<unknown>) => unknown) => void;
+    /**
+     * Dispatch a Livewire event
+     * @param event The event name
+     * @param params Arguments passed to the event
+     * @deprecated Use $ version of the method
+     */
+    dispatch: (event: string, ...params: Array<unknown>) => void;
+    /**
+     * Call a Livewire method
+     * @param method The method name
+     * @param params Arguments passed to the method
+     * @deprecated Use $ version of the method
+     */
+    call: (method: string & keyof LivewireMethods, ...params: Array<unknown>) => Promise<LivewireMethods[keyof LivewireMethods]>;
+    /**
+     * Upload a file and set a Livewire property
+     * @param property The property name
+     * @param file The file to upload
+     * @param finishCallback Called when the upload is finished
+     * @param errorCallback Called when the upload encountered an error
+     * @param progressCallback Called while processing
+     * @deprecated Use $ version of the method
+     */
+    upload: (property: string & keyof LivewireData, file: File, finishCallback: (uploadedFilename: string) => void, errorCallback: () => void, progressCallback: (event: CustomEvent) => void) => void;
+    /**
+     * Upload multiple files at one and set a Livewire property
+     * @param property The property name
+     * @param files The files to upload
+     * @param finishCallback Called when the upload is finished
+     * @param errorCallback Called when the upload encountered an error
+     * @param progressCallback Called while processing
+     * @deprecated Use $ version of the method
+     */
+    uploadMultiple: (property: string & keyof LivewireData, files: Array<File>, finishCallback: (uploadedFilenames: Array<string>) => void, errorCallback: () => void, progressCallback: (event: CustomEvent) => void) => void;
+    /**
+     * Removing (one of) uploaded file(s) and update a Livewire property
+     * @param property The property name
+     * @param file The file to upload
+     * @param finishCallback Called when the upload is finished
+     * @param errorCallback Called when the upload encountered an error
+     * @param progressCallback Called while processing
+     * @deprecated Use $ version of the method
+     */
+    removeUpload: (property: string & keyof LivewireData, files: File, finishCallback: (uploadedFilename: string) => void, errorCallback: () => void) => void;
+}
+export {};

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+import * as Alpine from "./Alpine";
+import * as AlpineWired from "./AlpineWired";
+import * as Livewire from "./Livewire";
+export { Alpine, AlpineWired, Livewire };

package/package.json

@@ -0,0 +1,26 @@
+{
+    "name": "@nolikein/types-livewire3",
+    "version": "1.0.1",
+    "description": "Typescript content for Laravel Livewire 3",
+    "license": "MIT",
+    "author": "Côme Wasik",
+    "type": "module",
+    "main": "",
+    "types": "dist/index.d.ts",
+    "keywords": [
+        "typescript",
+        "alpinejs",
+        "livewire",
+        "livewire 3"
+    ],
+    "scripts": {
+        "build": "tsc"
+    },
+    "files": [
+        "dist"
+    ],
+    "devDependencies": {
+        "@types/alpinejs": "^3.13.11",
+        "typescript": "^5.9.2"
+    }
+}