[Feature]: Allow tsconfig.json path to be configurable

[jostrander]

Describe the feature

In the radix version, we could configure the tsconfig path to our frontend's tsconfig.json, which we had done in our repo because our front end is colocated with our backend (AdonisJS). It would be nice to bring this option back and it appears to be possible with the new get-tsconfig library, but it appears hardcoded to look for the tsconfig.json that's colocated in the current working directory having package.json.

Additional information

• I intend to submit a PR for this feature.
• I have already implemented and/or tested this feature.

[sadeghbarati]

How about using tsconfig references in your Client/Frontend directory like

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
    },
  },
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
    { "path": "../../adonisJSRoute-tsconfig" }
  ]
}

[jostrander]

@sadeghbarati I gave that a shot but no dice. When I do that, I get an error in the resolved config from Zod:

[
  {
    "code": "invalid_type",
    "expected": "string",
    "received": "undefined",
    "path": [
      "resolvedPaths",
      "utils"
    ],
    "message": "Required"
  },
  {
    "code": "invalid_type",
    "expected": "string",
    "received": "undefined",
    "path": [
      "resolvedPaths",
      "components"
    ],
    "message": "Required"
  }
]

I chocked this up to it not being able to use tsconfig.json to resolve the aliases for utils and components to actual paths, which makes sense, but is also solved when I can tell it which tsconfig.json has the aliases in it. If I understand correctly, that's what were trying to solve with references, and here's the config I have:

{
  "extends": "@adonisjs/tsconfig/tsconfig.client.json",
  "compilerOptions": {
    "baseUrl": ".",
    "jsx": "preserve",
    "module": "ESNext",
    "jsxImportSource": "vue",
    "paths": {
      "~/*": ["./*"]
    }
  },
  "include": ["./**/*.ts", "./**/*.vue"],
  "references": [
    { "path":  "../tsconfig.json" }
  ]
}

[sadeghbarati]

Can I see the project?

If it's really needed, I'll try to speak with the Zernonia to check the CLI to bring the option back

[jostrander]

Here is a repro repository. I used adonis's starter kit with inertia, then started to install shadcn-vue, but got stuck trying to add the aliases. I did add forward/reverse reference lines in tsconfig, but no luck.

[sadeghbarati]

Yes, we definitely need to add that option back

I thought I could run shadcn-vue init with --cwd option, but no luck

[sadeghbarati]

https://youtu.be/lTSiqGRvuPo?si=cXyFiqyD7zkV8xui&t=203

After checking this video, which is configuring shadcn and inertia, I can confirm that one tsconfig in the root with some alias to the inertia frontend directory can resolve this issue

---

if you want to use/extend @adonisjs/tsconfig/tsconfig.client.json configs just extend it in the root tsconfig.app.json

[jostrander]

@sadeghbarati I watched, but I'm not following, there is no root tsconfig.app.json in the repo repository.

[sadeghbarati]

Opened PR in your repo which handle the shadcn-vue installation without the previous tsConfigPath option in shadcn-vue CLI v1

jostrander/shadcn-repro#1

Might add tsConfigPath to the CLI but I need to discuss it with Zernonia cause it will add another step the CLI prompt commands

[thetutlage]

Hello @sadeghbarati

Creator of AdonisJS here, adding "paths": { "~/*": ["./inertia/*"] }, to the root tsConfig.json file will create more issues, because now I will suddenly see import suggestions for the Inertia app in my backend codebase.

AdonisJS itself is a backend framework (with its own tsconfig.json file) and then there is the frontend app inside the inertia directory (with its own tsconfig.json file).

Why two tsconfig?

• Because the runtime of both the apps are different. I will enable JSX in my frontend code, but not in my backend code. Similarly, I will enable DOM globals for my frontend app and not the backend app
• There shouldn't be cross imports cross the backend and the frontend apps.
• And many more small differences like these

It will be nice, if we can configure the tsConfigPath inside the components file