Skip to content

Commit

Permalink
Document ts project references setup (elastic#78586)
Browse files Browse the repository at this point in the history
* document ts project references

* Apply suggestions from code review

Co-authored-by: Josh Dover <[email protected]>

* capitalize all the bullet points

* address @rudolf comments

* add a reference to example

* fix identation

* convert  into asciidoc

* fix numeration

* fix asciidoctor failures

* cleanup typescript.asciidoc

* back to unordered list. asciidoctor fails validation

Co-authored-by: Josh Dover <[email protected]>
  • Loading branch information
mshustov and joshdover authored Oct 6, 2020
1 parent 2ca8aaa commit 6f98372
Show file tree
Hide file tree
Showing 3 changed files with 67 additions and 1 deletion.
3 changes: 3 additions & 0 deletions docs/developer/best-practices/index.asciidoc
Original file line number Diff line number Diff line change
Expand Up @@ -138,9 +138,12 @@ Review:
* <<development-unit-tests>>
* <<stability>>
* <<security-best-practices>>
* <<typescript>>

include::navigation.asciidoc[leveloffset=+1]

include::stability.asciidoc[leveloffset=+1]

include::security.asciidoc[leveloffset=+1]

include::typescript.asciidoc[leveloffset=+1]
64 changes: 64 additions & 0 deletions docs/developer/best-practices/typescript.asciidoc
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
[[typescript]]
== Typescript

Although this is not a requirement, we encourage if all new code is developed in https://www.typescriptlang.org/[Typescript].

[discrete]
=== Project references
Kibana has crossed the 2m LoC mark. The current situation creates some scaling problems when the default out-of-the-box setup stops working. As a result, developers suffer from slow project compilation and IDE unresponsiveness. As a part of https://github.com/elastic/kibana/projects/63[Developer Experience project], we are migrating our tooling to use built-in TypeScript features addressing the scaling problems - https://www.typescriptlang.org/docs/handbook/project-references.html[project references] & https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-4.html#faster-subsequent-builds-with-the---incremental-flag[incremental builds]

In a nutshell - instead of compiling the whole Kibana codebase at once, this setup enforces splitting the code base into independent projects that form a directed acyclic graph (DAG). This allows the TypeScript compiler (`tsc`) to apply several advanced optimizations:

- Every project emits `public` interfaces in the form of `d.ts` type declarations generated by the TypeScript compiler
- These generated `d.ts` type declarations are used whenever a referenced project is imported in a depending project
- This makes it possible to determine which project needs rebuilding when the source code has changed to use a more aggressive caching strategy.

More details are available in the https://www.typescriptlang.org/docs/handbook/project-references.html[official docs]

[discrete]
==== Caveats
This architecture imposes several limitations to which we must comply:

- Projects cannot have circular dependencies. Even though the Kibana platform doesn't support circular dependencies between Kibana plugins, TypeScript (and ES6 modules) does allow circular imports between files. So in theory, you may face a problem when migrating to the TS project references and you will have to resolve this circular dependency.
- A project must emit its type declaration. It's not always possible to generate a type declaration if the compiler cannot infer a type. There are two basic cases:

1. Your plugin exports a type inferring an internal type declared in Kibana codebase. In this case, you'll have to either export an internal type or to declare an exported type explicitly.
2. Your plugin exports something inferring a type from a 3rd party library that doesn't export this type. To fix the problem, you have to declare the exported type manually.

[discrete]
==== Prerequisites
Since `tsc` doesn't support circular project references, the migration order does matter. You can migrate your plugin only when all the plugin dependencies already have migrated. It creates a situation where commonly used plugins (such as `data` or `kibana_react`) have to migrate first.

[discrete]
==== Implementation
- Make sure all the plugins listed as dependencies in `kibana.json` file have migrated to TS project references.
- Add `tsconfig.json` in the root folder of your plugin.
[source,json]
----
{
"extends": "../../../tsconfig.base.json",
"compilerOptions": {
"composite": true,
"outDir": "./target/types",
"emitDeclarationOnly": true,
"declaration": true,
"declarationMap": true
},
"include": [
// add all the folders containg files to be compiled
],
"references": [
{ "path": "../../core/tsconfig.json" },
// add references to other TypeScript projects your plugin dependes on
]
}
----
If your plugin imports a file not listed in `include`, the build will fail with the next message `File ‘…’ is not listed within the file list of project …’. Projects must list all files or use an 'include' pattern.`

- Build you plugin `./node_modules/.bin/tsc -b src/plugins/my_plugin`. Fix errors if `tsc` cannot generate type declarations for your project.
- Add your project reference to `references` property of `tsconfig.refs.json`
- Add your plugin to `references` property and plugin folder to `exclude` property of the `tsconfig.json` it used to belong to (for example, for `src/plugins/**` it's `tsconfig.json`; for `x-pack/plugins/**` it’s `x-pack/tsconfig.json`).
- List the reference to your newly created project in all the Kibana `tsconfig.json` files that could import your project: `tsconfig.json`, `test/tsconfig.json`, `x-pack/tsconfig.json`, `x-pack/test/tsconfig.json`. And in all the plugin-specific `tsconfig.refs.json` for dependent plugins.
- You can measure how your changes affect `tsc` compiler performance with `node --max-old-space-size=4096 ./node_modules/.bin/tsc -p tsconfig.json --extendedDiagnostics --noEmit`. Compare with `master` branch.

You can use https://github.com/elastic/kibana/pull/79446 as an example.
1 change: 0 additions & 1 deletion docs/developer/index.asciidoc
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
[[development]]
= Developer guide

[partintro]
--
Contributing to {kib} can be daunting at first, but it doesn't have to be. The following sections should get you up and
running in no time. If you have any problems, file an issue in the https://github.com/elastic/kibana/issues[Kibana repo].
Expand Down

0 comments on commit 6f98372

Please sign in to comment.