[typescript] add typescript support for the server and browser by spalger · Pull Request #19104 · elastic/kibana

spalger · 2018-05-16T01:52:39Z

This PR enables TypeScript support in both the server and the client. It does not implement tslint, that will come in #19105 .

Here is a summary of how this works:

distributable
- does not have any way to run TypeScript
- all TS transpilation must happen at build time before shipping distributable
building
- .ts and .tsx files are converted to .js files in place
- Full type-check is run while TS is transpiled into .js
- **/*.ts, **/*.tsx, **/*.d.ts and **/tsconfig.json files are stripped from the build after successful compilation
plugin helpers
- plugins with a tsconfig.json file at their root will be transpiled like Kibana is and have TS files stripped while building
development
- ts-node added to babel-register to auto-transpile .ts files in the server/jest/mocha
- ts-loader transpiles .ts and .tsx files in webpack (without checking types)
- Transpilation in both the server and optimizer is done without type checking, the process runs out of memory really fast otherwise
- Editor integrations provide type-checking feedback to developers (vscode, atom, vim, webstorm)

To test this out grab a file and convert it to TypeScript. I find constants.js files to be easiest:

elasticmachine · 2018-05-16T22:40:39Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

elasticmachine · 2018-05-17T00:59:20Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

spalger · 2018-05-17T22:41:11Z

@epixa RE no type checking in dev. This was included in a previous version of the description and I've added it back. Type checking is not supplied by the optimizer or babel-register. Adding type checking here causes things to run out of memory even on very small workloads, so instead editor integrations are leaned on for type checking information. Like you discovered, the build is the final gate and a full type-checking is done there.

spalger · 2018-05-17T22:43:39Z

@tylersmalley the root server directory in x-pack is not selected by the tsconfig.json file, so the typescript there is not being transpiled. Add server/**/* to

kibana/x-pack/tsconfig.json

Line 4 in bd0f4e1

"plugins/**/*"

and it should work

spalger · 2018-05-17T22:57:51Z

@epixa #19105 will also be a tool people can use to run typechecking a little more efficiently than rebuilding Kibana or opening every file in their editor.

tylersmalley · 2018-05-17T23:04:15Z

@spalger, that did the trick.

From the build/kibana/node_modules/x-pack/server/lib directory:

-rw-r--r--  1 tyler  staff    472 May 17 15:47 constants.js
-rw-r--r--  1 tyler  staff  10708 May 15 20:45 esjs_shield_plugin.js
-rw-r--r--  1 tyler  staff    562 May 15 20:45 get_client_shield.js
-rw-r--r--  1 tyler  staff   1642 May 15 20:45 key_case_converter.js
-rw-r--r--  1 tyler  staff    825 May 15 20:45 mirror_plugin_status.js
-rw-r--r--  1 tyler  staff   1313 May 15 20:45 parse_kibana_state.js
-rw-r--r--  1 tyler  staff    513 May 15 20:45 xpack_usage.js

elasticmachine · 2018-05-17T23:57:39Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

epixa · 2018-05-18T16:04:18Z

the root server directory in x-pack is not selected by the tsconfig.json file, so the typescript there is not being transpiled. Add server/**/* to

@spalger Any reason why we wouldn't just do that from the start?

epixa · 2018-05-18T16:06:26Z

RE no type checking in dev. This was included in a previous version of the description and I've added it back. Type checking is not supplied by the optimizer or babel-register. Adding type checking here causes things to run out of memory even on very small workloads, so instead editor integrations are leaned on for type checking information. Like you discovered, the build is the final gate and a full type-checking is done there.

I think I'm OK with this at least initially. It's not ideal, and maybe this is something we can fix down the line, perhaps with an upgrade of babel and/or webpack. On the fly type checking is certainly useful and expected with statically typed languages, and clearly it's possible since my editor tree is handling it. But let's not block progress for the sake of things we can do down the line.

…escript

elasticmachine · 2018-05-18T17:44:35Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

weltenwort · 2018-05-18T18:05:27Z

I gave this a try with a greenfield kibana plugin written in typescript and was able to adapt it such that the following worked:

run it in --dev mode (optimization time for .ts file change ~8s)
plugin-helpers build it such that it produces a .zip
kibana-plugin install that .zip and check that the plugin is loaded correctly

In doing so I stumbled across a few things:

If the plugin is a mixed js/ts project with allowJs: true in the tsconfig.json, plugin-helpers build breaks, because it would try to recompile the .js files into themselves. Maybe the limitation to ts-only and the risks of customizing the tsconfig.json too much should be pointed out in the docs.
Since the plugin-helpers by default only copy over a very limit set of files (https://github.com/spalger/kibana/blob/20eb9688a8f3483c3336cb5f1f0cfef2a8565d30/packages/kbn-plugin-helpers/lib/plugin_config.js#L11-L17), the main entry point can not be a index.ts. Maybe the need to override it in the plugin-helpers build arguments in such cases should be documented.
The fact that the jsx option is set to react for the --dev mode webpack config (https://github.com/spalger/kibana/blob/20eb9688a8f3483c3336cb5f1f0cfef2a8565d30/src/optimize/base_optimizer.js#L284) , but unset in the normal tsconfig.json can lead to errors in IDEs and editors which can not pick that up.

Not tested:

Typescript in Mocha and Jest

Overall, great progress with a few kinks to iron out 😍

…ic#19104) * [typescript] add typescript support for the server and browser * [ts-jest] upgrade to latest version * [jest] support test.tsx files * [jest/ts] modify `ts-jest.tsConfigFile` config based on filePath * [types] use correct major version of minimatch types * [jest] add ts support to x-pack jest config * [ts/projects] fix tsconfig.json not found error message * [optimizer/ts] use lowercase jsx option * [tsconfig] remove ui/* alias * [plguin-helpers] remove mention of `buildSourcePatterns` * [plugin-helpers] expect typescript to be a devDep * [dev/build] place transpile tasks next to each other * [ts/x-pack] add common and server directories to ts project * [dev/ts/project] use a limited set of globs to find tsconfig files

#19104)" This reverts commit c611206.

* Revert "[DOCS] Removes redundant index.asciidoc files (#19192)" This reverts commit d11b5aa. * Revert "[typescript] add typescript support for the server and browser (#19104)" This reverts commit c611206. * Revert "Option to run kibana from build for CI (#19125)" This reverts commit 5969860.

…19104) (#19223) Backports the following commits to 6.x: - [typescript] add typescript support for the server and browser (#19104)

spalger · 2018-05-21T17:43:27Z

6.x/6.4: 07f4e5a

sorenlouv · 2018-06-07T09:23:11Z

x-pack/tsconfig.json

+    "server/**/*",
+    "plugins/**/*"
+  ]
+}


@spalger Ever since this file was added vscode has been complaining about errors in the workspace:

[ts] No inputs were found in config file '/Users/sqren/elastic/kibana/x-pack/tsconfig.json'. Specified 'include' paths were '["common/**/*","server/**/*","plugins/**/*"]' and 'exclude' paths were '[]'.

Any idea how to fix this?

@sqren this is probably because there aren't actually any ts files in the x-pack project yet.. Maybe you should convert something small in APM to typescript 😄 or we can remove the tsconfig.json file for now.

spalger added review Team:Operations Kibana-Operations Team v7.0.0 v6.4.0 labels May 16, 2018

spalger requested review from epixa, jbudz and tylersmalley May 16, 2018 01:52

spalger mentioned this pull request May 16, 2018

[tslint] lint typescript code #19105

Merged

spalger added blocked and removed review labels May 16, 2018

spalger force-pushed the implement/typescript branch from d0e0866 to 6811044 Compare May 16, 2018 02:09

spalger changed the base branch from implement/typescript to master May 16, 2018 02:09

spalger added 2 commits May 16, 2018 10:50

[typescript] add typescript support for the server and browser

f26b5b4

[ts-jest] upgrade to latest version

deecb05

spalger force-pushed the implement/typescript branch from 45bf3c2 to 3a8a7ff Compare May 16, 2018 20:02

[jest] support test.tsx files

24f60f4

spalger force-pushed the implement/typescript branch from 3a8a7ff to 8b3c446 Compare May 16, 2018 21:02

elastic deleted a comment from elasticmachine May 16, 2018

spalger added review and removed blocked labels May 16, 2018

spalger force-pushed the implement/typescript branch 2 times, most recently from a60da73 to 90210f8 Compare May 16, 2018 21:12

[jest/ts] modify ts-jest.tsConfigFile config based on filePath

df586a0

spalger force-pushed the implement/typescript branch from 90210f8 to df586a0 Compare May 16, 2018 21:15

[types] use correct major version of minimatch types

adf5563

spalger added 2 commits May 16, 2018 16:39

[jest] add ts support to x-pack jest config

1bb873c

[ts/projects] fix tsconfig.json not found error message

e3231ee

spalger added 5 commits May 17, 2018 15:46

[optimizer/ts] use lowercase jsx option

42efdfa

[tsconfig] remove ui/* alias

88f7a62

[plguin-helpers] remove mention of buildSourcePatterns

81044df

[plugin-helpers] expect typescript to be a devDep

0f75a93

[dev/build] place transpile tasks next to each other

73431ed

tylersmalley approved these changes May 17, 2018

View reviewed changes

jbudz approved these changes May 18, 2018

View reviewed changes

spalger added 3 commits May 18, 2018 09:25

Merge branch 'master' of github.com:elastic/kibana into implement/typ…

5158ac9

…escript

[ts/x-pack] add common and server directories to ts project

8aae120

[dev/ts/project] use a limited set of globs to find tsconfig files

20eb968

spalger merged commit c611206 into elastic:master May 18, 2018

spalger mentioned this pull request May 18, 2018

[6.x] [typescript] add typescript support for the server and browser (#19104) #19223

Merged

rhoboat pushed a commit that referenced this pull request May 18, 2018

Revert "[typescript] add typescript support for the server and browser (

8f97b40

#19104)" This reverts commit c611206.

spalger pushed a commit that referenced this pull request May 21, 2018

[6.x] [typescript] add typescript support for the server and browser (#…

07f4e5a

…19104) (#19223) Backports the following commits to 6.x: - [typescript] add typescript support for the server and browser (#19104)

spalger deleted the implement/typescript branch May 21, 2018 17:43

sorenlouv reviewed Jun 7, 2018

View reviewed changes

Conversation

spalger commented May 16, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

elasticmachine commented May 16, 2018

💚 Build Succeeded

Uh oh!

elasticmachine commented May 17, 2018

💚 Build Succeeded

Uh oh!

spalger commented May 17, 2018

Uh oh!

spalger commented May 17, 2018

Uh oh!

spalger commented May 17, 2018

Uh oh!

tylersmalley commented May 17, 2018

Uh oh!

elasticmachine commented May 17, 2018

💚 Build Succeeded

Uh oh!

epixa commented May 18, 2018

Uh oh!

epixa commented May 18, 2018

Uh oh!

elasticmachine commented May 18, 2018

💚 Build Succeeded

Uh oh!

weltenwort commented May 18, 2018

Uh oh!

spalger commented May 21, 2018

Uh oh!

sorenlouv Jun 7, 2018

Choose a reason for hiding this comment

Uh oh!

spalger Jun 11, 2018

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

spalger commented May 16, 2018 •

edited

Loading