feature(gatsby): Support TypeScript by default by compiling TS files #23547

blainekasten · 2020-04-28T03:05:00Z

Description

🎉We are working on supporting TypeScript as a first class citizen within Gatsby 🎉
We already have the gatsby-plugin-typescript plugin that adds compilation support for .ts(x) files. We've decided that as we add more support for TypeScript, we want to do it via the plugin. So our first step is to make that plugin part of the default gatsby set up.

This PR does the following:

Adds gatsby-plugin-typescript to the loaded plugins with no custom options if not provided by the users gatsby-config.
Defers to the user's gatsby-config if it includes a gatsby-plugin-typescript entry.

Documentation

Docs exist here: https://www.gatsbyjs.org/packages/gatsby-plugin-typescript/
Do we want to add some banner that this is auto-included in gatsby and that customization can be done by adding it to their config?

Related Issues

#18983

wardpeet · 2020-04-28T08:23:45Z

packages/gatsby/src/bootstrap/load-plugins/__tests__/load-plugins.js

+
+      let plugins = await loadPlugins(config)
+
+      plugins = replaceFieldsThatCanVary(plugins)


Is it possible to create a different helper function here? The one that exists now also check paths property and might cause weird test failures when we might move more plugins as a default.

I'm not sure. Do you have any suggestions? It seems to work right now.

It's the same setup we have for gatsby-source-page-creators

maybe replaceFieldsThatCanVary should also just do more checks before trying to do pluginOptions.path sanitization (apply it only for gatsby-plugin-page-creator)?

But this doesn't seem to be concern of this pull request?

wardpeet

Looks good to me! I would ship this PR without any of the modifications I'm going to list here as it's more tech depth and might complicate the PR review a bit more.

Maybe in a follow-up PR we could clean up the load-plugins function a bit.

Refactor config.plugins check to only happen once. Instead of x amount of times. I would slap a default [] on it.
extract the require.resolve and plugin find check into a helper function so it can be re-used.
Move default plugins to an array so we can loop through it instead of duplicating these code paths.

packages/gatsby/src/bootstrap/load-plugins/load.js

packages/gatsby/src/bootstrap/load-plugins/__tests__/load-plugins.js

blainekasten · 2020-04-28T19:04:59Z

@wardpeet great idea, I created a clubhouse ticket to follow up on that refactor work

DSchau

Looks great -- we'll definitely want to document this (gatsby-plugin-typescript documentation should change), and I honestly think this is shoutable with a blog post, as well.

cc @hashimwarren

packages/gatsby/src/bootstrap/load-plugins/__tests__/load-plugins.js

packages/gatsby/src/bootstrap/load-plugins/load.js

pieh

Looks good, this is exciting!

pieh · 2020-04-28T20:23:33Z

Maybe in a follow-up PR we could clean up the load-plugins function a bit.

Refactor config.plugins check to only happen once. Instead of x amount of times. I would slap a default [] on it.
extract the require.resolve and plugin find check into a helper function so it can be re-used.
Move default plugins to an array so we can loop through it instead of duplicating these code paths.

@wardpeet But is this something that we will actually ever do? We do plugins iterations almost any time we call apiRunnerNode (like we do this for each created node for each plugin implementing onCreateNode), so I think while this is good idea in general - if there are so many plugins that this would cause problems - the few extra loops we run once (when loading config) would be least of our worries?

Is the extra abstraction worth doing here? Current code is pretty straight forward I think and arguably might be easier to reason with than the added utilities which would have their own API etc

Actually, we should likely make some docs adjustments in this PR as well before merging this in

pieh

I think code-wise this is good to go. However we likely need some documentation updates as well?

LekoArts · 2020-04-30T13:09:24Z

Documentation should also include the note that you need to add it to your own gatsby-config.js so that you add the options that the plugin accepts.

A "Using TypeScript" doc then would only prompt you do init a tsconfig and install typescript + @types

AishaBlake

This is looking great. Thanks for talking with me about how to document this change, @blainekasten! I've left a few comments. Could you also add the TypeScript doc to the sidebar under Reference Guides? You'll need to add it to doc-links.yaml.

Everything that follows are suggestions and shouldn't block this PR. For the reference guide, I'd call out that people interested in trying TypeScript don't need to switch their whole app over all at once. (I've never actually done this on an app in production. You're a much better person to guide folks on how to move an existing app to TypeScript.) I'd also talk a little bit about why someone might want to use TypeScript with their Gatsby site. This needn't be more than a sentence or two. I would imagine it could do double duty and also touch on why we're supporting TypeScript by default.

packages/gatsby-plugin-typescript/README.md

docs/docs/typescript.md

Co-authored-by: Aisha Blake <[email protected]>

…/gatsbyjs/gatsby into typescript-by-default/compile-ts

blainekasten · 2020-05-01T18:26:29Z

@AishaBlake I gave it another pass and included all of your suggestions. Want to take another gander?

made updates

AishaBlake

I tweaked the wording of one sentence to use "you" as the pronoun per the style guide. This looks good!

AishaBlake · 2020-05-01T19:43:04Z

docs/docs/typescript.md

+
+## Introductory paragraph
+
+[TypeScript](https://www.typescriptlang.org/) is a JavaScript superset which extends the language to include type definitions allowing codebases to be statically checked for soundness. Gatsby provides an integrated experience out of the box, similar to an IDE. If you are new to TypeScript, adoption can _and should_ be incremental. Since Gatsby natively supports JavaScript and TypeScript, you can change files from .js to .tsx at any point to start adding types and gaining the benefits of a type system.


🔥 Yes! This hits all the points I had in mind!

orta · 2020-05-07T20:59:25Z

docs/docs/typescript.md

+If you are new to TypeScript, check out these other resources to learn more:
+
+- [TypeScript Documentation](https://www.typescriptlang.org/docs/handbook/basic-types.html)
+- [TypeScript Playground (Try it out!)](https://www.typescriptlang.org/play/index.html)


Gatsby's API is available in the Playground, so this could be more like this link instead

RIP21 · 2020-05-07T21:22:32Z

BTW. Since you make TS as a first-class citizen etc. Please take a look and address this issue.
#16310

Integrating GraphQL Codegen into Gatsby or making an official plugin for it will be an awesome thing too because that will make Gatsby e2e typed automatically.

Please address that if you really want THE BEST dev experience for Typescript projects.

gatsby-plugin-typescript is included in Gatsby's default configuration see gatsbyjs/gatsby#23547

…atsbyjs#23547) * feature(gatsby): Support TypeScript by default by compiling TS files * add a test to ensure we arent adding an extra gatsby-plugin-typescript * Make a TypeScript file in gatsby-starter * Add TypeScript example to blog starter * Update Using Typescript example * update gatsby-plugin-typescript README.md * Add Basic TypeScript example * Update packages/gatsby-plugin-typescript/README.md Co-authored-by: Aisha Blake <[email protected]> * Update packages/gatsby-plugin-typescript/README.md Co-authored-by: Aisha Blake <[email protected]> * Add more to the TS docs * Add docs to sidebar * Use you as the pronoun * Fix e2e test Co-authored-by: Aisha Blake <[email protected]>

feature(gatsby): Support TypeScript by default by compiling TS files

183c3fd

blainekasten requested a review from a team as a code owner April 28, 2020 03:05

wardpeet reviewed Apr 28, 2020

View reviewed changes

packages/gatsby/src/bootstrap/load-plugins/load.js Outdated Show resolved Hide resolved

pieh reviewed Apr 28, 2020

View reviewed changes

packages/gatsby/src/bootstrap/load-plugins/__tests__/load-plugins.js Show resolved Hide resolved

add a test to ensure we arent adding an extra gatsby-plugin-typescript

d548ed0

DSchau previously approved these changes Apr 28, 2020

View reviewed changes

pieh reviewed Apr 28, 2020

View reviewed changes

packages/gatsby/src/bootstrap/load-plugins/__tests__/load-plugins.js Show resolved Hide resolved

pieh reviewed Apr 28, 2020

View reviewed changes

packages/gatsby/src/bootstrap/load-plugins/load.js Show resolved Hide resolved

pieh previously approved these changes Apr 28, 2020

View reviewed changes

pieh previously requested changes Apr 28, 2020

View reviewed changes

Make a TypeScript file in gatsby-starter

d706214

blainekasten dismissed DSchau’s stale review via d706214 April 30, 2020 21:22

blainekasten added 3 commits April 30, 2020 16:25

Add TypeScript example to blog starter

762e585

Update Using Typescript example

41b1354

update gatsby-plugin-typescript README.md

d3561ab

blainekasten requested a review from a team as a code owner April 30, 2020 21:30

Add Basic TypeScript example

d804992

AishaBlake previously requested changes May 1, 2020

View reviewed changes

packages/gatsby-plugin-typescript/README.md Outdated Show resolved Hide resolved

packages/gatsby-plugin-typescript/README.md Outdated Show resolved Hide resolved

docs/docs/typescript.md Show resolved Hide resolved

blainekasten and others added 5 commits May 1, 2020 13:19

Update packages/gatsby-plugin-typescript/README.md

9e760f8

Co-authored-by: Aisha Blake <[email protected]>

Update packages/gatsby-plugin-typescript/README.md

f7d5704

Co-authored-by: Aisha Blake <[email protected]>

Add more to the TS docs

f50c61a

Merge branch 'typescript-by-default/compile-ts' of https://github.com…

5d293d1

…/gatsbyjs/gatsby into typescript-by-default/compile-ts

Add docs to sidebar

2d79b05

blainekasten requested a review from a team as a code owner May 1, 2020 18:25

Use you as the pronoun

4e89725

AishaBlake previously approved these changes May 1, 2020

View reviewed changes

merge master

2e74c8e

blainekasten dismissed AishaBlake’s stale review via 2e74c8e May 5, 2020 17:27

Fix e2e test

3a5795f

blainekasten merged commit 1933230 into master May 5, 2020

delete-merged-branch bot deleted the typescript-by-default/compile-ts branch May 5, 2020 18:43

orta reviewed May 7, 2020

View reviewed changes

This was referenced May 8, 2020

fix(docs): typescript - 404 #23920

Merged

fix(docs): add trainling slash to doc-links.yaml #23921

Merged

hasparus mentioned this pull request May 10, 2020

Convert to TypeScript system-ui/theme-ui#668

Closed

32 tasks

veksen mentioned this pull request May 12, 2020

chore: remove now useless gatsby-plugin-typescript the-programmers-hangout/website#243

Merged

fafnirical added a commit to fafnirical/developing.ninja that referenced this pull request May 24, 2020

refactor: remove gatsby-plugin-typescript

33c5ff7

gatsby-plugin-typescript is included in Gatsby's default configuration see gatsbyjs/gatsby#23547

This was referenced Sep 24, 2020

[Snyk] Security upgrade gatsby-plugin-styletron from 3.0.5 to 5.0.0 saurabharch/gatsby#407

Open

[Snyk] Security upgrade gatsby-plugin-styletron from 3.0.5 to 5.0.0 ajesse11x/gatsby#448

Open

This was referenced Sep 1, 2021

[Snyk] Fix for 2 vulnerabilities saurabharch/gatsby#826

Open

[Snyk] Fix for 3 vulnerabilities nidhi42/gatsby#138

Open

snyk-bot mentioned this pull request Jun 9, 2022

[Snyk] Security upgrade gatsby-plugin-styletron from 3.0.5 to 5.0.0 ajesse11x/gatsby#1331

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feature(gatsby): Support TypeScript by default by compiling TS files #23547

feature(gatsby): Support TypeScript by default by compiling TS files #23547

blainekasten commented Apr 28, 2020 •

edited by dandv

Loading

wardpeet Apr 28, 2020 •

edited

Loading

blainekasten Apr 28, 2020

blainekasten Apr 28, 2020

pieh Apr 28, 2020

wardpeet left a comment

blainekasten commented Apr 28, 2020

DSchau left a comment

pieh left a comment

pieh commented Apr 28, 2020 •

edited

Loading

pieh left a comment

LekoArts commented Apr 30, 2020 •

edited

Loading

AishaBlake left a comment

blainekasten commented May 1, 2020

AishaBlake left a comment

AishaBlake May 1, 2020

orta May 7, 2020 •

edited

Loading

RIP21 commented May 7, 2020 •

edited

Loading


		let plugins = await loadPlugins(config)

		plugins = replaceFieldsThatCanVary(plugins)


		## Introductory paragraph

		[TypeScript](https://www.typescriptlang.org/) is a JavaScript superset which extends the language to include type definitions allowing codebases to be statically checked for soundness. Gatsby provides an integrated experience out of the box, similar to an IDE. If you are new to TypeScript, adoption can _and should_ be incremental. Since Gatsby natively supports JavaScript and TypeScript, you can change files from .js to .tsx at any point to start adding types and gaining the benefits of a type system.

feature(gatsby): Support TypeScript by default by compiling TS files #23547

feature(gatsby): Support TypeScript by default by compiling TS files #23547

Conversation

blainekasten commented Apr 28, 2020 • edited by dandv Loading

Description

Documentation

Related Issues

wardpeet Apr 28, 2020 • edited Loading

Choose a reason for hiding this comment

blainekasten Apr 28, 2020

Choose a reason for hiding this comment

blainekasten Apr 28, 2020

Choose a reason for hiding this comment

pieh Apr 28, 2020

Choose a reason for hiding this comment

wardpeet left a comment

Choose a reason for hiding this comment

blainekasten commented Apr 28, 2020

DSchau left a comment

Choose a reason for hiding this comment

pieh left a comment

Choose a reason for hiding this comment

pieh commented Apr 28, 2020 • edited Loading

pieh left a comment

Choose a reason for hiding this comment

LekoArts commented Apr 30, 2020 • edited Loading

AishaBlake left a comment

Choose a reason for hiding this comment

blainekasten commented May 1, 2020

AishaBlake left a comment

Choose a reason for hiding this comment

AishaBlake May 1, 2020

Choose a reason for hiding this comment

orta May 7, 2020 • edited Loading

Choose a reason for hiding this comment

RIP21 commented May 7, 2020 • edited Loading

blainekasten commented Apr 28, 2020 •

edited by dandv

Loading

wardpeet Apr 28, 2020 •

edited

Loading

pieh commented Apr 28, 2020 •

edited

Loading

LekoArts commented Apr 30, 2020 •

edited

Loading

orta May 7, 2020 •

edited

Loading

RIP21 commented May 7, 2020 •

edited

Loading