Initial commit

Author: ahoad

.babelrc

@@ -0,0 +1,8 @@
+{
+  "presets": ["@babel/env", "@babel/typescript"],
+  "plugins": [
+    "@babel/proposal-class-properties",
+
+    "@babel/proposal-object-rest-spread"
+  ]
+}

.github/workflows/push.yml

@@ -0,0 +1,22 @@
+on: [push]
+
+jobs:
+  k6_transpile_bundle_test:
+    name: Transpile, bundle and run
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Install dependencies
+        run: |
+          yarn --frozen-lockfile
+
+      - name: Transpile and bundle test script
+        run: |
+          yarn webpack
+
+      - name: Run local k6 test
+        uses: k6io/[email protected]
+        with:
+          filename: dist/test1.js

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+yarn-error.log
+dist

README.md

@@ -0,0 +1,69 @@
+<div align="center">
+  
+  ![banner](assets/ts-js-k6.png)
+
+# Template to use TypeScript with k6
+
+![.github/workflows/push.yml](https://github.com/k6io/template-typescript/workflows/.github/workflows/push.yml/badge.svg?branch=master)
+
+</div>
+
+This repository provides a scaffolding project to start using TypeScript in your k6 scripts.
+
+## Rationale
+
+While JavaScript is great for a myriad of reasons, one area where it fall short is type safety and developer ergonomics. It's perfectly possible to write JavaScript code that will look OK and behave OK until a certain condition forces the executor into a faulty branch.
+
+While it, of course, still is possible to shoot yourself in the foot with TypeScript as well, it's significantly harder. Without adding much overhead, TypeScript will:
+
+- Improve the ability to safely refactor your code.
+- Improve readability and maintainablity.
+- Allow you to drop a lot of the defensive code previously needed to make sure consumers are calling functions properly.
+
+
+## Prerequisites
+
+- [k6](https://k6.io/docs/getting-started/installation)
+- [NodeJS](https://nodejs.org/en/download/)
+- [Yarn](https://yarnpkg.com/getting-started/install) (optional)
+
+## Installation
+
+**Creating a project from the `template-typescript` template**
+
+To generate a TypeScript project that includes the dependencies and initial configuration, navigate to the [template-typescript](https://github.com/k6io/template-typescript) page and click **Use this template**.
+
+  ![](assets/use-this-template-button.png)
+
+
+**Install dependencies**
+
+Clone the generated repository on your local machine, move to the project root folder and install the dependencies defined in [`package.json`](./package.json)
+
+```bash
+$ yarn install
+```
+
+## Running the test
+
+To run a test written in TypeScript, we first have to transpile the TypeScript code into JavaScript and bundle the project
+
+```bash
+$ yarn webpack
+```
+
+This command creates the final test files to the `./dist` folder.
+
+Once that is done, we can run our script the same way we usually do, for instance:
+
+```bash
+$ k6 run dist/test1.js
+```
+
+### Transpiling and Bundling
+
+By default, k6 can only run ES5.1 JavaScript code. To use TypeScript, we have to set up a bundler that converts TypeScript to JavaScript code. 
+
+This project uses `Babel` and `Webpack` to bundle the different files - using the configuration of the [`webpack.config.js`](./webpack.config.js) file.
+
+If you want to learn more, check out [Bundling node modules in k6](https://k6.io/docs/using-k6/modules#bundling-node-modules).

assets/ts-js-k6.png

@@ -0,0 +1,24 @@
+{
+  "name": "typescript",
+  "version": "1.0.0",
+  "main": "index.js",
+  "repository": "ssh://[email protected]/k6io/example-typescript.git",
+  "author": "Simon Aronsson <[email protected]>",
+  "license": "MIT",
+  "dependencies": {
+    "@babel/core": "7.13.16",
+    "@babel/plugin-proposal-class-properties": "7.13.0",
+    "@babel/plugin-proposal-object-rest-spread": "7.13.8",
+    "@babel/preset-env": "7.13.15",
+    "@babel/preset-typescript": "7.13.0",
+    "@types/k6": "~0.32.0",
+    "@types/webpack": "5.28.0",
+    "babel-loader": "8.2.2",
+    "typescript": "4.2.4",
+    "webpack": "5.35.1"
+  },
+  "devDependencies": {
+    "webpack-cli": "4.6.0",
+    "clean-webpack-plugin": "4.0.0-alpha.0"
+  }
+}

assets/use-this-template-button.png

@@ -0,0 +1,16 @@
+import { sleep, check } from 'k6';
+import { Options } from 'k6/options';
+import http from 'k6/http';
+
+export let options:Options = {
+  vus: 50,
+  duration: '10s'
+};
+
+export default () => {
+  const res = http.get('https://test-api.k6.io');
+  check(res, {
+    'status is 200': () => res.status === 200,
+  });
+  sleep(1);
+};

package.json

@@ -0,0 +1,19 @@
+import { sleep, check } from 'k6';
+import { Options } from 'k6/options';
+
+/* @ts-ignore */
+import { randomIntBetween } from 'https://jslib.k6.io/k6-utils/1.1.0/index.js';
+import http from 'k6/http';
+
+export let options:Options = {
+  vus: 50,
+  duration: '10s'
+};
+
+export default () => {
+  const res = http.post('https://httpbin.org/status/400');
+  check(res, {
+    'status is 400': () => res.status === 400,
+  });
+  sleep(randomIntBetween(1,5));
+};

src/test1.ts

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "moduleResolution": "node",
+    "module": "commonjs",
+    "noEmit": true,
+    "allowJs": true,
+    "removeComments": true,
+
+    "strict": true,
+    "noImplicitAny": true,
+    "noImplicitThis": true,
+
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+
+    "skipLibCheck": true
+  }
+}

src/test2.ts

@@ -0,0 +1,35 @@
+const path = require('path');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin')
+
+module.exports = {
+  mode: 'production',
+  context: path.join(__dirname, 'src'),
+  entry: {
+    test1: './test1.ts',
+    test2: './test2.ts',
+  },
+  output: {
+    path: path.join(__dirname, 'dist'),
+    libraryTarget: 'commonjs',
+    filename: '[name].js',
+  },
+  resolve: {
+    extensions: ['.ts', '.js'],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.ts$/,
+        use: 'babel-loader',
+      },
+    ],
+  },
+  target: 'web',
+  externals: /^(k6|https?\:\/\/)(\/.*)?/,
+  stats: {
+    colors: true,
+  },
+  plugins: [
+    new CleanWebpackPlugin(),
+  ],
+}