docs(devs-infra): add tabs for js/ts and shell (#3807)

Using `@docusaurus/remark-plugin-npm2yarn` and `docusaurus-remark-plugin-tab-blocks`

website/docs/debugging.md

@@ -17,14 +17,10 @@ export TS_JEST_LOG=ts-jest.log
 
 **Windows**
 
-Command Prompt (cmd)
-
-```
+```Command Prompt tab
 set TS_JEST_LOG=ts-jest.log
 ```
 
-PowerShell
-
-```
+```PowerShell tab
 $env:TS_JEST_LOG = 'ts-jest.log'
 ```

website/docs/getting-started/installation.md

@@ -7,18 +7,10 @@ title: Installation
 
 You can install `ts-jest` and dependencies all at once with one of the following commands.
 
-#### NPM
-
-```sh
+```bash npm2yarn
 npm install --save-dev jest typescript ts-jest @types/jest
 ```
 
-#### Yarn
-
-```sh
-yarn add --dev jest typescript ts-jest @types/jest
-```
-
 :::tip
 
 Tip: If you get an error with the following `npm` commands such as `npx: command not found`, you can replace `npx XXX` with `node node_modules/.bin/XXX` from the root of your project.
@@ -34,15 +26,11 @@ To make it transpile TypeScript with `ts-jest`, we will need to create a configu
 
 `ts-jest` can create the configuration file for you automatically:
 
-#### NPM
-
-```sh
+```npm tab
 npx ts-jest config:init
 ```
 
-#### Yarn
-
-```sh
+```Yarn tab
 yarn ts-jest config:init
 ```
 

website/docs/getting-started/options.md

@@ -8,27 +8,8 @@ title: Options
 All `ts-jest` specific options can be defined in Jest `transform` config object in the `package.json` file of your project,
 or through a `jest.config.js`, or `jest.config.ts` file.
 
-```json
-// package.json
-{
-  // [...]
-  "jest": {
-    "transform": {
-      "<regex_match_files>": [
-        "ts-jest",
-        {
-          // ts-jest configuration goes here
-        }
-      ]
-    }
-  }
-}
-```
-
-Or through JavaScript:
-
-```js
-// jest.config.js
+```js tab
+/** @type {import('ts-jest').JestConfigWithTsJest} */
 module.exports = {
   // [...]
   transform: {
@@ -42,44 +23,36 @@ module.exports = {
 }
 ```
 
-:::tip
+```ts tab
+import type { JestConfigWithTsJest } from './types'
 
-To utilize IDE suggestions, you can use `JSDoc` comments to provide suggested `ts-jest` configs for your Jest config:
-
-```js
-/** @type {import('ts-jest').JestConfigWithTsJest} */
-module.exports = config = {
+const jestConfig: JestConfigWithTsJest = {
   // [...]
   transform: {
     '<regex_match_files>': [
       'ts-jest',
       {
-        // ts-jest configuration goes here and your IDE will suggest which configs when typing
+        // ts-jest configuration goes here
       },
     ],
   },
 }
 ```
 
-:::
-
-Or through TypeScript (if `ts-node` is installed):
-
-```ts
-// jest.config.ts
-import type { JestConfigWithTsJest } from 'ts-jest'
-
-const config: JestConfigWithTsJest = {
-  transform: {
-    '<regex_match_files>': [
-      'ts-jest',
-      {
-        // ts-jest configuration goes here
-      },
-    ],
-  },
+```JSON tab
+{
+  // [...]
+  "jest": {
+    "transform": {
+      "<regex_match_files>": [
+        "ts-jest",
+        {
+          // ts-jest configuration goes here
+        }
+      ]
+    }
+  }
 }
-export default config
 ```
 
 :::important

website/docs/getting-started/options/astTransformers.md

@@ -16,8 +16,8 @@ The option is `astTransformers` and it allows ones to specify which 3 types of T
 
 #### Basic Transformers
 
-```js
-// jest.config.js
+```js tab
+/** @type {import('ts-jest').JestConfigWithTsJest} */
 module.exports = {
   // [...]
   transform: {
@@ -33,8 +33,27 @@ module.exports = {
 }
 ```
 
-```json
-// OR package.json
+```ts tab
+import type { JestConfigWithTsJest } from './types'
+
+const jestConfig: JestConfigWithTsJest = {
+  // [...]
+  transform: {
+    '<regex_match_files>': [
+      'ts-jest',
+      {
+        astTransformers: {
+          before: ['my-custom-transformer'],
+        },
+      },
+    ],
+  },
+}
+
+export default jestConfig
+```
+
+```JSON tab
 {
   // [...]
   "jest": {
@@ -54,8 +73,8 @@ module.exports = {
 
 #### Configuring transformers with options
 
-```js
-// jest.config.js
+```js tab
+/** @type {import('ts-jest').JestConfigWithTsJest} */
 module.exports = {
   // [...]
   transform: {
@@ -76,8 +95,32 @@ module.exports = {
 }
 ```
 
-```json
-// OR package.json
+```ts tab
+import type { JestConfigWithTsJest } from './types'
+
+const jestConfig: JestConfigWithTsJest = {
+  // [...]
+  transform: {
+    '<regex_match_files>': [
+      'ts-jest',
+      {
+        astTransformers: {
+          before: [
+            {
+              path: 'my-custom-transformer-that-needs-extra-opts',
+              options: {}, // extra options to pass to transformers here
+            },
+          ],
+        },
+      },
+    ],
+  },
+}
+
+export default jestConfig
+```
+
+```JSON tab
 {
   // [...]
   "jest": {

website/docs/getting-started/options/babelConfig.md

@@ -14,8 +14,8 @@ The option is `babelConfig` and it works pretty much as the `tsconfig` option, e
 
 #### Use default `babelrc` file
 
-```js
-// jest.config.js
+```js tab
+/** @type {import('ts-jest').JestConfigWithTsJest} */
 module.exports = {
   // [...]
   transform: {
@@ -29,7 +29,25 @@ module.exports = {
 }
 ```
 
-```json
+```ts tab
+import type { JestConfigWithTsJest } from './types'
+
+const jestConfig: JestConfigWithTsJest = {
+  // [...]
+  transform: {
+    '<regex_match_files>': [
+      'ts-jest',
+      {
+        babelConfig: true,
+      },
+    ],
+  },
+}
+
+export default jestConfig
+```
+
+```JSON tab
 // OR package.json
 {
   // [...]
@@ -50,8 +68,8 @@ module.exports = {
 
 The path should be relative to the current working directory where you start Jest from. You can also use `\<rootDir>` in the path, or use an absolute path (this last one is strongly not recommended).
 
-```js
-// jest.config.js
+```js tab
+/** @type {import('ts-jest').JestConfigWithTsJest} */
 module.exports = {
   // [...]
   transform: {
@@ -65,23 +83,25 @@ module.exports = {
 }
 ```
 
-```js
-// OR jest.config.js with require for babelrc
-module.exports = {
+```ts tab
+import type { JestConfigWithTsJest } from './types'
+
+const jestConfig: JestConfigWithTsJest = {
   // [...]
   transform: {
     '<regex_match_files>': [
       'ts-jest',
       {
-        babelConfig: require('./babelrc.test.js'),
+        babelConfig: 'babelrc.test.js',
       },
     ],
   },
 }
+
+export default jestConfig
 ```
 
-```json
-// OR package.json
+```JSON tab
 {
   // [...]
   "jest": {
@@ -97,12 +117,48 @@ module.exports = {
 }
 ```
 
+or importing directly the config file:
+
+```js tab
+/** @type {import('ts-jest').JestConfigWithTsJest} */
+module.exports = {
+  // [...]
+  transform: {
+    '<regex_match_files>': [
+      'ts-jest',
+      {
+        babelConfig: require('./babelrc.test.js'),
+      },
+    ],
+  },
+}
+```
+
+```ts tab
+import type { JestConfigWithTsJest } from './types'
+import babelConfig from './babelrc.test.js'
+
+const jestConfig: JestConfigWithTsJest = {
+  // [...]
+  transform: {
+    '<regex_match_files>': [
+      'ts-jest',
+      {
+        babelConfig,
+      },
+    ],
+  },
+}
+
+export default jestConfig
+```
+
 #### Inline compiler options
 
 Refer to the [Babel options](https://babeljs.io/docs/en/next/options) to know what can be used there.
 
-```js
-// jest.config.js
+```js tab
+/** @type {import('ts-jest').JestConfigWithTsJest} */
 module.exports = {
   // [...]
   transform: {
@@ -119,8 +175,28 @@ module.exports = {
 }
 ```
 
-```json
-// OR package.json
+```ts tab
+import type { JestConfigWithTsJest } from './types'
+
+const jestConfig: JestConfigWithTsJest = {
+  // [...]
+  transform: {
+    '<regex_match_files>': [
+      'ts-jest',
+      {
+        babelConfig: {
+          comments: false,
+          plugins: ['@babel/plugin-transform-for-of'],
+        },
+      },
+    ],
+  },
+}
+
+export default jestConfig
+```
+
+```JSON tab
 {
   // [...]
   "jest": {