From 846417477487c81002617cc42b797d3977682f48 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Samuel=20=C5=A0tancl?= Date: Fri, 26 Feb 2021 22:42:06 +0100 Subject: [PATCH 1/7] syntax improvements in examples --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 58434d5..7c2c0a9 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ It's used like this: **Register a component** ```ts -import { DarkModeToggle } from './darkModeToggle'; +import DarkModeToggle from './darkModeToggle'; Alpine.component('darkModeToggle', DarkModeToggle); ``` @@ -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); @@ -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; } From 9444b8bb63df2a590bff53ff4f05506a072384bd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Samuel=20=C5=A0tancl?= Date: Fri, 26 Feb 2021 22:44:01 +0100 Subject: [PATCH 2/7] grammar --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 7c2c0a9..5e4ad84 100644 --- a/README.md +++ b/README.md @@ -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). From acc2715d569667544805629ef899128c9b1cf4ff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Samuel=20=C5=A0tancl?= Date: Sat, 27 Feb 2021 00:12:29 +0100 Subject: [PATCH 3/7] typo --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 5e4ad84..ea3bf81 100644 --- a/README.md +++ b/README.md @@ -11,7 +11,7 @@ import DarkModeToggle from './darkModeToggle'; Alpine.component('darkModeToggle', DarkModeToggle); ``` -**Use it a template** +**Use it in a template** ```html
From 4d45b2136311a238e75d1121ea86cf64d6ac3b60 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Samuel=20=C5=A0tancl?= Date: Sat, 27 Feb 2021 00:13:54 +0100 Subject: [PATCH 4/7] clearer sentence --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index ea3bf81..f4f1353 100644 --- a/README.md +++ b/README.md @@ -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. Hoewver, 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. From 340524f02ac2ae2efd0b009a4ecfc28c55aa7065 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Samuel=20=C5=A0tancl?= Date: Sat, 27 Feb 2021 00:15:28 +0100 Subject: [PATCH 5/7] typo --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index f4f1353..76fe375 100644 --- a/README.md +++ b/README.md @@ -76,7 +76,7 @@ component('example', ExampleComponent); Which will make it accessible using `Alpine.component('example')('foo', 'bar)`. -**Note: You may notice that `Alpine.component()` can also be used to register components. Hoewver, 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. +**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. From 6f31a78b57514cd3b0bd2abfb953168e069bb076 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Samuel=20=C5=A0tancl?= Date: Sat, 27 Feb 2021 16:41:33 +0100 Subject: [PATCH 6/7] add more github config --- .github/FUNDING.yml | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 .github/FUNDING.yml 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 From b5276c324fd2ac501c2a6faceb386f35c6d7c351 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Samuel=20=C5=A0tancl?= Date: Sat, 27 Feb 2021 19:47:54 +0100 Subject: [PATCH 7/7] Fix file extension in example --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 76fe375..92e873c 100644 --- a/README.md +++ b/README.md @@ -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'; @@ -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()`