tomit4/notes
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
notes/.vscode/extensions/octref.vetur-0.34.1/rfcs/002-monorepo-support.md
tomit4 26e2a50441 added vscode extensions
2021-11-05 11:26:45 -07:00

5 KiB
Raw Blame History

Summery

How to achieve monorepo, sub-folders, multi-repos support?

Basic example

a configuration in vetur.config.js. Ref: https://github.com/vuejs/vetur/pull/2378

Motivation

  • This feature request is very popular.
  • Monorepo is a trend in the front-end world.
  • There are several ways to implement this feature.
  • Attempts to resolve difficulties encountered by non-configurable users

Detailed design

Noun

  • Vetur: a VSCode extension for Vue support.
  • VTI: a CLI for Vue file type-check, diagnostics or some feature.
  • VLS: vue language server, The core of everything. It is base on language server protocol.
  • LSP: language server protocol
  • LSP server: In this rfcs, It means VLS.
  • LSP client: Connect to the client for the LSP server.
  • TLS: TypeScript language service, It isn't base on LSP. We call function like lib to used it. It provide language functionality on a project. Like: hover, completion.
  • TS plugin: TypeScript Language Service Plugin. We can use it for rename, refactor features. ref

How it achieve ?

Three possible methods are summarized below. I'm going to try to sort out the known strengths and weaknesses.

Ref: https://github.com/microsoft/vscode/wiki/Adopting-Multi-Root-Workspace-APIs#language-client--language-server Example: https://github.com/Microsoft/vscode-extension-samples/tree/master/lsp-multi-server-sample Similar PR: https://github.com/vuejs/vetur/pull/1928

Multiple LSP client

We use configuration to open multiple LSP clients. This will open multiple LSP server(VLS). One project scope per VLS dedicated service.

Benefits

  • simple and easy
  • Because each server has its own process, it does not interfere with performance.
  • Keep VLS simple

Drawbacks

  • Each third-party client requires its own maintenance this logic.
  • More computer resources required
  • Because the TS plugin has a different runtime unit, VLS and TS plugin communication is a problem, May need to deal with unexpected situations.
  • Information could not be shared before the project.

Base on TLS in LSP server

The TypeScript is support multile project in one server. It will make one Project to one TLS. It is based on tsconfig.json location. Because only TypeScript/JavaScript feature needs this feature at the moment,

Example: https://github.com/angular/vscode-ng-language-service PS. In this example from angular, Slightly different is that the project relies entirely on TS plugins. Similar PR: https://github.com/vuejs/vetur/pull/1734

Benefits

  • Simply extend TypeScript support part.
  • Consistent with the implementation of VSCode.
  • Consistent with the implementation of TS plugin, VLS and TS plugin communication is not a problem.

Drawbacks

  • It may create something completely unnecessary TLS when having project no Vue, maybe need a lazy logic?
  • In the vue ecosystem, it isn't support multiple tsconfig.json, It's a little redundant. more info
  • Performance is affected by the interplay between projects. unless the separation process is implemented with node worker_threads.
  • The template interpolation need to refactor and design, At least it's not a problem now. But I'm not sure if we'll break anything if we let Template interpolation have multiple files importing from each other.
  • Because there is no defined project in VLS, register globally components could be inaccurate.

Add multiple project support in LSP server

We implement this feature in the VLS.

Benefits

  • least restrictive
  • Best integrated effect

Drawbacks

  • Development costs are unknown, Maybe vetur.config.js rfcs can reduce it.
  • Need longer time.

Final implementation

We don't want to put the blame on all the clients. so remove Multiple LSP client option. Consider package.json and tsconfig.json issues, we will try to use Add multiple project support in LSP server. Also works with vetur.config.js configuration file.

Alternatives

Same as https://github.com/vuejs/vetur/blob/monorepo-rfc/rfcs/002-monorepo-support.md#how-it-achieve-

Adoption strategy

  • No breaking change
  • Add a docker command for provide information when have problem
  • Add monorepo and sub-folder docs
  • Try to provide humane tips

Unresolved questions

  • Have any multiple tsconfig.json case for a Vue project?
  • What to base a project on? Use tsconfig.json, package.json, or config in RFC?
  • Have any multiple tsconfig.json case for a other framework project? React? Angular?