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

Allow additional identifiers to be passed in to the babel plugin #966

Merged

Conversation

edkimmel
Copy link
Contributor

Summary

I would like to wrap loadable in my own higher order component functions. Loadable by default only injects a webpack chunk name for loadable and lazy, but can readily accept additional identifiers.

This PR allows us to rewrite

// Loadable
const LoadableHelpPage = loadable(() => import('./HelpPage'), {
  resolveComponent: components => components.HelpPage,
})
// Our custom HOC
const HelpPage = PageHOC(LoadableHelpPage, {...additional page props })

to

const HelpPage = LoadablePageHOC(() => import('./HelpPage'), 'HelpPage', { ...additional page props })

We actually have a separate HOC for modals, so we would not be able to simply rename LoadablePageHOC to loadable for the sake of the existing babel plugin. With the changes, we can specify additionalIdentifiers: [ 'LoadablePageHOC', 'LoadableModalHOC'] to transform both.

Test plan

New tests have been added that showcase the custom identifier being transformed or not, depending on babel options.

@theKashey theKashey self-requested a review July 2, 2023 06:51
@theKashey
Copy link
Collaborator

Got your idea, the request seems quite familiar 👍 and look like the currently proposed way to implement own loadable - loadable-detection - is not working. At least looking at the code.

In short - a right move, but let's take one more step and perfect this solution so it would not backfire in a couple of years as I don't feel that replacing random functions is a very safe pattern.
What about changing the configuration a little bit to replicate the current logic of "autodetecting" loadable imports, but for a custom function?

Ie
additionalIdentifiers: [ 'LoadablePageHOC', 'LoadableModalHOC']
⬇️

signatures: [ 
  {name:'LoadablePageHOC', from:'@myapp/loadable'},
  {name:'LoadableModalHOC', from:'@myapp/loadable'},
  {name:'default', from:'@loadable/components'}, // still support default way
]

One can also refactor the current logic "looking" for default import of loadable and named import of lazy to utilize the same configuration, with your ability to totally override default configuration

@edkimmel
Copy link
Contributor Author

edkimmel commented Jul 3, 2023

@theKashey Thank you for the review.

Your suggestions are great, I should hopefully have some time this week to make the changes.

@theKashey
Copy link
Collaborator

Amazing result 👍
Let's get it merged and I will update the documentation shortly after.

@theKashey
Copy link
Collaborator

Released as 5.16.0

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

Successfully merging this pull request may close these issues.

None yet

2 participants