Merge branch '263-new-job-typescript-compiler' into latest

vue

wordlists

Wordlists

transpiling

Transpiling

transpiler

Transpiler

transpiled

Transpiled

unhandled

Unhandled

 No newline at end of file

## Objective

A job transpiling your typescript code into JavaScript using

[TypeScript compiler](https://www.npmjs.com/package/typescript).

## How to use it

1. Add this job URL inside the `include` list of your `.gitlab-ci.yml` file (see the [quick setup](/use-the-hub/#quick-setup)). You can specify [a fixed version](#changelog) instead of `latest`.

    ```yaml

      - remote: 'https://jobs.r2devops.io/latest/typescript_compile.yml'

    ```

2. Choose an option

    !!! tip "Plug and play available !"

      This job is **plug and play** 🚀, see the Option 1

      Other options need some configuration.

    ??? summary "Option 1: Choose the **plug and play** 🚀 mode"

      You don't have much to do, you can already **go to the next step**!<br/>

      In case you want the transpiler to work on a specific folder, consider 

      updating the variable `PROJECT_ROOT` with the target folder path.<br/><br/>

      This job is using the command `tsc --init` as a **default config** file.

    ??? summary "Option 2: Have your own configuration"

      If you already have `tsconfig.json` or `jsconfig.json` at the root of your 

      project, you **don't have anything to do**! 🚀 <br/>

      If the location of your configuration file is somewhere else in the project,

      update the variable `PROJECT_ROOT` with the directory containing the config file.

2. If you need to customize the job (stage, variables, ...) 👉 check the [jobs

   customization](/use-the-hub/#jobs-customization)

3. Well done, your job is ready to work ! 😀

## Job details

* Job name: `typescript_compile`

* Docker image:

  [`alpine:3.13`](https://hub.docker.com/_/alpine)

* Default stage: `build`

* When: `always`

### Variables

| Name | Description | Default |

| ---- | ----------- | ------- |

| `PROJECT_ROOT` <img width=100/> | The directory containing your project and `tsconfig.json` or `jsconfig.json` <img width=175/>| ` ` <img width=100/>|

| `TARGET_OUTPUT` | The output directory of the transpiled code | `dist` |

| `NODE_VERSION` | The used version of `Node` (see [versions](https://nodejs.org/en/download/releases/)) | `14.16.0-r0` |

| `TYPESCRIPT_VERSION` | The used version of `TypeScript` (see [versions](https://www.npmjs.com/package/typescript)) | `4.2.3` |

### Artifacts

Typescript compiler results are available as artifact.

!!! warning

    It's also 

    [exposed as](https://docs.gitlab.com/ee/ci/yaml/#artifactsexpose_as){:target="_blank"} `Typescript compile` in merge requests.

    Exposition of artifact currently works only if you keep `TARGET_OUTPUT` as

    default value because of 

    [this issue from Gitlab](https://gitlab.com/gitlab-org/gitlab/-/issues/37129){:target="_blank"}.

    As soon as the issue will be fixed, exposed artifacts will be available

    with any output location.

name: "typescript_compile"

description: "A simple job to transpile typescript easily"

default_stage: "build"

icon: "🌀"

maintainer: "Protocole"

license: "MIT"

images:

  "alpine": "3.13"

tools:

  "node": "${NODE_VERSION}"

  "typescript": "${TYPESCRIPT_VERSION}"

 No newline at end of file

# Job from R2Devops hub --> r2devops.io

stages:

  - build

typescript_compile:

  image:

    name: alpine:3.13

  stage: build

  variables:

    # The folder where is tsconfig.json

    PROJECT_ROOT: ""

    # Directory where the code should be

    TARGET_OUTPUT: "dist"

    # Node version

    NODE_VERSION: "14.16.0-r0"

    # Typescript package version

    TYPESCRIPT_VERSION: "4.2.3"

  script:

    - apk add npm=${NODE_VERSION}

    - npm install -g typescript@${TYPESCRIPT_VERSION}

    # In case the user has a package-lock.json, install modules

    # Necessary if the user uses Typescript environnement

    # see: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html#tsconfig-bases

    - if [ -f "${CI_PROJECT_DIR}/${PROJECT_ROOT}/package-lock.json" ]; then npm install; fi

    # In case the user doesn't have a valid tsconfig.json

    # We use the initialize from TSC to do so

    - cd ${CI_PROJECT_DIR}/${PROJECT_ROOT}

    - if [ ! -f "${CI_PROJECT_DIR}/${PROJECT_ROOT}/tsconfig.json" ] && [ ! -f "${CI_PROJECT_DIR}/${PROJECT_ROOT}/jsconfig.json" ]; then tsc --init; fi

    - tsc -p "${CI_PROJECT_DIR}/${PROJECT_ROOT}/tsconfig.json" --outDir "${CI_PROJECT_DIR}/${TARGET_OUTPUT}"

  artifacts:

    expose_as: "typescript compile"

    paths:

      - ${CI_PROJECT_DIR}/${TARGET_OUTPUT}

      - "dist/"

    when: always

 No newline at end of file