@alpinejs/docs 3.13.0-revision.1 → 3.13.2-revision.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
package/src/en/advanced/csp.md
CHANGED
|
@@ -14,14 +14,21 @@ In order to accommodate environments where this CSP is necessary, Alpine will of
|
|
|
14
14
|
<a name="installation"></a>
|
|
15
15
|
## Installation
|
|
16
16
|
|
|
17
|
-
The CSP build hasn’t been officially released yet. In the meantime, you may
|
|
17
|
+
The CSP build hasn’t been officially released yet. In the meantime, you may build it from source. To do this, clone the [`alpinejs/alpine`](https://github.com/alpinejs/alpine) repository and run:
|
|
18
|
+
|
|
19
|
+
```shell
|
|
20
|
+
npm install
|
|
21
|
+
npm run build
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
This will generate a `/packages/csp/dist/` directory with the built files. After copying the appropriate file into your project, you can include it either via `<script>` tag or module import:
|
|
18
25
|
|
|
19
26
|
<a name="script-tag"></a>
|
|
20
27
|
### Script tag
|
|
21
28
|
|
|
22
29
|
```alpine
|
|
23
30
|
<html>
|
|
24
|
-
<script src="
|
|
31
|
+
<script src="/path/to/cdn.js" defer></script>
|
|
25
32
|
</html>
|
|
26
33
|
```
|
|
27
34
|
|
|
@@ -29,7 +36,7 @@ The CSP build hasn’t been officially released yet. In the meantime, you may [b
|
|
|
29
36
|
### Module import
|
|
30
37
|
|
|
31
38
|
```js
|
|
32
|
-
import Alpine from '
|
|
39
|
+
import Alpine from './path/to/module.esm.js'
|
|
33
40
|
|
|
34
41
|
window.Alpine = Alpine
|
|
35
42
|
window.Alpine.start()
|
|
@@ -72,3 +72,18 @@ Alpine.data('dropdown', () => ({
|
|
|
72
72
|
},
|
|
73
73
|
}))
|
|
74
74
|
```
|
|
75
|
+
|
|
76
|
+
If you have both an `x-data` object containing an `init()` method and an `x-init` directive, the `x-data` method will be called before the directive.
|
|
77
|
+
|
|
78
|
+
```alpine
|
|
79
|
+
<div
|
|
80
|
+
x-data="{
|
|
81
|
+
init() {
|
|
82
|
+
console.log('I am called first')
|
|
83
|
+
}
|
|
84
|
+
}"
|
|
85
|
+
x-init="console.log('I am called second')"
|
|
86
|
+
>
|
|
87
|
+
...
|
|
88
|
+
</div>
|
|
89
|
+
```
|
|
@@ -33,7 +33,7 @@ This is by far the simplest way to get started with Alpine. Include the followin
|
|
|
33
33
|
Notice the `@3.x.x` in the provided CDN link. This will pull the latest version of Alpine version 3. For stability in production, it's recommended that you hardcode the latest version in the CDN link.
|
|
34
34
|
|
|
35
35
|
```alpine
|
|
36
|
-
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.13.
|
|
36
|
+
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.13.2/dist/cdn.min.js"></script>
|
|
37
37
|
```
|
|
38
38
|
|
|
39
39
|
That's it! Alpine is now available for use inside your page.
|
|
@@ -61,8 +61,9 @@ Alpine.start()
|
|
|
61
61
|
|
|
62
62
|
> The `window.Alpine = Alpine` bit is optional, but is nice to have for freedom and flexibility. Like when tinkering with Alpine from the devtools for example.
|
|
63
63
|
|
|
64
|
-
|
|
65
64
|
> If you imported Alpine into a bundle, you have to make sure you are registering any extension code IN BETWEEN when you import the `Alpine` global object, and when you initialize Alpine by calling `Alpine.start()`.
|
|
66
65
|
|
|
66
|
+
> Ensure that `Alpine.start()` is only called once per page. Calling it more than once will result in multiple "instances" of Alpine running at the same time.
|
|
67
|
+
|
|
67
68
|
|
|
68
69
|
[→ Read more about extending Alpine](/advanced/extending)
|
|
@@ -87,6 +87,43 @@ Alpine.data('dropdown', () => ({
|
|
|
87
87
|
}))
|
|
88
88
|
```
|
|
89
89
|
|
|
90
|
+
<a name="destroy-functions"></a>
|
|
91
|
+
## Destroy functions
|
|
92
|
+
|
|
93
|
+
If your component contains a `destroy()` method, Alpine will automatically execute it before cleaning up the component.
|
|
94
|
+
|
|
95
|
+
A primary example for this is when registering an event handler with another library or a browser API that isn't available through Alpine.
|
|
96
|
+
See the following example code on how to use the `destroy()` method to clean up such a handler.
|
|
97
|
+
|
|
98
|
+
```js
|
|
99
|
+
Alpine.data('timer', () => ({
|
|
100
|
+
timer: null,
|
|
101
|
+
counter: 0,
|
|
102
|
+
init() {
|
|
103
|
+
// Register an event handler that references the component instance
|
|
104
|
+
this.timer = setInterval(() => {
|
|
105
|
+
console.log('Increased counter to', ++this.counter);
|
|
106
|
+
}, 1000);
|
|
107
|
+
},
|
|
108
|
+
destroy() {
|
|
109
|
+
// Detach the handler, avoiding memory and side-effect leakage
|
|
110
|
+
clearInterval(this.timer);
|
|
111
|
+
},
|
|
112
|
+
}))
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
An example where a component is destroyed is when using one inside an `x-if`:
|
|
116
|
+
|
|
117
|
+
```html
|
|
118
|
+
<span x-data="{ enabled: false }">
|
|
119
|
+
<button @click.prevent="enabled = !enabled">Toggle</button>
|
|
120
|
+
|
|
121
|
+
<template x-if="enabled">
|
|
122
|
+
<span x-data="timer" x-text="counter"></span>
|
|
123
|
+
</template>
|
|
124
|
+
</span>
|
|
125
|
+
```
|
|
126
|
+
|
|
90
127
|
<a name="using-magic-properties"></a>
|
|
91
128
|
## Using magic properties
|
|
92
129
|
|