@alpinejs/docs 3.13.3-revision.1 → 3.13.3-revision.3
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
|
@@ -1,49 +1,87 @@
|
|
|
1
1
|
---
|
|
2
|
-
order:
|
|
2
|
+
order: 1
|
|
3
3
|
title: CSP
|
|
4
4
|
---
|
|
5
5
|
|
|
6
|
-
# CSP (Content-Security Policy)
|
|
6
|
+
# CSP (Content-Security Policy) Build
|
|
7
7
|
|
|
8
|
-
In order for Alpine to be able to execute plain strings from HTML attributes as JavaScript expressions, for example `x-on:click="console.log()"`, it needs to rely on utilities that violate the "unsafe-eval"
|
|
8
|
+
In order for Alpine to be able to execute plain strings from HTML attributes as JavaScript expressions, for example `x-on:click="console.log()"`, it needs to rely on utilities that violate the "unsafe-eval" [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) that some applications may enforce for security purposes.
|
|
9
9
|
|
|
10
10
|
> Under the hood, Alpine doesn't actually use eval() itself because it's slow and problematic. Instead it uses Function declarations, which are much better, but still violate "unsafe-eval".
|
|
11
11
|
|
|
12
|
-
In order to accommodate environments where this CSP is necessary, Alpine
|
|
12
|
+
In order to accommodate environments where this CSP is necessary, Alpine offer's an alternate build that doesn't violate "unsafe-eval", but has a more restrictive syntax.
|
|
13
13
|
|
|
14
14
|
<a name="installation"></a>
|
|
15
15
|
## Installation
|
|
16
16
|
|
|
17
|
-
|
|
17
|
+
You can use this build by either including it from a `<script>` tag or installing it via NPM:
|
|
18
18
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
19
|
+
### Via CDN
|
|
20
|
+
|
|
21
|
+
You can include this build's CDN as a `<script>` tag just like you would normally with standard Alpine build:
|
|
22
|
+
|
|
23
|
+
```alpine
|
|
24
|
+
<!-- Alpine's CSP-friendly Core -->
|
|
25
|
+
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/csp@3.x.x/dist/cdn.min.js"></script>
|
|
22
26
|
```
|
|
23
27
|
|
|
24
|
-
|
|
28
|
+
### Via NPM
|
|
25
29
|
|
|
26
|
-
|
|
27
|
-
### Script tag
|
|
30
|
+
You can alternatively install this build from NPM for use inside your bundle like so:
|
|
28
31
|
|
|
29
|
-
```
|
|
30
|
-
|
|
31
|
-
<script src="/path/to/cdn.js" defer></script>
|
|
32
|
-
</html>
|
|
32
|
+
```shell
|
|
33
|
+
npm install @alpinejs/csp
|
|
33
34
|
```
|
|
34
35
|
|
|
35
|
-
|
|
36
|
-
### Module import
|
|
36
|
+
Then initialize it from your bundle:
|
|
37
37
|
|
|
38
38
|
```js
|
|
39
|
-
import Alpine from '
|
|
39
|
+
import Alpine from '@alpinejs/csp'
|
|
40
40
|
|
|
41
41
|
window.Alpine = Alpine
|
|
42
|
-
|
|
42
|
+
|
|
43
|
+
Alpine.start()
|
|
43
44
|
```
|
|
44
45
|
|
|
45
|
-
<a name="
|
|
46
|
-
##
|
|
46
|
+
<a name="basic-example"></a>
|
|
47
|
+
## Basic Example
|
|
48
|
+
|
|
49
|
+
To provide a glimpse of how using the CSP build might feel, here is a copy-pastable HTML file with a working counter componennt using a common CSP setup:
|
|
50
|
+
|
|
51
|
+
```alpine
|
|
52
|
+
<html>
|
|
53
|
+
<head>
|
|
54
|
+
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'nonce-a23gbfz9e'">
|
|
55
|
+
|
|
56
|
+
<script defer nonce="a23gbfz9e" src="https://cdn.jsdelivr.net/npm/@alpinejs/csp@3.x.x/dist/cdn.min.js"></script>
|
|
57
|
+
</head>
|
|
58
|
+
|
|
59
|
+
<body>
|
|
60
|
+
<div x-data="counter">
|
|
61
|
+
<button x-on:click="increment"></button>
|
|
62
|
+
|
|
63
|
+
<span x-text="count"></span>
|
|
64
|
+
</div>
|
|
65
|
+
|
|
66
|
+
<script nonce="a23gbfz9e">
|
|
67
|
+
document.addEventListener('alpine:init', () => {
|
|
68
|
+
Alpine.data('counter', () => {
|
|
69
|
+
return {
|
|
70
|
+
count: 1,
|
|
71
|
+
|
|
72
|
+
increment() {
|
|
73
|
+
this.count++;
|
|
74
|
+
},
|
|
75
|
+
}
|
|
76
|
+
})
|
|
77
|
+
})
|
|
78
|
+
</script>
|
|
79
|
+
</body>
|
|
80
|
+
</html>
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
<a name="api-restrictions"></a>
|
|
84
|
+
## API Restrictions
|
|
47
85
|
|
|
48
86
|
Since Alpine can no longer interpret strings as plain JavaScript, it has to parse and construct JavaScript functions from them manually.
|
|
49
87
|
|
|
@@ -70,10 +108,13 @@ However, breaking out the expressions into external APIs, the following is valid
|
|
|
70
108
|
<span x-text="count"></span>
|
|
71
109
|
</div>
|
|
72
110
|
```
|
|
111
|
+
|
|
73
112
|
```js
|
|
74
113
|
Alpine.data('counter', () => ({
|
|
75
114
|
count: 1,
|
|
76
115
|
|
|
77
|
-
increment() {
|
|
116
|
+
increment() {
|
|
117
|
+
this.count++
|
|
118
|
+
},
|
|
78
119
|
}))
|
|
79
120
|
```
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
---
|
|
2
|
-
order:
|
|
2
|
+
order: 3
|
|
3
3
|
title: Extending
|
|
4
4
|
---
|
|
5
5
|
|
|
@@ -229,7 +229,7 @@ Now if the directive is removed from this element or the element is removed itse
|
|
|
229
229
|
|
|
230
230
|
By default, any new directive will run after the majority of the standard ones (with the exception of `x-teleport`). This is usually acceptable but some times you might need to run your custom directive before another specific one.
|
|
231
231
|
This can be achieved by chaining the `.before() function to `Alpine.directive()` and specifying which directive needs to run after your custom one.
|
|
232
|
-
|
|
232
|
+
|
|
233
233
|
```js
|
|
234
234
|
Alpine.directive('foo', (el, { value, modifiers, expression }) => {
|
|
235
235
|
Alpine.addScopeToNode(el, {foo: 'bar'})
|
package/src/en/directives/for.md
CHANGED
|
@@ -25,6 +25,30 @@ Alpine's `x-for` directive allows you to create DOM elements by iterating throug
|
|
|
25
25
|
</div>
|
|
26
26
|
<!-- END_VERBATIM -->
|
|
27
27
|
|
|
28
|
+
You may also pass objects to `x-for`.
|
|
29
|
+
|
|
30
|
+
```alpine
|
|
31
|
+
<ul x-data="{ car: { make: 'Jeep', model: 'Grand Cherokee', color: 'Black' } }">
|
|
32
|
+
<template x-for="(value, index) in car">
|
|
33
|
+
<li>
|
|
34
|
+
<span x-text="index"></span>: <span x-text="value"></span>
|
|
35
|
+
</li>
|
|
36
|
+
</template>
|
|
37
|
+
</ul>
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
<!-- START_VERBATIM -->
|
|
41
|
+
<div class="demo">
|
|
42
|
+
<ul x-data="{ car: { make: 'Jeep', model: 'Grand Cherokee', color: 'Black' } }">
|
|
43
|
+
<template x-for="(value, index) in car">
|
|
44
|
+
<li>
|
|
45
|
+
<span x-text="index"></span>: <span x-text="value"></span>
|
|
46
|
+
</li>
|
|
47
|
+
</template>
|
|
48
|
+
</ul>
|
|
49
|
+
</div>
|
|
50
|
+
<!-- END_VERBATIM -->
|
|
51
|
+
|
|
28
52
|
There are two rules worth noting about `x-for`:
|
|
29
53
|
|
|
30
54
|
>`x-for` MUST be declared on a `<template>` element
|
|
@@ -62,6 +62,7 @@ Now when the `<button>` is clicked, the input element's value will instantly be
|
|
|
62
62
|
* `<input type="checkbox">`
|
|
63
63
|
* `<input type="radio">`
|
|
64
64
|
* `<select>`
|
|
65
|
+
* `<input type="range">`
|
|
65
66
|
|
|
66
67
|
<a name="text-inputs"></a>
|
|
67
68
|
## Text inputs
|
|
@@ -282,6 +283,26 @@ Color: <span x-text="color"></span>
|
|
|
282
283
|
</div>
|
|
283
284
|
<!-- END_VERBATIM -->
|
|
284
285
|
|
|
286
|
+
<a name="range-inputs"></a>
|
|
287
|
+
## Range inputs
|
|
288
|
+
|
|
289
|
+
```alpine
|
|
290
|
+
<input type="range" x-model="range" min="0" max="1" step="0.1">
|
|
291
|
+
|
|
292
|
+
<span x-text="range"></span>
|
|
293
|
+
```
|
|
294
|
+
|
|
295
|
+
<!-- START_VERBATIM -->
|
|
296
|
+
<div class="demo">
|
|
297
|
+
<div x-data="{ range: 0.5 }">
|
|
298
|
+
<input type="range" x-model="range" min="0" max="1" step="0.1">
|
|
299
|
+
|
|
300
|
+
<div class="pt-4" x-text="range"></div>
|
|
301
|
+
</div>
|
|
302
|
+
</div>
|
|
303
|
+
<!-- END_VERBATIM -->
|
|
304
|
+
|
|
305
|
+
|
|
285
306
|
<a name="modifiers"></a>
|
|
286
307
|
## Modifiers
|
|
287
308
|
|
package/src/en/magics/refs.md
CHANGED
|
@@ -25,3 +25,18 @@ title: refs
|
|
|
25
25
|
<!-- END_VERBATIM -->
|
|
26
26
|
|
|
27
27
|
Now, when the `<button>` is pressed, the `<span>` will be removed.
|
|
28
|
+
|
|
29
|
+
<a name="limitations"></a>
|
|
30
|
+
### Limitations
|
|
31
|
+
|
|
32
|
+
In V2 it was possible to bind `$refs` to elements dynamically, like seen below:
|
|
33
|
+
|
|
34
|
+
```alpine
|
|
35
|
+
<template x-for="item in items" :key="item.id" >
|
|
36
|
+
<div :x-ref="item.name">
|
|
37
|
+
some content ...
|
|
38
|
+
</div>
|
|
39
|
+
</template>
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
However, in V3, `$refs` can only be accessed for elements that are created statically. So for the example above: if you were expecting the value of `item.name` inside of `$refs` to be something like *Batteries*, you should be aware that `$refs` will actually contain the literal string `'item.name'` and not *Batteries*.
|