histoire-dev / histoire

⚡ Fast and beautiful interactive component playgrounds, powered by Vite
https://histoire.dev
MIT License
3.15k stars 184 forks source link

No intellisense available for Histoire components #146

Closed tbusser closed 2 years ago

tbusser commented 2 years ago

Describe the bug

When I open the Vue3 example project in my VSCode I get suggestions for the Histoire components and their props. This is super useful as I don't have visit any documentation website. When I use Histoire in my own project I don't get these suggestions. When I move the Vue3 example folder out of the Histoire root folder I also don't get any intellisense on the Histoire components.

VSCode intellisense doesn't suggest any Histoire components in my project and has no type information for the Story component.

image

It also doesn't suggest any of the props:

image

Hovering over the Story component in the Vue3 example gives me the following info:

image

It also gives suggestions for the props:

image

Is there supposed to be intellisense available for the Histoire components? Is there some configuration step I have missed?

Reproduction

I've created a new Vue3 project using npm init vue@next, afterwards I've added Histoire to the project using the steps described in the documentation.

I've create a repository with the project and an example story for the HelloWorld.vue component. The repository can be found here.

System Info

System:
  OS: macOS 12.3.1
  CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Memory: 7.77 GB / 32.00 GB
  Shell: 5.8 - /bin/zsh
Binaries:
  Node: 16.15.1 - ~/.nvm/versions/node/v16.15.1/bin/node
  Yarn: 1.22.10 - ~/.nvm/versions/node/v12.18.3/bin/yarn
  npm: 8.11.0 - ~/.nvm/versions/node/v16.15.1/bin/npm
Browsers:
  Chrome: 102.0.5005.115
  Edge: 102.0.1245.41
  Firefox: 99.0.1
  Safari: 15.4
  Safari Technology Preview: 15.4
npmPackages:
  @vitejs/plugin-vue: ^2.3.3 => 2.3.3 
  histoire: ^0.7.7 => 0.7.7 
  vite: ^2.9.12 => 2.9.12 
vsCodeExtensions:
  AndersEAndersen.html-class-suggestions
  be5invis.vscode-custom-css
  ChakrounAnas.turbo-console-log
  christian-kohler.path-intellisense
  cschlosser.doxdocgen
  dawhite.mustache
  dbaeumer.vscode-eslint
  dzannotti.vscode-babel-coloring
  Equinusocio.vsc-community-material-theme
  Equinusocio.vsc-material-theme
  equinusocio.vsc-material-theme-icons
  file-icons.file-icons
  formulahendry.auto-close-tag
  formulahendry.auto-rename-tag
  gitkraken.gitkraken-authentication
  HookyQR.beautify
  jeff-hykin.better-cpp-syntax
  jeff-hykin.code-eol
  josetr.cmake-language-support-vscode
  medo64.render-crlf
  mrmlnc.vscode-duplicate
  mrmlnc.vscode-scss
  ms-dotnettools.vscode-dotnet-runtime
  ms-vscode-remote.remote-containers
  ms-vscode-remote.remote-ssh
  ms-vscode-remote.remote-ssh-edit
  ms-vscode-remote.remote-wsl
  ms-vscode.cmake-tools
  ms-vscode.cpptools
  ms-vscode.cpptools-extension-pack
  ms-vscode.cpptools-themes
  ms-vscode.hexeditor
  ms-vscode.sublime-keybindings
  ms-vsliveshare.vsliveshare
  OfHumanBondage.react-proptypes-intellisense
  platformio.platformio-ide
  rid9.datetime
  sandy081.todotasks
  Shan.code-settings-sync
  silvenon.mdx
  streetsidesoftware.code-spell-checker
  streetsidesoftware.code-spell-checker-dutch
  stylelint.vscode-stylelint
  twxs.cmake
  Tyriar.lorem-ipsum
  VisualStudioExptTeam.vscodeintellicode
  vscode-icons-team.vscode-icons
  Vue.volar
  Vue.vscode-typescript-vue-plugin
  wix.vscode-import-cost
  wmaurer.change-case
  Zarel.sublime-commands
  zhuangtongfa.material-theme

Used Package Manager

npm

Validations

Akryum commented 2 years ago

See https://histoire.dev/guide/getting-started.html#typescript

tbusser commented 2 years ago

@Akryum I've done those steps. In the repo I linked to you can see the reference to histoire has been added to the env.d.ts file and that the file is added to the includes array. Can you have a look at the repo and see if I missed something?

Akryum commented 2 years ago

It was a regression with the extraction of vue3 project logic into a separate package. The reference will change to histoire/vue: https://github.com/histoire-dev/histoire/commit/fbec6bff57d2a20fbae8b32a72e7a1db456a8a59#diff-d11497d93c4e9a068e9d45153a3b33747c860d802b11d3f7cd9e5286916e0857