[vite] Types for Vite plugin

[angelhdzdev]

Hi 👋,

can't find the types for vite plugin. I tried setting types: ["@danielx/civet/vite"]" as other libs do. Enabling allowJs in tsconfig doesn't nothing.
Also tried renaming vite.config.ts to vite.config.civet as a desperate measure.

It's working at runtime. My App.vue has a <script src="./App"> where ./App is ./App.civet and Vite plugin is successfully transforming \*.civet to \*.ts.

[edemaine]

The types are in dist/unplugin/vite.d.ts and they should be automatically part of the "@danielx/civet/vite" export. I also haven't had trouble in the past, so it's probably something specific to your setup.

So you're failing to get types for the Vite plugin in VSCode when looking at vite.config.ts? Did you try restarting VSCode?

[angelhdzdev]

I even disabled Vue Official extension (formerly Volar). Strange.

[angelhdzdev]

Update

Yeah apparently Civet extension might be at cause. I made few tests with both the Vue Official and Civet extensions disabled. No error. Then enabled Vue extension, and closed/open VSCode. No errors.
Then enabled Civet extension. Error immediately came back.

2024-12-15.17-37-54.mp4

[angelhdzdev]

Tested on all versions down to 0.3.20.

[edemaine]

Thanks for continuing to test! That behavior (only broken with Civet plugin) would suggest that it's an LSP bug, presumably in resolveModuleNames.

But it seems like that function should just be calling TypeScript's resolver and successfully resolving. Adding some logs confirms it...

So I'm back to not being sure of the cause. It doesn't help that I can reproduce the problem only sporadically (currently not at all). 😦

[angelhdzdev]

No worries, I will keep researching and trying to solve it on my own.
I added the types manually so I can continue with testing Civet with Vue/Vite.

 "types": ["/home/angelhdz/Documents/Programming/TypeScript/projects/vue-electron/civet-test/node_modules/.pnpm/@[email protected][email protected]/node_modules/@danielx/civet/dist/unplugin/vite.d.ts"]

The error went away. Then I installed @vitejs/plugin-vue-jsx and TSX is working in *.civet files.

The only issue for now is Could not find a declaration file for module './App.vue'. '/home/angelhdz/Documents/Programming/TypeScript/projects/vue-electron/civet-test/src/App.vue' implicitly has an 'any' type. when importing a Vue component either in main.ts or in a SFC <script setup lang="ts"> import C from './C' </script> so apparently there are still Vue or Vite issues with Civet extension.

But it's rendering :)

[nicholaides]

At a glance it seems like you may be experiencing this bug: #1634

[angelhdzdev]

At a glance it seems like you may be experiencing this bug: #1634

Your solution fixed all my issues, even the ones I didn't mention, like the one you experienced with DOM API, in my case I couldn't use console.log, it complained about adding "DOM" to lib but it was already there...
And now my Vue components can be imported without errors (only that I can't use the lang="civet" on the script tag or the .civet extension on the import but I can live with it).

[angelhdzdev]

Update

Guess what guys? 🤡

I was trying Civet @@decorators, and switched from TSX to normal Vue code using defineComponent, was having fun.

Suddenly...

I noticed... i was coding blind. I didn't have intellisense!!!
Hovering things won't complete the types.

So I full of joy, obviously, quitstarted VSCode...

and...

[HORROR.wav]

ALL. ERRORS. CAME. BACK.

[angelhdzdev]

Wondering if we can use extend instead of references? Or Civet also does not understand it? 🤔

[edemaine]

Yes, extends should work fine.

[angelhdzdev]

Confirming. extends solved it.

  "extends": [
    "./src/tsconfig.app.json",
   "./tsconfig.node.json" 
  ],

Reloaded VSCode.

No errors.

But wondering what implications will this have for Vite...

Anyways I think this discussion is solved?