@nolikein/types-livewire3 1.1.2 → 2.0.1

package/README.md

@@ -2,6 +2,28 @@
 
 Allows you to use the power of TypeScript with Livewire 3.
 
+## Migration From 1.x to 2.x
+
+Now all your "LivewireMethods" interfaces should be a `Record<string, (...args: any) => any>` instead of `Record<string, any>`.
+
+This means your code pass from:
+
+```typescript
+interface LivewireMethods {
+    open: ({ state: boolean })
+}
+```
+
+To:
+
+```typescript
+interface LivewireMethods {
+    open: (state: boolean) => ({ state: boolean })
+}
+```
+
+In order to keep the type safety of your methods parameters and return types.
+
 ## Installation
 
     npm i -D @nolikein/types-livewire3
@@ -27,7 +49,7 @@ Now you are able to use Livewire and Alpine inside your project. Here is an exam
 ```ts
 import { Livewire, Alpine } from '@/your_livewire_path';
 
-Alpine.data('YourCOmponent', () => {});
+Alpine.data('YourComponent', () => {});
 Livewire.start();
 ```
 
@@ -62,7 +84,7 @@ interface LivewireData {
 // Your Livewire public methods
 interface LivewireMethods {
     // The livewire component has an "open" method that you can call then return a boolean
-    open(): boolean
+    open(state: boolean): ({ state: boolean })
 }
 
 /**
@@ -80,7 +102,7 @@ export default (
     },
 
     callBackendToOpen(): void {
-        this.$wire.$call('open', (data: ({ state: boolean })) => {
+        this.$wire.$call('open', true).then(data) => {
             console.log("The livewire component has updated its open property with the value " + data.state);
         });
     },

package/dist/Livewire.d.ts

@@ -415,7 +415,7 @@ export interface LivewireMagics<LivewireData, LivewireMethods> {
      * @param name
      * @param live false by default
      */
-    $entangle(name: string, live?: boolean): EntangleInstance;
+    $entangle(name: string & keyof LivewireData, live?: boolean): EntangleInstance;
     /**
      * Watch the value of a property for changes...
      * Usage: Alpine.$watch('count', (value, old) => { ... })
@@ -423,7 +423,7 @@ export interface LivewireMagics<LivewireData, LivewireMethods> {
      * @param name
      * @param callback
      */
-    $watch(name: string, callback: (value: unknown, old: unknown) => void): Promise<unknown>;
+    $watch(name: string & keyof LivewireData, 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...

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nolikein/types-livewire3",
-    "version": "1.1.2",
+    "version": "2.0.1",
     "description": "Typescript content for Laravel Livewire 3",
     "license": "MIT",
     "author": "Côme Wasik",
@@ -27,4 +27,4 @@
         "@types/alpinejs": "^3.13.11",
         "typescript": "^5.9.2"
     }
-}
+}