feat(builder): optional typescript support #4557

kevinmarrec · 2018-12-14T19:33:49Z

Types of changes

Bug fix (a non-breaking change which fixes an issue)
New feature (a non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to change)

⚠ Warning ⚠ (EDIT AFTER MERGE)

➡ Please be aware of #4563 , which will likely make this merged PR outdated. ⬅

Description

What if Typescript Support what just about setting a boolean variable to true ? 😎

Prequel

This PR is highly inspired by #4406 made by @chanlito, so special thanks to him.

His current PR state alters Nuxt packages even for non-TS projects, and will also break projects using their own TypeScript module, that's why I implemented a new way to provide the TS support.

Existing TS projects will be able to either keep their own implementation of TypeScript support OR use this built-in optional one.

I. Usage 👨‍💻👩‍💻

// nuxt.config.js
export default {
  build: {
    typescript: true // 🚀
  }
}

II. How it works behind the scenes ? ⚙

When the typescript option is set to true, and only if is set true, it alters the following Nuxt internal packages :

✏ Config (@nuxt/config)
Accept .ts(x) files for plugins and middleware

✏ Builder (@nuxt/builder) & Common(@nuxt/common)
Watch & Use .ts(x) files to generate routes (layouts & pages)

✏ Webpack (@nuxt/webpack)
Resolve .ts(x) files through Babel, passing the typescript option value to the Nuxt babel preset

✏ Babel (@nuxt/babel-preset-app)
Retrieve the typescript option from the preset options to use the @babel/preset-typescript Babel TypeScript preset.

✏ CLI (@nuxt/cli) [Suggestion not implemented yet]
Warning or Error if tsconfig.json not found in the source folder, using the srcDir config option

III. What about the documentation ? 📖

I suggest a Typescript section in the documentation OR a How to use Typescript ? in the FAQ.

I will (or at least propose to) take the lead on it if my proposal is accepted and submit a PR regarding this documentation. This latter will talk about type definitions as well (#4164).

IV. What about a Nuxt TS project example ? 📁

An example highly similar to the one in #4406 will be proposed in a different PR if this proposal is accepted.

V. What about tests ? 🛠

A test fixture and an unit test are linked in the PR.

NOTE : Nuxt TS community is growing, we already have a bunch of developers who will be ready to test this support using nuxt-edge if this proposal gets accepted and merged 😇

@chanlito @hartmut-co-uk @husayt @ksnyde @NickBolles

Checklist:

My change requires a change to the documentation.
I have updated the documentation accordingly. (PR: #)
I have added tests to cover my changes (if not applicable, please state why)
All new and existing tests are passing.

TSX working 👍 Better tsconfig.json Update fixture typings Update fixture

kevinmarrec · 2018-12-14T19:39:12Z

It seems that I broke something around the Regex's regarding layouts & pages. I will fix it soon 💪.

EDIT : Fixed my mistakes regarding Regex's but now there is a Vue warning causing an error, I need to investigate.

NickBolles · 2018-12-14T20:10:18Z

@kevinmarrec Not sure if this is how this works, or if it would be an issue, but I think that this line will evaluate to true for typescript options for nuxt-ts-module

maybe do === true?

I can try to test if using nuxt from this PR will break anything in my app, but probably wont get to it for a few days.

kevinmarrec · 2018-12-14T20:13:42Z

@NickBolles Thank for finding this, it will indeed cause an issue, your suggestion or finding a different name for the option are 2 valid solutions.

NickBolles · 2018-12-14T20:16:32Z

Are we ever going to want to pass options to Typescript? We might want it to be an object at some point, for example to pass a location for the tsconfig or something. (which would conflict even more with other packages)

Could we simply move it to the build object? it kinda is a build-related option.

kevinmarrec · 2018-12-14T20:28:32Z

Yeah I think it could be moved to the build object.

EDIT : I checked the documentation, the build object is related to Webpack build so typescript has obviously its place here.

pi0

Generally changes (till know) LGTM. Nice works 😊

packages/builder/src/builder.js

pi0 · 2018-12-14T20:49:04Z

Also good decision to move it into build.typescript. I was going to tell that :))

kevinmarrec · 2018-12-14T20:51:41Z

@pi0 Thanks for your fast feedback ! I will take into account your code comments soon and I need to fix the unit test :).

packages/common/src/utils.js

codecov-io · 2018-12-15T00:39:58Z

Codecov Report

Merging #4557 into dev will increase coverage by 0.03%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##              dev    #4557      +/-   ##
==========================================
+ Coverage   91.07%   91.11%   +0.03%     
==========================================
  Files          61       61              
  Lines        2186     2195       +9     
  Branches      528      533       +5     
==========================================
+ Hits         1991     2000       +9     
  Misses        177      177              
  Partials       18       18

Impacted Files	Coverage Δ
packages/config/src/config/build.js	`85.71% <ø> (ø)`	⬆️
packages/babel-preset-app/src/index.js	`100% <100%> (ø)`	⬆️
packages/webpack/src/config/base.js	`95.5% <100%> (+0.15%)`	⬆️
packages/config/src/options.js	`94.44% <100%> (+0.07%)`	⬆️
packages/common/src/utils.js	`98.63% <100%> (ø)`	⬆️
packages/builder/src/builder.js	`96.51% <100%> (+0.08%)`	⬆️
packages/vue-renderer/src/spa-meta.js	`85.18% <0%> (-0.27%)`	⬇️
packages/vue-renderer/src/renderer.js	`95.6% <0%> (-0.03%)`	⬇️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 9961453...a05b8d2. Read the comment docs.

packages/builder/src/builder.js

kevinmarrec · 2018-12-15T00:46:22Z

Tests are green 🚥✔

galvez

You're right @kevinmarrec -- LGTM!

pi0 · 2018-12-15T06:50:38Z

Merging to get this enhancenment sooner with nuxt-edge. According to PR notes these items are delegated to other PRs:

Warning or Error if tsconfig.json not found in the source folder, using the srcDir config option
A Typescript section in the documentation OR a How to use Typescript ? in the FAQ.
Nuxt TS project example

husayt · 2018-12-16T02:29:29Z

This is not only a big time saver and very elegant solution, but is also a long overdue nuxt feature. After all, this is what nuxtjs is about, it has even TJS in the name NuxTJS. 😀

I am going to try nuxt hacketnews TS using this way and see what happens.

kevinmarrec · 2018-12-16T11:59:33Z

@husayt There are issues with Vue SFC's using the Babel approach, i'm not sure you'll be able to make your project work ^^

hartmut-co-uk · 2018-12-16T12:31:10Z

@husayt see/await #4563

kevinmarrec · 2018-12-16T13:08:43Z

I updated the description of this PR with a warning refering to #4563

chanlito · 2018-12-16T13:18:18Z

@kevinmarrec What is wrong with this PR?

kevinmarrec · 2018-12-16T13:31:40Z

@chanlito Check #4563 first commit (d8df0f4), Babel doesn't transpile well Vue SFC.

vlajos · 2019-04-06T17:57:30Z

@kevinmarrec
Should this

// nuxt.config.js
export default {
  build: {
    typescript: true // 🚀
  }
}

still work with 2.6.x ?

kevinmarrec · 2019-04-08T09:37:45Z

@vlajos No, there has been multiple refactors/breaking changes since this behavior, you can check https://nuxtjs.org/guide/typescript to understand properly how you enable TypeScript support in your Nuxt project :)

vlajos · 2019-04-08T21:38:31Z

@kevinmarrec I see. Thanks. I wanted to use it with the nuxtbuilder, but could not really make it working.
I wanted to migrate a nuxt+socket.io project. The basics are roughly like this: https://github.com/nuxt/nuxt.js/tree/dev/examples/with-sockets
Is this possible at all?

kevinmarrec · 2019-04-15T19:48:21Z

@vlajos Hm yes but partially, cause we don't have Nuxt Builder types defined, cause they are depending on too many things in core which also need their types to be defined, which would mean rewrite Nuxt in TypeScript.

If you need further help, join our Discord and I'll try to take some time to give you more guidelines for your migration.

vlajos · 2019-04-16T20:50:00Z

@kevinmarrec Thank you,but practically I gave it up. I wanted to use it mainly to be able to work with typeorm easier, but it seems that it works without typescript as well. Anyway when it becomes a little more supported I may give it another go.
Thanks again!

WIP

20683a6

TSX working 👍 Better tsconfig.json Update fixture typings Update fixture

Add Unit Test + fix Eslint regarding Component decorator

e89c26f

kevinmarrec force-pushed the typescript-support branch from a77a573 to e89c26f Compare December 14, 2018 19:42

Fix Regex

1d5f0a1

kevinmarrec changed the title ~~Provide optional TypeScript support through a new "typescript" config option~~ Provide optional TypeScript support through a new "typescript" config build option Dec 14, 2018

options.typescript => options.build.typescript

55cf1aa

kevinmarrec force-pushed the typescript-support branch from d8f64c3 to 55cf1aa Compare December 14, 2018 20:40

pi0 previously approved these changes Dec 14, 2018

View reviewed changes

packages/builder/src/builder.js Outdated Show resolved Hide resolved

packages/builder/src/builder.js Show resolved Hide resolved

Update and fix tests

9c1afa5

galvez reviewed Dec 15, 2018

View reviewed changes

packages/common/src/utils.js Outdated Show resolved Hide resolved

galvez changed the title ~~Provide optional TypeScript support through a new "typescript" config build option~~ feat: optional TypeScript support via build config option Dec 15, 2018

galvez changed the title ~~feat: optional TypeScript support via build config option~~ feat: optional TypeScript support via build option Dec 15, 2018

galvez assigned kevinmarrec Dec 15, 2018

galvez requested review from clarkdo, manniL and aldarund December 15, 2018 00:05

galvez changed the title ~~feat: optional TypeScript support via build option~~ feat: TypeScript support via build option Dec 15, 2018

galvez mentioned this pull request Dec 15, 2018

feat: add typescript support + an example #4406

Closed

3 tasks

Improvements 👍

6fd896b

kevinmarrec dismissed pi0’s stale review via 6fd896b December 15, 2018 00:23

Lint fix ✒

5176794

kevinmarrec commented Dec 15, 2018

View reviewed changes

packages/builder/src/builder.js Show resolved Hide resolved

galvez previously approved these changes Dec 15, 2018

View reviewed changes

add default typescript: false to build.js

a05b8d2

pi0 dismissed galvez’s stale review via a05b8d2 December 15, 2018 06:43

pi0 approved these changes Dec 15, 2018

View reviewed changes

pi0 merged commit 7145c1a into nuxt:dev Dec 15, 2018

pi0 changed the title ~~feat: TypeScript support via build option~~ feat(builder): optional typescript support Dec 15, 2018

kevinmarrec mentioned this pull request Dec 15, 2018

fix(ts): switch from babel preset to ts-loader #4563

Merged

6 tasks

kevinmarrec added the types label Jan 24, 2019

danielroe added the 2.x label Jan 18, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(builder): optional typescript support #4557

feat(builder): optional typescript support #4557

kevinmarrec commented Dec 14, 2018 •

edited

kevinmarrec commented Dec 14, 2018 •

edited

NickBolles commented Dec 14, 2018

kevinmarrec commented Dec 14, 2018 •

edited

NickBolles commented Dec 14, 2018 •

edited

kevinmarrec commented Dec 14, 2018 •

edited

pi0 left a comment

pi0 commented Dec 14, 2018

kevinmarrec commented Dec 14, 2018 •

edited

codecov-io commented Dec 15, 2018 •

edited

kevinmarrec commented Dec 15, 2018

galvez left a comment

pi0 commented Dec 15, 2018

husayt commented Dec 16, 2018

kevinmarrec commented Dec 16, 2018

hartmut-co-uk commented Dec 16, 2018 •

edited

kevinmarrec commented Dec 16, 2018

chanlito commented Dec 16, 2018

kevinmarrec commented Dec 16, 2018 •

edited

vlajos commented Apr 6, 2019

kevinmarrec commented Apr 8, 2019

vlajos commented Apr 8, 2019

kevinmarrec commented Apr 15, 2019

vlajos commented Apr 16, 2019

feat(builder): optional typescript support #4557

feat(builder): optional typescript support #4557

Conversation

kevinmarrec commented Dec 14, 2018 • edited

Types of changes

⚠ Warning ⚠ (EDIT AFTER MERGE)

Description

Prequel

I. Usage 👨‍💻👩‍💻

II. How it works behind the scenes ? ⚙

III. What about the documentation ? 📖

IV. What about a Nuxt TS project example ? 📁

V. What about tests ? 🛠

Checklist:

kevinmarrec commented Dec 14, 2018 • edited

NickBolles commented Dec 14, 2018

kevinmarrec commented Dec 14, 2018 • edited

NickBolles commented Dec 14, 2018 • edited

kevinmarrec commented Dec 14, 2018 • edited

pi0 left a comment

Choose a reason for hiding this comment

pi0 commented Dec 14, 2018

kevinmarrec commented Dec 14, 2018 • edited

codecov-io commented Dec 15, 2018 • edited

Codecov Report

kevinmarrec commented Dec 15, 2018

galvez left a comment

Choose a reason for hiding this comment

pi0 commented Dec 15, 2018

husayt commented Dec 16, 2018

kevinmarrec commented Dec 16, 2018

hartmut-co-uk commented Dec 16, 2018 • edited

kevinmarrec commented Dec 16, 2018

chanlito commented Dec 16, 2018

kevinmarrec commented Dec 16, 2018 • edited

vlajos commented Apr 6, 2019

kevinmarrec commented Apr 8, 2019

vlajos commented Apr 8, 2019

kevinmarrec commented Apr 15, 2019

vlajos commented Apr 16, 2019

kevinmarrec commented Dec 14, 2018 •

edited

kevinmarrec commented Dec 14, 2018 •

edited

kevinmarrec commented Dec 14, 2018 •

edited

NickBolles commented Dec 14, 2018 •

edited

kevinmarrec commented Dec 14, 2018 •

edited

kevinmarrec commented Dec 14, 2018 •

edited

codecov-io commented Dec 15, 2018 •

edited

hartmut-co-uk commented Dec 16, 2018 •

edited

kevinmarrec commented Dec 16, 2018 •

edited