-
|
I can't get custom Alpine directive to work. I'm using rollup, and my issue is probably related to:
But I have no idea how to go about it.
import nodeResolve from "@rollup/plugin-node-resolve";
import terser from "@rollup/plugin-terser";
export default {
input: "static/main.js",
output: {
file: "static/bundle.min.js",
format: "es",
plugins: [terser()],
},
plugins: [nodeResolve()],
onwarn: (entry, next) => {
if (
entry.loc?.file &&
/htmx\.esm\.js$/.test(entry.loc.file) &&
/Use of eval in/.test(entry.message)
)
return;
return next(entry);
},
};
import Alpine from "alpinejs";
import htmx from "htmx.org";
Alpine.directive("uppercase", (el) => {
el.textContent.toUpperCase();
});
window.Alpine = Alpine;
window.Alpine.start();
htmx.onLoad(() => {
console.log("htmx loaded");
});
<html>
<meta>
<script defer src="{% static 'bundle.min.js' %}"></script>
</meta>
<body>
<div x-data>
<span x-uppercase>Hello World!</span>
</div>
</body>
</html>If I use the |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 5 replies
-
|
the above code works fine. What makes you think it's not working? |
Beta Was this translation helpful? Give feedback.
-
|
The |
Beta Was this translation helpful? Give feedback.
-
|
That's because your code never sets it to be uppercase. If you did el.textContent = el.textContent.toUpperCase()You'd get the result you want. (this should be done in CSS, but I assume this is just a simplistic recreation) |
Beta Was this translation helpful? Give feedback.
-
|
It's simplistic because I'm setting up a project and just following the guide. I didn't get your suggestion sorry, I believe that's what I'm doing already? |
Beta Was this translation helpful? Give feedback.
-
|
Your code is Alpine.directive("uppercase", (el) => {
el.textContent.toUpperCase();
});But the correct code is Alpine.directive("uppercase", (el) => {
el.textContent = el.textContent.toUpperCase();
}); |
Beta Was this translation helpful? Give feedback.
-
|
This is embarrassing, I can't tell you how much time I spent tinkering with my setup. I didn't realise I had the wrong code.. |
Beta Was this translation helpful? Give feedback.
Your code is
But the correct code is