From 51695dc7faf1fd9ae94170e5dc83dd1d4621a777 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Joan=20L=C3=B3pez=20de=20la=20Franca=20Beltran?= Date: Fri, 21 Jun 2024 19:44:44 +0200 Subject: [PATCH 1/7] Document 'experimental_enhanced' compatibility mode --- .../using-k6/javascript-compatibility-mode.md | 25 +++++++++++++++++-- 1 file changed, 23 insertions(+), 2 deletions(-) diff --git a/docs/sources/next/using-k6/javascript-compatibility-mode.md b/docs/sources/next/using-k6/javascript-compatibility-mode.md index fa0d8ac68e..2ca9a792e5 100644 --- a/docs/sources/next/using-k6/javascript-compatibility-mode.md +++ b/docs/sources/next/using-k6/javascript-compatibility-mode.md @@ -20,15 +20,18 @@ To enable ES module support, k6 uses [Babel](https://babeljs.io/) internally to ![Babel transformation in k6](/media/docs/k6-oss/diagram-grafana-k6-babel-pipeline.png) -Some users prefer to bundle their test code outside k6. For this reason, k6 offers two JavaScript compatibility modes: +Additionally, k6 also has experimental support for esbuild, to transpile TypeScript (TS) code and to support most ES6+ features. + +Some users prefer to bundle their test code outside k6. For this reason, k6 offers three JavaScript compatibility modes: - [Extended mode](#extended-mode): The default option, supporting ESM and most ES6+ features. +- [Experimental enhanced mode](#experimental-enhanced-mode): The experimental option, supporting TS and most ES6+ features. - [Base mode](#base-mode): Limited to CommonJS, excluding the Babel step. When running tests, you can change the mode by using the `--compatibility-mode` option: | Env | CLI | Code / Config file | Default | -| ----------------------- | ---------------------- | ------------------ | ------------ | +|-------------------------|------------------------|--------------------|--------------| | `K6_COMPATIBILITY_MODE` | `--compatibility-mode` | N/A | `"extended"` | ## Extended mode @@ -47,6 +50,24 @@ As illustrated in the previous diagram, if k6 detects unsupported ES+ features w Currently, the k6 Babel transformation only adds ESM support and sets `global` (node's global variable) with the value of `globalThis`. +## Experimental enhanced mode + +{{< code >}} + +```cli +$ k6 run --compatibility-mode=experimental_enhanced script.js +``` + +```env +$ K6_COMPATIBILITY_MODE=experimental_enhanced k6 run script.js +``` + +{{< /code >}} + +The experimental enhanced mode is similar to the extended mode, but it uses esbuild instead of Babel to transpile TypeScript (TS) code and to support most ES6+ features. + +TypeScript support is partial as it removes the type information but does not provide type safety. + ## Base mode {{< code >}} From 223aa03385864f8bb176774b6f4a41616d514c56 Mon Sep 17 00:00:00 2001 From: Heitor Tashiro Sergent Date: Fri, 21 Jun 2024 14:07:44 -0500 Subject: [PATCH 2/7] Replace script.js with script.ts --- .../next/using-k6/javascript-compatibility-mode.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/sources/next/using-k6/javascript-compatibility-mode.md b/docs/sources/next/using-k6/javascript-compatibility-mode.md index 2ca9a792e5..dfcaa5e68c 100644 --- a/docs/sources/next/using-k6/javascript-compatibility-mode.md +++ b/docs/sources/next/using-k6/javascript-compatibility-mode.md @@ -20,7 +20,7 @@ To enable ES module support, k6 uses [Babel](https://babeljs.io/) internally to ![Babel transformation in k6](/media/docs/k6-oss/diagram-grafana-k6-babel-pipeline.png) -Additionally, k6 also has experimental support for esbuild, to transpile TypeScript (TS) code and to support most ES6+ features. +Additionally, k6 also has experimental support for esbuild, to transpile TypeScript (TS) code and to support most ES6+ features. Some users prefer to bundle their test code outside k6. For this reason, k6 offers three JavaScript compatibility modes: @@ -31,7 +31,7 @@ Some users prefer to bundle their test code outside k6. For this reason, k6 offe When running tests, you can change the mode by using the `--compatibility-mode` option: | Env | CLI | Code / Config file | Default | -|-------------------------|------------------------|--------------------|--------------| +| ----------------------- | ---------------------- | ------------------ | ------------ | | `K6_COMPATIBILITY_MODE` | `--compatibility-mode` | N/A | `"extended"` | ## Extended mode @@ -55,11 +55,11 @@ Currently, the k6 Babel transformation only adds ESM support and sets `global` ( {{< code >}} ```cli -$ k6 run --compatibility-mode=experimental_enhanced script.js +$ k6 run --compatibility-mode=experimental_enhanced script.ts ``` ```env -$ K6_COMPATIBILITY_MODE=experimental_enhanced k6 run script.js +$ K6_COMPATIBILITY_MODE=experimental_enhanced k6 run script.ts ``` {{< /code >}} From f9f524a00689dbf40b1593b42352adb32bdf3461 Mon Sep 17 00:00:00 2001 From: Heitor Tashiro Sergent Date: Fri, 21 Jun 2024 14:08:33 -0500 Subject: [PATCH 3/7] Add alias --- docs/sources/next/using-k6/javascript-compatibility-mode.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/sources/next/using-k6/javascript-compatibility-mode.md b/docs/sources/next/using-k6/javascript-compatibility-mode.md index dfcaa5e68c..c92d2f44c6 100644 --- a/docs/sources/next/using-k6/javascript-compatibility-mode.md +++ b/docs/sources/next/using-k6/javascript-compatibility-mode.md @@ -1,4 +1,6 @@ --- +aliases: + - ./javascript-compatibility-mode/ # /docs/k6//using-k6/javascript-compatibility-mode/ title: JavaScript compatibility mode menuTitle: JavaScript mode excerpt: 'k6 supports running test scripts with different ECMAScript compatibility modes using --compatibility-mode' From ff9c48c668e2c5a9637e89b2e2f2dbd7ce573b39 Mon Sep 17 00:00:00 2001 From: Heitor Tashiro Sergent Date: Fri, 21 Jun 2024 14:09:03 -0500 Subject: [PATCH 4/7] Remove property to hide page from menu --- docs/sources/next/using-k6/javascript-compatibility-mode.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/docs/sources/next/using-k6/javascript-compatibility-mode.md b/docs/sources/next/using-k6/javascript-compatibility-mode.md index c92d2f44c6..e6ec73e2ed 100644 --- a/docs/sources/next/using-k6/javascript-compatibility-mode.md +++ b/docs/sources/next/using-k6/javascript-compatibility-mode.md @@ -4,8 +4,6 @@ aliases: title: JavaScript compatibility mode menuTitle: JavaScript mode excerpt: 'k6 supports running test scripts with different ECMAScript compatibility modes using --compatibility-mode' -_build: - list: false weight: 19 --- From 55c2477d302be32924864e52fb62ddaadaa00499 Mon Sep 17 00:00:00 2001 From: Heitor Tashiro Sergent Date: Fri, 21 Jun 2024 14:09:28 -0500 Subject: [PATCH 5/7] Rename page and update page title --- ...ode.md => javascript-typescript-compatibility-mode.md} | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) rename docs/sources/next/using-k6/{javascript-compatibility-mode.md => javascript-typescript-compatibility-mode.md} (95%) diff --git a/docs/sources/next/using-k6/javascript-compatibility-mode.md b/docs/sources/next/using-k6/javascript-typescript-compatibility-mode.md similarity index 95% rename from docs/sources/next/using-k6/javascript-compatibility-mode.md rename to docs/sources/next/using-k6/javascript-typescript-compatibility-mode.md index e6ec73e2ed..8876263117 100644 --- a/docs/sources/next/using-k6/javascript-compatibility-mode.md +++ b/docs/sources/next/using-k6/javascript-typescript-compatibility-mode.md @@ -1,13 +1,13 @@ --- aliases: - ./javascript-compatibility-mode/ # /docs/k6//using-k6/javascript-compatibility-mode/ -title: JavaScript compatibility mode -menuTitle: JavaScript mode -excerpt: 'k6 supports running test scripts with different ECMAScript compatibility modes using --compatibility-mode' +title: JavaScript and TypeScript compatibility mode +menuTitle: JavaScript and TypeScript mode +excerpt: 'k6 supports running test scripts with different ECMAScript and TypeScript compatibility modes using --compatibility-mode' weight: 19 --- -# JavaScript compatibility mode +# JavaScript and TypeScript compatibility mode You can write k6 scripts in various ECMAScript versions: From 5c0fdb56f1b5f6645438588b68fd356836ba2d57 Mon Sep 17 00:00:00 2001 From: Heitor Tashiro Sergent Date: Fri, 21 Jun 2024 14:12:41 -0500 Subject: [PATCH 6/7] Add links to esbuild --- .../using-k6/javascript-typescript-compatibility-mode.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/sources/next/using-k6/javascript-typescript-compatibility-mode.md b/docs/sources/next/using-k6/javascript-typescript-compatibility-mode.md index 8876263117..53940f56b5 100644 --- a/docs/sources/next/using-k6/javascript-typescript-compatibility-mode.md +++ b/docs/sources/next/using-k6/javascript-typescript-compatibility-mode.md @@ -20,7 +20,7 @@ To enable ES module support, k6 uses [Babel](https://babeljs.io/) internally to ![Babel transformation in k6](/media/docs/k6-oss/diagram-grafana-k6-babel-pipeline.png) -Additionally, k6 also has experimental support for esbuild, to transpile TypeScript (TS) code and to support most ES6+ features. +Additionally, k6 also has experimental support for [esbuild](https://esbuild.github.io/), to transpile TypeScript (TS) code and to support most ES6+ features. Some users prefer to bundle their test code outside k6. For this reason, k6 offers three JavaScript compatibility modes: @@ -64,9 +64,9 @@ $ K6_COMPATIBILITY_MODE=experimental_enhanced k6 run script.ts {{< /code >}} -The experimental enhanced mode is similar to the extended mode, but it uses esbuild instead of Babel to transpile TypeScript (TS) code and to support most ES6+ features. +The experimental enhanced mode is similar to the extended mode, but it uses [esbuild](https://esbuild.github.io/) instead of Babel to transpile TypeScript (TS) code and to support most ES6+ features. -TypeScript support is partial as it removes the type information but does not provide type safety. +TypeScript support is partial as it removes the type information but doesn't provide type safety. ## Base mode From e26c317853c95ef8f8a81a2a74b9c57dee99c33c Mon Sep 17 00:00:00 2001 From: Heitor Tashiro Sergent Date: Fri, 21 Jun 2024 14:31:25 -0500 Subject: [PATCH 7/7] Update mentions of TypeScript to link to compatibility mode --- docs/sources/next/examples/tutorials/_index.md | 2 +- docs/sources/next/get-started/resources.md | 5 ++--- docs/sources/next/set-up/configure-k6-intellisense.md | 1 + docs/sources/next/using-k6/modules.md | 5 +---- 4 files changed, 5 insertions(+), 8 deletions(-) diff --git a/docs/sources/next/examples/tutorials/_index.md b/docs/sources/next/examples/tutorials/_index.md index 5fd2698629..7501bc8401 100644 --- a/docs/sources/next/examples/tutorials/_index.md +++ b/docs/sources/next/examples/tutorials/_index.md @@ -12,7 +12,7 @@ weight: 26 - [Swagger/OpenAPI integration](https://k6.io/blog/load-testing-your-api-with-swagger-openapi-and-k6) - [Schedule k6 tests with cron](https://k6.io/blog/performance-monitoring-with-cron-and-k6) - [Load test a GraphQL service](https://k6.io/blog/load-testing-graphql-with-k6) -- [Use TypeScript in k6 scripts](https://github.com/k6io/template-typescript) +- [Use TypeScript in k6 scripts](https://grafana.com/docs/k6//using-k6/javascript-typescript-compatibility-mode/) - [Debug using a Web Proxy](https://k6.io/blog/k6-load-testing-debugging-using-a-web-proxy/) - [Distributed k6 tests on K8s](https://k6.io/blog/running-distributed-tests-on-k8s/) - [Create a k6 extension](https://k6.io/blog/extending-k6-with-xk6) diff --git a/docs/sources/next/get-started/resources.md b/docs/sources/next/get-started/resources.md index 3351a11435..01650f8d4d 100644 --- a/docs/sources/next/get-started/resources.md +++ b/docs/sources/next/get-started/resources.md @@ -14,8 +14,7 @@ These resources help you write and run k6 tests in a safe environment and explor ## Learning -- [Get started with k6 tutorial](https://grafana.com/docs/k6//examples/get-started-with-k6). The getting started tutorial provides some procedures for common real-life uses of k6 and does not require prior knowledge of k6 or JavaScript - +- [Get started with k6 tutorial](https://grafana.com/docs/k6//examples/get-started-with-k6). The getting started tutorial provides some procedures for common real-life uses of k6 and does not require prior knowledge of k6 or JavaScript. - [k6 Learn](https://github.com/grafana/k6-learn). A repository with a course and a ton of learning resources. - [k6 OSS workshop](https://github.com/grafana/k6-oss-workshop). A 2-3 hour k6 workshop with practical k6 examples using the QuickPizza demo app. - [k6 YouTube channel](https://www.youtube.com/playlist?list=PLDGkOdUX1UjrZM3lIHvFcKJxVgl2n4J65). Office hours, specific playlists, and other interesting videos from the community. @@ -43,5 +42,5 @@ Note that these are shared testing environments - please avoid high-load tests. - [Kubernetes Operator](https://k6.io/blog/running-distributed-tests-on-k8s/). Distribute test execution across a Kubernetes cluster. - [xk6 extensions](https://grafana.com/docs/k6//extensions). Custom k6 binaries to support the tool you need. - [The browser recorder](https://grafana.com/docs/k6//using-k6/test-authoring/create-tests-from-recordings/using-the-browser-recorder). Make test scripts from browser sessions. -- [k6 TypeScript template](https://github.com/grafana/k6-template-typescript) +- [Use TypeScript in k6 scripts](https://grafana.com/docs/k6//using-k6/javascript-typescript-compatibility-mode/) - [Integrations](https://grafana.com/docs/k6//misc/integrations) diff --git a/docs/sources/next/set-up/configure-k6-intellisense.md b/docs/sources/next/set-up/configure-k6-intellisense.md index d8b6ea0f2b..002647cb13 100644 --- a/docs/sources/next/set-up/configure-k6-intellisense.md +++ b/docs/sources/next/set-up/configure-k6-intellisense.md @@ -36,3 +36,4 @@ $ npm install --save-dev @types/k6 - [Visual Studio Code - k6 Extension](https://marketplace.visualstudio.com/items?itemName=k6.k6) - [IntelliJ IDEA - k6 Plugin](https://plugins.jetbrains.com/plugin/16141-k6) - [TypeScript Editor Support](https://github.com/Microsoft/TypeScript/wiki/TypeScript-Editor-Support) +- [Use TypeScript in k6 scripts](https://grafana.com/docs/k6//using-k6/javascript-typescript-compatibility-mode/) diff --git a/docs/sources/next/using-k6/modules.md b/docs/sources/next/using-k6/modules.md index d78ff62ea0..dd8abd49d6 100644 --- a/docs/sources/next/using-k6/modules.md +++ b/docs/sources/next/using-k6/modules.md @@ -355,10 +355,7 @@ $ k6 run dist/signup.bundle.js \ ## Use TypeScript -k6 does not natively support TypeScript. If you wish to write k6 tests in Typescript, you will need a bundler, as demonstrated in the previous examples: - -- Using Webpack: Refer to [k6-template-typescript](https://github.com/grafana/k6-template-typescript) and [k6-jslib-aws](https://github.com/grafana/k6-jslib-aws). -- Using Rollup: Apply the [@rollup/plugin-typescript](https://github.com/rollup/plugins/tree/master/packages/typescript) to the [k6-rollup-example](https://github.com/grafana/k6-rollup-example). +k6 supports partial TypeScript support with the `experimental_enhanced` compatibility mode. For more details, refer to [JavaScript and TypeScript compatibility mode](https://grafana.com/docs/k6//using-k6/javascript-typescript-compatibility-mode/). ## Use modules with Docker