Type definitions compatible with IntelliJ IDE

[torbenj]

Hello,

I always had the issue that onyx type definitions aren't recognized by IntelliJ-based IDEs.
After some research I came to the solution that the issue is how the type definition files are named.

In packages/sit-onyx/vite.config.ts every .vue.d.ts file extension gets changed to d.vue.ts for some reason

beforeWriteFile: (filePath) => {
  if (filePath.endsWith(".vue.d.ts")) {
    return { filePath: filePath.replace(".vue.d.ts", ".d.vue.ts") };
  }
},

I removed the lines from my local clone, built the npm package and used it in separate demo project, now I get much better autocompletion in Webstorm than with the standard onyx build which is very nice to see.

Before (OnyxCard seems to be cached somewhere from previous tests, no other components get suggested):

After (all components get suggested including props):

Is there a specific reason why you need to rename these files and if not, would it be possible to remove the renaming to get better autocompletion for everyone using onyx?
It seems that VSCode accepts both versions, so at least in my limited tests it doesn't break VSCode compatibility.

[JoCa96]

Hi @torbenj! The correct file extension for non-js file typings is indeed .d.*.ts (See handbook or tsconfig). The vite-d-ts behaves incorrectly here, therefore the renaming (For more details see here). Unfortunately I don't have a JetBrains IDE installed to test/debug the issue right now.

1. I read that this issue might also be related to common.js/esm handling. Can you check that your package.json has an types: "module", entry?
2. Otherwise, can you try updating typescript or enabling "allowArbitraryExtensions": true in your tsconfig.json?

[torbenj]

Hi @JoCa96 ,

sorry for the delayed response.

I tried both approaches but none of them seems to work.
I'm using typescript 5.9.3 which should be pretty up-to-date.

In my package.json I had "type": "module" but also tried setting "types": "module" as well, no success.

I tried setting the "allowArbitraryExtensions" option to true in tsconfig.json and tsconfig.app.json as well without success but as tsconfig.json references tsconfig.app.json I guess putting it in app.json is sufficient.

{
  "compilerOptions": {
    "allowArbitraryExtensions": true,
    "baseUrl": ".",
    "composite": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "paths": {
      "@/*": ["./src/*"]
    },
    "types": ["@intlify/unplugin-vue-i18n/messages"]
  },
  "exclude": [],
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "include": [
    "src/types/env.d.ts",
    "src/**/*",
    "src/**/*.vue",
    "package.json",
    "src/i18n/locales/en-US.json",
    "tests/unit/**/*",
    "tests/component/**/*",
    "tests/integration/**/*",
    "playwright/**/*"
  ]
}

The only way I could get it working was by renaming aforementioned d.ts files.

Do you have any other idea what to try?

[tiloburgey]

Hi,
I'm also using a IntelliJ based IDE and I'm facing the same "issue" with no intellisense(code completion). To make it work jetbrains came up with the web-types.json, you can read more in the blog.

There's a tool that can generate the json file, it would be awesome if you could include it in the lib, so the dev doesn't have to build it on their own.