Description
Prerequisites
- I have read the Contributing Guidelines.
- I agree to follow the Code of Conduct.
- I have searched for existing issues that already report this problem, without success.
Ionic Framework Version
- v4.x
- v5.x
- v6.x
Current Behavior
Most Ionic components such as <IonCardHeader> aren't found when using code completion nor are they auto-imported when using WebStorm 2021.3. Even if I manually import, the properties on it aren't found (for example 'color'). Interestingly enough <IonCard> is found and the properties are able to be code completed. However, even that component won't auto import. I still have to do that manually.
It seems the signature in proxies.d.ts aren't what WebStorm is expecting. It does fallback to web-types.json. But that file only has IonCard in it, not IonCardHeader. So that list looks incomplete. I think because build-web-types.js ignores stuff from core/dist/docs.json that don't have a 'usage.vue' defined. So web-types.json is pretty incomplete.
If I use ionic-react, then code completion AND auto-import BOTH work as they should. It seems ionic-vue is broken (or WebStorm's interpretation of what is a component type is broken).
Expected Behavior
I would expect when I type '<IonCardHe' that I can auto complete and select '<IonCardHeader>'. That should auto import the component (and add it to the components section of the Vue options). I should then be able to type 'color' as a property and have it be found. Currently none of this works.
Steps to Reproduce
Create a ionic-vue project (ionic start --type=vue)
Edit Home.vue and type '<IonCardHe' somewhere in the <template>.
Notice it is not auto-completing to <IonCardHeader>.
Go ahead and add an import and components entry for IonCardHeader. Now notice that the properties aren't shown when trying to type <IonCardHeader color>.
Code Reproduction URL
No response
Ionic Info
[WARN] Error loading @capacitor/ios package.json: Error: Cannot find module '@capacitor/ios/package'
Require stack:
- /Users/daviesd/.nvm/versions/node/v14.17.6b/lib/node_modules/@ionic/cli/lib/project/index.js
- /Users/daviesd/.nvm/versions/node/v14.17.6b/lib/node_modules/@ionic/cli/lib/index.js
- /Users/daviesd/.nvm/versions/node/v14.17.6b/lib/node_modules/@ionic/cli/index.js
- /Users/daviesd/.nvm/versions/node/v14.17.6b/lib/node_modules/@ionic/cli/bin/ionic
[WARN] Error loading @capacitor/android package.json: Error: Cannot find module '@capacitor/android/package'
Require stack:
- /Users/daviesd/.nvm/versions/node/v14.17.6b/lib/node_modules/@ionic/cli/lib/project/index.js
- /Users/daviesd/.nvm/versions/node/v14.17.6b/lib/node_modules/@ionic/cli/lib/index.js
- /Users/daviesd/.nvm/versions/node/v14.17.6b/lib/node_modules/@ionic/cli/index.js
- /Users/daviesd/.nvm/versions/node/v14.17.6b/lib/node_modules/@ionic/cli/bin/ionic
Ionic:
Ionic CLI : 6.18.1 (/Users/daviesd/.nvm/versions/node/v14.17.6b/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/vue 5.9.1
Capacitor:
Capacitor CLI : 3.3.2
@capacitor/android : not installed
@capacitor/core : 3.3.2
@capacitor/ios : not installed
Utility:
cordova-res : not installed globally
native-run : 1.5.0
System:
NodeJS : v14.17.6 (/Users/daviesd/.nvm/versions/node/v14.17.6b/bin/node)
npm : 7.22.0
OS : macOS Big Sur
Additional Information
No response