convert to functional component

[econic]

As this is a component that's probably being used hundreds of times throughout apps, it would be wise to design it as a functional vue component for the sake of performance.

I would be eager to help, as long as you are willing to merge the changes.

Regards, econic

[shrpne]

Hi, thank you for idea, I will be glad to merge changes that improve performance, but I don't understand how you plan to convert it to stateless component and still preserve current functionality

[econic]

Cool, i thought about it and had the following idea:

Functional components have two restrictions that apply here:

1. They cannot contain internal state
2. They cannot render async

A solution to this might be an outer functional component A that checks the cache (which does not have to be internal, maybe some localstorage or otherwise externally persisted object) and then...

...if cached: render the svg inside that functional component ...if not cached: render an inner stateful component B that fetches, caches and renders the svg like currently

Like this we would render the stateful component B only once for each icon. We could define the cache object as a prop to the functional component A with getItem and setItem so you could just pass window.sessionStorage or window.localStorage and it survives as long as desired - and default back to a plain object so we have the same behaviour as today.

As rendering inner components, throwing events etc is possible with functional components, we should be able to preserve current functionality completely 👍

What do you think?

[shrpne]

Well, vue-inline-svg was intended to be fast, simple and small. Looks like this approach will introduce a little bit more complexity than I expect. For now, I'm not sure, that performance gains introduced by this change will worth added complexity and code size grow.

Any benchmarks comparing old and new approach would help to decide.

If you plan to implement it anyway and use by yourself, then I will be glad to review the PR and see if it can be merged. Otherwise, maybe you should not spend your time, because I can't give a guarantee that it will be merged.

[econic]

Okay, I'll probably do it anyway as i need to at least save the icons in localstorage. Then we'll see if i can keep the complexity at a level low enough for your package.

[shrpne]

Closing, because functional components are not a thing in vue3 https://v3-migration.vuejs.org/breaking-changes/functional-components.html