diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml new file mode 100644 index 0000000..a5b10e1 --- /dev/null +++ b/.github/FUNDING.yml @@ -0,0 +1,3 @@ +# These are supported funding model platforms + +github: stancl diff --git a/README.md b/README.md index 58434d5..92e873c 100644 --- a/README.md +++ b/README.md @@ -6,12 +6,12 @@ It's used like this: **Register a component** ```ts -import { DarkModeToggle } from './darkModeToggle'; +import DarkModeToggle from './darkModeToggle'; Alpine.component('darkModeToggle', DarkModeToggle); ``` -**Use it a template** +**Use it in a template** ```html
@@ -68,7 +68,7 @@ In the context of plain objects, the wrapper function acts as a constructor that A component can be registered like this: ```ts -import { ExampleComponent } from './ExampleComponent'; +import ExampleComponent from './ExampleComponent'; import { component } from '@leanadmin/alpine-typescript'; component('example', ExampleComponent); @@ -76,7 +76,7 @@ component('example', ExampleComponent); Which will make it accessible using `Alpine.component('example')('foo', 'bar)`. -**Note: It's better to avoid using `Alpine.component('example', ExampleComponent)`** even if it might work in some cases. The reason for this is that `window.Alpine` might not yet be accessible when you're registering components, and if it is, it's possible that it's already evaluated some of the `x-data` attributes. `component()` is guaranteed to work. And of course, you can alias the import if you wish to use a different name. +**Note: You may notice that `Alpine.component()` can also be used to register components. However, it's better to avoid using it.** The reason for this is that `window.Alpine` might not yet be accessible when you're registering components, and if it is, it's possible that it's already evaluated some of the `x-data` attributes. `component()` is guaranteed to work. And of course, you can alias the import if you wish to use a different name. To register multiple components, you can use the `registerComponents()` helper. @@ -169,7 +169,7 @@ export default (foo: string, bar: number) => { # Real-world example -Here's a practical example that uses constructors, `init()`, refs, events, and includes dependencies in the right way. +Here's a practical example that uses constructors, `init()`, refs, events, and includes dependencies the right way. This example uses the Alpine component that we use for search on the [Lean documentation site](https://lean-admin.dev). @@ -199,7 +199,7 @@ import 'alpinejs'; - We import Alpine *after* this package
-resources/js/search.js +resources/js/search.ts ```ts import { AlpineComponent } from '@leanadmin/alpine-typescript'; @@ -270,7 +270,7 @@ export default class Search extends AlpineComponent { return this.$refs.results.children[index + 1] as HTMLElement; }; - currentResult(): HTMLElement { + currentResult(): HTMLElement|null { if (! this.$refs.results.contains(document.activeElement)) { return null; } @@ -316,7 +316,7 @@ export default class Search extends AlpineComponent {
-**`search.js` highlights:** +**`search.ts` highlights:** - We `export default` the class - We have to call `super()` if we define a constructor - Sometimes, we have to use `as HTMLElement` because the DOM API can return `Element` which doesn't have methods like `focus()`