feat(warn): warn defineAsyncComponent usage in routes

[leemove]

Close #627

[posva]

Is this necessary? What does it change?

[leemove]

@posva
Async component can be used inside dynamic imports route components.
This will mark the async component is used inside dynamic imports route component or not.
I don't know is it the right way, or do like

    if (__DEV__ && '__asyncLoader' in resolvedComponent) {
      resolvedComponent.__lazyResolved = true;
    }

[posva]

Is this accounting for () => defineAsyncComponent(...)? If it is, it should warn instead and it should also have a test

[leemove]

It is also accounting for any function return Promise<AsyncComponent>

Is this necessary?

and if component not return Promise. it will warn like this first at line 247.

Component "default" in record with path "/foo" is a function that does not return a Promise. If you were passing a functional component, make sure to add a "displayName" to the component. This will break in production if not fixed.

@posva

[posva]

I just kept the same unresolved points!

[leemove]

I just kept the same unresolved points!

Thank you for reviewing !

Those unresolved potints are all about the lazy load async component.
It's hard to distinguish between async component and dynamic imports async component after cached.
Because the the following code cache async component.

  componentPromise.then(resolved => {
      const resolvedComponent = isESModule(resolved)
        ? resolved.default
        : resolved
      // replace the function with the resolved component
      record.components[name] = resolvedComponent
  }

compont will be async componet instead of Promise<async component> when navigate to this route next time .

So I marked the resolved async componet.

  if (__DEV__ && '__asyncLoader' in resolvedComponent) {
      resolvedComponent.__resolvedAsyncComponent = true
  }

and check the mark when async componet.

 else if (
      (rawComponent as any).__asyncLoader &&
      !(rawComponent as any).__resolvedAsyncComponent // check  dynamic imports
    ) {
     // make it component promise ,  it will marked by code above, and warn only once when navigated first time.
      let asyncComponent = rawComponent
      rawComponent = () => Promise.resolve(asyncComponent)
      warn(.... )
    }
}

the next time navigate to this component, we can know it is dynamic imports or not.

Sorry about my poor English. hope you understand what I said.🙏

[leemove]

@posva
Async component can be used inside dynamic imports route components.
This will mark the async component is used inside dynamic imports route component or not.
I don't know is it the right way, or do like

    if (__DEV__ && '__asyncLoader' in resolvedComponent) {
      resolvedComponent.__lazyResolved = true;
    }

[posva]

Thanks! I think I understand what you said. I realized I wrote one of my comments at the wrong line. Let me know if the review isn't clear

[posva]

Is this accounting for () => defineAsyncComponent(...)? If it is, it should warn instead and it should also have a test

[leemove]

I remove the accounting for () => defineAsyncComponent(...) .

because it will warn function that does not return a Promise

and remove all warn for function return Promise,like () => Promise<definAsyncComponent(...)>

it will warn when navigate to this component next time .Beacuse next time,the component here is just AsyncComponent not Promise<AsyncComponent>

[posva]

Thank you! I couldn't push some final changes (you should check the allow edits by maintainers) so I will do that locally

[leemove]

Thank you for your patient review! I'm really excited about this PR was merged!