@nolikein/types-livewire3 1.0.4 → 1.0.6

package/README.md

@@ -4,7 +4,150 @@ Allows you to use the power of TypeScript with Livewire 3.
 
 ## Installation
 
-    npm i @nolikein/types-livewire3
+    npm i -D @nolikein/types-livewire3
+
+## Usage
+
+### Declare Livewire and AlpineJs into your project
+
+First you need to install the alpineJs TypeScript definition.
+
+    npm i -D @types/alpinejs
+
+Look where is stored your main ts file (your entrypoint) and create at the same place a `livewire.d.ts` file.
+```ts
+// Note: "@/your_livewire_path" is an alias to the "vendor/livewire/livewire/dist/livewire.esm.js" file
+declare module '@/your_livewire_path' {
+    export const Livewire: import('@nolikein/types-livewire3').Livewire.Livewire;
+    export const Alpine: import('@types/alpinejs').Alpine
+}
+```
+
+Now you are able to use Livewire and Alpine inside your project. Here is an example with an index.ts file
+```ts
+import { Livewire, Alpine } from '@/your_livewire_path';
+
+Alpine.data('YourCOmponent', () => {});
+Livewire.start();
+```
+
+### Create an Alpine component that use a $wire instance
+
+#### Use my dedicated package
+Why complicating things when i created the easiest way to do it ? Follow [that link](https://www.npmjs.com/package/@nolikein/typed-alpinejs#user-content-alpinejs-with-livewire-3), install the package then read the instructions.
+
+
+#### The hard way to learn
+
+Here we create a Dropdown component inside a Livewire component that have a "state" public bool property and an "open" public method that return the "state" property as a value.
+```ts
+import { AlpineWired } from "@nolikein/types-livewire3";
+
+/**
+ * Create the types/interfaces of your component.
+ */
+// Your AlpineJs component properties and methods
+interface AlpineData {
+    open: boolean
+    toggle(): void
+    callBackendToOpen(): void
+}
+
+// Your Livewire public properties
+interface LivewireData {
+    // The livewire component has an "state" property that is a boolean
+    state: boolean
+}
+
+// Your Livewire public methods
+interface LivewireMethods {
+    // The livewire component has an "open" method that you can call then return a boolean
+    open(): boolean
+}
+
+/**
+ * Create your component
+ */
+export default (
+    // Component parameters...
+) => ({
+    // Component properties ...
+    open: false,
+
+    // Component methods ...
+    toggle(): void {
+        this.open = !this.open;
+    },
+
+    callBackendToOpen(): void {
+        this.$wire.$call('open', (data: ({ state: boolean })) => {
+            console.log("The livewire component has updated its open property with the value " + data.state);
+        });
+    },
+}) as AlpineWired.AlpineComponent<AlpineData, LivewireData, LivewireMethods>;
+
+
+```
+
+### Create an AlpineJS only component
+
+#### Use my dedicated package
+Why complicating things when i created the easiest way to do it ? Follow [that link](https://www.npmjs.com/package/@nolikein/typed-alpinejs#user-content-alpinejs-component-only), install the package then read the instructions.
+
+
+#### The hard way to learn
+
+```ts
+import { Alpine } from "@nolikein/types-livewire3";
+
+/**
+ * Create the type/interface of your component.
+ */
+// Type version
+type Component = Alpine.AlpineComponent<{
+    open: boolean
+    toggle(): void
+    // Here is a method that pass "this" as a parameter named "self"
+    // It is rarely used. The only case i found is when you use the method as a callback
+    // See the component code to know more about it
+    displayOpenState(self: Alpine.AlpineComponentSelf<Component>): void
+}>
+
+/**
+ * Create your component
+ */
+export default (
+    // Component parameters...
+) => ({
+    // Component properties ...
+    open: false,
+
+    // Component methods ...
+    toggle(): void {
+        this.open = !this.open;
+    },
+
+    /**
+     * The hook that is run when the component is created.
+     * 
+     * You don't need to include it inside your component interface
+     * since it is a part of the Alpine.AlpineComponent interface.
+     */
+    init(): void {
+        // You can execute a component method as a callback and use "this"
+        // inside of it with that pattern
+        setTimeout(
+            () => this.displayOpenState(this),
+            1000,
+        );
+    },
+    // A method that use "this" but named as "self".
+    displayOpenState(self: Alpine.AlpineComponentSelf<Component>): void {
+        console.log("Here is your open state: " + self.open);
+    },
+}) as Component;
+
+```
 
 ## Licence
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nolikein/types-livewire3",
-    "version": "1.0.4",
+    "version": "1.0.6",
     "description": "Typescript content for Laravel Livewire 3",
     "license": "MIT",
     "author": "Côme Wasik",