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

Dynamic imports with named exports #3590

Closed

Conversation

PrudviGali
Copy link
Contributor

@PrudviGali PrudviGali commented Jan 18, 2018

This pull request is a feature allowing dynamic imports to import specific components not just default ones from the module.

The current code only allows default exports to be imported to the outer world.

Usage should look like:
dynamic(import('./moduleName'), { component: 'ComponentName', });

By this, it will import only 'ComponentName' from the module. It will be useful for structures which are having multiple exports from a single file.

@PrudviGali PrudviGali changed the title Dynamic imports with named components Dynamic imports with named exports Jan 19, 2018
Copy link
Contributor

@khrome83 khrome83 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good. Just allows ability to have a higher level of specificity.

Can we add to readme this additional functionality?

Copy link
Contributor

@arunoda arunoda left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This PR looks great.
Try to do these:

  • have a look at the suggestions I made
  • document this feature in the README
  • add a test case for this case

@@ -31,7 +31,7 @@ export default function dynamicComponent (p, o) {

this.LoadingComponent = options.loading ? options.loading : () => (<p>loading...</p>)
this.ssr = options.ssr === false ? options.ssr : true

this.compName = options.component ? options.component : undefined
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't need this expression. Use options.componentName instead. It's clear and does the job.

@@ -55,7 +55,7 @@ export default function dynamicComponent (p, o) {

loadComponent () {
promise.then((m) => {
const AsyncComponent = m.default || m
const AsyncComponent = this.compName ? m[this.compName] : m.default
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add the m.default || m part as well.

@jstcki
Copy link
Contributor

jstcki commented Apr 12, 2018

Extracting exports based on string keys is non-standard and impossible to type with TS/Flow (which hints at a bad pattern IMHO).

Making standard import('./whatever').then(m => m.MyComponent) syntax should be the way to achieve this.

Related #2940

@timneutkens
Copy link
Member

@herrstucki is actually right, it should be like dynamic(import('./whatever').then(m => m.MyComponent))

@lock lock bot locked as resolved and limited conversation to collaborators Apr 12, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants