-
|
Hi, I wanted to implement sanitized version of x-html so i redefined it by copying default x-html code and adding sanitizer. Using x-html work but using my new directive results in weird error: <head>
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
<script>
document.addEventListener("alpine:init", () => {
Alpine.directive('safehtml', (el, { expression }, { effect, evaluateLater }) => {
const evaluate = Alpine.evaluateLater(expression)
effect(() => {
evaluate(value => {
Alpine.mutateDom(() => {
el.innerHTML = value
el._x_ignoreSelf = true
Alpine.initTree(el)
delete el._x_ignoreSelf
})
})
})
})
});
</script>
</head>
<body x-data>
<h5>Using defautl x-html: <span x-html="'<b>bold</b>'"></span></h5>
<h5>Using safe-html: <span x-safehtml="'<b>bold</b>'"></span></h5>
</body>The error is attached, i spent some time debugging and even putting console.log in from of that line, it is not empty, i suspect the Proxy is involved but why then default directive works, the code is the same. |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
|
It's |
Beta Was this translation helpful? Give feedback.
-
|
How i could miss it! Late might debugging probably, Thank you |
Beta Was this translation helpful? Give feedback.
It's
const evaluate = evaluateLater(expression)instead ofconst evaluate = Alpine.evaluateLater(expression).You want to use the helper passed into the directive callback which is already bound to the component/element otherwise the signature of Alpine.evaluateLater would require the first parameter to be the DOM element.