Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cluttered imported React hook names #564

Closed
ArtemyB opened this issue Mar 3, 2023 · 1 comment
Closed

Cluttered imported React hook names #564

ArtemyB opened this issue Mar 3, 2023 · 1 comment

Comments

@ArtemyB
Copy link
Contributor

ArtemyB commented Mar 3, 2023

Here are the examples of React hook calls currently (Feliz v2.4.1, but I remember the case take place all my Feliz usage): useReact_useCallback_1CA17B65, useReact_useMemo_10C6A43C and so on. Firstly, That doesn't look pretty. And in practice it affects React Dev Tools user experience. Secondly, there is actual JS-code being produced in Feliz bundle, e.g. from fable_modules/Feliz.2.4.1/React.fs.js:

export function useReact_useMemo_10C6A43C(createFunction, dependencies) {
    const arg_1 = defaultArg(dependencies, []);
    return Interop_reactApi.useMemo(createFunction, arg_1);
}
// and so on for the rest of the bindings

As I understand, this would not have happened if the containing React type had Erase attribute (to be erased by Fable). However it will work only when all of the type members are inline. And now I see that alongside the inline "pure" imports React type contains:

  • non-inline members that in fact could be made inline because of being "pure" imports);
  • non-inline members and even custom hooks with the actual logic (createDisposable, useEffectOnce, useCallbackRef, useCancellationToken) that couldn't be simply marked inline while being defined directly in the React type as they're now. However I see the solution in moving all these custom hooks to a separate module/non-erased type and then calling them from the inline members of React type -- so that there should be no critical changes from the F# API perspective.
    P.S. Also Hook attribute should be removed from all these hook-members when the React type is erased.

The solution doesn't seems to require a lot of work, if it is actually correct -- haven't tried anything yet, just made assumptions based on my previous experience. Decided to ask for other opinions and expertise here before doing something 🙂

@Zaid-Ajaj
Copy link
Owner

Hi @ArtemyB I understand the generated JS is not ideal by Feliz, however sometimes it is not possible to inline members. I don't remember the exact reasons why some hooks aren't being inlined. That said, a PR would be really appreciated that includes these improvements 🙏

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants