Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TypeScript Support #90

Merged
merged 21 commits into from
Jul 30, 2023
Merged

TypeScript Support #90

merged 21 commits into from
Jul 30, 2023

Conversation

ampersarnie
Copy link
Member

@ampersarnie ampersarnie commented Jul 21, 2023

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 ampersarnie changed the title Typescript Support TypeScript Support Jul 21, 2023
@ampersarnie ampersarnie marked this pull request as ready for review July 25, 2023 08:57
@ampersarnie ampersarnie requested a review from jrmd July 25, 2023 09:12
@jaymcp jaymcp self-requested a review July 25, 2023 09:30
Copy link
Member

@jaymcp jaymcp left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Works well on my sample Typescript project

Copy link
Member

@jrmd jrmd left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested this and after fighting with the example site a little seems to be working great compiling TS no problem :D

@ampersarnie
Copy link
Member Author

after fighting with the example site a little

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

@jrmd
Copy link
Member

jrmd commented Jul 28, 2023

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

@jaymcp
Copy link
Member

jaymcp commented Jul 28, 2023

That's being tracked in #92

@ampersarnie ampersarnie merged commit 93ac645 into release/1.3 Jul 30, 2023
@ampersarnie ampersarnie mentioned this pull request Jan 26, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Status: Done
Development

Successfully merging this pull request may close these issues.

3 participants