TypeScript Support

[ampersarnie]

Description

Resolves #78 - As Big Bite begin moving towards utilising TypeScript further across the board, we need a TS solution that works with our existing build system. This introduces a number of challenges around creating an accessible and common setup amongs all users of the build-tools that works seemlessly not only with the existing setup, but also the existing workflow across local development, CI/CD and other processes. This PR aims to achieve this by providing a default and bundled TypeScript configuration that acts as a common default amongs any TypeScript code that is written within Big Bite that belongs to a WordPress project.

TypeScript Default Config and Rules

The aim for bundling the config was to provide a sane setup for each developer that is working within TypeScript that will also provide consistency across all projects that utilise it.

The configuration for TypeScript can be found in the configs/tsconfig.json file.

There are also some image definition types that can be found in the configs/tsconfig/images.d.ts file.

An addition of TypeScript ESLint has also been included to ensure that we've support for ESLint within our builds.

Project tsconfig.json

As part of the aim is to provide a bundled configuration file, the tsconfig.json is defined within the project and can be found amongs other related configuration files within the /configs directory. The config file aims to provide a sane standard as recommended in the issue comment here.

To ensure the config file is visible by IDEs and any other related software for error and syntax highlighting, you need to define and extend the tsconfig.json within the root of your project.

{
  "extends": "@bigbite/build-tools/configs/tsconfig"
}

Customising tsconfig.json

There are a number of situations where you may need to customise or extend the tsconfig.json. This can be easily achieved by utilising the extends property and pointing to the build-tools config to use as the base.

{
  "extends": "@bigbite/build-tools/configs/tsconfig",
  "include": [
    "src/entrypoints",
    "src/types"
  ],
}

Please note that extending has additional effects when implementing include and exclude. Read the documentation for extends here.

Alternatively, if you need an entirely different tsconfig.json than the one that is provided, a tsconfig.json that is placed in the root of the project will be picket up by the build-tools, whether it is extended or not.

Installing from branch

If you want to test this branch, you can install to your plugin with the following:

npm i "https://github.com/bigbite/build-tools#feature/typescript-support"

Change Log

• Adds ts-loader and dts-loader to webpack rules.
• Adds .ts and .tsx file extensions to all issuers and required extension references.
• Updates javscript file extension rule tests to be simpler.
• Updates test-plugin example to include some types.
• Adds @typescript-eslint parser, plugin and recommended rules.
• Adds tsconfig.json

[ampersarnie]

after fighting with the example site a little

@jrmd have there been any issues around the example site that need looking into?

[jrmd]

@ampersarnie the inc folders where missing; so it couldn't make the asset-settings folder :) got it there by creating them manually :D

[jaymcp]

That's being tracked in https://github.com/bigbite/build-tools/issues/92