Vue: Pass vite aliases imports to vue-docgen-api

[bdriguesdev]

Closes #21691

What I did

When we use an import alias to a component that vue-docgen-api will need to parse to be able to generate the metadata it will not understand how to deal with this import
The import aliases config is declared at the vite, so we need to pass it to vue-docgen-api too, but if we pass it directly we will have a problem
In vite we can define an absolute path that the reference is actually where the vite server is running, example:

{
    "@": "/src"
}

If the project is running at the path /home/projects/vue-storybook vite will consider the absolute path /src relate to the server, but vue-docgen-api needs the system absolute path to find the file, in this case the actually path is: /home/projects/vue-storybook/src. So, before passing the aliases to vue-docgen-api we need to deal with this kind of absolute paths, we need transform it to actually system paths.

How to test

It's possible to reproduce the error here:

• Vue 2 StackBlitz
• Vue 3 StackBlitz

Or if you want to use the repo:

1. Run a sandbox for template, e.g. yarn task --task dev --template vue3-vite-default-js
2. Add in vite.config the alias: "@": '/src'
3. Create a mixin inside src/mixins
4. Import this mixin using the alias in a component that has a story and use this mixin in the component
5. Open Storybook in your browser
6. Access the story of the component and you will see warning at the terminal

Checklist

• Make sure your changes are tested (stories and/or unit, integration, or end-to-end tests)
• Make sure to add/update documentation regarding your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Maintainers

• If this PR should be tested against many or all sandboxes,
  make sure to add the ci:merged or ci:daily GH label to it.
• Make sure this PR contains one of the labels below.

["cleanup", "BREAKING CHANGE", "feature request", "bug", "documentation", "maintenance", "dependencies", "other"]

[chakAs3]

i will review this for now, However i'm finishing a PR that implements volar ( vue-meta-component ) instead of vue-docgen-api, i guess we won't have this issue let see .

[ndelangen]

Related: #22010

[JReinhold]

@kasperpeulen is this PR no longer needed because of Volar?

[kasperpeulen]

@chakAs3 @larsrickert Can you check if this is still necessary?

[larsrickert]

@chakAs3 @larsrickert Can you check if this is still necessary?

No I'd say this is not needed. As far as I know both vue-docgen-api and vue-component-meta are TypeScript based parsers so the issue here is not the vite.config.ts.

For the reproduction code, you need to create a .tsconfig.json where you define the alias so it works correctly:

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "include": ["src/**/*"],
  "compilerOptions": {
    "rootDir": "./src",
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

For vue-component-meta there is currently a know limitation for aliases: https://storybook.js.org/docs/8.0/get-started/vue3-vite#limitations

[kasperpeulen]

@larsrickert I see, closing this PR then.