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

grammar improvements

Browse source
This commit is contained in:
Samuel Štancl 2021-02-26 17:17:05 +01:00 • committed by GitHub
parent 5ec620c54c
commit b7e382d147
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 9 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

18
README.md
View file

@ -1,6 +1,6 @@
# TypeScript support for Alpine.js
This package comes with a light TypeScript layer which provides full support for class components in Alpine.js.
This package provides full support for class components in Alpine.js using a thin TypeScript layer.
It's used like this:
@ -11,7 +11,7 @@ import { DarkModeToggle } from './darkModeToggle';
Alpine.component('darkModeToggle', DarkModeToggle);
```
**Use it the template**
**Use it a template**
```html
<div x-data="Alpine.component('darkModeToggle')()" x-init="init()">
<button type="button" @click="switchTheme()">Switch theme</button>
@ -36,18 +36,18 @@ bootstrap();
## Usage
You can get a component by calling `Alpine.component('component-name')(arg1, arg2)`. If your component has no arguments, still append the `()` after the call.
You can get a component by calling `Alpine.component('componentName')(arg1, arg2)`. If your component has no arguments, still append the `()` after the call.
The `component()` call itself returns a function that creates an instance of the component. Invoking the function ensures that the component has a unique instance each time.
The `component()` call itself returns a function for creating instances of the component. Invoking the function ensures that the component has a unique instance each time.
```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>
```
```html
<div x-data="Alpine.component('SearchableSelect')({ options: ['Foo', 'Bar'] })" x-init="init()">
<div x-data="Alpine.component('searchableSelect')({ options: ['Foo', 'Bar'] })" x-init="init()">
<div x-spread="options">
...
</div>
@ -104,7 +104,7 @@ registerComponents(files);
You can create class components by extending `AlpineComponent` and exporting the class as `default`.
The `AlpineComponent` provides IDE support for Alpine's magic properties. This means that you can use `this.$el`, `this.$nextTick(() => this.foo = this.bar)`, and more with full type support.
`AlpineComponent` provides full IDE support for Alpine's magic properties. This means that you can use `this.$el`, `this.$nextTick(() => this.foo = this.bar)`, and more with perfect type enforcement.
```ts
import { AlpineComponent } from '@leanadmin/alpine-typescript';
@ -140,7 +140,7 @@ export default class DarkModeToggle extends AlpineComponent {
## Plain object components
To register a plain object as an Alpine component, return a function that wraps the object like this:
To register a plain object as an Alpine component, export a function that wraps the object like this:
```ts
export default (foo: string, bar: number) => ({
foo,
@ -152,7 +152,7 @@ export default (foo: string, bar: number) => ({
})
```
The function will serve as a "constructor" for the object, setting default values and anything else you might need.
The function will serve as a "constructor" for the object, setting default values and anything else that's needed.
Note that the `=> ({` part is just syntactic sugar, you're free to use `return` if it's useful in your case: