From 5ec620c54c40b5b527f736f2ff33f00b7895a737 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Samuel=20=C5=A0tancl?= Date: Fri, 26 Feb 2021 17:10:59 +0100 Subject: [PATCH 1/3] update installation instructions --- README.md | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 2cfde6c..977c08c 100644 --- a/README.md +++ b/README.md @@ -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 -
+
``` @@ -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. From b7e382d14707a9a0d06336de5799bc241b09f109 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Samuel=20=C5=A0tancl?= Date: Fri, 26 Feb 2021 17:17:05 +0100 Subject: [PATCH 2/3] grammar improvements --- README.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 977c08c..48e16ba 100644 --- a/README.md +++ b/README.md @@ -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
@@ -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 -
+
``` ```html -
+
...
@@ -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: From 8568564cf27a58b6127f5bb790ed83751c35aab7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Samuel=20=C5=A0tancl?= Date: Fri, 26 Feb 2021 17:20:26 +0100 Subject: [PATCH 3/3] more clarity improvements --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 48e16ba..2600806 100644 --- a/README.md +++ b/README.md @@ -24,7 +24,7 @@ Alpine.component('darkModeToggle', DarkModeToggle); 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. +The package will automatically initialize itself when needed, i.e. when one of its components is used in the currently executed JS bundle. If you'd like to initialize it manually, you can use: @@ -36,7 +36,7 @@ bootstrap(); ## Usage -You can get a component by calling `Alpine.component('componentName')(arg1, arg2)`. If your component has no arguments, still append the `()` after the call. +You can use a component by calling `Alpine.component('componentName')(arg1, arg2)`. If your component has no arguments, still append `()` at the end of the call. 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.