ts proto and working with intellisense

[cfife-btig]

Hi there,

I am coming from rules_nodejs and switching to rules_js. I'm in the process of moving our existing grpc-web ts libraries (generated using rules_proto_grpc) to the ts_proto_library.

At a high level, I've gotten a ts_proto_library to be used by a ts_project rule which is then bundled with esbuild.

The problem I'm having now is with intellisense. What options are there for handling intellisense. In the one proto_grpc example available in this repository, it seems like they are directly emitting the output files in the user's source directory. Are there ways to avoid this, such as pointing my intellisense tools to look into my bazel-bin directory or the like.

I'm quite sure this has been discussed before, but I'm just curious what the options are now with rules_ts and the ts_proto_library. Is it only to copy ts_proto_library output files back to the source directoy, or are there other options?

[dezyh]

I will preface this by saying I'm also working through a similar problem and want to share my current findings. I would appreciate some help if anyone else has ideas on how to ergonomically consume a ts_proto_library from a ts_project.

Getting Intellisense Working

I'm trying to work around this using the compilerOptions.paths option in my tsconfig.json.

What works for me to get type-hints (in neovim) is to add the path ../bazel-out/k8-fastbuild/bin/* under an alias (@@/*) for the workspace root.

{
  "compilerOptions": {
    "paths": {
      "@/*": [
          "*",
          "src/*"
      ],
      "@@/*": [
          "../../*", // incorrect
          "../bazel-out/k8-fastbuild/bin/*"
      ]
    }
  }
}

This lets me import like:

import { Example } from '@@/protos/example_pb';
import { Component } from '@/Component';

Some Additional Notes

There are other options too like compilerOptions.rootDirs, and compilerOptions.baseUrl which might be useful to mention and include. I just don't know exactly how to use them right now as they don't appear useful to me based on what I've tried..

I've also seen examples where more paths are included to support multiple build targets such as from bazel-contrib/rules_nodejs#3502:

"paths": {
    "*": [
        "./*",
        "./bazel-out/k8-fastbuild/bin/*",
        "./bazel-out/x64_windows-fastbuild/bin/*",
        "./bazel-out/x64_windows-dbg/bin/*",
        "./bazel-out/k8-dbg/bin/*",
        "./bazel-out/host/bin/*",
        "./bazel-out/darwin-fastbuild/bin/*",
        "./bazel-out/darwin-dbg/bin/*"
    ]
}

My Issue

What I can't get working is getting both builds and intellisense working at the same time.

1. Relative imports from workspace

import { Example } from '../../protos/example_pb';
import { Component } from '@/Component';

• builds are successful
• obviously intellisense doesn't work

2. Using path alias ("@@/*": "../../*")

import { Example } from '@@/protos/example_pb';
import { Component } from '@/Component';

• builds fail
• intellisense works

[vite] Internal server error: Failed to resolve import "../../../../protos/example_pb" from "src/App.js". Does the file exist?
  Plugin: vite:import-analysis
  File: /run/user/1000/js_run_devserver-LZ1uDA/_main/react/src/App.js:4:25
  2  |  import "./App.css";
  3  |  import Component from "./Component";
  4  |  import { Status } from "../../../../protos/example_pb";

List of path aliases I tried:

• * gives ../../../../bazel-working-directory/_exec/protos/example_pb
• ../* gives ../../../../bazel-working-directory/protos/example_pb
• ../../* gives ../../../../protos/example_pb
• ../../../* gives ../../../../../protos/example_pb

I don't quite understand why the path is changing like this or why it's always prefixed by ../../../../ (4) as I think ../../ (2) should be the correct alias.