Emits options not declared; causing errors

[Raymondo97]

Is there an existing issue for this?

• [X] I have searched the existing issues

Have you updated Vue FilePond, FilePond, and all plugins?

• [X] I have updated FilePond and its plugins

Describe the bug

We have been having issues with vue-filepond in our application. We noticed that in your component, emits are not being defined.

https://v3-migration.vuejs.org/breaking-changes/emits-option.html "It is highly recommended that you document all the events emitted by each of your components using emits."

If you need more information, let me know. I'd be happy to try providing a reproduction and environment details if it's needed.

Reproduction

No reproduction necessary, at this time.

Environment

- Device:
- OS:
- Broser:
- Vue version:

[Raymondo97]

In looking through your code, I did notice this:

// Map FilePond callback methods to Vue $emitters
      const options = events.reduce((obj, value) => {
        obj[value] = (...args) => {
          this.$emit("input", this._pond ? this._pond.getFiles() : []);
          this.$emit(value.substr(2), ...args);
        };
        return obj;
      }, {});

https://github.com/pqina/vue-filepond/blob/7f5842c4b75777dbcfeb7ae0b4565b2f6a18d06a/lib/index.js#L131

Is this doing the same thing as declaring emits?

EDIT:

I see now that this code is only calling the emits. So I don't think the emit options are correctly being applied to the component's instance.

Also .substr is being deprecated. Instead, you can use .substring. It does the same thing. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/substr

[rikschennink]

@Raymondo97

Is this doing the same thing as declaring emits?

I think not.

I see now that this code is only calling the emits. So I don't think the emit options are correctly being applied to the component's instance.

This used to work, but now this will probably require copying all the events manually instead of adding them dynamically.

Also .substr is being deprecated. Instead, you can use .substring. It does the same thing.

I know, I'll get around to it eventually.

[Raymondo97]

This used to work, but now this will probably require copying all the events manually instead of adding them dynamically.

I would hope that you could add them dynamically. According to Vue docs, it looks like it just needs an array of strings, or an object of where the value of the emit is validation. So I would think you could use the same reduce function to return an array of strings, and add that to the emits declaration.

https://vuejs.org/api/options-state.html#emits

In the application my company is working on, we've noticed that components will occasionally work without emits being declared. But sometimes it creates problems, or doesn't work consistently. So that may be why it was working.

With how we've implemented vue-filepond in our application, the component still works. But we are using defineAsyncComponent to import it, along with a v-once directive, in order to prevent errors.