TypeScript (but without Babel) Installation

Configuring Recordings with a TypeScript project that doesn't currently use Babel

In these instructions, we describe how to set up a parallel build system using Babel so that your existing flow is unchanged. You can continue to use tsc to compile and run your TypeScript files the same as you've always done. You will add new build:codesee and run:codesee commands to your package.json specifically for CodeSee. They build your project and put the resulting artifacts into the /codesee directory.

Install the CodeSee package in your JavaScript or TypeScript app

In the terminal, run the install command for your package manager:

=== "npm"

```shell
npm install --save-dev @codesee/tracker@latest @codesee/babel-plugin-instrument@latest
```

=== "yarn"

```shell
yarn add --dev @codesee/tracker@latest @codesee/babel-plugin-instrument@latest
```

Install packages

Install the packages needed for Babel. This allows you to convert your TypeScript code into JavaScript using Babel.

=== "npm"

```shell
npm install --save-dev @babel/cli @babel/core @babel/plugin-proposal-class-properties @babel/plugin-proposal-object-rest-spread @babel/preset-env @babel/preset-typescript
```

=== "yarn"

```shell
yarn add --dev @babel/cli @babel/core @babel/plugin-proposal-class-properties @babel/plugin-proposal-object-rest-spread @babel/preset-env @babel/preset-typescript
```

Configure Babel

In the root of your project, create a .babelrc file with the following:

{
  "presets": [
    "@babel/preset-env",
    "@babel/typescript"
  ],
  "plugins": [
    "@babel/proposal-class-properties",
    "@babel/proposal-object-rest-spread",
    ["@codesee/instrument", { hosted: true }]
  ]
}

Create the build and start script commands

1. Add the following line to the scripts section of your package.json.

"build:codesee": "./node_modules/.bin/babel ./<your-top-level-dir> --out-dir ./codesee --extensions '.ts' --source-maps inline",

Replace <your-top-level-dir> with the top-level directory where your source code is stored.

2. Make a copy of the script command you normally use to run your project (often called start).
3. Name the copy start:codesee.
4. Modify start:codesee to look in the /codesee directory for your source code.
   For example if you normally have:

"scripts": {
  ...
  "start": "node ./dist"
  ...
}

Change it to:

"scripts": {
  ...
  "start": "node ./dist"
  "start:codesee": "node ./codesee"

  ...
}

Test it out

Try out your new Babel-based build system for CodeSee:

=== "npm"

```shell
npm run build:codesee
```
```shell
npm run start:codesee
```

=== "yarn"

```shell
yarn build:codesee
```
```shell
yarn start:codesee
```

And your program should be running the same as always, but with a purple CodeSee eye on the page as well.

Tidying up

You'll probably want to add codesee/ to your .gitignore file, so you don't accidentally commit any of the Babel build products from the /codesee directory.

Optional: configuration for large or high data applications

verbose: boolean

By default, CodeSee instruments your code in order to record the data value of every expression. This always results in the application running slower while recording, and in rare circumstances, it can cause a noticeable slow down even when not recording. If this slowdown is happening in your application, you can configure CodeSee to use verbose: false (or terse) mode. CodeSee will instrument your code less and capture less data (just the inputs and outputs of functions), but continue to provide the same tracing, side effects, and visualizations as always.

• Verbose mode (default): gets all of the runtime data but in some applications or recordings can cause a noticeable slowdown.
• Terse mode: captures less runtime data, but your recordings will be more performant. If you have a high data application, or are noticing slowdown, we recommend you try setting verbose: false.

"plugins": [
   ["@codesee/instrument", { "hosted": true, "verbose": false }],
   /* ... other dev plugins ... */
]

!!! note
This setting affects all developers working on the application. It requires a clean build.

Rebuild and run your app locally

Rebuild your app, wait a few seconds, and you should see the CodeSee button towards the top right of your screen. Congrats, you're ready to start using CodeSee!