1
0
Fork 0
mirror of https://github.com/archtechx/alpine-typescript.git synced 2025-12-11 22:34:03 +00:00

update installation instructions

This commit is contained in:
Samuel Štancl 2021-02-26 17:10:59 +01:00 committed by GitHub
parent 1a121cc6bd
commit 5ec620c54c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -6,14 +6,14 @@ It's used like this:
**Register a component**
```ts
import { DarkModeToggle }
import { DarkModeToggle } from './darkModeToggle';
Alpine.component('DarkModeToggle', DarkModeToggle);
Alpine.component('darkModeToggle', DarkModeToggle);
```
**Use it the template**
```html
<div x-data="Alpine.component('DarkModeToggle')()" x-init="init()">
<div x-data="Alpine.component('darkModeToggle')()" x-init="init()">
<button type="button" @click="switchTheme()">Switch theme</button>
</div>
```
@ -21,11 +21,17 @@ Alpine.component('DarkModeToggle', DarkModeToggle);
## Installation
```
npm install --save-dev github:leanadmin/alpine-typescript
npm install --save-dev @leanadmin/alpine-typescript
```
The package will automatically initialize itself when needed, i.e. when one of its components are used in the JS bundle on the currently visited page.
If you'd like to initialize it manually, you can use:
```ts
// todo
import { bootstrap } from '@leanadmin/alpine-typescript';
bootstrap();
```
## Usage
@ -53,8 +59,8 @@ The `component()` call itself returns a function that creates an instance of the
To create a component, you need to create the component object and register it using one of the provided helpers.
Component objects can be:
- functions returning plain objects
- classes
- functions returning plain objects
In the context of plain objects, the wrapper function acts as a constructor that can pass initial data to the object.