@ramstack/alpinegear-format 1.4.3 → 1.4.4
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/README.md +177 -211
- package/alpinegear-format.esm.js +94 -95
- package/alpinegear-format.esm.min.js +1 -1
- package/alpinegear-format.js +100 -96
- package/alpinegear-format.min.js +1 -1
- package/package.json +9 -3
package/README.md
CHANGED
|
@@ -1,211 +1,177 @@
|
|
|
1
|
-
# @ramstack/alpinegear-format
|
|
2
|
-
[](https://www.npmjs.com/package/@ramstack/alpinegear-format)
|
|
3
|
-
[](https://github.com/rameel/ramstack.alpinegear.js/blob/main/LICENSE)
|
|
4
|
-
|
|
5
|
-
`@ramstack/alpinegear-format` is a plugin for [Alpine.js](https://alpinejs.dev/) that provides the `x-format` directive.
|
|
6
|
-
|
|
7
|
-
This directive allows you to easily interpolate text using a template syntax similar to what's available in `Vue.js`.
|
|
8
|
-
|
|
9
|
-
> [!Note]
|
|
10
|
-
> This package is part of the **[`@ramstack/alpinegear-main`](https://www.npmjs.com/package/@ramstack/alpinegear-main)** bundle.
|
|
11
|
-
> If you are using the main bundle, you don't need to install this package separately.
|
|
12
|
-
|
|
13
|
-
## Installation
|
|
14
|
-
|
|
15
|
-
### Using CDN
|
|
16
|
-
To include the CDN version of this plugin, add the following `<script>` tag before the core `alpine.js` file:
|
|
17
|
-
|
|
18
|
-
```html
|
|
19
|
-
<!-- alpine.js plugin -->
|
|
20
|
-
<script src="https://cdn.jsdelivr.net/npm/@ramstack/alpinegear-format@1/alpinegear-format.min.js" defer></script>
|
|
21
|
-
|
|
22
|
-
<!-- alpine.js -->
|
|
23
|
-
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js" defer></script>
|
|
24
|
-
```
|
|
25
|
-
|
|
26
|
-
### Using NPM
|
|
27
|
-
Alternatively, you can install the plugin via `npm`:
|
|
28
|
-
|
|
29
|
-
```bash
|
|
30
|
-
npm install --save @ramstack/alpinegear-format
|
|
31
|
-
```
|
|
32
|
-
|
|
33
|
-
Then initialize it in your bundle:
|
|
34
|
-
|
|
35
|
-
```js
|
|
36
|
-
import Alpine from "alpinejs";
|
|
37
|
-
import format from "@ramstack/alpinegear-format";
|
|
38
|
-
|
|
39
|
-
Alpine.plugin(format);
|
|
40
|
-
Alpine.start();
|
|
41
|
-
```
|
|
42
|
-
|
|
43
|
-
## Usage
|
|
44
|
-
The `x-format` directive enables you to use double curly braces (`{{ ... }}`) to evaluate expressions
|
|
45
|
-
and inject their values into the DOM. The expressions within placeholders can be any valid
|
|
46
|
-
such as variables, arithmetic operations, or function calls, as long as they are available in the Alpine.js scope.
|
|
47
|
-
|
|
48
|
-
```html
|
|
49
|
-
<div x-data="{ message: 'Hello, World!' }" x-format>
|
|
50
|
-
<input x-model="message" />
|
|
51
|
-
|
|
52
|
-
<p>
|
|
53
|
-
Message: {{ message || "Empty" }}
|
|
54
|
-
</p>
|
|
55
|
-
</div>
|
|
56
|
-
```
|
|
57
|
-
🚀 [Live demo | Alpine.js x-format: Interpolate expression](https://jsfiddle.net/rameel/68nv4Ldg/)
|
|
58
|
-
|
|
59
|
-
In this example, `{{ message || "Empty" }}` will be replaced by the evaluated result, and the content
|
|
60
|
-
will update whenever the `message` property change.
|
|
61
|
-
|
|
62
|
-
### Using with Attributes
|
|
63
|
-
The `x-format` directive can also be used to interpolate values inside HTML attributes:
|
|
64
|
-
|
|
65
|
-
```html
|
|
66
|
-
<div x-data="{ message: 'Hello, World!' }" x-format>
|
|
67
|
-
<input x-model="message" />
|
|
68
|
-
|
|
69
|
-
<p title="Message: {{ message }}">
|
|
70
|
-
Message: {{ message }}
|
|
71
|
-
</p>
|
|
72
|
-
</div>
|
|
73
|
-
```
|
|
74
|
-
🚀 [Live demo | Alpine.js x-format: Interpolate expression](https://jsfiddle.net/rameel/68nv4Ldg/)
|
|
75
|
-
|
|
76
|
-
Just like with text interpolation, the attribute values will be updated automatically when the data changes.
|
|
77
|
-
|
|
78
|
-
> [!IMPORTANT]
|
|
79
|
-
> The `x-format` directive treats evaluated expressions as plain text, not HTML, ensuring safe rendering and preventing injection attacks like XSS.
|
|
80
|
-
>
|
|
81
|
-
> If you need to render HTML, use the `x-html` directive instead.
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
> [!WARNING]
|
|
85
|
-
> Keep in mind that interpolation within a `<textarea>` element may not work as you expect.
|
|
86
|
-
>
|
|
87
|
-
> Use `x-model` instead.
|
|
88
|
-
|
|
89
|
-
### Using `once` modifier
|
|
90
|
-
The `once` modifier allows you to interpolate the expression only once.
|
|
91
|
-
After the initial rendering, the content remains static and will not update, even if the data changes.
|
|
92
|
-
|
|
93
|
-
```html
|
|
94
|
-
<div x-data="{ message: 'Hello, World!'}" x-format.once>
|
|
95
|
-
<input x-model="message" />
|
|
96
|
-
<p>
|
|
97
|
-
{{ message }}
|
|
98
|
-
</p>
|
|
99
|
-
</div>
|
|
100
|
-
```
|
|
101
|
-
🚀 [Live demo | Alpine.js x-format: Interpolate expression only once](https://jsfiddle.net/rameel/ckfeLpj8/)
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
## Optimization
|
|
105
|
-
The `x-format` directive is optimized to update only the parts of the text that change,
|
|
106
|
-
without replacing the entire DOM element. This is especially useful for large or complex DOM structures.
|
|
107
|
-
|
|
108
|
-
For example:
|
|
109
|
-
```html
|
|
110
|
-
<div x-data="{ message: 'Hello, World!'}" x-format>
|
|
111
|
-
The 'message' value is '{{ message }}' and it updates when the property changes.
|
|
112
|
-
</div>
|
|
113
|
-
```
|
|
114
|
-
|
|
115
|
-
In this case, the text will be split into three separate text nodes:
|
|
116
|
-
1. `The 'message' value is '`
|
|
117
|
-
2. `{{ message }}`
|
|
118
|
-
3. `' and it updates when the property changes.`
|
|
119
|
-
|
|
120
|
-
Only the `{{ message }}` text node will be updated, while the static nodes will remain unchanged.
|
|
121
|
-
|
|
122
|
-
> [!NOTE]
|
|
123
|
-
> This optimization does not apply to attribute values.
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
## Dynamic Elements
|
|
127
|
-
Since the `x-format` directive doesn't automatically track changes to the DOM,
|
|
128
|
-
newly added elements (e.g., via `x-if` or `x-for`) will not automatically interpolate their templates.
|
|
129
|
-
|
|
130
|
-
For instance, in the example below, the `{{ message }}` inside `x-if` remains unchanged:
|
|
131
|
-
|
|
132
|
-
```html
|
|
133
|
-
<div x-data="{ show: false, message: 'Hello, World!'}" x-format>
|
|
134
|
-
<template x-if="show">
|
|
135
|
-
<p>{{ message }}</p>
|
|
136
|
-
</template>
|
|
137
|
-
</div>
|
|
138
|
-
```
|
|
139
|
-
|
|
140
|
-
To ensure proper interpolation, include the `x-format` directive in the dynamically rendered elements:
|
|
141
|
-
|
|
142
|
-
```html
|
|
143
|
-
<div x-data="{ show: false, message: 'Hello, World!' }">
|
|
144
|
-
<input x-model="message" />
|
|
145
|
-
|
|
146
|
-
<label>
|
|
147
|
-
<input type="checkbox" x-model="show" />
|
|
148
|
-
Show message
|
|
149
|
-
</label>
|
|
150
|
-
|
|
151
|
-
<template x-if="show">
|
|
152
|
-
<p x-format>{{ message }}</p>
|
|
153
|
-
</template>
|
|
154
|
-
</div>
|
|
155
|
-
```
|
|
156
|
-
🚀 [Live demo | Alpine.js x-format: Dynamic elements](https://jsfiddle.net/rameel/1s8pwcx9/)
|
|
157
|
-
|
|
158
|
-
## Source Code
|
|
159
|
-
You can find the source code for this plugin on GitHub:
|
|
160
|
-
|
|
161
|
-
https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/format
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
## Related
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
**[@ramstack/alpinegear-fragment](https://www.npmjs.com/package/@ramstack/alpinegear-fragment)** ([README](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/fragment))<br>
|
|
180
|
-
Provides the `x-fragment` directive, which allows for fragment-like behavior similar to what's available in frameworks
|
|
181
|
-
like `Vue.js` or `React`, where multiple root elements can be grouped together.
|
|
182
|
-
|
|
183
|
-
**[@ramstack/alpinegear-match](https://www.npmjs.com/package/@ramstack/alpinegear-match)** ([README](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/match))<br>
|
|
184
|
-
Provides the `x-match` directive, which functions similarly to the `switch` statement in many programming languages,
|
|
185
|
-
allowing you to conditionally render elements based on matching cases.
|
|
186
|
-
|
|
187
|
-
**[@ramstack/alpinegear-when](https://www.npmjs.com/package/@ramstack/alpinegear-when)** ([README](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/when))<br>
|
|
188
|
-
Provides the `x-when` directive, which allows for conditional rendering of elements similar to `x-if`, but supports multiple root elements.
|
|
189
|
-
|
|
190
|
-
**[@ramstack/alpinegear-destroy](https://www.npmjs.com/package/@ramstack/alpinegear-destroy)** ([README](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/destroy))<br>
|
|
191
|
-
Provides the `x-destroy` directive, which is the opposite of `x-init` and allows you to hook into the cleanup phase
|
|
192
|
-
of any element, running a callback when the element is removed from the DOM.
|
|
193
|
-
|
|
194
|
-
**[@ramstack/alpinegear-hotkey](https://www.npmjs.com/package/@ramstack/alpinegear-hotkey)** ([README](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/hotkey))<br>
|
|
195
|
-
Provides the `x-hotkey` directive, which allows you to easily handle keyboard shortcuts within your Alpine.js components or application.
|
|
196
|
-
|
|
197
|
-
**[@ramstack/alpinegear-router](https://www.npmjs.com/package/@ramstack/alpinegear-router)** ([README](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/router))<br>
|
|
198
|
-
Provides the `x-router` and `x-route` directives, which enable client-side navigation and routing functionality within your Alpine.js application.
|
|
199
|
-
|
|
200
|
-
**[@ramstack/alpinegear-dialog](https://www.npmjs.com/package/@ramstack/alpinegear-dialog)** ([README](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/dialog))<br>
|
|
201
|
-
Provides a headless dialog directive for Alpine.js based on the native HTML `<dialog>` element.
|
|
202
|
-
It supports declarative composition, value-based close semantics, and both modal and non-modal dialogs,
|
|
203
|
-
with optional Promise-based imperative control.
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
## Contributions
|
|
207
|
-
Bug reports and contributions are welcome.
|
|
208
|
-
|
|
209
|
-
## License
|
|
210
|
-
This package is released as open source under the **MIT License**.
|
|
211
|
-
See the [LICENSE](https://github.com/rameel/ramstack.alpinegear.js/blob/main/LICENSE) file for more details.
|
|
1
|
+
# @ramstack/alpinegear-format
|
|
2
|
+
[](https://www.npmjs.com/package/@ramstack/alpinegear-format)
|
|
3
|
+
[](https://github.com/rameel/ramstack.alpinegear.js/blob/main/LICENSE)
|
|
4
|
+
|
|
5
|
+
`@ramstack/alpinegear-format` is a plugin for [Alpine.js](https://alpinejs.dev/) that provides the `x-format` directive.
|
|
6
|
+
|
|
7
|
+
This directive allows you to easily interpolate text using a template syntax similar to what's available in `Vue.js`.
|
|
8
|
+
|
|
9
|
+
> [!Note]
|
|
10
|
+
> This package is part of the **[`@ramstack/alpinegear-main`](https://www.npmjs.com/package/@ramstack/alpinegear-main)** bundle.
|
|
11
|
+
> If you are using the main bundle, you don't need to install this package separately.
|
|
12
|
+
|
|
13
|
+
## Installation
|
|
14
|
+
|
|
15
|
+
### Using CDN
|
|
16
|
+
To include the CDN version of this plugin, add the following `<script>` tag before the core `alpine.js` file:
|
|
17
|
+
|
|
18
|
+
```html
|
|
19
|
+
<!-- alpine.js plugin -->
|
|
20
|
+
<script src="https://cdn.jsdelivr.net/npm/@ramstack/alpinegear-format@1/alpinegear-format.min.js" defer></script>
|
|
21
|
+
|
|
22
|
+
<!-- alpine.js -->
|
|
23
|
+
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js" defer></script>
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
### Using NPM
|
|
27
|
+
Alternatively, you can install the plugin via `npm`:
|
|
28
|
+
|
|
29
|
+
```bash
|
|
30
|
+
npm install --save @ramstack/alpinegear-format
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
Then initialize it in your bundle:
|
|
34
|
+
|
|
35
|
+
```js
|
|
36
|
+
import Alpine from "alpinejs";
|
|
37
|
+
import format from "@ramstack/alpinegear-format";
|
|
38
|
+
|
|
39
|
+
Alpine.plugin(format);
|
|
40
|
+
Alpine.start();
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
## Usage
|
|
44
|
+
The `x-format` directive enables you to use double curly braces (`{{ ... }}`) to evaluate expressions
|
|
45
|
+
and inject their values into the DOM. The expressions within placeholders can be any valid script expression,
|
|
46
|
+
such as variables, arithmetic operations, or function calls, as long as they are available in the Alpine.js scope.
|
|
47
|
+
|
|
48
|
+
```html
|
|
49
|
+
<div x-data="{ message: 'Hello, World!' }" x-format>
|
|
50
|
+
<input x-model="message" />
|
|
51
|
+
|
|
52
|
+
<p>
|
|
53
|
+
Message: {{ message || "Empty" }}
|
|
54
|
+
</p>
|
|
55
|
+
</div>
|
|
56
|
+
```
|
|
57
|
+
🚀 [Live demo | Alpine.js x-format: Interpolate expression](https://jsfiddle.net/rameel/68nv4Ldg/)
|
|
58
|
+
|
|
59
|
+
In this example, `{{ message || "Empty" }}` will be replaced by the evaluated result, and the content
|
|
60
|
+
will update whenever the `message` property change.
|
|
61
|
+
|
|
62
|
+
### Using with Attributes
|
|
63
|
+
The `x-format` directive can also be used to interpolate values inside HTML attributes:
|
|
64
|
+
|
|
65
|
+
```html
|
|
66
|
+
<div x-data="{ message: 'Hello, World!' }" x-format>
|
|
67
|
+
<input x-model="message" />
|
|
68
|
+
|
|
69
|
+
<p title="Message: {{ message }}">
|
|
70
|
+
Message: {{ message }}
|
|
71
|
+
</p>
|
|
72
|
+
</div>
|
|
73
|
+
```
|
|
74
|
+
🚀 [Live demo | Alpine.js x-format: Interpolate expression](https://jsfiddle.net/rameel/68nv4Ldg/)
|
|
75
|
+
|
|
76
|
+
Just like with text interpolation, the attribute values will be updated automatically when the data changes.
|
|
77
|
+
|
|
78
|
+
> [!IMPORTANT]
|
|
79
|
+
> The `x-format` directive treats evaluated expressions as plain text, not HTML, ensuring safe rendering and preventing injection attacks like XSS.
|
|
80
|
+
>
|
|
81
|
+
> If you need to render HTML, use the `x-html` directive instead.
|
|
82
|
+
|
|
83
|
+
|
|
84
|
+
> [!WARNING]
|
|
85
|
+
> Keep in mind that interpolation within a `<textarea>` element may not work as you expect.
|
|
86
|
+
>
|
|
87
|
+
> Use `x-model` instead.
|
|
88
|
+
|
|
89
|
+
### Using `once` modifier
|
|
90
|
+
The `once` modifier allows you to interpolate the expression only once.
|
|
91
|
+
After the initial rendering, the content remains static and will not update, even if the data changes.
|
|
92
|
+
|
|
93
|
+
```html
|
|
94
|
+
<div x-data="{ message: 'Hello, World!'}" x-format.once>
|
|
95
|
+
<input x-model="message" />
|
|
96
|
+
<p>
|
|
97
|
+
{{ message }}
|
|
98
|
+
</p>
|
|
99
|
+
</div>
|
|
100
|
+
```
|
|
101
|
+
🚀 [Live demo | Alpine.js x-format: Interpolate expression only once](https://jsfiddle.net/rameel/ckfeLpj8/)
|
|
102
|
+
|
|
103
|
+
|
|
104
|
+
## Optimization
|
|
105
|
+
The `x-format` directive is optimized to update only the parts of the text that change,
|
|
106
|
+
without replacing the entire DOM element. This is especially useful for large or complex DOM structures.
|
|
107
|
+
|
|
108
|
+
For example:
|
|
109
|
+
```html
|
|
110
|
+
<div x-data="{ message: 'Hello, World!'}" x-format>
|
|
111
|
+
The 'message' value is '{{ message }}' and it updates when the property changes.
|
|
112
|
+
</div>
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
In this case, the text will be split into three separate text nodes:
|
|
116
|
+
1. `The 'message' value is '`
|
|
117
|
+
2. `{{ message }}`
|
|
118
|
+
3. `' and it updates when the property changes.`
|
|
119
|
+
|
|
120
|
+
Only the `{{ message }}` text node will be updated, while the static nodes will remain unchanged.
|
|
121
|
+
|
|
122
|
+
> [!NOTE]
|
|
123
|
+
> This optimization does not apply to attribute values.
|
|
124
|
+
|
|
125
|
+
|
|
126
|
+
## Dynamic Elements
|
|
127
|
+
Since the `x-format` directive doesn't automatically track changes to the DOM,
|
|
128
|
+
newly added elements (e.g., via `x-if` or `x-for`) will not automatically interpolate their templates.
|
|
129
|
+
|
|
130
|
+
For instance, in the example below, the `{{ message }}` inside `x-if` remains unchanged:
|
|
131
|
+
|
|
132
|
+
```html
|
|
133
|
+
<div x-data="{ show: false, message: 'Hello, World!'}" x-format>
|
|
134
|
+
<template x-if="show">
|
|
135
|
+
<p>{{ message }}</p>
|
|
136
|
+
</template>
|
|
137
|
+
</div>
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
To ensure proper interpolation, include the `x-format` directive in the dynamically rendered elements:
|
|
141
|
+
|
|
142
|
+
```html
|
|
143
|
+
<div x-data="{ show: false, message: 'Hello, World!' }">
|
|
144
|
+
<input x-model="message" />
|
|
145
|
+
|
|
146
|
+
<label>
|
|
147
|
+
<input type="checkbox" x-model="show" />
|
|
148
|
+
Show message
|
|
149
|
+
</label>
|
|
150
|
+
|
|
151
|
+
<template x-if="show">
|
|
152
|
+
<p x-format>{{ message }}</p>
|
|
153
|
+
</template>
|
|
154
|
+
</div>
|
|
155
|
+
```
|
|
156
|
+
🚀 [Live demo | Alpine.js x-format: Dynamic elements](https://jsfiddle.net/rameel/1s8pwcx9/)
|
|
157
|
+
|
|
158
|
+
## Source Code
|
|
159
|
+
You can find the source code for this plugin on GitHub:
|
|
160
|
+
|
|
161
|
+
https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/format
|
|
162
|
+
|
|
163
|
+
|
|
164
|
+
## Related packages
|
|
165
|
+
This package is part of **[AlpineGear](https://github.com/rameel/ramstack.alpinegear.js)** —
|
|
166
|
+
a collection of utilities and directives for [Alpine.js](https://alpinejs.dev).
|
|
167
|
+
|
|
168
|
+
You can find the full list of related packages and their documentation here:
|
|
169
|
+
https://github.com/rameel/ramstack.alpinegear.js
|
|
170
|
+
|
|
171
|
+
|
|
172
|
+
## Contributions
|
|
173
|
+
Bug reports and contributions are welcome.
|
|
174
|
+
|
|
175
|
+
## License
|
|
176
|
+
This package is released as open source under the **MIT License**.
|
|
177
|
+
See the [LICENSE](https://github.com/rameel/ramstack.alpinegear.js/blob/main/LICENSE) file for more details.
|
package/alpinegear-format.esm.js
CHANGED
|
@@ -13,100 +13,99 @@ function has_getter(value) {
|
|
|
13
13
|
|
|
14
14
|
const has_modifier = (modifiers, modifier) => modifiers.includes(modifier);
|
|
15
15
|
|
|
16
|
-
function plugin({ directive, evaluateLater, mutateDom }) {
|
|
17
|
-
directive("format", (el, { modifiers }, { effect }) => {
|
|
18
|
-
const placeholder_regex = /{{(?<expr>.+?)}}/g;
|
|
19
|
-
const is_once = has_modifier(modifiers, "once");
|
|
20
|
-
const has_format_attr = el => el.hasAttribute("x-format");
|
|
21
|
-
|
|
22
|
-
process(el);
|
|
23
|
-
|
|
24
|
-
function update(callback) {
|
|
25
|
-
if (is_once) {
|
|
26
|
-
mutateDom(() => callback());
|
|
27
|
-
}
|
|
28
|
-
else {
|
|
29
|
-
effect(() => mutateDom(() => callback()));
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
function process(node) {
|
|
34
|
-
switch (node.nodeType) {
|
|
35
|
-
case Node.TEXT_NODE:
|
|
36
|
-
process_text_node(node);
|
|
37
|
-
break;
|
|
38
|
-
|
|
39
|
-
case Node.ELEMENT_NODE:
|
|
40
|
-
if (node !== el) {
|
|
41
|
-
//
|
|
42
|
-
// When we encounter an element with the "x-data" attribute, its properties
|
|
43
|
-
// are not yet initialized, and the Alpine context is unavailable.
|
|
44
|
-
// Attempting to use these properties will result in
|
|
45
|
-
// an "Alpine Expression Error: [expression] is not defined".
|
|
46
|
-
//
|
|
47
|
-
// Workaround:
|
|
48
|
-
// To avoid this, we manually add our "x-format" directive to the element.
|
|
49
|
-
// Alpine evaluates "x-format" directive once the context is initialized.
|
|
50
|
-
// In the current loop, we skip these elements to defer their processing.
|
|
51
|
-
//
|
|
52
|
-
// This also handles cases where the user manually adds the "x-format" attribute.
|
|
53
|
-
//
|
|
54
|
-
if (node.hasAttribute("x-data") && !has_format_attr(node)) {
|
|
55
|
-
node.setAttribute("x-format", "");
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
if (has_format_attr(node)) {
|
|
59
|
-
break;
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
const
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
});
|
|
16
|
+
function plugin({ directive, evaluateLater, mutateDom }) {
|
|
17
|
+
directive("format", (el, { modifiers }, { effect }) => {
|
|
18
|
+
const placeholder_regex = /{{(?<expr>.+?)}}/g;
|
|
19
|
+
const is_once = has_modifier(modifiers, "once");
|
|
20
|
+
const has_format_attr = el => el.hasAttribute("x-format");
|
|
21
|
+
|
|
22
|
+
process(el);
|
|
23
|
+
|
|
24
|
+
function update(callback) {
|
|
25
|
+
if (is_once) {
|
|
26
|
+
mutateDom(() => callback());
|
|
27
|
+
}
|
|
28
|
+
else {
|
|
29
|
+
effect(() => mutateDom(() => callback()));
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
function process(node) {
|
|
34
|
+
switch (node.nodeType) {
|
|
35
|
+
case Node.TEXT_NODE:
|
|
36
|
+
process_text_node(node);
|
|
37
|
+
break;
|
|
38
|
+
|
|
39
|
+
case Node.ELEMENT_NODE:
|
|
40
|
+
if (node !== el) {
|
|
41
|
+
//
|
|
42
|
+
// When we encounter an element with the "x-data" attribute, its properties
|
|
43
|
+
// are not yet initialized, and the Alpine context is unavailable.
|
|
44
|
+
// Attempting to use these properties will result in
|
|
45
|
+
// an "Alpine Expression Error: [expression] is not defined".
|
|
46
|
+
//
|
|
47
|
+
// Workaround:
|
|
48
|
+
// To avoid this, we manually add our "x-format" directive to the element.
|
|
49
|
+
// Alpine evaluates "x-format" directive once the context is initialized.
|
|
50
|
+
// In the current loop, we skip these elements to defer their processing.
|
|
51
|
+
//
|
|
52
|
+
// This also handles cases where the user manually adds the "x-format" attribute.
|
|
53
|
+
//
|
|
54
|
+
if (node.hasAttribute("x-data") && !has_format_attr(node)) {
|
|
55
|
+
node.setAttribute("x-format", "");
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
if (has_format_attr(node)) {
|
|
59
|
+
break;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
process_nodes(node);
|
|
64
|
+
process_attributes(node);
|
|
65
|
+
break;
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
function process_text_node(node) {
|
|
70
|
+
const tokens = node.textContent.split(placeholder_regex);
|
|
71
|
+
|
|
72
|
+
if (tokens.length > 1) {
|
|
73
|
+
const fragment = new DocumentFragment();
|
|
74
|
+
|
|
75
|
+
for (let i = 0; i < tokens.length; i++) {
|
|
76
|
+
if ((i % 2) === 0) {
|
|
77
|
+
fragment.appendChild(document.createTextNode(tokens[i]));
|
|
78
|
+
}
|
|
79
|
+
else {
|
|
80
|
+
const get_value = create_getter(evaluateLater, node.parentNode, tokens[i]);
|
|
81
|
+
const text = document.createTextNode("");
|
|
82
|
+
|
|
83
|
+
fragment.append(text);
|
|
84
|
+
update(() => text.textContent = get_value());
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
mutateDom(() =>
|
|
89
|
+
node.parentElement.replaceChild(fragment, node));
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
function process_attributes(node) {
|
|
94
|
+
for (let attr of node.attributes) {
|
|
95
|
+
const matches = [...attr.value.matchAll(placeholder_regex)];
|
|
96
|
+
if (matches.length) {
|
|
97
|
+
const template = attr.value;
|
|
98
|
+
update(() => attr.value = template.replace(placeholder_regex, (_, expr) => create_getter(evaluateLater, node, expr)()));
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
function process_nodes(node) {
|
|
104
|
+
for (let child of node.childNodes) {
|
|
105
|
+
process(child);
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
});
|
|
110
109
|
}
|
|
111
110
|
|
|
112
|
-
export { plugin as format };
|
|
111
|
+
export { plugin as default, plugin as format };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
function t(t,...e){const n=t(...e);return()=>{let t;return n(e=>t=e),e=t,"function"==typeof e?.get?t.get():t;var e}}function e({directive:e,evaluateLater:n,mutateDom:o}){e("format",(e,{modifiers:a},{effect:c})=>{const r=/{{(?<expr>.+?)}}/g,
|
|
1
|
+
function t(t,...e){const n=t(...e);return()=>{let t;return n(e=>t=e),e=t,"function"==typeof e?.get?t.get():t;var e}}function e({directive:e,evaluateLater:n,mutateDom:o}){e("format",(e,{modifiers:a},{effect:c})=>{const r=/{{(?<expr>.+?)}}/g,f=(t=>t.includes("once"))(a),i=t=>t.hasAttribute("x-format");function u(t){f?o(()=>t()):c(()=>o(()=>t()))}!function a(c){switch(c.nodeType){case Node.TEXT_NODE:!function(e){const a=e.textContent.split(r);if(a.length>1){const c=new DocumentFragment;for(let o=0;a.length>o;o++)if(o%2==0)c.appendChild(document.createTextNode(a[o]));else{const r=t(n,e.parentNode,a[o]),f=document.createTextNode("");c.append(f),u(()=>f.textContent=r())}o(()=>e.parentElement.replaceChild(c,e))}}(c);break;case Node.ELEMENT_NODE:if(c!==e&&(c.hasAttribute("x-data")&&!i(c)&&c.setAttribute("x-format",""),i(c)))break;!function(t){for(let e of t.childNodes)a(e)}(c),function(e){for(let o of e.attributes)if([...o.value.matchAll(r)].length){const a=o.value;u(()=>o.value=a.replace(r,(o,a)=>t(n,e,a)()))}}(c)}}(e)})}export{e as default,e as format};
|
package/alpinegear-format.js
CHANGED
|
@@ -1,6 +1,13 @@
|
|
|
1
1
|
(function () {
|
|
2
2
|
'use strict';
|
|
3
3
|
|
|
4
|
+
const has_modifier = (modifiers, modifier) => modifiers.includes(modifier);
|
|
5
|
+
|
|
6
|
+
const listen = (target, type, listener, options) => {
|
|
7
|
+
target.addEventListener(type, listener, options);
|
|
8
|
+
return () => target.removeEventListener(type, listener, options);
|
|
9
|
+
};
|
|
10
|
+
|
|
4
11
|
function create_getter(evaluate_later, ...args) {
|
|
5
12
|
const evaluate = evaluate_later(...args);
|
|
6
13
|
return () => {
|
|
@@ -14,104 +21,101 @@
|
|
|
14
21
|
return typeof value?.get === "function";
|
|
15
22
|
}
|
|
16
23
|
|
|
17
|
-
|
|
24
|
+
function plugin({ directive, evaluateLater, mutateDom }) {
|
|
25
|
+
directive("format", (el, { modifiers }, { effect }) => {
|
|
26
|
+
const placeholder_regex = /{{(?<expr>.+?)}}/g;
|
|
27
|
+
const is_once = has_modifier(modifiers, "once");
|
|
28
|
+
const has_format_attr = el => el.hasAttribute("x-format");
|
|
29
|
+
|
|
30
|
+
process(el);
|
|
31
|
+
|
|
32
|
+
function update(callback) {
|
|
33
|
+
if (is_once) {
|
|
34
|
+
mutateDom(() => callback());
|
|
35
|
+
}
|
|
36
|
+
else {
|
|
37
|
+
effect(() => mutateDom(() => callback()));
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
function process(node) {
|
|
42
|
+
switch (node.nodeType) {
|
|
43
|
+
case Node.TEXT_NODE:
|
|
44
|
+
process_text_node(node);
|
|
45
|
+
break;
|
|
46
|
+
|
|
47
|
+
case Node.ELEMENT_NODE:
|
|
48
|
+
if (node !== el) {
|
|
49
|
+
//
|
|
50
|
+
// When we encounter an element with the "x-data" attribute, its properties
|
|
51
|
+
// are not yet initialized, and the Alpine context is unavailable.
|
|
52
|
+
// Attempting to use these properties will result in
|
|
53
|
+
// an "Alpine Expression Error: [expression] is not defined".
|
|
54
|
+
//
|
|
55
|
+
// Workaround:
|
|
56
|
+
// To avoid this, we manually add our "x-format" directive to the element.
|
|
57
|
+
// Alpine evaluates "x-format" directive once the context is initialized.
|
|
58
|
+
// In the current loop, we skip these elements to defer their processing.
|
|
59
|
+
//
|
|
60
|
+
// This also handles cases where the user manually adds the "x-format" attribute.
|
|
61
|
+
//
|
|
62
|
+
if (node.hasAttribute("x-data") && !has_format_attr(node)) {
|
|
63
|
+
node.setAttribute("x-format", "");
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
if (has_format_attr(node)) {
|
|
67
|
+
break;
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
process_nodes(node);
|
|
72
|
+
process_attributes(node);
|
|
73
|
+
break;
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
function process_text_node(node) {
|
|
78
|
+
const tokens = node.textContent.split(placeholder_regex);
|
|
79
|
+
|
|
80
|
+
if (tokens.length > 1) {
|
|
81
|
+
const fragment = new DocumentFragment();
|
|
82
|
+
|
|
83
|
+
for (let i = 0; i < tokens.length; i++) {
|
|
84
|
+
if ((i % 2) === 0) {
|
|
85
|
+
fragment.appendChild(document.createTextNode(tokens[i]));
|
|
86
|
+
}
|
|
87
|
+
else {
|
|
88
|
+
const get_value = create_getter(evaluateLater, node.parentNode, tokens[i]);
|
|
89
|
+
const text = document.createTextNode("");
|
|
90
|
+
|
|
91
|
+
fragment.append(text);
|
|
92
|
+
update(() => text.textContent = get_value());
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
mutateDom(() =>
|
|
97
|
+
node.parentElement.replaceChild(fragment, node));
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
function process_attributes(node) {
|
|
102
|
+
for (let attr of node.attributes) {
|
|
103
|
+
const matches = [...attr.value.matchAll(placeholder_regex)];
|
|
104
|
+
if (matches.length) {
|
|
105
|
+
const template = attr.value;
|
|
106
|
+
update(() => attr.value = template.replace(placeholder_regex, (_, expr) => create_getter(evaluateLater, node, expr)()));
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
}
|
|
18
110
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
process(el);
|
|
26
|
-
|
|
27
|
-
function update(callback) {
|
|
28
|
-
if (is_once) {
|
|
29
|
-
mutateDom(() => callback());
|
|
30
|
-
}
|
|
31
|
-
else {
|
|
32
|
-
effect(() => mutateDom(() => callback()));
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
function process(node) {
|
|
37
|
-
switch (node.nodeType) {
|
|
38
|
-
case Node.TEXT_NODE:
|
|
39
|
-
process_text_node(node);
|
|
40
|
-
break;
|
|
41
|
-
|
|
42
|
-
case Node.ELEMENT_NODE:
|
|
43
|
-
if (node !== el) {
|
|
44
|
-
//
|
|
45
|
-
// When we encounter an element with the "x-data" attribute, its properties
|
|
46
|
-
// are not yet initialized, and the Alpine context is unavailable.
|
|
47
|
-
// Attempting to use these properties will result in
|
|
48
|
-
// an "Alpine Expression Error: [expression] is not defined".
|
|
49
|
-
//
|
|
50
|
-
// Workaround:
|
|
51
|
-
// To avoid this, we manually add our "x-format" directive to the element.
|
|
52
|
-
// Alpine evaluates "x-format" directive once the context is initialized.
|
|
53
|
-
// In the current loop, we skip these elements to defer their processing.
|
|
54
|
-
//
|
|
55
|
-
// This also handles cases where the user manually adds the "x-format" attribute.
|
|
56
|
-
//
|
|
57
|
-
if (node.hasAttribute("x-data") && !has_format_attr(node)) {
|
|
58
|
-
node.setAttribute("x-format", "");
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
if (has_format_attr(node)) {
|
|
62
|
-
break;
|
|
63
|
-
}
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
process_nodes(node);
|
|
68
|
-
process_attributes(node);
|
|
69
|
-
break;
|
|
70
|
-
}
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
function process_text_node(node) {
|
|
74
|
-
const tokens = node.textContent.split(placeholder_regex);
|
|
75
|
-
|
|
76
|
-
if (tokens.length > 1) {
|
|
77
|
-
const fragment = new DocumentFragment();
|
|
78
|
-
|
|
79
|
-
for (let i = 0; i < tokens.length; i++) {
|
|
80
|
-
if ((i % 2) === 0) {
|
|
81
|
-
fragment.appendChild(document.createTextNode(tokens[i]));
|
|
82
|
-
}
|
|
83
|
-
else {
|
|
84
|
-
const get_value = create_getter(evaluateLater, node.parentNode, tokens[i]);
|
|
85
|
-
const text = document.createTextNode("");
|
|
86
|
-
|
|
87
|
-
fragment.append(text);
|
|
88
|
-
update(() => text.textContent = get_value());
|
|
89
|
-
}
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
mutateDom(() =>
|
|
93
|
-
node.parentElement.replaceChild(fragment, node));
|
|
94
|
-
}
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
function process_attributes(node) {
|
|
98
|
-
for (let attr of node.attributes) {
|
|
99
|
-
const matches = [...attr.value.matchAll(placeholder_regex)];
|
|
100
|
-
if (matches.length) {
|
|
101
|
-
const template = attr.value;
|
|
102
|
-
update(() => attr.value = template.replace(placeholder_regex, (_, expr) => create_getter(evaluateLater, node, expr)()));
|
|
103
|
-
}
|
|
104
|
-
}
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
function process_nodes(node) {
|
|
108
|
-
for (let child of node.childNodes) {
|
|
109
|
-
process(child);
|
|
110
|
-
}
|
|
111
|
-
}
|
|
112
|
-
});
|
|
111
|
+
function process_nodes(node) {
|
|
112
|
+
for (let child of node.childNodes) {
|
|
113
|
+
process(child);
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
});
|
|
113
117
|
}
|
|
114
118
|
|
|
115
|
-
document
|
|
119
|
+
listen(document, "alpine:init", () => Alpine.plugin(plugin));
|
|
116
120
|
|
|
117
121
|
})();
|
package/alpinegear-format.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
!function(){"use strict";function e(e,...t){const n=e(...t);return()=>{let e;return n(t=>e=t),t=e,"function"==typeof t?.get?e.get():e;var t}}function t({directive:t,evaluateLater:n,mutateDom:o}){t("format",(t,{modifiers:i},{effect:c})=>{const a=/{{(?<expr>.+?)}}/g,r=(e=>e.includes("once"))(i),u=e=>e.hasAttribute("x-format");function f(e){r?o(()=>e()):c(()=>o(()=>e()))}!function i(c){switch(c.nodeType){case Node.TEXT_NODE:!function(t){const i=t.textContent.split(a);if(i.length>1){const c=new DocumentFragment;for(let o=0;i.length>o;o++)if(o%2==0)c.appendChild(document.createTextNode(i[o]));else{const a=e(n,t.parentNode,i[o]),r=document.createTextNode("");c.append(r),f(()=>r.textContent=a())}o(()=>t.parentElement.replaceChild(c,t))}}(c);break;case Node.ELEMENT_NODE:if(c!==t&&(c.hasAttribute("x-data")&&!u(c)&&c.setAttribute("x-format",""),u(c)))break;!function(e){for(let t of e.childNodes)i(t)}(c),function(t){for(let o of t.attributes)if([...o.value.matchAll(a)].length){const i=o.value;f(()=>o.value=i.replace(a,(o,i)=>e(n,t,i)()))}}(c)}}(t)})}document.addEventListener("alpine:init",()=>
|
|
1
|
+
!function(){"use strict";function e(e,...t){const n=e(...t);return()=>{let e;return n(t=>e=t),t=e,"function"==typeof t?.get?e.get():e;var t}}function t({directive:t,evaluateLater:n,mutateDom:o}){t("format",(t,{modifiers:i},{effect:c})=>{const a=/{{(?<expr>.+?)}}/g,r=(e=>e.includes("once"))(i),u=e=>e.hasAttribute("x-format");function f(e){r?o(()=>e()):c(()=>o(()=>e()))}!function i(c){switch(c.nodeType){case Node.TEXT_NODE:!function(t){const i=t.textContent.split(a);if(i.length>1){const c=new DocumentFragment;for(let o=0;i.length>o;o++)if(o%2==0)c.appendChild(document.createTextNode(i[o]));else{const a=e(n,t.parentNode,i[o]),r=document.createTextNode("");c.append(r),f(()=>r.textContent=a())}o(()=>t.parentElement.replaceChild(c,t))}}(c);break;case Node.ELEMENT_NODE:if(c!==t&&(c.hasAttribute("x-data")&&!u(c)&&c.setAttribute("x-format",""),u(c)))break;!function(e){for(let t of e.childNodes)i(t)}(c),function(t){for(let o of t.attributes)if([...o.value.matchAll(a)].length){const i=o.value;f(()=>o.value=i.replace(a,(o,i)=>e(n,t,i)()))}}(c)}}(t)})}document.addEventListener("alpine:init",()=>Alpine.plugin(t),void 0)}();
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ramstack/alpinegear-format",
|
|
3
|
-
"version": "1.4.
|
|
3
|
+
"version": "1.4.4",
|
|
4
4
|
"description": "@ramstack/alpinegear-format provides 'x-format' Alpine.js directive, which allows you to easily interpolate text using a template syntax similar to what's available in Vue.js.",
|
|
5
5
|
"author": "Rameel Burhan",
|
|
6
6
|
"license": "MIT",
|
|
@@ -17,6 +17,12 @@
|
|
|
17
17
|
"alpinejs-directive",
|
|
18
18
|
"alpinejs-plugin"
|
|
19
19
|
],
|
|
20
|
-
"
|
|
21
|
-
|
|
20
|
+
"exports": {
|
|
21
|
+
".": {
|
|
22
|
+
"import": {
|
|
23
|
+
"production": "./alpinegear-format.esm.min.js",
|
|
24
|
+
"default": "./alpinegear-format.esm.js"
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
}
|
|
22
28
|
}
|