-
|
Hi, I've been working on a directive lately and ran in to a problem in evaluating promises. It seems that the eg. <!DOCTYPE html>
<html lang="en">
<body x-data>
<div x-promise></div>
<script>
let Prom = (Alpine) => {
Alpine.directive('promise', (el, {}, {evaluate}) => {
let undefined_promise = evaluate("new Promise(()=>{console.log('running')})")
console.log( "undefined_promise",undefined_promise)
// running
// undefined_promise undefined
let wrapped_promise = evaluate("[new Promise(()=>{console.log('running')})]")
console.log( "wrapped_promise", wrapped_promise)
// running
// wrapped_promise [Promise]
let undefined_function_promise = evaluate(() => new Promise(()=>{console.log('running')}) )
console.log( "undefined_function_promise", undefined_function_promise)
// running
// undefined_function_promise undefined
let wrapped_function_promise = evaluate(() => [new Promise(()=>{console.log('running')})])
console.log( "wrapped_function_promise", wrapped_function_promise)
// running
// wrapped_function_promise [Promise]
})
}
document.addEventListener('alpine:init', () => {
Prom(Alpine)
})
</script>
<script src="https://unpkg.com/alpinejs" defer></script>
</body>
</html>Not sure if it is expected behavior or not. But it would be nice not having to resort to eval. I assume it might have something to do with https://github.com/alpinejs/alpine/blob/main/packages/alpinejs/src/evaluator.js#L137 |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 6 replies
-
|
This issue has been converted to a discussion as we are now using discussions to track bugs and ideas. |
Beta Was this translation helpful? Give feedback.
-
|
Sorry, i din't realize |
Beta Was this translation helpful? Give feedback.
-
|
It's expected. Alpine tries to magically resolve functions and promises to remove complexity from the page. It was a design choice of the author which unfortunately won't fit your use case. <div x-data x-promise></div>
<script>
let Prom = (Alpine) => {
Alpine.directive('promise', (el, {}, {evaluate}) => {
let foo = Alpine.dontAutoEvaluateFunctions(() => evaluate("() => new Promise(()=>{console.log('running')})"))()
console.log(foo)
})
}
document.addEventListener('alpine:init', () => {
Prom(Alpine)
})
</script>
<script src="https://unpkg.com/alpinejs" defer></script>In theory, Alpine could have a Alpine.dontAutoResolvePromises kind of thing but it would probably take a while before the PR makes it into the core. |
Beta Was this translation helpful? Give feedback.
-
|
Hi, thanks. While its being evaluated, the result from a promise does not seem to make it back from the evaluation function boundary. as other values do Alpine.directive('promise', async (el, {}, {evaluate}) => {
let eval_promise_0 = evaluate(`new Promise((resolve, _) => {
console.log('resolving0')
resolve('resolved')
})`)
console.log("eval_promise_0", eval_promise_0)
// resolving0
// eval_promise_0 undefined
let eval_promise_1 = evaluate(`await new Promise((resolve, _) => {
console.log('resolving1')
resolve('resolved')
})`)
console.log("eval_promise_1", eval_promise_1)
// resolving1
// eval_promise_1 undefined
let eval_promise_2 = await evaluate(`await new Promise((resolve, _) => {
console.log('resolving2')
resolve('resolved')
})`)
console.log("eval_promise_2", eval_promise_2)
// resolving2
// eval_promise_2 undefined
}) Not sure if it is a skill issue on my part in regards to promises, something alpinejs is expected to censor or not. |
Beta Was this translation helpful? Give feedback.
-
|
This is a bit tricky...evaluate is basically just not capable of being async... It's a bit...complicated... It has to do some wacky stuff to make the expressions actually work, and it mostly prevents this kind of thing from working. If you do the evaluateLater with a callback, the result of the promise should be passed to the callback. |
Beta Was this translation helpful? Give feedback.
-
|
@crholm Have you tried the example I posted? Isn't it what you were asking for? |
Beta Was this translation helpful? Give feedback.
-
|
Hi, sorry, not yet. The thing is that i evaluate something that might be a promise, a function call or just a value. Its a chain of promises, in the end. So i opted for the following, even if it would have been nice to avoid wrapping it const confirmRequest = (el, evaluate) => {
return new Promise((resolve, _) => {
let expression = el.request.on["confirm-request"]
let val = expression ? evaluate(`() => () => ${expression}`) : () => true
Promise.resolve(val()).then(resolve)
})
}which seems to work. To summarize, it is expected behavior. |
Beta Was this translation helpful? Give feedback.
-
|
Maybe not useful yet, but there is https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/try |
Beta Was this translation helpful? Give feedback.
It's expected. Alpine tries to magically resolve functions and promises to remove complexity from the page. It was a design choice of the author which unfortunately won't fit your use case.
You can work around it with by wrapping the promise in a function and asking Alpine not to auto evaluate it.