how to wait for an event in a sub component in a chain of promises? - promise

Question

I have a <slide-show> component that displays a list of images with timing, transitions etc. and emits a "finished" event when it's done.
Now I want to embed this component in another one that recurses in a tree of directories, sending a new list of images after each "finished" events. The code currently looks like this :
import { Component, Host, h, Prop, State, Event, EventEmitter } from '#stencil/core'
import * as path from 'path'
import isImage from 'is-image'
function waitForEvent(eventEmitter:EventEmitter<any>, eventType:string) {
return new Promise(function (resolve) {
eventEmitter.on(eventType, resolve)
})
}
#Component({
tag: 'slide-script',
styleUrl: 'slide-script.css',
shadow: true,
})
export class SlideScript {
#Prop() src: string
#State() images: Array<string>
#Event() next: EventEmitter<boolean>
componentWillLoad() {
this.process(this.src)
}
async process(dir: string) {
console.log(dir)
return fetch(path.join('dir', dir))
.then(response =>
response.json()
.then(data => {
this.images = data.files.filter(isImage)
this.images = this.images.map(im => path.join('img', dir, im))
// the above will start/update the slideshow
waitForEvent(this.next, "onFinished")
.then(() => {
data.subdirs.reduce(
async (prev: Promise<void>, sub: string) => {
await prev
return this.process(path.join(dir, sub))
},
Promise.resolve() // reduce initial value
)
})
})
)
}
handleFinished(e) {
console.log('finished')
this.next.emit(e)
}
render() {
return (
<Host>
<slide-show images={this.images} onFinished={(e) => this.handleFinished(e)} />
</Host>
);
}
}
the waitForEvent function does not work as stencil's EventEmitter is not a Node EventEmitter and has no .onmethod ...
How should I modify it ? or how to do it otherwise ? Thanks !

Answer 1

Ok, after roaming a bit on the Slack channel for StencilJS, I figured out I needed a deferas described in https://lea.verou.me/2016/12/resolve-promises-externally-with-this-one-weird-trick/
and the resulting code that successfully recurses in all directories is
import { Component, Host, h, Prop, State, Event, EventEmitter } from '#stencil/core'
import * as path from 'path'
import isImage from 'is-image'
function defer() {
var deferred = {
promise: null,
resolve: null,
reject: null
};
deferred.promise = new Promise((resolve, reject) => {
deferred.resolve = resolve;
deferred.reject = reject;
});
return deferred;
}
#Component({
tag: 'slide-script',
styleUrl: 'slide-script.css',
shadow: true,
})
export class SlideScript {
#Prop() src: string
#State() images: Array<string>
#Event() next: EventEmitter<boolean>
componentWillLoad() {
this.process(this.src)
}
private defer: any
handleFinished(event) {
console.log('finished', event)
this.defer.resolve(true)
}
async process(dir: string) {
console.log(dir)
return fetch(path.join('dir', dir))
.then(response =>
response.json()
.then(data => {
this.images = data.files.filter(isImage)
this.images = this.images.map(im => path.join('img', dir, im))
this.defer = defer()
return this.defer.promise.then(() =>
data.subdirs.reduce((prev: Promise<void>, sub: string) =>
prev.then(() =>
this.process(path.join(dir, sub)) // recurse
),
Promise.resolve() // reduce initial value
)
)
})
)
}
render() {
return (
<Host>
<slide-show images={this.images} onFinished={this.handleFinished.bind(this)} />
</Host>
);
}
}